/* ============================================================
   FÖRSLAG 22 — vidareutveckling av 17, nu byggd för foton.
   Portrattet bar heron, arbetsbilder i asymmetrisk komposition,
   diplomen i en bladdrbar rad. Saknas en bildfil visas en
   medveten platshallare istallet — ingenting gar sonder.
   Lagg filerna i mappen img/ enligt LAGG-BILDERNA-HAR.txt
   ============================================================ */
:root{
  --blue:#4C93C8; --blue-mid:#2C6CA6; --blue-deep:#1E4F7A; --blue-ink:#143A5C;
  --blue-pale:#EAF3FA; --blue-line:#CFE2F0;
  --rust:#C4401F; --rust-soft:#FBEDE8;
  --page:#F6FAFD; --white:#FFFFFF;
  --ink:#1B232B; --grey:#56616D; --line:#DFE8EF;
  --on-blue:#FFFFFF; --dim-blue:#C3DAEC;

  --font-display:'Poppins',system-ui,sans-serif;
  --font-text:'Roboto',system-ui,-apple-system,sans-serif;
  --s1:10px; --s2:20px; --s3:32px; --s4:52px; --s5:80px; --s6:116px;
  --header-h:76px; --ease:cubic-bezier(.22,.9,.28,1);
}
html[lang="ar"]{ --font-display:'Cairo',sans-serif; --font-text:'Cairo',sans-serif; }
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 16px); scroll-behavior:smooth}
body{margin:0; background:var(--page); color:var(--ink); font-family:var(--font-text);
  font-size:17px; line-height:1.65; font-weight:300; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:600; line-height:1.18; text-wrap:balance}
p{margin:0} ul{margin:0; padding:0; list-style:none} figure{margin:0}
img{display:block; max-inline-size:100%}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--rust); outline-offset:3px; border-radius:6px}
.on-blue :where(a,button,[tabindex]):focus-visible{outline-color:#FFD9A8}
.skip{position:fixed; inset-inline-start:-9999px; top:0; z-index:600; background:var(--blue-deep);
  color:#fff; padding:14px 22px; text-decoration:none; font-weight:500}
.skip:focus{inset-inline-start:0}
.wrap{inline-size:min(100% - 2*var(--s2), 1220px); margin-inline:auto}

/* ============================================================
   DJUP OCH RÖRELSE
   Värdena kommer från ui-ux-pro-max och 21st:
   · parallax  yPercent 5–15, scrub, endast dekorlager   (gsap-domänen)
   · hover     y -4px, scale 1.02, 250ms power2.out      (gsap-domänen)
   · bildavtäckning  bredd 78→100 %, inre skala 1.22→1,
                     radie in vid halva förloppet,
                     fjäder stiffness 120 / damping 80   (21st id 24466)
   Fjädern emuleras med linjär interpolation per bildruta.
   ============================================================ */
:root{
  --lift:cubic-bezier(.25,.46,.45,.94);          /* power2.out */
  --sh-rest:0 1px 2px rgba(16,40,64,.05), 0 6px 18px rgba(16,40,64,.07), 0 18px 44px rgba(16,40,64,.07);
  --sh-lift:0 2px 4px rgba(16,40,64,.07), 0 12px 24px rgba(16,40,64,.12), 0 32px 70px rgba(16,40,64,.12);
}
/* ---------- bildramar med graciös reserv ---------- */
.shot{position:relative; overflow:hidden; border-radius:14px;
  background:linear-gradient(155deg, var(--blue-pale) 0%, #D9E8F4 60%, var(--blue-line) 100%);
  box-shadow:var(--sh-rest);
  transition:transform 250ms var(--lift), box-shadow 250ms var(--lift)}
.shot:hover{transform:translateY(-4px) scale(1.02); box-shadow:var(--sh-lift)}
.shot img{inline-size:100%; block-size:100%; object-fit:cover;
  transform:scale(var(--imgScale,1.06)) translate3d(0,var(--imgY,0px),0);
  transition:transform 700ms var(--lift); will-change:transform}
.shot:hover img{--imgScale:1.12}
/* svag ljusning i överkant så bilden får volym */
.shot::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(190deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%,
             rgba(12,38,62,.10) 100%)}
.shot.missing::after{display:none}

/* bildavtäckning vid skroll — behållaren växer, bilden zoomar ut */
.reveal-img{inline-size:var(--rw,100%); margin-inline:auto; border-radius:var(--rr,14px);
  will-change:width}
.reveal-img img{--imgScale:var(--rs,1.06)}
.shot .fallback{position:absolute; inset:0; display:none; place-items:center; text-align:center;
  padding:var(--s3); color:var(--blue-deep)}
.shot.missing img{display:none}
.shot.missing .fallback{display:grid}
.fallback .fb-in{display:grid; gap:10px; justify-items:center}
.fallback .fb-file{font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  background:rgba(255,255,255,.8); padding:6px 12px; border-radius:6px}
.fallback .fb-txt{font-size:.8125rem; color:#3C6A92; max-inline-size:28ch}


/* ============================================================
   DIPLOMVY — oppnas som en egen sida med egen adress (#diplom-n),
   bakatknappen stanger den. Fokus fangas medan den ar oppen.
   ============================================================ */
.dip{appearance:none; border:0; background:none; padding:0; text-align:start;
  font:inherit; color:inherit; cursor:pointer; display:block}
.dip .shot{transition:transform 250ms var(--lift), box-shadow 250ms var(--lift)}
.dip:hover .shot{transform:translateY(-4px) scale(1.02); box-shadow:var(--sh-lift)}
.dip .more{display:inline-flex; align-items:center; gap:6px; margin-block-start:6px;
  font-family:var(--font-display); font-size:.8125rem; font-weight:500; color:var(--rust)}
.dip .more svg{transition:transform 250ms var(--lift)}
.dip:hover .more svg{transform:translateX(3px)}
html[dir="rtl"] .dip:hover .more svg{transform:translateX(-3px) scaleX(-1)}
html[dir="rtl"] .dip .more svg{transform:scaleX(-1)}

.sheet{position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:var(--s2)}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute; inset:0; background:rgba(12,32,52,.72); backdrop-filter:blur(8px);
  animation:fadein 280ms ease both; border:0}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sheet-panel{position:relative; z-index:1; background:var(--white); border-radius:18px;
  inline-size:min(100%,1120px); max-block-size:92svh; overflow:auto;
  box-shadow:0 30px 90px rgba(8,28,48,.45);
  animation:rise 360ms var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(22px) scale(.985)}to{opacity:1; transform:none}}
.sheet-close{position:sticky; inset-block-start:12px; inset-inline-start:100%; z-index:3;
  inline-size:42px; block-size:42px; margin-inline-end:12px; border:0; border-radius:50%;
  background:var(--blue-pale); color:var(--blue-deep); cursor:pointer; font-size:1.125rem;
  display:grid; place-items:center; transition:background 220ms var(--ease)}
.sheet-close:hover{background:var(--blue-line)}
.sheet-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:var(--s4);
  padding:0 var(--s4) var(--s4); margin-block-start:calc(var(--s4) * -1 + 10px)}
@media (max-width:860px){ .sheet-grid{grid-template-columns:1fr; gap:var(--s3); padding-inline:var(--s3)} }
.sheet-img{border-radius:12px; overflow:hidden; background:var(--blue-pale); align-self:start;
  border:1px solid var(--line); margin-block-start:clamp(28px,5.5vh,72px)}
@media (max-width:860px){ .sheet-img{margin-block-start:0} }
.sheet-img img{inline-size:100%; block-size:auto; display:block}
.sheet-body h2{font-size:clamp(1.375rem,2.6vw,1.875rem); margin-block-start:6px}
.sheet-meta{margin:var(--s3) 0 0; display:grid; gap:10px}
.sheet-meta div{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding-block-end:10px; border-block-end:1px solid var(--line)}
.sheet-meta dt{font-family:var(--font-display); font-size:.6875rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grey); min-inline-size:8.5ch}
html[lang="ar"] .sheet-meta dt{letter-spacing:0; text-transform:none; font-size:.8125rem}
.sheet-meta dd{margin:0; font-size:.9375rem}
.sheet-body h3{font-family:var(--font-display); font-size:1rem; font-weight:600;
  margin-block-start:var(--s3); color:var(--blue-ink)}
.sheet-body p.txt{margin-block-start:8px; color:var(--grey); font-size:.9375rem; line-height:1.7}
.sheet-foot{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;
  margin-block-start:var(--s3); padding-block-start:var(--s3); border-block-start:1px solid var(--line)}
.sheet-note{font-size:.75rem; color:var(--grey); margin-block-start:var(--s2); opacity:.9}
.sheet-nav{display:flex; align-items:center; gap:var(--s2); margin-inline-start:auto}
.sheet-nav button{appearance:none; inline-size:40px; block-size:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--white); color:var(--blue-deep); cursor:pointer;
  display:grid; place-items:center; transition:border-color 220ms var(--ease), background 220ms var(--ease)}
.sheet-nav button:hover{border-color:var(--blue-mid); background:var(--blue-pale)}
.sheet-nav button:disabled{opacity:.35; cursor:default}
.sheet-count{font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:.875rem; color:var(--grey)}
@media (prefers-reduced-motion:reduce){
  .sheet-bg,.sheet-panel{animation:none}
}

/* ============================================================
   INTRO — ridan med loggan som ritar sig sjalv
   ============================================================ */
.intro{position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--blue-mid), var(--blue-ink));
  transition:transform 1000ms cubic-bezier(.76,0,.24,1) 340ms, opacity 360ms linear 1000ms;
  animation:intro-failsafe 1ms linear 3800ms forwards}
@keyframes intro-failsafe{to{transform:translateY(-101%); opacity:0; pointer-events:none; visibility:hidden}}
.intro.done{transform:translateY(-101%); opacity:0; pointer-events:none}
.intro-in{display:grid; justify-items:center; gap:var(--s2)}
#intro-mark{block-size:118px; inline-size:auto; overflow:visible}
#intro-mark path{stroke-dasharray:240; stroke-dashoffset:240;
  animation:draw 950ms cubic-bezier(.65,0,.35,1) forwards}
#intro-mark circle{opacity:0; animation:pop 460ms cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0; transform:scale(.35)}to{opacity:1; transform:scale(1)}}
.intro-word{font-family:var(--font-display); font-weight:600; font-size:1.375rem; color:#fff;
  letter-spacing:.01em; opacity:0; animation:introup 560ms var(--ease) 820ms forwards}
.intro-word b{color:#A8D0EC}
.intro-line{inline-size:74px; block-size:2px; background:rgba(255,255,255,.34); overflow:hidden;
  opacity:0; animation:introup 400ms var(--ease) 980ms forwards}
.intro-line i{display:block; block-size:100%; inline-size:100%; background:#fff;
  transform:translateX(-100%); animation:sweep 1100ms cubic-bezier(.65,0,.35,1) 1020ms forwards}
@keyframes introup{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes sweep{to{transform:translateX(0)}}

/* ============================================================
   RYGGRADSSEKTIONEN
   ============================================================ */
.spineband{position:relative; overflow:hidden; color:#fff; padding-block:var(--s6);
  background:linear-gradient(150deg, #123A5C 0%, #0E2C46 55%, #0A2036 100%)}
.spineband::before{content:""; position:absolute; inset-block-start:-30%; inset-inline-start:-10%;
  inline-size:70vmax; block-size:70vmax; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(76,147,200,.3) 0%, rgba(76,147,200,0) 62%)}
.spineband > .wrap{position:relative; z-index:1}
.spine-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); align-items:center}
@media (max-width:920px){ .spine-grid{grid-template-columns:1fr; gap:var(--s3)} }
.spine-stage{position:relative; aspect-ratio:1/1.15; min-block-size:340px}
/* Galler varje modell, inte bara ryggraden. setSize(w,h,false) later
   CSS satta storleken: utan dessa rader visas duken i attributstorlek,
   alltsa bredd ganger devicePixelRatio, och beskars av bandet. */
.spine-stage canvas{position:absolute; inset:0; inline-size:100%; block-size:100%;
  opacity:0; transition:opacity 1200ms var(--ease);
  touch-action:pan-y; cursor:grab}
.spine-stage canvas.dragging{cursor:grabbing}
.spine-hint{position:absolute; inset-block-end:6px; inset-inline:0; text-align:center;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
  pointer-events:none; transition:opacity 500ms ease}
html[lang="ar"] .spine-hint{letter-spacing:0; text-transform:none; font-size:.8125rem}
.spine-hint.gone{opacity:0}

.partlist{display:flex; flex-wrap:wrap; gap:8px; margin-block-start:var(--s3)}
.partlist button{appearance:none; font:inherit; font-family:var(--font-display); font-size:.8125rem;
  font-weight:500; color:var(--dim-blue); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 16px; cursor:pointer;
  min-block-size:40px; display:inline-flex; align-items:center; gap:8px;
  transition:background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease)}
.partlist button:hover{color:#fff; border-color:rgba(255,255,255,.45)}
.partlist button[aria-pressed="true"]{background:#fff; color:var(--blue-ink); border-color:#fff}
.partlist button i{inline-size:9px; block-size:9px; border-radius:50%; background:currentColor; opacity:.7}
.partinfo{margin-block-start:var(--s2); min-block-size:4.6em}
.partinfo h3{font-family:var(--font-display); font-size:1.0625rem; font-weight:600; color:#fff}
.partinfo h3 em{font-style:italic; font-weight:400; color:var(--dim-blue); font-size:.9375rem}
.partinfo p{color:var(--dim-blue); font-size:.9375rem; margin-block-start:6px; max-inline-size:46ch}
.spine-stage canvas.ready{opacity:1}
#spine-fallback{position:absolute; inset:0; display:none; place-items:center}
#spine-fallback svg{block-size:88%; inline-size:auto; overflow:visible}
.spine-stage.nogl #spine-fallback{display:grid}
.spineband h2{color:#fff; font-size:clamp(1.875rem,4vw,2.875rem)}
.spineband .eyebrow{color:#FFD9A8}
.spineband p{color:var(--dim-blue); margin-block-start:var(--s2); max-inline-size:46ch}
.spine-facts{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-block-start:var(--s4);
  padding-block-start:var(--s3); border-block-start:1px solid rgba(255,255,255,.2)}
.spine-facts .k{font-family:var(--font-display); font-size:.625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim-blue); margin-block-end:5px}
html[lang="ar"] .spine-facts .k{letter-spacing:0; text-transform:none; font-size:.8125rem}
.spine-facts .v{font-size:.9375rem; color:#fff}

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}

/* ---------- regenerativ medicin ---------- */
.regtopics{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:var(--s4); margin-block-start:var(--s5); padding-block-start:var(--s4);
  border-block-start:1px solid rgba(255,255,255,.2)}
.regtopic h3{font-family:var(--font-display); font-size:1.125rem; font-weight:600; color:#fff}
.regtopic .lat{font-family:var(--font-display); font-size:.625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#FFD9A8; margin-block-end:6px}
html[lang="ar"] .regtopic .lat{letter-spacing:0; text-transform:none; font-size:.8125rem}
.regtopic p{color:var(--dim-blue); font-size:.9375rem; line-height:1.65;
  margin-block-start:10px; max-inline-size:52ch}
.regfig{margin-block-start:var(--s3)}
.regfig svg{inline-size:100%; max-inline-size:220px; block-size:auto}
.regfig figcaption{color:var(--dim-blue); font-size:.8125rem; margin-block-start:8px;
  max-inline-size:40ch}

/* schematisk exosom. Skalan star i bildtexten, inte i bilden. */
.exofig .lumen{fill:rgba(143,196,234,.13)}
.exofig .skikt{fill:none; stroke:rgba(143,196,234,.3)}
.exofig .membran{fill:none; stroke:#8FC4EA; stroke-width:1.6}
.exofig .membran-inre{fill:none; stroke:#8FC4EA; stroke-width:1.6}
.exofig .protein{fill:#FFD9A8; stroke:none}
.exofig .skaft{fill:none; stroke:#FFD9A8; stroke-width:2.2; stroke-linecap:round}
.exofig .last{fill:#E8A86E}
.exofig .rna{fill:none; stroke:#E8A86E; stroke-width:1.8; stroke-linecap:round;
  stroke-linejoin:round}

/* ---------- kroppsdelssidorna ---------- */
.sr-only{position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

.backlink{display:inline-flex; align-items:center; gap:7px; color:inherit;
  text-decoration:none; border-block-end:1px solid transparent;
  transition:border-color 200ms var(--ease)}
.backlink::before{content:"\2190"; font-size:1.1em; line-height:1}
html[dir="rtl"] .backlink::before{content:"\2192"}
.backlink:hover{border-block-end-color:currentColor}

/* Korten: figuren forst, namnet under. Figurerna ar redan ritade for
   tillstanden, sa kortet visar samma kroppsdel som sidan innehaller. */
/* Sju kort. Auto-fit gav fem pa forsta raden och tva pa andra, vilket
   ser trasigt ut. Fyra kolumner delar sju i 4 + 3, som ar sa jamnt det
   gar att fa ett primtal. */
.areacards{display:grid; gap:var(--s2); margin-block-start:var(--s4);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .areacards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){  .areacards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.areacard{display:flex; flex-direction:column; gap:var(--s2);
  text-decoration:none; color:inherit; background:#fff; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; padding:var(--s2);
  transition:border-color 280ms var(--ease), box-shadow 280ms var(--ease),
             transform 280ms var(--lift)}
.areacard:hover{border-color:var(--blue); transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(16,40,64,.1)}
/* Figuren i en egen ruta med egen botten, sa att den laser som en
   ikon och inte som ett diagram som flyter ovanpa texten. */
.areafig{display:flex; align-items:center; justify-content:center;
  block-size:124px; border-radius:9px; background:var(--blue-pale);
  overflow:hidden}
/* Absolut hojd, aldrig procent: en procent mot en ruta som sjalv
   storleksatts av innehallet ar cirkular, och da faller webblasaren
   tillbaka pa 300px bredd och figuren spranger kortet. */
.areafig svg{block-size:96px; inline-size:auto; max-inline-size:86%;
  display:block; overflow:visible; opacity:.92;
  transition:opacity 280ms var(--ease)}
.areacard:hover .areafig svg{opacity:1}
.areatxt{display:flex; flex-direction:column; gap:2px; padding-inline:4px;
  padding-block-end:4px}
.areatxt .t{font-family:var(--font-display); font-weight:600; font-size:.9375rem;
  line-height:1.3; color:var(--ink)}
.areatxt .c{font-size:.8125rem; color:var(--grey);
  font-variant-numeric:tabular-nums}

/* raden langst ned pa en kroppsdelssida: mindre an pa hubben */
.otherareas{margin-block-start:var(--s6); padding-block-start:var(--s4);
  border-block-start:1px solid var(--line)}
.otherareas h2{font-family:var(--font-display); font-weight:600;
  font-size:1.125rem; color:var(--ink)}
/* Sex kort langst ned: de gar jamnt ut pa en rad. */
.otherareas .areacards{grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--s1); margin-block-start:var(--s3)}
@media (max-width:900px){ .otherareas .areacards{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .otherareas .areacards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.otherareas .areafig{block-size:78px}
.otherareas .areafig svg{block-size:58px}
.otherareas .areatxt .t{font-size:.8125rem}
.otherareas .areacard{padding:10px}

/* ---------- sju omraden pa startsidan ---------- */
.arearow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--s3);
  align-items:center; padding-block:var(--s3);
  border-block-end:1px solid var(--line);
  text-decoration:none; color:inherit;
  transition:padding-inline 320ms var(--lift)}
.arearow:first-child{border-block-start:1px solid var(--line)}
.arearow:hover{padding-inline-start:var(--s2)}
.arearow .t{display:block; font-family:var(--font-display); font-weight:600;
  font-size:1.125rem; line-height:1.35}
.arearow .ex{display:block; color:var(--grey); font-size:.875rem;
  margin-block-start:5px; max-inline-size:62ch}
.arearow .c{font-size:.8125rem; color:var(--grey);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.arearow .go{color:var(--rust); display:inline-flex;
  transition:transform 320ms var(--lift)}
.arearow:hover .go{transform:translateX(4px)}
html[dir="rtl"] .arearow:hover .go{transform:translateX(-4px)}
@media (max-width:620px){
  .arearow{grid-template-columns:minmax(0,1fr) auto}
  .arearow .go{display:none}
}

/* ---------- till toppen ---------- */
.totop{display:inline-flex; align-items:center; gap:8px; margin-block-start:var(--s5);
  font-family:var(--font-display); font-size:.8125rem; font-weight:600;
  color:var(--blue); text-decoration:none; min-block-size:40px}
.totop:hover{text-decoration:underline}

/* ---------- oppettider ---------- */
.hours{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s3);
  margin-block-start:var(--s4); padding-block-start:var(--s4);
  border-block-start:1px solid rgba(255,255,255,.2)}
.hours .k{font-family:var(--font-display); font-size:.625rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim-blue); margin-block-end:8px}
html[lang="ar"] .hours .k{letter-spacing:0; text-transform:none; font-size:.8125rem}
.hours .row{display:flex; justify-content:space-between; gap:var(--s2); padding-block:5px;
  font-size:.9375rem; color:#fff; border-block-end:1px solid rgba(255,255,255,.12)}
.hours .row:last-child{border-block-end:0}
.hours .row span:last-child{color:var(--dim-blue); white-space:nowrap}
.hours .maplink{display:inline-flex; align-items:center; gap:8px; margin-block-start:10px;
  color:#fff; font-size:.9375rem; text-decoration:underline; text-underline-offset:4px}
.hours .maplink:hover{color:#FFD9A8}

/* Axeln ligger pa samma band som ryggraden men atsidovand, sa att de tva
   3D-ytorna inte hamnar under varandra pa samma sida av sidan. */
.band-flip .spine-grid > div:first-child{order:2}
.band-flip .spine-grid > div:last-child{order:1}
@media (max-width:900px){
  .band-flip .spine-grid > div:first-child{order:1}
  .band-flip .spine-grid > div:last-child{order:2}
}

/* ---------- hanvisning till besvarssidan, och dess egen ingress ---------- */
/* Tva kolumner som fylls NEDAT, inte i sidled: en numrerad lista laser man
   uppifran och ner, och da foljer tabbordningen ogat. */
/* Spalter i stallet for rutnat: antalet rader behover da inte raknas ut
   i forvag, sa listan taler hur manga tillstand som helst. Spalter laser
   man uppifran och ner, vilket en numrerad lista ska goras. */
/* Startsidan listar sju omraden, inte sextio tillstand. Darfor
   behovs varken spalter eller rutnat har. */
.condgrid{margin-block-start:var(--s4)}
.condrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s2);
  align-items:center; padding-block:15px; border-block-end:1px solid var(--line);
  text-decoration:none; color:inherit; transition:padding-inline 320ms var(--lift)}
.condrow:hover{padding-inline-start:var(--s2)}
.condrow .n{font-family:var(--font-display); font-weight:600; font-size:.8125rem;
  color:var(--rust); font-variant-numeric:tabular-nums; min-inline-size:3ch}
.condrow .t{font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
  line-height:1.3; color:var(--blue-ink); transition:color 240ms var(--ease)}
.condrow .r{font-size:.8125rem; color:var(--grey); margin-block-start:3px}
.condrow .go{inline-size:30px; block-size:30px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--blue-mid);
  border:1px solid transparent; opacity:0;
  transition:opacity 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease)}
html[dir="rtl"] .condrow .go{transform:scaleX(-1)}
.condrow:hover .go,.condrow:focus-visible .go{opacity:1; border-color:var(--blue-line);
  background:var(--blue-pale)}
.condrow:hover .t{color:var(--blue-mid)}
@media (hover:none){ .condrow .go{opacity:.55} }
.condlink-cta{margin-block-start:var(--s4)}

.pagehead{background:linear-gradient(160deg,var(--blue-deep),var(--blue-ink));
  padding-block:calc(var(--header-h) + var(--s5)) var(--s5)}
.pagehead h1{font-family:var(--font-display); font-weight:600; color:var(--on-blue);
  font-size:clamp(2rem,5vw,3.25rem); line-height:1.08; letter-spacing:-.02em;
  margin-block-start:var(--s2)}
.pagehead .kicker{font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim-blue)}
html[lang="ar"] .pagehead .kicker{letter-spacing:0; text-transform:none; font-size:.9375rem}
.pagehead .copy{color:var(--dim-blue); max-inline-size:62ch; margin-block-start:var(--s2);
  font-size:1.0625rem; line-height:1.7}

/* ============================================================
   VANLIGA BESVAR — utfallbara rader
   ============================================================ */
.cond{border-block-start:1px solid var(--line)}
.cond:last-of-type{border-block-end:1px solid var(--line)}
.cond-head{inline-size:100%; appearance:none; border:0; background:none; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s3);
  align-items:center; text-align:start; padding:var(--s3) 0; font:inherit; color:inherit;
  transition:padding-inline 320ms var(--lift)}
.cond-head:hover{padding-inline-start:var(--s2)}
.cond-head .n{font-family:var(--font-display); font-weight:600; font-size:.875rem;
  color:var(--rust); font-variant-numeric:tabular-nums; min-inline-size:3ch}
.cond-head .t{font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.0625rem,2.2vw,1.375rem); line-height:1.3}
.cond-head .sum{color:var(--grey); font-size:.9375rem; margin-block-start:5px; max-inline-size:62ch}
.cond-head .plus{inline-size:34px; block-size:34px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--blue-mid); flex:none;
  transition:transform 380ms var(--lift), background 280ms var(--ease), border-color 280ms var(--ease)}
.cond-head:hover .plus{background:var(--blue-pale); border-color:var(--blue-line)}
.cond-head[aria-expanded="true"] .plus{transform:rotate(45deg); background:var(--blue-mid);
  border-color:var(--blue-mid); color:#fff}
@media (max-width:640px){
  .cond-head{grid-template-columns:auto minmax(0,1fr)}
  .cond-head .plus{grid-column:2; justify-self:start; margin-block-start:10px}
}

/* mjuk utfallning utan att hojden behover raknas i JS */
.cond-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows 460ms var(--lift)}
.cond.open .cond-body{grid-template-rows:1fr}
.cond-body > div{overflow:hidden}
.cond-inner{padding-block:0 var(--s4); padding-inline-start:calc(3ch + var(--s3));
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s3); align-items:start}
@media (max-width:640px){ .cond-inner{padding-inline-start:0} }
.cond-text{min-inline-size:0}

/* schematisk kotpelare — ritas i SVG, inte WebGL, se buildSpine() */
.cond-fig{inline-size:clamp(100px,13vw,126px); justify-self:end}
.spinefig{inline-size:100%; block-size:auto; display:block}
.spinefig .bone{fill:#E4EDF5; stroke:#A6BDD1; stroke-width:.9}
.spinefig .disc{fill:#C9DCEC; stroke:#A6BDD1; stroke-width:.7}
.spinefig .proc{fill:none; stroke:#A6BDD1; stroke-width:2.7;
  stroke-linecap:round; stroke-linejoin:round}
.spinefig .proc-f,.spinefig .facet{fill:#B9CFE2}
.spinefig .canal{fill:none; stroke:#EDF4FA; stroke-linecap:round; stroke-linejoin:round}
.spinefig .dim{opacity:.3}
.spinefig .on .bone{fill:#CFE4F7; stroke:var(--blue-mid)}
.spinefig .on .disc{fill:#A8CCE9; stroke:var(--blue-mid)}
.spinefig .on .proc{stroke:var(--blue-mid)}
.spinefig .on .facet{fill:var(--blue-mid)}
.spinefig .lv .bone.acc,.spinefig .lv .disc.acc{fill:var(--rust); stroke:#93301A}
.spinefig .lv .disc.acc-soft{fill:#EDB49C; stroke:#B9471F; stroke-width:.9}
.spinefig .lv .acc-dot{fill:var(--rust); stroke:none}
.spinefig .acc-canal{stroke:var(--rust); opacity:.55}
/* axeln */
.spinefig .socket{fill:#D7E4EF}
.spinefig .on .socket{fill:#BCD8EE}
.spinefig .lv .socket.acc{fill:var(--rust); stroke:#93301A}
.spinefig .ghost{fill:none; stroke:#A6BDD1; stroke-width:1; stroke-dasharray:3 3}
.spinefig .gap{fill:none; stroke:var(--rust); stroke-linecap:round; opacity:.75}
.spinefig .capsule{fill:none; stroke:var(--rust); stroke-width:2.4; stroke-dasharray:5 3.5}
/* handen */
.spinefig .ray{fill:none; stroke:#C2D8E8; stroke-linecap:round}
.spinefig .on .ray{stroke:#8FB6D4}
.spinefig .tunnel{fill:none; stroke:var(--rust); stroke-width:2.4; stroke-dasharray:4 3; stroke-linecap:round}
.spinefig .ring{fill:none; stroke:var(--rust); stroke-width:2.2}
.spinefig .joint{fill:none; stroke:var(--rust); stroke-width:3.2; stroke-linecap:round; opacity:.8}
.spinefig .tendon{fill:none; stroke:var(--rust); stroke-width:3; stroke-linecap:round; opacity:.8}
.spinefig .nerve{fill:none; stroke:var(--rust); stroke-width:2; stroke-linecap:round; stroke-dasharray:6 3}
/* armbagen */
.spinefig .bursa{fill:var(--rust); fill-opacity:.3; stroke:var(--rust); stroke-width:2}
/* knat */
.spinefig .patella{fill:#DCEAF6; fill-opacity:.55; stroke:#2C6CA6; stroke-width:1.2}
.spinefig .lv .patella.acc-line{fill:#F2CBBD; fill-opacity:.7; stroke:var(--rust); stroke-width:1.8}
.spinefig .ligament{fill:none; stroke:var(--rust); stroke-linecap:round; opacity:.9}
.spinefig .meniscus{fill:none; stroke:var(--rust); stroke-linecap:round; opacity:.85}
.spinefig .cyst{fill:var(--rust); fill-opacity:.28; stroke:var(--rust); stroke-width:2; stroke-dasharray:5 3}
/* foten */
.spinefig .spur{fill:var(--rust); stroke:none}
.spinefig .nailplate{fill:#E8EFF6; stroke:#2C6CA6; stroke-width:1.2}
.spinefig .lv .foramen{fill:none; stroke:var(--rust); stroke-width:1.7}
.cond-figcap{font-family:var(--font-display); font-size:.75rem; font-weight:600;
  color:var(--blue-mid); text-align:center; line-height:1.45; margin-block-start:12px}
.cond-fignote{font-size:.6875rem; color:var(--grey); text-align:center;
  line-height:1.45; margin-block-start:6px}
@media (max-width:860px){
  .cond-inner{grid-template-columns:minmax(0,1fr)}
  .cond-fig{justify-self:center; inline-size:104px; order:-1; margin-block-end:var(--s3)}
}
.cond-inner h4{font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
  margin-block-start:var(--s3); margin-block-end:8px}
html[lang="ar"] .cond-inner h4{letter-spacing:0; text-transform:none; font-size:.875rem}
.cond-inner h4:first-child{margin-block-start:0}
.cond-inner p{color:var(--grey); font-size:.9375rem; line-height:1.72; max-inline-size:66ch;
  margin-block-start:10px}
.cond-inner ul{margin-block-start:10px; max-inline-size:66ch}
.cond-inner li{color:var(--grey); font-size:.9375rem; line-height:1.6; padding-inline-start:20px;
  position:relative; margin-block-start:7px}
.cond-inner li::before{content:""; position:absolute; inset-inline-start:2px; inset-block-start:.62em;
  inline-size:6px; block-size:6px; border-radius:50%; background:var(--blue-line)}

/* rod ruta for det som kraver akut vard */
.redflag{margin-block-start:var(--s3); border-inline-start:4px solid var(--rust);
  background:var(--rust-soft); border-radius:0 10px 10px 0; padding:var(--s3); max-inline-size:66ch}
html[dir="rtl"] .redflag{border-radius:10px 0 0 10px}
.redflag .rf-h{display:flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:600; font-size:1rem; color:#8E2B10}
.redflag p{color:#7A3520; margin-block-start:8px}
.redflag .rf-call{display:inline-flex; align-items:center; gap:9px; margin-block-start:var(--s2);
  font-family:var(--font-display); font-weight:600; font-size:1.0625rem; color:#fff;
  background:var(--rust); padding:11px 20px; border-radius:8px; text-decoration:none}
.redflag .rf-call:hover{background:#A63518}

.cond-note{display:flex; gap:11px; align-items:flex-start; margin-block-start:var(--s4);
  padding:var(--s3); background:var(--blue-pale); border-radius:12px; max-inline-size:72ch}
.cond-note svg{flex:none; margin-block-start:2px; color:var(--blue-mid)}
.cond-note p{font-size:.875rem; color:var(--grey); line-height:1.65}

@media (prefers-reduced-motion:reduce){
  .cond-body{transition:none}
}

/* ---------- behandlingsrader ---------- */
.tchips{display:flex; flex-wrap:wrap; gap:7px; margin-block-start:12px}
.tchips span{font-family:var(--font-display); font-size:.8125rem; font-weight:500;
  color:var(--blue-deep); background:var(--blue-pale); border:1px solid var(--blue-line);
  padding:6px 13px; border-radius:999px}
.tprice{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-block-start:var(--s4);
  padding-block-start:var(--s3); border-block-start:1px solid var(--line)}
.tprice .k{font-family:var(--font-display); font-size:.625rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); margin-block-end:5px}
html[lang="ar"] .tprice .k{letter-spacing:0; text-transform:none; font-size:.8125rem}
.tprice .v{font-family:var(--font-display); font-size:1.25rem; font-weight:600; color:var(--blue-ink)}
.trows{margin-block-start:var(--s4)}
.trow{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3);
  padding-block:var(--s3); border-block-start:1px solid var(--line); align-items:start;
  transition:padding-inline 320ms var(--lift)}
.trow:last-child{border-block-end:1px solid var(--line)}
.trow:hover{padding-inline-start:var(--s2)}
.trow .n{font-family:var(--font-display); font-weight:600; font-size:.875rem; color:var(--rust);
  font-variant-numeric:tabular-nums; min-inline-size:3ch; padding-block-start:5px}
.trow .t{font-family:var(--font-display); font-weight:600; font-size:1.125rem; line-height:1.35}
.trow .d{color:var(--grey); font-size:.9375rem; margin-block-start:7px; max-inline-size:64ch}
@media (max-width:620px){ .trow{grid-template-columns:1fr; gap:8px} }

/* ---------- topplist ---------- */
.topbar{background:var(--blue); color:#fff; font-size:.8125rem}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center;
  justify-content:space-between; padding-block:9px}
.topbar a{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:7px; min-block-size:32px}
.topbar a:hover{text-decoration:underline}
.topbar .grp{display:flex; flex-wrap:wrap; gap:var(--s3)}
@media (max-width:760px){ .topbar .hide{display:none} }

.site-header{position:sticky; inset-block-start:0; z-index:200; background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(1.2); border-block-end:1px solid transparent;
  block-size:var(--header-h); display:flex; align-items:center;
  transition:border-color 400ms var(--ease), box-shadow 400ms var(--ease)}
.site-header.lifted{border-block-end-color:var(--line); box-shadow:0 8px 28px rgba(16,40,64,.07)}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
/* Logotypen bar bade figuren och ordet, sa headern behover inget
   mer. Hojden ar satt, bredden foljer av bildens egna matt. */
.logo img{block-size:34px; inline-size:auto; display:block}
@media (max-width:620px){ .logo img{block-size:28px} }
.nav{display:flex; gap:2px}
.nav a{font-size:.9375rem; color:var(--grey); text-decoration:none; min-block-size:44px; padding:0 14px;
  display:inline-flex; align-items:center; border-radius:8px;
  transition:color 240ms var(--ease), background 240ms var(--ease)}
.nav a:hover{color:var(--blue-mid); background:var(--blue-pale)}
@media (max-width:1040px){ .nav{display:none} }
.head-r{display:flex; align-items:center; gap:var(--s2)}
.langs{display:flex; gap:2px; background:var(--blue-pale); border-radius:999px; padding:3px}
.langs button{font:inherit; font-family:var(--font-text); font-size:.75rem; font-weight:500;
  min-block-size:34px; min-inline-size:42px; padding:0 11px; border:0; border-radius:999px;
  background:transparent; color:var(--grey); cursor:pointer;
  transition:background 240ms var(--ease), color 240ms var(--ease)}
.langs button:hover{color:var(--ink)}
.langs button[aria-pressed="true"]{background:var(--blue-mid); color:#fff}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-block-size:48px;
  padding:0 22px; border-radius:8px; font-family:var(--font-display); font-weight:500; font-size:.9375rem;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease)}
.btn-rust{background:var(--rust); color:#fff} .btn-rust:hover{background:#A63518}
.btn-out{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn-out:hover{background:#fff; color:var(--blue-deep); border-color:#fff}
.btn-line{background:transparent; color:var(--blue-deep); border-color:var(--blue-line)}
.btn-line:hover{border-color:var(--blue-mid); background:var(--blue-pale)}
@media (max-width:700px){ .btn-head{display:none} }

.notice{background:var(--rust-soft); border-block-end:1px solid #F0D6CB; color:#7E2B11;
  font-size:.8125rem; padding:11px 0}
.notice .wrap{display:flex; gap:9px; align-items:flex-start}
.notice svg{flex:none; margin-block-start:3px}
.demo{color:var(--grey); text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:rgba(196,64,31,.42); text-underline-offset:5px}

/* ============================================================
   HERO — portrattet bar sektionen
   ============================================================ */
.hero{position:relative; overflow:hidden; color:var(--on-blue);
  background:linear-gradient(140deg, var(--blue-mid) 0%, var(--blue-deep) 58%, var(--blue-ink) 100%)}
.hero::after{content:""; position:absolute; inset-block-end:-2px; inset-inline:0; block-size:110px;
  background:var(--page); clip-path:polygon(0 100%, 100% 26%, 100% 100%); z-index:2}
html[dir="rtl"] .hero::after{clip-path:polygon(0 26%, 100% 100%, 0 100%)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s5); align-items:center;
  padding-block:var(--s5) calc(var(--s5) + 50px); position:relative; z-index:1}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:var(--s4)} }
.hero .kicker{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display);
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3);
  padding:8px 15px; border-radius:999px; margin-block-end:var(--s2)}
html[lang="ar"] .hero .kicker{letter-spacing:0; text-transform:none; font-size:.875rem}
.hero h1{font-size:clamp(2.25rem,5.2vw,3.625rem); letter-spacing:-.02em}
html[lang="ar"] .hero h1{letter-spacing:0}
.role{display:inline-block; background:#fff; color:var(--rust); font-family:var(--font-display);
  font-weight:600; font-size:clamp(1rem,2vw,1.3125rem); padding:9px 18px; border-radius:7px;
  margin-block-start:var(--s2)}
.hero .copy{color:var(--dim-blue); margin-block-start:var(--s3); max-inline-size:46ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--s1); margin-block-start:var(--s3)}

/* portrattet med tre lager bakom sig — olika parallaxhastighet ger djup */
.portrait-hold{position:relative; display:grid; place-items:center; isolation:isolate}
.plate{position:absolute; border-radius:18px; pointer-events:none; will-change:transform}
.plate-1{inline-size:72%; block-size:66%; inset-block-start:-7%; inset-inline-end:-8%;
  background:rgba(255,255,255,.12); z-index:-2}
.plate-2{inline-size:58%; block-size:52%; inset-block-end:-6%; inset-inline-start:-7%;
  background:rgba(76,147,200,.4); z-index:-2}
.plate-3{inline-size:120%; block-size:120%; border-radius:50%; z-index:-3;
  background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 62%)}
html[dir="rtl"] .plate-1{inset-inline-end:auto; inset-inline-start:-8%}
html[dir="rtl"] .plate-2{inset-inline-start:auto; inset-inline-end:-7%}
.portrait{position:relative; z-index:1; inline-size:min(100%,380px); aspect-ratio:4/5;
  box-shadow:0 4px 10px rgba(6,26,46,.24), 0 18px 40px rgba(6,26,46,.3), 0 40px 90px rgba(6,26,46,.34)}

/* ============================================================
   KONTAKTKORTET
   ============================================================ */
.cardstrip{margin-block-start:calc(var(--s5) * -1); position:relative; z-index:3}
/* glasmaterial med z-förskjutning istället för en platt vit platta */
.contact-card{background:rgba(255,255,255,.82); backdrop-filter:blur(22px) saturate(1.25);
  border-radius:16px; padding:var(--s4); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 2px rgba(16,40,64,.06), 0 10px 26px rgba(16,40,64,.1),
             0 30px 70px rgba(16,40,64,.14), inset 0 1px 0 rgba(255,255,255,.9)}
.contact-grid{display:grid; gap:var(--s3)}
.cline{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center;
  text-decoration:none; color:inherit; padding:12px; margin:-12px; border-radius:12px;
  transition:background 240ms var(--ease)}
a.cline:hover{background:var(--blue-pale)}
.cline .ic{inline-size:38px; block-size:38px; border-radius:10px; background:var(--blue-mid);
  color:#fff; display:grid; place-items:center; align-self:start}
.cline .txt{min-inline-size:0}
.cline .k{display:block; font-family:var(--font-display); font-size:.625rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-block-end:4px;
  line-height:1.2}
html[lang="ar"] .cline .k{letter-spacing:0; text-transform:none; font-size:.8125rem}
.cline .v{display:block; font-size:1rem; color:var(--ink); line-height:1.45;
  overflow-wrap:anywhere; hyphens:none}

/* pa det bla faltet: ljusa etiketter sa kontrasten haller, och mjuk hover */
.closing .cline .k{color:var(--dim-blue)}
.closing .cline .v{color:#fff}
.closing .cline .ic{background:rgba(255,255,255,.16); backdrop-filter:blur(6px)}
.closing a.cline:hover{background:rgba(255,255,255,.12)}
.closing a.cline:hover .ic{background:rgba(255,255,255,.26)}

/* e-postadressen ar lang: ge kolumnerna mer plats */
.contact-grid{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
@media (min-width:1000px){
  .contact-card .contact-grid{grid-template-columns:repeat(4,1fr)}
  .closing .contact-grid{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   SEKTIONER
   ============================================================ */
.sec{padding-block:var(--s6)}
.sec-head{max-inline-size:48ch; margin-block-end:var(--s4)}
.eyebrow{font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust); margin-block-end:var(--s1)}
html[lang="ar"] .eyebrow{letter-spacing:0; text-transform:none; font-size:.875rem}
h2{font-size:clamp(1.75rem,3.6vw,2.625rem); color:var(--blue-ink); letter-spacing:-.015em}
html[lang="ar"] h2{letter-spacing:0}
.sec-head p{color:var(--grey); margin-block-start:var(--s2)}

/* arbetsbilder: asymmetrisk komposition, inte tre lika stora */
.work{display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:auto auto;
  gap:var(--s2); align-items:stretch}
@media (max-width:820px){ .work{grid-template-columns:1fr} }
.work .a{grid-row:span 2; aspect-ratio:4/5}
.work .b, .work .c{aspect-ratio:16/10}
@media (max-width:820px){ .work .a{grid-row:auto; aspect-ratio:16/10} }

/* diplom: bläddrbar rad */
.dip-rail{display:flex; gap:var(--s2); overflow-x:auto; padding-block-end:var(--s2);
  scroll-snap-type:x mandatory; scrollbar-width:thin}
.dip{flex:0 0 clamp(200px,26vw,290px); scroll-snap-align:start}
.dip .shot{aspect-ratio:3/4}
.dip figcaption{font-size:.8125rem; color:var(--grey); margin-block-start:var(--s1)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5)}
@media (max-width:920px){ .split{grid-template-columns:1fr; gap:var(--s4)} }
.merit{display:grid; grid-template-columns:auto 1fr; gap:var(--s2); padding-block:var(--s2);
  border-block-start:1px solid var(--line)}
.merit .yr{font-family:var(--font-display); font-weight:600; font-size:1.125rem; color:var(--rust);
  font-variant-numeric:tabular-nums}
.merit .t{font-weight:500; font-size:1rem; line-height:1.45}
.merit .m{color:var(--grey); font-size:.9375rem; margin-block-start:4px}

.closing{position:relative; overflow:hidden; color:#fff; padding-block:var(--s5);
  background:linear-gradient(140deg, var(--blue-mid), var(--blue-deep))}
.closing::before{content:""; position:absolute; inset-block-start:-2px; inset-inline:0; block-size:88px;
  background:var(--page); clip-path:polygon(0 0, 100% 0, 0 76%)}
html[dir="rtl"] .closing::before{clip-path:polygon(0 0, 100% 0, 100% 76%)}
.closing .wrap{position:relative; z-index:1; padding-block-start:var(--s4)}
.closing h2{color:#fff} .closing .eyebrow{color:#FFD9A8} .closing p{color:var(--dim-blue)}

.site-footer{background:var(--blue-ink); color:var(--dim-blue); padding-block:var(--s3); font-size:.8125rem}
.footer-row{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); justify-content:space-between}
.site-footer strong{color:#fff; font-weight:500}

.rise{opacity:0; transform:translateY(22px); transition:opacity 750ms var(--ease), transform 750ms var(--ease)}
.rise.shown{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1 !important; transform:none !important; transition:none}
  *,*::before,*::after{transition-duration:.001ms !important}
}