:root{
    --red:#FF361B;        /* FCM BRIGHT RED (new brand red) */
    --fcm-red:#DE2807;    /* primary FCM red (deep) */
    --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;}
  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:30px;
    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;}

  /* shared text-link style for nav actions (no borders) */
  .btn{
    display:inline-block;
    padding:0;border:0;
    font-size:11px;font-weight:700;letter-spacing:-.01em;
    text-transform:uppercase;text-decoration:none;
    background:transparent;color:inherit;
    pointer-events:auto;cursor:pointer;
    font-family:inherit;white-space:nowrap;
    transition:color .3s ease;
  }

  /* ---------- header right side: values link + language selector ---------- */
  .hdr-actions{
    margin-left:auto;
    display:flex;align-items:center;gap:32px;
    color:var(--ui);
    transition:color .3s ease;
  }

  /* ---------- Dot nav (bottom-left rail, filled/outlined) ---------- */
  .dots{
    position:fixed;left:30px;bottom:34px;z-index:100;
    display:flex;flex-direction:column;gap:12px;
    pointer-events:auto;
  }
  .dot{
    position:relative;
    display:flex;align-items:center;
    pointer-events:auto;
  }
  .dot button{
    width:9px;height:9px;border-radius:50%;flex:none;
    border:1.5px solid var(--ui);background:transparent;
    cursor:pointer;padding:0;
    transition:background .3s cubic-bezier(.7,0,.2,1),
               transform .3s cubic-bezier(.7,0,.2,1),
               border-color .3s;
  }
  .dot button:hover{transform:scale(1.25);}
  .dot.active button{background:var(--ui);transform:scale(1.15);}
  .dot-name{
    margin-left:14px;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;cursor:pointer;
  }
  .dot:hover .dot-name,
  .dot.active .dot-name{opacity:1;transform:translateX(0);pointer-events:auto;}

  /* ---------- Chapters ---------- */
  .chapter{
    position:relative;
    height:800vh;
  }
  .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{width:var(--w);height:var(--h);}
  /* video gallery tiles fill their frame like a cover image */
  .g-vid{overflow:hidden;}
  .g-video{width:100%;height:100%;object-fit:cover;display:block;}

  /* 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(100vw - 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;inset:0;width:100%;height:100%;
    object-fit:cover;z-index:1;
  }
  /* 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 .8s ease;
  }
  .splash.hide{opacity:0;pointer-events:none;}
  .splash.done{display:none;}
  /* 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 pinned hero stage (40), below chapter cover (50) */
    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,18vw,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;
  }
  .skip-intro{
    position:absolute;left:50%;bottom:37px;
    transform:translateX(-50%);z-index:5;
    background:none;border:0;padding:0;cursor:pointer;
    font-family:inherit;font-size:11px;font-weight:700;letter-spacing:-.01em;
    text-transform:uppercase;color:var(--red);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .8s;
  }
  body.on-intro .skip-intro{
    opacity:1;visibility:visible;pointer-events:auto;
  }

  /* 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.on-intro .site-header .btn{pointer-events:none;}
  body.intro-clean .dots{opacity:0;pointer-events:none;}
  body.intro-clean .dots button{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%);
  }
  /* badge pinned at the top, buttons at the bottom; the headline is centred in
     the TRUE middle of the viewport (taken out of the grid flow and absolutely
     centred) so badge/button heights never shift it off-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;
  }
  /* big badge at the top (a touch smaller) */
  .outro-badge{grid-row:1;height:clamp(160px,22vw,300px);width:clamp(160px,22vw,300px);}
  .outro-badge svg{height:100%;width:100%;display:block;}
  .outro-badge svg path{fill:#FCF9F5;}
  .outro-actions{
    grid-row:3;
    display:flex;gap:16px;align-items:center;justify-content:center;
  }
  .outro-actions .btn{
    display:flex;align-items:center;justify-content:center;
    height:40px;width:178px;padding:12px;
    border:1.15px solid #FCF9F5;border-radius:7px;
    color:#FCF9F5;font-size:12px;letter-spacing:-.01em;
    transition:background .35s ease,color .35s ease;
  }
  .outro-actions .btn:hover{background:#FCF9F5;color:var(--black);}

  @media (max-width:760px){
    .outro-inner{padding:6vh 24px;}
    .outro-title{font-size:clamp(28px,9vw,48px);letter-spacing:-.05em;}
    .outro-badge{height:clamp(120px,38vw,200px);width:clamp(120px,38vw,200px);}
    .outro-actions{flex-direction:column;width:234px;}
    .outro-actions .btn{width:100%;height:48px;}
  }

  /* ---------- 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 .stage{overflow:hidden;background:#000;}
  .values-cols{
    position:absolute;inset:0;
    display:flex;align-items:flex-start;justify-content:flex-start;
    gap:clamp(24px,3vw,48px);
    padding:38vh clamp(22px,2.78vw,40px) 0;
  }
  .v-col{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;
    gap:clamp(16px,1.6vw,24px);
    max-width:34vw;
  }
  .v-col-title{
    margin:0;
    font-family:"FCM Rialta","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:clamp(20px,1.8vw,26px);                 /* 26px @1440 (Figma) */
    font-weight:700;line-height:.9;letter-spacing:-.05em;
    text-transform:uppercase;color:#FF361B;
  }
  .v-col-body{
    margin:0;
    font-family:"FCM Rialta","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:clamp(13px,1.11vw,16px);                /* 16px @1440 (Figma) */
    font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#FF361B;
  }
  @media (max-width:760px){
    /* stack the three columns vertically; the JS translates this stack upward
       through the viewport so each column is read one at a time. The stack is
       taller than the screen by design — no inner scrollbar (JS drives it). */
    .chapter.values .stage{overflow:hidden;}
    .values-cols{
      position:absolute;top:0;left:0;right:0;bottom:auto;
      flex-direction:column;align-items:flex-start;justify-content:flex-start;
      gap:8vh;
      padding:16vh 24px 16vh;
      height:auto;min-height:100%;
      will-change:transform;
    }
    .v-col{max-width:100%;width:100%;gap:14px;}
    .v-col-title{font-size:clamp(22px,6.5vw,30px);}
    .v-col-body{font-size:clamp(15px,4.2vw,18px);}
  }

  @media (max-width:760px){
    :root{--pad-left:56px;}
    .headline{font-size:24vw;}
    .desc{width:min(300px,70vw);}

    /* header: crest only, smaller, tucked into the corner */
    .site-header{padding:20px;}
    .site-header .crest-link{width:90px;height:90px;}

    /* hero: FRA HEDEN headline + standfirst, scaled for mobile.
       Both are flex-centered in their own 100vh screen now. */
    .hero-title{
      width:94vw;
      font-size:clamp(60px,24vw,110px);line-height:.82;letter-spacing:-.05em;
    }
    .hero-stand{
      width:min(360px,86vw);
      font-size:clamp(16px,4.6vw,20px);
    }
    .hero-prompt{bottom:0;}

    /* splash badge: one-third of page width */
    .splash-badge{width:33.333vw;}

    /* dot nav: tuck into the corner */
    .dots{left:20px;bottom:24px;}

    /* alt chapter (LOGO) mobile: title+copy sit in the upper area just
       below the nav (per updated design); the video is fixed to the
       bottom and masks upward behind them */
    .alt-copy{
      left:20px;top:124px;transform:none;
      width:calc(100vw - 40px);gap:24px;
    }
    .alt-title{font-size:20px;letter-spacing:-.05em;}
    .chapter.alt .desc p{font-size:20px;line-height:1.25;letter-spacing:-.01em;}

    /* gallery row images sit a bit smaller on mobile; the row still
       scrolls horizontally just like desktop */
    .g-img{margin-left:12px;}
    .g-alt{width:var(--mw);height:var(--mh);}
  }

  /* ---------- 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;}
  }