:root { --ink:#182019; --paper:#f3eee2; --paper-deep:#e6ddcc; --copper:#9b5939; --copper-light:#bb8056; --muted:#5c625a; --hairline:rgba(24,32,25,.28); --serif:Georgia,"Times New Roman",serif; --sans:Inter,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.masthead { min-height:82px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hairline); }
.wordmark { display:inline-flex; gap:.7rem; align-items:center; font-size:.98rem; font-weight:700; letter-spacing:.14em; text-decoration:none; }
.mark { position:relative; display:inline-block; width:29px; height:12px; background:radial-gradient(circle at 4px 6px,var(--copper-light) 0 3.5px,transparent 4px),radial-gradient(circle at 25px 6px,var(--paper) 0 3px,var(--ink) 3.5px 4.5px,transparent 5px); }
.mark::after { content:""; position:absolute; inset:5px 8px auto; border-top:1px dashed var(--copper); }
.masthead > p,.eyebrow,.route-number { margin:0; color:var(--copper); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.masthead > p { color:var(--muted); }
.opening { position:relative; min-height:calc(100vh - 82px); padding:clamp(4.5rem,8vw,8rem) 9.5vw 4.5rem 16vw; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(14rem,.55fr); gap:clamp(3rem,8vw,9rem); align-items:center; }
.opening::before { content:""; position:absolute; top:0; bottom:0; left:9.5vw; border-left:1px solid var(--hairline); }
.opening > * { position:relative; }
.opening h1,.diagnosis h2,.doorway h2,.contexts h2,.work-heading h2,.route h2,.route h3 { margin:1.3rem 0 0; font-family:var(--serif); font-weight:400; letter-spacing:-.04em; line-height:.98; }
.opening h1 { max-width:14ch; font-size:clamp(3.4rem,6.2vw,6.8rem); }
.lead { max-width:50ch; margin:2rem 0 0; font-size:clamp(1.08rem,1.35vw,1.28rem); color:var(--ink); }
.opening-boundary { max-width:51ch; margin:1rem 0 0; color:var(--muted); }
.opening-actions { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin-top:2.6rem; }
.opening-actions a { padding:.65rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); text-decoration:none; font-weight:650; }
.opening-actions a:focus-visible { outline:3px solid var(--copper-light); outline-offset:5px; }
.landing-trace { align-self:stretch; display:grid; grid-template-rows:1fr auto 1fr; justify-items:center; min-height:25rem; color:var(--copper); font-size:.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.trace-start { align-self:end; padding-bottom:1rem; }
.trace-line { width:1px; height:100%; min-height:10rem; background:linear-gradient(to bottom,var(--copper) 0 38%,transparent 38% 44%,var(--copper-light) 44% 46%,transparent 46% 54%,rgba(155,89,57,.7) 54% 56%,transparent 56% 68%,rgba(155,89,57,.45) 68% 70%,transparent 70% 84%,rgba(155,89,57,.28) 84% 86%,transparent 86%); }
.trace-end { align-self:start; padding-top:1rem; color:var(--muted); }
.diagnosis { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(18rem,.7fr); gap:clamp(3rem,8vw,9rem); padding:clamp(5rem,9vw,8rem) 16vw; background:var(--ink); color:var(--paper); }
.diagnosis .eyebrow { color:var(--copper-light); }
.diagnosis h2 { max-width:12ch; font-size:clamp(2.8rem,5vw,5.5rem); }
.diagnosis-copy { align-self:end; max-width:40rem; border-top:1px solid var(--copper-light); padding-top:1.3rem; }
.diagnosis-copy p { margin:0; font-size:clamp(1.05rem,1.25vw,1.2rem); }
.diagnosis-copy p + p { margin-top:1.5rem; color:rgba(243,238,226,.68); }
.doorway { display:grid; grid-template-columns:minmax(0,.9fr) minmax(18rem,1fr); gap:clamp(3rem,8vw,9rem); padding:clamp(5rem,8vw,7.5rem) 16vw; border-bottom:1px solid var(--hairline); }
.doorway h2 { max-width:13ch; font-size:clamp(2.7rem,4.7vw,5rem); }
.doorway-body { align-self:end; }
.doorway-statements { margin:0; padding:0; list-style:none; border-top:1px solid var(--copper); }
.doorway-statements li { padding:.68rem 0; border-bottom:1px solid var(--hairline); font-family:var(--serif); font-size:clamp(1.05rem,1.45vw,1.35rem); }
.doorway-boundary { max-width:43ch; margin:1.5rem 0 2.2rem; color:var(--muted); }
.doorway-sequence { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; margin:0; padding-top:1rem; border-top:1px solid var(--ink); }
.doorway-sequence span { font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.doorway-sequence i { color:var(--copper); font-style:normal; }
.doorway-questions { display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.4rem; margin:1rem 0 0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; }
.contexts { display:grid; grid-template-columns:minmax(0,.9fr) minmax(18rem,.7fr); gap:clamp(3rem,8vw,9rem); padding:clamp(4.5rem,7vw,6.5rem) 16vw; border-bottom:1px solid var(--hairline); background:var(--paper-deep); }
.contexts h2 { max-width:14ch; font-size:clamp(2.4rem,4vw,4.3rem); }
.contexts > p { align-self:end; max-width:40rem; margin:0; font-size:clamp(1rem,1.2vw,1.16rem); color:var(--muted); }
.work-heading { padding:clamp(4rem,7vw,6rem) 16vw; border-bottom:1px solid var(--hairline); }
.work-heading h2 { max-width:15ch; font-size:clamp(2.6rem,4.8vw,5rem); }
.route { display:grid; grid-template-columns:minmax(5rem,16vw) minmax(0,1fr); gap:1rem; padding:clamp(3.5rem,7vw,6.75rem) 16vw; border-bottom:1px solid var(--hairline); }
.route-research { background:var(--paper); }
.route-vp { background:#263229; color:var(--paper); }
.route-vp .eyebrow,.route-vp .route-number { color:var(--copper-light); }
.route-vp > div > p:not(.eyebrow) { color:var(--paper); }
.route-wml { background:var(--ink); color:var(--paper); }
.route-wml .eyebrow,.route-wml .route-number { color:var(--copper-light); }
.route h2,.route h3 { font-size:clamp(2.5rem,5vw,5rem); }
.route > div > p:not(.eyebrow) { max-width:48ch; margin:1.5rem 0 0; color:var(--muted); }
.route-wml > div > p:not(.eyebrow) { color:rgba(243,238,226,.72); }
.route a { display:inline-flex; justify-content:space-between; gap:2.5rem; min-width:min(100%,290px); margin-top:2.6rem; padding:.75rem 0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; text-decoration:none; font-weight:650; }
.route a:focus-visible,.wordmark:focus-visible { outline:3px solid var(--copper-light); outline-offset:5px; }
.route-dv { background:var(--paper-deep); padding-top:clamp(3rem,5vw,4.5rem); padding-bottom:clamp(3rem,5vw,4.5rem); }
.route-dv h3 { font-size:clamp(2.35rem,4vw,4rem); }
footer { padding:4rem 16vw 3.2rem; display:flex; justify-content:space-between; gap:3rem; color:var(--muted); font-size:.92rem; }
footer p { margin:0; max-width:55ch; }
footer p:last-child { color:var(--ink); white-space:nowrap; }
@media (max-width:700px) { .masthead { min-height:70px; padding:0 1.25rem; } .masthead > p { display:none; } .opening { min-height:auto; grid-template-columns:1fr; gap:3.8rem; padding:5.5rem 1.6rem 3.8rem 3.8rem; } .opening::before { left:1.55rem; } .opening h1 { font-size:clamp(3rem,13.4vw,4.25rem); } .lead { margin-top:1.6rem; } .opening-actions { flex-direction:column; align-items:flex-start; gap:.75rem; } .landing-trace { grid-template-columns:auto 1fr auto; grid-template-rows:1fr; align-items:center; justify-items:stretch; min-height:0; margin-left:-2.2rem; } .trace-start,.trace-end { align-self:center; padding:0; } .trace-line { width:100%; height:1px; min-height:0; margin:0 .8rem; background:linear-gradient(to right,var(--copper) 0 38%,transparent 38% 44%,var(--copper-light) 44% 46%,transparent 46% 54%,rgba(155,89,57,.7) 54% 56%,transparent 56% 68%,rgba(155,89,57,.45) 68% 70%,transparent 70% 84%,rgba(155,89,57,.28) 84% 86%,transparent 86%); } .diagnosis,.doorway,.contexts { grid-template-columns:1fr; gap:3rem; padding:4.5rem 1.6rem; } .diagnosis h2,.doorway h2,.contexts h2 { font-size:clamp(2.5rem,11.5vw,3.8rem); } .doorway-questions { grid-template-columns:1fr; } .work-heading { padding:4rem 1.6rem; } .work-heading h2 { font-size:clamp(2.5rem,11vw,3.8rem); } .route { grid-template-columns:1fr; gap:1.6rem; padding:3.7rem 1.6rem 3.8rem; } footer { flex-direction:column; gap:1.4rem; padding:3rem 1.6rem; } }