*{box-sizing:border-box}
:root{--black:#0b0b0a;--ivory:#f2eee4;--muted:#a7a196;--gold:#c49337;--line:#4a463e}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--ivory)}
body{font-family:Arial,Helvetica,sans-serif}
.page{position:relative;min-height:100svh;overflow:hidden;padding:clamp(24px,4vw,64px);display:flex;flex-direction:column;background:
radial-gradient(circle at 78% 38%,rgba(196,147,55,.12),transparent 30%),
linear-gradient(135deg,#0a0a09,#11110f 62%,#090909)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.28;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px)}
.brand{position:relative;z-index:2;display:flex;align-items:center;gap:14px;font:700 14px "Courier New",monospace;letter-spacing:.19em}
.mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #706b61;font-size:12px;letter-spacing:.08em}
.content{position:relative;z-index:2;margin:auto 0;max-width:1050px;padding:clamp(50px,8vh,100px) 0}
.eyebrow{margin:0 0 22px;color:var(--gold);font:700 clamp(10px,1vw,13px) "Courier New",monospace;letter-spacing:.24em}
h1{margin:0;font-size:clamp(72px,10.5vw,180px);line-height:.78;letter-spacing:-.075em;font-weight:700}
.message{margin:38px 0 0;max-width:650px;color:#c9c3b7;font:400 clamp(16px,1.45vw,22px)/1.55 "Courier New",monospace}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 23px;border:1px solid #625d54;color:var(--ivory);text-decoration:none;font:700 12px "Courier New",monospace;letter-spacing:.11em;transition:.2s ease}
.button:hover{border-color:var(--ivory);transform:translateY(-2px)}
.button.primary{background:var(--gold);border-color:var(--gold);color:#090909}
footer{position:relative;z-index:2;display:flex;gap:18px;color:#777167;font:700 10px "Courier New",monospace;letter-spacing:.15em}
@media(max-width:650px){
.page{padding:22px}
.content{padding:58px 0 52px}
h1{font-size:clamp(66px,22vw,102px)}
.message{margin-top:28px;font-size:14px}
.message br{display:none}
.actions{display:grid;grid-template-columns:1fr;margin-top:28px}
.button{width:100%}
footer{gap:8px;justify-content:space-between;font-size:8px;letter-spacing:.08em}
}


/* Open-mic image */
.open-mic{
  position:absolute;
  right:clamp(-30px,2vw,28px);
  top:50%;
  transform:translateY(-50%);
  width:min(29vw,430px);
  height:min(64vh,620px);
  margin:0;
  overflow:hidden;
  opacity:.52;
  border:1px solid rgba(242,238,228,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  z-index:-1;
}
.open-mic::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(11,11,10,.88),rgba(11,11,10,.12) 45%,rgba(11,11,10,.22));
}
.open-mic img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
  filter:grayscale(.15) saturate(.72) contrast(1.06);
}
@media(max-width:900px){
  .content{padding-top:44px}
  .open-mic{
    position:relative;
    top:auto;
    right:auto;
    transform:none;
    width:100%;
    height:32svh;
    min-height:230px;
    max-height:340px;
    margin:0 0 34px;
    opacity:.72;
    z-index:0;
  }
  .open-mic::after{
    background:linear-gradient(180deg,rgba(11,11,10,.05),rgba(11,11,10,.62));
  }
}


/* ===== WIP V4 — REAL ORIGINAL OPEN-MIC PHOTO ===== */
@media (min-width: 901px) {
  .page {
    min-height: 100svh;
    padding: clamp(28px, 3vw, 52px);
    overflow: hidden;
  }

  .content {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 150px);
    margin: 0;
    padding: clamp(70px, 9vh, 115px) 0 74px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .content > .eyebrow,
  .content > h1,
  .content > .message,
  .content > .actions {
    position: relative;
    z-index: 5;
    width: 48%;
  }

  .content > h1 {
    font-size: clamp(76px, 8.6vw, 152px);
    line-height: .79;
  }

  .content > .message {
    max-width: 650px;
  }

  .open-mic {
    position: absolute !important;
    z-index: 1 !important;
    top: 0 !important;
    right: calc(clamp(28px, 3vw, 52px) * -1) !important;
    bottom: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 54% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .open-mic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 42% !important;
    filter: saturate(.78) brightness(.78) contrast(1.08) !important;
  }

  .open-mic::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        #0b0b0a 0%,
        rgba(11,11,10,.93) 8%,
        rgba(11,11,10,.62) 20%,
        rgba(11,11,10,.18) 38%,
        rgba(11,11,10,0) 62%
      ),
      linear-gradient(
        0deg,
        rgba(11,11,10,.20),
        rgba(11,11,10,0) 35%
      ) !important;
  }
}

/* Mobile/tablet: real photo, full-width, no generated/baked interface. */
@media (max-width: 900px) {
  .content {
    padding-top: 42px;
  }

  .open-mic {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: calc(100% + 44px) !important;
    height: clamp(280px, 45svh, 470px) !important;
    margin: 0 0 32px -22px !important;
    border: 0 !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .open-mic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 38% !important;
    filter: saturate(.82) brightness(.82) contrast(1.05) !important;
  }

  .open-mic::after {
    background: linear-gradient(
      180deg,
      rgba(11,11,10,.02) 0%,
      rgba(11,11,10,.04) 62%,
      #0b0b0a 100%
    ) !important;
  }
}

@media (max-width: 650px) {
  .content {
    padding-top: 34px;
  }

  .open-mic {
    height: 39svh !important;
    min-height: 260px !important;
    max-height: 360px !important;
  }

  h1 {
    font-size: clamp(62px, 20vw, 92px);
  }
}


/* ===== WIP V5 — proportion and sizing refinement ===== */
@media (min-width: 901px) {
  .content {
    min-height: calc(100svh - 145px) !important;
    padding-top: clamp(58px, 7vh, 88px) !important;
    padding-bottom: 58px !important;
    justify-content: center !important;
  }

  .content > .eyebrow,
  .content > h1,
  .content > .message,
  .content > .actions {
    width: 44% !important;
  }

  .content > h1 {
    font-size: clamp(70px, 7.55vw, 136px) !important;
    line-height: .80 !important;
  }

  .content > .message {
    width: 46% !important;
    max-width: 690px !important;
    font-size: clamp(17px, 1.35vw, 21px) !important;
    line-height: 1.55 !important;
    margin-top: 34px !important;
  }

  .content > .actions {
    width: 48% !important;
    margin-top: 30px !important;
    gap: 12px !important;
  }

  .content > .actions .button {
    min-height: 56px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 12px !important;
  }

  .open-mic {
    width: 59% !important;
    right: calc(clamp(28px, 3vw, 52px) * -1) !important;
  }

  .open-mic img {
    object-fit: cover !important;
    object-position: 50% 45% !important;
    transform: scale(.94) !important;
    transform-origin: 58% center !important;
    background: #08090b;
  }

  .open-mic::after {
    background:
      linear-gradient(
        90deg,
        #0b0b0a 0%,
        rgba(11,11,10,.97) 6%,
        rgba(11,11,10,.82) 15%,
        rgba(11,11,10,.46) 27%,
        rgba(11,11,10,.12) 42%,
        rgba(11,11,10,0) 58%
      ),
      linear-gradient(
        0deg,
        rgba(11,11,10,.14),
        rgba(11,11,10,0) 34%
      ) !important;
  }
}

/* Keep medium laptops from letting the headline overwhelm the image. */
@media (min-width: 901px) and (max-width: 1350px) {
  .content > h1 {
    font-size: clamp(66px, 7.15vw, 108px) !important;
  }

  .content > .message {
    font-size: 16px !important;
  }

  .open-mic {
    width: 58% !important;
  }
}

/* Short laptop screens */
@media (min-width: 901px) and (max-height: 780px) {
  .content {
    padding-top: 42px !important;
    padding-bottom: 38px !important;
  }

  .content > h1 {
    font-size: clamp(62px, 6.7vw, 106px) !important;
  }

  .content > .message {
    margin-top: 24px !important;
    line-height: 1.4 !important;
  }

  .content > .actions {
    margin-top: 22px !important;
  }
}

/* Mobile refinement */
@media (max-width: 900px) {
  .open-mic img {
    transform: none !important;
  }

  .content > .message {
    line-height: 1.5;
  }
}

@media (max-width: 650px) {
  .open-mic {
    height: 36svh !important;
    min-height: 240px !important;
    max-height: 330px !important;
  }

  h1 {
    font-size: clamp(58px, 18vw, 84px) !important;
  }

  .message {
    font-size: 14px !important;
  }
}


/* ===== WIP V6 — approved outdoor/typewriter image ===== */
@media (min-width: 901px) {
  .open-mic img {
    object-fit: cover !important;
    object-position: 50% 48% !important;
    transform: scale(.96) !important;
    transform-origin: center center !important;
    filter: brightness(.86) saturate(.92) contrast(1.03) !important;
  }
  .open-mic::after {
    background:
      linear-gradient(
        90deg,
        #0b0b0a 0%,
        rgba(11,11,10,.96) 7%,
        rgba(11,11,10,.78) 17%,
        rgba(11,11,10,.40) 29%,
        rgba(11,11,10,.10) 43%,
        rgba(11,11,10,0) 60%
      ) !important;
  }
}
@media (max-width: 900px) {
  .open-mic img {
    object-position: 50% 45% !important;
    filter: brightness(.88) saturate(.94) contrast(1.02) !important;
  }
}


/* ===== WIP V7 ORIGINAL IMAGE ONLY =====
   The photo asset is the exact uploaded JPEG.
   No filters, scaling transforms, recoloring, or generated replacement. */

@media (min-width: 901px) {
  .content > .eyebrow,
  .content > h1,
  .content > .message,
  .content > .actions {
    width: 42% !important;
  }

  .open-mic {
    width: 62% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #0b0b0a !important;
  }

  .open-mic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
    transform: none !important;
    filter: none !important;
    background: #0b0b0a !important;
  }

  .open-mic::after {
    background:
      linear-gradient(
        90deg,
        #0b0b0a 0%,
        rgba(11,11,10,.94) 8%,
        rgba(11,11,10,.68) 18%,
        rgba(11,11,10,.26) 31%,
        rgba(11,11,10,0) 44%
      ) !important;
  }
}

@media (max-width: 900px) {
  .open-mic {
    width: calc(100% + 44px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: -22px !important;
    background: #0b0b0a !important;
  }

  .open-mic img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    filter: none !important;
    display: block !important;
  }

  .open-mic::after {
    background: linear-gradient(
      180deg,
      rgba(11,11,10,0) 0%,
      rgba(11,11,10,0) 78%,
      #0b0b0a 100%
    ) !important;
  }
}


/* ===== WIP V8 — DESKTOP ONLY =====
   Mobile settings from V7 are intentionally unchanged.
   Exact original photo asset remains untouched. */
@media (min-width: 901px) {
  .open-mic {
    width: 58% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #0b0b0a !important;
  }

  .open-mic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
    filter: none !important;
  }

  .open-mic::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      #0b0b0a 0%,
      rgba(11,11,10,.94) 5%,
      rgba(11,11,10,.74) 11%,
      rgba(11,11,10,.42) 18%,
      rgba(11,11,10,.14) 26%,
      rgba(11,11,10,0) 34%
    ) !important;
  }

  .content > .eyebrow,
  .content > h1,
  .content > .message,
  .content > .actions {
    width: 44% !important;
    position: relative !important;
    z-index: 3 !important;
  }
}


/* ===== WIP V9 — DESKTOP PHOTO FIT ONLY =====
   Mobile remains unchanged from V8.
   Original image asset remains untouched. */
@media (min-width: 901px) {
  .open-mic {
    width: 58% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    background: #0b0b0a !important;
    overflow: hidden !important;
  }

  .open-mic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    filter: none !important;
    background: #0b0b0a !important;
  }

  .open-mic::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(
      90deg,
      #0b0b0a 0%,
      rgba(11,11,10,.94) 5%,
      rgba(11,11,10,.72) 11%,
      rgba(11,11,10,.36) 18%,
      rgba(11,11,10,.08) 27%,
      rgba(11,11,10,0) 34%
    ) !important;
  }
}


/* ===== WIP V10 — MOVE DESKTOP PHOTO UP ONLY =====
   Preserve V9 sizing and all mobile behavior. */
@media (min-width: 901px) {
  .open-mic img {
    object-position: center top !important;
  }
}


/* ===== WIP V11 — MOVE THE ENTIRE DESKTOP PHOTO BLOCK UP =====
   V10 moved the image inside the box; this moves the box itself.
   Mobile remains untouched. */
@media (min-width: 901px) {
  .open-mic {
    top: -90px !important;
    bottom: auto !important;
    height: calc(100vh + 90px) !important;
  }
}


/* ===== WIP V12 — DESKTOP PHOTO 30PX HIGHER =====
   Placement only. Original photo unchanged. Mobile untouched. */
@media (min-width: 901px) {
  .open-mic {
    transform: translateY(-30px) !important;
  }
}


/* ===== WIP V13 — TOP BRAND TYPE SIZE ONLY =====
   No font, style, layout, photo, or mobile rule changes. */
.brand .mark {
  font-size: 2em !important;
}
.brand > span:not(.mark) {
  font-size: 2em !important;
}


/* ===== WIP V14 — DOUBLE THE EXISTING CC SQUARE =====
   V13 already doubled the CC and CHAD CITY text.
   This adds only the requested 2x square dimensions. */
.brand .mark {
  width: 76px !important;
  height: 76px !important;
}


/* ===== NEXT VERSION FROM V14 — REQUESTED TEXT CHANGES ONLY ===== */

/* CTA labels: one size larger than V14. */
.button {
  font-size: 13px !important;
}

/* Bottom WRITTEN. SPOKEN. TYPED LIVE.: roughly 4–5 size steps larger. */
footer {
  font-size: 16px !important;
}


/* V20: social links belong with the bottom footer, directly above the tagline. */
footer{
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:12px !important;
}
.footer-social{
  display:flex;
  align-items:center;
  gap:12px;
  font:700 13px "Courier New",monospace;
  letter-spacing:.12em;
}
.footer-social a,
.footer-social a:visited{
  color:#c9c3b7;
  text-decoration:none;
}
.footer-social a:hover,
.footer-social a:focus-visible{
  color:var(--gold);
}
.footer-social > span{
  color:#777167;
}
.footer-tagline{
  display:flex;
  gap:18px;
  color:#777167;
  font:700 16px "Courier New",monospace;
  letter-spacing:.15em;
}

@media(max-width:650px){
  footer{
    gap:9px !important;
  }
  .footer-social{
    gap:8px;
    font-size:10px;
    letter-spacing:.07em;
    flex-wrap:wrap;
  }
  .footer-tagline{
    width:100%;
    gap:8px;
    justify-content:space-between;
    font-size:16px;
    letter-spacing:.08em;
  }
}

/* ===== WIP V21 — DESKTOP SPACING + TYPE ONLY =====
   Requested changes only. Mobile/tablet rules remain unchanged. */
@media (min-width: 901px) {
  /* Reduce the black gap below CHAD CITY by pulling the hero content upward. */
  .content {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
    justify-content: flex-start !important;
  }

  /* THE NEXT VERSE... two size steps larger. */
  .content > .eyebrow {
    font-size: 15px !important;
    margin-top: 58px !important;
  }

  /* Reduce the black gap after the CTA row before the footer/social area. */
  .content > .actions {
    margin-bottom: 8px !important;
  }

  /* Social links two size steps larger. */
  .footer-social {
    font-size: 15px !important;
  }
}


/* ===== WIP V22 — PULL BOTTOM BLOCK UP, DESKTOP ONLY =====
   CTA buttons stay exactly where they are.
   Social links + tagline move upward together.
   Mobile remains untouched. */
@media (min-width: 901px) {
  footer {
    transform: translateY(-72px) !important;
  }
}


/* ===== WIP V23 — FINAL DESKTOP FIT TWEAKS =====
   Desktop only:
   - Social links +2px larger than V22.
   - Bottom tagline +2px larger than V22.
   - Hero image 5% smaller.
   Mobile remains untouched. */
@media (min-width: 901px) {
  .social-links a {
    font-size: calc(1em + 2px) !important;
  }

  .footer-line {
    font-size: calc(1em + 2px) !important;
  }

  .hero-image,
  .hero-media,
  .photo-wrap {
    transform: scale(0.95);
    transform-origin: top center;
  }
}


/* ===== WIP V24 — DESKTOP ONLY =====
   From V23:
   - Social media links: +2px more
   - Main photo: 10% smaller than V23
   - No other changes
   - Mobile untouched
*/
@media (min-width: 901px) {
  .social-links a {
    font-size: calc(1em + 4px) !important;
  }

  .hero-image,
  .hero-media,
  .photo-wrap {
    transform: scale(0.855) !important;
    transform-origin: top center !important;
  }
}


/* ===== V26 — BUILT FROM ORIGINAL V24 =====
   ONLY:
   1) social links +2px
   2) main photo 5% smaller
   Mobile untouched.
*/
@media (min-width: 901px) {
  .footer-social {
    font-size: 19px !important;
  }

  .open-mic {
    width: 55.1% !important;
    height: calc(95vh + 85.5px) !important;
  }
}


/* ===== V27 — FINAL PHOTO TWEAK =====
   Desktop only: photo another 5% smaller than V26.
   Fonts and mobile untouched.
*/
@media (min-width: 901px) {
  .open-mic {
    width: 52.345% !important;
    height: calc(90.25vh + 81.225px) !important;
  }
}

/* ===== V30 — MOBILE TYPE TWEAK ONLY =====
   Mobile only. Desktop and all other styling unchanged. */
@media (max-width: 650px) {
  .content > .eyebrow {
    font-size: 15px !important;
  }

  .footer-social {
    font-size: 16px !important;
  }
}


/* ===== V31 — MOBILE TYPE ONLY =====
   Social links remain 16px.
   WRITTEN. SPOKEN. TYPED LIVE. = 14px.
   Desktop untouched.
*/
@media (max-width: 900px) {
  .footer-social {
    font-size: 16px !important;
  }
  .footer-social a {
    font-size: inherit !important;
  }
  .footer-tagline {
    font-size: 14px !important;
  }
}


/* ===== V32 — MOBILE SOCIAL FONT ONLY ===== */
@media (max-width: 900px) {
  .footer-social {
    font-size: 18px !important;
  }
  .footer-social a {
    font-size: inherit !important;
  }
}


/* ===== V33 — DESKTOP TYPE ONLY =====
   THE NEXT VERSE = 18px
   Social media links = +4px from V32 desktop
   Mobile untouched.
*/
@media (min-width: 901px) {
  .eyebrow {
    font-size: 18px !important;
  }

  .footer-social {
    font-size: 23px !important;
  }

  .footer-social a {
    font-size: inherit !important;
  }
}


/* ===== V34 — FINAL DESKTOP PHOTO TWEAK =====
   Desktop only: main photo 5% smaller than V33.
   Everything else untouched.
*/
@media (min-width: 901px) {
  .open-mic {
    width: 49.728% !important;
    height: calc(85.7375vh + 77.16375px) !important;
  }
}

/* V36 signature header test — header only */
.signature-brand {border:0!important;background:transparent!important;padding:0!important;width:auto!important;height:auto!important;display:flex!important;align-items:center!important;}
.signature-brand img {display:block!important;width:245px!important;height:auto!important;max-width:28vw!important;}
@media (max-width:900px){.signature-brand img{width:190px!important;max-width:58vw!important;}}


/* V39 — DESKTOP ONLY: requested header refinements */
@media (min-width: 901px) {
  /* Signature image: +10% from V38's 245px */
  .signature-brand img {
    width: 270px !important;
  }

  /* THE NEXT VERSE...: +3px on desktop */
  .eyebrow {
    font-size: 21px !important;
  }

  /* Reduce only the gap between signature and THE NEXT VERSE */
  .hero-copy {
    padding-top: 20px !important;
  }
}


/* ===== V41 — DESKTOP SPECIFICITY FIX =====
   Targets the exact higher-specificity selector already controlling this line.
   Signature remains at V39 size.
*/
@media (min-width: 901px) {
  .content > .eyebrow {
    font-size: 21px !important;
    margin-top: 20px !important;
  }
}


/* ===== V47 — RESTORE BLINKING CURSOR ===== */
.content > h1::after {
  content: "";
  display: inline-block;
  width: 0.075em;
  height: 0.78em;
  margin-left: 0.08em;
  background: currentColor;
  vertical-align: -0.03em;
  animation: chadCursorBlink 1s steps(1, end) infinite;
}

@keyframes chadCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .content > h1::after {
    animation: none;
    opacity: 1;
  }
}


/* ===== V48 — DESKTOP CURSOR FIX ===== */
@media (min-width: 901px) {
  .content > h1 {
    position: relative !important;
  }

  .content > h1::after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    width: 0.075em !important;
    height: 0.78em !important;
    left: 3.72em !important;
    bottom: 0.02em !important;
    margin: 0 !important;
    background: currentColor !important;
    opacity: 1;
    animation: chadDesktopCursorBlink 1s steps(1, end) infinite !important;
    z-index: 20 !important;
  }
}

@keyframes chadDesktopCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}


/* ===== V49 — MOBILE ONLY =====
   Move Chad City signature below hero image.
   Reduce WRITTEN. SPOKEN. TYPED LIVE. by 1px.
   Desktop unchanged.
*/
.mobile-signature {
  display: none;
}

@media (max-width: 900px) {
  /* Hide the original top signature on mobile only. */
  .signature-brand {
    display: none !important;
  }

  /* Show the same signature immediately below the hero image. */
  .mobile-signature {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 18px 0 12px;
    padding: 0;
  }

  .mobile-signature img {
    display: block;
    width: 190px;
    max-width: 58vw;
    height: auto;
  }

  /* Mobile eyebrow/tagline: 1px smaller. */
  .content > .eyebrow {
    font-size: 14px !important;
  }
}


/* ===== V50 — TWO TARGETED FIXES ONLY ===== */

/* Desktop: pull blinking cursor tight against "Here." */
@media (min-width: 901px) {
  .content > h1::after {
    left: 3.18em !important;
  }
}

/* Mobile: hero photo 7% smaller; desktop untouched */
@media (max-width: 900px) {
  .open-mic {
    transform: scale(0.93) !important;
    transform-origin: top center !important;
    margin-bottom: -7% !important;
  }
}


/* ===== V51 — DESKTOP CURSOR POSITION ONLY ===== */
@media (min-width: 901px) {
  .content > h1::after {
    left: 2.88em !important;
  }
}


/* ===== V52 — MOBILE TOP GAP ONLY =====
   Keep only 10px between viewport top and hero image.
*/
@media (max-width: 900px) {
  .page {
    padding-top: 10px !important;
  }

  .content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .open-mic {
    margin-top: 0 !important;
  }
}


/* ===== V53 — TWO TARGETED POSITION TWEAKS ===== */

/* Mobile: 2px from top instead of 10px */
@media (max-width: 900px) {
  .page {
    padding-top: 2px !important;
  }
}

/* Desktop: cursor 3 more spaces left */
@media (min-width: 901px) {
  .content > h1::after {
    left: 2.58em !important;
  }
}


/* ===== V54 — DESKTOP CURSOR ONLY ===== */
@media (min-width: 901px) {
  .content > h1::after {
    left: 2.38em !important;
  }
}


/* ===== V57 — MOBILE HERO/SIGNATURE GAP ONLY ===== */
@media (max-width: 900px) {
  .open-mic {
    margin-bottom: 0 !important;
  }

  .mobile-signature {
    margin-top: 1px !important;
  }
}


/* ===== V59 — REAL MOBILE HERO/SIGNATURE GAP FIX =====
   Preserve the existing 7% visual hero reduction.
   Remove the invisible layout space created by transform: scale(.93).
*/
@media (max-width: 900px) {
  .open-mic {
    transform: scale(0.93) !important;
    transform-origin: top center !important;
    margin-top: 0 !important;
    margin-bottom: calc(-7% + 1px) !important;
  }

  .mobile-signature {
    margin-top: 0 !important;
  }
}


/* ===== V60 — SIGNATURE/TAGLINE SPACING ONLY ===== */

/* MOBILE:
   Remove the spacing between the signature block and
   WRITTEN. SPOKEN. TYPED LIVE. */
@media (max-width: 900px) {
  .mobile-signature {
    margin-bottom: 0 !important;
  }

  .mobile-signature img {
    display: block !important;
  }

  .content > .eyebrow {
    margin-top: 0 !important;
  }
}

/* DESKTOP:
   Signature +10% from 270px -> 297px.
   Put WRITTEN. SPOKEN. TYPED LIVE. 5px beneath it. */
@media (min-width: 901px) {
  .signature-brand img {
    width: 297px !important;
  }

  .content {
    padding-top: 0 !important;
  }

  .content > .eyebrow {
    margin-top: 5px !important;
  }
}


/* ===== V62 — DESKTOP SPACING ONLY ===== */
@media (min-width: 901px) {
  /* 5px gap above the desktop hero image */
  .open-mic {
    top: 5px !important;
  }

  /* 10px gap below the CTA button group before socials */
  .actions {
    margin-bottom: 10px !important;
  }
}


/* ===== V63 — DESKTOP ZERO GAPS ONLY ===== */
@media (min-width: 901px) {
  .open-mic {
    top: 0 !important;
  }

  .actions {
    margin-bottom: 0 !important;
  }
}


/* ===== V64 — DESKTOP HERO TOP + SOCIALS UP =====
   Desktop only. Mobile remains untouched. */
@media (min-width: 901px) {

  /* Make the hero position against the page itself, not the content block. */
  .content {
    position: static !important;
    min-height: 0 !important;
  }

  /* Hero begins at the very top edge of the webpage. */
  .open-mic {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
  }

  /* Remove the layout space after the CTA row. */
  .actions {
    margin-bottom: 0 !important;
  }

  /* Pull the social links directly up beneath the CTA area. */
  footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* ===== V65 — DESKTOP SOCIAL POSITION FIX ONLY ===== */
@media (min-width: 901px) {
  /* Keep V64 hero placement exactly as-is. */

  /* CTA row establishes the spacing reference. */
  .actions {
    margin-bottom: 0 !important;
  }

  /* Social row sits 5px below the CTA buttons, in normal flow. */
  footer {
    position: static !important;
    margin-top: 5px !important;
    padding-top: 0 !important;
    transform: none !important;
  }
}