/* ============================================================
   HUMOTIX — WHAT WE DO (capabilities page)
   Loads after studio.css. Adds only what that file doesn't have:
   the capability rows, the signature band, the sector list and
   the six product mockups. Everything is scoped under .st-cap-page
   so nothing leaks into the studio home.
   ============================================================ */

.st-cap-page{
  --c-ink:   var(--ink, #130F10);
  --c-ink-2: #1C1718;
  --c-paper: var(--paper, #F6F2EE);
  --c-paper-2: #EDE7E1;
  --c-ember: var(--ember, #C25540);
  --c-ember-2: #D96B52;
  --c-stone: #8A817C;
  --c-line-d: rgba(246,242,238,.10);
  --c-line-l: rgba(19,15,16,.10);
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Hero ---------- */
.st-cap-hero{ padding-top:clamp(150px,18vw,240px); padding-bottom:clamp(80px,10vw,140px); }
.st-cap-hero .st-h1{ max-width:12ch; }
.st-cap-hero-foot{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,7vw,120px); margin-top:clamp(56px,7vw,104px); align-items:end;
}
.st-cap-hero-foot .st-sub{ max-width:44ch; margin:0; }

.st-cap-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-line-d); }
.st-cap-index li{ border-bottom:1px solid var(--c-line-d); }
.st-cap-index a{
  display:flex; align-items:baseline; gap:20px; padding:14px 0;
  font-family:var(--f-display); font-size:clamp(16px,1.3vw,19px);
  color:inherit; text-decoration:none; opacity:.72;
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.st-cap-index a span{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; color:var(--c-ember); min-width:22px;
}
.st-cap-index a:hover, .st-cap-index a:focus-visible{ opacity:1; transform:translateX(6px); }

/* ---------- Capability rows ---------- */
.st-cap{ scroll-margin-top:88px; }
.st-cap-stack{ padding-top:0; padding-bottom:0; }
.st-cap-stack > .st-cap{
  padding-block:clamp(96px,12vw,180px);
  border-top:1px solid var(--c-line-l);
}
.st-cap-stack > .st-cap:first-child{ border-top:0; }

.st-cap-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(40px,7vw,120px); align-items:center;
}
.st-cap-row-flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.st-cap-row-flip .st-cap-copy{ order:2; }
.st-cap-row-flip .st-cap-visual{ order:1; }

.st-cap-n{
  display:flex; align-items:center; gap:14px; margin:0 0 20px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; color:var(--c-ember);
}
.st-cap-badge{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; border:1px solid currentColor;
}
.st-cap-title{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.6rem,5vw,5rem); line-height:.95; letter-spacing:-.04em;
  margin:0 0 28px;
}
.st-cap-title .st-rise{ display:block; }
.st-cap-lead{ font-size:clamp(18px,1.4vw,20px); line-height:1.6; max-width:42ch; margin:0 0 32px; opacity:.86; }

.st-cap-list{ list-style:none; margin:0; padding:0; max-width:42ch; }
.st-cap-list li{
  display:flex; gap:16px; padding:13px 0;
  border-top:1px solid var(--c-line-l); font-size:16px; line-height:1.45;
}
.st-cap-list li::before{
  content:''; flex:none; width:14px; height:1px; margin-top:.72em; background:var(--c-ember);
}
.theme-dark .st-cap-list li{ border-color:var(--c-line-d); }

.st-cap-note{
  margin:32px 0 0; padding-left:18px; max-width:42ch;
  border-left:1px solid var(--c-ember);
  font-family:var(--f-serif); font-style:italic; font-size:clamp(19px,1.5vw,22px); line-height:1.45; opacity:.9;
}

/* Signature band gets a faint ember glow so it reads as the centre of the page. */
.st-cap-signature{ position:relative; overflow:hidden; }
.st-cap-signature::before{
  content:''; position:absolute; inset:auto -20% -40% auto; width:70vw; height:70vw; pointer-events:none;
  background:radial-gradient(closest-side, rgba(194,85,64,.10), transparent 70%);
}
.st-cap-signature .st-wrap{ position:relative; }

/* ---------- Mockup frame ---------- */
.st-cap-visual{ position:relative; }
.mk{
  position:relative; border-radius:20px; overflow:hidden;
  background:#fff; color:var(--c-ink);
  border:1px solid var(--c-line-l);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 50px 100px -40px rgba(19,15,16,.35), 0 18px 40px -24px rgba(19,15,16,.25);
  font-family:var(--f-display);
  transition:transform .8s var(--ease);
}
.st-cap-visual:hover .mk{ transform:translateY(-6px); }
.theme-dark .mk{
  background:var(--c-ink-2); color:var(--c-paper); border-color:var(--c-line-d);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
}
.mk-bar{
  display:flex; align-items:center; gap:10px; padding:16px 22px;
  border-bottom:1px solid var(--c-line-l);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.75;
}
.theme-dark .mk-bar{ border-color:var(--c-line-d); }
.mk-bar-r{ margin-left:auto; opacity:.6; }
.mk-dot{ width:7px; height:7px; border-radius:50%; background:#3BA776; box-shadow:0 0 0 4px rgba(59,167,118,.15); }
.mk-ember{ color:var(--c-ember) !important; }

/* 01 Chat */
.mk-chat{ max-width:520px; margin-left:auto; }
.mk-chat-body{ padding:26px 22px 10px; display:flex; flex-direction:column; gap:14px; }
.mk-msg{ margin:0; font-size:15.5px; line-height:1.5; max-width:84%; }
.mk-user{
  align-self:flex-end; background:var(--c-ink); color:var(--c-paper);
  padding:12px 16px; border-radius:18px 18px 4px 18px;
}
.mk-bot{ align-self:flex-start; }
.mk-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.mk-chips span{ font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid var(--c-line-l); }
.mk-foot{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:14px 22px;
  border-top:1px solid var(--c-line-l); background:var(--c-paper);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
.mk-tick{ color:#3BA776; font-size:14px; }
/* On an ink band the card is dark but .mk-foot still forced a paper
   background, leaving paper-coloured text on a paper strip — the line read as
   a lone tick. Give the foot a dark tint there instead. */
.theme-dark .mk-foot{ background:rgba(246,242,238,.05); border-top-color:var(--c-line-d); }

/* 02 Reconciliation */
.mk-rec-kpis{ display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--c-line-d); }
.mk-rec-kpis div{ padding:22px; }
.mk-rec-kpis div + div{ border-left:1px solid var(--c-line-d); }
.mk-rec-kpis b{ display:block; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.03em; line-height:1; }
.mk-rec-kpis span{ display:block; margin-top:8px; font-size:13px; opacity:.6; }
.mk-rec-table{ width:100%; border-collapse:collapse; font-size:14px; }
.mk-rec-table th{
  text-align:left; font-family:var(--f-mono); font-weight:500; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.5; padding:14px 22px 10px;
}
.mk-rec-table td{ padding:13px 22px; border-top:1px solid var(--c-line-d); white-space:nowrap; }
.mk-rec-table .r{ text-align:right; font-variant-numeric:tabular-nums; }
.mk-ok, .mk-flag{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
}
.mk-ok{ color:#6FCB9F; background:rgba(59,167,118,.12); }
.mk-flag{ color:var(--c-ember-2); background:rgba(194,85,64,.14); }

/* 03 Learning */
.mk-learn{ padding:0 0 26px; max-width:600px; margin-left:auto; }
.mk-tabs{
  display:flex; gap:22px; padding:18px 24px 0; border-bottom:1px solid var(--c-line-l);
  font-size:14px; overflow:hidden; white-space:nowrap;
}
.mk-tabs span{ padding-bottom:14px; opacity:.5; }
.mk-tabs span.on{ opacity:1; border-bottom:2px solid var(--c-ink); }
.mk-tabs i{ font-style:normal; font-family:var(--f-mono); font-size:11px; opacity:.6; margin-left:4px; }
.mk-card{
  margin:26px 24px 0; padding:28px; border-radius:16px;
  background:var(--c-paper); border:1px solid var(--c-line-l);
}
.mk-card-k{ margin:0 0 16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.mk-card-q{ margin:0 0 18px; font-size:clamp(19px,1.7vw,23px); font-weight:600; line-height:1.3; letter-spacing:-.01em; }
.mk-card-a{ margin:0; padding-top:18px; border-top:1px dashed var(--c-line-l); font-size:15px; line-height:1.55; opacity:.8; }
.mk-card-actions{ display:flex; gap:8px; margin-top:22px; }
.mk-card-actions span{ flex:1; text-align:center; font-size:13px; padding:10px; border-radius:999px; border:1px solid var(--c-line-l); }
.mk-card-actions span.on{ background:var(--c-ink); color:var(--c-paper); border-color:var(--c-ink); }
.mk-progress{ margin:22px 24px 0; height:3px; border-radius:3px; background:var(--c-line-l); overflow:hidden; }
.mk-progress span{ display:block; height:100%; background:var(--c-ember); }

/* 04 Dashboard */
.mk-dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.mk-tile{ padding:24px 22px; border-bottom:1px solid var(--c-line-l); }
.mk-tile + .mk-tile{ border-left:1px solid var(--c-line-l); }
.mk-tile span{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; }
.mk-tile b{ display:block; margin-top:12px; font-size:clamp(30px,3vw,42px); letter-spacing:-.035em; line-height:1; }
.mk-tile em{ display:inline-block; margin-top:10px; font-style:normal; font-size:13px; color:#2E8B60; }
.mk-tile-wide{ grid-column:1 / -1; border-left:0 !important; border-bottom:0; color:var(--c-ember); }
.mk-tile-wide span{ color:var(--c-ink); }
.mk-tile-wide svg{ display:block; width:100%; height:110px; margin-top:18px; }

/* 05 Brand */
.mk-brand{ padding:30px; max-width:560px; margin-left:auto; }
.mk-spec{ display:flex; align-items:center; gap:26px; padding-bottom:26px; border-bottom:1px solid var(--c-line-l); }
.mk-spec-aa{ margin:0; font-size:clamp(70px,7vw,104px); font-weight:700; letter-spacing:-.05em; line-height:.85; }
.mk-spec-name{ margin:0; font-size:18px; font-weight:600; }
.mk-spec-meta{ margin:6px 0 10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; opacity:.55; text-transform:uppercase; }
.mk-spec-serif{ margin:0; font-family:var(--f-serif); font-size:24px; }
.mk-swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:26px; }
.sw{ aspect-ratio:3/4; border-radius:12px; padding:12px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.sw span{ font-size:13px; font-weight:600; }
.sw code{ font-family:var(--f-mono); font-size:10px; opacity:.7; }
.sw-ink{ background:var(--c-ink); color:var(--c-paper); }
.sw-paper{ background:var(--c-paper); border:1px solid var(--c-line-l); }
.sw-ember{ background:var(--c-ember); color:var(--c-paper); }
.sw-stone{ background:var(--c-stone); color:var(--c-paper); }
.mk-brand-ui{ display:flex; gap:12px; margin-top:26px; align-items:center; }
.mk-btn{ font-size:14px; font-weight:500; padding:13px 24px; border-radius:999px; background:var(--c-ember); color:var(--c-paper); }
.mk-btn-ghost{ background:none; color:var(--c-ink); padding-inline:4px; }

/* 06 Video */
.mk-video{ background:var(--c-ink); color:var(--c-paper); border-color:transparent; }
.mk-screen{
  position:relative; aspect-ratio:16/9; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(194,85,64,.22), transparent 60%),
    linear-gradient(180deg, #221B1C, #130F10);
}
.mk-play{
  width:68px; height:68px; border-radius:50%;
  background:rgba(246,242,238,.12); border:1px solid rgba(246,242,238,.25);
  backdrop-filter:blur(8px); position:relative;
}
.mk-play::after{
  content:''; position:absolute; left:52%; top:50%; transform:translate(-40%,-50%);
  border-left:16px solid var(--c-paper); border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.mk-caption{
  position:absolute; left:0; right:0; bottom:22px; margin:0; text-align:center;
  font-family:var(--f-serif); font-style:italic; font-size:clamp(17px,1.6vw,22px);
}
.mk-time{ position:absolute; top:16px; right:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; opacity:.6; }
.mk-timeline{ position:relative; padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.mk-track{ height:26px; border-radius:6px; display:flex; gap:4px; }
.mk-track-v i{ border-radius:6px; background:rgba(246,242,238,.14); }
.mk-track-v i:nth-child(2){ background:rgba(194,85,64,.55); }
.mk-track-a{ color:var(--c-ember-2); background:rgba(246,242,238,.05); padding:0 6px; }
.mk-track-a svg{ width:100%; height:100%; }
.mk-playhead{ position:absolute; top:12px; bottom:16px; width:1px; background:var(--c-paper); }
.mk-playhead::before{ content:''; position:absolute; top:-4px; left:-4px; width:9px; height:9px; border-radius:50%; background:var(--c-paper); }

/* ---------- Strategy wrap ---------- */
.st-cap-strategy{ background:var(--c-paper-2); }
.st-cap-strategy-in{ max-width:1100px; }
.st-cap-quote{
  margin:0 0 36px; font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem,4.2vw,4.2rem); line-height:1.02; letter-spacing:-.035em;
}
.st-cap-quote .st-rise{ display:block; }
.st-cap-strategy .st-body{ max-width:58ch; }

/* ---------- Sectors ---------- */
.st-sector-list{ list-style:none; margin:clamp(56px,7vw,96px) 0 0; padding:0; border-top:1px solid var(--c-line-d); }
.st-sector{
  display:grid; grid-template-columns:60px minmax(0,4fr) minmax(0,5fr);
  grid-template-areas:"n h b" "n p b";
  column-gap:clamp(24px,4vw,64px); row-gap:10px;
  padding:clamp(32px,4vw,52px) 0; border-bottom:1px solid var(--c-line-d);
  transition:background .5s var(--ease);
}
.st-sector-n{ grid-area:n; font-family:var(--f-mono); font-size:13px; letter-spacing:.14em; color:var(--c-ember); padding-top:.5em; }
.st-sector h3{ grid-area:h; margin:0; font-family:var(--f-display); font-weight:600; font-size:clamp(24px,2.6vw,36px); letter-spacing:-.025em; line-height:1.05; }
.st-sector > p:not(.st-sector-build){ grid-area:p; margin:0; font-size:16px; line-height:1.55; opacity:.7; max-width:40ch; }
.st-sector-build{ grid-area:b; margin:0; align-self:center; font-size:15px; line-height:1.6; opacity:.85; }
.st-sector-build span{
  display:block; margin-bottom:8px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5;
}

/* ---------- Close ---------- */
.st-cap-close .st-ctas{ margin-top:clamp(36px,4vw,56px); }

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .st-cap-hero-foot{ grid-template-columns:1fr; }
  .st-cap-row, .st-cap-row-flip{ grid-template-columns:1fr; }
  .st-cap-row-flip .st-cap-copy{ order:1; }
  .st-cap-row-flip .st-cap-visual{ order:2; }
  .mk-chat, .mk-learn, .mk-brand{ max-width:none; margin-left:0; }
  .st-sector{ grid-template-columns:40px 1fr; grid-template-areas:"n h" "n p" "n b"; }
  .st-sector-build{ margin-top:12px; }
}
@media (max-width:560px){
  .mk-rec-table th:nth-child(2), .mk-rec-table td:nth-child(2){ display:none; }
  .mk-rec-table td, .mk-rec-table th{ padding-inline:16px; }
  .mk-dash-grid{ grid-template-columns:1fr 1fr; }
  .mk-dash-grid .mk-tile:nth-child(3){ grid-column:1 / -1; border-left:0; }
  .mk-tabs{ gap:16px; font-size:13px; }
  .mk-swatches{ grid-template-columns:repeat(2,1fr); }
  .sw{ aspect-ratio:2/1; }
}

@media (prefers-reduced-motion:reduce){
  .mk, .st-cap-index a{ transition:none; }
  .st-cap-visual:hover .mk{ transform:none; }
}