/* Studio page. Monochrome, Funnel Display / Funnel Sans, zero radius, no shadows. */
.st{
  --st-ink:#000;
  --st-paper:#fff;
  --st-hair:#e5e5e5;
  --st-mute:#8f8f8f;
  --st-ease:cubic-bezier(.16,1,.3,1);
  --st-ease-io:cubic-bezier(.77,0,.18,1);
  --st-display:'Funnel Display',Arial,sans-serif;
  position:relative;
  padding-top:calc(12vw + 110px);
  font-family:'Funnel Sans',Arial,sans-serif;
}
.st *{box-sizing:border-box;}
.st-pad{padding:0 var(--gx);}
.st-label{font:700 14px/1 var(--st-display);color:var(--st-mute);margin:0;}
.st h1,.st h2,.st h3{font-family:var(--st-display);font-weight:700;margin:0;}

/* ---------- reveal primitives ---------- */
.st-line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em;}
.st-line > span{display:block;transition:transform 1s var(--st-ease);transition-delay:calc(var(--i,0) * 90ms);}
.st-fade{transition:opacity .9s var(--st-ease),transform .9s var(--st-ease);transition-delay:calc(var(--i,0) * 90ms);}
.st-img{position:relative;overflow:hidden;background:#efefed;}
.st-img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform;}
.st-rule{height:1px;background:var(--st-hair);transform-origin:left;transition:transform 1.2s var(--st-ease);}


/* hidden start states only once JS has taken over */
.st-go .st-line > span{transform:translateY(110%);}
.st-go .in .st-line > span,.st-go .st-line.in > span{transform:none;}
.st-go .st-fade{opacity:0;transform:translateY(24px);}
.st-go .in.st-fade,.st-go .in .st-fade{opacity:1;transform:none;}
.st-img::after{content:'';position:absolute;inset:-1px;background:var(--st-paper);transform-origin:top;transform:scaleY(0);pointer-events:none;}
.st-go .st-img::after{transform:scaleY(1);transition:transform 1.2s var(--st-ease);}
.st-go .st-img.in::after,.st-go .in .st-img::after{transform:scaleY(0);}
.st-go .st-rule{transform:scaleX(0);}
.st-go .st-rule.in{transform:none;}

/* ---------- 01 hero ---------- */
.st-hero{padding-bottom:120px;}
.st-title{
  font-size:clamp(52px,12.4vw,188px);
  line-height:.9;
  letter-spacing:-.04em;
  margin-top:28px !important;
}
.st-hero-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;
  margin-top:72px;align-items:start;
}
.st-hero-lede{grid-column:1 / 6;display:flex;flex-direction:column;gap:56px;padding-top:8px;}
.st-lede{font-size:22px;font-weight:500;line-height:120%;margin:0;}
.st-hero-a{grid-column:6 / 12;grid-row:1;aspect-ratio:4/5;}

/* ---------- 03 process, pinned horizontal ---------- */
.st-proc{position:relative;height:420vh;}
.st-proc-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--st-paper);}
.st-proc-top{
  position:absolute;left:var(--gx);right:var(--gx);top:96px;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
}
.st-proc-top .st-label{color:#000;}
.st-count{font:700 14px/1 var(--st-display);display:flex;gap:6px;align-items:center;}
.st-count i{font-style:normal;display:inline-block;overflow:hidden;height:1em;position:relative;width:1.6ch;}
.st-count i b{display:block;font-weight:700;transition:transform .6s var(--st-ease);}
.st-bar{position:absolute;left:var(--gx);right:var(--gx);top:128px;height:1px;background:var(--st-hair);z-index:2;}
.st-bar > span{display:block;height:100%;background:#000;transform-origin:left;transform:scaleX(0);will-change:transform;}
.st-track{display:flex;height:100%;width:max-content;will-change:transform;}
.st-panel{
  width:100vw;height:100%;flex:0 0 100vw;
  padding:176px var(--gx) 64px;
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;align-items:center;
}
.st-num{
  grid-column:1 / 6;font:700 clamp(140px,22vw,340px)/.8 var(--st-display);letter-spacing:-.06em;
  align-self:end;
}
.st-panel-copy{grid-column:1 / 6;grid-row:2;display:flex;flex-direction:column;gap:20px;align-self:start;}
.st-panel h3{font-size:clamp(36px,4.4vw,68px);line-height:1;letter-spacing:-.03em;}
.st-panel p{margin:0;font-size:22px;font-weight:500;line-height:120%;max-width:26ch;}
.st-visual{grid-column:7 / 13;grid-row:1 / 3;height:100%;max-height:calc(100vh - 240px);position:relative;overflow:hidden;background:#efefed;}
.st-visual img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);will-change:transform;}
.st-panel.in 
/* ---------- approach ---------- */
.st-approach{padding-block:120px 160px;display:grid;grid-template-columns:repeat(12,1fr);gap:16px;border-top:1px solid var(--st-hair);padding-top:24px;margin-top:40px;}
.st-approach .st-label{grid-column:1 / 5;}
.st-approach-body{grid-column:5 / 13;display:flex;flex-direction:column;gap:40px;}
.st-approach h2{font-size:clamp(36px,5.6vw,88px);line-height:1;letter-spacing:-.03em;max-width:14ch;}
.st-approach .st-lede{max-width:30ch;}

/* ---------- made by one ---------- */
.st-made{padding-block:200px 160px;}
.st-made-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.st-made-grid article{display:flex;flex-direction:column;gap:12px;}
.st-made-grid .st-img{aspect-ratio:4/5;margin-bottom:12px;}
.st-made-grid h3{font-size:clamp(24px,2.4vw,36px);line-height:1;letter-spacing:-.03em;}
.st-made-grid p{margin:0;font-size:16px;font-weight:500;line-height:120%;max-width:28ch;}

/* ---------- close ---------- */
.st-close{padding-block:120px 200px;text-align:center;}
.st-close h2{font-size:clamp(52px,10vw,160px);line-height:.92;letter-spacing:-.04em;max-width:12ch;margin:0 auto !important;text-wrap:balance;}
.st-close-row{display:flex;flex-direction:column;align-items:center;gap:16px;margin:56px auto 0;max-width:350px;text-align:left;}
.st-close-row p{font-size:16px;font-weight:500;line-height:120%;margin:0;}

/* ---------- mobile ---------- */
@media (max-width:767px){
  .st-approach{display:flex;flex-direction:column;gap:24px;padding-block:72px 96px;}
  .st-approach h2{max-width:none;}
  .st-made{padding-block:96px;}
  .st-made-grid{grid-template-columns:1fr;gap:40px;}
  .st{padding-top:110px;}
  .st-hero{padding-bottom:72px;}
  .st-hero-grid{margin-top:40px;gap:24px;}
  .st-hero-lede{grid-column:1 / -1;grid-row:1;gap:24px;}
  .st-lede{font-size:18px;}
  .st-hero-a{grid-column:1 / -1;grid-row:2;}
  .st-proc{height:auto;}
  .st-proc-pin{position:relative;height:auto;overflow:visible;}
  .st-proc-top,.st-bar{display:none;}
  .st-track{display:block;width:auto;transform:none !important;}
  .st-panel{width:auto;height:auto;flex:none;display:flex;flex-direction:column;gap:24px;padding:64px var(--gx);align-items:stretch;border-top:1px solid var(--st-hair);}
  .st-num{font-size:120px;order:1;}
  .st-visual{order:2;aspect-ratio:1/1;height:auto;max-height:none;}
  .st-panel-copy{order:3;}
  .st-panel p{font-size:18px;}
  .st-close{padding-block:72px 120px;}
}

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion:reduce){
    .st-line > span,.st-fade,.st-rule{transform:none !important;opacity:1 !important;transition:none !important;}
  .st-img::after{transform:scaleY(0) !important;transition:none !important;}
  .st-img img,.st-visual img{transform:none !important;}
}