/* One-page landing and vector scenes. Shared spacing and blog styles stay in pages.css.
   Type system (October 15 overhaul): headings are plain sentences, never labelled with an eyebrow.
   One weight (600), modest tracking, sizes that read as a product site rather than a magazine. */
.landing-hero h1,.page-hero h1,.article-header h1,.policy-header h1{font-size:clamp(38px,4.4vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.section h2,.landing-intro h2,.fde-intro h2,.how-intro h2,.about-copy h2,.section-heading-line h2,.contact-section h2,.final-contact h2{font-size:clamp(30px,3vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.what-item h3,.how-steps h3,.article-card h3,.three-up .article-card h3{font-weight:600;letter-spacing:-.02em;line-height:1.25}
.article-body h2{font-size:clamp(26px,2.4vw,30px);font-weight:600;letter-spacing:-.025em}
.logo-proof-head h2{font-weight:600;letter-spacing:-.02em}
.card-meta{font-size:13px;color:var(--ink-3);margin-top:12px!important}
.byline{font-size:14px;color:var(--ink-3)}
.blog-hero h1,.page-hero h1{max-width:22ch}
.article-header h1{max-width:24ch}
.scene{display:block;width:100%;height:auto;overflow:hidden}
.motion-ready svg[data-scene]:not([data-motion-state]) [data-actor]{opacity:0;animation:scene-fallback 0s 4s forwards}
@keyframes scene-fallback{to{opacity:1}}

/* Header: brand and one link. */
.head-nav{margin-left:auto;font-size:15px}
.head-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none;color:var(--ink)}
.head-nav a:hover,.head-nav a[aria-current]{text-decoration:underline;text-underline-offset:7px}

/* Blog page: how we work, above the articles. */
.how-we-work{padding-block:8px 88px}
.how-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;border-top:1px solid var(--ink);padding-top:48px}
.how-intro h2{max-width:18ch}
.how-intro p:not(.eyebrow){font-size:18px;color:var(--ink-2);margin:20px 0 16px;max-width:40ch}
.how-intro .text-link{font-size:14px}
.how-art{background:var(--soft);padding:28px 24px}
.how-steps{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.how-steps li{border-top:1px solid var(--line);padding-top:20px}
.how-steps{counter-reset:step}
.how-steps li{counter-increment:step}
.how-steps h3{font-size:22px}
.how-steps h3::before{content:counter(step) ". ";color:var(--ink-3)}
.how-steps p:not(.eyebrow){font-size:16px;color:var(--ink-2);margin-top:8px}

/* Hero: short copy on the left, the explainer on the right. */
.landing-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;min-height:0;padding-block:128px 144px}
.landing-hero h1{font-size:clamp(42px,5vw,72px);max-width:11ch}
.landing-hero .lede{max-width:26rem;font-size:20px}
.hero-stage{background:var(--soft);padding:28px 24px}
.hero-scene{margin-inline:auto}

/* Section heads sit on one column. No side label. */
.landing-intro{margin-bottom:48px;max-width:50rem}
.landing-intro p{font-size:19px;color:var(--ink-2);margin-top:16px;max-width:48ch}
.section-heading-line .landing-intro{margin-bottom:0}
.faq-list{margin-left:0;max-width:52rem}

.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.what-art{background:var(--soft);padding:40px;margin-bottom:28px;display:grid;place-items:center}
.what-scene{max-width:260px}
.what-item h3{font-size:clamp(24px,2.2vw,30px)}
.what-item p{font-size:18px;color:var(--ink-2);margin-top:12px;max-width:36ch}

.services{display:grid;gap:96px}
.service-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center;scroll-margin-top:100px}
.service-row:nth-child(even){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.service-row:nth-child(even) .service-art{order:2}
.service-art{background:var(--soft);padding:40px 32px;display:grid;place-items:center}
.service-scene{max-width:620px}
.service-copy h3{font-size:clamp(28px,2.8vw,38px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.service-lead{font-size:19px;color:var(--ink-2);margin-top:16px;max-width:40ch}
.work-list{list-style:none;padding:0;margin:28px 0 20px;border-top:1px solid var(--ink)}
.work-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.5}
.service-copy .text-link{font-size:14px}

/* Forward-deployed engineering: the one inverted band on the page. */
.fde-band{background:var(--ink);color:#fff;padding-block:112px;scroll-margin-top:0}
.fde-band h2{color:#fff}
.fde-band .fde-intro p:not(.eyebrow){color:#c9c9cc}
.fde-band .principles li{border-color:#fff;color:#fff}
.fde-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.fde-intro h2{max-width:22ch}
.fde-intro p:not(.eyebrow){font-size:18px;color:var(--ink-2);margin-top:24px;max-width:44ch}
.fde-art{background:var(--soft);padding:32px 24px}
.principles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:64px 0 0}
.principles li{border-top:1px solid var(--ink);padding-top:20px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3}

.article-grid.three-up{grid-template-columns:repeat(3,1fr);gap:48px 32px}
.three-up .article-card h3{font-size:22px}
.article-cover{background:var(--soft)}
.cover-scene{width:100%;height:auto;max-height:580px;margin-inline:auto}
.readiness-article .cover-scene{margin-block:24px}

.contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:28px}
.final-contact .contact-actions .contact-email{margin-top:0;font-size:18px}
.final-contact .small-note{margin-top:16px}

@media(max-width:1050px){
  .landing-hero{grid-template-columns:1fr;gap:40px}
  .landing-hero h1{max-width:16ch}
  .how-steps{grid-template-columns:1fr 1fr}
  .service-row{gap:40px}
  .principles{grid-template-columns:1fr 1fr;gap:36px 32px}
  .fde-intro{gap:40px}
}
@media(max-width:760px){
  .landing-hero{padding-block:72px 80px}
  .landing-hero .lede{font-size:18px}
  .landing-hero .hero-actions{padding-right:0}
  .landing-hero{display:block}
  .hero-stage{margin-top:40px;padding:20px 12px}
  .landing-intro{margin-bottom:32px}
  .service-row,.what-grid,.fde-intro,.how-intro,.how-steps,.article-grid.three-up{grid-template-columns:1fr}
  .how-intro{gap:32px;padding-top:32px}
  .how-steps{margin-top:40px;gap:24px}
  .how-we-work{padding-bottom:56px}
  .services{gap:64px}
  .service-row:nth-child(even){grid-template-columns:1fr}
  .service-row:nth-child(even) .service-art{order:0}
  .service-art{padding:24px 14px}
  .fde-band{padding-block:64px}
  .what-grid{gap:48px}
  .what-art{padding:28px;margin-bottom:22px}
  .what-scene{max-width:200px}
  .principles{margin-top:48px}
}
@media(max-width:500px){
  .principles{grid-template-columns:1fr}
}
.article-card-copy h3+p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.contact-hero .price-note{margin-top:20px}
.contact-hero .contact-actions .contact-email{margin-top:0;font-size:18px}
.contact-hero .small-note{margin-top:16px}

.contact-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center}
.contact-hero-mark{width:100%;max-width:400px;height:auto;aspect-ratio:1500/1400;justify-self:end}
@media(max-width:760px){.contact-hero-grid{grid-template-columns:1fr;gap:36px}.contact-hero-mark{max-width:110px;justify-self:start;order:-1}}

.stat-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding-block:24px 96px}
.stat{border-top:1px solid var(--ink);padding-top:24px}
.stat-figure{font-size:clamp(56px,7vw,104px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stat p:not(.stat-figure){margin-top:16px;color:var(--ink-2);font-size:17px;max-width:24ch}
@media(max-width:760px){.stat-band{grid-template-columns:1fr;gap:28px;padding-block:8px 56px}.stat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:16px;align-items:end;padding-top:18px}.stat p:not(.stat-figure){margin-top:0;font-size:15px}}

/* Mobile (Toli, Oct 15): Blog sits beside Let's talk; arrows point down at the contact copy below them;
   bigger, faster logos. */
.logo-track{animation-duration:60s}
@media(max-width:760px){
  .head-nav{margin-left:auto}
  .header-contact{margin-left:0}
  .final-contact>.motion-mark,.contact-hero-mark{transform:rotate(90deg)}
  .logo-track{animation-duration:32s}
  .logo-list li{width:200px;height:80px}
  .logo-list img{width:156px;height:38px}
}