/* page-specific compositions */

/* ============================================================
   Homepage
   ============================================================ */

/* hero: composed asymmetry - statement left, system motif right */
.hero{
  display:grid;gap:2.5rem;
  padding-block:clamp(3.5rem,9vw,7.5rem) clamp(3rem,7vw,5.5rem);
}
@media(min-width:60rem){
  .hero{grid-template-columns:1.5fr 1fr;gap:4rem;align-items:end}
}
.hero h1{
  max-width:15ch;margin:.9rem 0 1.4rem;
}
.hero h1 em{font-style:italic}
.hero .lede{max-width:33rem}
.hero-role{
  margin:.85rem 0 0;max-width:36rem;
  font-size:var(--step--1);color:var(--ink-faint);line-height:1.55;
}
.hero-cta{margin-top:2.2rem;display:inline-flex;gap:2rem;align-items:center;flex-wrap:wrap}
.hero .areas{
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.35rem 1.3rem;
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-faint);
  list-style:none;
}
.hero .areas li::before{content:"· ";color:var(--accent)}
.hero .areas li:first-child::before{content:""}

/* hero motif: the operating model as a quiet vertical stack */
.hero-motif{border-left:2px solid var(--ink);padding-left:1.4rem;display:grid;gap:.9rem;align-content:end}
.hero-motif span{
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft);
  display:flex;align-items:center;gap:.7rem;
}
.hero-motif span::before{content:"";width:.7rem;height:.7rem;border:1px solid var(--ink);flex-shrink:0}
.hero-motif span.m-human::before{background:var(--ink)}
.hero-motif span.m-auto::before{background:var(--accent);border-color:var(--accent)}
@media(max-width:59.99rem){.hero-motif{margin-top:.5rem;max-width:26rem}}

/* proof strip */
.proof{background:var(--paper-2);border-block:1px solid var(--rule)}
.proof .wrap{padding-block:clamp(2.8rem,6vw,4.5rem)}
.proof-lede{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  margin-bottom:2.4rem;
}
.proof-lede p{font-size:var(--step--1);color:var(--ink-faint);max-width:52ch}

/* ============================================================
   Flagship case studies
   ============================================================ */
.case-open{padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,3.5rem)}
.case-open h1{max-width:16ch;margin:.6rem 0 1.3rem}
.case-open h1:has(+ .deck-lead){margin-bottom:.35rem}
.case-open .deck-lead{
  font-family:var(--mono);font-size:var(--step-0);color:var(--ink-soft);
  margin:0 0 1.1rem;max-width:36ch;line-height:1.45;
}
.case-open .outcome{
  font-family:var(--serif);font-size:var(--step-1);color:var(--ink-soft);
  max-width:36ch;line-height:1.45;
}
.scope{margin-top:.2rem;max-width:40rem}
.scope .role{
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink);
  margin:0 0 .85rem;letter-spacing:.01em;
}
.scope p{color:var(--ink-soft);font-size:var(--step-0);line-height:1.55;margin:0 0 .7rem}
.scope p:last-child{margin-bottom:0}
.case-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2.6rem;margin-top:2.6rem;
  font-family:var(--mono);font-size:var(--step--1);color:var(--ink-faint);
  border-top:1px solid var(--rule);padding-top:1.2rem;
}
.case-meta b{color:var(--ink);font-weight:400;display:block;margin-top:.25rem}

/* two-column editorial body: sticky label + prose */
.split{display:grid;gap:1.4rem;padding-block:clamp(2.4rem,6vw,4rem)}
.split + .split{border-top:1px solid var(--rule)}
@media(min-width:56rem){.split{grid-template-columns:12rem 1fr;gap:4rem}}
.split .rail .mono{position:sticky;top:6rem}
.split .body{max-width:var(--measure)}
.split .body--wide{max-width:var(--wide)}
.split .body h2{margin-bottom:1rem;max-width:22ch}
#evaluation{scroll-margin-top:6rem}
.split .body h3{margin-top:1.6em}
.split .body p+p{margin-top:1.1em}
.split .body>ul{margin:1.1em 0 1.1em 1.3em;color:var(--ink-soft)}
.split .body li{margin-bottom:.35em}
.split .body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.split .body a:hover{color:var(--accent)}

/* big number feature */
.bignum{
  font-family:var(--serif);font-size:var(--step-mega);line-height:.95;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.bignum em{font-style:normal;color:var(--accent)}

/* --- AI Operations: three-model comparison --- */
.models{display:grid;gap:1px;background:var(--rule);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:2.2rem 0}
@media(min-width:52rem){.models{grid-template-columns:repeat(3,1fr)}}
.models>article{background:var(--paper);padding:1.6rem;display:grid;gap:.9rem;align-content:start}
.models h3{font-size:var(--step-1)}
.models .glyph{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft);
}
.models .glyph::before{content:"";width:.8rem;height:.8rem;border:1px solid var(--ink)}
.models .m-read .glyph::before{background:var(--accent);border-color:var(--accent)}
.models .m-cal .glyph::before{border-left:3px solid var(--accent)}
.models .m-sel .glyph::before{background:var(--ink)}
.models p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.6}
.models .where{font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);border-top:1px dotted var(--rule);padding-top:.7rem}
.models a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.models a:hover{color:var(--accent)}

/* --- Commerce transformation: timeline + markets --- */
.markets{display:grid;gap:1px;background:var(--rule);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:2.2rem 0}
@media(min-width:44rem){.markets{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}}
.markets>div{background:var(--paper);padding:1.3rem}
.markets .mono{display:block;margin-bottom:.45rem;color:var(--ink)}
.markets .struck{text-decoration:line-through;color:var(--ink-faint)}
.markets p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.55}

.mig-timeline{list-style:none;margin:2.2rem 0;display:grid;gap:0;max-width:40rem}
.mig-timeline li{
  display:grid;grid-template-columns:7.5rem 1fr;gap:1.4rem;
  padding:1.1rem 0;border-bottom:1px dotted var(--rule);align-items:baseline;
}
.mig-timeline li:last-child{border-bottom:2px solid var(--ink)}
.mig-timeline .when{font-family:var(--mono);font-size:var(--step--1);color:var(--accent)}
.mig-timeline .what{color:var(--ink-soft);font-size:var(--step--1);line-height:1.55}
.mig-timeline .what b{color:var(--ink);font-weight:600}
@media (max-width:30rem){.mig-timeline li{grid-template-columns:1fr;gap:.2rem}}

/* --- Performance & growth: staged chain with ownership lanes --- */
.chain{list-style:none;margin:2.2rem 0;max-width:34rem}
.chain li{
  border:1px solid var(--ink);padding:.85rem 1.25rem;
  font-family:var(--mono);font-size:var(--step--1);letter-spacing:.03em;
  background:var(--paper);position:relative;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.chain li small{color:var(--ink-faint);font-size:.72rem;letter-spacing:0}
.chain li + li{margin-top:1.7rem}
.chain li + li::before{content:"";position:absolute;top:-1.7rem;left:2rem;width:1px;height:1.7rem;background:var(--ink)}
.chain li + li::after{content:"";position:absolute;top:-.42rem;left:calc(2rem - 4px);border:5px solid transparent;border-top-color:var(--ink)}
.chain .lane-human{background:var(--ink);color:var(--paper)}
.chain .lane-human small{color:var(--rule)}
.chain .lane-ai{border-color:var(--accent);color:var(--accent)}

/* --- Semantic commerce: evaluation panel --- */
.eval-panel{
  margin:1.8rem 0 2.2rem;background:var(--paper-2);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  overflow-x:auto;
}
.eval-panel__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem 1.4rem;flex-wrap:wrap;
  padding:.95rem 1.2rem .85rem;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--step--1);
}
.eval-panel__head strong{color:var(--ink);font-weight:400}
.eval-panel__head time{color:var(--ink-faint)}
.eval-panel table{width:100%;border-collapse:collapse}
.eval-panel th,.eval-panel td{
  padding:.85rem 1.2rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.eval-panel thead th{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-faint);font-weight:400;
}
.eval-panel tbody th{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  width:38%;max-width:16rem;
}
.eval-panel tbody td{color:var(--ink-soft);font-size:var(--step--1);line-height:1.5}
.eval-panel tbody tr:last-child{background:var(--accent-soft)}
.eval-panel tbody tr:last-child th,.eval-panel tbody tr:last-child td{border-bottom:none;color:var(--ink)}
.eval-panel tbody tr:last-child td{font-family:var(--mono);font-size:.78rem;letter-spacing:.01em}

/* ============================================================
   404
   ============================================================ */
.notfound{min-height:60vh;display:grid;place-content:center;gap:1.2rem;justify-items:start}
.notfound .bignum{font-size:clamp(6rem,20vw,14rem)}