/* ================================
   DARK • WARM MAROON • CLEAN
=================================== */
:root{
  --bg:#3F2924; --surface:#4A312B; --surface-2:#583B34;
  --text:#F6F1EC; --muted:#D8CDC3; --line:#6A443E;
  --accent:#9A5543; --accent-contrast:#0B0A09;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px; --maxw:1040px;
  --font:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;
  --h1:clamp(1.6rem,2.5vw,2rem);
  --h2:clamp(1.35rem,2.2vw,1.7rem);
  --lead:clamp(1.02rem,1.7vw,1.2rem);
  --measure:68ch; --gutter:clamp(24px,6vw,88px);
  --rail-dot:7px; --rail-ring:2px; --rail-pad:10px; --rail-gap:10px;

  /* Media-kolonne (NO & EN) */
  --media-w: clamp(300px, 32vw, 440px);
}

/* Base */
*{ box-sizing:border-box; }
html:focus-within{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(1000px 680px at 50% -180px, rgba(154,85,67,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  font:16px/1.7 var(--font);
}
a{ color:var(--accent); text-underline-offset:3px; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }
a:focus-visible, button:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 85%, white 15%);
  outline-offset:3px; border-radius:8px;
}
.container{ width:min(100%, var(--maxw)); margin-inline:auto; padding-inline:var(--gutter); }

/* Skip link */
.skip-link{ position:absolute; left:-999px; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{
  position:fixed; left:16px; top:16px; z-index:1001;
  background:var(--accent); color:var(--accent-contrast);
  padding:.6rem .8rem; border-radius:10px;
}

/* Sticky header (glass) */
header{
  position:sticky; top:0; z-index:1000;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
header .bar{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px;
  padding:.5rem 0;
}
header h1{ margin:0; font-size:var(--h1); letter-spacing:.2px; }
header p{ margin:2px 0 0; color:var(--muted); font-size:.98rem; }

/* Nav (desktop ≥900px) */
.nav{ display:none; gap:12px; align-items:center; }
.nav a{
  color:var(--muted); text-decoration:none;
  padding:.25rem .5rem; border-radius:999px; border:1px solid transparent;
  font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.nav a:hover, .nav a:focus-visible{ border-color:var(--line); color:var(--text); }
@media (min-width:900px){ .nav{ display:flex; } }

/* Language toggle */
.language-toggle{ display:inline-flex; gap:6px; align-items:center; }
.language-toggle .sep{ color:var(--muted); opacity:.6; }
.language-toggle button{
  background:transparent; color:var(--muted);
  border:2px solid transparent; font-weight:700;
  padding:.25rem .45rem; border-radius:10px; cursor:pointer;
}
.language-toggle button[aria-pressed="true"]{ color:var(--text); text-decoration:underline; }
.language-toggle button:hover, .language-toggle button:focus-visible{ border-color:var(--line); }

/* Mobile menu button */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in oklab, var(--surface) 85%, black 15%);
  color:var(--text); cursor:pointer;
}
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-burger{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }
@media (min-width:900px){ .menu-toggle{ display:none; } }

/* Mobile drop-down */
.mobile-menu{
  position:absolute; left:0; right:0; top:100%;
  background:color-mix(in oklab, var(--bg) 92%, black 8%);
  border-bottom:1px solid var(--line);
  box-shadow:0 16px 36px rgba(0,0,0,.25);
  padding:10px 0; z-index:1000;
}
.mobile-list{ display:grid; gap:2px; padding:6px 12px 10px; }
.mobile-list a{
  display:block; padding:12px 10px; border-radius:10px;
  color:var(--text); text-decoration:none;
}
.mobile-list a:hover, .mobile-list a:focus-visible{
  background:color-mix(in oklab, var(--surface) 85%, black 15%);
  outline:none;
}
@media (min-width:900px){ .mobile-menu{ display:none !important; } }

/* Main + section sizing */
main{ padding-block:10px 64px; }

/* Hero */
.hero{ min-height:70svh; display:grid; place-items:center; }
.hero-grid{ display:grid; gap:clamp(16px,3vw,36px); align-items:center; }
.hero-photo{
  overflow:hidden; border-radius:18px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--surface) 85%, black 15%);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  aspect-ratio:4/5; max-width:520px; justify-self:center;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-copy{ padding:0; }
.hero .lead{ margin-top:.5rem; color:var(--muted); max-width:var(--measure); }
@media (min-width:980px){
  .hero-grid{ grid-template-columns:1fr 1.1fr; }
  .hero-photo{ justify-self:start; }
}
@media (max-width:979.98px){ .hero{ min-height:unset; } }

/* Sections (grunnoppsett) */
.intro, .project{
  position:relative; min-height:92svh;
  display:grid; align-content:center; gap:10px;
  width:min(100%, var(--maxw)); margin:22px auto;
  padding:clamp(18px,2.8vw,28px);
  background:transparent; border:none; box-shadow:none;
  scroll-margin-top:84px;
}
.project p, .hero .lead{ max-width:var(--measure); }
.project h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:700; line-height:1.15; margin:0 0 .35rem; }
.kicker{ color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:.95rem; margin:.1rem 0 1.25rem; }

/* Alternate undertone (deaktivert senere for lys tema) */
#content-no .project:nth-of-type(even),
#content-en .project:nth-of-type(even){
  background:color-mix(in oklab, var(--surface-2) 12%, transparent);
}

/* Desktop default: text left, visuals right */
.project{ gap:clamp(14px,3vw,40px); }
@media (min-width:980px){
  .project{ grid-template-columns:1.2fr 1fr; align-items:start; }
  .project > *:not(.media):not(.carousel){ grid-column:1; }
  .project > .media, .project > .carousel{ grid-column:2; align-self:start; }
}

/* Mock placeholders */
.media{ display:grid; gap:12px; margin-top:8px; }
@media (min-width:860px){ .media{ grid-template-columns:1fr 1fr; } }
.mock{
  position:relative; display:block; border-radius:16px; border:1px solid #6A443E !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.14)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px);
  box-shadow:0 8px 22px rgba(0,0,0,.32); overflow:hidden;
}
.mock.browser{ aspect-ratio:16/10; border-radius:12px; }
.mock.browser::before{
  content:""; position:absolute; left:0; top:0; right:0; height:32px;
  background:
    radial-gradient(circle at 26px 50%, #ff5f57 5px, transparent 6px),
    radial-gradient(circle at 48px 50%, #febc2e 5px, transparent 6px),
    radial-gradient(circle at 70px 50%, #28c840 5px, transparent 6px),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border-bottom:1px solid var(--line);
}
.mock.laptop{ aspect-ratio:16/10; border-radius:12px; }
.mock.laptop::before{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.3));
}
.mock.phone{ aspect-ratio:9/19.5; border-radius:28px; }
.mock.phone::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); top:8px;
  width:38%; height:8px; border-radius:10px; background:rgba(255,255,255,.15);
}
figure{ margin:0; }
figcaption{ margin-top:6px; color:var(--muted); font-size:.95rem; }

/* DOT RAIL */
.rail{
  position:fixed; right:clamp(10px, 1.6vw, 20px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:var(--rail-gap); z-index:900;
}
.rail a{
  position:relative; width:0; height:0; padding:var(--rail-pad);
  background:transparent; border-radius:999px; display:inline-block; outline:none;
}
.rail a::before{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--rail-dot); height:var(--rail-dot); transform:translate(-50%,-50%);
  border-radius:50%; background:transparent; border:var(--rail-ring) solid var(--muted);
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rail a:hover::before, .rail a:focus-visible::before{ border-color:var(--accent); }
.rail a[aria-current="true"]::before, .rail a.active::before{
  background:var(--accent) !important; border-color:var(--accent) !important;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 32%, transparent);
}
@media (max-width:1280px), (pointer:coarse){ .rail{ display:none !important; } }

/* Animations */
.fade-in{ opacity:1; transform:none; }
.has-io .fade-in{ opacity:0; transform:translateY(16px); transition:opacity 600ms ease-out, transform 600ms ease-out; }
.has-io .fade-in.appear{ opacity:1; transform:translateY(0); }

/* ===========================
   CAROUSEL – base
=========================== */
.carousel{ position:relative; margin-top:8px; }
.carousel-viewport{
  position:relative; z-index:1; overflow-x:auto; scroll-snap-type:x mandatory;
  display:grid; grid-auto-flow:column; grid-auto-columns:100%;
  gap:12px; border:1px solid var(--line); border-radius:16px;
  background:color-mix(in oklab, var(--surface) 88%, black 12%); padding:12px;
}
.slide{ scroll-snap-align:start; }
.slide img, .slide .mock-img{
  display:block; width:100%; height:auto;
  border-radius:16px; border:1px solid #6A443E; box-shadow:0 8px 22px rgba(0,0,0,.32);
}

/* Carousel buttons */
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:color-mix(in oklab, var(--surface) 85%, black 15%);
  color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.28); z-index:4;
}
.car-prev{ left:-8px; } .car-next{ right:-8px; }
.car-btn:disabled{ opacity:.45; cursor:not-allowed; }

/* Dots */
.dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.dots button{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--muted); background:transparent;
}
.dots button[aria-current="true"]{ background:var(--accent); border-color:var(--accent); }

/* Phone mock */
.phone-mock{
  --bezel:12px;
  width:clamp(220px,26vw,320px); aspect-ratio:9/19.5;
  border-radius:28px; border:1px solid #6A443E;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2)), #111;
  box-shadow:0 8px 22px rgba(0,0,0,.35); padding:var(--bezel); position:relative; overflow:hidden;
}
.phone-mock::before{
  content:""; position:absolute; top:8px; left:50%; width:8px; height:8px; transform:translateX(-50%);
  border-radius:50%; background:#000; box-shadow:0 0 0 2px rgba(255,255,255,.12);
}
.phone-mock > img{
  display:block; width:100%; height:100%; object-fit:cover;
  border-radius:calc(26px - var(--bezel) + 2px); border:1px solid rgba(0,0,0,.35);
}

/* Process card base */
.process-step{ display:grid; align-items:start; gap:clamp(12px,1.6vw,18px); padding:clamp(16px,2vw,22px); }
@media (min-width:900px){ .process-step{ grid-template-columns:minmax(300px,42%) 1fr; } }

/* Footer */
footer{
  border-top:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  padding:22px 0; text-align:center; color:var(--muted);
}
footer p{ margin:.35rem 0; }
footer a{ color:var(--muted); }

/* Hidden dev reset button */
#resetLang{ display:none; margin-top:1rem; background:#3a332e; color:#fff; border:none; padding:.5rem 1rem; border-radius:10px; cursor:pointer; }
#resetLang:hover{ background:#4a413b; }

/* Mobile tweaks */
@media (max-width:600px){
  .intro, .project{ margin:16px 12px; padding:14px; min-height:92svh; }
}

/* Keep hidden truly hidden */
[hidden]{ display:none !important; }

/* =========================================
   SKYBOUND PROCESS – full width & timeline
========================================= */
#proj-rocket-no.project,
#proj-rocket-en.project{
  display:block; width:100%; max-width:none; padding-left:var(--gutter); padding-right:var(--gutter);
}
#proj-rocket-no.project > *, #proj-rocket-en.project > *{ grid-column:1 / -1 !important; }

/* Timeline skin (dark base, overstyres i lys tema) */
#proj-rocket-no .process.process--timeline,
#proj-rocket-en .process.process--timeline{
  counter-reset: sb-step; display:grid; gap:clamp(12px,1.6vw,18px);
}
#proj-rocket-no .process.process--timeline .process-step,
#proj-rocket-en .process.process--timeline .process-step{
  position:relative;
  background:color-mix(in oklab, var(--surface) 58%, black 42%);
  border:1px solid color-mix(in oklab, var(--line) 80%, black 20%);
  border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:clamp(16px,2vw,22px);
}
#proj-rocket-no .process.process--timeline .process-step::after,
#proj-rocket-en .process.process--timeline .process-step::after{
  content:""; position:absolute; left:-20px; top:0; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 80%, black 20%), color-mix(in oklab, var(--accent) 20%, transparent));
}
#proj-rocket-no .process.process--timeline .process-step::before,
#proj-rocket-en .process.process--timeline .process-step::before{
  counter-increment: sb-step; content: counter(sb-step);
  position:absolute; left:-34px; top:14px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; background:var(--accent); color:var(--accent-contrast);
  font-weight:800; font-size:.9rem; letter-spacing:.02em; box-shadow:0 6px 16px rgba(0,0,0,.3);
}
#proj-rocket-no .process.process--timeline .step-copy h3,
#proj-rocket-en .process.process--timeline .step-copy h3{
  margin-top:0; display:flex; align-items:baseline; gap:8px;
}
#proj-rocket-no .process.process--timeline .step-copy h3::after,
#proj-rocket-en .process.process--timeline .step-copy h3::after{
  content:""; flex:1; height:1px; background:var(--line); opacity:.45;
}
#proj-rocket-no .process.process--timeline .step-copy p > strong,
#proj-rocket-en .process.process--timeline .step-copy p > strong{
  display:inline-block; background:color-mix(in oklab, var(--accent) 22%, black 78%);
  color:var(--text);
  border:1px solid color-mix(in oklab, var(--accent) 35%, black 65%);
  padding:.05rem .45rem; margin-right:.35rem; border-radius:6px; font-weight:700; letter-spacing:.01em;
}
#proj-rocket-no .process.process--timeline figcaption,
#proj-rocket-en .process.process--timeline figcaption{
  font-size:.9rem; opacity:.9; margin-top:6px;
}

/* Two-column logic + fallback */
@supports selector(:has(*)){
  @media (min-width:980px){
    #proj-rocket-no .process.process--timeline .process-step:has(.step-media),
    #proj-rocket-en .process.process--timeline .process-step:has(.step-media){
      display:grid !important;
      grid-template-columns: 1fr var(--media-w) !important;
      column-gap: clamp(14px, 2vw, 28px);
      align-items:start;
    }
    #proj-rocket-no .process.process--timeline .process-step:has(.step-media) .step-copy,
    #proj-rocket-en .process.process--timeline .process-step:has(.step-media) .step-copy{
      grid-column:1 !important; grid-row:1 !important;
    }
    #proj-rocket-no .process.process--timeline .process-step:has(.step-media) .step-media,
    #proj-rocket-en .process.process--timeline .process-step:has(.step-media) .step-media{
      grid-column:2 !important; grid-row:1 !important; justify-self:start !important;
      width:var(--media-w); max-width:100%;
    }
    #proj-rocket-no .process.process--timeline .process-step:not(:has(.step-media)),
    #proj-rocket-en .process.process--timeline .process-step:not(:has(.step-media)){
      display:block !important;
    }
  }
}
@media (min-width:980px){
  #proj-rocket-no .process .process-step.has-media,
  #proj-rocket-en .process .process-step.has-media{
    display:grid !important;
    grid-template-columns: 1fr var(--media-w) !important;
    column-gap:clamp(14px,2vw,28px); align-items:start;
  }
  #proj-rocket-no .process .process-step.has-media .step-copy,
  #proj-rocket-en .process .process-step.has-media .step-copy{
    grid-column:1 !important; grid-row:1 !important;
  }
  #proj-rocket-no .process .process-step.has-media .step-media,
  #proj-rocket-en .process .process-step.has-media .step-media{
    grid-column:2 !important; grid-row:1 !important; justify-self:start !important;
    width:var(--media-w); max-width:100%;
  }
  #proj-rocket-no .process .process-step.no-media,
  #proj-rocket-en .process .process-step.no-media{
    display:block !important;
  }
}
#proj-rocket-no .process .step-media,
#proj-rocket-en .process .step-media{ justify-self:start; }
#proj-rocket-no .process .step-media > img,
#proj-rocket-no .process .step-media > figure > img,
#proj-rocket-en .process .step-media > img,
#proj-rocket-en .process .step-media > figure > img{
  display:block; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; object-fit:contain;
}
#proj-rocket-no .process .step-media .carousel,
#proj-rocket-en .process .step-media .carousel{
  width:100% !important; max-width:100% !important; margin:0 !important;
}
#figma-v1-no .step-media .carousel,
#figma-v1-en .step-media .carousel{ max-width:100%; }
#figma-v1-no, #figma-v1-en{ --media-w: clamp(280px, 28vw, 380px); }

/* Rocket tweaks */
#proj-rocket-no.project, #proj-rocket-en.project{ min-height:auto; }
@media (min-width:980px){
  #proj-rocket-no .process .step-media,
  #proj-rocket-en .process .step-media{ max-height:78vh; overflow:hidden; }
  #proj-rocket-no .process .step-media img,
  #proj-rocket-en .process .step-media img{ max-height:78vh; height:auto; }
}
#proj-rocket-no .process .step-media figcaption,
#proj-rocket-en .process .step-media figcaption{ margin-top:6px; line-height:1.35; opacity:.9; }

/* Phone mock – justeringer */
#proj-rocket-no .phone-mock > img,
#proj-rocket-en .phone-mock > img{ object-fit: contain !important; background:#000; }
@media (min-width:980px){
  #proj-rocket-no .process .step-media,
  #proj-rocket-en .process .step-media{ max-height:none !important; overflow:visible !important; }
}
.phone-carousel .carousel-viewport{ overflow:visible; }
#proj-rocket-no .phone-mock, #proj-rocket-en .phone-mock{ --bezel:6px; }
@media (min-width:1100px){
  #proj-rocket-no .phone-mock, #proj-rocket-en .phone-mock{ --bezel:8px; }
}
#proj-rocket-no .phone-mock > img,
#proj-rocket-en .phone-mock > img{
  border:0 !important; border-radius:calc(26px - var(--bezel)) !important; background:#000;
}
@media (min-width:980px){ :root{ --media-w: clamp(320px, 34vw, 480px); } }
#proj-rocket-no .phone-mock, #proj-rocket-en .phone-mock{
  aspect-ratio:auto !important; width:100%; padding:8px;
}
#proj-rocket-no .phone-mock > img,
#proj-rocket-en .phone-mock > img{
  width:100% !important; height:auto !important; object-fit:contain !important;
  border:0 !important; border-radius:calc(26px - 8px); background:#000;
}
:root{ --media-w: clamp(320px, 34vw, 480px); }
@media (min-width:980px){
  #proj-rocket-no .process .process-step.has-media,
  #proj-rocket-en .process .process-step.has-media{
    display:grid !important; grid-template-columns:1fr var(--media-w) !important;
    column-gap:clamp(14px, 2vw, 28px); align-items:start;
  }
  #proj-rocket-no .process .process-step .step-copy,
  #proj-rocket-en .process .process-step .step-copy{ grid-column:1 !important; grid-row:1 !important; }
  #proj-rocket-no .process .process-step .step-media,
  #proj-rocket-en .process .process-step .step-media{
    grid-column:2 !important; grid-row:1 !important; justify-self:start !important;
    width:var(--media-w) !important; max-width:100% !important;
  }
  #proj-rocket-no .process .step-media .carousel,
  #proj-rocket-en .process .step-media .carousel{
    width:var(--media-w) !important; max-width:100% !important; margin:0 !important;
  }
}
#proj-rocket-no .process .step-media .mock,
#proj-rocket-en .process .step-media .mock{ margin:0 !important; }

/* Tall & narrow device */
#proj-rocket-no .phone-carousel .phone-mock,
#proj-rocket-en .phone-carousel .phone-mock{
  aspect-ratio:9 / 19.5 !important; width:clamp(190px, 20vw, 250px) !important; padding:12px !important;
}
#proj-rocket-no .phone-carousel .phone-mock > img,
#proj-rocket-en .phone-carousel .phone-mock > img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  border-radius:calc(26px - 12px + 2px) !important;
}
#proj-rocket-no .phone-carousel .carousel,
#proj-rocket-en .phone-carousel .carousel{ max-width:none !important; margin:0 !important; }
#proj-rocket-no .phone-carousel .carousel-viewport,
#proj-rocket-en .phone-carousel .carousel-viewport{
  display:block !important; width:fit-content !important; margin-inline:0 !important; padding:8px !important;
}

/* Android Compact ratio */
:root{
  --android-compact-ratio: 412 / 892;
  --phone-fit: cover;
}
#proj-rocket-no .phone-carousel .phone-mock,
#proj-rocket-en .phone-carousel .phone-mock{
  aspect-ratio:var(--android-compact-ratio) !important;
  width:clamp(190px, 20vw, 250px) !important; padding:12px !important;
}
#proj-rocket-no .phone-carousel .phone-mock > img,
#proj-rocket-en .phone-carousel .phone-mock > img{
  width:100% !important; height:100% !important; object-fit:var(--phone-fit) !important;
  border-radius:calc(26px - 12px + 2px) !important;
}
#proj-rocket-no .phone-carousel .carousel,
#proj-rocket-en .phone-carousel .carousel{ margin:0 !important; }
#proj-rocket-no .phone-carousel .carousel-viewport,
#proj-rocket-en .phone-carousel .carousel-viewport{
  display:block !important; width:fit-content !important; margin-inline:0 !important; padding:8px !important;
}

/* ================================
   MEDITASJONSBALL – (dark base før lys tema)
================================ */
#proj-medball-no.project,
#proj-medball-en.project{
  display:block; width:100%; max-width:none;
  padding-left:var(--gutter); padding-right:var(--gutter); min-height:auto;
}
#proj-medball-no.project > *, #proj-medball-en.project > *{ grid-column:1 / -1 !important; }
#proj-medball-no .process.process--timeline,
#proj-medball-en .process.process--timeline{ counter-reset: mb-step; display:grid; gap:clamp(12px,1.6vw,18px); }
#proj-medball-no .process.process--timeline .process-step,
#proj-medball-en .process.process--timeline .process-step{
  position:relative;
  background:color-mix(in oklab, var(--surface) 58%, black 42%);
  border:1px solid color-mix(in oklab, var(--line) 80%, black 20%);
  border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:clamp(16px,2vw,22px);
}
#proj-medball-no .process.process--timeline .process-step::after,
#proj-medball-en .process.process--timeline .process-step::after{
  content:""; position:absolute; left:-20px; top:0; bottom:0; width:2px; border-radius:2px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 80%, black 20%), color-mix(in oklab, var(--accent) 20%, transparent));
}
#proj-medball-no .process.process--timeline .process-step::before,
#proj-medball-en .process.process--timeline .process-step::before{
  counter-increment: mb-step; content:counter(mb-step);
  position:absolute; left:-34px; top:14px; width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center; background:var(--accent); color:var(--accent-contrast);
  font-weight:800; font-size:.9rem; letter-spacing:.02em; box-shadow:0 6px 16px rgba(0,0,0,.3);
}
#proj-medball-no .process.process--timeline .step-copy h3,
#proj-medball-en .process.process--timeline .step-copy h3{
  margin-top:0; display:flex; align-items:baseline; gap:8px;
}
#proj-medball-no .process.process--timeline .step-copy h3::after,
#proj-medball-en .process.process--timeline .step-copy h3::after{
  content:""; flex:1; height:1px; background:var(--line); opacity:.45;
}
#proj-medball-no .process.process--timeline .step-copy p > strong,
#proj-medball-en .process.process--timeline .step-copy p > strong{
  display:inline-block; background:color-mix(in oklab, var(--accent) 22%, black 78%);
  color:var(--text); border:1px solid color-mix(in oklab, var(--accent) 35%, black 65%);
  padding:.05rem .45rem; margin-right:.35rem; border-radius:6px; font-weight:700;
}
#proj-medball-no .process.process--timeline figcaption,
#proj-medball-en .process.process--timeline figcaption{ font-size:.9rem; opacity:.9; margin-top:6px; line-height:1.35; }

/* Two-column + fallback (samme som rocket) */
@supports selector(:has(*)){
  @media (min-width:980px){
    #proj-medball-no .process.process--timeline .process-step:has(.step-media),
    #proj-medball-en .process.process--timeline .process-step:has(.step-media){
      display:grid !important; grid-template-columns:1fr var(--media-w) !important;
      column-gap:clamp(14px, 2vw, 28px); align-items:start;
    }
    #proj-medball-no .process.process--timeline .process-step:has(.step-media) .step-copy,
    #proj-medball-en .process.process--timeline .process-step:has(.step-media) .step-copy{
      grid-column:1 !important; grid-row:1 !important;
    }
    #proj-medball-no .process.process--timeline .process-step:has(.step-media) .step-media,
    #proj-medball-en .process.process--timeline .process-step:has(.step-media) .step-media{
      grid-column:2 !important; grid-row:1 !important; justify-self:start !important;
      width:var(--media-w); max-width:100%;
    }
    #proj-medball-no .process.process--timeline .process-step:not(:has(.step-media)),
    #proj-medball-en .process.process--timeline .process-step:not(:has(.step-media)){
      display:block !important;
    }
  }
}
@media (min-width:980px){
  #proj-medball-no .process .process-step.has-media,
  #proj-medball-en .process .process-step.has-media{
    display:grid !important; grid-template-columns:1fr var(--media-w) !important;
    column-gap:clamp(14px,2vw,28px); align-items:start;
  }
  #proj-medball-no .process .process-step.has-media .step-copy,
  #proj-medball-en .process .process-step.has-media .step-copy{
    grid-column:1 !important; grid-row:1 !important;
  }
  #proj-medball-no .process .process-step.has-media .step-media,
  #proj-medball-en .process .process-step.has-media .step-media{
    grid-column:2 !important; grid-row:1 !important; justify-self:start !important;
    width:var(--media-w) !important; max-width:100% !important;
  }
  #proj-medball-no .process .process-step.no-media,
  #proj-medball-en .process .process-step.no-media{ display:block !important; }
}
#proj-medball-no .process .step-media,
#proj-medball-en .process .step-media{ justify-self:start; }
#proj-medball-no .process .step-media > img,
#proj-medball-no .process .step-media > figure > img,
#proj-medball-en .process .step-media > img,
#proj-medball-en .process .step-media > figure > img{
  display:block; width:100% !important; max-width:100% !important; height:auto !important;
  object-fit:contain; margin:0 !important; border-radius:16px; border:1px solid #6A443E;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
@media (min-width:980px){
  #proj-medball-no .process .step-media,
  #proj-medball-en .process .step-media{ max-height:78vh; overflow:hidden; }
  #proj-medball-no .process .step-media img,
  #proj-medball-en .process .step-media img{ max-height:78vh; height:auto; }
}

/* =========================================
   LIGHT CONTENT THEME + BROWN FRAME
========================================= */

/* Lys “paper”-palett */
:root{
  --paper:   #FBF7F3;
  --paper-2: #F6EFE8;
  --ink:     #1A1411;
  --ink-muted:#5B4A42;
  --line-lite: color-mix(in oklab, var(--ink) 20%, white 80%);
  --shadow-lite: 0 8px 20px rgba(0,0,0,.10);
  --frame-gap: clamp(14px, 2.4vw, 26px);
  --card-radius: 18px;
}

/* Deaktivér mørk undertone */
#content-no .project:nth-of-type(even),
#content-en .project:nth-of-type(even){ background:transparent !important; }

/* Prosjektseksjon som “lyst kort” med brun marg (via pseudo-element) */
.project{
  background:transparent !important;
  position:relative;
  padding:var(--frame-gap);
  color:var(--ink);
}
.project::before{
  content:"";
  position:absolute;
  inset:var(--frame-gap);
  background:var(--paper);
  border:1px solid var(--line-lite);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-lite);
  z-index:0;
}
.project > *{ position:relative; z-index:1; }
.project p, .project li, .project .kicker, .project figcaption{ color:var(--ink-muted); }

/* Timeline-steg: fjern indre “kort” for ren, sammenhengende bakgrunn */
#proj-rocket-no .process.process--timeline .process-step,
#proj-rocket-en .process.process--timeline .process-step,
#proj-medball-no .process.process--timeline .process-step,
#proj-medball-en .process.process--timeline .process-step{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:clamp(10px,1.6vw,14px) !important;
}
#proj-rocket-no .process.process--timeline,
#proj-rocket-en .process.process--timeline,
#proj-medball-no .process.process--timeline,
#proj-medball-en .process.process--timeline{
  gap:clamp(16px, 2.2vw, 26px) !important;
}

/* Timeline-linje + nummerchips beholdes */
#proj-rocket-no .process.process--timeline .process-step::after,
#proj-rocket-en .process.process--timeline .process-step::after,
#proj-medball-no .process.process--timeline .process-step::after,
#proj-medball-en .process.process--timeline .process-step::after{
  left:-20px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 60%, transparent),
    color-mix(in oklab, var(--accent) 20%, transparent)) !important;
}
#proj-rocket-no .process.process--timeline .process-step::before,
#proj-rocket-en .process.process--timeline .process-step::before,
#proj-medball-no .process.process--timeline .process-step::before,
#proj-medball-en .process.process--timeline .process-step::before{
  background:var(--accent) !important;
  color:var(--accent-contrast) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
}

/* Tittellinje og chips på lys bakgrunn */
#proj-rocket-no .process.process--timeline .step-copy h3::after,
#proj-rocket-en .process.process--timeline .step-copy h3::after,
#proj-medball-no .process.process--timeline .step-copy h3::after,
#proj-medball-en .process.process--timeline .step-copy h3::after{
  background:var(--line-lite) !important; opacity:.6 !important;
}
#proj-rocket-no .process.process--timeline .step-copy p > strong,
#proj-rocket-en .process.process--timeline .step-copy p > strong,
#proj-medball-no .process.process--timeline .step-copy p > strong,
#proj-medball-en .process.process--timeline .step-copy p > strong{
  background:color-mix(in oklab, var(--accent) 12%, white 88%) !important;
  color:var(--ink) !important;
  border:1px solid color-mix(in oklab, var(--accent) 25%, white 75%) !important;
}
#proj-rocket-no .process.process--timeline figcaption,
#proj-rocket-en .process.process--timeline figcaption,
#proj-medball-no .process.process--timeline figcaption,
#proj-medball-en .process.process--timeline figcaption{
  color:var(--ink-muted) !important; opacity:.95 !important;
}

/* Media/karusell-kant i lys tema */
#proj-rocket-no .process .step-media > img,
#proj-rocket-en .process .step-media > img,
#proj-medball-no .process .step-media > img,
#proj-medball-en .process .step-media > img{
  border-color:var(--line-lite) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
}
#proj-rocket-no .process .step-media .carousel-viewport,
#proj-rocket-en .process .step-media .carousel-viewport,
#proj-medball-no .process .step-media .carousel-viewport,
#proj-medball-en .process .step-media .carousel-viewport{
  background:color-mix(in oklab, var(--paper-2) 85%, white 15%) !important;
  border-color:var(--line-lite) !important;
}

/* Lenker på lys kort */
.project a{ color:var(--accent); }
.project a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* Mock-rammer på lys bakgrunn */
.mock{ border-color:var(--line-lite) !important; }

/* Gi ekstra luft for fullbredde-seksjoner slik at margs-rammen vises */
#proj-rocket-no.project,
#proj-rocket-en.project,
#proj-medball-no.project,
#proj-medball-en.project{
  padding-left:calc(var(--gutter) + var(--frame-gap));
  padding-right:calc(var(--gutter) + var(--frame-gap));
}
@media (max-width:560px){ :root{ --frame-gap:10px; } }

/* =========================================
   FIX: Meditasjonsball – fjern dobbel hvit ramme
   (bruk kun global .project::before-kortet)
========================================= */
#proj-medball-no.project,
#proj-medball-en.project{
  background:transparent !important;   /* fjern indre ark */
  border:0 !important;
  box-shadow:none !important;
  color:var(--ink);                    /* tekst på det lyse kortet */
}
#proj-medball-no.project::before,
#proj-medball-en.project::before{
  background:var(--paper);
  border:1px solid var(--line-lite);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow-lite);
}
/* Sekundærtekst & bildekanter følger lys tema (arver reglene over) */

/* Ekstra vertikal padding inni prosjektkortet */
:root{
  --card-pad-y: clamp(18px, 2.6vw, 36px); /* juster etter smak */
}

/* behold brun marg på sidene, men gi mer luft topp/bunn */
.project{
  /* var: padding: var(--frame-gap);  */
  padding: var(--frame-gap);
  padding-block: calc(var(--frame-gap) + var(--card-pad-y));
}

/* Fullbredde-seksjoner beholder eksisterende side-padding/marg */
#proj-rocket-no.project,
#proj-rocket-en.project,
#proj-medball-no.project,
#proj-medball-en.project{
  padding-left: calc(var(--gutter) + var(--frame-gap));
  padding-right: calc(var(--gutter) + var(--frame-gap));
}

/* === Patch: hero crop + carousel arrows above frame === */

/* 1) Crop hero photo (adjust the 18% to taste) */
.hero-photo img{
  object-fit: cover;
  object-position: 50% 18%;  /* center horizontally, a bit higher vertically */
}

/* 2) Make sure slideshow arrows aren't clipped or behind the card frame */
.process .step-media{ overflow: visible !important; }  /* stop clipping in steps */
.carousel{ z-index: 2; }                               /* above project ::before */
.car-btn{ z-index: 5; }                                /* arrows above everything */

/* In case any viewport is clipping the buttons on specific carousels */
.carousel-viewport{ overflow: visible; }               /* safe default */

/* HERO – tighter crop + slightly higher focus */
.hero-photo{
  aspect-ratio: 3 / 4;               /* was 4/5 – tighter */
  max-width: 520px;                  /* keep your width cap */
  overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% 32%;          /* move crop upward a bit */
  transform: scale(1.5);            /* tiny zoom for tighter framing */
}

/* Echo – små typografiske detaljer */
.doc-meta{
  margin-top: 10px;
  font-size: .95rem;
  color: var(--ink-muted);
}
.doc-meta a{ color: var(--accent); text-decoration: none; }
.doc-meta a:hover{ text-decoration: underline; }

/* Hvis du senere vil ha bilder/video i echo-seksjonen, arver de allerede
   kant/skyggeregler fra lys-temaet, så ingen ekstra CSS trengs. */