/* ============================================================
   STUDIO v2 — THE FORWARD STEP
   ------------------------------------------------------------
   Loaded by /studio/ only, after home-atomic.css and
   atomic-pages.css. The previous concept (the line-and-star
   story) is retired; git history keeps it.

   One motif, four expressions: everything on this page drifts
   RIGHT as it descends — the direction the name points.

     PAPER   01  the step hero      three lines stepping down-right
     PAPER   02  how we work        three ideas on the same stair
     ORANGE  03  FORWARD            the word leaves the frame,
                                    trailing its echoes
     NAVY    04  built differently  blocks assemble around the core
     PAPER   05  the next step      the question takes the last step

   Orange notes: display-size orange-on-paper is used only at
   large scale (WCAG AA large-text 3:1 — #e0532a on #faf8f5 is
   3.64:1); body-size orange stays --signal-ink (4.9:1). Ink on
   orange is 4.9:1.
   ============================================================ */

/* ---------- 01 the step hero ------------------------------------ */
.sd-hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) var(--at-gut) clamp(64px, 8vw, 128px);
}
.sd-hero__h { margin-top: clamp(28px, 3.4vw, 52px); }
.sd-hero__l {
  display: block;
  font-size: clamp(38px, 6.4vw, 92px);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.025em;
}
.sd-hero__l--2 { margin-left: clamp(28px, 7vw, 112px); color: var(--navy); }
.sd-hero__l--3 { margin-left: clamp(56px, 14vw, 224px); }
.sd-hero__l--3 em { font-style: normal; color: var(--signal); }   /* display scale: AA large-text */
.sd-hero__say {
  margin: clamp(28px, 3.4vw, 52px) 0 0 clamp(56px, 14vw, 224px);
  font-size: clamp(16px, 1.35vw, 20px); color: var(--ink-80); max-width: 44ch;
}
/* the location, set as a printer's mark up the right margin */
.sd-hero__geo {
  position: absolute; right: calc(var(--at-gut) * 0.4); bottom: clamp(64px, 8vw, 128px);
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--ink-55); white-space: nowrap;
}

/* ---------- 02 how we work — three ideas on the stair ----------- */
.sd-how { padding: clamp(40px, 5vw, 72px) var(--at-gut) clamp(64px, 8vw, 128px); }
.sd-ideas { display: flex; flex-direction: column; gap: clamp(36px, 4.6vw, 72px); }
.sd-idea {
  display: flex; align-items: baseline; gap: clamp(20px, 2.6vw, 44px);
  flex-wrap: wrap;
}
/* the three ideas traverse the page: left, centre, right */
.sd-idea--2 { justify-content: center; }
.sd-idea--3 { justify-content: flex-end; }
.sd-idea__h {
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  transition: transform 320ms var(--ease-out);
}
.sd-dot { color: var(--signal); }   /* punctuation as signature */
.sd-idea__p { font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-80); max-width: 34ch; }
@media (hover: hover) and (pointer: fine) {
  .sd-idea:hover .sd-idea__h { transform: translateX(10px); }
}

/* ---------- 03 FORWARD — the interlude -------------------------- */
.sd-fwd {
  background: var(--signal); color: var(--ink);
  overflow: hidden;
  padding: clamp(28px, 3.6vw, 56px) var(--at-gut) clamp(24px, 3vw, 44px);
}
.sd-fwd__stack {
  position: relative;
  width: max-content;
  margin: -0.06em 0 0 auto;             /* crops the cap height a touch; rides right */
  margin-right: -0.55em;                /* the word is already leaving the frame */
  font-size: clamp(88px, 19vw, 280px);
  font-weight: 600; line-height: 0.82; letter-spacing: -0.045em; text-transform: uppercase;
}
.sd-fwd__word { position: relative; display: block; }
.sd-fwd__ghost { position: absolute; inset: 0; }
.sd-fwd__ghost--1 { transform: translateX(-0.34em); opacity: 0.2; }
.sd-fwd__ghost--2 { transform: translateX(-0.68em); opacity: 0.09; }
.sd-fwd__note { margin-top: clamp(12px, 1.6vw, 24px); color: var(--ink); }

/* ---------- 04 built differently — the cluster ------------------ */
.sd-built {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s7); align-items: center;
  padding-bottom: clamp(72px, 8.3vw, 120px);
}
.sd-built__copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
.sd-built__eye { color: var(--signal-lift); }
.sd-built__eye .at-star { color: var(--signal-lift); }
.sd-built__h span { display: block; font-size: clamp(28px, 3.4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.sd-built__step { margin-left: clamp(24px, 3.4vw, 56px); margin-top: clamp(10px, 1.4vw, 20px); }
.sd-built__p { font-size: clamp(16px, 1.3vw, 19px); color: rgba(250, 248, 245, 0.78); max-width: 44ch; margin-left: clamp(24px, 3.4vw, 56px); }
/* the cluster: outlined blocks find their place around the solid core */
.sd-cluster { position: relative; width: min(100%, 380px); aspect-ratio: 5 / 4; justify-self: end; }
.sd-cluster__core, .sd-cluster__b { position: absolute; display: block; }
.sd-cluster__core { left: 30%; top: 34%; width: 26%; aspect-ratio: 1; background: var(--signal); }
.sd-cluster__b { border: 1px solid rgba(250, 248, 245, 0.42); aspect-ratio: 1; }
.sd-cluster__b--1 { left: 8%;  top: 10%;  width: 15%; }
.sd-cluster__b--2 { left: 62%; top: 16%;  width: 20%; }
.sd-cluster__b--3 { left: 66%; top: 52%;  width: 13%; }
.sd-cluster__b--4 { left: 14%; top: 62%;  width: 18%; }
.sd-cluster__b--5 { left: 46%; top: 74%;  width: 11%; }

/* the cluster's caption — the point of the picture, in five words */
.sd-cluster__cap { position: absolute; top: 100%; right: 0; margin-top: 16px; color: rgba(250, 248, 245, 0.62); white-space: nowrap; }

/* ---------- 05 the next step — the close ------------------------ */
.sd-close { padding: clamp(72px, 9vw, 140px) var(--at-gut) clamp(72px, 9vw, 140px); }
.sd-close__h span { display: block; font-size: clamp(40px, 6vw, 88px); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; }
.sd-close__l2 { margin-left: clamp(40px, 9vw, 144px); display: flex; align-items: center; }
.sd-close__mark {
  display: inline-block; width: 0.16em; height: 0.16em;
  background: var(--signal); margin-right: 0.34em; flex: 0 0 auto;
}
.sd-close__note { margin: clamp(28px, 3.4vw, 44px) 0 0 clamp(40px, 9vw, 144px); font-size: 15px; color: var(--ink-55); }
.sd-close__acts {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  margin: 18px 0 0 clamp(40px, 9vw, 144px);
}

/* ============================================================
   MOTION — the page steps forward, one pass each
   ============================================================ */
/* the hero lines wipe in left-to-right, one step after another */
.js-motion .sd-hero__h .sd-hero__l {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 640ms var(--ease-out);
}
.js-motion .sd-hero__h .sd-hero__l--2 { transition-delay: 150ms; }
.js-motion .sd-hero__h .sd-hero__l--3 { transition-delay: 300ms; }
.js-motion .sd-hero__h.is-in .sd-hero__l { clip-path: inset(0 -2% 0 0); }
.js-motion .sd-hero__say, .js-motion .sd-hero__geo,
.js-motion .sd-built__copy > *, .js-motion .sd-close__acts {
  opacity: 0; transform: translateX(-14px);
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.js-motion .sd-hero__say.is-in, .js-motion .sd-hero__geo.is-in,
.js-motion .sd-built__copy > .is-in, .js-motion .sd-close__acts.is-in { opacity: 1; transform: none; }
/* each idea wipes in; its copy follows */
.js-motion .sd-idea .sd-idea__h { clip-path: inset(0 100% 0 0); transition: clip-path 620ms var(--ease-out); }
.js-motion .sd-idea .sd-idea__p { opacity: 0; transform: translateX(-12px); transition: transform 480ms var(--ease-out) 240ms, opacity 400ms var(--ease-out) 240ms; }
.js-motion .sd-idea.is-in .sd-idea__h { clip-path: inset(0 -2% 0 0); }
.js-motion .sd-idea.is-in .sd-idea__p { opacity: 1; transform: none; }
/* FORWARD steps out of its trail */
.js-motion .sd-fwd__stack .sd-fwd__word { transform: translateX(-0.68em); transition: transform 760ms var(--ease-out); }
.js-motion .sd-fwd__stack .sd-fwd__ghost--1 { transform: translateX(-0.68em); opacity: 0; transition: transform 760ms var(--ease-out) 70ms, opacity 400ms var(--ease-out) 70ms; }
.js-motion .sd-fwd__stack .sd-fwd__ghost--2 { opacity: 0; transition: opacity 400ms var(--ease-out) 140ms; }
.js-motion .sd-fwd__stack.is-in .sd-fwd__word { transform: none; }
.js-motion .sd-fwd__stack.is-in .sd-fwd__ghost--1 { transform: translateX(-0.34em); opacity: 0.2; }
.js-motion .sd-fwd__stack.is-in .sd-fwd__ghost--2 { opacity: 0.09; }
.js-motion .sd-fwd__note { opacity: 0; transition: opacity 420ms var(--ease-out) 500ms; }
.js-motion .sd-fwd__note.is-in { opacity: 1; }
.js-motion .sd-close__note { opacity: 0; transform: translateX(-10px); transition: transform 480ms var(--ease-out) 200ms, opacity 400ms var(--ease-out) 200ms; }
.js-motion .sd-close__note.is-in { opacity: 1; transform: none; }
.js-motion .sd-cluster .sd-cluster__cap { opacity: 0; transition: opacity 420ms var(--ease-out) 560ms; }
.js-motion .sd-cluster.is-in .sd-cluster__cap { opacity: 1; }
/* the cluster assembles around the core */
.js-motion .sd-cluster .sd-cluster__core { transform: scale(0.6); opacity: 0; transition: transform 520ms var(--ease-out), opacity 360ms var(--ease-out); }
.js-motion .sd-cluster .sd-cluster__b { opacity: 0; transition: transform 640ms var(--ease-out), opacity 420ms var(--ease-out); }
.js-motion .sd-cluster .sd-cluster__b--1 { transform: translate(-24px, -18px); transition-delay: 140ms; }
.js-motion .sd-cluster .sd-cluster__b--2 { transform: translate(26px, -16px); transition-delay: 220ms; }
.js-motion .sd-cluster .sd-cluster__b--3 { transform: translate(28px, 14px); transition-delay: 300ms; }
.js-motion .sd-cluster .sd-cluster__b--4 { transform: translate(-26px, 18px); transition-delay: 380ms; }
.js-motion .sd-cluster .sd-cluster__b--5 { transform: translate(12px, 26px); transition-delay: 460ms; }
.js-motion .sd-cluster.is-in .sd-cluster__core,
.js-motion .sd-cluster.is-in .sd-cluster__b { transform: none; opacity: 1; }
/* the new sections take the same quiet step in */
.js-motion .sd-why > *, .js-motion .sd-proc__x > div,
.js-motion .sd-fit > *, .js-motion .sd-founder > * {
  opacity: 0; transform: translateX(-14px);
  transition: transform 520ms var(--ease-out), opacity 420ms var(--ease-out);
}
.js-motion .sd-why > .is-in, .js-motion .sd-proc__x > div.is-in,
.js-motion .sd-fit > .is-in, .js-motion .sd-founder > .is-in { opacity: 1; transform: none; }
/* the closing question wipes, the mark lands */
.js-motion .sd-close__h span { clip-path: inset(0 100% 0 0); transition: clip-path 640ms var(--ease-out); }
.js-motion .sd-close__h .sd-close__l2 { transition-delay: 170ms; }
.js-motion .sd-close__h.is-in span { clip-path: inset(0 -2% 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js-motion .sd-hero__h .sd-hero__l, .js-motion .sd-idea .sd-idea__h, .js-motion .sd-close__h span {
    clip-path: none !important; transition: none !important;
  }
  .js-motion .sd-hero__say, .js-motion .sd-hero__geo,
  .js-motion .sd-built__copy > *, .js-motion .sd-close__acts, .js-motion .sd-idea .sd-idea__p,
  .js-motion .sd-fwd__stack .sd-fwd__word, .js-motion .sd-fwd__note,
  .js-motion .sd-cluster .sd-cluster__core, .js-motion .sd-cluster .sd-cluster__b,
  .js-motion .sd-why > *, .js-motion .sd-proc__x > div,
  .js-motion .sd-fit > *, .js-motion .sd-founder > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .js-motion .sd-close__note, .js-motion .sd-cluster .sd-cluster__cap { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js-motion .sd-fwd__stack .sd-fwd__ghost--1 { transform: translateX(-0.34em) !important; opacity: 0.2 !important; transition: none !important; }
  .js-motion .sd-fwd__stack .sd-fwd__ghost--2 { opacity: 0.09 !important; transition: none !important; }
  .sd-idea__h { transition: none !important; }
}

/* ============================================================
   RESPONSIVE — the stair flattens, the drama stays
   ============================================================ */
@media (max-width: 860px) {
  .sd-hero { padding-bottom: clamp(48px, 8vw, 80px); }
  /* the location mark returns to the flow, under the copy */
  .sd-hero__geo { position: static; writing-mode: horizontal-tb; transform: none; white-space: normal; max-width: 24ch; margin: 20px 0 0 clamp(32px, 8vw, 96px); }
  .sd-hero__l--2 { margin-left: clamp(20px, 5vw, 48px); }
  .sd-hero__l--3 { margin-left: clamp(40px, 10vw, 96px); }
  .sd-hero__say { margin-left: clamp(40px, 10vw, 96px); }
  .sd-built { grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .sd-cluster { justify-self: start; width: min(70%, 300px); }
}
@media (max-width: 560px) {
  .sd-hero__l { font-size: clamp(30px, 8.6vw, 38px); }
  .sd-hero__l--2 { margin-left: 16px; }
  .sd-hero__l--3 { margin-left: 32px; }
  .sd-hero__say { margin-left: 32px; }
  .sd-hero__geo { margin-left: 32px; }
  .sd-idea__h { font-size: clamp(26px, 7.4vw, 32px); }
  .sd-idea { row-gap: 10px; }
  .sd-close__h span { font-size: clamp(32px, 9vw, 42px); }
  .sd-close__l2 { margin-left: 24px; }
  .sd-close__acts { margin-left: 24px; }
  .sd-close__acts .at-btn { flex: 1 1 100%; }
}

/* ---------- 04b the method — six words on one rule ----------- */
.sd-proc { padding: clamp(22px, 2.6vw, 36px) var(--at-gut); border-top: 1px solid rgba(14, 17, 23, 0.2); border-bottom: 1px solid rgba(14, 17, 23, 0.2); }
.sd-proc__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.sd-proc__row b { font-weight: 500; color: var(--signal-ink); margin-right: 2px; }
.sd-proc__row i { font-style: normal; color: var(--ink-55); }
@media (hover: hover) and (pointer: fine) {
  .sd-proc__row span { transition: transform 240ms var(--ease-out); }
  .sd-proc__row span b { transition: color 180ms var(--ease-out); }
  .sd-proc__row span:hover { transform: translateX(4px); }
  .sd-proc__row span:hover b { color: var(--signal); }
}
@media (max-width: 560px) { .sd-proc__row { justify-content: flex-start; } .sd-proc__row i { display: none; } .sd-proc__row span { flex: 0 0 44%; } }
/* the six words, expanded — one plain sentence each */
.sd-proc__x { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); margin-top: clamp(28px, 3vw, 44px); }
.sd-proc__x b { display: block; color: var(--signal-ink); }
.sd-proc__x p { margin-top: 10px; font-size: 15px; color: var(--ink-80); max-width: 40ch; }

/* ---------- 03b · why — the origin, stepping right ------------- */
.sd-why { padding: clamp(64px, 7.5vw, 120px) var(--at-gut) clamp(56px, 6.5vw, 104px); }
.sd-why__h { margin-top: var(--s3); font-size: clamp(32px, 4vw, 56px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.sd-why__body { margin-left: clamp(24px, 6vw, 120px); margin-top: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--s3); max-width: 58ch; }
.sd-why__body p { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); }

/* ---------- the founder card (hidden until real material) ------ */
.sd-founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6); align-items: center; padding: clamp(64px, 7.5vw, 120px) var(--at-gut); }
.sd-founder__ph { margin: 0; border: 2px solid var(--ink); background: var(--paper-2); }
.sd-founder__ph img { display: block; width: 100%; height: auto; }
.sd-founder__h { margin-top: var(--s3); font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.02em; }
.sd-founder__p { margin-top: var(--s2); font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); max-width: 52ch; }

/* ---------- the filter ----------------------------------------- */
.sd-fit { padding: clamp(64px, 7.5vw, 120px) var(--at-gut); border-top: 1px solid rgba(14, 17, 23, 0.2); }
.sd-fit__h { font-size: clamp(30px, 3.8vw, 52px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }
.sd-fit__say { margin-top: var(--s2); font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-80); max-width: 52ch; }
.sd-fit__cols { margin-top: clamp(28px, 3.4vw, 48px); margin-left: clamp(24px, 6vw, 120px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); max-width: 880px; }
.sd-fit__cols ul { list-style: none; margin-top: var(--s2); }
.sd-fit__cols li { padding: 12px 0; border-top: 1px solid rgba(14, 17, 23, 0.14); font-size: clamp(15px, 1.2vw, 17px); color: var(--ink-80); }

/* ---------- responsive: the new sections ----------------------- */
@media (max-width: 1100px) {
  .sd-proc__x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sd-why__body, .sd-fit__cols { margin-left: 0; }
  .sd-fit__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .sd-founder { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
}
@media (max-width: 640px) {
  .sd-proc__x { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}