/* ================================================================
   MOBILE CANVAS  –  portrait phones + phone landscape
   Layout: dark background + CSS portrait gold frame + canvas + plaque.
   The gallery room image is hidden — the frame is pure CSS.
   ================================================================ */

@media (max-width: 760px) and (orientation: portrait),
       (max-width: 900px) and (orientation: landscape) {

  /* ── BASE ── */
  html,
  body {
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Warm dark room background — replaces the gallery image */
  .gallery-stage {
    min-height: 100dvh;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(201, 168, 76, 0.07), transparent 58%),
      linear-gradient(180deg, #16130f 0%, #0e0c0a 100%) !important;
  }

  /* Fix layer to fill the full viewport (JS zoom/pan is bypassed) */
  .gallery-layer {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    transform: none !important;
  }

  /* Hide the landscape gallery room image entirely on portrait mobile.
     The gold frame is created with CSS box-shadow on the canvas panel. */
  .gallery-layer .gallery-image {
    opacity: 0 !important;
  }


  /* ================================================================
     PORTRAIT CANVAS PANEL
     Standard pages: 88vw × 68dvh, starting 6dvh from top.
     Home / Challenge: slightly narrower at 84vw × 62dvh (8dvh top)
     so the gallery room peeks in on both sides.
     ================================================================ */

  .gallery-layer .canvas-panel,
  .gallery-layer .canvas-welcome,
  .gallery-layer .canvas-logo,
  .gallery-layer .canvas-ig-disclaimer {
    left: 6vw !important;
    top: 6dvh !important;
    width: 88vw !important;
    height: 68dvh !important;
  }

  /* Home + Challenge use the slightly smaller canvas */
  .gallery-home .gallery-layer .canvas-panel,
  .gallery-home .gallery-layer .canvas-welcome,
  .gallery-home .gallery-layer .canvas-logo,
  .gallery-home .gallery-layer .canvas-ig-disclaimer,
  .gallery-challenge .gallery-layer .canvas-panel {
    left: 8vw !important;
    top: 8dvh !important;
    width: 84vw !important;
    height: 62dvh !important;
  }

  /* ── CSS GOLD PORTRAIT FRAME ──────────────────────────────────
     Layered box-shadow builds up a carved gold frame effect:
     dark inner bevel → bright inner liner → main frame body
     (warm gold with lighter and darker bands) → dark outer edge
     → deep drop shadow for dimension on the dark background.    */
  .gallery-layer .canvas-panel {
    z-index: 4 !important;
    opacity: 1 !important;
    overflow: hidden;
    border: none !important;
    box-shadow:
      /* Inner bevel — dark edge right against the canvas */
      0 0 0 2px  rgba(60, 38, 8, 0.95),
      /* Inner liner — bright gold strip */
      0 0 0 5px  rgba(218, 182, 80, 0.95),
      /* Frame body shadow side */
      0 0 0 9px  rgba(130, 88, 18, 0.90),
      /* Frame body main — warm gold */
      0 0 0 16px rgba(185, 138, 42, 0.92),
      /* Frame body highlight */
      0 0 0 19px rgba(228, 192, 88, 0.88),
      /* Outer edge — dark brown */
      0 0 0 22px rgba(70, 44, 8, 0.95),
      /* Thin bright outer liner */
      0 0 0 24px rgba(180, 140, 50, 0.70),
      /* Deep drop shadow */
      0 28px 80px rgba(0, 0, 0, 0.80),
      0 8px  24px rgba(0, 0, 0, 0.60) !important;
  }

  /* canvas-welcome starts invisible on desktop — show it immediately
     on mobile. No !important so the JS animation can still hide it
     later (when the logo sequence runs).                            */
  .gallery-layer .canvas-welcome {
    opacity: 1;
    transform: translateY(0) !important;
  }

  /* z-index stack for home page elements */
  .gallery-home .gallery-layer .canvas-panel  { z-index: 3 !important; }
  .gallery-home .gallery-layer .canvas-welcome,
  .gallery-home .gallery-layer .canvas-logo   { z-index: 5 !important; }


  /* ================================================================
     PLAQUE / CANVAS-CTA ZONE
     Sits below the canvas with a small gap. The plaque is centred
     inside this zone (top: 50%) and is always visible on mobile.
     ================================================================ */

  /* Standard pages: frame bottom = 74dvh. Plaque sits clearly below. */
  .gallery-layer .canvas-cta {
    left: 6vw !important;
    top: 76dvh !important;
    width: 88vw !important;
    height: 12dvh !important;
    z-index: 6;
    pointer-events: none;
  }

  /* Home + Challenge: CTA zone sits clearly BELOW the frame.
     Frame bottom = 70dvh. Zone 72→84dvh, plaque centre at 78dvh. */
  .gallery-home .gallery-layer .canvas-cta,
  .gallery-challenge .gallery-layer .canvas-cta {
    left: 8vw !important;
    top: 72dvh !important;
    width: 84vw !important;
    height: 12dvh !important;
  }

  /* Plaque — large tappable element, always visible and centred in CTA zone */
  .gallery-layer .entry-plaque,
  .gallery-layer .entry-plaque.is-risen,
  .gallery-stage.has-entry-plaque .gallery-layer .entry-plaque,
  .gallery-stage.is-zoomed .gallery-layer .entry-plaque {
    top: 50% !important;
    width: min(264px, 74vw) !important;
    height: 82px !important;
    min-height: 66px !important;
    background-size: 100% 48% !important;
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* When mobile.js has confirmed mobile layout, pin visibility */
  .gallery-layer.is-mobile-layout .entry-plaque {
    top: 50% !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .gallery-layer .plaque-title {
    font-size: 20px !important;
  }

  .gallery-layer .plaque-enter {
    font-size: 15px !important;
  }


  /* ================================================================
     HOME PAGE (index.html)  –  .gallery-home
     ================================================================ */

  .gallery-home .gallery-layer .canvas-welcome {
    overflow: hidden !important;
    font-size: clamp(24px, 6.8vw, 31px) !important;
    line-height: 1.04 !important;
    padding: 7vw 7vw 4vw !important;
  }

  .gallery-home .gallery-stage.has-logo .canvas-welcome {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .gallery-home .gallery-layer .canvas-logo {
    transition: opacity 900ms ease !important;
  }

  .gallery-home .gallery-layer .canvas-divider {
    width: 52% !important;
    margin-top: 4px !important;
  }

  .gallery-home .gallery-layer .logo-stack {
    width: min(270px, 69vw) !important;
  }

  .gallery-home .gallery-layer .logo-reversed-text {
    font-size: clamp(132px, 36vw, 204px) !important;
  }


  /* ================================================================
     CHALLENGE PAGE (challenge.html)  –  .gallery-challenge
     5-step info slideshow.
     ================================================================ */

  .gallery-layer .step-label {
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 12px !important;
    opacity: 1 !important;
  }

  .gallery-layer .slide-rule {
    width: 52px !important;
    height: 1px !important;
    margin: 0 auto 18px !important;
    opacity: 1 !important;
  }

  .gallery-layer .slide-title {
    max-width: 100% !important;
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin-bottom: 18px !important;
    opacity: 1 !important;
  }

  .gallery-challenge .gallery-layer .slide-title {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  /* Progress dots — bigger tap area */
  .gallery-layer .dots {
    bottom: 16px;
    gap: 8px !important;
  }

  .gallery-layer .dot {
    width: 7px !important;
    height: 7px !important;
  }

  /* Progress bar stays */
  .gallery-layer .progress-bar {
    height: 3px !important;
  }


  /* ================================================================
     GALLERY QUIZ PAGE (gallery.html)  –  .gallery-quiz
     ================================================================ */

  /* Quiz slides — even padding, content centred, no clipping */
  .gallery-layer .qslide {
    padding: 14px 16px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .gallery-layer .q-num {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 8px !important;
  }

  .gallery-layer .q-text {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  .gallery-layer .q-opts {
    gap: 7px !important;
    width: 100%;
  }

  .gallery-layer .q-opt {
    padding: 10px 14px !important;
    border-radius: 3px !important;
  }

  .gallery-layer .opt-ltr {
    font-size: 12px !important;
    min-width: 16px !important;
  }

  .gallery-layer .opt-txt {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .gallery-layer .q-feedback {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    min-height: 12px !important;
    margin-top: 6px !important;
  }

  /* Welcome / success slide */
  .gallery-layer .welcome-slide {
    padding: 24px 22px !important;
    gap: 14px !important;
  }

  .gallery-layer .w-label {
    font-size: 11px !important;
    letter-spacing: 3.5px !important;
  }

  .gallery-layer .w-rule {
    width: 40px !important;
  }

  .gallery-layer .w-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .gallery-layer .w-sub {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .gallery-layer .w-btn {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    padding: 12px 22px !important;
  }

  /* Lock overlay */
  .gallery-layer .lock-icon  { font-size: 28px !important; }
  .gallery-layer .lock-body  { font-size: 18px !important; line-height: 1.6 !important; }
  .gallery-layer .lock-link  { font-size: 11px !important; letter-spacing: 2px !important; padding: 12px 22px !important; }


  /* ================================================================
     ACCOUNT PAGE (account.html)  –  .gallery-account
     IG account yes/no question.
     ================================================================ */

  .gallery-layer .ig-logo {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
    opacity: 1 !important;
  }

  .gallery-account .gallery-layer .ig-logo {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 12px !important;
  }

  .gallery-layer .ig-question {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    opacity: 1 !important;
  }

  .gallery-account .gallery-layer .ig-question {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }

  .gallery-layer .ig-rule {
    width: 48px !important;
    height: 1px !important;
    margin: 0 auto 16px !important;
    opacity: 1 !important;
  }

  .gallery-layer .ig-desc {
    font-size: 18px !important;
    line-height: 1.45 !important;
    margin-bottom: 22px !important;
    opacity: 1 !important;
  }

  .gallery-account .gallery-layer .ig-desc {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }

  .gallery-layer .ig-answers {
    flex-direction: column !important;
    gap: 10px !important;
    width: 78% !important;
    opacity: 1 !important;
  }

  .gallery-account .gallery-layer .ig-answers {
    width: 82% !important;
    gap: 8px !important;
    transform: translateY(-8px) !important;
  }

  .gallery-layer .ig-btn,
  .gallery-layer .a-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 18px !important;
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
  }

  .gallery-account .gallery-layer .ig-trademark {
    bottom: 5px !important;
  }


  /* ================================================================
     PORTFOLIO PAGES (long.html / short.html)
     ================================================================ */

  /* Hide the fading IG demo background and watermark */
  .gallery-layer .pf-bg,
  .gallery-layer .pf-watermark,
  .gallery-layer .pf-disclaimer {
    opacity: 0 !important;
  }

  /* Show content immediately */
  .gallery-layer .st-content,
  .gallery-layer .lt-content {
    opacity: 1 !important;
    padding: 24px 20px 18px !important;
    gap: 14px;
  }

  .gallery-layer .st-title,
  .gallery-layer .lt-title,
  .gallery-layer .c-step {
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    line-height: 1.35 !important;
  }

  .gallery-layer .st-rule,
  .gallery-layer .lt-rule,
  .gallery-layer .c-rule,
  .gallery-layer .a-rule {
    width: 48px !important;
    height: 1px !important;
    margin: 0 auto 16px !important;
  }

  .gallery-layer .st-question,
  .gallery-layer .lt-question {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  .gallery-layer .st-textarea,
  .gallery-layer .lt-textarea {
    font-size: 18px !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    border-radius: 4px !important;
  }

  .gallery-layer .st-buttons,
  .gallery-layer .lt-buttons {
    gap: 12px !important;
  }

  .gallery-layer .st-btn,
  .gallery-layer .lt-btn {
    min-height: 48px;
    padding: 14px 20px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;
  }

  .gallery-layer .st-status,
  .gallery-layer .lt-status {
    font-size: 11px !important;
    min-height: 18px !important;
  }

  .gallery-layer .st-risk,
  .gallery-layer .lt-risk {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.15px !important;
  }

  .gallery-layer .pf-header {
    padding-top: 18px !important;
    opacity: 1 !important;
  }

  .gallery-layer .pf-title {
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
    line-height: 1.35 !important;
  }

  .gallery-layer .pf-sub {
    font-size: 18px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .gallery-layer .pf-image-wrap {
    opacity: 1 !important;
    padding: 10px 0 !important;
  }

  .gallery-layer .pf-returns {
    gap: 18px !important;
    flex-wrap: wrap;
  }

  .gallery-layer .pf-badge      { gap: 7px !important; }
  .gallery-layer .pf-badge-label { font-size: 10px !important; letter-spacing: 1.5px !important; }
  .gallery-layer .pf-badge-num   { font-size: 16px !important; }

  .gallery-subscribe .gallery-layer .ig-trademark,
  .gallery-account .gallery-layer .ig-trademark,
  .gallery-home .gallery-layer .canvas-ig-disclaimer span,
  .gallery-demo .gallery-layer .pf-risk {
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9px !important;
    font-weight: 300 !important;
    letter-spacing: 0.35px !important;
    line-height: 1.3 !important;
    color: rgba(26, 18, 8, 0.48) !important;
    opacity: 0.62 !important;
    text-align: center !important;
    white-space: normal !important;
    pointer-events: none !important;
  }

  .gallery-layer .pf-disclaimer {
    font-size: 9px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  .gallery-demo .gallery-layer .pf-footer {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 42px !important;
    z-index: 5 !important;
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: center !important;
  }

  .gallery-demo .gallery-layer .pf-returns {
    display: grid !important;
    justify-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    opacity: 1 !important;
    text-align: center !important;
  }

  .gallery-demo .gallery-layer .pf-badge {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .gallery-demo .gallery-layer .pf-risk {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(100%, 280px) !important;
    justify-self: center !important;
    padding: 0 !important;
    font-size: 7.6px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.25px !important;
    text-align: center !important;
  }


  /* ================================================================
     INTRO / FORM PAGES (intro.html, subscribe.html, aim.html …)
     ================================================================ */

  .gallery-layer .form-slide {
    justify-content: flex-start !important;
    padding: 18px 16px 14px !important;
  }

  .gallery-layer .intro-field {
    font-size: 16px !important;
    line-height: 1.3 !important;
    padding: 10px 12px !important;
    border-radius: 4px !important;
    opacity: 1 !important;
  }

  .gallery-layer #intro-name,
  .gallery-layer #intro-email {
    height: 44px !important;
    margin-bottom: 8px !important;
  }

  /* Reduced textarea height so submit button + s-note are both visible */
  .gallery-layer #intro-text {
    height: 100px !important;
    min-height: 100px !important;
    margin-bottom: 0 !important;
  }

  /* Pull submit button OUT of the textarea on mobile —
     show it as a full-width standalone button below.    */
  .gallery-layer .textarea-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .gallery-layer .submit-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    padding: 12px 18px !important;
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    border-radius: 3px !important;
    border-width: 1px !important;
    background: rgba(201, 168, 76, 0.12) !important;
    text-align: center !important;
  }

  .gallery-layer .s-note {
    font-size: 11px !important;
    min-height: 14px !important;
    margin-top: 6px !important;
  }


  /* ================================================================
     COMMUNITY PAGE (community.html)
     ================================================================ */

  .gallery-layer .c-panel {
    padding: 22px 18px 16px !important;
  }

  .gallery-layer .c-title {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }

  .gallery-layer .c-scroll {
    padding: 12px 14px 16px !important;
  }

  .gallery-layer .c-card {
    padding: 16px 0 !important;
  }

  .gallery-layer .c-name  { font-size: 20px !important; }
  .gallery-layer .c-text,
  .gallery-layer .c-loading { font-size: 17px !important; line-height: 1.45 !important; }


  /* ================================================================
     DISCLAIMER / IG TRADEMARK (shared)
     ================================================================ */

  .gallery-layer .canvas-ig-disclaimer span {
    white-space: normal !important;
  }


  /* ================================================================
     SUBSCRIBE PAGE (subscribe.html)  –  .gallery-subscribe
     Force content visible immediately; scale tiny desktop font sizes.
     ================================================================ */

  .gallery-subscribe .gallery-layer .sub-icon,
  .gallery-subscribe .gallery-layer .sub-heading,
  .gallery-subscribe .gallery-layer .sub-rule,
  .gallery-subscribe .gallery-layer .sub-text,
  .gallery-subscribe .gallery-layer .sub-answers {
    opacity: 1 !important;
  }

  .gallery-layer .sub-icon {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 12px !important;
  }

  .gallery-layer .sub-heading {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }

  .gallery-layer .sub-rule {
    width: 40px !important;
    height: 1px !important;
    margin: 0 auto 12px !important;
  }

  .gallery-layer .sub-text {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
  }

  .gallery-layer .sub-answers {
    gap: 12px !important;
    width: 82% !important;
  }

  .gallery-layer .sub-btn {
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    padding: 13px 18px !important;
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .gallery-layer .sub-carousel-wrap {
    width: 100% !important;
  }

  .gallery-layer .sub-via {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .gallery-layer .sub-carousel {
    height: 44px !important;
  }

  .gallery-layer .sub-carousel img {
    height: 44px !important;
  }


  /* ================================================================
     AIM PAGE (aim.html)  –  .gallery-aim
     Force content visible; scale all tiny desktop sizes.
     ================================================================ */

  .gallery-aim .gallery-layer .aim-header,
  .gallery-aim .gallery-layer .aim-sections,
  .gallery-aim .gallery-layer .aim-footer {
    opacity: 1 !important;
  }

  .gallery-layer .aim-eyebrow {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 6px !important;
  }

  .gallery-layer .aim-title {
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.1 !important;
  }

  .gallery-layer .aim-section {
    padding: 14px 16px !important;
    gap: 8px !important;
  }

  .gallery-layer .aim-section-label {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .gallery-layer .aim-section-text {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  .gallery-layer .aim-btn {
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    padding: 12px 22px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .gallery-layer .aim-footer {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }


  /* ================================================================
     COMMUNITY / IDEAS PAGES (community, short-ideas, long-ideas)
     ================================================================ */

  .gallery-layer .c-step {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 4px !important;
  }

  .gallery-layer .c-rule {
    width: 32px !important;
    height: 1px !important;
    margin: 6px auto !important;
  }

  .gallery-layer .c-header {
    padding: 14px 16px 10px !important;
  }

  .gallery-layer .c-footer {
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    text-align: center !important;
    color: rgba(26, 18, 8, 0.55) !important;
    font-style: italic !important;
  }


  /* ================================================================
     SKIP BUTTON
     ================================================================ */

  .skip-intro {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }


  /* ================================================================
     REDUCED MOTION
     ================================================================ */

  @media (prefers-reduced-motion: reduce) {
    .gallery-image,
    .gallery-layer,
    .canvas-panel,
    .canvas-welcome,
    .canvas-logo,
    .logo-stack img,
    .entry-plaque,
    .gallery-stage::after {
      transition-duration: 1ms !important;
    }

    .entry-plaque {
      animation-duration: 1ms !important;
    }
  }

}


/* Phone landscape has very little vertical room. Keep the same simplified
   canvas/frame treatment, but compress form controls so navigation stays
   inside the framed canvas instead of being clipped below it. */
@media (max-width: 900px) and (orientation: landscape) {
  .gallery-layer .canvas-panel,
  .gallery-layer .canvas-welcome,
  .gallery-layer .canvas-logo,
  .gallery-layer .canvas-ig-disclaimer,
  .gallery-home .gallery-layer .canvas-panel,
  .gallery-home .gallery-layer .canvas-welcome,
  .gallery-home .gallery-layer .canvas-logo,
  .gallery-home .gallery-layer .canvas-ig-disclaimer,
  .gallery-challenge .gallery-layer .canvas-panel {
    left: 6vw !important;
    top: 5dvh !important;
    width: 88vw !important;
    height: 68dvh !important;
  }

  .gallery-layer .canvas-cta,
  .gallery-home .gallery-layer .canvas-cta,
  .gallery-challenge .gallery-layer .canvas-cta {
    left: 6vw !important;
    top: 76dvh !important;
    width: 88vw !important;
    height: 13dvh !important;
  }

  .gallery-layer .form-slide {
    padding: 8px 16px 6px !important;
  }

  .gallery-layer .step-label {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 4px !important;
  }

  .gallery-layer .slide-rule {
    margin: 0 auto 8px !important;
  }

  .gallery-layer .slide-title {
    font-size: clamp(20px, 4vw, 24px) !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
  }

  .gallery-layer .intro-field {
    font-size: 14px !important;
    padding: 7px 10px !important;
  }

  .gallery-layer #intro-name,
  .gallery-layer #intro-email {
    height: 36px !important;
    margin-bottom: 6px !important;
  }

  .gallery-layer #intro-text {
    height: 54px !important;
    min-height: 54px !important;
  }

  .gallery-layer .submit-btn {
    min-height: 34px !important;
    margin-top: 5px !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
  }

  .gallery-layer .s-note {
    margin-top: 3px !important;
  }
}


/* Rotate overlay base styles (hidden by default, shown via media query) */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(201, 168, 76, 0.07), transparent 58%),
    linear-gradient(180deg, #16130f 0%, #0e0c0a 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 32px;
}

#rotate-overlay .rot-icon {
  font-size: 52px;
  line-height: 1;
  animation: rotateHint 2400ms ease-in-out infinite;
}

#rotate-overlay .rot-phone {
  position: relative;
  width: 62px;
  height: 96px;
  border: 2px solid rgba(232, 210, 158, 0.86);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 3px rgba(201, 168, 76, 0.14),
    0 0 24px rgba(201, 168, 76, 0.22);
  animation: rotateHint 2600ms ease-in-out infinite;
}

#rotate-overlay .rot-phone::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(232, 210, 158, 0.72);
  border-radius: 50%;
  transform: translateX(-50%);
}

#rotate-overlay .rot-phone::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(232, 210, 158, 0.58);
  transform: translateX(-50%);
}

#rotate-overlay .rot-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: rgba(232, 210, 158, 0.92);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

#rotate-overlay .rot-sub {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.65);
}

#rotate-overlay .rot-plaque {
  margin-top: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-style: italic;
  color: rgba(201, 168, 76, 0.5);
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg);   opacity: 0.7; }
  45%       { transform: rotate(-90deg); opacity: 1;   }
  55%       { transform: rotate(-90deg); opacity: 1;   }
}

@media (max-width: 900px) and (orientation: landscape) {
  #rotate-overlay {
    display: flex !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #rotate-overlay {
    display: flex !important;
  }
}