:root{
    --red:#FF361B;        /* FCM BRIGHT RED (the single brand red) */
    --fcm-red:#FF361B;    /* alias -> bright red (deep red retired site-wide) */
    --black:#000000;      /* FCM BLACK */
    --badge-red:#FF361B;
    --ui:#FF361B;         /* intro/hero default ink */
    --pad-left:78px;
  }
  @font-face{
    font-family:"FCM Rialta";
    src:url("../assets/fonts/FCMRialta-Bold.woff2") format("woff2"),
        url("../assets/fonts/FCMRialta-Bold.woff") format("woff");
    font-weight:600 900;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"FCM Rialta";
    src:url("../assets/fonts/FCMRialta-Regular.woff2") format("woff2"),
        url("../assets/fonts/FCMRialta-Regular.woff") format("woff");
    font-weight:100 500;font-style:normal;font-display:swap;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:auto;background:var(--black);}
  body{
    font-family:"FCM Rialta","Helvetica Neue",Helvetica,Arial,sans-serif;
    background:var(--black);
    color:var(--black);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  /* ---------- Fixed UI: sticky nav (new design) ---------- */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;
    height:auto;
    width:100%;
    padding:15px;
    pointer-events:none;
    color:var(--ui);
    transition:color .3s ease;
  }
  .site-header .crest-link{
    display:block;width:100px;height:100px;flex:none;
    pointer-events:auto;cursor:pointer;
    color:inherit;text-decoration:none;
  }
  .site-header .crest{display:block;width:100%;height:100%;}
  .site-header .crest svg{width:100%;height:100%;display:block;}
  .site-header .crest svg path{fill:var(--ui);transition:fill .3s ease;}

  /* ---------- Dot nav (bottom-left rail, filled/outlined) ---------- */
  /* the dropdown trigger stays hidden unless mobile or short desktop enables it */
  .nav-trigger{display:none;}
  .dots{
    position:fixed;left:30px;bottom:34px;z-index:100;
    display:flex;flex-direction:column;
    pointer-events:auto;
  }
  .dot{
    position:relative;
    display:flex;align-items:center;
    gap:14px;
    width:max-content;
    padding:6px 0;
    border:0;
    background:transparent;
    pointer-events:auto;
    cursor:pointer;
    color:inherit;
    font:inherit;
    text-align:left;
    -webkit-tap-highlight-color:transparent;
  }
  .dot-bullet{
    width:9px;height:9px;border-radius:50%;flex:none;
    border:1.5px solid var(--ui);background:transparent;
    transition:background .3s cubic-bezier(.7,0,.2,1),
               transform .3s cubic-bezier(.7,0,.2,1),
               border-color .3s;
  }
  .dot:hover .dot-bullet{transform:scale(1.25);}
  .dot.active .dot-bullet{background:var(--ui);transform:scale(1.15);}
  .dot-name{
    white-space:nowrap;
    color:var(--ui);
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    opacity:0;transform:translateX(-6px);
    transition:opacity .3s, transform .3s, color .3s ease;
    pointer-events:none;
  }
  .dot:hover .dot-name,
  .dot.active .dot-name{opacity:1;transform:translateX(0);pointer-events:auto;}

  /* short desktop uses the same collapsed nav pattern as mobile */
  body.compact-nav .dots{
    position:fixed; left:auto; right:20px; bottom:auto;
    top:40px;
    transform:none;
    flex-direction:column; align-items:flex-end; gap:0;
    z-index:110;
  }
  body.compact-nav .nav-trigger{
    display:flex; align-items:center; gap:10px;
    background:transparent; border:0; padding:0 0 3px; margin:0;
    cursor:pointer; pointer-events:auto;
    color:var(--ui); font-family:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  body.compact-nav .nav-trigger-name{
    display:block;
    font-size:11px; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; text-align:right; white-space:nowrap;
  }
  body.compact-nav .nav-trigger-word{
    display:block; line-height:14px;
  }
  body.compact-nav .nav-trigger-dot{
    width:9px; height:9px; border-radius:50%; flex:none;
    background:var(--ui);
    transition:background .3s;
  }
  body.compact-nav .dots .dot{
    display:flex; flex-direction:row-reverse; align-items:center; gap:10px;
    justify-content:flex-end;
    height:0; margin:0; padding:0;
    opacity:0; transform:translateY(-6px);
    pointer-events:none;
    transition:height .32s cubic-bezier(.7,0,.2,1),
               opacity .32s ease, transform .32s cubic-bezier(.7,0,.2,1),
               margin .32s cubic-bezier(.7,0,.2,1),
               padding .32s cubic-bezier(.7,0,.2,1);
  }
  body.compact-nav.nav-open .dots .dot{
    height:16px; margin-top:0; padding:10px 0; opacity:1; transform:translateY(0);
    pointer-events:auto;
  }
  body.compact-nav.nav-open .dots .nav-trigger + .dot{
    height:0; margin-top:0; padding:0; opacity:0; transform:translateY(-6px);
    pointer-events:none; overflow:hidden;
  }
  body.compact-nav.nav-open .dots .dot:nth-child(2){ transition-delay:.02s; }
  body.compact-nav.nav-open .dots .dot:nth-child(3){ transition-delay:.04s; }
  body.compact-nav.nav-open .dots .dot:nth-child(4){ transition-delay:.06s; }
  body.compact-nav.nav-open .dots .dot:nth-child(5){ transition-delay:.08s; }
  body.compact-nav.nav-open .dots .dot:nth-child(6){ transition-delay:.10s; }
  body.compact-nav.nav-open .dots .dot:nth-child(7){ transition-delay:.12s; }
  body.compact-nav.nav-open .dots .dot:nth-child(8){ transition-delay:.14s; }
  body.compact-nav .dots .dot .dot-name{
    position:static; margin:0; opacity:1; transform:none;
    pointer-events:auto; font-size:11px; text-align:right;
  }
  body.compact-nav .dots .dot .dot-bullet{
    width:9px; height:9px; flex:none;
  }
  body.compact-nav .dots .dot.active .dot-bullet{ transform:none; background:var(--ui); }
  body.compact-nav.nav-open .nav-trigger-dot{
    background:transparent; box-shadow:inset 0 0 0 1.5px var(--ui);
  }
  body.compact-nav.nav-open.on-intro-section .nav-trigger-dot{
    background:var(--ui); box-shadow:none;
  }

  /* ---------- Chapters ---------- */
  .chapter{
    position:relative;
    height:var(--chapter-h, 800vh);
  }
  /* VÆRDIER is a static section (no gallery to fill the scroll), so it uses a
     shorter wrapper: its curtain into the next chapter then spans the same short
     window as every other transition instead of stretching over the full span.
     Height = hold(90) + cut(180) + overlap(100) = 370vh (desktop). */
  .chapter.values{ height:var(--values-chapter-h, 370vh); }
  .chapter, .outro{margin-top:-100vh;}

  .stage{
    position:sticky;top:0;height:100vh;
    overflow:hidden;
    background:var(--red);
  }

  /* gallery track: video frame + images */
  .track{
    position:absolute;inset:0;
    display:flex;align-items:center;
    width:max-content;min-width:100%;
    will-change:transform;
  }
  .frame{
    flex:none;width:100vw;height:100vh;
    position:relative;
    background:var(--black);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;
    will-change:width,height;
    overflow:hidden;
  }
  .frame .lottie{
    position:absolute;inset:0;opacity:.9;
    contain:strict;                 /* isolated layout/paint - no scroll glitches */
    transform:translateZ(0);        /* own compositor layer */
  }
  .frame .lottie canvas{width:100%!important;height:100%!important;}
  .frame .badge{position:relative;height:62%;}
  .frame .badge svg{height:100%;width:auto;display:block;}
  .frame .badge svg path{fill:var(--badge-red);}   /* always the same colour */
  .g-img{
    flex:none;margin-left:15px;position:relative;
    background-size:contain;background-position:center;background-repeat:no-repeat;
  }
  /* alt-chapter gallery items size from CSS vars (desktop default) */
  .g-alt{height:var(--h);width:auto;aspect-ratio:var(--ar, 1);}
  /* video gallery tiles fill their frame like a cover image */
  .g-vid{position:relative;overflow:hidden;}
  .g-video{
    position:absolute;top:-1px;left:-1px;
    width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block;
    transform:translateZ(0);            /* Safari: own layer, paints continuously */
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* big intro headline */
  .headline-mask{
    position:absolute;left:30px;bottom:30px;right:30px;  /* 30px gutter */
    overflow:hidden;pointer-events:none;
  }
  .headline{
    display:inline-block;
    font-size:250px;               /* fixed title size on desktop */
    font-weight:800;letter-spacing:-.06em;line-height:.82;
    color:var(--black);
    transform:translateY(0);
    white-space:nowrap;
  }

  /* small description block */
  .desc{
    position:absolute;left:31px;bottom:30px;
    width:300px;opacity:0;visibility:hidden;
    color:var(--black);
  }
  .desc h3{
    font-size:11px;font-weight:800;letter-spacing:.05em;
    margin-bottom:16px;
  }
  .desc p{
    font-size:11px;font-weight:600;line-height:1.55;
  }

  /* ---------- Chapter 1 alt layout (LOGO) ----------
     Off-white split intro: "LOGO" title + copy stacked left and
     vertically centred; video cropped on the right. Scrolls to
     fullscreen, then shrinks into a horizontal gallery. */
  .alt-copy{
    position:absolute;left:30px;top:50%;z-index:5;
    transform:translateY(-50%);
    width:551px;max-width:calc(50vw - 60px);
    display:flex;flex-direction:column;gap:32px;align-items:flex-start;
    pointer-events:none;
  }
  .alt-title{
    font-size:26px;line-height:.9;letter-spacing:-.05em;
    font-weight:700;text-transform:uppercase;
  }
  .chapter.alt .desc{
    position:static;opacity:1;visibility:visible;     /* visible from the start */
    width:100%;transform:none;
    color:inherit;                                    /* take the chapter ink from .alt-copy */
  }
  .chapter.alt .desc p{
    font-size:26px;line-height:1.25;letter-spacing:-.01em;font-weight:700;
  }
  .chapter.alt .frame video{
    position:absolute;top:-1px;left:-1px;
    width:calc(100% + 2px);height:calc(100% + 2px);
    object-fit:cover;z-index:1;
    /* Safari fix: the parent .frame is size-animated (will-change:width,height);
       without its own compositor layer the video can fail to repaint until a
       reflow (e.g. opening devtools) forces it. A 3D transform + backface hint
       promotes it to an independent layer so it paints continuously. */
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  /* placeholder fill behind the video until the real file loads */
  .frame-ph{
    position:absolute;inset:0;z-index:0;
    background:#FCF9F5;
    opacity:.9;
  }

  /* ---------- Splash: first screen, centred FCM badge on black ---------- */
  .splash{
    position:fixed;inset:0;z-index:120;
    background:var(--black);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .55s ease;
  }
  .splash.hide{opacity:0;pointer-events:none;}
  .splash.fade-out{opacity:0;pointer-events:none;}   /* intro -> hero cross-fade */
  .splash.done{display:none;}
  /* Fail-safe: on mobile, auto-fade the splash after a few seconds via pure CSS
     (independent of JS via a media query, not the JS-added class), so even if
     the JS never runs the page still becomes visible — no permanent blank. */
  @keyframes mobileSplashFailsafe{ to{ opacity:0; visibility:hidden; } }
  @media (max-width:760px){
    .splash{ animation:mobileSplashFailsafe .8s ease 3.5s forwards; }
  }
  /* first-screen logo: one-third of the page width */
  .splash-badge{
    width:33.333vw;
    /* subtle fade-in once the page is ready */
    opacity:0;
    transform:scale(.985);
    transition:opacity 1.2s ease, transform 1.2s ease;
  }
  body.splash-in .splash-badge{opacity:1;transform:scale(1);}
  .splash-badge svg{width:100%;height:auto;display:block;}
  .splash-badge svg path{fill:var(--red);}

  /* ---------- Intro: empty pre-hero overlay (text slides removed) ----------
     Kept only as a black cover during the splash hand-off; hidden once done. */
  .intro{
    position:fixed;inset:0;z-index:90;
    background:var(--black);
    pointer-events:none;
  }
  .intro.done{display:none;}

  /* ---------- Hero (FRA HEDEN + standfirst) ----------
     Black bg, bright-red ink. Opening screen and first section in the scroll
     flow: the headline crossfades into the standfirst over the first ~30vh
     (plain scroll, opacity + vertical only), then a 280vh shard cut into ch.1. */
  .hero{
    position:relative;
    height:var(--hero-h, 620vh);
    background:var(--black);
  }
  .hero .stage{background:var(--black);}
  /* Two scrolling screens above the sticky cut stage (both black -> seamless).
     Screen 1 centres FRA HEDEN; screen 2 centres the description one viewport
     below. They scroll with the page; opacity is driven by JS. */
  .hero-intro{
    position:absolute;top:0;left:0;width:100%;
    height:200vh;z-index:45;   /* above the hero panel (44) + chapter 1 beneath it (30) during the cut */
    pointer-events:none;
  }
  .hero-screen{
    position:relative;height:100vh;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-title{
    margin:0;
    width:min(1480px,91.66vw);            /* larger: ~22 of 24 cols */
    font-size:clamp(72px,17vw,260px);     /* bigger FRA HEDEN */
    font-weight:700;line-height:.9;letter-spacing:-.06em;
    text-transform:uppercase;text-align:center;
    color:var(--red);
    white-space:nowrap;
    will-change:opacity;
  }
  .hero-stand{
    margin:0;
    width:min(914px,83.33vw);             /* 20 of 24 cols */
    font-size:clamp(18px,2.5vw,36px);
    font-weight:700;line-height:1.2;letter-spacing:-.02em;
    text-transform:uppercase;text-align:center;
    color:var(--red);
  }
  /* scroll prompt: label + pulsing vertical line */
  .hero-prompt{
    position:absolute;left:50%;bottom:0;
    transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:18px;
    color:var(--red);
  }
  .hero-hint{
    font-size:11px;font-weight:700;letter-spacing:-.01em;
    text-transform:uppercase;white-space:nowrap;
  }
  .hero-line{
    width:1px;height:35px;background:var(--red);
    transform-origin:top center;
  }
  /* intro: the fixed top elements NEVER show on the intro slide;
     dots appear once we reach the hero. Nav slides down on reveal. */
  .site-header{transition:opacity .8s ease, transform .8s cubic-bezier(.7,0,.2,1), color .3s ease;}
  .dots{transition:opacity .8s;}
  body.on-intro .site-header{opacity:0;transform:translateY(-100%);}
  body.intro-clean .dots{opacity:0;pointer-events:none;}
  body.intro-clean .dots .dot{pointer-events:none;}
  /* dot nav fades in on scroll: hidden while in the hero intro region */
  body.dots-hidden .dots{opacity:0;pointer-events:none;}
  body.dots-hidden .dots .dot{pointer-events:none;}

  /* ---------- Outro ---------- */
  .outro{
    position:relative;height:200vh;z-index:60;
  }
  .outro .stage{
    /* static red-duotone celebration photo behind the outro */
    background:#1a0604 url("../assets/FCM_Cup.webp") center/cover no-repeat;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:0;padding:0;
  }
  .outro .stage::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(120% 95% at 50% 48%, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 58%, rgba(0,0,0,.30) 100%),
      linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,.38) 100%);
  }
  /* the headline is centred in the TRUE middle of the viewport (taken out of
     the grid flow and absolutely centred) so it sits dead-centre. */
  .outro-inner{
    position:relative;z-index:2;
    width:min(1100px,90vw);height:100vh;
    display:grid;grid-template-rows:auto 1fr auto;
    align-items:center;justify-items:center;
    padding:8vh 30px;box-sizing:border-box;
  }
  .outro-title{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:min(1100px,90vw);
    color:#FCF9F5;text-align:center;
    font-weight:700;line-height:.9;text-transform:uppercase;
    font-size:clamp(40px,6.7vw,96px);letter-spacing:-.05em;margin:0;
  }
  @media (max-width:760px){
    .outro-inner{padding:6vh 24px;}
    .outro-title{font-size:clamp(28px,9vw,48px);letter-spacing:-.05em;}
  }

  /* ---------- VÆRDIER chapter: 3 columns on black (Figma 370:627) ----------
     Three value columns side by side; all copy in bright red on black, shown
     together. On mobile the columns stack vertically and the block scrolls up
     through the chapter so all three can be read. */
  .chapter.values{ background:#FCF9F5; }
  .chapter.values .stage{overflow:hidden;background:#FCF9F5;}
  /* full-bleed colour surface behind the value cards. On desktop it's inert
     (the per-card colours show); on mobile it cross-fades between the three
     brand colours as you scroll, driven by JS. */
  .values-bg{
    position:absolute;inset:0;z-index:0;
    background:#FF361B;
    pointer-events:none;
  }
  .values-deck{ z-index:1; }
  /* VÆRDIER deck (Figma 389:1610): three full-height cards. The open card fills
     EXACTLY 50vw so its edge aligns with the next section's 50/50 split (video
     parked on the right half); the other two sit as 25vw strips. Hover
     (desktop) / tap brings a card to the open position via --ox. */
  .values-deck{
    position:absolute;inset:0;overflow:hidden;
  }
  .v-card{
    position:absolute;top:0;height:100%;
    width:calc(50vw + 1px);             /* half screen, +1px anti-seam */
    overflow:hidden;color:#000;cursor:pointer;
    --ox:0px;
    transform:translateX(var(--ox));
    transition:transform .85s cubic-bezier(.7,0,.2,1);
    will-change:transform;
  }
  .v-card.red  {background:#FF361B;}   /* Secondary/BRIGHT RED  */
  .v-card.white{background:#FCF9F5;}   /* Primary/OFF-WHITE     */
  .v-card.grey {background:#DBD0C4;}   /* Secondary/WARM GREY   */

  /* horizontal position per open-state (the three Figma drawer states) */
  .values-deck[data-open="0"] .v-card:nth-child(1){--ox:0vw;}
  .values-deck[data-open="0"] .v-card:nth-child(2){--ox:50vw;}
  .values-deck[data-open="0"] .v-card:nth-child(3){--ox:75vw;}
  .values-deck[data-open="1"] .v-card:nth-child(1){--ox:0vw;}
  .values-deck[data-open="1"] .v-card:nth-child(2){--ox:25vw;}
  .values-deck[data-open="1"] .v-card:nth-child(3){--ox:75vw;}
  .values-deck[data-open="2"] .v-card:nth-child(1){--ox:0vw;}
  .values-deck[data-open="2"] .v-card:nth-child(2){--ox:25vw;}
  .values-deck[data-open="2"] .v-card:nth-child(3){--ox:50vw;}

  .v-card-title{
    /* Figma: 120px, line-height .85, tracking -6px, x=20.25 y=215 on 900h card.
       Use max(215px, 23.9%) so on shorter viewports the headline still clears
       the fixed header crest (which occupies the top ~150px) instead of sitting
       under it. */
    position:absolute;left:clamp(16px,1.4vw,20px);top:max(200px,23.9%);
    font-family:"FCM Rialta","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:clamp(72px,8.33vw,120px);
    font-weight:800;line-height:.85;letter-spacing:-.05em;
    text-transform:uppercase;white-space:nowrap;color:#000;
  }
  .v-card-body{
    /* Figma: 18px Rialta Bold, line-height 1.25, width 669, below the title.
       Positioned to clear the two-line headline; on the Figma-tall viewport this
       resolves to the design's mid-card placement. */
    position:absolute;left:clamp(20px,2.1vw,30px);
    top:max(430px, calc(50% + 7px));
    width:calc(50vw - 60px);max-width:669px;
    font-family:"FCM Rialta","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:clamp(14px,1.25vw,18px);
    font-weight:700;line-height:1.25;letter-spacing:-.02em;color:#000;
  }

  @media (max-width:1200px){
    .alt-title{font-size:20px;}
    .chapter.alt .desc p{font-size:20px;}
  }


  @media (max-width:760px){
    /* VÆRDIER mobile (Figma 393:2631): three cards stacked vertically, each with
       its full text visible (auto height), 60px top / 200px bottom padding,
       20px sides, 30px between title and body. Each card fills ONE screen
       height with its text centred vertically. The card colours are NOT painted
       per-card (that would show hard seams between them); instead the whole
       section background cross-fades between the three colours as you scroll,
       so it reads as one continuous surface shifting colour. */
    .chapter.values .stage{overflow:visible;position:relative;height:auto;min-height:calc(var(--vh,1vh) * 100);}
    /* the colour surface spans the whole (relative) stage behind the cards, so
       it reads as one continuous background. JS snaps --values-bg per card; a
       quick transition does the fade. No sticky / negative-margin tricks. */
    .chapter.values .values-bg{
      position:absolute; inset:0; z-index:0;
      background:var(--values-bg, #FF361B);
      transition:background-color .25s ease;   /* quick snap between card colours */
    }
    .values-deck{
      position:relative;inset:auto;overflow:visible;
      display:flex;flex-direction:column;width:100%;
      background:transparent;
    }
    .v-card{
      position:relative;top:auto;width:100%;
      height:calc(var(--vh,1vh) * 100);       /* shorter per-card travel on phones */
      transform:none;cursor:default;
      padding:0 20px 30px;
      display:flex;flex-direction:column;justify-content:end;gap:30px;
      background:transparent !important;      /* colour comes from the bg layer */
    }
    .v-card:last-of-type{padding-bottom:100px;}
  
    .v-card-title{
      position:static;margin:0;
      font-size:36px;line-height:.85;letter-spacing:-1.8px;
      white-space:nowrap;
    }
    .v-card-body{
      position:static;left:auto;top:auto;width:100%;max-width:none;
      font-size:18px;line-height:1.25;letter-spacing:-.36px;
    }

    .headline{font-size:24vw;}

    /* header: crest only, left-aligned, 7px from the edge to accommodate svg size */
    .site-header{padding:7px;}
    .site-header .crest-link{width:90px;height:90px;}

    /* ---------- MOBILE top-right dropdown nav ----------
       The vertical rail is replaced by a compact pill in the top-right corner,
       horizontally aligned with the logo. The logo box is 90px tall inside 20px
       padding, so its centre sits at 20 + 45 = 65px. The nav is TOP-ANCHORED:
       the trigger holds that line and the chapter list folds straight DOWN
       beneath it (the trigger never drifts as items appear). 20px from the
       right edge. */
    .dots{
      position:fixed; left:auto; right:20px; bottom:auto;
      top: 40px;
      transform:none;
      flex-direction:column; align-items:flex-end; gap:0;
      z-index:110;
    }

    /* the pill: CURRENT chapter name (left) + dot (right) */
    .nav-trigger{
      display:flex; align-items:center; gap:10px;
      background:transparent; border:0; padding: 0 0 3px; margin:0;
      cursor:pointer; pointer-events:auto;
      color:var(--ui); font-family:inherit;
      -webkit-tap-highlight-color:transparent;
    }
    .nav-trigger-name{
      display:block;
      font-size:11px; font-weight:700; letter-spacing:.04em;
      text-transform:uppercase; text-align:right; white-space:nowrap;
    }
    /* single in-flow word, replaced instantly — no animation. */
    .nav-trigger-word{
      display:block; line-height:14px;
    }

    .nav-trigger-dot{
      width:9px; height:9px; border-radius:50%; flex:none;
      background:var(--ui);           /* filled: it always marks the current chapter */
      transition:background .3s;
    }

    /* the chapter list drops straight down under the pill, right-aligned */
    .dots .dot{
      display:flex; flex-direction:row-reverse; align-items:center; gap:10px;
      justify-content:flex-end;
      height:0; margin:0; padding:0; overflow:hidden;
      opacity:0; transform:translateY(-6px);
      pointer-events:none;
      transition:height .32s cubic-bezier(.7,0,.2,1),
                 opacity .32s ease, transform .32s cubic-bezier(.7,0,.2,1),
                 margin .32s cubic-bezier(.7,0,.2,1),
                 padding .32s cubic-bezier(.7,0,.2,1);
    }
    /* dropdown OPEN: reveal the FULL list in its fixed order (INTRO, VÆRDIER,
       KLUBLOGO, ULV, TYPOGRAFI, FARVER, SAMMEN). The order never changes; the
       filled dot marks where you are. */
    body.nav-open .dots .dot{
      height:16px; margin-top:0; padding:10px 0; opacity:1; transform:translateY(0);
      pointer-events:auto;
    }
    /* the pill itself acts as the INTRO row when open, so hide the list's own
       INTRO item (the first .dot) to avoid showing INTRO twice. Everything
       below (VÆRDIER … SAMMEN) keeps its fixed order and its own dot. */
    body.nav-open .dots .nav-trigger + .dot{
      height:0; margin-top:0; padding:0; opacity:0; transform:translateY(-6px);
      pointer-events:none; overflow:hidden;
    }
    /* stagger the items in as they appear */
    body.nav-open .dots .dot:nth-child(2){ transition-delay:.02s; }
    body.nav-open .dots .dot:nth-child(3){ transition-delay:.04s; }
    body.nav-open .dots .dot:nth-child(4){ transition-delay:.06s; }
    body.nav-open .dots .dot:nth-child(5){ transition-delay:.08s; }
    body.nav-open .dots .dot:nth-child(6){ transition-delay:.10s; }
    body.nav-open .dots .dot:nth-child(7){ transition-delay:.12s; }
    body.nav-open .dots .dot:nth-child(8){ transition-delay:.14s; }

    /* list item: name always visible in the dropdown (not hover-gated) */
    .dots .dot .dot-name{
      position:static; margin:0; opacity:1; transform:none;
      pointer-events:auto; font-size:11px; text-align:right;
    }
    .dots .dot .dot-bullet{
      width:9px; height:9px; flex:none;
    }
    /* active item in the list reads filled like the trigger */
    .dots .dot.active .dot-bullet{ transform:none; background:var(--ui); }

    /* the pill's dot goes hollow when the menu is open (it's the INTRO row) —
       unless you're actually ON intro, where it reads filled like any active
       chapter. */
    body.nav-open .nav-trigger-dot{
      background:transparent; box-shadow:inset 0 0 0 1.5px var(--ui);
    }
    body.nav-open.on-intro-section .nav-trigger-dot{
      background:var(--ui); box-shadow:none;
    }

    /* hero: FRA HEDEN headline + standfirst. Each screen fills the VISIBLE
       viewport (100dvh) so the text centres in what the user actually sees on
       landing — not below the fold behind the toolbars. The engine's cut timing
       uses the locked VPH independently, so this only governs text centring. */
    .hero-screen{height:100dvh;}
    .hero-title{
      width:90vw;                                  /* 362/402 */
      font-size:20.9vw;                            /* 84/402  */
      line-height:.9;letter-spacing:-.06em;        /* Figma: -5.04px on 84px */
      white-space:normal;                          /* wraps: FRA / HEDEN */
    }
    .hero-stand{
      width:88.3vw;                                /* 355/402 */
      font-size:5.47vw;                            /* 22/402  */
      line-height:1.25;letter-spacing:-.04em;      /* Figma: -0.88px on 22px */
    }
    /* scroll prompt: label + vertical line. The stage is 100vh (which on iOS
       extends behind the toolbar), so we lift the prompt by the difference
       between 100vh and the VISIBLE height (100dvh) plus a margin — that places
       it just above the iOS toolbar, always visible. */
    .hero-prompt{
      bottom:calc(100vh - 100dvh + 32px);
      gap:14px;
    }
    .hero-line{height:72px;}
    .hero-hint{font-size:11px;line-height:13px;letter-spacing:-.01em;}

    /* intro badge: Figma mobile has the crest at 58.2% of viewport width
       (node 374:592, inset 20.9% each side), vertically centred */
    .splash-badge{width:58.2vw;}

    /* chapter intro (mobile): headline + description LEFT-aligned. */
    .headline-mask{left:20px;right:20px;text-align:left;}
    .desc{
      left:20px;right:20px;width:auto;
      text-align:left;
    }
    .desc h3,.desc p{margin-left:0;margin-right:0;max-width:none;}

    /* alt chapter (LOGO) mobile: title + copy LEFT-aligned, bottom-anchored so
       the block sits 30px above the video band. The video is a bottom-anchored
       band cropped 48% from the top, so its top edge is at 48vh; the copy's
       bottom edge sits 30px above that. */
    .alt-copy{
      left:20px;right:20px;top:auto;bottom:calc(52vh + 30px);transform:none;
      width:auto;max-width:none; gap:24px;
      align-items:flex-start;text-align:left;
    }
    .alt-title{font-size:16px;letter-spacing:-.05em;}
    .chapter.alt .desc p{font-size:16px;line-height:1.25;letter-spacing:-.01em;}

    /* the cropped chapter video stays centred inside its mask as it grows/shrinks */
    .chapter.alt .frame video,.chapter-video,.frame video{object-position:center center;}

    /* gallery row images fill ~screen width on mobile (proportional height);
       the row still scrolls horizontally just like desktop */
    .g-img{margin-left:12px;}
     .g-alt{width:var(--mw);height:auto;aspect-ratio:var(--mar, 1);}
  }

  /* ---------- reduced motion ----------
     Users who ask the OS for less motion get the decorative CSS animation and
     transition timings cut to near-zero. The site is scroll-driven, so the page
     still works and all content is reachable; this just removes pulsing,
     drifting and easing flourishes that can trigger discomfort. */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
      scroll-behavior:auto !important;
    }
    .hero-line,.hero-hint{transform:none !important;}
  }

  /* =========================================================
     MOBILE LONG-SCROLL FLOW (body.mobile-flow, ≤760px)
     One native scroll: flat sections, vertical galleries, background
     cross-fade (driven from JS on <body>), scroll-reveals.
     ========================================================= */
  body.mobile-flow{ background:#000; overflow-x:visible; }

  /* SECTIONS: normal document flow (always visible). The background colour of
     the page changes as you scroll from one section to the next (see the JS
     bg-change ScrollTriggers), GreenSock-style. */
  body.mobile-flow .hero,
  body.mobile-flow .m-chapter,
  body.mobile-flow .outro{
    position:relative; z-index:auto;
  }

  /* ---- hero: FRA HEDEN centred, then the standfirst on its own screen ---- */
  body.mobile-flow .hero{ min-height:100dvh; background:transparent; }
  body.mobile-flow .hero-intro{ position:relative; height:auto; }
  /* screen 1 (FRA HEDEN) fills the viewport and is centred; screen 2 (the
     standfirst) is only as tall as its text needs plus modest padding — no big
     empty space after the description. */
  body.mobile-flow .hero-screen-1{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:0 20px; }
  body.mobile-flow .hero-screen-2{
    min-height:auto; display:flex; align-items:flex-start; justify-content:center;
    padding:6vh 20px 10vh;
  }
  body.mobile-flow .hero-stand{ color:var(--red); }
  body.mobile-flow .hero .stage{ position:absolute; inset:0; height:100dvh; background:transparent; pointer-events:none; }
  body.mobile-flow .hero-prompt{ position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateX(-50%); }

  /* ---- chapter (Figma 384:245): 20px-inset column. Transparent so the page
     background colour (driven by JS) shows through. ---- */
  body.mobile-flow .m-chapter{ min-height:auto; background:transparent; }
  /* chapter intro column */
  body.mobile-flow .m-col{
    box-sizing:border-box; width:100%;
    padding:14vh 20px 0;                    /* 20px side gutter; video stage follows */
    display:flex; flex-direction:column;
  }
  body.mobile-flow .m-col + .m-col{ padding-top:8vh; }   /* gallery column spacing */
  body.mobile-flow .m-intro{ display:flex; flex-direction:column; gap:24px; margin-bottom:8vh; }
  body.mobile-flow .m-title{
    margin:0; font-weight:700; line-height:.9; letter-spacing:-1px;
    text-transform:uppercase; font-size:20px;
  }
  body.mobile-flow .m-desc{
    margin:0; max-width:none;
    font-size:20px; line-height:1.25; letter-spacing:-.2px; font-weight:400;
  }

  /* ---- video: a normal gallery element that scales up to fill the screen as
     you scroll past it, then back down. No sticky, no pin — just a smooth
     transform driven by its position in the viewport. Sits 20px inset, portrait
     (Figma 363×645 ≈ 9:16-ish). ---- */
  body.mobile-flow .m-video-stage{
    width:100%;
    padding:0 20px;               /* 20px inset like the gallery */
    box-sizing:border-box;
    display:flex; justify-content:center;
  }
  body.mobile-flow .m-video-wrap{
    width:100%;
    aspect-ratio:363 / 645;       /* portrait, matches the Figma video tile */
    overflow:hidden;
    transform-origin:center center;
    will-change:transform;
  }
  body.mobile-flow .m-video-inner{ width:100%; height:100%; overflow:hidden; }
  body.mobile-flow .m-video{
    display:block; width:100%; height:100%;
    object-fit:cover;                /* fills, keeps proportions */
    transform:translateZ(0);         /* Safari: own layer, paints continuously */
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* gallery column: full column-width images, 10px between (Figma), off-white */
  body.mobile-flow .m-gallery{ display:flex; flex-direction:column; gap:10px; }
  body.mobile-flow .m-tile{ width:100%; overflow:hidden; }
  body.mobile-flow .m-gimg,
  body.mobile-flow .m-gvideo{ display:block; width:100%; height:auto; }

  /* gap after the gallery: empty scroll room so the background can ease to the
     next chapter's colour BEFORE its content scrolls in */
  body.mobile-flow .m-gap{ height:60vh; width:100%; }

  /* VÆRDIER mobile (Figma 393:2631): three cards stacked vertically, each its
     own full-width colour block (red / off-white / warm grey), black text,
     60px top / 200px bottom / 20px side padding, 30px between title and body,
     all text visible. */
  body.mobile-flow .m-values{ background:transparent; }
  body.mobile-flow .m-values-wrap{
    box-sizing:border-box;
    display:flex; flex-direction:column; gap:0;
    padding:0;
  }
  body.mobile-flow .m-value{
    box-sizing:border-box;
    display:flex; flex-direction:column; gap:30px;
    padding:60px 20px 200px;
    color:#000;
  }
  /* first card starts below the header logo (Figma: logo at 115px, content at
     238px) so the headline never sits under the crest */
  body.mobile-flow .m-value:first-child{ padding-top:200px; }
  body.mobile-flow .m-value.red  { background:#FF361B; }
  body.mobile-flow .m-value.white{ background:#FCF9F5; }
  body.mobile-flow .m-value.grey { background:#DBD0C4; }
  body.mobile-flow .m-value-title{
    margin:0; font-weight:800; line-height:.85; letter-spacing:-1.8px;
    text-transform:uppercase; font-size:36px; color:#000; white-space:nowrap;
  }
  body.mobile-flow .m-value-body{
    margin:0; font-weight:700; line-height:1.25; letter-spacing:-.36px;
    font-size:18px; color:#000;
  }

  /* outro layer */
  body.mobile-flow .outro{ background:transparent; }
  body.mobile-flow .outro .stage{ position:relative; height:auto; min-height:100dvh; }
  body.mobile-flow .outro-inner{
    box-sizing:border-box;
    height:auto; min-height:100dvh; padding:16vh 24px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px;
  }
  body.mobile-flow .outro-title{ position:static; transform:none; width:auto; }

  /* scroll reveals: fade + rise in when .in is added */
  body.mobile-flow .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
  body.mobile-flow .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    body.mobile-flow .reveal{ opacity:1; transform:none; transition:none; }
  }