:root{
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 1500ms;
    --panel-min: 6%;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    padding:0;
    background:#0b1210;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  /* ================= PRELOADER ================= */
  .preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    background:#0b1210;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:28px;
    transition: opacity 450ms ease;
  }
  .preloader.is-hidden{
    opacity:0;
    pointer-events:none;
  }
  .preloader__ring-wrap{
    position:relative;
    width:120px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .preloader__ring{
    position:absolute;
    inset:0;
    width:120px;
    height:120px;
    transform:rotate(-90deg);
  }
  .preloader__ring-bg{
    fill:none;
    stroke:rgba(255,255,255,0.12);
    stroke-width:3;
  }
  .preloader__ring-progress{
    fill:none;
    stroke:#ff7a1a;
    stroke-width:3;
    stroke-linecap:round;
  }
  .preloader__logo-wrap{
    position:relative;
    width:48px;
    height:34px;
  }
  .preloader__logo-dim,
  .preloader__logo-fill{
    position:absolute;
    top:0; left:0;
    width:48px;
    height:34px;
    object-fit:contain;
  }
  .preloader__logo-dim{
    opacity:0.18;
  }
  .preloader__logo-fill{
    clip-path: inset(100% 0 0 0);
  }
  .preloader__percent{
    font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:1px;
    color:#fff;
    min-width:48px;
    text-align:center;
  }
  @media (prefers-reduced-motion: reduce){
    .preloader{ display:none; }
  }

  .wrap{
    width:100%;
    padding:0;
    height:100vh;
    box-sizing:border-box;
    opacity:0;
    animation: shadowstandHomeFadeIn 900ms ease forwards;
  }
  @keyframes shadowstandHomeFadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){
    .wrap{ animation: none; opacity:1; }
  }

  /* ================= DESKTOP ================= */
  .desktop-row{
    display:flex;
    justify-content:flex-end; /* pins the (currently narrower-than-100%) column group to the right; black shows through on the left */
    width:100%;
    height:100%;
    min-height:400px;
    overflow:hidden;
    border-radius:2px;
    background:#0b1210;
  }
  .panel{
    position:relative;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 200px; /* fixed width in the collapsed state */
    height:100%;
    overflow:hidden;
    cursor:pointer;
    /* Animating flex-basis (a real length) rather than flex-grow: with
       fixed-width siblings, flex-grow is a ratio that captures ~100% of
       the free space the instant it leaves 0 — the remaining 0.001→6
       portion of that transition has no further visual effect, so it
       reads as an instant snap no matter how long the duration is set to.
       flex-basis, being an actual pixel length, interpolates properly. */
    transition: flex-basis var(--dur) var(--ease);
    will-change: flex-basis;
    background:#111;
  }

  /* One-time entrance cascade (see category-selector.js): each panel starts
     lower + invisible, then rises into place. Kept as separate classes
     (not baked into .panel's own transition) so it can't interfere with
     the ongoing hover/expand transition. */
  .panel.js-cascade-init{
    opacity:0;
    transform: translateY(50vh);
  }
  .panel.js-cascade-in{
    opacity:1;
    transform: translateY(0);
    transition: opacity 950ms var(--ease), transform 950ms var(--ease), flex-basis var(--dur) var(--ease);
  }

  .panel.expanded{
    flex-basis: var(--expanded-w, 800px); /* computed in JS (sizeDesktop) from the real row width; 800px is just a sane fallback before JS runs */
  }
  .panel-bg{
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-position:center;
    transition: filter var(--dur) var(--ease);
    filter: brightness(0.72) saturate(0.92);
  }
  .panel.expanded .panel-bg{
    filter: brightness(0.62) saturate(1.05);
  }
  .panel-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.55) 100%);
    opacity:0.85;
    transition: opacity var(--dur) var(--ease);
  }
  .panel.expanded .panel-overlay{
    opacity:1;
  }

  .panel-label{
    position:absolute;
    left:28px;
    bottom:32px;
    transform: rotate(180deg) scale(0.8);
    writing-mode: vertical-rl;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size: 80px;
    font-weight: 300;
    letter-spacing: 3px;
    color:#fff;
    text-transform:uppercase;
    transition: transform var(--dur) var(--ease);
    white-space:nowrap;
    pointer-events:none;
    line-height:1;
    will-change: transform;
  }
  .panel.expanded .panel-label{
    transform: rotate(180deg) scale(1);
    font-weight: 700;
  }

  .panel-cta{
    position:absolute;
    right:28px;
    bottom:32px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    color:#111;
    font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    padding:12px 18px;
    border-radius:2px;
    text-transform:uppercase;
    text-decoration:none;
    opacity:0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease) 200ms, transform 600ms var(--ease) 200ms;
    pointer-events:none;
  }
  .panel.expanded .panel-cta{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
  }
  .panel-cta svg{
    width:16px;height:16px;
    transition: transform 300ms var(--ease);
  }
  .panel-cta:hover svg{
    transform: translateX(4px);
  }

  /* ================= MOBILE ================= */
  .mobile-col{
    display:none;
  }

  @media (max-width: 860px){
    .wrap{padding:0;}
    .desktop-row{display:none;}
    .mobile-col{
      display:flex;
      flex-direction:column;
      height:100%;
      min-height:400px;
      border-radius:2px;
      overflow:hidden;
    }
    .mpanel{
      position:relative;
      overflow:hidden;
      flex: 1 1 0;
      min-height: 9%;
      cursor:pointer;
      transition: flex-grow var(--dur) var(--ease);
      will-change: flex-grow;
    }
    .mpanel.js-cascade-init{
      opacity:0;
      transform: translateX(-60%);
    }
    .mpanel.js-cascade-in{
      opacity:1;
      transform: translateX(0);
      transition: opacity 950ms var(--ease), transform 950ms var(--ease), flex-grow var(--dur) var(--ease);
    }
    .mpanel.expanded{
      flex-grow: 6;
    }
    .mpanel-bg{
      position:absolute;
      inset:0;
      background-repeat:no-repeat;
      background-position:center;
      transition: filter var(--dur) var(--ease);
      filter: brightness(0.72) saturate(0.92);
    }
    .mpanel.expanded .mpanel-bg{
      filter: brightness(0.6) saturate(1.05);
    }
    .mpanel-overlay{
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 22%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.6) 100%);
    }
    .mpanel-label{
      position:absolute;
      left:22px;
      top:50%;
      transform-origin: left center;
      transform: translateY(-50%) scale(0.5556);
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
      font-size:72px;
      font-weight:300;
      letter-spacing:1px;
      color:#fff;
      text-transform:uppercase;
      line-height:1;
      transition: top var(--dur) var(--ease), transform var(--dur) var(--ease);
      will-change: transform, top;
    }
    .mpanel.expanded .mpanel-label{
      top:24px;
      transform: translateY(0) scale(1);
      font-weight:700;
    }
    .mpanel-cta{
      position:absolute;
      left:22px;
      bottom:24px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#fff;
      color:#111;
      font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
      font-size:12px;
      font-weight:700;
      letter-spacing:1px;
      padding:10px 16px;
      border-radius:2px;
      text-transform:uppercase;
      text-decoration:none;
      opacity:0;
      transform: translateY(10px);
      transition: opacity 500ms var(--ease) 150ms, transform 500ms var(--ease) 150ms;
    }
    .mpanel.expanded .mpanel-cta{
      opacity:1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce){
    .panel, .panel-bg, .panel-overlay, .panel-label, .panel-cta,
    .mpanel, .mpanel-bg, .mpanel-label, .mpanel-cta{
      transition-duration: 1ms !important;
    }
    .panel.js-cascade-init, .mpanel.js-cascade-init{
      opacity:1 !important;
      transform:none !important;
    }
  }