/* Bridge: studio desktop + blackgold phone home on same index.html */

/* Desktop / tablet wide: phone home stays hidden */
.bg-m { display: none; }

@media (max-width: 768px) {
  /* Hide studio chrome — phone uses .bg-m */
  body.studio.page-blackgold .studio-menu,
  body.studio.page-blackgold .studio-stage,
  body.studio.page-blackgold main.studio-stage,
  body.studio.page-blackgold .studio-trustband,
  body.studio.page-blackgold .studio-contact,
  body.studio.page-blackgold .studio-footer {
    display: none !important;
  }

  /* Keep the 5 theme stars; kill the old 3-dot switcher */
  body.studio.page-blackgold .studio-themes {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: max(4px, env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
    z-index: 140;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 8px 5px;
    border-radius: 999px;
    border: 1px solid rgba(214, 181, 106, 0.28);
    background: rgba(12, 17, 24, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
  }

  /* Star paint (studio.css is desktop-only on home) */
  body.studio.page-blackgold .studio-star {
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: transparent;
    opacity: 0.75;
    border-radius: 50%;
  }
  body.studio.page-blackgold .studio-star::after,
  body.studio.page-blackgold .studio-star::before {
    content: "";
    position: absolute;
    inset: 1px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    pointer-events: none;
  }
  body.studio.page-blackgold .studio-star::after {
    background: rgba(255, 255, 255, 0.5);
  }
  body.studio.page-blackgold .studio-star::before {
    inset: 3px;
    z-index: 1;
    background: #888;
  }
  body.studio.page-blackgold .studio-star.is-active { opacity: 1; }
  body.studio.page-blackgold .studio-star[data-studio-theme="black"]::before { background: #000; }
  body.studio.page-blackgold .studio-star[data-studio-theme="sky"]::before { background: #9ec5f5; }
  body.studio.page-blackgold .studio-star[data-studio-theme="beige"]::before { background: #e2c89a; }
  body.studio.page-blackgold .studio-star[data-studio-theme="light"]::before { background: #f0efe9; }
  body.studio.page-blackgold .studio-star[data-studio-theme="coffee"]::before { background: #6b4228; }

  body.studio.page-blackgold #bg-m-themes,
  body.studio.page-blackgold #home-theme-switch,
  body.studio.page-blackgold .home-theme-switch {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.studio.page-blackgold {
    --gold: #d6b56a;
    --gold-deep: #9a7428;
    --paper: #f4efe4;
    --ink: #070707;
    --soft: rgba(244, 239, 228, 0.62);
    margin: 0;
    background: #070707;
  }

  body.studio.page-blackgold .bg-m {
    display: block !important;
  }

  /* —— Phone home colors driven by the same 5 studio stars —— */
  body.studio.page-blackgold[data-studio-theme="sky"] {
    --gold: #1d4ed8;
    --gold-deep: #1e40af;
    --paper: #0f172a;
    --ink: #f3f6fb;
    --soft: rgba(15, 23, 42, 0.62);
    background: #eef2ff;
  }
  body.studio.page-blackgold[data-studio-theme="beige"] {
    --gold: #8b6914;
    --gold-deep: #6b5010;
    --paper: #1c140a;
    --ink: #f6f1e8;
    --soft: rgba(28, 20, 10, 0.58);
    background: #f6f1e8;
  }
  body.studio.page-blackgold[data-studio-theme="light"] {
    /* Warm platinum — readable gold, not flat gray */
    --gold: #7a5a12;
    --gold-deep: #5c440e;
    --paper: #161412;
    --ink: #f4f4f2;
    --soft: rgba(22, 20, 18, 0.58);
    background: #f7f5f0;
  }
  body.studio.page-blackgold[data-studio-theme="coffee"] {
    --gold: #d4a574;
    --gold-deep: #8b5a2b;
    --paper: #f5e6d3;
    --ink: #2a1a12;
    --soft: rgba(245, 230, 211, 0.62);
    background: #2a1a12;
  }

  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m {
    color: var(--paper);
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(59, 130, 246, 0.18), transparent 58%),
      linear-gradient(180deg, #f8fafc, #eef2ff 55%, #f3f6fb);
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m {
    color: var(--paper);
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(212, 175, 55, 0.18), transparent 58%),
      linear-gradient(180deg, #fffdf8, #f6f1e8 55%, #f3ebe0);
  }
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m {
    color: var(--paper);
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(156, 163, 175, 0.2), transparent 58%),
      linear-gradient(180deg, #ffffff, #f4f4f2 55%, #ecece8);
  }
  body.studio.page-blackgold[data-studio-theme="coffee"] .bg-m {
    color: var(--paper);
    background:
      radial-gradient(90% 55% at 100% 0%, rgba(212, 165, 116, 0.2), transparent 58%),
      radial-gradient(70% 40% at 0% 30%, rgba(107, 66, 40, 0.35), transparent 55%),
      #2a1a12;
  }

  body.studio.page-blackgold[data-studio-theme="sky"] .studio-themes,
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-themes,
  body.studio.page-blackgold[data-studio-theme="light"] .studio-themes {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-themes {
    border-color: rgba(139, 105, 20, 0.28);
    background: rgba(255, 253, 248, 0.96);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .studio-star:hover,
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-star:hover,
  body.studio.page-blackgold[data-studio-theme="light"] .studio-star:hover,
  body.studio.page-blackgold[data-studio-theme="sky"] .studio-star.is-active,
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-star.is-active,
  body.studio.page-blackgold[data-studio-theme="light"] .studio-star.is-active {
    outline: 1px solid rgba(37, 99, 235, 0.55);
    outline-offset: 3px;
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-star:hover,
  body.studio.page-blackgold[data-studio-theme="beige"] .studio-star.is-active {
    outline-color: rgba(166, 124, 26, 0.65);
  }
  body.studio.page-blackgold[data-studio-theme="light"] .studio-star:hover,
  body.studio.page-blackgold[data-studio-theme="light"] .studio-star.is-active {
    outline-color: rgba(122, 95, 18, 0.6);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m {
    color: #0f172a;
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-stage__text,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-stage__text,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-stage__text,
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-stage__tag,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-stage__tag,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-stage__tag {
    color: rgba(15, 23, 42, 0.72);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-tile,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-tile,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-tile,
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-fl__card,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-fl__card,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-fl__card {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-fl__head h2,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-fl__head h2,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-fl__head h2,
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-fl__card b,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-fl__card b,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-fl__card b {
    color: #0f172a;
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-fl__head p,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-fl__head p,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-fl__head p,
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-fl__card span,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-fl__card span,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-fl__card span {
    color: rgba(15, 23, 42, 0.72);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-rail__more a,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-rail__more a,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-rail__more a {
    color: rgba(15, 23, 42, 0.78);
    border-bottom-color: rgba(15, 23, 42, 0.28);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-links > a,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-links > a,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-links > a {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
  }
  body.studio.page-blackgold[data-studio-theme="coffee"] .studio-themes {
    border-color: rgba(212, 165, 116, 0.35);
    background: rgba(42, 26, 18, 0.88);
  }

  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-top,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-top,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-top {
    background: rgba(255, 255, 255, 0.9);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-brand__text strong,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-brand__text strong,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-brand__text strong {
    color: var(--gold);
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-stage__title,
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-stage__title,
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-stage__title {
    color: #0f172a;
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-stage__title {
    color: #1c140a;
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-stage__title em {
    background: linear-gradient(180deg, #60a5fa, #1d4ed8 55%, #1e3a8a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-stage__title em {
    background: linear-gradient(180deg, #e2c57a, #8b6914 55%, #6b5010);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* Platinum light: warm gold (not cool gray) — matches home-blackgold */
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-stage__title em {
    background: linear-gradient(105deg, #7a5a12 0%, #b8922a 40%, #8a6914 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  body.studio.page-blackgold[data-studio-theme="sky"] .bg-m-cta {
    color: #fff;
    background: linear-gradient(105deg, #1d4ed8, #3b82f6 55%, #60a5fa);
  }
  body.studio.page-blackgold[data-studio-theme="beige"] .bg-m-cta {
    color: #1c140a;
    background: linear-gradient(105deg, #b8892a, #e2c57a 55%, #f5e3ad);
  }
  body.studio.page-blackgold[data-studio-theme="light"] .bg-m-cta {
    color: #111;
    background: linear-gradient(135deg, #9b6a19, #f5d77f);
    border: none;
  }
  body.studio.page-blackgold[data-studio-theme="coffee"] .bg-m-cta {
    /* Dark brown on mid-brown failed (~2.9:1); lift the gold ramp */
    color: #1a1008;
    background: linear-gradient(105deg, #c49a62, #e0b888 55%, #f5d6a8);
  }

  /* Phone home: Portfolio / Pricing stay plain — active pill only on inner pages */

  /* Guarantees + payments on phone home */
  .bg-m-trust {
    margin: 8px 16px 20px;
    padding: 16px 18px 14px;
    border: 1px solid rgba(214, 181, 106, 0.35);
    background: linear-gradient(180deg, rgba(214, 181, 106, 0.1), rgba(7, 7, 7, 0.55));
  }
  .bg-m-trust__g {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }
  .bg-m-trust__g li {
    padding: 10px 0;
    border-top: 1px solid rgba(214, 181, 106, 0.2);
  }
  .bg-m-trust__g li:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .bg-m-trust__g li:last-child {
    padding-bottom: 0;
  }
  .bg-m-trust__g strong {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-size: 0.9rem;
  }
  .bg-m-trust__g span {
    display: block;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--soft);
  }
  .bg-m-trust h3 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .bg-m-trust__pay {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  .bg-m-trust__pay span {
    padding: 6px 9px;
    border: 1px solid rgba(214, 181, 106, 0.35);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--paper);
  }
  .bg-m-trust__link {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
  }

  /* Phone hero entrance — shorter stagger than desktop */
  body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-brand,
  body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__tag,
  body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__title,
  body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__text,
  body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-cta {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }

  body.studio.page-blackgold.is-hero-ready .bg-m-brand {
    animation: studioHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  body.studio.page-blackgold.is-hero-ready .bg-m-stage__tag {
    animation: studioHeroIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
  }
  body.studio.page-blackgold.is-hero-ready .bg-m-stage__title {
    animation: studioHeroIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
  }
  body.studio.page-blackgold.is-hero-ready .bg-m-stage__text {
    animation: studioHeroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }
  body.studio.page-blackgold.is-hero-ready .bg-m-cta {
    animation: studioHeroIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
  }

  /* Soft gold underline via ::after — never overwrite em gradient text fill */
  body.studio.page-blackgold .bg-m-stage__title em {
    position: relative;
  }
  body.studio.page-blackgold.is-hero-ready .bg-m-stage__title em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.06em;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(214, 181, 106, 0.55), transparent);
    transform-origin: left center;
    animation: bgMTitleSheen 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  }

  @keyframes bgMTitleSheen {
    from { transform: scaleX(0); opacity: 0.85; }
    to { transform: scaleX(1); opacity: 1; }
  }

  .bg-m-rail,
  .bg-m-fl {
    content-visibility: auto;
    contain-intrinsic-size: 1px 480px;
  }

  .bg-m-tile,
  .bg-m-fl__card {
    transition: transform 0.22s ease;
  }
  .bg-m-tile:active,
  .bg-m-fl__card:active {
    transform: scale(0.98);
  }

  @media (prefers-reduced-motion: reduce) {
    body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-brand,
    body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__tag,
    body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__title,
    body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-stage__text,
    body.studio.page-blackgold.is-hero-armed:not(.is-hero-ready) .bg-m-cta {
      opacity: 1;
      transform: none;
    }
    body.studio.page-blackgold.is-hero-ready .bg-m-brand,
    body.studio.page-blackgold.is-hero-ready .bg-m-stage__tag,
    body.studio.page-blackgold.is-hero-ready .bg-m-stage__title,
    body.studio.page-blackgold.is-hero-ready .bg-m-stage__text,
    body.studio.page-blackgold.is-hero-ready .bg-m-cta {
      animation: none !important;
    }
    body.studio.page-blackgold.is-hero-ready .bg-m-stage__title em::after {
      animation: none !important;
      transform: scaleX(1);
      opacity: 1;
    }
    .bg-m-rail,
    .bg-m-fl {
      animation: none !important;
    }
  }
}

/* Desktop home — soft scroll reveals already via data-studio-reveal; gold menu underline pulse */
@media (min-width: 769px) {
  body.studio[data-page="home"] .studio-menu__nav a {
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }
  body.studio[data-page="home"] .build-dev {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.studio[data-page="home"] .build-dev:hover {
    transform: translateY(-4px);
  }
  @media (prefers-reduced-motion: reduce) {
    body.studio[data-page="home"] .build-dev:hover { transform: none; }
  }
}

@media (min-width: 769px) {
  body.studio[data-page="home"] .build-cats,
  body.studio[data-page="home"] .build-industries,
  body.studio[data-page="home"] .build-cta,
  body.studio[data-page="home"] .studio-reviews,
  body.studio[data-page="home"] .studio-contact {
    content-visibility: auto;
    contain-intrinsic-size: 1px 640px;
  }
}