:root {
  --ink: #111214;
  --charcoal: #242629;
  --charcoal-2: #2d3033;
  --copper: #c87345;
  --copper-dark: #a8562e;
  --paper: #f4f0e9;
  --white: #fff;
  --muted: #686a6e;
  --line: #d9d5ce;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--white); padding: 12px 16px; }
.skip-link:focus { top: 16px; }
.wrap { width: min(calc(100% - 96px), var(--max)); margin: 0 auto; }
.section { padding: 120px 0; }
.eyebrow { margin: 0 0 24px; color: var(--copper); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.055em; }
h1 { margin-bottom: 28px; font-size: clamp(58px, 6.8vw, 102px); line-height: .94; }
h2 { margin-bottom: 28px; font-size: clamp(42px, 5vw, 72px); line-height: .98; }
h3 { line-height: 1.05; }
p { line-height: 1.55; }
.large-copy { max-width: 720px; color: #4c4e51; font-size: clamp(20px, 2vw, 27px); line-height: 1.45; }
.button { display: inline-flex; min-height: 54px; align-items: center; gap: 36px; border: 1px solid var(--copper); border-radius: 4px; background: var(--copper); color: var(--white); padding: 0 24px; font-size: 15px; font-weight: 600; transition: background .25s, border .25s, transform .25s; }
.button:hover { border-color: var(--copper-dark); background: var(--copper-dark); transform: translateY(-2px); }
.button--small { min-height: 42px; gap: 0; padding: 0 18px; font-size: 13px; }
.text-link { border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 14px; font-weight: 600; }
.text-link--light { color: var(--white); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; border-bottom: 1px solid transparent; padding: 0 max(32px, calc((100vw - var(--max)) / 2)); color: var(--white); transition: background .3s, color .3s, border .3s; }
.site-header.is-scrolled, .site-header.is-open { border-color: #e5e2dd; background: rgba(255,255,255,.96); color: var(--ink); backdrop-filter: blur(14px); }
.site-header .button { justify-self: end; }
.wordmark { display: inline-flex; width: max-content; flex-direction: column; font-size: 19px; font-weight: 800; letter-spacing: -.055em; line-height: .82; }
.site-header nav { display: flex; gap: 24px; font-size: 13px; }
.site-header nav a { position: relative; }
.site-header nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: var(--copper); content: ''; transform: scaleX(0); transition: transform .2s; }
.site-header nav a:hover::after { transform: scaleX(1); }
.menu { display: none; border: 0; background: transparent; padding: 8px; }
.menu span { display: block; width: 24px; height: 1px; margin: 6px 0; background: currentColor; }

.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--charcoal); color: var(--white); }
.hero__image, .hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; object-position: center; }
.hero__shade { background: linear-gradient(90deg, rgba(20,21,23,.98) 0%, rgba(20,21,23,.86) 36%, rgba(20,21,23,.15) 68%, rgba(20,21,23,0) 100%); }
.hero__content { position: relative; z-index: 2; display: flex; min-height: 100svh; flex-direction: column; justify-content: center; padding-top: 100px; }
.hero__content h1 { max-width: 770px; }
.hero__lead { max-width: 580px; margin-bottom: 36px; color: #dedede; font-size: clamp(20px, 2vw, 26px); }
.hero__actions { display: flex; align-items: center; gap: 30px; }
.hero__scroll { position: absolute; z-index: 2; right: 48px; bottom: 40px; display: flex; gap: 16px; align-items: center; color: #d8d8d8; font-size: 12px; }

.statement { background: var(--white); }
.statement__grid { display: grid; grid-template-columns: 210px 1fr; gap: 60px; }
.statement h2 { max-width: 950px; }

.day { background: var(--charcoal); color: var(--white); }
.day .section-heading { max-width: 1040px; }
.day__timeline { border-top: 1px solid #505255; }
.day__timeline article { display: grid; grid-template-columns: 130px 1fr 1fr; min-height: 210px; border-bottom: 1px solid #505255; }
.day__timeline time { padding: 34px 20px 30px 0; color: var(--copper); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.day__timeline article > div { padding: 34px 46px; }
.day__timeline article > div + div { border-left: 1px solid #505255; }
.day__timeline article span { color: #979a9d; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.day__timeline h3 { margin: 16px 0 12px; font-size: 24px; }
.day__timeline p { max-width: 430px; margin: 0; color: #b7b9bb; font-size: 14px; }
.day__timeline .day__better { background: rgba(255,255,255,.035); }
.day__timeline .day__better span { color: var(--copper); }
.day__timeline .day__better p { color: #dedede; }

.possibilities { background: var(--paper); }
.section-heading { max-width: 820px; margin-bottom: 70px; }
.section-heading > p:last-child { max-width: 620px; color: var(--muted); font-size: 20px; }
.question-stage { display: grid; grid-template-columns: 35% 65%; min-height: 520px; border: 1px solid #d4d0ca; background: var(--white); }
.question-stage__nav { display: flex; flex-direction: column; border-right: 1px solid #d4d0ca; }
.question-tab { display: grid; flex: 1; grid-template-columns: 42px 1fr; align-items: center; border: 0; border-bottom: 1px solid #e3dfd9; background: transparent; color: #85817b; padding: 20px 28px; text-align: left; cursor: pointer; transition: background .25s, color .25s; }
.question-tab:last-child { border-bottom: 0; }
.question-tab span { color: var(--ink); font-size: 18px; font-weight: 600; }
.question-tab.is-active { background: var(--ink); color: var(--copper); }
.question-tab.is-active span { color: var(--white); }
.question-stage__answer { position: relative; display: flex; overflow: hidden; flex-direction: column; justify-content: center; padding: 70px; }
.question-stage__kicker { color: var(--copper); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.question-stage__answer h3 { max-width: 660px; margin: 0 0 30px; font-size: clamp(42px, 4vw, 64px); }
.question-stage__answer > p:not(.question-stage__kicker) { max-width: 620px; color: var(--muted); font-size: 19px; }
.line-drawing { position: absolute; right: 48px; bottom: 34px; display: flex; align-items: center; }
.line-drawing i { display: block; width: 18px; height: 18px; background: var(--ink); }
.line-drawing b { display: block; width: 70px; height: 1px; background: var(--copper); }

.conversation { background: #ebe7e0; }
.conversation__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.conversation__copy h2 { max-width: 600px; }
.channel-switch { display: inline-flex; margin-top: 24px; border-bottom: 1px solid #c9c4bd; gap: 0; }
.channel-switch button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 14px 22px; color: var(--muted); cursor: pointer; }
.channel-switch button.is-active { border-bottom-color: var(--copper); color: var(--ink); font-weight: 600; }
.chat-shell { overflow: hidden; border: 1px solid #d4d0ca; border-radius: 10px; background: var(--white); box-shadow: 0 26px 65px rgba(23,24,26,.12); }
.chat-shell__top { display: flex; align-items: center; border-bottom: 1px solid #e5e2dd; padding: 18px 22px; gap: 13px; }
.chat-logo { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; }
.chat-shell__top strong, .chat-shell__top small { display: block; }
.chat-shell__top strong { font-size: 13px; }
.chat-shell__top small { margin-top: 2px; color: #8d8e91; font-size: 11px; }
.chat-shell__top i { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #62a86d; }
.chat-shell__body { display: flex; min-height: 390px; flex-direction: column; justify-content: center; padding: 35px 28px; gap: 16px; background: #f7f7f6; }
.message { width: fit-content; max-width: 82%; border: 1px solid #dfdfdc; border-radius: 12px 12px 12px 3px; background: var(--white); padding: 13px 16px; font-size: 14px; line-height: 1.4; }
.message--customer { align-self: flex-end; border: 0; border-radius: 12px 12px 3px 12px; background: #e9e9e7; }
.chat-shell__input { display: flex; align-items: center; padding: 15px 20px; color: #9a9997; font-size: 13px; }
.chat-shell__input button { width: 34px; height: 34px; margin-left: auto; border: 0; border-radius: 50%; background: var(--copper); color: var(--white); }

.demand { background: var(--white); }
.demand__intro { margin-bottom: 78px; }
.demand__intro h2 { max-width: 1050px; }
.demand__layout { display: grid; grid-template-columns: 1fr .92fr; gap: 82px; align-items: start; }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.signal-grid article { min-height: 205px; border-bottom: 1px solid var(--line); padding: 28px 28px 25px 0; }
.signal-grid article:nth-child(even) { border-left: 1px solid var(--line); padding-left: 28px; }
.signal-grid span, .outcome-grid span { color: var(--copper); font-size: 12px; font-weight: 700; }
.signal-grid h3 { margin: 28px 0 12px; font-size: 24px; }
.signal-grid p { max-width: 280px; color: var(--muted); font-size: 14px; }
.demand-report { border: 1px solid #44474a; border-radius: 5px; background: var(--charcoal); color: var(--white); padding: 30px 34px 12px; box-shadow: 0 26px 60px rgba(20,21,22,.14); }
.demand-report__top { display: flex; align-items: center; justify-content: space-between; }
.demand-report__top span { font-size: 17px; font-weight: 700; }
.demand-report__top small { color: var(--copper); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.demand-report > p { margin: 7px 0 28px; color: #96999c; font-size: 11px; }
.demand-report article { display: grid; grid-template-columns: 65px 1fr; border-top: 1px solid #4b4e51; padding: 22px 0; gap: 18px; }
.demand-report strong { color: var(--copper); font-size: 32px; line-height: 1; }
.demand-report h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -.025em; }
.demand-report article p { margin: 0; color: #aeb0b2; font-size: 11px; }

.outcomes { background: var(--charcoal); color: var(--white); }
.section-heading--light > p:last-child { color: #bbb; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid #4d5053; }
.outcome-grid article { min-height: 320px; padding: 35px 42px 20px 0; }
.outcome-grid article + article { border-left: 1px solid #4d5053; padding-left: 42px; }
.outcome-grid h3 { max-width: 300px; margin: 40px 0 18px; font-size: 30px; }
.outcome-grid p { max-width: 330px; color: #b9bbbd; font-size: 15px; }

.systems { background: var(--paper); }
.systems__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: start; }
.systems__copy h2 { max-width: 610px; font-size: clamp(42px, 4.2vw, 64px); }
.layer-list { border-top: 1px solid var(--line); }
.layer-list article { display: grid; grid-template-columns: 180px 170px 1fr; border-bottom: 1px solid var(--line); padding: 30px 0; gap: 20px; }
.layer-list span { color: var(--copper); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.layer-list h3 { margin: 0; font-size: 19px; }
.layer-list p { margin: 0; color: var(--muted); font-size: 13px; }
.trust { display: grid; grid-template-columns: .78fr 1.22fr; margin-top: 120px; border-top: 1px solid var(--line); padding-top: 76px; gap: 100px; }
.trust h2 { font-size: clamp(38px, 4vw, 58px); }
.trust__items { display: grid; grid-template-columns: 1fr 1fr; }
.trust__items article { min-height: 155px; border-bottom: 1px solid var(--line); padding: 8px 28px 24px 0; }
.trust__items article:nth-child(even) { border-left: 1px solid var(--line); padding-left: 28px; }
.trust__items h3 { margin: 0 0 12px; font-size: 20px; }
.trust__items p { margin: 0; color: var(--muted); font-size: 13px; }

.pilot { background: var(--white); }
.pilot__steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--line); padding: 0; list-style: none; }
.pilot__steps li { min-height: 260px; padding: 32px 34px 24px 0; }
.pilot__steps li + li { border-left: 1px solid var(--line); padding-left: 34px; }
.pilot__steps span { color: var(--copper); font-size: 12px; font-weight: 700; }
.pilot__steps h3 { margin: 46px 0 15px; font-size: 27px; }
.pilot__steps p { color: var(--muted); font-size: 14px; }

.closing { background: var(--paper); }
.closing__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.closing__inner .eyebrow { grid-column: 1 / -1; }
.closing__inner h2 { margin-bottom: 0; }
.closing__inner .button { margin-bottom: 8px; }

footer { border-top: 1px solid var(--line); background: var(--paper); padding: 38px 0; }
.footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.footer__inner p { margin: 0; color: var(--muted); font-size: 12px; }
.footer__inner p a { border-bottom: 1px solid currentColor; color: var(--ink); }
.footer__inner > div { display: flex; justify-self: end; gap: 24px; font-size: 12px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .wrap { width: min(calc(100% - 48px), var(--max)); }
  .section { padding: 86px 0; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 24px; }
  .site-header nav, .site-header > .button { display: none; }
  .site-header nav { position: absolute; inset: 76px 0 auto; flex-direction: column; gap: 0; border-bottom: 1px solid #ddd; background: var(--white); color: var(--ink); padding: 8px 24px 24px; }
  .site-header nav a { padding: 15px 0; }
  .site-header.is-open nav { display: flex; }
  .menu { display: block; }
  .hero__image { object-position: 62% center; opacity: .72; }
  .hero__shade { background: linear-gradient(90deg, rgba(20,21,23,.96), rgba(20,21,23,.68)); }
  .hero__scroll { display: none; }
  .statement__grid, .conversation__grid, .systems__grid, .trust { grid-template-columns: 1fr; gap: 30px; }
  .day__timeline article { grid-template-columns: 105px 1fr 1fr; }
  .day__timeline article > div { padding: 30px; }
  .question-stage { grid-template-columns: 1fr; }
  .question-stage__nav { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid #d4d0ca; }
  .question-tab { min-height: 84px; border-right: 1px solid #e3dfd9; }
  .question-stage__answer { min-height: 430px; padding: 48px; }
  .demand__layout { grid-template-columns: 1fr; }
  .outcome-grid, .pilot__steps { grid-template-columns: 1fr 1fr; }
  .outcome-grid article:nth-child(3), .pilot__steps li:nth-child(3) { border-top: 1px solid #4d5053; border-left: 0; padding-left: 0; }
  .pilot__steps li:nth-child(3) { border-color: var(--line); }
  .trust { margin-top: 90px; padding-top: 60px; }
  .closing__inner { grid-template-columns: 1fr; gap: 36px; }
  .closing__inner .button { justify-self: start; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 36px); }
  .section { padding: 72px 0; }
  h1 { font-size: 49px; }
  h2 { font-size: 40px; }
  .hero__image { object-position: 70% center; opacity: .46; }
  .hero__shade { background: rgba(20,21,23,.67); }
  .hero__content { justify-content: flex-end; padding-bottom: 70px; }
  .hero__actions { align-items: flex-start; flex-direction: column; }
  .question-stage__nav { grid-template-columns: 1fr; }
  .question-tab { border-right: 0; }
  .question-stage__answer { min-height: 460px; padding: 38px 28px 90px; }
  .question-stage__answer h3 { font-size: 39px; }
  .line-drawing { right: 28px; }
  .conversation__grid { gap: 56px; }
  .channel-switch { display: flex; width: 100%; }
  .channel-switch button { flex: 1; padding: 14px 8px; }
  .day__timeline article { grid-template-columns: 1fr; }
  .day__timeline time { padding: 28px 0 12px; }
  .day__timeline article > div { padding: 22px 0 30px; }
  .day__timeline article > div + div { border-top: 1px solid #505255; border-left: 0; padding-left: 0; }
  .signal-grid, .trust__items, .outcome-grid, .pilot__steps { grid-template-columns: 1fr; }
  .signal-grid article, .signal-grid article:nth-child(even) { min-height: 0; border-left: 0; padding: 26px 0; }
  .demand-report { padding: 26px 24px 8px; }
  .layer-list article { grid-template-columns: 1fr; gap: 10px; }
  .trust__items article, .trust__items article:nth-child(even) { min-height: 0; border-left: 0; padding: 24px 0; }
  .trust__items article + article { border-top: 1px solid var(--line); }
  .pilot__steps li, .pilot__steps li + li, .pilot__steps li:nth-child(3) { min-height: 0; border-top: 1px solid var(--line); border-left: 0; padding: 28px 0; }
  .pilot__steps h3 { margin-top: 24px; }
  .outcome-grid article + article { border-top: 1px solid #4d5053; border-left: 0; padding-left: 0; }
  .outcome-grid article { min-height: 0; padding: 34px 0; }
  .outcome-grid article + article { border-color: #4d5053; }
  .outcome-grid h3 { margin-top: 24px; }
  .footer__inner { grid-template-columns: 1fr auto; gap: 25px; }
  .footer__inner p { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
