/* Blue direction. The standalone friendly version lives in versions/friendly/. */
:root{--paper:#f0f3f7;--ink:#192c49;--muted:#53637a;--card:#fff;--line:#d5deea;--blue:#2458a6;--yellow:#adc8ed;--mint:#e2ebf7;--peach:#d9e4f4;--shadow:rgba(24,54,98,.07);--action:#204f96;--action-ink:#fff;--portrait-panel:#234f8c;--portrait-grid:#ffffff16}
:root[data-theme=dark]{--paper:#151e2d;--ink:#e8eef8;--muted:#aebdd2;--card:#1c2a3e;--line:#34465f;--blue:#8bb4ed;--yellow:#adc8ed;--mint:#233a58;--peach:#213550;--shadow:rgba(0,0,0,.16);--action:#a5c6f5;--action-ink:#152a48;--portrait-panel:#254e83;--portrait-grid:#ffffff12}
body{background-image:none}
.header{border-bottom:1px solid var(--line)}
.brand-dot{border-radius:2px;width:8px;height:16px}
.hero{padding-top:65px;padding-bottom:95px;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;inset:0 -35px 0 48%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent,#0008);pointer-events:none}
.hero .hello{color:var(--muted)}
.underlined{color:var(--blue)}
.underlined svg,.portrait-spark,.hero-note,.circled svg{display:none}
.intro{margin-top:32px}
.button{background:var(--action);border-color:var(--action);color:var(--action-ink);border-radius:5px;box-shadow:0 6px 16px var(--shadow);transition:transform .2s,box-shadow .2s,filter .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 9px 24px var(--shadow);filter:brightness(1.1)}
.text-link{text-decoration-thickness:1px;text-decoration-color:var(--muted)}
.portrait{padding:0 6px 24px 28px}
.portrait-art{height:470px}
.portrait-art:before{inset:35px 0 0 8px;border-radius:4px;background-color:var(--portrait-panel);background-image:linear-gradient(var(--portrait-grid) 1px,transparent 1px),linear-gradient(90deg,var(--portrait-grid) 1px,transparent 1px);background-size:48px 48px;box-shadow:18px 18px 0 var(--peach);transform:translate(var(--backdrop-x,0px),var(--backdrop-y,0px))}
.portrait-art:after{inset:12px 23px 24px -10px;border:1px solid var(--blue);border-radius:3px;opacity:.45;transform:translate(var(--backdrop-x,0px),var(--backdrop-y,0px))}
.portrait img{border-radius:0;object-fit:contain;object-position:center bottom}
.portrait figcaption{bottom:0;right:25px;transform:none;border:0;border-left:3px solid var(--blue);box-shadow:0 8px 25px var(--shadow);padding:13px 22px;font-size:14px}
.case-section{padding-top:60px;border-top:1px solid var(--line);background:var(--card)}
.case-heading{display:grid;grid-template-columns:1fr 2fr;align-items:start;gap:35px}
.case-label{padding-top:10px}
.case-heading h2{font-size:clamp(35px,3.6vw,49px)}
.marker{background:none;color:var(--blue)}
.case-grid{gap:30px;padding-top:50px}
.case-card{border-radius:6px;box-shadow:none;transform:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.before{background:var(--paper)}
.after{margin-top:42px;background:var(--mint);border-top:3px solid var(--blue)}
.case-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px var(--shadow);border-color:var(--blue)}
.before:hover{background:var(--paper)}
.card-art svg{stroke-width:1.5}
.card-art .route{stroke-dasharray:none;stroke-width:2}
.card-art g{transform:none}
.card-art .highlight{fill:var(--blue);opacity:.65}
.case-card h3{font-size:32px}
.training>span{display:none}
.training{border-bottom:0;border-left:3px solid var(--blue);padding:0 0 0 25px;border-top:0;margin-top:45px}
.training h3{font-family:Onest,sans-serif;font-size:23px;letter-spacing:-.03em}
.contact{padding-top:80px}
.contact-layout{border-radius:6px;border:1px solid var(--line);box-shadow:none;background:var(--mint);border-top:3px solid var(--blue);gap:50px}
.contact h2{font-size:clamp(35px,3.5vw,48px)}
.circled{color:var(--blue)}
.footer{padding-top:0}
@media(min-width:1500px){.hero{padding-top:85px;padding-bottom:115px}}
@media(max-width:1100px){.portrait-art{height:405px}.case-heading{grid-template-columns:1fr 2fr;gap:20px}}
@media(max-width:750px){.hero{padding-top:30px;padding-bottom:50px}.hero:before{inset:0 -12px 0 50%;background-size:40px 40px;mask-image:linear-gradient(#0006,transparent 65%)}.portrait{padding:0 3px 14px 3px}.portrait-art{height:210px}.portrait-art:before{inset:15px 0 0 0;box-shadow:7px 8px 0 var(--peach);background-size:28px 28px}.portrait-art:after{inset:5px 9px 10px -5px}.portrait figcaption{font-size:9px;right:0;padding:7px 9px;border-left-width:2px}.hero .underlined{margin-top:3px}.intro{margin-top:24px}.case-section{padding-top:35px}.case-heading{display:block}.case-label{padding-top:0}.case-heading h2{font-size:32px}.case-grid{padding-top:28px;gap:20px}.before,.after{margin:0;max-width:none}.after{border-top-width:2px}.case-card h3{font-size:28px}.training{padding-left:17px}.training h3{font-size:21px}.contact{padding-top:45px}.contact-layout{gap:25px}.contact h2{font-size:33px}}
@media(max-width:380px){.hero{padding-top:20px}.portrait-art{height:185px}.contact h2{font-size:30px}}
@media(prefers-reduced-motion:reduce){.case-card:hover,.button:hover{transform:none}}

/* Restore the expressive composition while keeping the blue palette. */
.header{border-bottom:0}
.portrait-art:before{inset:24px -1px 0 12px;border-radius:35% 42% 9px 9px;transform:translate(var(--backdrop-x,0px),var(--backdrop-y,0px)) rotate(6deg);box-shadow:14px 18px 0 var(--peach)}
.portrait-art:after{inset:13px 9px 3px 1px;border-radius:35% 42% 9px 9px;transform:translate(var(--backdrop-x,0px),var(--backdrop-y,0px)) rotate(-5deg);opacity:.7}
.portrait figcaption{transform:rotate(-4deg);right:-5px;bottom:-5px}
.case-section{position:relative;isolation:isolate;border-top:0;background:transparent}
.case-section:before{content:'';position:absolute;z-index:-1;left:0;top:210px;width:38%;height:600px;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at left center,#000a,transparent 72%)}
.case-heading{display:block}
.case-label{padding-top:0}
.case-card{border-radius:12px;box-shadow:7px 9px 0 var(--shadow);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background .4s,border-color .4s}
.before{background:var(--card);transform:rotate(-1.5deg)}
.after{margin-top:65px;transform:rotate(1.5deg);border-top:1px solid var(--line)}
.before:hover{background:var(--mint);transform:rotate(1deg) translateY(-5px);box-shadow:10px 14px 0 var(--shadow)}
.after:hover{background:var(--peach);transform:rotate(-1deg) translateY(-5px);box-shadow:10px 14px 0 var(--shadow)}
.card-art g{transform:revert}
.contact-layout{border-top:1px solid var(--line);border-radius:12px;box-shadow:8px 10px 0 var(--shadow)}
@media(max-width:750px){.portrait-art:before{inset:15px 0 0 0;box-shadow:6px 8px 0 var(--peach)}.portrait-art:after{inset:5px 9px 10px -5px}.portrait figcaption{right:0;bottom:0}.before{margin-right:8px}.after{margin-top:5px;margin-left:8px}.case-section:before{width:75%;height:750px;background-size:36px 36px}.case-grid{gap:30px}}
@media(prefers-reduced-motion:reduce){.before:hover{transform:rotate(-1.5deg)}.after:hover{transform:rotate(1.5deg)}}

/* Intermittent grid across the page; quiet behind reading areas. */
body{position:relative;isolation:isolate;--grid-line:#426da946}
:root[data-theme=dark] body{--grid-line:#8bb4ed38}
body:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 30% 300px at 100% 320px,#000 10%,transparent 100%),radial-gradient(ellipse 43% 160px at 30% 780px,#000 5%,transparent 100%),radial-gradient(ellipse 24% 480px at 0% 1300px,#000 5%,transparent 100%),radial-gradient(ellipse 25% 350px at 100% 1680px,#000 10%,transparent 100%),radial-gradient(ellipse 48% 190px at 45% 1960px,#000 5%,transparent 100%),radial-gradient(ellipse 40% 180px at 5% 100%,#000 10%,transparent 100%)}
.hero:before,.case-section:before{display:none}
.portrait{padding-bottom:12px}
@media(max-width:750px){body:before{background-size:40px 40px;mask-image:radial-gradient(ellipse 75% 200px at 100% 210px,#000,transparent),radial-gradient(ellipse 90% 100px at 10% 675px,#000,transparent),radial-gradient(ellipse 25% 620px at 0% 1250px,#000,transparent),radial-gradient(ellipse 30% 500px at 100% 1770px,#000,transparent),radial-gradient(ellipse 90% 100px at 40% 2140px,#000,transparent),radial-gradient(ellipse 80% 130px at 0% 100%,#000,transparent)}.portrait{padding-bottom:8px}}