/* ==========================================================================
   What We Do section, iterations (Alex, 2026-11-10).

   Source: run 2 Home, the two-tone statement (.stmt, .hm-why, .kick, .alink,
   .t-body in website-2/assets/css/site.css; board element Agriswara b03).
   Changes from run 2: white page, the mark in ink rather than teal.
   ========================================================================== */

.wt { --wt-sec: clamp(88px, 10vw, 156px); --wt-g1: #DAD8D6; --wt-g4: #61635C; background: var(--bg); color: var(--ink); padding: var(--wt-sec) 0; }
.wt-wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wt-lead { display: grid; gap: 26px; }

/* label with the plates mark */
.kick { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
.kick svg { width: 18px; height: 18px; }

/* the statement fills word by word on scroll */
.stmt { margin: 0; font-family: var(--logo); font-weight: 400; font-size: clamp(26px, 2.75vw, 42px); line-height: 1.22; letter-spacing: -.025em; max-width: 30ch; text-wrap: pretty; }
.stmt .w { color: var(--wt-g1); transition: color .25s linear; }
.stmt .w.on { color: var(--ink); }

/* the note and the link */
.wt-note { display: grid; gap: 14px; justify-items: start; }
.wt-note p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--wt-g4); text-wrap: pretty; }
.alink { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.alink svg { width: 13px; height: 13px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.alink:hover svg { transform: rotate(-45deg); }

/* Iteration 1: as run 2. Statement left, note low on the right. */
.wt-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px 64px; align-items: end; }

/* On Home (Alex, 2026-11-10): smaller type, two paragraphs, the note level with the statement's last line */
.wt--home .wt-split { row-gap: 26px; }
.wt--home .wt-lead { display: contents; }
.wt--home .kick { grid-column: 1; justify-self: start; }
.wt--home .stmt { grid-column: 1; font-size: clamp(23px, 2.35vw, 36px); line-height: 1.24; max-width: 35ch; }
.wt--home .wt-note { grid-column: 2; grid-row: 2; align-self: end; }
.stmt-p { display: block; }
.stmt-p + .stmt-p { margin-top: .72em; }

/* Iteration 2: one sentence, full width, with the note on a ruled line below. */
.wt--xl .stmt { font-size: clamp(38px, 7.8vw, 124px); line-height: 1.02; letter-spacing: -.04em; max-width: 19ch; }
.wt-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 64px; margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--line); }
.wt-foot .wt-note { grid-column: 2; }

/* Iteration 3: a large photograph on top, the statement beneath it. */
.wt--image { padding-top: 0; }
.wt-photo { position: relative; height: clamp(320px, 74vh, 760px); margin-bottom: clamp(64px, 7.5vw, 112px); overflow: hidden; }
.wt-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: grayscale(1) contrast(1.08); }
.wt--image .stmt { font-size: clamp(30px, 4.1vw, 62px); line-height: 1.1; letter-spacing: -.033em; max-width: 24ch; }

/* room to scroll, so the statement can finish filling; the next section takes this place */
.wt-runway { height: 60vh; background: var(--bg); }

/* entrance for the label and the note, as run 2 */
.fb-js .wt [data-anim] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.fb-js .wt [data-anim].in { opacity: 1; transform: none; }

/* the nav turns solid black once the hero starts to scroll, so the hero's buttons pass beneath it */
html.nav-scrolled.nav-over:not(.menu-open) .nav { background: #000; }

/* then solid white once the page leaves the black hero */
html.nav-past.nav-over:not(.menu-open) .nav { background: var(--bg); border-bottom-color: var(--line); }
html.nav-past.nav-light .nav .brand, html.nav-past.nav-light .nav-links a[aria-current="page"] { color: var(--ink); }
html.nav-past.nav-light .nav-links a { color: var(--muted); }
html.nav-past.nav-light .nav-links a:hover { color: var(--ink); background: var(--hover); }
html.nav-past.nav-light .nav-end .nav-cta { background: var(--ink); color: #fff; }
html.nav-past.nav-light .menu-btn { color: var(--ink); border-color: var(--line); }

@media (max-width: 767px) {
  .wt-split { grid-template-columns: minmax(0, 1fr); }
  .wt--home .wt-note { grid-column: 1; grid-row: auto; }
  .wt-foot { grid-template-columns: minmax(0, 1fr); }
  .wt-foot .wt-note { grid-column: 1; }
  .wt-photo { height: 56vh; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-js .wt [data-anim] { opacity: 1; transform: none; transition: none; }
  .stmt .w { transition: none; }
}