/* ── Case study detail ─────────────────────────────────────────────
   Structured after huptechweb.com/our-work: a dark, stat-forward hero,
   dark story sections carrying the work, then a white Impact block and a
   white grid of the other studies. Used by the six featured studies; the
   older long-form pages keep case.css. */
:root{--ink:#0A0A0A;--paper:#fff;--smoke:#F5F5F3;--line:#E7E7E4;--mute:#6B6B6B;
  --gold:#EFC63F;--night:#070707;--dim:rgba(255,255,255,.58);
  /* the gold reads as a highlight on black and as nothing at all on white,
     so labels on the light bands use a darkened version that still passes
     contrast against paper and smoke */
  --goldink:#876711}

.stwrap{max-width:1240px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.stwrap{padding:0 44px}}

/* ── hero ── */
.st-hero{background:var(--night);color:#fff;position:relative;overflow:hidden;
  padding:120px 0 0}
@media(min-width:900px){.st-hero{padding:150px 0 0}}
.st-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 82% 22%,rgba(239,198,63,.16),transparent 62%),
             radial-gradient(60% 50% at 8% 78%,rgba(255,255,255,.06),transparent 60%)}
.st-hero>*{position:relative;z-index:1}
.st-back{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  text-decoration:none;margin-bottom:34px;transition:color .25s}
.st-back:hover{color:#fff}
.st-back svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.st-htop{display:grid;gap:44px;align-items:end}
@media(min-width:1000px){.st-htop{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px}}
.st-h1{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.055em;line-height:.92;
  font-size:clamp(3.2rem,8.4vw,6rem);color:#fff;margin:0 0 20px}
.st-sub{font-size:clamp(1.05rem,2.2vw,1.42rem);line-height:1.5;color:rgba(255,255,255,.72);
  max-width:32ch;margin:0 0 26px}
/* The numbers moved out of the hero and into Results, so the hero is one
   column again and the standfirst can run to a proper measure. */
@media(min-width:1000px){.st-htop.is-solo{grid-template-columns:minmax(0,1fr)}}
.st-htop.is-solo .st-sub{max-width:44ch;font-size:clamp(1.1rem,2.4vw,1.6rem)}
.st-tags{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px}
.st-tags span{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:8px 16px;
  color:rgba(255,255,255,.8)}

/* the numbers, in the hero and again in Impact */
.st-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px 26px}
@media(min-width:600px){.st-stats{gap:32px 34px}}
.st-stat b{display:block;font-family:'Archivo',sans-serif;font-weight:800;
  letter-spacing:-.045em;line-height:1;font-size:clamp(1.75rem,4.2vw,2.4rem);color:#fff}
.st-stat i{display:block;font-style:normal;font-size:13.5px;line-height:1.45;
  color:var(--dim);margin-top:9px}

.st-hero-shot{margin:56px 0 0;padding-bottom:0}
@media(min-width:900px){.st-hero-shot{margin-top:76px}}
.st-hero-shot img{width:100%;height:auto;display:block;border-radius:18px 18px 0 0;
  border:1px solid rgba(255,255,255,.12);border-bottom:none;background:#111}

/* A hero image that closes the dark hero rather than bleeding into another
   dark band. Used since the section below the hero became light. */
.st-hero-shot.is-closed{padding-bottom:96px}
@media(min-width:900px){.st-hero-shot.is-closed{padding-bottom:120px}}
.st-hero-shot.is-closed img{border-radius:18px;border-bottom:1px solid rgba(255,255,255,.12)}

/* ── The Project ───────────────────────────────────────────────────
   A light band directly under the dark hero: the record on the left as a
   card that stays with you while the overview scrolls on the right. The
   facts used to sit at the very bottom of the page, which is the last
   place someone scanning a case study looks for them. */
.st-proj{background:var(--paper);color:var(--ink);padding:80px 0}
@media(min-width:900px){.st-proj{padding:108px 0}}
.st-proj-grid{display:grid;gap:38px}
@media(min-width:960px){
  .st-proj-grid{grid-template-columns:minmax(0,332px) minmax(0,1fr);
    gap:64px;align-items:start}
}
.st-card{border:1px solid var(--line);border-radius:20px;background:var(--smoke);
  padding:26px 26px 28px}
@media(min-width:960px){.st-card{position:sticky;top:104px}}
.st-card-name{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.038em;
  font-size:23px;line-height:1.14;color:var(--ink);margin:0}
.st-card-sub{font-size:13px;line-height:1.5;color:var(--mute);margin:6px 0 0}
.st-card-row{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.st-card-k{display:block;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--goldink);
  margin-bottom:9px}
.st-card-v{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;line-height:1.4;
  letter-spacing:-.02em;color:var(--ink);margin:0}
.st-card-v span{display:block;font-weight:500;font-size:13px;line-height:1.5;
  letter-spacing:0;color:var(--mute);margin-top:5px}
.st-card-pills{display:flex;flex-wrap:wrap;gap:7px}
.st-card-pills span{font-family:'Archivo',sans-serif;font-weight:600;font-size:12px;
  line-height:1.35;background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:8px 12px;color:#3C3A36}

.st-proj-h{font-family:'Archivo',sans-serif;font-weight:400;letter-spacing:-.045em;
  line-height:1.02;font-size:clamp(2.1rem,5vw,3.1rem);color:var(--ink);margin:0 0 24px}
.st-proj-h b{font-weight:800}
.st-proj-p{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.75;color:#44423E;
  max-width:64ch;margin:0}
.st-proj-p+.st-proj-p{margin-top:18px}

/* ── the spine: 01–04 down a dotted rule ───────────────────────────
   The page used to be two undifferentiated paragraphs of story. Numbering
   the four moves — what it had to do, what was in the way, what we made,
   what shipped — is what makes it scannable, and the rule is what keeps
   the four reading as one sequence rather than four loose sections. */
.st-spine{background:var(--night);color:#fff;padding:82px 0 90px}
@media(min-width:900px){.st-spine{padding:112px 0 120px}}
.st-steps{position:relative}
@media(min-width:820px){
  .st-steps::before{content:'';position:absolute;left:23px;top:26px;bottom:30px;
    border-left:1px dashed rgba(255,255,255,.2)}
}
.st-step{position:relative}
.st-step+.st-step{margin-top:62px}
@media(min-width:820px){
  .st-step{padding-left:96px}
  .st-step+.st-step{margin-top:82px}
}
.st-num{display:inline-grid;place-items:center;width:47px;height:47px;border-radius:50%;
  background:var(--gold);color:#0A0A0A;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:14px;letter-spacing:-.01em;margin-bottom:16px}
@media(min-width:820px){.st-num{position:absolute;left:0;top:0;margin:0}}
.st-step-h{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.005em;
  line-height:1.06;font-size:clamp(1.45rem,3.2vw,2rem);text-transform:uppercase;
  color:#fff;margin:0 0 16px}
/* Wide enough and the heading moves out to its own column, so the reading
   measure stays comfortable instead of leaving half the page empty beside it. */
.st-body{min-width:0}
@media(min-width:1100px){
  .st-step{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
    gap:0 60px;align-items:start}
  .st-step-h{grid-column:1;margin:0;padding-top:2px}
  .st-body{grid-column:2}
  .st-extra{grid-column:1/-1}
}
.st-lead{font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.76;color:rgba(255,255,255,.7);
  max-width:60ch;margin:0}
.st-lead+.st-lead{margin-top:16px}
.st-bul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.st-bul li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.62;
  color:rgba(255,255,255,.74)}
.st-bul li::before{content:'';position:absolute;left:3px;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}

.st-quote{margin:40px 0 0;padding:2px 0 2px 24px;border-left:2px solid var(--gold)}
.st-quote p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.34;color:#fff;margin:0}
.st-quote cite{display:block;font-style:normal;font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:15px}

.st-res-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;margin-top:34px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
@media(min-width:900px){.st-res-stats{grid-template-columns:repeat(4,1fr);gap:30px}}

/* ── dark story sections ── */
.st-dark{background:var(--night);color:#fff;padding:88px 0}
@media(min-width:900px){.st-dark{padding:120px 0}}
.st-dark+.st-dark{padding-top:0}
.st-h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.05em;line-height:1;
  font-size:clamp(2.4rem,6vw,4rem);color:#fff;margin:0 0 30px}
.st-p{font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.78;color:rgba(255,255,255,.66);
  max-width:62ch;margin:0}
.st-p+.st-p{margin-top:20px}
.st-cols{display:grid;gap:30px}
@media(min-width:960px){.st-cols{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px}}

/* the one-word statement between the story halves */
.st-word{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.05em;
  line-height:.95;font-size:clamp(2.6rem,9vw,5.6rem);color:transparent;
  -webkit-text-stroke:1.4px rgba(255,255,255,.34);margin:0;padding:60px 0 0}
.st-word em{font-style:normal;color:var(--gold);-webkit-text-stroke:0}
@media(min-width:900px){.st-word{padding-top:64px}}

/* ── figures on the dark ── */
.st-shot{margin:40px 0 0}
@media(min-width:900px){.st-shot{margin-top:56px}}
.st-extra>.st-shot,.st-extra>.st-shots{margin-top:40px}
@media(min-width:900px){.st-extra>.st-shot,.st-extra>.st-shots{margin-top:48px}}
.st-shot img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid rgba(255,255,255,.12);background:#111}
.st-shot figcaption{font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:14px}
.st-shots{display:grid;gap:18px;margin-top:40px}
@media(min-width:820px){.st-shots{grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}}
.st-shots .st-shot{margin-top:0}

/* ── outcome, on white ───────────────────────────────────────────
   The payoff line at display size, then the project's own record. No
   metric grid: these projects are documented in facts, not percentages,
   and setting a word like "Django" at 3rem under a heading that promises
   results reads as a category error. */
.st-outcome{background:var(--paper);color:var(--ink);padding:84px 0}
@media(min-width:900px){.st-outcome{padding:112px 0}}
.st-out-head{display:grid;gap:16px;margin-bottom:52px}
@media(min-width:860px){
  .st-out-head{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:40px;
    margin-bottom:64px}
}
.st-out-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);padding-top:14px}
.st-out-big{font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:-.035em;
  line-height:1.22;font-size:clamp(1.45rem,3.1vw,2.15rem);color:var(--ink);
  margin:0;max-width:34ch}

/* the record: four rows, quiet, reference-table set */
.st-facts{display:grid;margin:0;border-top:1px solid var(--line)}
@media(min-width:760px){.st-facts{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.st-facts{grid-template-columns:repeat(4,1fr)}}
.st-facts>div{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.st-facts>div:last-child{border-bottom:none}   /* the next block brings its own rule */
@media(min-width:760px){
  .st-facts>div{padding:24px 26px 26px;border-bottom:none;
    border-right:1px solid var(--line)}
  .st-facts>div:nth-child(2n){border-right:none}
  .st-facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .st-facts>div:nth-child(odd){padding-left:0}
  .st-facts>div:last-child{border-bottom:none}
}
@media(min-width:1080px){
  .st-facts>div,
  .st-facts>div:nth-child(-n+2){border-bottom:none}   /* four across: no second row */
  .st-facts>div{border-right:1px solid var(--line);padding-left:26px}
  .st-facts>div:nth-child(2n){border-right:1px solid var(--line)}
  .st-facts>div:first-child{padding-left:0}
  .st-facts>div:last-child{border-right:none;padding-right:0}
}
.st-facts dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.st-facts dd{margin:0;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  line-height:1.4;color:var(--ink);letter-spacing:-.02em}
.st-facts dd span{display:block;font-weight:500;font-size:13px;color:var(--mute);
  letter-spacing:0;margin-top:5px;line-height:1.5}

/* ── what we did ── */
.st-did{margin-top:44px;border-top:1px solid var(--line);padding-top:30px;
  display:grid;gap:18px}
@media(min-width:860px){.st-did{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:40px}}
.st-did-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);padding-top:8px}
.st-chips{display:flex;flex-wrap:wrap;gap:8px}
.st-chips span{font-family:'Archivo',sans-serif;font-weight:600;font-size:12.5px;
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;color:#3C3A36}

/* ── more case studies, on white ── */
.st-more{background:var(--smoke);color:var(--ink);padding:84px 0}
@media(min-width:900px){.st-more{padding:112px 0}}
.st-more .st-h2{color:var(--ink);margin-bottom:44px}
.st-more-grid{display:grid;gap:34px}
@media(min-width:700px){.st-more-grid{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media(min-width:1080px){.st-more-grid{grid-template-columns:repeat(3,1fr);gap:44px 30px}}

/* the card, metric-led like the reference */
.stc{display:block;text-decoration:none;color:inherit}
.stc figure{margin:0 0 20px;aspect-ratio:16/10;overflow:hidden;border-radius:15px;
  background:var(--ink);position:relative}
.stc img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.stc:hover img{transform:scale(1.045)}
.stc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.stc-tags span{font-family:'Archivo',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.stc h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:21px;line-height:1.2;color:var(--ink);margin:0 0 8px}
@media(min-width:1080px){.stc h3{font-size:22px}}
.stc p{font-size:14.5px;line-height:1.6;color:var(--mute);margin:0 0 14px;max-width:40ch}
.stc-go{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12.5px;color:var(--ink)}
.stc-go svg{width:14px;height:14px;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.stc:hover .stc-go svg{transform:translateX(4px)}
.stc:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px}

/* ── closing line ── */
.st-close{background:var(--night);color:#fff;padding:90px 0 96px;text-align:center}
@media(min-width:900px){.st-close{padding:128px 0 134px}}
.st-close h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.05em;
  line-height:1.02;font-size:clamp(2.2rem,6vw,4rem);margin:0 auto 30px;max-width:16ch;color:#fff}
.st-close h2 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.st-cta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:#0A0A0A;
  background:var(--gold);border-radius:100px;padding:15px 30px;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),filter .25s}
.st-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.st-cta svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.st-cta:hover svg{transform:translateX(4px)}

/* ── homepage grid of the six ── */
.csg{display:grid;gap:34px}
@media(min-width:700px){.csg{grid-template-columns:1fr 1fr;gap:30px 26px}}
@media(min-width:1080px){.csg{grid-template-columns:repeat(3,1fr);gap:44px 30px}}
.csc{display:block;text-decoration:none;color:inherit}
.csc figure{margin:0 0 20px;aspect-ratio:16/10;overflow:hidden;border-radius:15px;
  background:var(--ink);border:1px solid var(--line);position:relative}
.csc img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.csc:hover img{transform:scale(1.045)}
.csc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.csc-tags span{font-family:'Archivo',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--line);border-radius:100px;padding:5px 11px}
.csc h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:21px;line-height:1.2;color:var(--ink);margin:0 0 8px}
@media(min-width:1080px){.csc h3{font-size:22px}}
.csc p{font-size:14.5px;line-height:1.6;color:var(--mute);margin:0 0 14px;max-width:40ch}
.csc-go{display:inline-flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;
  font-weight:700;font-size:12.5px;color:var(--ink)}
.csc-go svg{width:14px;height:14px;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.csc:hover .csc-go svg{transform:translateX(4px)}
.csc:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px}

@media(prefers-reduced-motion:reduce){
  .csc:hover img,.stc:hover img,.st-cta:hover{transform:none}
}

/* ── the header floats over the dark hero, then solidifies ── */
.st-nav{background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.st-nav a,.st-nav span{color:#fff}
.st-nav a[href^="https://calendly"]{color:#0A0A0A}
.st-nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom-color:var(--line)}
.st-nav.solid a,.st-nav.solid span{color:var(--ink)}
.st-nav.solid a[href^="https://calendly"]{color:#0A0A0A}

/* ── the work page ─────────────────────────────────────────────────────
   A dark page in the Granth case-studies mould: centred hero, a spotlight
   that cross-fades through the written-up studies, and an index of
   image-only shots that name themselves on hover. Scoped to .wkpage so
   none of it leaks into the case-study pages this file also serves. */
.wkpage{background:#0A0A0A;color:#fff}

/* Section bands.
   Every section used to be transparent over one flat #0A0A0A, so the page read
   as a single black slab from the hero to the footer with nothing to tell the
   parts apart. Each band now sits a step off its neighbours — small steps, so
   the page still reads as one dark theme rather than stripes. */
.wkpage .wk-hero{background:#0A0A0A}
.wkpage .wk-sec-spot{background:#121214;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07)}
.wkpage .wk-sec-index{background:#0A0A0A}
.wkpage .wk-cta-sec{background:#15130E;              /* a warm step toward the gold */
  border-top:1px solid rgba(239,198,63,.18)}
.wkwrap{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.wkwrap{padding:0 40px}}

.wkpage .wk-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.42)}
.wkpage .wk-h1{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.045em;
  line-height:.98;font-size:clamp(2.6rem,6.4vw,5rem);margin:18px 0 0}
.wkpage .wk-h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.045em;
  line-height:1.02;font-size:clamp(2rem,4.4vw,3.3rem);margin:14px 0 0}
.wkpage .serif-i{color:rgba(255,255,255,.72)}
.wkpage .wk-lede{margin-top:16px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.6);
  max-width:60ch}

/* nav */
.wk-nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(10,10,10,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease}
.wk-nav.is-stuck{border-bottom-color:rgba(255,255,255,.1);background:rgba(10,10,10,.9)}
.wk-nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
@media(min-width:900px){.wk-nav-in{height:70px}}
.wk-brand{display:flex;align-items:center;gap:8px;color:#fff}
.wk-brand svg{height:26px;width:auto}
.wk-brand .wordmark{font-size:19px;line-height:1}
/* Below 900px the links move into a drawer behind the burger, the way the
   homepage header works. The old two-row bar was this page's own invention and
   made the header 118px tall on a phone. */
.wk-nav-links{display:none;gap:32px}
@media(min-width:900px){.wk-nav-links{display:flex}}
.wk-nav-end{display:flex;align-items:center;gap:12px}
.wk-burger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;border:1px solid rgba(255,255,255,.22);border-radius:100px;
  background:none;cursor:pointer;flex:none}
@media(min-width:900px){.wk-burger{display:none}}
.wk-burger span{display:block;width:15px;height:1.5px;background:#fff;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.wk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.wk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.wk-mnav{display:none;background:rgba(10,10,10,.97);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.08)}
.wk-mnav.is-open{display:block}
@media(min-width:900px){.wk-mnav,.wk-mnav.is-open{display:none}}
.wk-mnav-in{max-width:1280px;margin:0 auto;padding:6px 24px 22px}
.wk-mnav-link{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 0;font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.wk-mnav-link span{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.wk-mnav-cta{border-bottom:none;color:#EFC63F}
.wk-mnav-cta span{color:#EFC63F}
.wk-nav-links a{font-size:14px;color:rgba(255,255,255,.62);transition:color .25s ease}
.wk-nav-links a:hover,.wk-nav-links a.is-here{color:#fff}
.wk-cta{flex:none;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
  background:#EFC63F;color:#0A0A0A;border-radius:100px;padding:11px 22px;
  transition:background .25s ease,transform .25s ease}
.wk-cta:hover{background:#F6D65E;transform:translateY(-1px)}

/* hero */
.wk-hero{padding:150px 0 72px;text-align:center;position:relative;overflow:hidden}
@media(min-width:1024px){.wk-hero{padding:180px 0 88px}}
.wk-hero::after{content:"";position:absolute;inset:-30% 20% auto;height:60%;z-index:-1;
  background:radial-gradient(closest-side,rgba(239,198,63,.13),transparent 72%)}
.wk-hero .wk-h1{max-width:16ch;margin-inline:auto}
.wk-hero-lede{margin:24px auto 0;max-width:62ch;font-size:15.5px;line-height:1.8;
  color:rgba(255,255,255,.6)}
.wk-hero-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.wk-btn{display:inline-flex;align-items:center;gap:9px;border-radius:100px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;padding:13px 26px;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.wk-btn svg{width:15px;height:15px}
.wk-btn-gold{background:#EFC63F;color:#0A0A0A}
.wk-btn-gold:hover{background:#F6D65E;transform:translateY(-2px)}
.wk-btn-ghost{border:1px solid rgba(255,255,255,.24);color:#fff}
.wk-btn-ghost:hover{border-color:#fff;transform:translateY(-2px)}

.wkpage .wk-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 14px;
  margin:52px auto 0;max-width:880px;padding-top:32px;
  border-top:1px solid rgba(255,255,255,.12)}
@media(min-width:700px){.wkpage .wk-stats{grid-template-columns:repeat(4,1fr);gap:30px}}
.wkpage .wk-stats>div{margin:0}
.wkpage .wk-stats dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:10px}
.wkpage .wk-stats dd{margin:0;font-family:'Archivo',sans-serif;font-weight:800;
  letter-spacing:-.05em;line-height:1;font-size:clamp(1.9rem,4vw,2.6rem);color:#fff}
.wkpage .wk-stats dd span{font-size:.42em;font-weight:700;letter-spacing:0;
  color:rgba(255,255,255,.45);margin-left:3px}
.wk-crumb{margin-top:34px;font-size:12.5px;color:rgba(255,255,255,.38)}
.wk-crumb a{color:rgba(255,255,255,.6)}
.wk-crumb a:hover{color:#fff}
.wk-crumb span{margin:0 8px}

/* sections */
.wk-sec{padding:72px 0}
@media(min-width:1024px){.wk-sec{padding:96px 0}}
.wk-sec-index{border-top:1px solid rgba(255,255,255,.1)}

/* ── spotlight ─────────────────────────────────────────────────────── */
.wk-spot{position:relative;margin-top:40px;border-radius:28px;overflow:hidden;
  background:#121212;min-height:520px;display:flex;align-items:flex-end}
@media(min-width:900px){.wk-spot{min-height:560px}}
.wk-spot-bg{position:absolute;inset:0}
.wk-spot-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.wk-spot-shot.is-live{opacity:1}
.wk-spot-wash{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.88) 34%,
    rgba(10,10,10,.5) 68%,rgba(10,10,10,.7) 100%),
    linear-gradient(0deg,rgba(10,10,10,.75) 0%,rgba(10,10,10,0) 55%)}
.wk-panels{position:relative;z-index:2;width:100%;padding:36px 24px 64px}
@media(min-width:900px){.wk-panels{padding:56px 48px 76px}}
.wk-panel{position:relative}
.wk-panel-in{max-width:58ch;animation:wkIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes wkIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.wk-ghost{position:absolute;top:-34px;right:-6px;z-index:-1;pointer-events:none;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(96px,13.5vw,218px);
  line-height:.8;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.14)}
.wk-pill{display:inline-flex;align-items:center;border-radius:50px;
  background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
  padding:6px 14px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.92)}
.wk-panel h3{margin-top:18px;font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(2.1rem,5.4vw,4.4rem);line-height:.94;letter-spacing:-.035em;color:#fff}
.wk-panel-lede{margin-top:18px;max-width:48ch;font-size:clamp(15px,1.35vw,18px);
  line-height:1.55;color:rgba(255,255,255,.7)}
.wk-facts{margin-top:26px;display:flex;flex-wrap:wrap;gap:22px 40px}
.wk-facts>div{margin:0}
.wk-facts dt{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.35);font-family:'JetBrains Mono',monospace}
.wk-facts dd{margin:6px 0 0;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9)}
.wk-go{display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  border-radius:100px;background:#fff;color:#0A0A0A;padding:13px 24px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;
  transition:background .25s ease,transform .25s ease}
.wk-go svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.wk-go:hover{background:#EFC63F;transform:translateY(-2px)}
.wk-go:hover svg{transform:translateX(4px)}

/* carousel controls: arrows, the progress rail, and the position counter */
.wk-nav-row{position:absolute;left:24px;right:24px;bottom:22px;z-index:3;
  display:flex;align-items:center;gap:14px}
@media(min-width:900px){.wk-nav-row{left:48px;right:48px;gap:18px}}
.wk-arrow{flex:none;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(10,10,10,.35);
  backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.wk-arrow svg{width:16px;height:16px}
.wk-arrow:hover{background:#EFC63F;border-color:#EFC63F;color:#0A0A0A;transform:scale(1.06)}
.wk-arrow:active{transform:scale(.96)}
.wk-counter{flex:none;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.wk-rail{flex:1;display:flex;gap:8px;min-width:0}
.wk-seg{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.18);
  border:0;padding:0;cursor:pointer;position:relative;overflow:hidden}
.wk-seg i{position:absolute;inset:0;width:0;background:#EFC63F;border-radius:3px}
.wk-seg.is-live i{width:100%;transition:none}
.wk-spot.is-playing .wk-seg.is-live i{width:0;animation:wkFill 7s linear forwards}
@keyframes wkFill{to{width:100%}}
.wk-seg:hover{background:rgba(255,255,255,.34)}

/* ── the index ─────────────────────────────────────────────────────── */
.wkpage .wk-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.wkpage .wk-filters button{font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;
  padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:rgba(255,255,255,.78);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.wkpage .wk-filters button span{opacity:.5;margin-left:3px;font-variant-numeric:tabular-nums}
.wkpage .wk-filters button:hover{border-color:rgba(255,255,255,.5);color:#fff}
.wkpage .wk-filters button.active{background:#fff;color:#0A0A0A;border-color:#fff}
.wkpage .wk-filters button.active span{opacity:.55}
.wkpage .wk-scope{align-items:center;gap:8px;margin-top:12px}
.wkpage .wk-scope button{font-size:12.5px;padding:7px 14px}
.wkpage .wk-scope-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:6px}
.wkpage .wk-count{margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.wkpage .wk-empty{margin-top:40px;font-size:15px;color:rgba(255,255,255,.5)}

/* bigger tiles, further apart: three across on a desktop rather than four */
.wk-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:32px}
@media(min-width:560px){.wk-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(min-width:1100px){.wk-grid{grid-template-columns:repeat(3,1fr);gap:32px}}
@media(min-width:1400px){.wk-grid{gap:36px}}

.wk-shot{position:relative;display:block;border-radius:18px;overflow:hidden;
  background:#1A1A1A;aspect-ratio:16/10;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.wk-shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s ease}
.wk-shot-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,.12) 42%,transparent 70%);
  opacity:0;transition:opacity .35s ease}
.wk-shot-label{position:absolute;left:13px;right:13px;bottom:13px;
  display:flex;opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s ease}
.wk-tagpill{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  border-radius:50px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  padding:6px 13px;font-size:12.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.95);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-shot img.is-tall{object-position:top}   /* portrait art: the logo is at the top */
.wk-live{width:6px;height:6px;border-radius:50%;background:#EFC63F;flex:none}

a.wk-shot:hover,a.wk-shot:focus-visible{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.55)}
a.wk-shot:hover img,a.wk-shot:focus-visible img{transform:scale(1.045)}
.wk-shot:hover .wk-shot-veil,.wk-shot:focus-within .wk-shot-veil{opacity:1}
.wk-shot:hover .wk-shot-label,.wk-shot:focus-within .wk-shot-label{opacity:1;transform:none}
div.wk-shot img{opacity:.66}          /* no live site and no write-up: nothing to open */

/* a touch screen has no hover, so the names simply stay on */
@media(hover:none){
  .wk-shot-veil{opacity:1}
  .wk-shot-label{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .wk-shot,.wk-shot img,.wk-shot-label,.wk-shot-veil,.wk-spot-shot,.wk-panel-in{
    transition:none;animation:none}
  .wk-spot.is-playing .wk-seg.is-live i{animation:none;width:100%}
}

/* CTA */
.wk-cta-sec{padding:84px 0 96px;text-align:center;
  border-top:1px solid rgba(255,255,255,.1)}
.wk-cta-sec .wk-lede{margin-inline:auto;text-align:center}
.wk-cta-sec .wk-hero-btns{margin-top:28px}