/* =========================================================
   FITZMEDIA MOBILE CLEAN FINAL
   Tight, clean phone layout loaded after command.css.
   ========================================================= */

@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body {
    font-size: 15px !important;
  }

  .shell {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px !important;
    overflow-x: hidden !important;
  }

  .hud-canvas,
  .shell-corners,
  .side-dots,
  .cursor-glow {
    display: none !important;
  }

  /* Header */
  .topbar {
    position: sticky !important;
    top: 6px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 54px !important;
    padding: 8px 9px !important;
    border-radius: 15px !important;
    background: rgba(1, 8, 6, .94) !important;
    backdrop-filter: blur(14px) !important;
  }

  .brand-lock {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 7px !important;
  }

  .brand-main {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .brand-sub {
    font-size: 9px !important;
    line-height: 1.05 !important;
    letter-spacing: .08em !important;
    max-width: 132px !important;
    white-space: normal !important;
  }

  .mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 62px !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }

  .top-cta {
    display: none !important;
  }

  .nav {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 16px !important;
    background: rgba(1, 8, 6, .98) !important;
    border: 1px solid rgba(109,255,169,.22) !important;
    box-shadow: 0 22px 58px rgba(0,0,0,.58) !important;
  }

  .nav.open,
  .nav.is-open,
  body.menu-open .nav,
  .topbar.menu-open .nav {
    display: grid !important;
  }

  .nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 39px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    text-align: center !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(109,255,169,.10) !important;
  }

  /* General page spacing */
  main,
  .page-main {
    padding: 14px 0 0 !important;
    display: grid !important;
    gap: 14px !important;
  }

  section {
    margin: 0 !important;
    max-width: 100% !important;
  }

  .page-hero {
    padding: 18px 4px 8px !important;
    text-align: left !important;
  }

  .page-hero h1,
  .hero-title {
    font-size: clamp(36px, 13vw, 56px) !important;
    line-height: .9 !important;
    letter-spacing: -.045em !important;
    margin-bottom: 10px !important;
  }

  .page-hero p,
  .hero-copy p {
    font-size: 15px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
  }

  .eyebrow,
  .panel-label {
    font-size: 11px !important;
    letter-spacing: .11em !important;
  }

  /* Home hero */
  .hero {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 2px 10px !important;
  }

  .hero-copy {
    order: 1 !important;
  }

  .hero-services {
    font-size: 12px !important;
    letter-spacing: .08em !important;
    margin: 8px 0 10px !important;
  }

  .brand-stage {
    order: 2 !important;
    min-height: 210px !important;
    max-height: 230px !important;
    transform: scale(.68) !important;
    transform-origin: center top !important;
    margin: -6px 0 -42px !important;
  }

  .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .cmd-btn,
  .play-link {
    width: 100% !important;
    min-height: 43px !important;
    padding: 11px 14px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  /* Grids and panels */
  .dashboard,
  .grid-2,
  .grid-3,
  .service-grid,
  .right-stack,
  .portfolio-grid,
  .blog-grid,
  .blog-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dash-panel,
  .glass,
  .mini-card,
  .service-card,
  .portfolio-card,
  .blog-card,
  .post-card,
  .blog-post-card,
  .article-card,
  [data-post-card],
  [data-blog-card] {
    border-radius: 16px !important;
    padding: 12px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .dash-panel {
    padding: 13px !important;
  }

  .glass h2,
  .glass h3,
  .mini-card h3,
  .dash-panel h2,
  .dash-panel h3 {
    font-size: 22px !important;
    line-height: 1.05 !important;
    margin-bottom: 7px !important;
  }

  .glass p,
  .mini-card p,
  .dash-panel p {
    font-size: 14px !important;
    line-height: 1.38 !important;
  }

  /* Services become tight rows */
  .service-card {
    display: grid !important;
    grid-template-columns: 46px 1fr 24px !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: auto !important;
    text-align: left !important;
  }

  .service-card .icon-line {
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  .service-card h3,
  .service-card h3 span {
    font-size: 16px !important;
    line-height: 1.02 !important;
    text-align: left !important;
    white-space: normal !important;
    transform: none !important;
    margin: 0 !important;
  }

  .service-card p {
    grid-column: 2 / 3 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
  }

  .service-card .arrow {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
  }

  .mini-card {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .mini-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .bottom-strip {
    display: grid !important;
    gap: 6px !important;
    padding: 11px !important;
    border-radius: 15px !important;
    text-align: center !important;
    font-size: 12px !important;
  }

  /* Blog cards tighter */
  .blog-card,
  .post-card,
  .blog-post-card,
  .article-card,
  [data-post-card],
  [data-blog-card] {
    padding: 0 !important;
  }

  .blog-card .media,
  .blog-card .image,
  .blog-card .thumb,
  .post-card .media,
  .post-card .image,
  .post-card .thumb,
  .blog-post-card .media,
  .blog-post-card .image,
  .blog-post-card .thumb,
  .article-card .media,
  .article-card .image,
  .article-card .thumb,
  [data-post-card] .media,
  [data-blog-card] .media,
  .blog-card > img:first-child,
  .post-card > img:first-child,
  .blog-post-card > img:first-child,
  .article-card > img:first-child {
    height: 185px !important;
    min-height: 185px !important;
    max-height: 185px !important;
  }

  .blog-card img,
  .post-card img,
  .blog-post-card img,
  .article-card img,
  [data-post-card] img,
  [data-blog-card] img {
    height: 185px !important;
    max-height: 185px !important;
    object-fit: contain !important;
  }

  .blog-card .body,
  .blog-card .content,
  .post-card .body,
  .post-card .content,
  .blog-post-card .body,
  .blog-post-card .content,
  .article-card .body,
  .article-card .content,
  [data-post-card] .body,
  [data-post-card] .content,
  [data-blog-card] .body,
  [data-blog-card] .content {
    padding: 13px !important;
  }

  .blog-card h2,
  .blog-card h3,
  .post-card h2,
  .post-card h3,
  .blog-post-card h2,
  .blog-post-card h3,
  .article-card h2,
  .article-card h3,
  [data-post-card] h2,
  [data-post-card] h3,
  [data-blog-card] h2,
  [data-blog-card] h3 {
    font-size: 20px !important;
    line-height: 1.05 !important;
    margin-bottom: 7px !important;
  }

  .blog-card p,
  .post-card p,
  .blog-post-card p,
  .article-card p,
  [data-post-card] p,
  [data-blog-card] p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .blog-read-more,
  .blog-card .green-link,
  .post-card .green-link,
  .blog-post-card .green-link,
  .article-card .green-link,
  [data-post-card] .green-link,
  [data-blog-card] .green-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    margin-top: 10px !important;
  }

  /* Portfolio */
  .portfolio-filter-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 7px !important;
  }

  .filter-pill {
    min-height: 38px !important;
    padding: 9px 8px !important;
    font-size: 11px !important;
    text-align: center !important;
  }

  .portfolio-card {
    padding: 0 !important;
  }

  .portfolio-card .portfolio-media {
    aspect-ratio: 4 / 3 !important;
  }

  .portfolio-body {
    padding: 13px !important;
  }

  .portfolio-body h2 {
    font-size: 20px !important;
    line-height: 1.05 !important;
  }

  .portfolio-body p {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Sentra page */
  .sentra-page {
    gap: 12px !important;
  }

  .sentra-status-card,
  .public-theater-showcase,
  .core-v3-showcase {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px !important;
    max-width: 100% !important;
  }

  .sentra-core-copy h2,
  .sentra-status-card h2,
  .sentra-safe-note h2 {
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: .96 !important;
  }

  .public-theater-core {
    width: 238px !important;
    max-width: 78vw !important;
    height: 290px !important;
    max-height: 290px !important;
    justify-self: center !important;
    border-radius: 19px !important;
  }

  /* Contact/form */
  .contact-form,
  form.glass {
    display: grid !important;
    gap: 8px !important;
  }

  .input,
  input,
  textarea,
  select {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    border-radius: 13px !important;
  }

  textarea {
    min-height: 112px !important;
  }

  /* Social links */
  .social-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .social-links a {
    width: 100% !important;
    min-height: 36px !important;
    padding: 9px 10px !important;
    font-size: 11px !important;
  }

  .social-links a:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* Footer */
  .footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    text-align: center !important;
    padding: 14px 8px 18px !important;
    font-size: 11px !important;
  }

  .footer a {
    justify-self: center !important;
  }
}

@media (max-width: 430px) {
  .shell {
    padding: 6px !important;
  }

  .topbar {
    top: 5px !important;
    padding: 7px 8px !important;
  }

  .brand-main {
    font-size: 16px !important;
  }

  .brand-sub {
    max-width: 112px !important;
    font-size: 8.5px !important;
  }

  .mobile-toggle {
    min-width: 58px !important;
    font-size: 10px !important;
  }

  .hero-title,
  .page-hero h1 {
    font-size: clamp(34px, 12.5vw, 48px) !important;
  }

  .brand-stage {
    min-height: 190px !important;
    max-height: 200px !important;
    transform: scale(.6) !important;
    margin-bottom: -52px !important;
  }

  .public-theater-core {
    width: 225px !important;
    height: 275px !important;
  }
}

/* =========================================================
   PREMIUM MOBILE HOME HERO
   Replaces the cheap-feeling giant Shoot/Cut/Post hero on phones.
   ========================================================= */

.mobile-premium-hero {
  display: none;
}

@media (max-width: 820px) {

  /* Hide desktop hero pieces that do not work on mobile */
  body:has(.mobile-premium-hero) .hero .hero-title,
  body:has(.mobile-premium-hero) .hero .hero-services,
  body:has(.mobile-premium-hero) .hero .hero-copy > p,
  body:has(.mobile-premium-hero) .hero .button-row,
  body:has(.mobile-premium-hero) .hero .brand-stage,
  body:has(.mobile-premium-hero) .hero .side-dots {
    display: none !important;
  }

  body:has(.mobile-premium-hero) .hero {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  body:has(.mobile-premium-hero) .hero-copy {
    display: none !important;
  }

  .mobile-premium-hero {
    display: block !important;
    padding: 12px 0 8px !important;
  }

  .mobile-hero-frame {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(109,255,169,.32);
    background:
      radial-gradient(circle at 72% 18%, rgba(109,255,169,.20), transparent 30%),
      radial-gradient(circle at 20% 80%, rgba(78,234,255,.12), transparent 34%),
      linear-gradient(160deg, rgba(3,18,15,.98), rgba(0,5,6,.98));
    box-shadow:
      0 0 0 1px rgba(255,255,255,.035) inset,
      0 26px 70px rgba(0,0,0,.52),
      0 0 48px rgba(109,255,169,.10);
    padding: 18px;
    isolation: isolate;
  }

  .mobile-hero-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(109,255,169,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(109,255,169,.035) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .42;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
  }

  .mobile-hero-frame::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -58px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 1px solid rgba(109,255,169,.26);
    box-shadow:
      0 0 42px rgba(109,255,169,.16),
      inset 0 0 36px rgba(109,255,169,.08);
    animation: mobileHeroOrb 5s ease-in-out infinite;
  }

  .mobile-hero-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(109,255,169,.12), transparent);
    height: 34%;
    opacity: .48;
    animation: mobileHeroScan 4.5s linear infinite;
    pointer-events: none;
    z-index: 1;
  }

  .mobile-hero-topline {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
  }

  .mobile-hero-topline span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(109,255,169,.42);
    color: var(--green);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 0 24px rgba(109,255,169,.12);
  }

  .mobile-hero-topline b {
    color: rgba(235,255,241,.88);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .10em;
    line-height: 1.15;
  }

  .mobile-hero-mark {
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 24px;
    border: 1px solid rgba(109,255,169,.42);
    background:
      radial-gradient(circle at center, rgba(109,255,169,.22), rgba(109,255,169,.04) 52%, transparent 70%),
      rgba(0,0,0,.28);
    box-shadow:
      0 0 38px rgba(109,255,169,.18),
      inset 0 0 28px rgba(109,255,169,.08);
  }

  .mobile-hero-mark span {
    color: var(--green);
    font-family: var(--mono);
    font-size: 42px;
    font-weight: 900;
    text-shadow: 0 0 22px rgba(109,255,169,.42);
  }

  .mobile-premium-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 310px;
    margin: 0 0 10px !important;
    color: #f3fff7;
    font-family: var(--mono);
    font-size: 26px !important;
    line-height: 1.04 !important;
    letter-spacing: -.02em !important;
    text-transform: uppercase;
  }

  .mobile-premium-hero p {
    position: relative;
    z-index: 2;
    max-width: 330px;
    margin: 0 0 16px !important;
    color: rgba(223,255,235,.76);
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .mobile-hero-actions {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-bottom: 14px;
  }

  .mobile-hero-actions .cmd-btn {
    min-height: 42px !important;
    border-radius: 999px !important;
  }

  .mobile-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(109,255,169,.26);
    background: rgba(255,255,255,.035);
    color: rgba(235,255,241,.9);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .mobile-hero-chips {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .mobile-hero-chips span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(109,255,169,.18);
    background: rgba(0,0,0,.22);
    color: rgba(223,255,235,.78);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  /* Make rest of homepage feel more premium and less bulky */
  body:has(.mobile-premium-hero) .dashboard {
    margin-top: 4px !important;
  }

  body:has(.mobile-premium-hero) .dash-panel,
  body:has(.mobile-premium-hero) .mini-card,
  body:has(.mobile-premium-hero) .service-card,
  body:has(.mobile-premium-hero) .glass {
    background:
      linear-gradient(180deg, rgba(109,255,169,.055), rgba(0,0,0,.18)),
      rgba(2,10,8,.78) !important;
    border-color: rgba(109,255,169,.20) !important;
  }

  body:has(.mobile-premium-hero) .service-card {
    min-height: 72px !important;
  }

  body:has(.mobile-premium-hero) .bottom-strip {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .mobile-hero-frame {
    padding: 16px;
  }

  .mobile-premium-hero h1 {
    font-size: 24px !important;
  }

  .mobile-premium-hero p {
    font-size: 13px !important;
  }

  .mobile-hero-mark {
    width: 68px;
    height: 68px;
    border-radius: 21px;
  }

  .mobile-hero-mark span {
    font-size: 38px;
  }

  .mobile-hero-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

@keyframes mobileHeroScan {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  20% {
    opacity: .46;
  }
  100% {
    transform: translateY(330%);
    opacity: 0;
  }
}

@keyframes mobileHeroOrb {
  0%, 100% {
    transform: scale(.96);
    opacity: .58;
  }
  50% {
    transform: scale(1.08);
    opacity: .95;
  }
}