:root {
  --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #171918;
  --paper: #f7f7f5;
  --muted: #707572;
  --line: #dedfdb;
  --signal: #f1f3f0;
  --navy: #171918;
  --red: #315f49;
  --cream: #f2f2ef;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.shell { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }

.nav-wrap {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 247, 245, .9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(23,32,29,.08);
}
.nav { height: 68px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { font: 800 23px/1 var(--font-display), sans-serif; letter-spacing: -.07em; }
.wordmark span { color: var(--red); }
.nav-links { display: flex; gap: 34px; color: #3d4743; font-size: 14px; }
.nav-links a, .nav-contact { transition: opacity .2s ease; }
.nav-links a:hover, .nav-contact:hover { opacity: .55; }
.nav-contact { font-size: 14px; font-weight: 650; display: flex; gap: 8px; }

.hero { padding: 92px 0 0; min-height: min(760px, calc(100vh - 68px)); display: flex; flex-direction: column; }
.hero-kicker, .section-label, .case-number, .case-eyebrow, .mini-label {
  text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700;
}
.hero-kicker { color: var(--muted); }
.hero h1 {
  max-width: 980px; margin: 42px 0 48px;
  font: 560 clamp(50px, 6vw, 82px)/1.04 var(--font-display), sans-serif;
  letter-spacing: -.055em;
}
.hero h1 em { font-style: normal; color: var(--ink); }
.hero-bottom { margin-top: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: 48px; }
.hero-bottom p { max-width: 520px; margin: 0; color: #555b57; font-size: 18px; line-height: 1.55; }
.circle-link {
  width: auto; height: auto; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  font-size: 13px; gap: 12px; padding: 8px 0; transition: opacity .2s;
}
.circle-link:hover { background: transparent; color: var(--ink); transform: none; opacity: .55; }
.hero-rule { height: 1px; background: var(--ink); }

.intro { padding: 112px 0 62px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; }
.section-label { color: var(--red); margin: 0 0 12px; }
.section-note { color: var(--muted); margin: 0; font-size: 14px; }
.intro h2, .experience-intro h2, .about h2 {
  margin: 0; font: 560 clamp(32px, 3.6vw, 52px)/1.12 var(--font-display), sans-serif; letter-spacing: -.04em;
}
.product-index { padding-bottom: 120px; }
.product-row {
  display: grid; grid-template-columns: 60px 1fr auto 30px; gap: 24px; align-items: center;
  min-height: 104px; border-top: 1px solid var(--line); transition: padding .25s, background .25s;
}
.product-row:last-child { border-bottom: 1px solid var(--line); }
.product-row:hover { padding-inline: 14px; background: #fff; }
.product-number, .product-row-type { color: var(--muted); font-size: 13px; }
.product-row-main { display: flex; flex-direction: column; gap: 7px; }
.product-row-title { font: 590 clamp(24px, 2.6vw, 38px)/1 var(--font-display), sans-serif; letter-spacing: -.035em; }
.status-pill { border: 0; background: #eceeeb; border-radius: 999px; padding: 8px 12px; font-size: 11px; white-space: nowrap; color: #505652; }
.row-arrow { font-size: 22px; }

.case { scroll-margin-top: 68px; padding: 118px 0 124px; background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.case-2 { background: #f3f3f0; }
.case-3 { background: #fff; }
.case-heading { display: grid; grid-template-columns: 120px 1fr auto; gap: 44px; align-items: start; }
.case-number { margin: 10px 0 0; opacity: .65; }
.case-eyebrow { margin: 0 0 24px; opacity: .65; }
.case-heading h2 { margin: 0; font: 570 clamp(42px, 5vw, 68px)/1.02 var(--font-display), sans-serif; letter-spacing: -.05em; }
.case-summary { max-width: 690px; font-size: 18px; line-height: 1.6; opacity: .72; margin: 25px 0 0; }
.case-status { margin-top: 5px; font-size: 11px; padding: 9px 13px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; opacity: .8; }
.case-body { display: grid; grid-template-columns: .82fr 1.18fr; gap: 84px; margin: 84px 0 0 164px; }
.case-copy { display: flex; flex-direction: column; gap: 46px; }
.case-copy p { margin: 0; }
.case-copy .mini-label { opacity: .58; margin-bottom: 10px; }
.case-copy div > p:last-child { font-size: 17px; line-height: 1.6; opacity: .85; }
.workflow-card { background: #fafaf8; border: 1px solid var(--line); border-radius: 14px; padding: 25px; box-shadow: 0 12px 38px rgba(19,25,22,.05); }
.case-2 .workflow-card { background: #fff; }
.case-3 .workflow-card { background: #fafaf8; }
.workflow-top { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; opacity: .6; padding-bottom: 25px; }
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow-step { padding: 22px 14px 25px; min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
.workflow-step:last-child { border-right: 0; }
.workflow-step span { font-size: 10px; opacity: .55; }
.workflow-step strong { font: 560 15px/1.25 var(--font-display), sans-serif; }
.decisions { padding-top: 27px; }
.decisions .mini-label { opacity: .58; }
.decisions ul { list-style: none; padding: 0; margin: 22px 0 0; }
.decisions li { padding: 11px 0 11px 22px; border-top: 1px solid var(--line); position: relative; font-size: 14px; }
.decisions li::before { content: ""; position: absolute; left: 1px; top: 18px; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.live-slot { margin-top: 24px; border: 1px dashed #b9bdb9; border-radius: 8px; padding: 16px; display: flex; align-items: center; gap: 13px; color: #5b615d; }
.live-slot span:nth-child(2) { display: flex; flex-direction: column; }
.live-slot strong { font-size: 13px; }
.live-slot small { opacity: .6; font-size: 11px; }
.live-dot { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; }

.experience { padding: 150px 0; display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; }
.experience-intro p:last-child { max-width: 450px; color: var(--muted); font-size: 17px; margin-top: 30px; }
.timeline { border-top: 1px solid var(--ink); }
.timeline-row { display: grid; grid-template-columns: 155px 1fr; padding: 25px 0 27px; border-bottom: 1px solid var(--line); }
.timeline-row time { color: var(--muted); font-size: 13px; }
.timeline-row div { display: flex; flex-direction: column; gap: 5px; }
.timeline-row strong { font: 570 20px/1.25 var(--font-display), sans-serif; }
.timeline-row span { color: var(--muted); font-size: 14px; }
.earlier-row span { line-height: 1.7; }

.about { background: #ecece8; padding: 124px 0; }
.about-grid { display: grid; grid-template-columns: 150px 1fr 260px; gap: 60px; }
.about-copy { max-width: 660px; margin: 40px 0 0; color: #4f5854; font-size: 18px; line-height: 1.6; }
.credentials { border-top: 1px solid var(--ink); padding-top: 18px; }
.credentials .mini-label { color: var(--muted); margin: 0 0 24px; }
.credentials > p:not(.mini-label) { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.credentials a { display: inline-flex; gap: 7px; margin-top: 22px; font-size: 13px; font-weight: 650; }

.footer { padding: 120px 0 38px; }
.footer-email { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 15px 0 35px; font: 560 clamp(28px, 4.2vw, 60px)/1 var(--font-display), sans-serif; letter-spacing: -.045em; }
.footer-email span { font-size: .55em; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 30px; color: var(--muted); font-size: 12px; }

.reveal { animation: rise .75s both cubic-bezier(.2,.65,.25,1); }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { animation: none; } }

@media (max-width: 900px) {
  .shell { width: min(100% - 40px, 720px); }
  .nav-links { display: none; }
  .hero { min-height: 680px; padding-top: 72px; }
  .hero h1 { font-size: clamp(50px, 12vw, 78px); margin-top: 42px; }
  .intro, .experience { grid-template-columns: 1fr; gap: 45px; }
  .product-row { grid-template-columns: 45px 1fr 24px; }
  .status-pill { grid-column: 2; justify-self: start; margin-top: -14px; }
  .row-arrow { grid-column: 3; grid-row: 1; }
  .case-heading { grid-template-columns: 65px 1fr; }
  .case-status { grid-column: 2; justify-self: start; }
  .case-body { margin-left: 109px; grid-template-columns: 1fr; gap: 55px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid > .section-label { margin-bottom: -15px; }
}

@media (max-width: 620px) {
  .shell { width: calc(100% - 36px); }
  .nav { height: 66px; }
  .nav-contact { font-size: 12px; }
  .hero { min-height: 640px; padding-top: 54px; }
  .hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .hero-bottom { grid-template-columns: 1fr; gap: 34px; }
  .hero-bottom p { font-size: 17px; }
  .circle-link { width: auto; height: auto; margin-left: auto; }
  .intro { padding: 100px 0 56px; }
  .product-index { padding-bottom: 100px; }
  .product-row { min-height: 138px; grid-template-columns: 32px 1fr 22px; gap: 13px; }
  .product-row-title { font-size: 23px; }
  .product-row-type { font-size: 11px; }
  .case { padding: 92px 0 100px; }
  .case-heading { display: block; }
  .case-number { margin: 0 0 44px; }
  .case-heading h2 { font-size: 45px; }
  .case-summary { font-size: 17px; }
  .case-status { display: inline-block; margin-top: 30px; }
  .case-body { margin: 70px 0 0; }
  .workflow-top span:last-child { display: none; }
  .workflow { grid-template-columns: 1fr 1fr; }
  .workflow-step:nth-child(2) { border-right: 0; }
  .workflow-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .experience { padding: 105px 0; }
  .timeline-row { grid-template-columns: 1fr; gap: 9px; }
  .about { padding: 96px 0; }
  .footer { padding-top: 90px; }
  .footer-email { overflow-wrap: anywhere; font-size: 25px; }
  .footer-bottom { display: grid; gap: 9px; }
}