/* Final editorial layer: personal identity, detailed CV and navigable story. */
:root{--paper:#e3e5df;--faint:#daddd5;--deep-accent:#174435}
body{font-optical-sizing:auto}header{height:90px}.hero{min-height:calc(100svh - 90px)}.eyebrow{font-size:11px}.hero h1{margin-top:55px}.hero-bottom{margin-bottom:50px}.hero .index{display:block;padding-top:0}.identity-name{display:block;font-family:Barlow;font-size:clamp(38px,4.5vw,66px);font-weight:600;line-height:.92;letter-spacing:-.02em}.identity-dot{color:var(--accent)}.identity-role{display:block;font-size:11px;line-height:1.6;margin-top:18px;color:var(--muted)}.intro p{font-size:clamp(18px,1.5vw,23px);line-height:1.45}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10;pointer-events:none}.reading-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.profile-intro{padding:100px var(--gutter) 120px;display:grid;grid-template-columns:1fr 2fr;gap:35px;border-top:1px solid var(--line)}.profile-label{font-size:10px;letter-spacing:.09em;display:flex;flex-direction:column;justify-content:space-between;gap:25px;color:var(--muted)}.profile-statement h2{font-size:clamp(32px,4vw,60px);line-height:1.12;letter-spacing:-.05em;max-width:860px;text-wrap:balance}.profile-statement>p{font-size:16px;line-height:1.7;max-width:520px;margin:35px 0 55px}.profile-proof{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:30px;border-top:1px solid var(--line);padding-top:30px}.profile-proof strong{display:block;font:600 clamp(52px,5.5vw,88px)/1 Barlow;letter-spacing:-.025em;color:var(--accent)}.profile-proof span{display:block;font-size:13px;margin-top:12px}.profile-proof small{display:block;font-size:10px;color:var(--muted);margin-top:7px;line-height:1.5}
.assembly-field{isolation:isolate}.assembly-whole{z-index:2}.assembly-guide{border-radius:0;border-width:1px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%)}.assembly-headings span{font-weight:600}.assembly-steps{display:none;justify-content:space-between;gap:15px;margin-top:26px}.motion-on .assembly-steps{display:flex}.assembly-steps button{background:none;border:0;color:var(--muted);font-size:11px;padding:8px 0;min-height:36px;display:flex;align-items:center;gap:12px}.assembly-steps button[aria-current=step]{color:var(--accent)}.assembly-steps button span{font-size:12px}.assembly-track{margin-top:8px}.assembly-count{white-space:nowrap}.assembly-bottom p{max-width:390px}.assembly-stage{padding-bottom:14px}.assembly-headings{top:9%}.motion-on .assembly-field{margin-bottom:20px}
.section-top h2{max-width:850px}.perspective-evidence a{position:relative;overflow:clip;padding-inline:15px;margin-inline:-15px}.perspective-evidence a::before{content:'';position:absolute;inset:0;background:var(--paper);z-index:-1;transform:translateY(100%);transition:transform .6s var(--motion-ease)}.perspective-evidence a:hover::before,.perspective-evidence a:focus-visible::before{transform:translateY(0)}.perspective-evidence a:focus-visible{outline-offset:0}.perspective-evidence h3{font-size:clamp(36px,4.6vw,70px)}.perspective-evidence a.is-muted{opacity:.55}.lens-caption p{font-size:15px}.cv-tools{display:flex;justify-content:flex-end;gap:25px;margin:40px 0 22px}.cv-tools button{border:0;background:none;border-bottom:1px solid var(--line);padding:8px 0;font-size:12px;min-height:40px}.cv-tools button:hover{color:var(--accent)}.roles{margin-top:0}.role{scroll-margin-top:40px}.role summary{min-height:124px;transition:background .35s var(--motion-ease),padding .35s var(--motion-ease)}.role[open] summary{color:var(--accent)}.role summary strong{font-size:clamp(27px,2.8vw,43px)}.role summary small{font-size:14px;color:var(--ink)}.role summary .date{font-size:12px}.role-body{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:12px 50px 60px 0;animation:role-enter .55s var(--motion-ease)}.role-body aside{color:var(--muted);max-width:220px}.role-index{font:600 90px/1 Barlow;color:var(--line)}.role-body aside>p{font-size:11px;line-height:1.7;margin:20px 0}.role-tags{display:flex;flex-wrap:wrap;gap:7px}.role-tags span{border:1px solid var(--line);border-radius:30px;padding:6px 10px;font-size:9px;line-height:1.3}.role-copy{max-width:740px}.role-copy>p{font-size:15px;line-height:1.75;margin:0 0 24px}.role-copy .role-lead{font-size:clamp(20px,2vw,28px);line-height:1.45;letter-spacing:-.03em}.role-copy h4{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin:36px 0 18px;color:var(--muted)}.role-copy ul{padding:0;margin:0 0 30px;list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:30px;row-gap:15px}.role-copy li{font-size:13px;line-height:1.6;padding-left:17px;position:relative}.role-copy li:before{content:'↳';position:absolute;left:0;color:var(--accent)}.role-copy .role-closing{border-left:2px solid var(--accent);padding-left:20px;color:var(--muted);font-size:14px;margin:35px 0 0}.role.reveal-ready:focus-within{opacity:1;transform:none}@keyframes role-enter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.education{padding-top:50px;border-top:0;margin-top:0}.court{height:230px;border-radius:55px;max-width:none;background:var(--paper);transform:rotate(-5deg);transition:transform .8s var(--motion-ease)}.sport-copy:hover .court{transform:rotate(0)}.court-route{position:absolute;left:15%;top:35%;height:40%;width:65%;border-left:1px dashed var(--accent);border-bottom:1px dashed var(--accent);transform:rotate(-16deg);opacity:.5}.court-dot{box-shadow:0 0 0 10px var(--bg)}.sport-copy>p{max-width:410px}.person h2{font-size:clamp(75px,12vw,180px)}.footer-person{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;border-bottom:1px solid var(--line);padding-bottom:25px;margin-bottom:60px}.footer-link{max-width:none;font-size:clamp(25px,3vw,46px);padding:20px 0}.footer-meta{margin-top:75px}.footer-link:hover span{transform:translate(12px,-12px)}
@media(max-width:800px){.profile-intro{grid-template-columns:1fr 2.5fr;padding-block:75px;gap:25px}.profile-proof{gap:15px}.role-body{grid-template-columns:1fr 2.5fr;padding-right:0;gap:25px}.role-copy ul{grid-template-columns:1fr}.perspective-evidence h3{font-size:39px}.role-index{font-size:65px}.assembly-stage{padding-top:25px}.assembly-field{margin-top:15px}.court{height:190px}}
@media(max-width:520px){header{height:76px}.hero{min-height:auto}.hero h1{margin-top:48px}.hero .index{display:flex;align-items:center;gap:25px}.identity-name{font-size:38px}.identity-role{font-size:9px;margin-top:0}.hero-bottom{gap:30px;margin-bottom:45px}.intro{margin-left:0;max-width:320px}.intro p{font-size:18px}.profile-intro{grid-template-columns:1fr;padding-block:60px;gap:30px}.profile-label{flex-direction:row;font-size:8px}.profile-statement h2{font-size:33px}.profile-statement>p{font-size:14px;margin:25px 0 35px}.profile-proof{grid-template-columns:1fr 1fr 1.2fr;gap:10px;padding-top:25px}.profile-proof strong{font-size:52px}.profile-proof span{font-size:10px;line-height:1.5}.profile-proof small{font-size:9px}.assembly-steps button{gap:5px;font-size:9px}.assembly-steps button span{font-size:10px}.assembly-bottom{gap:16px}.motion-on .assembly-field{margin-block:15px}.assembly-headings{top:0}.assembly-headings span{font-size:9px}.assembly-meta>span{max-width:120px;line-height:1.4}.cv-tools{justify-content:space-between;gap:15px}.cv-tools button{font-size:11px}.role summary{min-height:120px}.role summary small{font-size:12px}.role summary .date{font-size:11px}.role-body{grid-template-columns:1fr;gap:20px;padding-bottom:36px}.role-body aside{max-width:none;display:flex;align-items:center;gap:15px;flex-wrap:wrap}.role-index{display:none}.role-body aside>p{margin:0;font-size:10px}.role-tags{gap:5px}.role-tags span{font-size:8px;padding:4px 7px}.role-copy .role-lead{font-size:22px}.role-copy>p{font-size:14px}.role-copy ul{row-gap:13px}.role-copy li{font-size:13px}.role-copy h4{margin-top:25px}.role-copy .role-closing{font-size:13px}.perspective-evidence a{margin-inline:0;padding-inline:0}.perspective-evidence h3{font-size:44px}.court{height:190px;width:calc(100% - 12px);margin:10px 6px 35px}.footer-person{display:block;font-size:9px;margin-bottom:40px}.footer-person>span:last-child{display:block;margin-top:12px;line-height:1.6}.person h2{font-size:100px}.assembly-whole small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.role-body{animation:none}.court,.sport-copy:hover .court{transform:none}.perspective-evidence a::before{transition:none}}
.motion-reduced .court{transform:none}.motion-reduced .role-body{animation:none}
@media print{body{background:white;color:black;font-size:11pt}header,.hero,.profile-intro,.assembly,.perspectives,.person,.reading-progress,.cv-tools,.skip,footer .section-label,footer h2,.footer-meta,.role-tags,.role-index{display:none!important}.section{padding:0;border:0}.experience .section-top{display:block;margin:20px 0}.experience .section-top h2{font-size:26pt}.experience .section-top p{max-width:none;font-size:11pt}.role,.role-body,.role-copy{break-inside:auto}.role summary{min-height:0;padding:18px 0;break-after:avoid}.role-body{display:block!important;padding:0 0 20px}.role-body aside>p{margin:0 0 12px}.role-copy .role-lead{font-size:12pt}.role-copy>p,.role-copy li{font-size:10pt}.role-copy ul{display:block}.role-copy li{margin-bottom:5px}.role-copy h4{margin:15px 0}.role-copy .role-closing{margin-top:15px;font-size:10pt}.role .plus{display:none}.reveal-ready{opacity:1!important;transform:none!important}.education{margin-top:20px}footer{padding:15px 0}.footer-person{margin-bottom:15px}.footer-link{font-size:12pt}.footer-link:after{content:'linkedin.com/in/oskar-hagberg';font-size:10pt}footer .footer-link>span{display:none}}
.assembly:not(.motion-on) .assembly-whole{opacity:1!important;transform:none!important}.print-heading{display:none}@media print{.print-heading{display:block;margin-bottom:24px}.print-heading strong{display:block;font:600 30pt/1.1 Barlow;margin:0 0 10px}.print-heading p{font-size:10pt}}

/* Four perspectives: commerce, channels, people and competitive drive. */
@media(min-width:801px){.perspective-evidence{grid-template-columns:repeat(4,minmax(0,1fr))}.perspective-evidence h3{font-size:clamp(34px,3.5vw,60px)}}
@media(min-width:521px) and (max-width:800px){.perspective-evidence{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Conversation marks follow the heading in both languages. */
footer h2{display:flex;align-items:center;flex-wrap:wrap;column-gap:.18em;row-gap:.1em}
.contact-icons{display:inline-flex;align-items:center;gap:.12em;color:var(--accent);flex-shrink:0}
.contact-icons svg{display:block;width:clamp(40px,6vw,88px);height:auto;overflow:visible}
.contact-phone{transform-origin:50% 55%;animation:phone-ring 4.8s var(--motion-ease) infinite;animation-play-state:paused}
.typing-dot{transform-box:fill-box;transform-origin:center;animation:message-typing 1.8s var(--motion-ease) infinite;animation-play-state:paused}
.typing-dot:nth-of-type(2){animation-delay:.18s}.typing-dot:nth-of-type(3){animation-delay:.36s}
.contact-in-view .contact-phone,.contact-in-view .typing-dot{animation-play-state:running}
@keyframes phone-ring{0%,6%,12%,18%,24%,100%{transform:rotate(0)}3%,15%{transform:rotate(-9deg)}9%,21%{transform:rotate(9deg)}}
@keyframes message-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@media(prefers-reduced-motion:reduce){.contact-phone,.typing-dot{animation:none!important;opacity:1}}
.motion-reduced .contact-phone,.motion-reduced .typing-dot{animation:none!important;opacity:1}

.contact-action{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:8px;transition:background .25s var(--motion-ease)}.contact-action:hover{background:var(--line)}.contact-action:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* A personal pause between the sporting profile and the conversation. */
.portrait-section{margin:0;padding:0 var(--gutter) clamp(64px,9vw,140px);display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;gap:18px}
.portrait-section img{grid-column:2;width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain}
.portrait-section figcaption{grid-column:2;font-size:10px;letter-spacing:.12em;color:var(--muted)}
@media(max-width:800px){.portrait-section{grid-template-columns:1fr minmax(0,460px) 1fr;column-gap:0}}
@media(max-width:520px){.portrait-section{grid-template-columns:1fr}.portrait-section img,.portrait-section figcaption{grid-column:1}}
@media print{.portrait-section{display:none!important}}

.portrait-interactive{grid-column:2;position:relative;width:100%;display:block;padding:0;border:0;background:none;cursor:grab;touch-action:none;border-radius:2px}
.portrait-interactive.is-grabbing{cursor:grabbing}
.portrait-interactive img{width:100%;height:auto;display:block}
.portrait-interactive canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.portrait-interactive.is-ready canvas{opacity:1}
.portrait-interactive{outline:3px solid var(--accent);outline-offset:8px}
.portrait-interactive:focus-visible{outline-width:5px;outline-offset:10px}
.portrait-section figcaption{display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.portrait-hint{letter-spacing:0;font-size:12px;color:var(--accent)}
@media(max-width:520px){.portrait-interactive{grid-column:1}}
@media(prefers-reduced-motion:reduce){.portrait-interactive{cursor:default}.portrait-hint{display:none}}
.motion-reduced .portrait-interactive{cursor:default}.motion-reduced .portrait-hint{display:none}

.portrait-interactive,.portrait-interactive img,.portrait-interactive canvas{user-select:none;-webkit-user-select:none;-webkit-user-drag:none}.portrait-interactive img{pointer-events:none}

/* Tighter handoff after removing the assembly caption and link. */
#cv{padding-top:clamp(36px,4vw,58px)}



/* Employer identities alongside the role headings. */
.employer-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.employer-logo{display:block;width:100px;height:48px;object-fit:contain;flex:0 0 auto}
.employer-logo--kesko{filter:brightness(0);width:86px}
.employer-logo--elcykelpunkten{width:108px;height:64px}
@media(max-width:520px){.employer-heading{gap:8px 12px}.employer-logo{width:76px;height:32px}.employer-logo--kesko{width:64px}.employer-logo--elcykelpunkten{width:88px;height:48px}}
@media print{.employer-logo{display:none}}

/* Consistent green tiles keep employer logos readable. */
.employer-logo-box{display:inline-flex;align-items:center;justify-content:center;width:100px;height:52px;padding:9px;border-radius:5px;overflow:hidden;background:var(--accent);flex:0 0 auto}
.employer-logo-box .employer-logo{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:520px){.employer-logo-box{width:88px;height:48px;padding:8px}}
@media print{.employer-logo-box{display:none}}

/* Optical alignment compensates for the whitespace in the source artwork. */
.employer-logo-box .employer-logo--elcykelpunkten{width:142%;height:170%;max-width:none;flex-shrink:0}
.employer-logo-box .employer-logo--innebandy24{filter:grayscale(1);mix-blend-mode:screen}

/* Center the visible IB24 letters, excluding the dark tagline below them. */
.employer-logo-box .employer-logo--innebandy24{transform:translateY(3px)}
/* Modest breathing room after the education entries. */
#cv{padding-bottom:50px}
#cv .education p{margin-bottom:0}
#person{padding-top:36px}

.clubs{align-items:center;gap:16px}.sport-club{display:flex;flex-direction:column;align-items:center;gap:12px}.club-logo{display:block;width:100%;height:100%;object-fit:contain}

/* Club marks directly on the page, without employer tiles. */
.club-logo-holder{display:flex;align-items:center;justify-content:center;width:100px;height:64px}
.club-logo--aik{mix-blend-mode:multiply}
.club-logo--linkoping{filter:brightness(0)}
@media(max-width:520px){.club-logo-holder{width:88px;height:56px}}

.employer-logo-box .employer-logo--bain{filter:grayscale(1) invert(1) contrast(3);mix-blend-mode:screen;width:100%;height:auto;max-height:none;flex-shrink:0}

.bain-position h3{font-size:20px;font-weight:500;margin:0 0 8px}.bain-position .position-dates{font-size:12px;color:var(--muted);margin:0}.bain-position+.bain-position{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}

.hero-links{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px}.hero-links .text-link{display:inline-block}

.hero-links .cv-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:13px 22px;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:4px;font-size:13px;font-weight:600;text-decoration:none;transition:background .2s ease,border-color .2s ease}
.hero-links .cv-button:hover{background:var(--deep-accent);border-color:var(--deep-accent)}
.hero-links .cv-button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.hero-links .cv-button{transition:none}}
.motion-reduced .hero-links .cv-button{transition:none}

/* Subtle feedback on the primary CV link. */
.hero-links .cv-button{transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){.hero-links .cv-button:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgb(31 90 70 / .15)}}
.hero-links .cv-button:active{transform:translateY(0);box-shadow:none}
@media(prefers-reduced-motion:reduce){.hero-links .cv-button{transition:none;transform:none!important}}
.motion-reduced .hero-links .cv-button{transition:none;transform:none!important}

/* Keep the direct CV route available in the compact navigation. */
@media(max-width:520px){header .nav-cv{display:inline-flex;align-items:center;min-height:44px}.brand{flex-shrink:0}header .languages{margin-left:0}}
/* Subtle background feedback on profile figures. */
.profile-proof .proof-item{position:relative;isolation:isolate;min-width:0}
.profile-proof .proof-item::before{content:"";position:absolute;inset:-12px -8px;border-radius:5px;background:var(--accent);opacity:0;z-index:-1;pointer-events:none;transition:opacity .2s ease}
@media(hover:hover){.profile-proof .proof-item:hover::before{opacity:.16}}
@media(prefers-reduced-motion:reduce){.profile-proof .proof-item::before{transition:none}}
.motion-reduced .profile-proof .proof-item::before{transition:none}

/* Match the profile figures' hover treatment on each education entry. */
.education>div{position:relative;isolation:isolate;min-width:0}
.education>div::before{content:"";position:absolute;inset:-12px -8px;border-radius:5px;background:var(--accent);opacity:0;z-index:-1;pointer-events:none;transition:opacity .2s ease}
@media(hover:hover){.education>div:hover::before{opacity:.16}}
@media(prefers-reduced-motion:reduce){.education>div::before{transition:none}}
.motion-reduced .education>div::before{transition:none}

/* A compact contact heading and a deliberate action row on phones. */
@media(max-width:520px){
 #contact{padding-top:48px}
 #contact h2{display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-size:clamp(52px,17vw,82px);line-height:1;margin:28px 0 32px;letter-spacing:-.025em}
 #contact h2>span:first-child{white-space:nowrap}
 #contact .contact-icons{gap:16px}
 #contact .contact-action{width:48px;height:48px}
 #contact .contact-icons svg{width:40px}
 #contact .footer-meta{margin-top:40px}
}

/* Final QA: respect motion preferences and keep the printed CV compact. */
html.motion-reduced{scroll-behavior:auto}
.motion-reduced .portrait-interactive{touch-action:pan-y}
@media(prefers-reduced-motion:reduce){.portrait-interactive{touch-action:pan-y}}
@media print{#cv{padding:0}#cv .education{padding-top:20px;margin-top:20px}.education>div::before{display:none}.bain-position{break-inside:avoid}}

/* Print only the CV; contact details belong in its heading. */
@media print{
 @page{size:A4;margin:14mm}
 #contact{display:none!important}
 #cv .section-label{display:none}
 .print-heading strong{font-family:Barlow,sans-serif}
 .role-body aside{break-after:avoid}
 .role-copy p,.role-copy li{orphans:3;widows:3}
 .role-copy h4{break-after:avoid}
 .education{break-inside:avoid}
}

@media print{
 .role{break-inside:avoid}
 .role summary{padding:12px 0;grid-template-columns:145px 1fr}
 .role summary strong{font-size:20pt}
 .role summary small{font-size:10pt}
 .role-body{padding-bottom:12px;animation:none}
 .role-body aside{max-width:none}
 .role-body aside>p{margin-bottom:6px}
 .role-copy>p{line-height:1.45;margin-bottom:10px}
 .role-copy .role-lead{font-size:11pt}
 .role-copy ul{margin-bottom:10px}
 .role-copy li{line-height:1.4;margin-bottom:3px}
 .role-copy h4{margin:10px 0 6px}
 .role-copy .role-closing{margin-top:10px}
 .education{font-size:10pt}
 .education strong{font-size:11pt}
 .education p{font-size:10pt}
}

/* The web narrative heading is omitted from the printed CV in both languages. */
@media print{#cv .section-top h2{display:none}}