:root{
    --forest-950:#16281C; --forest-700:#2F4A34; --sage-500:#7C9070;
    --clay-600:#A85C3B;
    --sand-050:#FAF7EE; --ink-900:#211C14; --ink-700:#4A4335;
    --paper:var(--sand-050); --text:var(--ink-900); --text-soft:var(--ink-700);
    --note-bg: rgba(168,92,59,0.10); --note-line: rgba(168,92,59,0.35);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--paper);color:var(--text);font-family:'Work Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
  a{color:inherit;}

  .concept-note{
    position:relative; z-index:50; background:var(--note-bg); border-bottom:1px solid var(--note-line);
    font-size:13.5px; padding:10px 20px; text-align:center; color:var(--text-soft);
  }
  .concept-note b{color:var(--clay-600);}

  header{position:fixed;top:0;left:0;right:0;z-index:40;padding:20px clamp(20px,4vw,48px);
    display:flex;align-items:center;justify-content:space-between; pointer-events:none;}
  header .inner{display:flex;align-items:center;justify-content:space-between;width:100%;opacity:0;transform:translateY(-8px);pointer-events:auto;}
  .logo img{height:30px;width:auto;}
  .nav-wrap{display:flex;align-items:center;gap:26px;}
  nav{display:flex;gap:28px;font-size:13.5px;letter-spacing:0.03em;text-transform:uppercase;color:var(--text-soft);}
  nav a{text-decoration:none;}
  nav a.current{color:var(--clay-600);}
  .lang-switch{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:0.04em;
    padding-left:20px;border-left:1px solid var(--note-line);}
  .lang-switch button{background:none;border:none;cursor:pointer;color:var(--text-soft);
    font-family:'Work Sans',sans-serif;font-size:12px;letter-spacing:0.04em;padding:2px 1px;}
  .lang-switch button.active{color:var(--clay-600);font-weight:600;}
  .lang-switch .sep{color:var(--note-line);}

  .hamburger{
    display:none; width:44px; height:44px; border:none; background:none; cursor:pointer;
    flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:0;
  }
  .hamburger span{width:22px;height:2px;background:var(--text);display:block;transition:transform .25s ease, opacity .25s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .mobile-nav{
    display:none;
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:39;
    background:var(--paper); padding:96px 32px 40px;
    flex-direction:column; align-items:center; gap:8px;
    opacity:0; visibility:hidden; transition:opacity .3s ease;
  }
  .mobile-nav.open{ opacity:1; visibility:visible; }
  .mobile-nav nav{ display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; }
  .mobile-nav nav a{
    text-decoration:none; color:var(--text); font-family:'Fraunces',serif; font-size:22px;
    padding:16px 0; width:100%; text-align:center;
  }
  .mobile-nav .lang-switch{ margin-top:20px; padding-left:0; border-left:none; gap:14px; }
  .mobile-nav .lang-switch button{ font-size:15px; padding:10px; }

  @media (max-width:820px){
    .nav-wrap{gap:10px;}
    header .inner > .nav-wrap > nav,
    header .inner > .nav-wrap > .lang-switch{ display:none; }
    .hamburger{ display:flex; }
    .mobile-nav{ display:flex; }
  }

  /* ---- HERO ---- */
  .hero{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; padding:104px 24px 48px; text-align:center; flex-direction:column;
  }
  .hero-art{
    width:100%; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(0.92) translateY(18px);
    cursor:default; margin-bottom:40px;
  }
  .hero-art img{
    max-height:min(46vh,420px); max-width:78vw; width:auto; height:auto;
    filter:drop-shadow(0 40px 60px rgba(20,30,20,0.22));
    transition:transform .5s cubic-bezier(.22,1,.36,1);
  }
  .hero-kicker{font-size:13px;letter-spacing:0.14em;text-transform:uppercase;color:var(--clay-600);margin-bottom:10px;opacity:0;}
  .hero h1{font-size:clamp(30px,5.6vw,54px);line-height:1.08;opacity:0;transform:translateY(10px);}
  .hero p{margin-top:12px;font-size:16px;color:var(--text-soft);opacity:0;max-width:46ch;}
  .scroll-cue{margin-top:32px;opacity:0;}
  .scroll-cue .line{width:1px;height:30px;background:var(--text-soft);margin:0 auto;animation:cueMove 1.8s ease-in-out infinite;}
  @keyframes cueMove{0%,100%{opacity:.25;transform:scaleY(0.6);}50%{opacity:1;transform:scaleY(1);}}

  @media (max-width:820px){
    .hero{ padding:88px 20px 40px; }
    .hero p{ max-width:34ch; font-size:15px; }
    .hero-art{ margin-bottom:28px; }
  }

  /* ---- VORES PLANTER — scroll-driven progressive gathering. Plants emerge
       one by one from varied directions and settle around the fixed center
       title; as more join, the whole cluster (position + size together)
       contracts, so the collection ends up small and dense with the first,
       largest arrivals shrinking right along with everyone else. No circles,
       rings, connecting lines, cards or boxes — a photo or, until the real
       one is uploaded, a faint line-glyph is the only visual. ---- */
  .stage{ position:relative; height:900vh; }
  .stage-inner{ position:sticky; top:0; height:100vh; overflow:hidden; }

  .garden-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; text-align:center;
    z-index:5; pointer-events:none;
  }
  .garden-center img{height:34px;width:auto;margin-bottom:16px;opacity:0.92;}
  .garden-center .brand-line{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-soft);margin-bottom:8px;}
  .garden-center h2{font-size:clamp(21px,2.7vw,30px);letter-spacing:0.02em;color:var(--clay-600);}

  .garden-cluster{
    position:absolute; top:50%; left:50%; width:0; height:0;
  }
  .plant-item{
    position:absolute; top:0; left:0;
    display:flex; flex-direction:column; align-items:center;
    cursor:pointer; opacity:0; transform-origin:center center;
  }
  .plant-item img{
    width:auto; display:block;
    filter:drop-shadow(0 14px 22px rgba(20,30,20,0.2));
  }
  .plant-item svg{ display:block; opacity:0.45; }
  .plant-item svg *{ stroke:var(--text-soft); }
  .plant-item:hover{ z-index:6; }
  .plant-item .label{margin-top:8px;font-size:11.5px;letter-spacing:0.02em;color:var(--text-soft);text-align:center;line-height:1.3;white-space:nowrap;}
  .plant-item .pending-note{display:block;font-size:9.5px;font-style:italic;opacity:0.65;margin-top:2px;}

  @media (max-width:820px){
    /* ---- MOBILE "VORES PLANTER" — a dedicated layout, not a shrunk copy
         of desktop. Nothing is pinned; the section is simply as tall as it
         needs to be. "Vores Planter" sits as a clear heading at the top
         (there's no room on a phone for plants to gather "around" it), and
         every plant flows normally down the page, one at a time, fully
         centered, with generous space around each — normal document flow
         means two plants can never overlap. Each still fades, drifts up,
         and scales into place as it scrolls into view. ---- */
    .stage{ height:auto; padding:64px 20px 20px; }
    .stage-inner{ position:static; height:auto; overflow:visible; }

    .garden-center{
      position:static; transform:none; margin:0 auto 56px; pointer-events:auto;
    }
    .garden-center img{ height:30px; margin-bottom:14px; }

    .garden-cluster{
      position:static; width:100%; height:auto;
      display:flex; flex-direction:column; align-items:center;
      gap:52px; padding-bottom:40px;
    }
    .plant-item{
      position:static; width:100%;
    }
    .plant-item img{ max-width:62vw; margin:0 auto; }
    .plant-item .label{ font-size:14px; margin-top:12px; white-space:normal; max-width:74vw; }
    .plant-item .pending-note{ font-size:11.5px; }
    .plant-item svg{ opacity:0.4; }
  }


  .overlay{
    position:fixed;inset:0;z-index:100;background:rgba(20,25,20,0.6);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .25s ease;
  }
  .overlay.open{opacity:1;visibility:visible;}
  .overlay-panel{
    background:var(--paper);max-width:600px;width:100%;border-radius:8px;padding:40px 36px;
    position:relative; transform:translateY(12px) scale(0.98); transition:transform .3s ease;
    text-align:center;
  }
  .overlay.open .overlay-panel{transform:translateY(0) scale(1);}
  .overlay-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-soft);}
  .overlay-panel img{height:min(34vh,260px);width:auto;max-width:80%;margin:0 auto 18px;filter:drop-shadow(0 20px 30px rgba(20,30,20,0.2));transition:opacity .35s ease;}
  .overlay-panel.has-colors img{height:min(42vh,340px);}
  .overlay-panel img[src=""]{display:none;}
  .overlay-panel svg.overlay-glyph{width:64px;height:64px;margin:0 auto 18px;opacity:0.45;}
  .overlay-panel svg.overlay-glyph *{stroke:var(--text-soft);}
  .overlay-panel h3{font-size:22px;}
  .overlay-panel .sub{color:var(--clay-600);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;margin-top:6px;}
  .overlay-panel .season{color:var(--text-soft);font-size:13px;margin-top:6px;}
  .overlay-panel .season:empty{display:none;}

  /* ---- Colour variant selector — clean circles only. Each colour's name
       exists purely as an aria-label/title for accessibility, never shown
       as visible text. Swapping shows/fades the correct real photo when
       one exists, and never recolours the leaves or pot via a filter. ---- */
  .overlay-colors{ margin-top:20px; display:none; }
  .overlay-colors.active{ display:block; }
  .overlay-colors .current-color-name{
    font-size:13px; color:var(--clay-600); font-weight:600;
    margin-bottom:12px; letter-spacing:0.01em;
  }
  .swatch-row{
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:12px; max-width:280px; margin:0 auto;
  }
  .swatch-option{
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; padding:5px;
  }
  .swatch-dot{
    width:26px; height:26px; border-radius:50%; position:relative; flex-shrink:0;
    transition:transform .2s ease;
  }
  .swatch-dot.swatch-light{ border:1.5px solid rgba(20,18,12,0.28); }
  .swatch-dot::after{
    content:''; position:absolute; inset:-5px; border-radius:50%;
    border:1px solid transparent; transition:border-color .2s ease;
  }
  .swatch-option:hover .swatch-dot{ transform:scale(1.1); }
  .swatch-option.active .swatch-dot::after{ border-color:var(--clay-600); }
  .swatch-option.active .swatch-dot{ transform:scale(1.08); }
  .color-pending-note{
    margin-top:12px; font-size:12.5px; font-style:italic; color:var(--text-soft); opacity:0.75;
  }

  @media (max-width:820px){
    .overlay{ padding:0; align-items:flex-end; }
    .overlay-panel{
      max-width:100%; width:100%; border-radius:20px 20px 0 0;
      padding:32px 22px 36px; max-height:88vh; overflow-y:auto;
    }
    .overlay-close{
      top:10px; right:10px; width:44px; height:44px; font-size:22px;
      display:flex; align-items:center; justify-content:center;
    }
    .overlay-panel img{ height:min(32vh,280px); }
    .overlay-panel.has-colors img{ height:min(34vh,300px); }
    .swatch-row{ gap:14px; max-width:100%; }
    .swatch-option{ padding:6px; }
    .swatch-dot{ width:34px; height:34px; }
    .after-links a{ padding:13px 22px; font-size:15px; }
  }
  /* ---- Plant detail modal — dark, high-contrast presentation.
       Additive overrides only: layout, swatches, mappings and behaviour
       are unchanged; this just darkens the backdrop and the panel so the
       plant photo and its details read clearly. ---- */
  .overlay{ background:rgba(6,8,6,0.82); }
  .overlay-panel{
    background:#141814; color:#FFFFFF;
    box-shadow:0 30px 80px rgba(0,0,0,0.55);
    max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow-y:auto;
    padding:34px 36px 32px;
  }
  .overlay-close{ color:#FFFFFF; opacity:1; }
  .overlay-panel img{
    height:min(40vh,300px); max-width:90%; object-fit:contain;
    margin:0 auto 16px; filter:drop-shadow(0 22px 34px rgba(0,0,0,0.5));
  }
  .overlay-panel.has-colors img{ height:min(46vh,390px); }
  .overlay-panel svg.overlay-glyph *{ stroke:#FFFFFF; }
  .overlay-panel h3{ color:#FFFFFF; opacity:1; }
  .overlay-panel .sub{ color:#FFFFFF; opacity:1; }
  .overlay-panel .season{ color:#FFFFFF; opacity:1; }
  .overlay-colors{ margin-top:16px; }
  .overlay-colors .current-color-name{ color:#FFFFFF; opacity:1; }
  .color-pending-note{ color:#FFFFFF; opacity:1; }
  .swatch-row{ max-width:360px; }
  .swatch-dot{ box-shadow:0 0 0 1px rgba(255,255,255,0.38); }
  .swatch-dot.swatch-light{ border:none; box-shadow:0 0 0 1px rgba(255,255,255,0.55); }
  .swatch-option.active .swatch-dot::after{ border-color:#FFFFFF; }
  @media (max-height:780px) and (min-width:821px){
    .overlay-panel{ padding:26px 32px 24px; }
    .overlay-panel.has-colors img{ height:min(40vh,330px); }
  }
  @media (max-height:640px) and (min-width:821px){
    .overlay-panel.has-colors img{ height:34vh; }
  }
  @media (max-width:820px){
    .overlay-panel{ max-height:92vh; max-height:92dvh; padding:30px 20px 32px; }
    .overlay-panel img{ height:min(34vh,290px); }
    .overlay-panel.has-colors img{ height:min(38vh,320px); }
    .swatch-row{ max-width:100%; }
  }

  /* ---- Packaging choice (Uden pose / Med pose) — minimal radio pair at
       the bottom of the plant detail view, same white-on-charcoal style. ---- */
  .overlay-packaging{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.14); }
  .overlay-packaging .pack-label{
    font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:#FFFFFF; margin-bottom:12px;
  }
  .pack-options{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px; }
  .pack-option{
    position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
    font-size:14px; color:#FFFFFF; padding:6px 2px; min-height:32px; -webkit-tap-highlight-color:transparent;
  }
  .pack-option input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
  .pack-radio{
    width:18px; height:18px; border-radius:50%; flex-shrink:0; position:relative;
    border:1.5px solid rgba(255,255,255,0.75); transition:border-color .2s ease;
  }
  .pack-radio::after{
    content:''; position:absolute; inset:3.5px; border-radius:50%; background:#FFFFFF;
    transform:scale(0); transition:transform .2s ease;
  }
  .pack-option:hover .pack-radio{ border-color:#FFFFFF; }
  .pack-option input:checked + .pack-radio{ border-color:#FFFFFF; }
  .pack-option input:checked + .pack-radio::after{ transform:scale(1); }
  .pack-option input:focus-visible + .pack-radio{ outline:2px solid #FFFFFF; outline-offset:3px; }
  @media (max-width:820px){
    .overlay-packaging{ margin-top:14px; padding-top:12px; }
    .overlay-packaging .pack-label{ margin-bottom:4px; }
    .pack-option{ font-size:15px; min-height:44px; }
    .pack-radio{ width:20px; height:20px; }
  }
  .overlay-packaging[hidden]{ display:none !important; }

  /* ---- "Vores Planter": the Skovbrynet logo as a large, faint watermark
       centred behind the title and the whole plant composition. It sits in
       the lowest layer (plants and text paint above it), keeps the logo's
       own 3:1 proportions (width set, height auto) and never exceeds the
       viewport width, so it cannot cause horizontal scrolling. ---- */
  .garden-watermark{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(72vw, 1080px); z-index:0; pointer-events:none; user-select:none;
    opacity:0.10;
  }
  .garden-watermark img{ display:block; width:100%; height:auto; }
  @media (max-width:820px){
    .stage{ overflow-x:clip; }
    .garden-watermark{
      top:calc(64px + 26px); width:min(92vw, 560px);
    }
  }