@font-face{font-family:RequestTratags;src:url('/fonts/Tratags-OVLYA.otf') format('opentype');font-display:swap}
@font-face{font-family:RequestCruelMachine;src:url('/fonts/CruelMachine-PKgnB.otf') format('opentype');font-display:swap}
@font-face{font-family:PrimeDrips;src:url('/fonts/PrimeDrips.otf') format('opentype');font-display:swap}

html{scroll-behavior:auto!important}

/* The supplied Tratags font is limited to the three-dot menu labels. */
.madg-dot-panel a span{font-family:PrimeDrips,sans-serif!important;font-size:1.05em;letter-spacing:.04em}

/* Remove only loading/entrance states; original images and layout remain intact. */
.request-ready #root [style*='opacity: 0'],
.request-ready #root [style*='opacity:0']{opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;transition:none!important}

/* Isolate each requested menu view. My Zone remains the original grouped Zone/Album/Wander section. */
.request-ready main>section{display:none!important}
.request-ready[data-request-view='home'] main>section#home,
.request-ready[data-request-view='myzon3'] main>section#myzon3,
.request-ready[data-request-view='projects'] main>section#projects,
.request-ready[data-request-view='contact'] main>section#contact,
.request-ready[data-request-view='about'] main>section#about{display:block!important}

/* Requested My Zone title treatment only. */
.request-ready #myzon3 h2{font-family:RequestCruelMachine,'Permanent Marker',cursive!important}

/* Requested About/Bio title area and copy styling only. */
.request-ready #about .madg-bio-eyebrow{margin-top:0.25rem;font-family:RequestTratags,'Permanent Marker',cursive!important;font-size:clamp(1rem,2.2vw,1.35rem);letter-spacing:.28em;text-transform:uppercase;color:#ffd21a}
.request-ready #about .madg-bio-name{margin-top:.9rem;font-family:RequestCruelMachine,'Permanent Marker',cursive!important;font-size:clamp(2.5rem,6vw,5rem);line-height:.98;color:#f1f1f1}
.request-ready #about .madg-bio-aka{margin-top:.9rem;font-family:inherit!important;font-size:clamp(1.1rem,2.4vw,1.6rem);color:rgba(255,255,255,.75)}
.request-ready #about .madg-bio-aka strong{font-family:RequestTratags,'Permanent Marker',cursive!important;color:#ffd21a;font-weight:400}
.request-ready #about .madg-bio-genius{margin-top:.65rem;font-family:RequestTratags,'Permanent Marker',cursive!important;font-size:clamp(1.35rem,3vw,2.2rem);color:#ffd21a}
.request-ready #about .madg-bio-roles{gap:.5rem!important}
.request-ready #about .madg-bio-roles li{font-size:clamp(.62rem,1.2vw,.8rem)}
.request-ready #about .madg-bio-closing{font-family:RequestTratags,'Permanent Marker',cursive!important;color:#ffd21a}

@media (max-width:767px){
  .request-ready #about .mx-auto{padding-left:1rem;padding-right:1rem}
  .request-ready #about .madg-bio-name{font-size:clamp(2.35rem,10vw,4rem)}
  .request-ready #about .madg-bio-roles{line-height:1.45}
  .request-ready #about .mt-10.space-y-5{margin-top:2.25rem}
}

@media (min-width:768px) and (orientation:landscape){
  .request-ready #about .mx-auto{max-width:56rem}
  .request-ready #about .madg-bio-name{font-size:clamp(3rem,5vw,5rem)}
}

.request-ready #contact a.madg-whatsapp-link{display:inline-flex!important;align-items:center;gap:.5rem;background:#25d366!important;color:#06170b!important;border:0!important;padding:.85rem 1.15rem!important;font-weight:700!important}
.request-ready #contact a.madg-whatsapp-link:hover{background:#5de688!important;transform:translateY(-2px)}

/* Separate professional homepage view. */
#madg-professional-home{position:relative;min-height:100vh;display:none!important;background:#0a0a0a url('/assets/hero-side-2.jpg') 82% center/cover no-repeat;color:#f1f1f1;overflow:hidden}
.request-ready[data-request-view='home'] main>section#madg-professional-home{display:block!important}
.request-ready[data-request-view='who'] main>section#home{display:block!important}
#madg-professional-home .madg-pro-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92),rgba(10,10,10,.58) 58%,rgba(10,10,10,.3))}
#madg-professional-home .madg-pro-shell{position:relative;z-index:1;min-height:100vh;padding:clamp(8rem,17vh,12rem) clamp(1.5rem,7vw,7rem) 5rem;display:flex;flex-direction:column;justify-content:center}
#madg-professional-home .madg-pro-kicker{display:flex;align-items:center;gap:.8rem;color:#ffd21a;font:500 .72rem 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
#madg-professional-home .madg-pro-kicker span{width:2.2rem;height:1px;background:#ffd21a}
#madg-professional-home h1{max-width:62rem;margin:1.4rem 0 1.5rem;font:400 clamp(3.8rem,9vw,9rem)/.86 RequestCruelMachine,'Permanent Marker',cursive;letter-spacing:.01em}
#madg-professional-home h1 em{color:#ffd21a;font-style:normal}
#madg-professional-home .madg-pro-lede{max-width:29rem;color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.7}
#madg-professional-home .madg-pro-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.25rem}
#madg-professional-home .madg-pro-primary,#madg-professional-home .madg-pro-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;transition:.2s}
#madg-professional-home .madg-pro-primary{background:#ffd21a;color:#0a0a0a}
#madg-professional-home .madg-pro-secondary{border:1px solid rgba(255,255,255,.35);color:#fff}
#madg-professional-home .madg-pro-primary:hover,#madg-professional-home .madg-pro-secondary:hover{transform:translateY(-2px)}
#madg-professional-home .madg-pro-secondary:hover{border-color:#ffd21a;color:#ffd21a}
#madg-professional-home .madg-pro-meta{position:absolute;left:clamp(1.5rem,7vw,7rem);right:clamp(1.5rem,7vw,7rem);bottom:1.6rem;display:flex;justify-content:space-between;color:rgba(255,255,255,.48);font:500 .65rem 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase}
@media(max-width:767px){#madg-professional-home .madg-pro-shell{padding:8rem 1.1rem 5.5rem}#madg-professional-home h1{font-size:clamp(3.3rem,15vw,6rem)}#madg-professional-home .madg-pro-lede{font-size:.95rem}#madg-professional-home .madg-pro-meta{left:1.1rem;right:1.1rem;font-size:.55rem}#madg-professional-home .madg-pro-meta span:last-child{display:none}}

/* Hero correction: the professional home is a single fixed screen; personal sections open only from the menu. */
body.request-ready{overflow-x:hidden!important}
/* Extra-strict lock: while the hero view is active, the outer page itself cannot scroll at all
   (this is what was causing a landscape-only "double scroll" — the page scrolling a little AND
   the section scrolling underneath it). Only the section below may scroll internally, and only
   on the rare very-short-landscape screens where its content doesn't fully fit. */
body.request-ready[data-request-view='home']{overflow:hidden!important;height:100dvh;height:100svh}
/* Lock the hero to exactly one screen at every size. If content ever runs taller than the
   viewport (very short landscape phones), it scrolls INSIDE this section only — it never
   grows the page and never reveals another section underneath. */
body.request-ready main>section#madg-professional-home{height:100dvh;height:100svh;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#madg-professional-home h1,#madg-professional-home h1 em{font-family:PrimeDrips,'Permanent Marker',cursive!important;letter-spacing:.01em!important}
@media(max-width:767px){body.request-ready[data-request-view='home'] main>section#madg-professional-home{height:100dvh;height:100svh}}

/* Landscape / short-height phones: compact the hero so the whole headline + actions fit
   in view without needing to scroll, and pull #home ("WHO IS MAD-G?") and #about (bio) in
   tighter too so they read nicely without wasted top space. */
@media (orientation:landscape) and (max-height:600px){
  #madg-professional-home .madg-pro-shell{padding:4.4rem clamp(1.25rem,5vw,3rem) 3.4rem;min-height:0;justify-content:flex-start;gap:.35rem}
  #madg-professional-home .madg-pro-kicker{font-size:.6rem;margin-bottom:.2rem}
  #madg-professional-home h1{font-size:clamp(1.9rem,7.5vh,3.4rem);line-height:.92;margin:.6rem 0 .7rem}
  #madg-professional-home .madg-pro-lede{font-size:.85rem;line-height:1.45;max-width:26rem}
  #madg-professional-home .madg-pro-actions{margin-top:.85rem}
  #madg-professional-home .madg-pro-primary,#madg-professional-home .madg-pro-secondary{padding:.6rem .85rem;font-size:.68rem}
  #madg-professional-home .madg-pro-meta{position:static;margin-top:1rem;left:auto;right:auto}
  body.request-ready main>section#home{height:100dvh;height:100svh;overflow-y:auto;overflow-x:hidden}
  .request-ready #home>.relative.mx-auto{padding-top:5.5rem!important}
  .request-ready #home h1{font-size:clamp(1.8rem,7vh,3rem)!important}
  body.request-ready main>section#about{height:100dvh;height:100svh;overflow-y:auto;overflow-x:hidden}
  .request-ready #about .madg-bio-name{font-size:clamp(1.8rem,7vh,3rem)!important;margin-top:.4rem}
  .request-ready #about .madg-bio-genius{font-size:clamp(1rem,3.5vh,1.5rem)!important}
}