/* Mobile hero state 1: brighter baked portrait with visible lower body on real phones. */
@media (max-width: 768px) {
  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]),
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"],
  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) > .v3-hero-grid,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] > .v3-hero-grid {
    height: calc(100svh - 62px) !important;
    min-height: calc(100svh - 62px) !important;
  }

  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"]:not([data-synced-hero-index]),
  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"] {
    isolation: isolate;
    color-scheme: only light;
    forced-color-adjust: none;
    background-color: #03080c !important;
    background-image:
      radial-gradient(ellipse 110% 62% at 50% 74%, rgba(26, 139, 116, .10), transparent 62%),
      linear-gradient(180deg, #06110f 0%, #030a0d 43%, #02070b 100%) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }

  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"]:not([data-synced-hero-index])::after,
  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"]::after {
    content: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: none;
    background-position: 50% calc(100% - 62px);
    background-repeat: no-repeat;
    background-size: min(94vw, 390px) auto;
    opacity: 1;
    -webkit-filter: none;
    filter: none;
  }

  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"]:not([data-synced-hero-index])::before,
  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"]::before {
    content: none;
    z-index: 0;
    pointer-events: none;
  }

  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"]:not([data-synced-hero-index]) > .v3-hero-grid,
  .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"] > .v3-hero-grid {
    position: relative;
    z-index: 1;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-hero-copy,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-hero-copy {
    position: relative;
    z-index: 3;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-founder-frame,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-founder-frame {
    --hero1-portrait-bottom: 62px;
    --hero1-portrait-height: 430px;
    --hero1-orbit-size: min(96vw, 360px);
    --hero1-orbit-bottom: 98px;
    --hero1-disc-size: min(72vw, 282px);
    position: absolute;
    inset: 0 auto auto 50%;
    width: 100vw;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    align-self: flex-start;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
    filter: none;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-founder-frame::before,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-founder-frame::before {
    content: "";
    position: absolute;
    inset: auto auto var(--hero1-orbit-bottom) 50%;
    width: var(--hero1-orbit-size);
    height: var(--hero1-orbit-size);
    z-index: 0;
    border: 1px solid rgba(98, 212, 183, .72);
    border-radius: 50%;
    background:
      radial-gradient(ellipse 18px 1px at 12% 30%, rgba(244, 255, 251, .92), transparent 72%),
      radial-gradient(ellipse 1px 18px at 12% 30%, rgba(244, 255, 251, .86), transparent 72%),
      radial-gradient(circle at 12% 30%, #f4fffb 0 1px, rgba(122, 235, 205, .92) 2px, transparent 4px),
      radial-gradient(circle at 12% 30%, rgba(98, 212, 183, .60), transparent 14px),
      radial-gradient(circle at 50% 50%, transparent 0 72%, rgba(98, 212, 183, .13) 72.4%, transparent 72.9%),
      radial-gradient(circle at 52% 45%, rgba(98, 212, 183, .12), rgba(19, 67, 56, .06) 52%, transparent 73%);
    box-shadow: inset 0 0 0 28px rgba(98, 212, 183, .025), 0 0 30px rgba(98, 212, 183, .13);
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-founder-frame::after,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-founder-frame::after {
    content: "";
    position: absolute;
    inset: auto auto calc(var(--hero1-orbit-bottom) + 40px) 59%;
    width: var(--hero1-disc-size);
    height: var(--hero1-disc-size);
    z-index: 1;
    border: 1px solid rgba(98, 212, 183, .30);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 36%, rgba(126, 241, 211, .38), rgba(39, 155, 126, .21) 45%, rgba(14, 70, 59, .14) 68%, transparent 78%);
    box-shadow: inset 0 0 32px rgba(143, 246, 217, .14), 0 0 34px rgba(28, 156, 126, .14);
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-founder-light,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-founder-light {
    display: none;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v36-hero-image-founder,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v36-hero-image-founder {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 2;
    opacity: 1;
    transform: none;
  }

  .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v36-hero-image-founder > img,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v36-hero-image-founder > img {
    position: absolute;
    inset: auto auto calc(var(--hero1-portrait-bottom) + env(safe-area-inset-bottom)) 50%;
    display: block;
    width: auto;
    height: var(--hero1-portrait-height);
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: none;
    filter: saturate(.96) brightness(1.12) contrast(.94) drop-shadow(0 18px 24px rgba(0, 0, 0, .20));
    transform: translateX(-50%);
    transform-origin: center bottom;
  }
}

/* Keep the trousers above the fixed CTA when mobile browser chrome shortens the visual viewport. */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"]:not([data-synced-hero-index])::after,
    .public-site [data-site-editor-section="hero_1"][data-site-editor-background="image"][data-synced-hero-index="0"]::after {
      content: none;
      background-image: none;
    }

    .public-site [data-site-editor-section="hero_1"]:not([data-synced-hero-index]) .v3-founder-frame,
    .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="0"] .v3-founder-frame {
      /* Keep the cutout below the lead copy when browser chrome reduces the visual viewport. */
      --hero1-portrait-bottom: 93px;
      --hero1-portrait-height: min(430px, max(250px, calc(124.4dvh - 477px)));
      --hero1-orbit-size: min(96vw, 360px, calc(20dvh + 190px));
      --hero1-orbit-bottom: 98px;
      --hero1-disc-size: min(72vw, 282px, calc(15dvh + 143px));
    }
  }
}

/* Mobile hero states 2 and 3: lift only the dark work-photo brightness. */
@media (max-width: 768px) {
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="1"] .v36-hero-image-work > img,
  .public-site [data-site-editor-section="hero_1"][data-synced-hero-index="2"] .v36-hero-image-work > img {
    filter: saturate(.82) contrast(1.03) brightness(1.08);
  }
}

/* An empty editor image still gets the mobile cutout, without changing the desktop scene. */
@media (min-width: 769px) {
  .public-site [data-site-editor-section="hero_1"] [data-mobile-founder-fallback] {
    display: none !important;
  }
}