:root{
  --blue:#004B87;
  --light-blue:#00A3E0;
  --yellow:#FFCC00;
  --ink:#13202A;
  --muted:#667085;
  --bg:#F4F7FB;
  --card:#FFFFFF;
  --line:#E5EAF0;
  --shadow:0 24px 70px rgba(19,32,42,.14);
  --radius:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 15%, rgba(0,163,224,.14), transparent 30%),
    radial-gradient(circle at 85% 0%, rgba(255,204,0,.18), transparent 28%),
    linear-gradient(180deg,#fff,var(--bg));
  min-height:100vh;
}

body.loading{overflow:hidden}

/* ===================== INTRO — karriärresan ===================== */
.intro{
  position:fixed;inset:0;z-index:1000;overflow:hidden;perspective:1600px;color:#fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(0,163,224,.16), transparent 32%),
    radial-gradient(circle at 85% 85%, rgba(255,204,0,.10), transparent 30%),
    linear-gradient(160deg,#03060c 0%,#071b33 55%,#020409 100%);
  transition:opacity 1s ease, visibility 1s ease, transform 1s ease;
}
.intro.hide{opacity:0;visibility:hidden;transform:scale(1.04)}

.starfield{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,204,0,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(0,183,255,.8) 0 1px, transparent 1.7px);
  background-size:150px 150px, 210px 210px, 270px 270px;
  background-position:0 0, 60px 80px, 120px 30px;
  opacity:.32;
  animation:starTwinkle 3.6s ease-in-out infinite alternate;
}
@keyframes starTwinkle{0%{opacity:.28}100%{opacity:.68}}

.intro.finale-active .starfield{animation-play-state:paused;opacity:0 !important}

.grid-floor{
  position:absolute;left:50%;bottom:-12%;width:170%;height:60%;
  transform:translateX(-50%) rotateX(58deg);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,210,255,.30) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(90deg, rgba(0,210,255,.30) 0 2px, transparent 2px 64px);
  background-position:0 0;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);
          mask-image:radial-gradient(ellipse at center, #000 45%, transparent 78%);
  animation:gridNeonPulse 3s ease-in-out infinite alternate;
}
@keyframes gridNeonPulse{
  0%{opacity:.55;filter:drop-shadow(0 0 8px rgba(0,183,255,.4)) drop-shadow(0 0 20px rgba(0,183,255,.22))}
  100%{opacity:.95;filter:drop-shadow(0 0 16px rgba(255,204,0,.55)) drop-shadow(0 0 40px rgba(0,183,255,.5))}
}

.intro-vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center, transparent 0 40%, rgba(0,0,0,.46) 78%, rgba(0,0,0,.82) 100%)}

.intro-topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 28px}
.intro-progress-track{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.12);z-index:21}
.intro-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--light-blue),var(--yellow))}
.intro-label{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.75);opacity:0;transition:opacity .8s ease}
.intro.ready .intro-label{opacity:1}
.skip-btn{font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:9px 16px;cursor:pointer;display:flex;align-items:center;gap:8px}
.skip-btn:hover{background:rgba(255,255,255,.18)}

.route-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:4;transform-style:preserve-3d;opacity:1;transition:opacity 1s ease}
.intro.finale-active .route-wrap{opacity:0}
.intro.finale-active .grid-floor{animation-play-state:paused;opacity:0!important;transition:opacity .8s ease}
.route-tilt{position:relative;width:min(1240px,95vw);aspect-ratio:2/1;transform-style:preserve-3d}
.route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-svg-mobile{display:none}
.route-path{fill:none;stroke:url(#routeGrad);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(0,183,255,.5))}
.marker{position:absolute;width:12px;height:12px;margin:-6px;border-radius:50%;background:#fff;box-shadow:0 0 14px #fff,0 0 34px rgba(0,183,255,.9);opacity:0;transition:opacity .3s ease}
.marker.show{opacity:1}

.pin{position:absolute;left:var(--dx);top:var(--dy);transform:translate(-50%,-50%);text-align:center;z-index:6}
.pin-dot{width:12px;height:12px;margin:0 auto;border-radius:50%;background:#8ee8ff;box-shadow:0 0 14px #8ee8ff,0 0 32px rgba(0,183,255,.85);opacity:0;transform:scale(.3);transition:opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1)}
.pin-dot.gold{background:#ffe28a;box-shadow:0 0 16px #ffe28a,0 0 38px rgba(255,204,0,.9)}
.pin.show .pin-dot{opacity:1;transform:scale(1)}
.pin-card{position:absolute;left:50%;transform:translate(-50%,8px);width:250px;padding:14px 17px;border-radius:16px;background:rgba(4,16,30,.8);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(3px);opacity:0;transition:opacity .5s ease .1s, transform .5s cubic-bezier(.16,1,.3,1) .1s;pointer-events:none}
.pin-card b{display:block;font-size:15px;letter-spacing:.02em;color:#ffe28a}
.pin-card span{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:#dff3ff}
.pin.above .pin-card{bottom:18px;transform:translate(-50%,8px)}
.pin.below .pin-card{top:18px;transform:translate(-50%,-8px)}
.pin.show .pin-card{opacity:1;transform:translate(-50%,0)}
.pin-short{display:none;font-size:11px;font-weight:800;letter-spacing:.03em;color:#ffe28a;white-space:nowrap}
.pin.show:not(.active) .pin-card{width:auto;padding:7px 12px;border-radius:10px}
.pin.show:not(.active) .pin-card b,.pin.show:not(.active) .pin-card span{display:none}
.pin.show:not(.active) .pin-card .pin-short{display:block}
.pin.active .pin-dot{transform:scale(1.25)}
.pin-card.gold b{color:#fff4bf}
.pin-card.gold{border-color:rgba(255,204,0,.35)}
/* on the wide desktop route the first/last waypoint sit close to its edge —
   anchor their cards inward instead of centering, so nothing overflows
   off-screen even on a narrower desktop window. Not needed below 821px:
   the mobile route below is a different, vertical layout where no
   waypoint sits near the screen edge. */
@media(min-width:821px){
  .pin.edge-left .pin-card{left:0;transform:translate(0,8px)}
  .pin.edge-left.below .pin-card{transform:translate(0,-8px)}
  .pin.edge-left.show:not(.active) .pin-card{transform:translate(0,8px)}
  .pin.edge-right .pin-card{left:auto;right:0;transform:translate(0,8px)}
  .pin.edge-right.below .pin-card{transform:translate(0,-8px)}
  .pin.edge-right.show:not(.active) .pin-card{transform:translate(0,8px)}
}

.finale{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:8;opacity:0;pointer-events:none;transform:translateZ(0) scale(.92);transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1)}
.finale.show{opacity:1;transform:translateZ(0) scale(1)}
.photo-portal{width:190px;height:190px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,204,0,.85);box-shadow:0 0 60px rgba(0,183,255,.55),0 0 110px rgba(255,204,0,.3);opacity:0;transform:scale(.4) rotate(-16deg);filter:blur(4px);transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease}
.photo-portal img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.finale.show .photo-portal{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
.word{position:relative;font-family:Georgia,'Times New Roman',serif;font-weight:800;text-transform:uppercase;color:#ffe7b3;line-height:.95;white-space:nowrap;margin-top:20px;text-shadow:0 0 14px rgba(255,204,0,.42),0 0 32px rgba(0,183,255,.26),0 16px 60px rgba(0,0,0,.7);opacity:0;transition:opacity .3s ease}
.word.show{opacity:1}
.word::before,.word::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.3}
.word::before{color:#28c7ff;transform:translate3d(-1.5px,-1px,0)}
.word::after{color:#ffcc00;transform:translate3d(1.5px,1px,0)}
.word-name{font-size:clamp(28px,4.6vw,60px)}
.finale-kicker{margin-top:16px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#bfeaff;opacity:0;transition:opacity .5s ease}
.finale-kicker.show{opacity:1}
.word-role{font-size:clamp(20px,3.2vw,38px);margin-top:4px}
.lt{display:inline-block;opacity:0;transform:translateY(20px) rotateX(70deg)}
.word.show .lt{animation:letterIn .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes letterIn{to{opacity:1;transform:translateY(0) rotateX(0)}}
.role-sub{margin-top:14px;font-size:13px;letter-spacing:.06em;color:#d8f4ff;max-width:420px;opacity:0;transition:opacity .6s ease .2s}
.role-sub.show{opacity:1}

@media(max-width:820px){
  /* the wide 2:1 desktop route becomes a tall, tighter zig-zag so it
     actually fills a phone screen instead of shrinking into a thin strip */
  .route-tilt{width:min(400px,92vw);aspect-ratio:1/2}
  .route-svg-desktop{display:none}
  .route-svg-mobile{display:block}
  .pin{left:var(--mx);top:var(--my)}

  .intro .pin-card{width:150px;font-size:10px}
  .intro .word-name{font-size:26px}
  .intro .word-role{font-size:18px}
  .intro .photo-portal{width:140px;height:140px}

  /* the mobile path zig-zags between a left and a right column with
     waypoints fairly close together vertically — a card anchored above
     or below (like on desktop) would be tall enough to cover the next
     waypoint. Anchoring it sideways, into the gap between the two
     columns, keeps it clear of its neighbours instead. */
  .pin.m-left .pin-card,.pin.m-right .pin-card{top:50%;bottom:auto;transform:translate(0,-50%)}
  .pin.m-left .pin-card{left:18px}
  .pin.m-right .pin-card{left:auto;right:18px}
  .pin.show.m-left .pin-card,.pin.show.m-right .pin-card{opacity:1;transform:translate(0,-50%)}

  /* the waypoint nearest the top of the mobile path has no room above it
     for a vertically-centered card — anchor it below the dot instead */
  .pin.m-top .pin-card,.pin.show.m-top .pin-card{top:20px;bottom:auto;transform:translate(0,0)}
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 6vw;
  backdrop-filter:blur(4px);
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(229,234,240,.8);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:var(--blue);
  text-decoration:none;
  font-size:15px;
}

.brand-mark{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--blue),var(--light-blue));
  color:#fff;
  box-shadow:0 12px 30px rgba(0,75,135,.24);
}

.nav{display:flex;gap:18px}
.nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:var(--yellow);
  transition:.25s;
}
.nav a:hover::after{width:100%}
.nav-toggle{display:none}

.hero{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:70px 6vw 60px;
  perspective:1100px;
}

.hero-copy{animation:fadeUp .9s ease both}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:700;
  color:var(--blue);
}
.eyebrow::before{
  content:"";
  width:9px;height:9px;border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 5px rgba(255,204,0,.2);
}
h1{
  margin:22px 0 14px;
  font-size:clamp(42px,7vw,82px);
  line-height:.96;
  letter-spacing:-.06em;
}
h1 span{color:var(--blue)}
.lead{font-size:18px;color:#344054;max-width:720px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:16px;
  text-decoration:none;
  font-weight:800;
  border:1px solid transparent;
  transition:.25s ease;
}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 18px 36px rgba(0,75,135,.22)}
.btn.secondary{background:#fff;color:var(--blue);border-color:var(--line)}
.btn:hover{transform:translateY(-3px)}
.hero-card{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateY(-11deg) rotateX(6deg);
  transition:transform .3s ease;
}
.hero-card:hover{transform:rotateY(-4deg) rotateX(2deg) translateY(-6px)}
.photo-frame{
  padding:14px;
  border-radius:32px;
  background:linear-gradient(145deg,#fff,#EFF5FA);
  box-shadow:var(--shadow);
}
.photo-frame img{
  display:block;
  width:100%;
  border-radius:24px;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 22%;
}
.floating-badge{
  position:absolute;
  right:-12px;
  bottom:42px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(19,32,42,.17);
  backdrop-filter:blur(3px);
  font-weight:800;
  color:var(--blue);
}

.section{
  padding:72px 6vw;
}
.section-title{
  font-size:32px;
  margin:0 0 26px;
  color:var(--blue);
  letter-spacing:-.03em;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 16px 42px rgba(19,32,42,.08);
  transition:.25s;
}
.card:hover{transform:translateY(-5px)}
.card h3{margin:0 0 10px;color:var(--blue);font-size:20px}
.card p{margin:0;color:#475467}
.card ul{margin:10px 0 0;padding-left:18px;color:#475467}
.card li{margin:5px 0}

.timeline{
  display:grid;
  gap:16px;
}
.timeline-item{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:18px;
  align-items:start;
}
.year{
  color:var(--blue);
  font-weight:900;
  font-size:14px;
}
.document-hero{
  padding:56px 6vw 30px;
  perspective:1000px;
}
.page-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
  opacity:0;
  animation:kickerFade .6s ease forwards .1s;
}
.page-kicker::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,204,0,.2);
}
@keyframes kickerFade{to{opacity:1}}
.split-3d-title{perspective:700px;display:block}
.pt-letter{
  display:inline-block;
  opacity:0;
  transform:translateY(26px) rotateX(75deg) translateZ(-40px);
  animation:ptLetterIn .6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes ptLetterIn{to{opacity:1;transform:translateY(0) rotateX(0) translateZ(0)}}
.pdf-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
}
.pdf-box.reveal{
  transform:translateY(30px) rotateX(9deg) scale(.98);
  transform-origin:top center;
}
.pdf-box.reveal.show{
  transform:translateY(0) rotateX(0) scale(1);
}
.diploma-card.reveal{
  transform:translateY(24px) rotateX(10deg) scale(.97);
  transform-origin:top center;
}
.diploma-card.reveal.show{
  transform:translateY(0) rotateX(0) scale(1);
}
.pdf-toolbar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}
.pdf-view{
  width:100%;
  height:78vh;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.diploma-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  perspective:1000px;
}
.diploma-card .meta{font-weight:800;color:var(--blue);margin-bottom:8px}
.diploma-card .mini-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.footer{
  padding:28px 6vw;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.reveal{opacity:0;transform:translateY(24px);transition:.7s ease}
.reveal.show{opacity:1;transform:none}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid,.diploma-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:1fr}
  .nav{
    position:absolute;
    right:6vw;
    top:62px;
    display:none;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav-toggle{
    display:block;
    border:0;
    background:var(--blue);
    color:#fff;
    border-radius:12px;
    padding:9px 12px;
    font-size:18px;
  }
}

.studio-link{
  color:var(--blue);
  font-weight:800;
  text-decoration:none;
}
.studio-link:hover{text-decoration:underline}