:root { --ink:#131313; --paper:#f5f2eb; --red:#ef3d32; --red-deep:#c92820; --muted:#6d6b67; --line:#cfcac0; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; color:var(--ink); background:var(--paper); line-height:1.45; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; z-index:20; }.skip-link:focus { left:8px; }
.site-header { min-height:90px; padding:10px clamp(22px,5vw,76px); display:flex; align-items:center; gap:28px; justify-content:space-between; background:var(--paper); position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }.brand-logo { display:block; width:118px; height:70px; object-fit:contain; object-position:center; mix-blend-mode:multiply; }.footer-logo { width:130px; height:76px; }
nav { display:flex; gap:25px; margin-left:auto; } nav a { color:#4d4b48; font-size:12px; text-decoration:none; font-weight:bold; } nav a:hover, .text-link:hover, .card-link:hover { color:var(--red); }
.nav-active { color:var(--red); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:15px 20px; background:var(--red); color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:900; border:1px solid var(--red); transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); background:var(--red-deep); }.button-small { padding:11px 13px; font-size:10px; white-space:nowrap; }
.hero { min-height:605px; display:grid; grid-template-columns:1.03fr .97fr; overflow:hidden; }.hero-copy { padding:clamp(56px,10vw,135px) clamp(22px,8vw,124px) 62px clamp(22px,7vw,104px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }.eyebrow { margin:0 0 20px; text-transform:uppercase; font-size:11px; letter-spacing:.12em; font-weight:800; display:flex; align-items:center; gap:10px; }.eyebrow span { height:8px;width:8px;background:var(--red); display:inline-block; }.eyebrow.light { color:#fff; }.eyebrow.light span { background:#fff; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-weight:900; letter-spacing:-.06em; line-height:.97; }h1 { font-size:clamp(55px,6.5vw,96px); max-width:740px; margin-bottom:28px; } h2 { font-size:clamp(40px,4.5vw,67px); margin-bottom:24px; } h3 { font-size:34px; margin-bottom:18px; }.hero-text { font-size:18px; color:#514f4b; max-width:525px; margin-bottom:30px; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; }.text-link { font-size:13px; font-weight:bold; text-decoration:none; }.hero-proof { display:flex; gap:13px; align-items:center; margin-top:76px; font-size:10px; letter-spacing:.12em; font-weight:800; }.hero-proof i { display:block;width:4px;height:4px;border-radius:50%;background:var(--red); }
.hero-art { position:relative; overflow:hidden; background:var(--ink); color:#fff; min-height:460px; }.grid { position:absolute; inset:0; opacity:.3; background-image:linear-gradient(#5e5c58 1px, transparent 1px),linear-gradient(90deg,#5e5c58 1px, transparent 1px); background-size:42px 42px; }.ring { position:absolute; width:440px; height:440px; border:1px solid #8b8985; border-radius:50%; top:50%;left:50%;transform:translate(-50%,-50%); }.ring-two { width:275px;height:275px;border:1px dashed var(--red); }.runner-line { position:absolute;width:560px;height:110px;border-top:12px solid var(--red);transform:rotate(-36deg);top:44%;left:-60px;box-shadow:155px 65px 0 -3px var(--red); }.hero-art p { position:absolute;left:clamp(26px,7vw,85px);bottom:clamp(35px,7vw,82px);font-size:clamp(20px,2.3vw,34px);line-height:1.02;letter-spacing:-.05em; }.hero-art strong { color:var(--red); }.axis { position:absolute;background:#e4e2df; opacity:.6; }.axis-x { width:130px;height:1px;top:50%;left:calc(50% - 65px); }.axis-y { width:1px;height:130px;left:50%;top:calc(50% - 65px); }
.intro-band { background:var(--red); color:#fff; padding:27px 9%; text-align:center; }.intro-band p { margin:0 auto; max-width:900px; font-weight:800; font-size:clamp(18px,2vw,27px); letter-spacing:-.03em; }
.section { padding:clamp(78px,10vw,138px) clamp(22px,7vw,104px); }.section-heading { display:grid; grid-template-columns:1fr 1.1fr; column-gap:90px; align-items:end; margin-bottom:54px; }.section-heading .eyebrow { grid-column:1/-1; }.section-heading h2 { margin:0; }.section-heading > p:last-child { max-width:475px; font-size:16px; color:var(--muted); margin-bottom:5px; }
.pathway-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.pathway-card { min-height:475px; padding:31px 29px 27px; border-right:1px solid var(--line); display:flex; flex-direction:column; }.pathway-card:first-child{border-left:1px solid var(--line)}.pathway-card:hover { background:#ebe7df; }.card-number { color:var(--red); font-weight:800; font-size:11px; letter-spacing:.1em; }.pathway-card>p:not(.card-number) { color:#585652; font-size:15px; }.pathway-card ul { list-style:none; padding:17px 0 3px;margin:0; border-top:1px solid var(--line); font-size:13px; color:#464440; }.pathway-card li { padding:7px 0 7px 16px; position:relative; }.pathway-card li::before { content:""; width:5px;height:5px;background:var(--red);position:absolute;left:0;top:13px; }.card-link { margin-top:auto; text-decoration:none; color:var(--red); font-size:12px; font-weight:900; }
.finder-section { background:#e7e2d9; padding:clamp(72px,9vw,125px) clamp(22px,7vw,104px); display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(44px,8vw,120px); align-items:start; }.finder-intro>p:last-child { max-width:390px; color:var(--muted); }.finder-shell { background:#fff; padding:clamp(28px,5vw,60px); box-shadow:12px 12px 0 var(--ink); }.finder-progress { height:4px;background:#eeeae3; margin-bottom:39px; }.finder-progress span { height:100%;background:var(--red);display:block;width:33.33%;transition:width .25s ease; }.question-count { color:var(--red);letter-spacing:.1em;font-weight:900;font-size:10px;margin-bottom:14px; }.finder-question h3 { font-size:clamp(29px,3vw,44px); max-width:620px; }.answer-choices { display:grid; gap:10px; }.answer-button { width:100%;background:#f7f5f1;border:1px solid #ded9d0;padding:17px 18px;text-align:left;font:700 15px Arial,sans-serif;cursor:pointer;transition:border-color .2s,transform .2s;display:flex;justify-content:space-between;gap:20px; }.answer-button:hover,.answer-button:focus-visible { border-color:var(--red);transform:translateX(4px);outline:none; }.answer-button span:last-child { color:var(--red); }.finder-result h3 { font-size:clamp(32px,3.5vw,48px); margin-bottom:14px; }.finder-result p { color:var(--muted); font-size:16px; max-width:610px; }.result-tag { color:var(--red)!important; text-transform:uppercase;letter-spacing:.1em;font-size:10px!important;font-weight:900; }.result-actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center;margin-top:28px; }.restart { border:0;background:none;padding:0;text-decoration:underline;font-weight:700;cursor:pointer; }
.approach-section { background:var(--ink); color:#fff; display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(45px,9vw,130px); align-items:start; }.approach-copy>p:not(.eyebrow) { color:#c8c6c2; max-width:575px; font-size:17px; }.button-light { background:#fff;color:var(--ink);border-color:#fff;margin-top:16px; }.button-light:hover { background:#e7e3db; }.approach-stack { border-top:1px solid #5a5957; }.approach-stack div { padding:24px 0;border-bottom:1px solid #5a5957;display:grid;grid-template-columns:45px 1fr;column-gap:16px; }.approach-stack span { color:var(--red);font-size:12px;font-weight:800; }.approach-stack strong { font-size:23px;letter-spacing:-.04em; }.approach-stack p { grid-column:2;margin:7px 0 0;color:#b4b2ae;font-size:14px; }
.closing-cta { padding:clamp(82px,11vw,150px) 22px;text-align:center; }.closing-cta .eyebrow { justify-content:center; }.closing-cta h2 { margin-bottom:22px; }.closing-cta>p:not(.eyebrow) { max-width:510px;margin:0 auto 30px;color:var(--muted); }
footer { padding:32px clamp(22px,7vw,104px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:11px;color:#696762; }footer p{margin:0;text-align:right;}
.blog-hero { min-height:480px; padding:clamp(72px,10vw,130px) clamp(22px,7vw,104px); display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:center; background:var(--ink); color:#fff; overflow:hidden; }.blog-hero h1 { max-width:720px; margin-bottom:22px; }.blog-hero p:not(.eyebrow) { max-width:530px; color:#c8c6c2; font-size:18px; }.blog-hero-mark { min-width:235px; min-height:235px; justify-self:end; border:1px solid #797774; border-radius:50%; display:flex; flex-direction:column; justify-content:center; padding:35px; position:relative; }.blog-hero-mark::before { content:""; position:absolute; inset:14px; border:1px dashed var(--red); border-radius:50%; }.blog-hero-mark span { color:var(--red); font-size:12px; font-weight:900; letter-spacing:.1em; z-index:1; }.blog-hero-mark strong { font-size:clamp(25px,3vw,42px); line-height:.85; letter-spacing:-.07em; z-index:1; margin-top:14px; }.blog-launch { padding:clamp(82px,11vw,145px) clamp(22px,7vw,104px); max-width:900px; }.blog-launch h2 { max-width:760px; }.blog-launch>p:not(.eyebrow) { color:var(--muted); font-size:18px; max-width:690px; }.blog-topics { display:flex; flex-wrap:wrap; gap:9px; margin:34px 0; }.blog-topics span { padding:8px 10px; border:1px solid var(--line); font-size:10px; font-weight:900; letter-spacing:.08em; }
@media (max-width:900px) { nav { display:none; }.hero,.finder-section,.approach-section,.blog-hero { grid-template-columns:1fr; }.hero-copy { padding-bottom:68px; }.hero-art { min-height:410px; }.section-heading { grid-template-columns:1fr; gap:14px; }.pathway-grid { grid-template-columns:1fr; }.pathway-card,.pathway-card:first-child { min-height:0;border-left:1px solid var(--line);border-bottom:1px solid var(--line); }.finder-intro h2 { font-size:50px; }.finder-shell { box-shadow:7px 7px 0 var(--ink); }.approach-section { gap:55px; }.blog-hero-mark { justify-self:start; } }
@media (max-width:520px) { .site-header { padding:10px 18px;gap:12px; }.brand-logo { width:92px;height:58px; }.button-small { font-size:9px;padding:10px 9px; }.hero-copy { padding:58px 22px; }.hero-proof { margin-top:45px; gap:8px;font-size:8px; }.section,.finder-section { padding-left:22px;padding-right:22px; }h1{font-size:57px}.finder-intro h2 { font-size:44px; } .finder-shell { padding:27px 21px; } footer { align-items:flex-start;flex-direction:column; }footer p{text-align:left;} }