/* Home page only (front matter styles: home.css). Signal: the job from start to finish, the ticker, the industry index. */
.mega, .big { font-family: var(--display); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.mega { font-size: clamp(3rem, 8.1vw, 7.4rem); }
.big { font-size: clamp(2.6rem, 6vw, 6rem); }
:is(.mega, .big) :is(.l1, .l2) { display: block; }
.tone-ink :is(.mega, .big) .l2 { color: #9eabbd; }
.tone-paper :is(.mega, .big) .l2 { color: #59626e; }
.tone-orange :is(.mega, .big) .l2 { color: var(--ink); }
:is(.mega, .big) em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--fg); }
.tone-orange .big em:not(.hl) { display: inline-block; padding: 0 .12em .02em; border-radius: var(--r); background: var(--ink); color: var(--paper); transform: rotate(-2deg); }
.mt-3 { margin-top: clamp(28px, 4vw, 48px); }

/* ───────── Hero ───────── */
.hero { padding: clamp(24px, 2.6vw, 36px) 0 clamp(64px, 7vw, 96px); overflow: hidden; }
.hero .mega { font-size: clamp(2.7rem, 5vw, 4.5rem); }
.hero .labels { margin-bottom: clamp(16px, 2vw, 24px); }
.hero .tag-ghost { border-color: rgba(251, 248, 243, .3); color: #b7c2d0; }
.hero .mega { margin: 0 0 clamp(14px, 2vw, 24px) -.04em; color: var(--paper); }
.hero .mega .l2 { white-space: nowrap; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.hero-copy { padding-top: 8px; }
.hero-lede { display: grid; gap: 14px; max-width: 34rem; }
.hero-lede p { margin: 0; }
.hero-lede p:not(.lede) { color: #c3cbd6; font-size: 1rem; line-height: 1.55; }
.hero .actions { margin-top: 26px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 22px 0 0; font: 500 .72rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #b7c2d0; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust svg { width: 14px; height: 14px; color: var(--sun); }

/* one job, start to finish: a line of phases, bot and person side by side (orange = a person, ink = the bot) */
.proc { position: relative; margin: 0 8px 4px 0; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--r); box-shadow: 8px 8px 0 var(--sun); padding: clamp(16px, 1.8vw, 24px); display: grid; gap: 14px; min-width: 0; }
.proc-top { display: grid; gap: 10px; }
.proc-cap { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #3d4856; }
.proc-cap .tag { color: var(--ink); border-color: rgba(14, 27, 42, .35); }
.proc-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0; padding: 0; font: 400 .74rem/1.3 var(--body); color: #3d4856; }
.proc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.who { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 8px 4px 6px; border-radius: 2px; font: 500 .64rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.who-bot { background: var(--ink); color: var(--paper); }
.who-person { background: var(--sun); color: var(--ink); }
.who-i { width: 14px; height: 14px; flex: none; }
.who-bot .who-i { color: var(--paper); }
.who-bot .who-i rect[fill="var(--paper)"] { fill: var(--ink); }

/* static layout is the default: every phase in order, nothing hidden (no script, or reduced motion) */
.proc-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.ph { position: relative; padding: 0 0 20px 46px; }
.ph::before, .ph::after { content: ''; position: absolute; left: 13px; top: 28px; bottom: -2px; width: 2px; background: rgba(14, 27, 42, .18); }
.ph::after { background: var(--sun); transform-origin: top; transform: scaleY(var(--f, 1)); }
.ph:last-child::before, .ph:last-child::after { display: none; }
.ph-btn { display: flex; align-items: center; gap: 12px; position: relative; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 28px; }
.ph-n { position: absolute; left: -46px; top: 0; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper); font: 500 .68rem/1 var(--mono); letter-spacing: .02em; }
.ph-name { font: 600 1.05rem/1.2 var(--display); letter-spacing: -.02em; }
.ph-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.ph-scene { border: 1px solid rgba(14, 27, 42, .22); background: rgba(14, 27, 42, .035); aspect-ratio: 240 / 124; }
.ph-scene svg { display: block; width: 100%; height: 100%; }
.ph-h { display: none; margin: 0; color: var(--ink); font: 700 clamp(1.7rem, 2.5vw, 2.3rem)/1 var(--display); letter-spacing: -.04em; }
.ph-job { margin: 0; font: 400 .74rem/1.4 var(--mono); letter-spacing: .02em; color: #3d4856; }
.ph-lead { margin: 8px 0 10px; font: 500 .66rem/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #8a3a00; }
.ph[data-lead="bot"] .ph-lead { color: var(--ink); }
.ph-text { min-width: 0; }
.line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 8px; padding: 10px 12px; font-size: .94rem; line-height: 1.4; border-left: 4px solid var(--ink); background: rgba(14, 27, 42, .05); }
.line .who { margin-top: 1px; min-width: 6.4rem; justify-content: flex-start; }
.line-person { border-left-color: var(--sun); background: rgba(255, 122, 26, .13); }
.ph.done .ph-n { background: var(--ink); color: var(--paper); }
.ph.on .ph-n { background: var(--sun); border-color: var(--ink); }
.ph:focus-within .ph-btn, .ph-btn:focus-visible { outline: none; }
.ph-btn:focus-visible .ph-n { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (min-width: 560px) { .ph-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* live view: one phase open at a time. Phones: a vertical line, the open phase unfolds under its name */
.proc.is-live .ph:not(.on) .ph-body { display: none; }
.proc.is-live .ph { padding-bottom: 6px; }
.proc.is-live .ph.on { padding-bottom: 18px; }
.proc.is-live .ph.on .ph-name { font-size: 1.3rem; }
.proc.is-live .ph-btn:hover .ph-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ph::marker { content: none; }
.proc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(14, 27, 42, .2); }
.proc-bar[hidden] { display: none; }
.pc { padding: 8px 12px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 500 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.pc:hover { background: var(--ink); color: var(--paper); }
.pc:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.pc-n { margin-left: auto; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; color: #3d4856; }

.proc.is-live .ph.on .ph-body { min-height: var(--bh, 0); align-content: start; }
@media (max-width: 700px) {
  .proc.is-live .ph.on { padding-left: 40px; }
  .ph-n { left: -40px; }
  .ph { padding-left: 40px; }
  .line { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .line .who { justify-self: start; min-width: 0; }
}

/* wide screens: the phases sit on one line, left to right, the open one is shown big underneath */
@media (min-width: 1081px) {
  .proc.is-live .proc-rail { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 0; padding-bottom: 4px; }
  .proc.is-live .proc-rail::before, .proc.is-live .proc-rail::after { content: ''; position: absolute; left: 5%; right: 5%; top: 13px; height: 2px; background: rgba(14, 27, 42, .18); }
  .proc.is-live .proc-rail::after { background: var(--sun); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .15s linear; }
  .proc.is-live .ph { display: contents; }
  .proc.is-live .ph::before, .proc.is-live .ph::after { display: none; }
  .proc.is-live .ph-btn { grid-row: 1; flex-direction: column; align-items: center; gap: 8px; z-index: 1; padding-bottom: 12px; text-align: center; }
  .proc.is-live .ph-n { position: static; }
  .proc.is-live .ph-name { font: 500 .56rem/1.25 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: #3d4856; overflow-wrap: anywhere; hyphens: manual; }
  .proc.is-live .ph.on .ph-name { font-size: .56rem; color: var(--ink); text-decoration: none; font-weight: 500; }
  .proc.is-live .ph-btn::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: 0; height: 4px; background: var(--ink); }
  .proc.is-live .ph[data-lead="person"] .ph-btn::after { background: var(--sun); }
  .proc.is-live .ph[data-lead="shared"] .ph-btn::after { background: linear-gradient(90deg, var(--ink) 50%, var(--sun) 50%); }
  .proc.is-live .ph-body { grid-row: 2; grid-column: 1 / -1; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(14, 27, 42, .2); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; align-content: start; }
  .proc.is-live .ph-h { display: block; }
  .proc.is-live .ph-job { margin-top: 8px; }
  .proc.is-live .line { font-size: .9rem; padding: 8px 12px; }
  .proc.is-live .ph-lead { margin: 6px 0 8px; }
  .proc.is-live .ph.on .ph-body > * { animation: ph-in .6s var(--ease, ease) both; }
}
@keyframes ph-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* what happens inside each scene: slow, once, then it holds */
.is-anim .ph.on .pop { animation: sc-pop .8s var(--d, 0s) both; }
.is-anim .ph.on .draw { stroke-dasharray: 1; animation: sc-draw 1s var(--d, 0s) both; }
.is-anim .ph.on .grow { transform-box: fill-box; transform-origin: bottom; animation: sc-grow .9s var(--d, 0s) both; }
.is-anim .ph.on .drop { animation: sc-drop .9s var(--d, 0s) both; }
.is-anim .ph.on .slide { animation: sc-slide 2.6s 2.8s ease-in-out both; }
.is-anim .ph.on .walk { animation: sc-walk 5s ease-in-out infinite alternate; }
.is-anim .ph.on .arm { animation: sc-arm 3.6s ease-in-out infinite alternate; }
.is-anim .ph.on .eye { transform-box: fill-box; transform-origin: center; animation: sc-blink 4.8s infinite; }
@keyframes sc-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sc-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sc-drop { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes sc-slide { from { transform: translateX(0); } to { transform: translateX(26px); } }
@keyframes sc-walk { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes sc-arm { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes sc-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* ───────── Ticker: one slow, steady pass (home.js moves it at about 28px a second) ───────── */
.ticker { background: var(--sun); color: var(--ink); overflow: hidden; border-block: 2px solid var(--ink); padding: 14px 0; }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-track span { display: inline-flex; align-items: center; font: 500 clamp(1.1rem, 2.2vw, 1.9rem)/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.ticker-track span::after { content: ''; display: inline-block; width: .5em; height: .5em; margin: 0 .8em; background: var(--ink); border-radius: 50%; }
.ticker-track span:nth-child(3n+2)::after { border-radius: 2px; transform: rotate(45deg); }
html:not(.js) .ticker-track, .ticker-track.is-static { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 10px; padding: 0 var(--pad); }

/* ───────── Three things ───────── */
.things-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.thing { padding: 24px clamp(16px, 2.4vw, 32px) 8px 0; border-right: 1px solid var(--rule); }
.thing + .thing { padding-left: clamp(16px, 2.4vw, 32px); }
.thing:last-child { border-right: 0; }
.thing-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(14px, 2vw, 24px); }
.num { padding: 6px 8px 5px; border: 1px solid currentColor; border-radius: 3px; font: 500 .78rem/1 var(--mono); letter-spacing: .06em; }
.glyph { width: clamp(110px, 13vw, 180px); height: auto; color: var(--ink); }
.thing h3 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1; margin-bottom: 14px; }
.thing p { max-width: 26rem; }
.flow-dot-run { offset-path: path('M14 92C34 92 34 28 60 28S86 92 106 92'); offset-rotate: 0deg; animation: flowDot 4s cubic-bezier(.6, 0, .4, 1) infinite alternate; }
@keyframes flowDot { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.glyph .hand, .glyph .hand2, .glyph .star { transform-origin: 60px 60px; transition: transform 1.6s var(--ease); }
.thing.is-in .hand, .thing:hover .hand { transform: rotate(300deg); }
.thing.is-in .hand2, .thing:hover .hand2 { transform: rotate(-60deg); }
.thing.is-in .star { transform: rotate(45deg); }
.thing:hover .star { transform: rotate(180deg) scale(1.08); }

/* ───────── Industry index: rows that rewrite themselves, a panel that follows ───────── */
.index-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.row { position: relative; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: clamp(14px, 1.6vw, 22px) 12px; margin: 0 -12px; border-bottom: 1px solid var(--rule); color: var(--paper); text-decoration: none; isolation: isolate; }
.row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-radius: 3px; transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.row:hover { color: var(--ink); }
.row-n { font: 500 .78rem/1 var(--mono); letter-spacing: .06em; color: var(--amber); transform: translateY(-.5em); }
.row-t { font: 600 clamp(1.7rem, 2.9vw, 3rem)/1 var(--display); letter-spacing: -.04em; }
.row-go { font: 400 1.8rem/1 var(--body); color: var(--sun); opacity: 0; transform: translate(-10px, 6px); transition: opacity .3s, transform .45s var(--ease); }
.row-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row.on { color: var(--ink); }
.row.on::before { transform: none; }
.row.on .row-n { color: #a04500; }
.row.on .row-go { opacity: 1; transform: none; color: var(--ink); }
.row:focus-visible { outline-offset: 0; }
.ix-panel { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 22px; min-height: 420px; padding: clamp(20px, 2.4vw, 32px); overflow: hidden; border: 1px solid var(--rule); border-radius: var(--r); background: rgba(14, 27, 42, .75); }
.ix-panel::after { content: ''; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--sun); opacity: .92; transform: scale(var(--sunS, 1)); transition: transform .8s var(--ease); }
.ix-panel > * { position: relative; z-index: 1; margin: 0; }
.ix-q { font: 400 clamp(1.9rem, 2.7vw, 2.7rem)/1.05 var(--serif); font-style: italic; letter-spacing: -.01em; color: var(--paper) !important; }
.ix-who { max-width: 22rem; font: 500 .74rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #9eabbd !important; }
.ix-bar { height: 3px; margin-top: auto; background: var(--rule); }
.ix-bar i { display: block; height: 100%; width: 16.6%; background: var(--amber); transition: width .6s var(--ease); }
.ix-go { display: flex; align-items: center; gap: 12px; color: var(--paper) !important; }
.ix-arrow { font-size: 1.6rem; }
.ix-panel.swap :is(.ix-q, .ix-who) { animation: swapIn .55s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(14px); } }

/* ───────── Demos: the whole section is orange; the cards become one ink-ruled grid ───────── */
.demos .cards-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.demos .cards-demo > * { border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0; }
.demos .cards-demo .card { isolation: isolate; overflow: hidden; min-height: 300px; background: transparent; transform: none !important; box-shadow: none !important; transition: color .3s; }
.demos .cards-demo .card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.demos .cards-demo .card:is(:hover, :focus-within) { --fg: var(--paper); --fg-2: #d9dee6; --mut: #9eabbd; --rule: rgba(251, 248, 243, .25); --rule-2: rgba(251, 248, 243, .6); --focus: var(--amber); }
.demos .cards-demo .card:is(:hover, :focus-within)::before { transform: none; }
.demos .cards-demo .card .pill { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.demos .cards-demo .card:is(:hover, :focus-within) .pill { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.demos .cards-demo .card h3 { margin-top: auto; padding-top: 24px; font-size: clamp(1.7rem, 2.6vw, 2.5rem); line-height: 1; }
.demos .cards-demo .icon-tile { border-color: var(--ink); }
.demos .cards-demo .card .card-link { border-color: currentColor; }
.demos .cards-demo .card-cta-tile { margin: 0; }

/* ───────── Watch it work: seven stages that light up in turn ───────── */
.job-rail { display: flex; align-items: center; gap: 28px; padding: 26px 28px; border: 1px solid var(--rule-2); border-radius: var(--r); background: rgba(14, 27, 42, .7); }
.job-rail ol { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; position: relative; }
.job-rail ol::before { content: ''; position: absolute; left: 21px; right: 21px; top: 21px; height: 1px; background: var(--rule-2); }
.job-rail li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 .72rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg) !important; text-align: center; }
.job-rail .icon-tile { background: var(--ink); transition: background .4s, color .4s, border-color .4s; }
.job-rail li.on .icon-tile { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.job-rail .btn { flex: none; }

/* ───────── Team ───────── */
.team .big { margin-bottom: 28px; }
.team-copy > p:not(.eyebrow) { max-width: 34rem; }
.team .portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.team .portrait.dots canvas { opacity: 1; }
.team .portrait.dots > img { opacity: 0; transition: opacity 1s; }

/* ───────── Responsive ───────── */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .proc { margin: 8px 8px 8px 0; }
  .index-grid { grid-template-columns: 1fr; }
  .ix-panel { display: none; }
  .row-x { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; grid-column: 2 / -1; font-size: .98rem; color: #9eabbd; }
  .row.on .row-x { color: #39424e; }
  .row-go { opacity: 1; transform: none; }
  .job-rail { flex-direction: column; align-items: stretch; }
  .job-rail ol { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  .job-rail ol::before { display: none; }
  .demos .cards-demo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .things-list { grid-template-columns: 1fr; }
  .thing, .thing + .thing { padding: 24px 0 28px; border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 600px) {
  .mega { font-size: clamp(2.7rem, 13.4vw, 4rem); }
  .big { font-size: clamp(2.2rem, 10.2vw, 3.4rem); }
  .hero .mega .l2 { white-space: normal; }
  .row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .row-t { font-size: 1.6rem; }
  .demos .cards-demo { grid-template-columns: 1fr; }
  .demos .cards-demo .card { min-height: 0; }
  .job-rail { padding: 20px; }
  .job-rail ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-inner h2 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}

/* Reduced motion: everything in place, nothing loops */
@media (prefers-reduced-motion: reduce) {
  .flow-dot-run { animation: none !important; }
  .job-rail li .icon-tile { background: var(--sun); border-color: var(--sun); color: var(--ink); }
}