/* Loominate case study pages. Same tokens as the home page; sections alternate light and navy */
:root{
  --bg:#f3f5f9; --surface:#ffffff; --ink:#18233b; --muted:#4d5a72; --line:#dbe1ea; --ghost:#77839a; --todo-bg:#fff1c2; --todo-ink:#5a3d00;
  --gold:#f2b432; --gold-ink:#241900; --accent-text:#93610a; --band:#18233b; --band-ink:#e8edf6; --band-muted:#a9b5ca;
  --display:"Nunito",ui-rounded,system-ui,sans-serif;
  --body:"Nunito Sans",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:1080px}
.measure{max-width:720px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5.4vw,3.8rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.2rem}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.eyebrow{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
section{padding-block:80px}
.dark{--bg:var(--band);--surface:color-mix(in srgb,var(--band) 86%,#ffffff);--ink:var(--band-ink);--muted:var(--band-muted);--line:rgba(255,255,255,.14);--accent-text:var(--gold);--ghost:rgba(255,255,255,.6);--todo-bg:rgba(242,180,50,.25);--todo-ink:#ffe2a0;background:var(--bg);color:var(--ink);color-scheme:dark}
.todo{background:var(--todo-bg);color:var(--todo-ink);border-radius:4px;padding:0 4px;font-weight:700}
.nowrap{white-space:nowrap}

/* logo */
.bulb-ink{stroke:var(--ink)} .bulb-gold{stroke:var(--gold)}
.logo{display:inline-flex;flex-direction:column;align-items:stretch;text-decoration:none}
.word{display:flex;align-items:baseline;font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.word{align-items:center}
.word .mark{width:.8em;height:1.07em;flex:none;margin:-.08em .16em -.08em 0}
.w-loom{font-weight:900}
.w-inate{font-weight:600}
.dark .w-inate{color:var(--gold)}
.logo .thread{width:0;min-width:100%;height:auto;margin-top:-1px}

/* nav */
nav{padding-block:22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
nav .word{font-size:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;background:var(--gold);color:var(--gold-ink);font-family:var(--display);font-weight:800;font-size:1rem;text-decoration:none;padding:12px 22px;border-radius:999px;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ghost)}
.btn.ghost:hover{border-color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--muted);text-decoration:none;min-height:44px}
.back:hover{color:var(--ink)}

/* hero */
.hero{padding-block:24px 72px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:56px;align-items:start}
.hero-text{display:flex;flex-direction:column;gap:18px}
.hero-text .lede{font-size:1.2rem;color:var(--muted);max-width:44ch}
.glance{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:2px}
.glance h2{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.glance dl{margin:0;display:flex;flex-direction:column}
.glance div{padding-block:10px;border-top:1px solid var(--line)}
.glance dt{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin:2px 0 0;font-size:.98rem}
.glance small{color:var(--muted);font-size:.82rem;margin-top:10px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:28px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.1)}
.stat{background:var(--bg);padding:36px 30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.stat .what{font-family:var(--display);font-weight:800;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.stat .num{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--accent-text)}
.stat p{color:var(--ink);font-size:1rem}
.stat.lead{grid-column:span 1}

/* short version */
.short{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;margin-top:24px;padding:0;list-style:none}
.short li{padding-left:28px;position:relative;color:var(--muted)}
.short li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;border:3px solid var(--gold)}
.short b{color:var(--ink)}

/* problem */
.prose{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.prose p{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips span{font-family:var(--display);font-weight:800;font-size:.9rem;padding:8px 14px;border-radius:999px;background:var(--surface);border:2px solid var(--line)}

/* workflow lanes */
.lanes{display:flex;flex-direction:column;gap:34px;margin-top:36px}
.lane{display:flex;flex-direction:column;gap:14px}
.lane-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lane-label b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.lane-label span{color:var(--muted);font-size:.92rem}
.steps-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px}
.steps-row i{font-style:normal;font-weight:800;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;font-size:.95rem;line-height:1.25;border:2px solid var(--line);background:transparent}
.pill svg{width:18px;height:18px;flex:0 0 auto}
.before .pill{color:var(--muted);border-style:dashed}
.after .pill.auto{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--ink)}
.after .pill.person{background:var(--surface);color:var(--ink)}
.after .steps-row i{color:var(--gold)}
.timebar{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.timebar span{display:block;height:100%;border-radius:999px}
.before .timebar span{background:var(--band-muted);opacity:.55}
.after .timebar span{background:var(--gold)}
.key{display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin-top:4px}
.key span{display:inline-flex;align-items:center;gap:8px}
.key svg{width:18px;height:18px}

/* built */
.cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.built{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.built li{padding:16px 0 16px 30px;border-bottom:1px solid var(--line);position:relative;color:var(--muted)}
.built li:first-child{border-top:1px solid var(--line)}
.built li::before{content:"";position:absolute;left:4px;top:1.45em;width:10px;height:10px;border-radius:50%;border:3px solid var(--gold)}
.built b{color:var(--ink)}
.control{margin-top:26px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.control p{color:var(--muted)}

/* quote */
.quote{display:flex;flex-direction:column;gap:18px;max-width:820px}
.quote blockquote{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;letter-spacing:-.01em}
.quote blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--gold);margin-bottom:8px}
.quote cite{font-style:normal;color:var(--muted)}
.placeholder{border:2px dashed var(--line);border-radius:16px;padding:24px}

/* cta + next */
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.cta p{color:var(--muted);margin-top:14px;max-width:44ch}
.cta .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:26px 28px;background:var(--surface);border:1px solid var(--line);border-radius:16px;text-decoration:none}
.next:hover{border-color:var(--gold)}
.next .t{display:flex;flex-direction:column;gap:4px}
.next b{font-family:var(--display);font-weight:800;font-size:1.25rem}
.next span{color:var(--muted)}
.next .arrow{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--accent-text)}
footer{padding-block:28px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .word{font-size:22px}

@media (max-width:820px){
  .hero,.stats,.short,.cols,.cta{grid-template-columns:1fr}
  section{padding-block:60px}
  .hero{gap:32px}
}
@media (max-width:520px){
  nav .word{font-size:28px}
  nav .btn{min-height:44px;padding:10px 16px;font-size:.92rem}
  .cta .actions{width:100%}
  .cta .actions .btn{width:100%}
}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px;list-style:none;padding:0}
.timeline li{border-top:3px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.timeline .wk{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--accent-text)}
.timeline p{color:var(--muted);font-size:.98rem}
.outcome{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border-radius:16px;overflow:hidden;background:var(--line)}
.outcome div{background:var(--surface);padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.outcome b{font-family:var(--display);font-weight:800;font-size:1.25rem}
.ref{margin-top:22px;color:var(--muted)}
@media (max-width:820px){.timeline,.outcome{grid-template-columns:1fr}}

/* workflow illustration */
.flow-img{display:block;margin-top:32px}
.flow-img img{display:block;width:100%;height:auto;border-radius:18px}
@media (max-width:640px){.flow-img img{max-width:420px;margin-inline:auto}}

/* people and decisions */
.decisions{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.decisions li{padding-left:26px;position:relative;color:var(--ink)}
.decisions li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.team-change{display:flex;flex-direction:column;gap:12px;margin-top:18px;max-width:720px}
.team-change p{color:var(--muted);font-size:1.08rem}

.flow-note{margin-top:24px;max-width:62ch;color:var(--muted);font-size:1.08rem}