/* ===== General ===== */
html, body { color:#000; margin:0; }
#frame { width:100%; margin:0 auto; }
#frame p { font-size:1.5rem; }

article .container { width:100%; max-width:600px; margin:0 auto; }
article section { padding:1.2em; }

article .header{
  position:relative;
  margin:-3em 0 0 0; /* desktop default */
  padding:1em;
  text-align:left;
  font-size:2em;
  color:#333;
}

.first-header {
    background-color: white;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.dual-title{ color:#000; padding:0.5em 0.75em; border-radius:0; line-height:1.3; display:inline; }
@media (max-width:640px){
  .dual-title{ display:block; width:fit-content; max-width:min(26ch,100% - 2rem); margin:0.5rem auto; text-align:center; }
}
@supports (text-wrap:balance){
  @media (max-width:640px){ .dual-title{ text-wrap:balance; } }
}

/* ===== Parallax base (desktop) ===== */
.parallax{
  position:relative;
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
@media (min-width:769px){
  .parallax [class*="bg__"]{
    position:relative;
    min-height:100vh;
    text-indent:-9999px;
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }
}
.parallax .bg__bar { background-image:url(/media/dual-design/website-layout-dual-design-page-hightech-4-01.webp); }
.parallax .bg__baz { background-image:url(/media/dual-design/website-layout-dual-design-page-hightech-7-01.webp); }
.parallax .bg__bazz{ background-image:url(/media/dual-design/website-layout-dual-design-page-hightech-10-01.webp); }

.parallax .bg__break{
  box-shadow:inset 0 0 1em #111;
  background-image:url(/media/dual-design/website-layout-dual-design-page-hightech-10-01.webp);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

.parallax .capture{
  float:right; width:200px; padding:1em; margin:-1.5em 1em 0 0;
  text-indent:0; background:rgba(243,243,243,.75); box-shadow:0 1px .125em #333; color:#141414;
}

/* CTA */
#fixed-button{
  position:fixed; bottom:140px; right:20px; padding:10px 20px; background:#515151; color:#fff; border:none;
  border-radius:5px; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.2);
}
body.creative-layout #fixed-button{ background-color:#e76f00; }

/* Visibility states for the floating CTA */
#fixed-button{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999; /* keep above page chrome */
}

#fixed-button.visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#fixed-button.is-hidden{
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px){
  #fixed-button{
    left: 50% !important;
    right: auto !important;                  /* kill old right:20px */
    bottom: 20px;                            /* JS will raise this near footer */
    transform: translate(-50%, 8px) !important; /* center + hidden-state slide */
  }
  #fixed-button.visible{
    transform: translate(-50%, 0) !important;   /* centered slide-in */
  }
}


/* ===== MOBILE: HTML-based carousel ===== */
@media (max-width:768px){
  /* Tighten the space ABOVE the carousel */
  #hero-parallax{ margin-top:0.25rem; }

  /* Hide desktop background layers on mobile */
  #hero-parallax .bg__bar,
  #hero-parallax .bg__baz,
  #hero-parallax .bg__bazz{ display:none !important; }

  /* Also hide the entire mobile deck on desktop */
  /* (prevents stacked <img> on desktop) */
}
@media (min-width:769px){
  #hero-parallax .deck--mobile{ display:none !important; }
}

@media (max-width:768px){
  /* Show the in-flow deck; add bottom spacing after arrows */
  #hero-parallax .deck--mobile{
    display:block;
    position:relative; 
    z-index:1;
    margin: 0 0 1.25rem 0; /* EXTRA space after arrows before next section */
  }

  /* 1) IMAGE STAGE — natural height from <img> */
  #hero-parallax .deck--mobile .stage{
    display:block; width:100%; margin:0; padding:0; line-height:0;
  }
  #hero-parallax .deck--mobile .stage .slide{
    display:none; width:100%; height:auto; vertical-align:top; user-select:none; -webkit-user-drag:none;
    touch-action:pan-y;
  }
  #hero-parallax .deck--mobile .stage .slide.active{ display:block; }

  /* 2) SCRUBBER — exactly N discrete slots (no in-betweens) */
  #hero-parallax .deck--mobile .scrubber{
    display:block; margin:0.5rem 1rem 0 1rem; position:relative;
  }
  #hero-parallax .deck--mobile .scrubber-track{
    position:relative; height:8px; border-radius:999px; background:#e8e8e8; overflow:hidden;
  }
  #hero-parallax .deck--mobile .scrubber-thumb{
    position:absolute; top:0; bottom:0; left:0;
    width: calc(100% / var(--slides, 3)); /* thumb spans exactly one slot */
    border-radius:999px; background:#000; transition:left 120ms linear;
  }
  body.creative-layout #hero-parallax .deck--mobile .scrubber-thumb{ background:#e76f00; }

  /* 3) ARROWS — below scrubber; add a bit more space after */
  #hero-parallax .deck--mobile .hp-nav{
    position:relative; z-index:1;
    display:flex; justify-content:center; align-items:center; gap:0.8rem;
    margin:0.65rem 0 0.75rem; /* space below arrows too */
  }
  #hero-parallax .deck--mobile .hp-btn{
    all:unset; display:inline-flex; align-items:center; justify-content:center;
    width:2.6rem; height:2.6rem; border:1px solid #000; border-radius:999px; background:#fff;
    font-size:1.25rem; line-height:1; cursor:pointer; user-select:none; transition:transform 120ms ease, opacity 120ms ease;
  }
  body.creative-layout #hero-parallax .deck--mobile .hp-btn{ border-color:#e76f00; }
  #hero-parallax .deck--mobile .hp-btn:active{ transform:scale(0.96); }
  #hero-parallax .deck--mobile .hp-btn[disabled]{ opacity:.35; pointer-events:none; }

  /* Ensure header immediately follows without extra gap */
  #hero-parallax + .header{ margin-top:0 !important; }

  /* BREAK image (non-carousel) */
  .parallax .bg__break{
    position:relative !important; inset:auto !important; height:60vh;
    background-attachment:initial !important; background-position:center center; background-repeat:no-repeat;
    background-size:contain; background-color:#fff; opacity:1 !important;
  }

  /* Remove desktop negative margin on mobile header to avoid overlaps */
  article .header{ margin:0 !important; }
}

@media (max-width:768px){
  .parallax .bg__break{
    position:relative !important;
    inset:auto !important;
    height:60vh;
    background-attachment:initial !important;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    background-color:#fff;
    opacity:1 !important;

    /* 👇 Swap image only on mobile */
    background-image:url(/media/dual-design/website-layout-dual-design-page-mob-15.webp) !important;
  }
}