html{scroll-behavior:smooth}
body{margin:0;background:#0A0E14;color:#EDE6D6;font-family:'Zen Kaku Gothic New',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;--gold:#C9A24A;--gold-bright:#E8C97A;--gold-deep:#A8842E;--play:running}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}
::selection{background:#C9A24A;color:#0A0E14}

@keyframes sheen{from{background-position:200% 50%}to{background-position:0% 50%}}
@keyframes waveBreathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.03) translateY(-8px)}}
@keyframes marqueeX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbImgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes tickX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- responsive layout toggles (replicating the JS isMobile <=900px branches) ---- */
.nav-desktop{display:flex;align-items:center}
.nav-cta-desktop{display:inline-block}
.nav-mobile{display:none}

.hero-desktop{display:contents}
.hero-mobile{display:none;width:100%;align-self:flex-start}

/* mobile hero — flow-based column so content can never overlap or hard-cut the CTAs */
.hm-wrap{position:relative;width:100%;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hm-photo{position:relative;flex:none;height:60vh;height:60svh;min-height:280px;max-height:calc(100vh - 320px);max-height:calc(100svh - 320px);clip-path:polygon(0 0,100% 0,100% 82%,0 100%)}
.hm-ticker{position:relative;z-index:3;width:calc(100% + 60px);margin:-24px -30px 0;transform:rotate(-4deg);background:linear-gradient(110deg,#A8842E,#E6CB7E 40%,#C9A24A 70%,#A8842E);padding:9px 0;overflow:hidden;box-shadow:0 10px 34px rgba(201,162,74,.35)}
.hm-content{position:relative;z-index:2;flex:1 0 auto;display:flex;flex-direction:column;padding:30px 22px max(18px,env(safe-area-inset-bottom,0px))}

.about-grid{grid-template-columns:minmax(300px,5fr) 6fr}
.about-img{margin-left:clamp(30px,4vw,60px)}

.process-grid{grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr}
.process-arrow{display:flex}

.contact-grid{grid-template-columns:7fr 5fr}

@media (max-width:900px){
  .nav-desktop{display:none}
  .nav-cta-desktop{display:none}
  .nav-mobile{display:flex}

  .hero-desktop{display:none}
  .hero-mobile{display:block}

  .about-grid{grid-template-columns:1fr}
  .about-img{margin-left:0}

  .process-grid{grid-template-columns:1fr 1fr}
  .process-arrow{display:none}

  .contact-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  body{--play:paused}
  html{scroll-behavior:auto}
}