/* Finishing layer: the same materials, readable controls and considered details across every chapter. */
:root{--craft-petrol:#285c63;--craft-ochre:#c7a04a;--craft-night:#272b35;--craft-paper:#f1f1ec}
a,button,summary{touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--signature);outline-offset:5px}
.chapter,.career-map>.chapter,.workshop>.chapter{font-size:11px;letter-spacing:.12em}
.route-nav #route-prev,.route-nav #route-next{font-size:11px}
.route-nav #route-position{font-size:10px;letter-spacing:.1em}
.text-link,.evidence-link,.product-link,.founder-note>a,.founder-aside>a{ text-decoration-thickness:1px;text-underline-offset:5px}
.hero-header a,.hero-bottom>a,.text-link,.product-link{transition:color .2s ease,text-decoration-color .2s ease}

/* Navigation fits a full desktop viewport and records the current part of the journey. */
#menu{background:var(--craft-night);color:#f6f2e8}
#menu .menu-top{min-height:44px;align-items:center}
#menu nav{max-width:1040px;margin:clamp(24px,4vh,50px) auto}
#menu nav a{display:flex;align-items:center;gap:18px;font-size:clamp(34px,6.7vh,72px);padding:7px 0;line-height:1.06;border-color:#aeb8b530;transition:color .25s,padding .25s}
#menu nav small{width:34px;min-width:34px;font:11px var(--mono);color:#b2bcba}
#menu nav a[aria-current]{color:#e2c178}
#menu nav a[aria-current] small{color:inherit}
#menu nav a[aria-current]::after{content:'HIER';font:10px var(--mono);letter-spacing:.12em;margin-left:auto;padding-right:4px;color:#e2c178}
#menu .menu-mail{max-width:1040px;font-size:13px;color:#c6d0cc;padding-block:8px;width:fit-content;margin-left:max(0px,calc((100% - 1040px)/2))}

/* The portrait and founder note read as one personal spread. */
#about .about-intro{color:#4c5650}
#about .portrait-frame{padding:8px;background:#eee9de;border:1px solid #285c6320}
#about .portrait-frame img{height:clamp(240px,36vh,340px);max-width:100%;object-fit:cover}
#about .founder-note{border-top:1px solid #285c6345}
#about .founder-note>a{color:var(--craft-petrol)}
#about .about-foot strong{color:var(--craft-petrol)}
#about .about-foot span{font-size:11px;line-height:1.5}

/* Four hand-drawn network structures make each area of expertise identifiable. */
#expertise{background:var(--craft-night)}
body:has(#expertise.is-current) .rail,body:has(.expertise-card.is-current) .rail{background:var(--craft-night)}
.mobile-spatial .journey-scene:has(#expertise) .scene-content{background:var(--craft-night)}
#expertise>div:last-child{margin-block:auto}
#expertise h2{font:400 clamp(40px,4.25vw,68px)/1.06 var(--serif);letter-spacing:-.045em;max-width:10.8em}
#expertise .accent-people{color:#e2c178}
.expertise-card{border-color:#a2b9b530;background:#253d40}
.expertise-card[data-title="Strategische Führung"],.expertise-card[data-title="Internationale Skalierung"]{background:#263e40}
.expertise-card[data-title="KI und Automatisierung"],.expertise-card[data-title="Architektur und Cloud"]{background:#293540}
.expertise-index{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%}
.expertise-index .expertise-number{font-size:clamp(62px,6.4vw,92px);color:#e2c178}
.expertise-diagram{width:clamp(70px,8vw,115px);height:auto;flex:none;stroke:#b9cdc9;fill:none;stroke-width:1.3;transition:transform .4s ease}
.expertise-diagram circle,.expertise-diagram rect{fill:#293c40}
.expertise-diagram circle{stroke:#e2c178}
.expertise-card h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.045em;line-height:1.12}
.expertise-card p{color:#e1e9e5;line-height:1.6}
.expertise-card .eyebrow{font:10px/1.6 var(--mono);letter-spacing:.07em;color:#bfcbc6;padding-top:18px;border-top:1px solid #a2b9b530}

/* Map controls and dated stations use the same active-state language. */
#career-map{background:#e8eeea}
#career-map .atlas-surface{background:#f1f3ed;border-color:#9faea455}
#career-map .atlas-tools button{font-size:11px;min-height:40px;background:#f1f3edee}
#career-map .atlas-tools button[aria-pressed=true],#career-map .atlas-locations button[aria-pressed=true]{background:var(--craft-petrol);color:#f7f5ed;border-color:var(--craft-petrol)}
#career-map .atlas-locations button{min-height:40px}
#career-map .atlas-years{color:var(--craft-petrol)}
#career-map .atlas-credit{font-size:10px;letter-spacing:.025em}
#career-map .atlas-footer label,#career-map .atlas-story-nav span{font-size:10px}
#career-map .atlas-focus{font-size:14px;line-height:1.6}
#career-map .atlas-city-roles button[aria-pressed=true]{background:var(--craft-petrol);border-color:var(--craft-petrol);color:#fff}
#experience{background:#f4f0e8}
#experience details[open]>summary{color:var(--craft-petrol)}
#experience summary{padding-block:22px}
#experience summary>small{font-size:11px;color:#66716b}
#experience details{border-color:#9ba9a050}
#experience details>div{padding:4px 0 26px}
#experience details p{line-height:1.65}
#experience .founder-aside{border-top:2px solid var(--craft-ochre)}
#experience .founder-aside>a{color:var(--craft-petrol)}
#experience .experience-footer{font-size:11px;line-height:1.6}

/* A stable, legible product selector; the status is part of the product, not decoration. */
#workshop{background:#f8f3e9}
#workshop .workshop-heading .eyebrow{font-size:11px;color:var(--craft-petrol)}
#workshop .bench-label{font-size:10px}
#workshop .product-choices button{justify-content:flex-start;padding:16px 14px;font-size:14px;min-height:58px;line-height:1.5;border-color:#b6bdb350}
#workshop .product-choices button[aria-pressed=true]{background:var(--craft-petrol);color:#f7f5ed;box-shadow:inset 3px 0 var(--craft-ochre)}
#workshop .product-choices button[aria-pressed=true]::before{display:none}
#workshop .product-preview{border:1px solid #b6bdb360}
#workshop .product-preview>span{font-size:10px;line-height:1.4;padding:7px 10px}
#workshop .product-meta{align-items:center;font-size:11px}
#workshop .product-status{display:inline-flex;align-items:center;border:1px solid #285c6350;padding:4px 9px;font:10px/1.4 var(--mono);letter-spacing:.035em;color:var(--craft-petrol);background:#e5ede6}
#workshop [data-status="In Entwicklung"] .product-status{color:#465760;background:#e8ecee;border-color:#b1bec3}
#workshop [data-status="Im Pilot"] .product-status{color:#65501e;background:#eee2c3;border-color:#c6ac6e}
#workshop .product-reason{font-size:14px;color:#535b55;line-height:1.7}
#workshop .product-link{color:var(--craft-petrol);min-height:32px;display:inline-flex;align-items:center}
#workshop .workshop-bottom>p,#workshop .workshop-bottom>a{font-size:11px;line-height:1.5}

/* A physical contact card closes the site, carrying the same light paper and ochre. */
#contact{background:var(--craft-night)}
body:has(#contact.is-current) .rail,body:has(#contact.is-current) .route-nav{background:var(--craft-night);color:#f6f2e8}
.mobile-spatial .journey-scene:has(#contact) .scene-content{background:var(--craft-night)}
#contact .contact-emphasis{color:#e2c178}
#contact .contact-mail{letter-spacing:-.035em;border-color:#bfcac560;padding-bottom:7px}
#contact .contact-card{width:208px;max-width:none;padding:18px;gap:11px;background:#f4eee1;color:#293331;border:1px solid #e3d8c3;box-shadow:0 12px 24px #10131a30;transform:rotate(2deg)}
#contact .contact-card img{width:150px;height:150px}
#contact .contact-card-heading{font-size:10px;letter-spacing:.04em}
#contact .contact-card-action{font-size:13px;color:var(--craft-petrol)}
#contact .contact-card small{font-size:10px;color:#59655e}
#contact footer{font-size:11px;border-color:#a9b9b030}
#contact .contact-profile>p,#contact .contact-profile>a{color:#d2dbd6}

@media(min-width:701px){
 #about{padding-top:70px}
 #experience{width:calc(100vw - var(--rail));grid-template-columns:34% minmax(0,1fr);padding-top:76px}
 #experience .experience-body{min-width:0}
 #experience summary>span{font-size:clamp(38px,4.5vw,65px);line-height:1.04}
 .expertise-card{padding-top:64px;padding-bottom:40px}
 #expertise{padding-top:64px}
 #workshop{padding-top:64px}
 #workshop .product-preview{height:clamp(100px,22vh,230px);aspect-ratio:auto}
}
@media(min-width:701px) and (max-height:740px){
 #about{padding-top:58px}#about .portrait-frame img{height:29vh;min-height:165px}
 #expertise h2{font-size:clamp(36px,3.8vw,54px)}
 .expertise-card{padding-top:52px;padding-bottom:28px}
 #experience{padding-top:54px}#experience summary{padding-block:15px}#experience summary>span{font-size:42px}
 #workshop{padding-top:50px;gap:16px}#workshop .product-choices button{min-height:46px;padding-block:10px;font-size:13px}
 #workshop .product-reason{font-size:13px;line-height:1.55}
 #workshop .product-preview{height:clamp(90px,19vh,140px)}
 #contact{padding-top:54px}
 #contact .contact-card{width:190px;padding:13px;gap:8px}#contact .contact-card img{width:130px;height:130px}
}
@media(max-width:700px){
 #menu{padding:20px 24px}
 #menu nav{margin:24px auto}
 #menu nav a{font-size:clamp(29px,9vw,43px);min-height:54px;padding:10px 0;gap:8px;white-space:nowrap}
 #menu nav small{width:24px;min-width:24px;font-size:10px}
 #menu nav a[aria-current]::after{content:'';width:16px;height:2px;background:#e2c178;padding:0;flex:none}
 #menu .menu-mail{font-size:12px;overflow-wrap:anywhere}
 #about .portrait-frame img{height:auto;width:100%;aspect-ratio:1;object-fit:cover}
 #about .portrait-frame{padding:7px;width:100%}
 #about .about-foot span{font-size:10px}
 #expertise{min-height:60svh;padding-top:100px}
 #expertise>div:last-child{margin-top:44px;margin-bottom:12px}
 #expertise h2{font-size:clamp(35px,10.5vw,49px)}
 .expertise-index .expertise-number{font-size:68px}
 .expertise-diagram{width:90px}
 .expertise-card{min-height:460px;padding:38px 24px;gap:32px}
 .expertise-card h3{font-size:clamp(25px,8vw,36px);overflow-wrap:anywhere}
 .expertise-card p{font-size:16px}
 #career-map .atlas-tools button{font-size:10px;padding-inline:8px}
 #career-map .atlas-focus{font-size:14px}
 #experience summary{align-items:flex-start}
 #experience summary>span{font-size:clamp(34px,10vw,44px)}
 #experience summary>small{padding-top:7px;font-size:10px}
 #experience .experience-footer{font-size:10px;gap:20px}
 #workshop .product-choices{gap:10px}
 #workshop .product-choices button{font-size:12px;padding:12px 10px;min-height:74px;align-items:center}
 #workshop .product-result h3{font-size:clamp(29px,9vw,38px);overflow-wrap:anywhere}
 #workshop .product-preview>span{font-size:10px}
 #contact .contact-mail{font-size:clamp(16px,5vw,27px);letter-spacing:-.035em}
 #contact h2{font-size:16vw}
 #contact .contact-card{margin-top:32px;margin-right:5px}
}
@media(hover:hover) and (pointer:fine){
 .hero-header a:hover,.hero-bottom>a:hover,.text-link:hover,.product-link:hover{color:var(--founder-ink);text-decoration:underline}
 #menu nav a:hover{color:#e2c178;padding-left:8px}
 .expertise-card:hover .expertise-diagram{transform:translateY(-4px)}
 #workshop .product-choices button:not([aria-pressed=true]):hover{background:#285c630a;color:var(--craft-petrol)}
 #contact .contact-card:hover{transform:rotate(0);box-shadow:0 15px 28px #10131a45}
}
@media(prefers-reduced-motion:reduce){
 #menu nav a,.expertise-diagram,.hero-header a,.hero-bottom>a,.text-link,.product-link{transition:none}
 .expertise-card:hover .expertise-diagram{transform:none}
 #contact .contact-card,#contact .contact-card:hover{transform:none;transition:none}
}

/* Typography and proportion: expressive display, readable content, precise notation. */
:root{
 --type-display:clamp(48px,4.65vw,72px);
 --type-body:clamp(16px,1.2vw,18px);
 --type-lead:clamp(18px,1.35vw,21px);
 --type-caption:12px;
}
#about h2,#selected-work h2,#expertise h2,#career-map h2,#workshop h2,
#contact h2,#menu nav a,.case-heading h2,.case-story h3,
.intro-sequence p,.hero-landing p{
 font-variation-settings:'opsz' 48;font-kerning:normal;text-wrap:balance;
}
#about h2,#selected-work h2,#expertise h2,#career-map h2,#workshop h2{font-weight:450;letter-spacing:-.045em}
#about h2 em,#selected-work h2 em{font-weight:450}
.chapter,.career-map>.chapter,.workshop>.chapter{font:500 11px/1.5 var(--mono);letter-spacing:.12em}
.hero-header .name,.intro-brand{font-size:14px;font-weight:500;letter-spacing:-.025em}
.hero-roles,.hero-roles a{font-size:14px;line-height:1.65;letter-spacing:-.015em}
.hero .route-choices button{font-size:12px}
#about .about-intro{font-size:var(--type-lead);line-height:1.65;letter-spacing:-.018em;max-width:55ch}
#about .about-note p:not(.eyebrow),#experience .founder-aside>p:not(.eyebrow){font-size:16px;line-height:1.65;max-width:31ch}
#about .about-note .text-link{font-size:16px}
#about .founder-note>a,#experience .founder-aside>a{font-variation-settings:'opsz' 36;font-weight:450}
#about .about-foot strong{font-size:56px;font-variation-settings:'opsz' 48}
#about .about-foot span{font-size:12px;line-height:1.5}
#selected-work .row-detail p{font-size:var(--type-body);line-height:1.65;letter-spacing:-.012em;max-width:48ch}
#selected-work .work-rows summary{font-weight:500;letter-spacing:-.035em}
#selected-work .evidence-link{font-size:12px}
#work .project-cover strong{font-variation-settings:'opsz' 48;font-weight:450;letter-spacing:-.045em;line-height:1}
#work .cover-bor strong{font-weight:500;letter-spacing:-.045em;line-height:1.08}
#work .work-word{font-variation-settings:'opsz' 72;font-weight:400;letter-spacing:-.055em}
#work .cover-meta{font-size:12px;line-height:1.45}
#work .cover-bottom{font-size:11px;letter-spacing:.055em}
.expertise-index{align-items:flex-start}
.expertise-index .expertise-number{font:400 42px/1.1 var(--serif);font-variation-settings:'opsz' 32;letter-spacing:-.04em}
.expertise-diagram{width:clamp(120px,11vw,165px);stroke-width:1.1}
.expertise-card h3{font:500 clamp(27px,2.3vw,36px)/1.16 var(--sans);letter-spacing:-.045em;text-wrap:balance;overflow-wrap:normal}
.expertise-card p{font-size:var(--type-body);line-height:1.65;letter-spacing:-.012em;max-width:33ch}
.expertise-card .eyebrow{font-size:11px;letter-spacing:.035em;line-height:1.7}
#career-map .atlas-focus{font-size:15px;line-height:1.65}
#career-map .atlas-company{font-size:12px;line-height:1.5}
#career-map .atlas-readout h3{font-weight:500;letter-spacing:-.025em}
#experience summary>span{font-variation-settings:'opsz' 48;letter-spacing:-.045em}
#experience summary>small{font-size:12px;font-variant-numeric:tabular-nums}
#experience details p{font-size:16px;line-height:1.65;letter-spacing:-.01em}
#experience details p:first-child{font-weight:600}
#experience ul{font-size:15px;line-height:1.7}
#workshop .workshop-heading>p{font-size:16px;line-height:1.65;max-width:33ch}
#workshop .product-choices button{font-size:16px;letter-spacing:-.02em}
#workshop .product-result h3{font:500 clamp(28px,2.55vw,38px)/1.16 var(--sans);letter-spacing:-.045em;text-wrap:balance}
#workshop .product-reason{font-size:16px;line-height:1.65;max-width:55ch}
#workshop .product-link{font-size:14px;font-weight:500}
#workshop .product-status{font-size:11px}
#contact h2{font-variation-settings:'opsz' 64;letter-spacing:-.055em;line-height:.94}
#contact .contact-mail{font-size:clamp(26px,2.8vw,42px);letter-spacing:-.03em}
#contact .contact-card{width:220px;padding:20px;gap:12px}
#contact .contact-card img{width:156px;height:156px}
#contact .contact-card-action{font-size:14px;font-weight:500}
#contact .contact-card small{font-size:11px;line-height:1.5}
.case-story h3{font-weight:450}
.case-facts,.case-top,.topic-evidence-label{font-size:12px}
.case-story section p:not(.eyebrow){font-size:18px;line-height:1.7;max-width:60ch}
@media(min-width:701px){
 #about h2{font-size:var(--type-display);line-height:1.07;max-width:15em}
 #about .about-bottom{grid-template-columns:minmax(0,1fr) auto;max-width:960px;gap:clamp(30px,5vw,80px);margin-top:34px;align-items:start}
 #about .portrait-frame{width:clamp(260px,25vw,370px);padding:9px}
 #about .portrait-frame img{width:100%;height:auto;aspect-ratio:1}
 #about .about-foot{bottom:48px;max-width:170px}
 #about .about-foot span{max-width:160px}
 #expertise h2{font-size:var(--type-display);line-height:1.08}
 .expertise-card{padding-inline:3vw}
 #workshop{gap:20px}
 #workshop .workshop-heading h2{font-size:clamp(54px,5.2vw,78px)}
 #workshop .product-preview{height:clamp(110px,20vh,210px)}
 #workshop .workshop-bottom{margin-top:12px}
}
@media(min-width:701px) and (max-height:750px){
 #about h2{font-size:clamp(40px,4vw,56px)}
 #about .about-intro{font-size:16px;line-height:1.6;margin-top:18px}
 #about .about-bottom{margin-top:24px}
 #about .portrait-frame{width:clamp(220px,35vh,270px)}
 #about .about-note p:not(.eyebrow){font-size:15px}
 #about .about-foot strong{font-size:44px}
 #selected-work .row-detail p{font-size:15px;line-height:1.6}
 #selected-work .work-rows summary{font-size:24px;line-height:1.15;padding-block:14px}
 #selected-work .row-detail{padding-bottom:20px}
 #work .cover-meta{font-size:11px}
 #work .cover-bottom{font-size:10px;min-height:16px;padding-top:3px}
 #work .cover-bor strong{font-size:clamp(24px,4.4vh,32px);line-height:1.05}
 #expertise h2{font-size:clamp(38px,4vw,56px)}
 .expertise-diagram{width:125px}
 #experience details p{font-size:15px;line-height:1.6}
 #experience ul{font-size:14px}
 #workshop{gap:14px}
 #workshop .workshop-heading h2{font-size:clamp(44px,3.8vw,52px)}
 #workshop .workshop-heading>p{font-size:14px;max-width:36ch}
 #workshop .product-result h3{font-size:28px}
 #workshop .product-choices button{font-size:14px;min-height:46px;padding-block:10px}
 #workshop .product-preview{height:clamp(110px,21vh,150px)}
 #workshop .product-reason{font-size:15px;line-height:1.55}
 #workshop .product-link{font-size:13px;min-height:26px}
 #contact h2{font-size:clamp(76px,9.2vw,125px);margin-top:4vh}
 #contact .contact-card{width:190px;padding:13px;gap:8px}
 #contact .contact-card img{width:130px;height:130px}
}
@media(max-width:1000px) and (min-width:701px){
 #about{grid-template-columns:18% 82%}
 #about .portrait-frame{width:clamp(215px,27vw,260px)}
 #about .about-bottom{gap:24px}
 #about .about-note p:not(.eyebrow){font-size:15px}
 #about .about-foot span{font-size:11px;max-width:115px}
 #about .about-foot strong{font-size:44px}
 #experience{grid-template-columns:31% minmax(0,1fr)}
 #experience summary{gap:12px}
 #experience summary>span{font-size:clamp(32px,4.6vw,44px)}
 #experience summary>small{font-size:11px}
 #experience .founder-aside>p:not(.eyebrow){font-size:14px}
 #workshop .workshop-heading>p{font-size:14px}
}
@media(max-width:700px){
 .hero-header .name,.intro-brand{font-size:12px}
 .hero-roles,.hero-roles a{font-size:12px;line-height:1.6}
 .hero .route-choices button{font-size:11px}
 #about h2{font-size:clamp(35px,10vw,48px);line-height:1.1}
 #about .about-intro{font-size:17px;line-height:1.65;margin-top:24px}
 #about .about-bottom{gap:28px}
 #about .portrait-frame{max-width:380px;justify-self:start}
 #about .about-foot{grid-template-columns:auto 1fr;gap:12px 20px;align-items:center}
 #about .about-foot strong{font-size:48px}
 #about .about-foot span{font-size:12px;max-width:22ch}
 #selected-work .work-introduction{font-size:clamp(40px,11.2vw,58px);line-height:1.08}
 #selected-work .row-detail p{font-size:16px}
 #selected-work .work-rows summary,#selected-work .work-rows details[open]>summary{font-size:clamp(22px,6.2vw,28px);line-height:1.25}
 #work .project-cover{min-height:350px;padding:26px}
 #work .project-cover strong{font-size:clamp(60px,18vw,94px)}
 #work .cover-bor strong{font-size:clamp(36px,10.6vw,54px)}
 .expertise-card{min-height:480px;padding:36px 24px;gap:36px}
 .expertise-index .expertise-number{font-size:38px}
 .expertise-diagram{width:135px}
 .expertise-card h3{font-size:clamp(27px,7.7vw,34px);line-height:1.2}
 .expertise-card p{font-size:17px;line-height:1.65}
 #career-map .atlas-heading h2{font-size:clamp(40px,11vw,52px);line-height:1.06}
 #career-map .atlas-readout h3{font-size:24px}
 #career-map .atlas-focus{font-size:16px}
 #career-map .atlas-surface{height:clamp(280px,78vw,350px);min-height:280px}
 #career-map .atlas-locations{grid-template-columns:repeat(3,1fr)}
 #career-map .atlas-locations button{font-size:11px;min-height:44px}
 #experience summary>span{font-size:clamp(32px,9vw,42px);line-height:1.08}
 #experience summary>small{font-size:11px}
 #experience .experience-footer{font-size:11px}
 #workshop .workshop-heading h2{font-size:clamp(54px,16vw,72px);line-height:1}
 #workshop .workshop-heading>p{font-size:17px;line-height:1.65}
 #workshop .product-choices button{font-size:14px;min-height:90px;line-height:1.45}
 #workshop .product-result h3{font-size:clamp(26px,7vw,34px);overflow-wrap:normal;hyphens:auto}
 #workshop .product-reason{font-size:16px}
 #contact h2{font-size:15.6vw;line-height:1;letter-spacing:-.055em}
 #contact .contact-mail{font-size:clamp(17px,5vw,26px);line-height:1.4}
 #contact .contact-card{width:220px;padding:20px;margin-top:36px}
 #contact .contact-card img{width:156px;height:156px}
 .case-heading h2{font-size:clamp(36px,10vw,54px);line-height:1.08}
 .case-story section p:not(.eyebrow){font-size:17px}
}

/* A personal atlas: illuminated geography, visible places, generous reading sizes. */
#career-map{background:#eeeede}
#career-map .atlas-surface{background:#17363d;border:1px solid #36565c;box-shadow:0 22px 48px -30px #15303880}
#career-map .atlas-heading h2{font-size:clamp(42px,4.25vw,65px);line-height:1.03}
#career-map .atlas-tools{left:18px;right:18px;top:17px;gap:3px}
#career-map .atlas-tools button{font-size:12px;min-height:42px;padding-inline:13px;background:#16343cea;color:#ecede2;border-color:#95b1a938}
#career-map .atlas-tools button[aria-pressed=true]{background:#e5c88e;color:#223a3c;border-color:#e5c88e}
#career-map .atlas-tools #atlas-zoom-in,#career-map .atlas-tools #atlas-zoom-out{font-size:20px;min-width:40px;border-color:#96aea755}
#career-map .atlas-map-meta{position:absolute;top:72px;left:21px;font:11px/1.5 var(--mono);letter-spacing:.11em;color:#cbd8cf;pointer-events:none}
#career-map .atlas-coordinate{display:block;left:20px;right:auto;top:auto;bottom:20px;color:#afc3bb;font-size:11px;letter-spacing:.04em}
#career-map .atlas-credit{font-size:10px;right:20px;bottom:20px;color:#bccdc5}
#career-map .atlas-hint{display:block;left:20px;bottom:44px;font-size:10px;letter-spacing:.06em;color:#e5d1a5}
#career-map .atlas-place{font:500 13px/1.3 var(--mono);letter-spacing:.06em;color:#526359}
#career-map .atlas-readout[data-place] .atlas-place{font:500 clamp(25px,2.3vw,34px)/1.1 var(--sans);letter-spacing:-.04em;text-transform:none;color:#285c63;margin-bottom:16px}
#career-map .atlas-years{font-size:clamp(30px,3vw,44px);line-height:1.1;font-variation-settings:'opsz' 36;margin-bottom:16px;color:#80632e}
#career-map .atlas-readout h3{font-size:clamp(21px,1.9vw,28px);line-height:1.25;max-width:none}
#career-map .atlas-company{font-size:14px;line-height:1.5;color:#475f54}
#career-map .atlas-focus{font-size:17px;line-height:1.65;max-width:34ch;color:#59655c}
#career-map .atlas-city-roles button{font-size:12px;line-height:1.5;min-height:38px;padding:8px 10px}
#career-map .atlas-city-roles[hidden]{display:none}
#career-map .atlas-locations{gap:8px}
#career-map .atlas-locations button{font-size:14px;min-height:44px;padding-inline:16px;background:#f7f5e9;border:1px solid #9cab9960}
#career-map .atlas-locations button[aria-pressed=true]{background:#285c63;color:#fff7e6;border-color:#285c63}
#career-map .atlas-story-nav button{font-size:13px;min-height:44px;color:#285c63;font-weight:500}
#career-map #atlas-next{padding:10px 18px;background:#285c63;color:#faf3df;min-height:44px}
#career-map .atlas-story-nav span{font-size:12px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
#career-map .atlas-footer select{font-size:13px;padding-block:12px}
#career-map .atlas-footer label{font-size:11px}
/* Supporting text deserves the same care outside the map. */
#about .about-note .eyebrow,#experience .founder-aside .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.055em}
#workshop .bench-label{font-size:12px;letter-spacing:.05em}
#workshop .workshop-bottom>p,#workshop .workshop-bottom>a{font-size:12px;line-height:1.5}
#contact .contact-profile>p,#contact .contact-profile>a{font-size:16px;line-height:1.6}
@media(min-width:1001px){
 #career-map .atlas-surface{left:35%;top:82px;bottom:155px}
 #career-map .atlas-heading{max-width:29%;top:94px}
 #career-map .atlas-readout{width:27%;max-width:370px;top:39%;bottom:164px;justify-content:flex-start;overflow:auto;scrollbar-width:thin;padding-right:10px}
 #career-map .atlas-locations{bottom:87px}
 #career-map .atlas-footer{bottom:22px;padding-top:10px}
}
@media(min-width:701px) and (max-width:1000px){
 #career-map .atlas-surface{left:38%;top:82px;bottom:194px}
 #career-map .atlas-heading{max-width:31%;top:94px}
 #career-map .atlas-heading h2{font-size:clamp(33px,4.25vw,42px)}
 #career-map .atlas-readout{width:29%;top:32%;bottom:198px;justify-content:flex-start;overflow:auto;scrollbar-width:thin;padding-right:8px}
 #career-map .atlas-readout h3{font-size:22px}
 #career-map .atlas-focus{font-size:16px}
 #career-map .atlas-tools{left:10px;right:10px;gap:2px}
 #career-map .atlas-tools button{font-size:11px;padding-inline:8px}
 #career-map .atlas-tools #atlas-zoom-in,#career-map .atlas-tools #atlas-zoom-out{min-width:32px}
 #career-map .atlas-locations{bottom:86px;display:grid;grid-template-columns:repeat(4,1fr)}
 #career-map .atlas-locations button{font-size:13px;padding-inline:8px}
 #career-map .atlas-footer{bottom:22px;gap:12px}
 #career-map .atlas-footer label{font-size:0}
 #career-map .atlas-footer select{font-size:12px;width:24vw}
 #career-map .atlas-story-nav{gap:8px}
 #career-map #atlas-next{padding-inline:10px}
}
@media(min-width:701px) and (max-height:750px){
 #career-map .atlas-heading{top:78px}
 #career-map .atlas-heading h2{font-size:clamp(34px,3.5vw,50px)}
 #career-map .atlas-readout{top:calc(105px + 7.2vw)}
 #career-map .atlas-years{font-size:30px;margin-bottom:12px}
 #career-map .atlas-readout[data-place] .atlas-place{font-size:26px;margin-bottom:12px}
 #career-map .atlas-readout h3{font-size:21px}
 #career-map .atlas-focus{font-size:16px;line-height:1.55}
}
@media(max-width:700px){
 #career-map .atlas-heading h2{font-size:clamp(43px,11.5vw,57px)}
 #career-map .atlas-surface{height:clamp(390px,108vw,490px);min-height:390px;margin-top:30px}
 #career-map .atlas-tools{left:10px;right:10px;top:14px;gap:2px}
 #career-map .atlas-tools button{font-size:11px;padding-inline:8px}
 #career-map .atlas-tools #atlas-zoom-in,#career-map .atlas-tools #atlas-zoom-out{min-width:31px;padding-inline:6px}
 #career-map .atlas-map-meta{left:13px;top:72px;font-size:10px}
 #career-map .atlas-coordinate{left:13px;bottom:15px;font-size:10px}
 #career-map .atlas-credit{right:13px;bottom:15px}
 #career-map .atlas-hint{left:13px;bottom:37px;font-size:9px}
 #career-map .atlas-locations{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:16px}
 #career-map .atlas-locations button{font-size:15px;min-height:48px;padding-inline:12px}
 #career-map .atlas-readout{margin-top:34px;padding-left:18px;border-left-color:#ba9856}
 #career-map .atlas-readout[data-place] .atlas-place{font-size:30px}
 #career-map .atlas-years{font-size:36px}
 #career-map .atlas-readout h3{font-size:26px;line-height:1.25}
 #career-map .atlas-focus{font-size:18px;line-height:1.6}
 #career-map .atlas-company{font-size:15px}
 #career-map .atlas-city-roles button{font-size:13px;min-height:44px}
 #career-map .atlas-story-nav{gap:10px;flex-wrap:wrap;justify-content:space-between}
 #career-map .atlas-footer select{font-size:14px}
 #career-map .atlas-footer{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){#career-map .atlas-tools button,#career-map .atlas-locations button{transition:none}}

/* Reading hierarchy: generous editorial titles, substantive body copy, quiet notation. */
:root{--type-body:clamp(18px,1.3vw,20px);--type-lead:clamp(20px,1.6vw,24px);--type-display:clamp(54px,4.8vw,76px)}
.chapter,.career-map>.chapter,.workshop>.chapter{font-size:12px;letter-spacing:.09em}
.route-nav #route-prev,.route-nav #route-next{font-size:13px}
.route-nav #route-position{font-size:11px;letter-spacing:.075em}
.hero-header .name,.intro-brand{font-size:16px}
.hero-header .hero-contact,.hero-roles,.hero-roles a{font-size:15px}
.hero .route-choices button,.hero-bottom>a{font-size:13px}
.hero .hero-routes>p,.hero .hero-legend,.hero .orbit-hint,.intro-skip{font-size:11px}
#about .about-intro{line-height:1.6;max-width:51ch}
#about .about-note p:not(.eyebrow),#experience .founder-aside>p:not(.eyebrow){font-size:18px;line-height:1.6}
#about .about-note .text-link{font-size:17px}
#about .about-foot strong{font-size:62px}
#selected-work .work-introduction{font-size:clamp(52px,5.1vw,80px);line-height:1.05}
#selected-work .work-rows summary{font-size:clamp(27px,2.3vw,35px);line-height:1.2;letter-spacing:-.035em}
#selected-work .row-detail p{font-size:var(--type-body);line-height:1.6;max-width:46ch}
#selected-work .evidence-link{font-size:13px;line-height:1.6}
#selected-work .row-detail>span{font-size:12px}
#selected-work .selected-body>.text-link{font-size:17px}
#work .cover-meta{font-size:13px;line-height:1.5}
#work .cover-bottom{font-size:12px;letter-spacing:.04em}
.expertise-card h3{font-size:clamp(30px,2.55vw,40px);line-height:1.16}
.expertise-card .eyebrow{font-size:12px;line-height:1.65}
#experience details p{font-size:18px;line-height:1.6}
#experience details p:first-child{font-size:20px;line-height:1.4;margin-bottom:12px}
#experience ul{font-size:17px;line-height:1.65}
#experience summary>small{font-size:13px}
#experience .experience-footer{font-size:12px}
#workshop .workshop-heading>p{font-size:18px;line-height:1.6;max-width:36ch}
#workshop .workshop-heading .eyebrow{font-size:12px}
#workshop .product-choices button{font-size:18px;line-height:1.45}
#workshop .product-result h3{font-size:clamp(32px,2.8vw,42px);line-height:1.16}
#workshop .product-reason{font-size:18px;line-height:1.6}
#workshop .product-link{font-size:16px}
#workshop .product-meta,#workshop .product-status{font-size:12px}
#contact .contact-card-heading{font-size:11px}
#contact .contact-card-action{font-size:16px}
#contact .contact-card small,#contact footer{font-size:12px}
.case-close,.dialog-close{font-size:13px}
.case-story section p:not(.eyebrow){font-size:19px;line-height:1.7}
.topic-evidence-list li{font-size:18px;line-height:1.6}
.topic-evidence-list b,.topic-evidence-label,.case-story .eyebrow,.case-flow small{font-size:12px}
@media(min-width:701px) and (max-height:750px){
 #about h2{font-size:clamp(46px,4.5vw,62px)}
 #about .about-intro{font-size:19px;line-height:1.55}
 #about .about-note p:not(.eyebrow){font-size:17px}
 #about .about-foot strong{font-size:50px}
 #selected-work .row-detail p{font-size:17px;line-height:1.6}
 #selected-work .work-rows summary{font-size:27px;padding-block:17px}
 #selected-work .row-detail{padding-bottom:22px}
 #expertise h2{font-size:clamp(44px,4.5vw,62px)}
 #experience details p{font-size:17px}
 #experience ul{font-size:16px}
 #workshop .workshop-heading h2{font-size:clamp(48px,4.3vw,60px);line-height:1.02}
 #workshop .workshop-heading>p{font-size:17px;max-width:40ch}
 #workshop .product-choices button{font-size:17px}
 #workshop .product-result h3{font-size:32px}
 #workshop .product-reason{font-size:17px;line-height:1.55}
 #workshop .product-preview{height:clamp(90px,16vh,120px)}
 #workshop .product-result{gap:8px;padding-top:0;padding-bottom:0}
 #contact footer{margin-top:34px}
}
@media(min-width:701px) and (max-width:1000px){
 #about h2{font-size:clamp(43px,5.6vw,54px)}
 #about .about-intro{font-size:18px}
 #about .about-note p:not(.eyebrow),#experience .founder-aside>p:not(.eyebrow){font-size:17px}
 #selected-work .work-introduction{font-size:clamp(40px,5.2vw,52px)}
 #selected-work .work-rows summary{font-size:24px}
 .expertise-card h3{font-size:28px}
 #workshop .workshop-heading>p{font-size:17px}
 #workshop .product-result h3{font-size:29px;hyphens:auto}
 #workshop .product-choices button{font-size:16px}
}
@media(max-width:700px){
 .hero-header .name,.intro-brand{font-size:14px}
 .hero-header .hero-contact,.hero-roles,.hero-roles a{font-size:13px}
 .hero .route-choices button{font-size:12px}
 .hero .hero-routes>p,.hero .hero-legend,.hero .orbit-hint{font-size:10px}
 .route-nav #route-position{font-size:10px}
 #about h2{font-size:clamp(39px,10.7vw,54px);line-height:1.08}
 #about .about-intro{font-size:19px;line-height:1.6}
 #about .about-foot strong{font-size:54px}
 #selected-work .work-introduction{font-size:clamp(43px,12vw,62px);line-height:1.06}
 #selected-work .work-rows summary,#selected-work .work-rows details[open]>summary{font-size:clamp(24px,6.6vw,30px);line-height:1.22}
 #selected-work .row-detail p{font-size:18px}
 #work .cover-meta{font-size:12px}
 #expertise h2{font-size:clamp(39px,11vw,54px);line-height:1.08}
 .expertise-card h3{font-size:clamp(30px,8.5vw,38px)}
 .expertise-card p{font-size:18px;line-height:1.6}
 #experience summary>span{font-size:clamp(35px,10vw,46px)}
 #experience summary>small{font-size:12px}
 #workshop .product-choices button{font-size:16px;min-height:98px}
 #workshop .product-result h3{font-size:clamp(29px,8vw,38px)}
 #contact .contact-mail{font-size:clamp(18px,5.1vw,27px)}
 .case-story section p:not(.eyebrow),.topic-evidence-list li{font-size:18px}
 #menu .menu-mail{font-size:14px}
}