:root{--paper:#faf9f6;
--ink:#242226;
--violet:#7050e8;
--lavender:#e9e2ff;
--apricot:#ffd5b8;
--muted:#706d76}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
scroll-padding-top:95px}
body{margin:0;
background:var(--paper);
color:var(--ink);
font:15px/1.7 Manrope,Arial,sans-serif}
button,input,textarea{font:inherit}
a{color:inherit;
text-decoration:none}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--violet);
outline-offset:5px}
::selection{background:var(--apricot)}
.wrap{max-width:1280px;
margin:auto;
padding:0 60px}
header{position:sticky;
top:0;
z-index:10;
background:#faf9f6ed;
backdrop-filter:blur(16px);
border-bottom:1px solid #24222612}
.nav{height:90px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px}
.brand{font:700 29px 'Space Grotesk',sans-serif;
letter-spacing:-1.8px}
.brand span{color:var(--violet)}
nav{display:flex;
gap:30px;
align-items:center;
font-size:12px;
font-weight:700}
.button{display:inline-flex;
align-items:center;
justify-content:center;
gap:24px;
border:0;
background:var(--violet);
color:white;
border-radius:8px;
padding:17px 24px;
font-size:13px;
font-weight:700;
transition:transform .2s,background .2s}
.button:hover{transform:translateY(-3px);
background:#583ac9}
.button.small{padding:12px 18px}
.arrow{font-size:20px;
line-height:1}
.eyebrow{font-size:10px;
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
display:flex;
align-items:center;
gap:10px}
.dot{width:7px;
height:7px;
background:var(--violet);
border-radius:50%;
display:inline-block}
.hero{padding-top:76px;
padding-bottom:75px;
display:grid;
grid-template-columns:1.08fr 1fr;
gap:30px;
align-items:center}
.hero h1{font:500 clamp(56px,6.6vw,87px)/1.04 'Space Grotesk',sans-serif;
letter-spacing:-5px;
margin:28px 0}
.hero h1 em{font-style:normal;
color:var(--violet)}
.hero p{max-width:430px;
font-size:15px;
color:var(--muted);
line-height:1.9}
.actions{display:flex;
align-items:center;
gap:25px;
margin-top:30px}
.text-link{font-size:12px;
font-weight:800;
border-bottom:1px solid #aaa;
padding:8px 0}
.micro{font-size:10px!important;
letter-spacing:.2px;
margin-top:18px!important}
.system-art{position:relative;
min-height:510px;
display:flex;
align-items:center;
justify-content:center}
.halo{position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:var(--lavender)}
.orbit{position:absolute;
width:480px;
height:480px;
border:1px dashed #c6b9ed;
border-radius:50%}
.mini-window{position:absolute;
top:29px;
left:70px;
width:300px;
background:white;
border-radius:12px;
box-shadow:0 20px 50px #39276614;
transform:rotate(-7deg);
overflow:hidden;
border:1px solid #eee}
.browser-bar{padding:11px;
display:flex;
gap:4px;
border-bottom:1px solid #eee}
.browser-bar i{height:4px;
width:4px;
background:#d5d0dd;
border-radius:50%}
.browser-bar small{margin:auto;
font-size:7px;
color:#999}
.website-preview{display:grid;
grid-template-columns:1fr .65fr;
gap:12px;
padding:22px;
background:#f8f5ed}
.website-preview strong{display:block;
font:500 24px/1.12 'Space Grotesk';
letter-spacing:-1px}
.website-preview span{display:block;
font-size:7px;
margin:12px 0}
.mini-pill{width:70px;
height:14px;
background:var(--violet);
border-radius:3px}
.abstract{background:var(--apricot);
border-radius:65px 65px 8px 8px;
position:relative;
overflow:hidden}
.abstract:before{content:'';
position:absolute;
width:60px;
height:60px;
border:14px solid #7050e8;
border-radius:50%;
left:14px;
top:20px}
.abstract:after{content:'';
position:absolute;
background:#7050e8;
width:100px;
height:65px;
border-radius:70% 70% 0 0;
bottom:-10px;
left:-5px}
.content-preview{position:absolute;
right:0;
top:217px;
background:#fff;
width:228px;
border:1px solid #eee;
border-radius:12px;
padding:18px;
transform:rotate(7deg);
box-shadow:0 20px 50px #39276618}
.tiny-label{font:9px monospace;
letter-spacing:1px;
text-transform:uppercase}
.content-preview p{font-size:11px;
line-height:1.6;
color:var(--ink);
margin-bottom:14px}
.week{display:flex;
gap:5px}
.week span{padding:7px;
background:var(--paper);
font-size:8px;
border-radius:4px}
.week .done{background:var(--lavender);
color:var(--violet)}
.hub{position:absolute;
top:214px;
left:83px;
transform:rotate(-7deg);
border:6px solid var(--paper);
background:var(--violet);
color:white;
width:110px;
height:110px;
display:grid;
place-content:center;
border-radius:28px;
font:500 37px 'Space Grotesk';
box-shadow:0 12px 30px #7050e833}
.publish{position:absolute;
bottom:30px;
left:45px;
background:white;
border:1px solid #eee;
border-radius:10px;
padding:13px 19px;
display:flex;
gap:13px;
align-items:center;
box-shadow:0 15px 40px #39276615;
transform:rotate(-4deg);
font-size:10px}
.check{display:grid;
place-items:center;
width:29px;
height:29px;
background:#e9f4e8;
color:#43723b;
border-radius:50%}
.publish small{display:block;
color:var(--muted);
font-size:8px}
.art-note{position:absolute;
bottom:2px;
right:10px;
font-size:10px;
color:var(--muted);
transform:rotate(-5deg)}
.art-button{position:absolute;
z-index:2;
border:1px solid #d6ccee;
border-radius:30px;
padding:7px 13px;
background:var(--paper);
font-size:10px;
transition:background .2s}
.art-button[aria-pressed=true]{background:var(--violet);
color:white;
border-color:var(--violet)}
.art-button:nth-of-type(1){top:10px;
right:0}
.art-button:nth-of-type(2){top:190px;
left:0}
.art-button:nth-of-type(3){bottom:90px;
right:-5px}
.benefit-bar{border-top:1px solid #ddd9e1;
border-bottom:1px solid #ddd9e1;
display:flex;
justify-content:space-between;
padding:24px 0;
font-size:11px;
font-weight:600}
.benefit-bar span:first-child{color:var(--muted);
font-size:10px}
.benefit-bar b{color:var(--violet);
margin-right:9px}
section{padding-top:100px;
padding-bottom:100px}
h2{font:500 clamp(35px,4.2vw,53px)/1.13 'Space Grotesk',sans-serif;
letter-spacing:-2px;
margin:18px 0 22px}
h3{font:500 25px/1.25 'Space Grotesk';
letter-spacing:-.7px}
.section-heading{display:flex;
justify-content:space-between;
align-items:end;
gap:60px;
margin-bottom:38px}
.section-heading p{max-width:350px;
color:var(--muted);
font-size:13px}
.tab-list{display:flex;
gap:8px;
margin-bottom:25px;
flex-wrap:wrap}
.tab{border:1px solid #ded9e5;
background:transparent;
border-radius:30px;
padding:11px 19px;
font-size:12px;
font-weight:700}
.tab[aria-selected=true]{background:var(--ink);
border-color:var(--ink);
color:white}
.example{background:var(--lavender);
border-radius:16px;
padding:42px;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
min-height:270px}
.example h3{margin-top:13px;
font-size:30px}
.example p{font-size:13px;
max-width:390px}
.example-output{background:white;
border-radius:10px;
padding:24px;
box-shadow:0 12px 25px #39276609}
.output-label{display:flex;
justify-content:space-between;
font-size:9px;
color:var(--muted);
border-bottom:1px solid #eee;
padding-bottom:12px}
.example-output strong{display:block;
font-size:16px;
line-height:1.5;
margin:17px 0 9px}
.example-output p{font-size:11px;
color:var(--muted);
margin:0}
.dark{background:#292334;
color:var(--paper);
border-radius:28px;
margin:0 20px;
padding:80px 40px}
.dark .wrap{padding:0 20px}
.dark .eyebrow{color:#c7b9fc}
.dark h2 em{font-style:normal;
color:#c7b9fc}
.dark .section-heading p{color:#bdb7c7}
.service-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin:55px 0}
.service{border-top:1px solid #5a5267;
padding-top:24px}
.service .icon{font-size:27px;
color:var(--apricot)}
.service p{font-size:12px;
color:#bdb7c7;
line-height:1.9}
.service ul{list-style:none;
padding:0;
margin:23px 0 0;
font-size:11px;
line-height:2.6}
.service li:before{content:'↗';
color:#c7b9fc;
margin-right:12px}
.service-footer{display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
border-top:1px solid #5a5267;
padding-top:30px}
.service-footer p{font-size:12px;
color:#d2ccda}
.button.light{background:var(--lavender);
color:#332551}
.personal{display:grid;
grid-template-columns:1fr 1.1fr;
gap:95px;
align-items:center}
.poster{min-height:410px;
border-radius:150px 150px 16px 16px;
background:var(--apricot);
display:flex;
align-items:center;
justify-content:center;
padding:45px;
position:relative;
overflow:hidden}
.poster-text{font:500 57px/1.1 'Space Grotesk';
letter-spacing:-3px;
transform:rotate(-8deg);
position:relative;
z-index:1}
.poster-text span{color:var(--violet)}
.poster:after{content:'✳';
font-size:240px;
color:#f6bd98;
position:absolute;
bottom:-75px;
right:-20px}
.personal p{color:var(--muted);
font-size:13px}
.personal .sign{font:500 20px 'Space Grotesk';
color:var(--ink);
margin-top:25px}
.calculator{background:#eeeae3;
padding:55px;
border-radius:16px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:80px}
.calculator h2{font-size:39px}
.calculator p{color:var(--muted);
font-size:12px}
.range-label{display:flex;
justify-content:space-between;
font-size:12px;
font-weight:700;
margin-top:25px}
input[type=range]{width:100%;
accent-color:var(--violet);
margin:20px 0;
cursor:pointer}
.result{display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:var(--paper);
border-radius:12px;
padding:25px;
text-align:center}
.result strong{font:500 80px 'Space Grotesk';
letter-spacing:-5px;
color:var(--violet);
line-height:1.2}
.result span{font-size:12px}
.result small{font-size:9px;
color:var(--muted);
max-width:240px;
margin-top:18px}
.faq{display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px}
.faq h2{font-size:42px}
details{border-bottom:1px solid #ddd9e1;
padding:21px 0}
summary{font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
gap:20px}
summary:after{content:'+';
font-size:20px;
color:var(--violet)}
details[open] summary:after{content:'−'}
details p{font-size:12px;
color:var(--muted);
max-width:480px}
.contact{background:var(--lavender);
border-radius:25px;
padding:60px;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
margin-bottom:65px}
.contact h2{font-size:50px}
.contact p{font-size:13px;
color:var(--muted)}
label{font-size:11px;
font-weight:700;
display:block}
input[type=text],textarea{border:1px solid #c8bfe0;
border-radius:7px;
padding:12px;
width:100%;
background:#ffffff85;
margin:7px 0 14px;
font-size:12px;
color:var(--ink)}
textarea{resize:vertical;
min-height:100px}
form .button{width:100%}
.form-note{font-size:10px!important;
line-height:1.6}
footer{display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
padding-bottom:35px!important}
footer small{font-size:10px;
color:var(--muted)}
.status{font-size:12px;
color:#443277;
margin-top:14px}
.menu-toggle{display:none}
@media(min-width:1000px){.mini-window{animation:float 7s ease-in-out infinite}
.content-preview{animation:float2 8s ease-in-out infinite}
}
@keyframes float{50%{transform:translateY(-9px) rotate(-7deg)}
}
@keyframes float2{50%{transform:translateY(8px) rotate(7deg)}
}
@media(max-width:1050px){.wrap{padding:0 30px}
.hero h1{font-size:68px}
.system-art{transform:scale(.85);
transform-origin:center}
.hero{gap:0}
.personal{gap:45px}
.orbit{width:430px;
height:430px}
.contact{gap:35px;
padding:40px}
}
@media(max-width:760px){.wrap{padding:0 22px}
.nav{height:72px}
.brand{font-size:26px}
.menu-toggle{display:block;
border:1px solid #ddd;
background:none;
border-radius:6px;
padding:8px 12px;
font-size:12px}
nav{display:none;
position:absolute;
top:72px;
left:0;
right:0;
background:var(--paper);
padding:25px;
box-shadow:0 12px 20px #0001;
align-items:stretch}
nav.open{display:flex;
flex-direction:column;
gap:15px}
.hero{grid-template-columns:1fr;
padding-top:45px;
padding-bottom:30px}
.hero h1{font-size:64px;
letter-spacing:-4px}
.hero p{font-size:14px}
.actions{gap:20px}
.system-art{min-height:485px;
max-width:470px;
width:100%;
margin:auto;
transform:scale(.88);
margin-top:-5px;
margin-bottom:-35px}
.halo{width:360px;
height:360px}
.orbit{width:395px;
height:395px}
.mini-window{left:35px}
.content-preview{right:-8px}
.hub{left:45px}
.art-button:nth-of-type(2){left:-8px}
.publish{left:0}
.benefit-bar{display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
font-size:10px}
.benefit-bar span:first-child{grid-column:1/-1}
section{padding-top:65px;
padding-bottom:65px}
.section-heading{display:block;
margin-bottom:25px}
.section-heading p{max-width:100%}
h2{font-size:38px;
letter-spacing:-1.6px}
.example{grid-template-columns:1fr;
gap:20px;
padding:25px}
.example h3{font-size:27px}
.tab{font-size:10px;
padding:10px 13px}
.dark{margin:0 10px;
padding:45px 12px;
border-radius:20px}
.dark .wrap{padding:0 12px}
.service-grid{grid-template-columns:1fr;
gap:25px;
margin:30px 0}
.service h3{margin:12px 0}
.service-footer{align-items:start;
flex-direction:column}
.personal{grid-template-columns:1fr;
gap:35px}
.poster{min-height:320px;
max-width:400px;
width:100%;
margin:auto}
.poster-text{font-size:53px}
.calculator{grid-template-columns:1fr;
padding:26px;
gap:20px}
.calculator h2{font-size:33px}
.result strong{font-size:70px}
.faq{grid-template-columns:1fr;
gap:10px}
.faq h2{font-size:36px}
.contact{grid-template-columns:1fr;
padding:28px;
gap:25px;
margin-bottom:35px}
.contact h2{font-size:43px}
footer{flex-direction:column;
align-items:start;
gap:12px}
.art-note{right:5px}
}
@media(max-width:760px){.hero h1{font-size:clamp(43px,12.8vw,64px);
letter-spacing:-3px}
.hero .actions{gap:18px}
.hero .button{font-size:11px;
padding:15px 17px;
gap:15px;
white-space:nowrap}
.hero .text-link{font-size:10px;
white-space:nowrap}
}
@media(max-width:370px){.hero h1{font-size:43px}
.system-art{transform:scale(.76);
width:340px;
margin-left:-25px}
.actions{gap:12px}
.button{padding:15px 18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;
transition:none!important}
}


/* Kirsten Biema: portrait-led, visitor-focused revision */
.brand{font-size:26px;
letter-spacing:-1.5px;
white-space:nowrap}
.brand span{margin-left:4px}
.personal-hero{grid-template-columns:1.1fr 1fr;
padding-top:52px;
padding-bottom:50px;
gap:55px}
.personal-hero h1{font-size:clamp(54px,5.8vw,76px);
letter-spacing:-4px;
line-height:1.02;
margin:24px 0}
.personal-hero p{max-width:470px;
font-size:14px;
line-height:1.85}
.personal-hero .actions{gap:20px;
flex-wrap:wrap}
.hero-photo{margin:0;
position:relative;
align-self:stretch;
min-height:535px}
.hero-photo>img{width:100%;
height:100%;
position:absolute;
inset:0;
object-fit:cover;
object-position:50% 30%;
border-radius:150px 18px 18px 18px}
.hero-photo figcaption{position:absolute;
bottom:18px;
left:18px;
right:18px;
background:#fffdf6ed;
backdrop-filter:blur(12px);
border-radius:9px;
padding:17px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px}
.hero-photo strong{font:500 21px 'Space Grotesk'}
.hero-photo small{display:block;
font-size:9px;
margin-top:4px;
color:var(--muted)}
.photo-star{font-size:34px;
color:var(--violet)}
.photo-sticker{position:absolute;
right:-18px;
top:28px;
padding:18px 22px;
background:var(--apricot);
transform:rotate(7deg);
font:500 19px/1.2 'Space Grotesk';
box-shadow:0 10px 20px #24222612}
.photo-sticker em{font-style:normal}
.trust-bar{align-items:center;
gap:22px}
.trust-bar b{font:600 24px 'Space Grotesk'}
.trust-bar a{font-size:11px}
.evidence-note{font-size:9px;
color:var(--muted);
margin:10px 0 0}
.recognition{padding-bottom:50px}
.pain-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px}
.pain-grid article{border-top:1px solid #d7d0e0;
padding-top:22px}
.pain-grid article>span{font-size:9px;
color:var(--violet);
font-weight:800;
letter-spacing:1.5px}
.pain-grid h3{font-size:23px;
margin:15px 0}
.pain-grid p{font-size:12px;
color:var(--muted)}
.paths{padding-top:40px;
padding-bottom:50px}
.path-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:22px}
.path{padding:35px;
border-radius:16px;
background:#f0ece6}
.path.build{background:var(--lavender)}
.path-label{font-size:9px;
letter-spacing:1.4px;
font-weight:800}
.path h3{font-size:34px;
letter-spacing:-1.1px;
margin:20px 0}
.path p{font-size:13px;
color:#615b69;
max-width:380px}
.path ul{padding:0;
list-style:none;
margin:24px 0;
line-height:2.2;
font-size:12px}
.path li:before{content:'✓';
color:var(--violet);
margin-right:12px}
.path .button{width:100%;
font-size:12px;
justify-content:space-between}
.button.outline{color:var(--ink);
background:transparent;
border:1px solid #aaa2b2}
.button.outline:hover{background:#e4ded7}
.path-secondary{display:block;
font-size:10px;
margin-top:15px;
color:#625b6d}
.proof-quote{display:flex;
gap:22px;
align-items:center;
border-block:1px solid #ded8e4;
padding:25px 0;
margin:0 0 5px}
.quote-sign{font:70px/1 'Space Grotesk';
color:var(--violet)}
.proof-quote blockquote{font:500 21px/1.4 'Space Grotesk';
margin:0;
max-width:600px}
.proof-quote>div{margin-left:auto;
flex-shrink:0}
.proof-quote strong,.proof-quote small,.proof-quote a{display:block;
font-size:10px}
.proof-quote small{color:var(--muted)}
.proof-quote a{margin-top:7px;
color:var(--violet)}
.system-map{display:flex;
justify-content:space-between;
gap:16px;
border-radius:12px;
background:#ffffff08;
padding:27px;
margin-top:40px}
.system-map>div{flex:1}
.system-map span{font:8px monospace;
letter-spacing:1px;
color:#bdb7c7;
display:block;
margin-bottom:12px}
.system-map strong{font:500 19px/1.3 'Space Grotesk'}
.system-map>b{align-self:center;
color:var(--apricot);
font-size:24px;
font-weight:400}
.people-collage{position:relative;
min-height:470px}
.people-collage figure{margin:0;
overflow:hidden;
border-radius:13px;
background:var(--lavender);
box-shadow:0 15px 25px #24222612}
.people-collage img{width:100%;
height:auto;
display:block;
object-fit:cover}
.kirsten-card{width:80%;
transform:rotate(-5deg)}
.people-collage figcaption{padding:10px 15px}
.people-collage figcaption strong{font:500 19px 'Space Grotesk'}
.people-collage figcaption span{display:block;
font-size:9px}
.conny-card{width:47%;
position:absolute;
right:0;
bottom:0;
transform:rotate(7deg);
border:5px solid var(--paper)}
.collage-note{position:absolute;
left:0;
bottom:25px;
font-size:11px;
max-width:160px;
transform:rotate(-5deg)}
.outcomes{padding-top:15px;
padding-bottom:55px}
.outcome-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px}
.outcome-grid article{background:#f0ede7;
border-radius:12px;
padding:26px}
.outcome-grid h3{font-size:25px}
.outcome-grid p{font-size:12px;
color:var(--muted);
min-height:90px}
.outcome-grid strong,.outcome-grid small{display:block;
font-size:11px}
.outcome-grid small{font-size:9px;
color:var(--muted)}
.result-mark{width:45px;
height:45px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--lavender);
color:var(--violet);
font-size:25px;
margin-bottom:25px}
.contact{align-items:center}
.contact .button{margin-top:15px;
gap:25px}
.call-agenda{background:#ffffff80;
border-radius:14px;
padding:27px}
.call-agenda ol{list-style:none;
padding:0;
margin:20px 0 28px;
counter-reset:steps}
.call-agenda li{counter-increment:steps;
position:relative;
padding:0 0 19px 35px;
font-size:12px}
.call-agenda li:before{content:counter(steps);
position:absolute;
left:0;
top:0;
color:var(--violet);
font:500 22px 'Space Grotesk'}
.call-agenda li span{display:block;
color:var(--muted);
font-size:11px;
margin-top:5px}
.call-agenda .text-link{font-size:10px}
.footer-links{display:flex;
gap:20px;
font-size:10px;
color:var(--muted)}

@media(max-width:1050px){nav{gap:18px;
font-size:10px}
.personal-hero{gap:30px}
.personal-hero h1{font-size:60px}
.hero-photo{min-height:530px}
.trust-bar{flex-wrap:wrap}
.trust-bar span:first-child{flex-basis:100%}
.path{padding:26px}
.path h3{font-size:30px}
.people-collage{min-height:430px}
.system-map{gap:10px;
padding:20px}
.system-map strong{font-size:17px}
.contact{gap:25px}
}

@media(max-width:760px){.brand{font-size:24px}
.personal-hero{grid-template-columns:1fr;
padding-top:32px;
padding-bottom:35px;
gap:27px}
.personal-hero h1{font-size:clamp(51px,12vw,72px);
letter-spacing:-3px}
.personal-hero h1 em br{display:initial}
.personal-hero p{font-size:13px}
.hero-photo{height:445px;
min-height:0;
margin:0 4px}
.hero-photo>img{border-radius:95px 13px 13px 13px;
object-position:50% 30%}
.photo-sticker{right:-9px;
top:-20px;
font-size:17px;
padding:13px 17px}
.hero-photo strong{font-size:20px}
.hero-photo small{font-size:8px}
.personal-hero .actions{gap:14px}
.personal-hero .text-link{font-size:10px}
.trust-bar{display:grid;
grid-template-columns:1fr 1fr;
gap:17px}
.trust-bar span:first-child,.trust-bar a{grid-column:1/-1}
.trust-bar b{font-size:22px}
.recognition{padding-top:55px}
.pain-grid{grid-template-columns:1fr;
gap:22px}
.pain-grid h3{font-size:24px}
.paths{padding-top:15px}
.path-grid{grid-template-columns:1fr}
.path{padding:25px}
.path h3{font-size:32px}
.path .button{font-size:11px;
padding:15px}
.proof-quote{flex-wrap:wrap;
gap:12px}
.proof-quote blockquote{font-size:21px;
flex:1}
.proof-quote>div{margin-left:38px;
width:calc(100% - 38px)}
.quote-sign{font-size:45px}
.system-map{display:grid;
grid-template-columns:1fr auto 1fr;
gap:22px}
.system-map>b:nth-of-type(2){display:none}
.system-map span{font-size:7px}
.system-map strong{font-size:17px}
.people-collage{min-height:440px;
max-width:380px;
width:100%;
margin:auto}
.outcome-grid{grid-template-columns:1fr}
.outcome-grid p{min-height:0}
.outcome-grid h3{font-size:27px}
.contact{padding:26px}
.contact .button{font-size:11px;
padding:15px 18px;
gap:15px}
.call-agenda{padding:22px}
.call-agenda .text-link{font-size:9px}
.footer-links{gap:22px}
.outcomes{padding-top:0}
}

@media(max-width:370px){.hero-photo{height:385px}
.personal-hero h1{font-size:47px}
.people-collage{min-height:400px}
.path .button{font-size:10px;
gap:10px}
.personal-hero .actions{gap:10px}
.personal-hero .text-link{font-size:9px}
}

@media(max-width:370px){.system-map{grid-template-columns:1fr;
gap:20px}
.system-map>b{display:none}
.system-map>div{padding-bottom:15px;
border-bottom:1px solid #ffffff20}
}


/* MICRO-MOTION: only enhancement;
 content is visible without JavaScript. */
.button .arrow, .button > span, .brand > span {
  display: inline-block;

  transition: transform 180ms ease;

}

.button:hover > span, .button:focus-visible > span { transform: translate(3px, -3px);
 }

.brand:hover > span { transform: rotate(45deg);
 }

.path, .outcome-grid article { transition: transform 220ms ease, box-shadow 220ms ease;
 }

header { transition: box-shadow 220ms ease;
 }

header.is-scrolled { box-shadow: 0 5px 24px #2422260a;
 }

summary::after { transition: transform 200ms ease;
 }

details[open] summary::after { transform: rotate(180deg);
 }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .path:hover, .outcome-grid article:hover { transform: translateY(-4px);
 box-shadow: 0 14px 30px #2422260b;
 }

}

@media (prefers-reduced-motion: no-preference) {
  .personal-hero > div { animation: welcome-in 650ms cubic-bezier(.2,.7,.2,1) both;
 }

  .hero-photo { animation: welcome-in 750ms 100ms cubic-bezier(.2,.7,.2,1) both;
 }

}

@keyframes welcome-in { from { opacity: 0;
 transform: translateY(12px);
 }
 to { opacity: 1;
 transform: translateY(0);
 }
 }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
 }

  *, *::before, *::after { animation: none !important;
 transition: none !important;
 }

}