
/* =========================================================
   HIMS V6 — clean editorial motion system
   Removes collage/floating-image treatment and strengthens
   timeline, business title hero and animated footer.
   ========================================================= */
:root{
  --hims-lime:#b5d334;
  --hims-ink:#10110f;
  --hims-paper:#f5f5f1;
  --hims-soft:#e9ebe3;
}
body{overflow-x:hidden}
img{backface-visibility:hidden}

/* ---------- V6 HOME BUSINESS SHOWCASE: single visual ---------- */
.hims-cinematic:not(.is-business) .hc-side,
.hims-cinematic:not(.is-business) .hc-ring,
.hims-cinematic:not(.is-business) .hc-blur{display:none!important}
.hims-cinematic:not(.is-business) .hc-pin{
  background:linear-gradient(120deg,#10120f 0%,#171a14 48%,#0e100d 100%)!important;
}
.hims-cinematic:not(.is-business) .hc-stage{
  width:min(54vw,760px)!important;height:min(68vh,650px)!important;
  right:7vw!important;left:auto!important;top:50%!important;
}
.hims-cinematic:not(.is-business) .hc-main{
  width:100%!important;height:100%!important;left:0!important;top:0!important;
  transform:none!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden!important;
}
.hims-cinematic:not(.is-business) .hc-main img{
  transform:scale(1.04)!important;filter:saturate(.9)!important;
}
.hims-cinematic:not(.is-business) .hc-title{
  left:7vw!important;bottom:auto!important;top:50%!important;
  transform:translateY(-50%)!important;max-width:560px!important;
}
.hims-cinematic:not(.is-business) .hc-title .hc-year{
  color:#fff!important;opacity:.07!important;font-size:clamp(110px,15vw,220px)!important;
}
.hims-cinematic:not(.is-business) .hc-title h2{
  color:#fff!important;font-size:clamp(48px,6.5vw,94px)!important;
  line-height:.88!important;letter-spacing:-.065em!important;
}
.hims-cinematic:not(.is-business) .hc-title p{color:#aaa!important;max-width:440px!important}
.hims-cinematic:not(.is-business) .hc-kicker{color:#a9ad9f!important}
.hims-cinematic:not(.is-business) .hc-counter{color:#a9ad9f!important}

/* ---------- TIMELINE: no clipped years, larger cards ---------- */
.hims-side-timeline{max-width:1360px!important;padding-top:35px!important}
.hims-tl-item{padding-left:48px!important;padding-right:48px!important;padding-bottom:115px!important}
.hims-tl-card,.hims-tl-item:nth-child(odd) .hims-tl-card,
.hims-tl-item:nth-child(even) .hims-tl-card{
  grid-template-columns:minmax(0,1fr) 285px!important;
  min-height:300px!important;
  padding:18px!important;
  overflow:visible!important;
}
.hims-tl-item:nth-child(even) .hims-tl-card{grid-template-columns:285px minmax(0,1fr)!important}
.hims-tl-image{width:285px!important;height:280px!important}
.hims-tl-year{
  font-size:clamp(42px,4.5vw,62px)!important;
  white-space:nowrap!important;
  overflow:visible!important;
  letter-spacing:-.055em!important;
  line-height:.9!important;
}
.hims-tl-card h4{font-size:clamp(23px,2.3vw,34px)!important;overflow:visible!important}
.hims-tl-card>div{min-width:0}
.hims-tl-card:hover{transform:translateY(-12px) scale(1.012)!important}

/* ---------- BUSINESS HERO: name-first, image second ---------- */
.hims-cinematic.is-business .hc-track{height:250vh!important}
.hims-cinematic.is-business .hc-pin{
  background:#10120f!important;
  display:block!important;
}
.hims-cinematic.is-business .hc-stage{
  left:auto!important;right:0!important;top:auto!important;
  bottom:0!important;transform:none!important;
  width:min(56vw,850px)!important;height:58vh!important;
  opacity:.82!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 35%,#000 100%);
}
.hims-cinematic.is-business .hc-main{
  width:100%!important;height:100%!important;left:0!important;top:0!important;
  border-radius:0!important;box-shadow:none!important;
}
.hims-cinematic.is-business .hc-main:after{
  background:linear-gradient(90deg,#10120f 0%,rgba(16,18,15,.82) 25%,rgba(16,18,15,.08) 72%,rgba(16,18,15,.25) 100%)!important;
}
.hims-cinematic.is-business .hc-main img{
  transform:scale(1.05)!important;
  filter:saturate(.82) contrast(1.02)!important;
}
.hims-cinematic.is-business .hc-title{
  left:7vw!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%)!important;
  max-width:850px!important;
}
.hims-cinematic.is-business .hc-title .hc-year{
  font-size:clamp(70px,9vw,150px)!important;
  line-height:.72!important;opacity:.09!important;
  margin-bottom:18px!important;
}
.hims-cinematic.is-business .hc-title h2{
  font-size:clamp(58px,8.5vw,132px)!important;
  line-height:.82!important;
  letter-spacing:-.075em!important;
  max-width:850px!important;
  text-transform:none!important;
  text-wrap:balance;
}
.hims-cinematic.is-business .hc-title p{
  font-size:16px!important;line-height:1.75!important;
  max-width:500px!important;color:#aeb2a9!important;
  margin-top:24px!important;
}
.hims-cinematic.is-business .hc-kicker{left:7vw!important;top:120px!important;color:#b7bcaf!important}
.hims-cinematic.is-business .hc-counter{right:7vw!important;top:120px!important}
.hims-cinematic.is-business .hc-vertical{right:3vw!important;color:#6f756c!important}
.hims-cinematic.is-business .hc-progress{left:7vw!important;bottom:48px!important;width:180px!important;background:rgba(255,255,255,.15)!important}
.hims-cinematic.is-business .hc-progress i{background:var(--hims-lime)!important}

/* business title motion states */
.hims-cinematic.is-business.v5-mid .hc-title{transform:translateY(-54%) scale(.985)!important}
.hims-cinematic.is-business.v5-mid .hc-main img{transform:scale(1.12)!important}
.hims-cinematic.is-business.v5-end .hc-title{transform:translateY(-58%) scale(.96)!important;opacity:.72}
.hims-cinematic.is-business.v5-end .hc-main{opacity:.72}

/* ---------- V6 FOOTER ---------- */
.hims-footer-v6{
  position:relative;background:#0d0f0c;color:#fff;overflow:hidden;
  padding:110px 0 28px;
}
.hims-footer-v6:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 15% 20%,rgba(181,211,52,.12),transparent 26%),
             radial-gradient(circle at 88% 72%,rgba(181,211,52,.07),transparent 25%);
  pointer-events:none;
}
.hims-footer-v6 .footer-orb{
  position:absolute;width:420px;height:420px;border:1px solid rgba(181,211,52,.13);
  border-radius:50%;right:-160px;top:-150px;animation:footerSpin 20s linear infinite;
}
.hims-footer-v6 .footer-orb:before,.hims-footer-v6 .footer-orb:after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;
}
.hims-footer-v6 .footer-orb:before{inset:45px}
.hims-footer-v6 .footer-orb:after{inset:95px}
@keyframes footerSpin{to{transform:rotate(360deg)}}
.hims-footer-v6 .footer-marquee{
  position:relative;white-space:nowrap;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:17px 0;margin-bottom:78px;
}
.hims-footer-v6 .footer-marquee-track{
  display:inline-flex;gap:38px;animation:footerMarquee 26s linear infinite;
}
.hims-footer-v6 .footer-marquee span{
  font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#9ba095;
}
.hims-footer-v6 .footer-marquee b{color:var(--hims-lime);font-weight:500}
@keyframes footerMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hims-footer-v6 .footer-top{
  position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  gap:30px;margin-bottom:80px;
}
.hims-footer-v6 .footer-brand{
  font-size:clamp(72px,13vw,190px);line-height:.72;
  letter-spacing:-.08em;font-weight:700;margin:0;
}
.hims-footer-v6 .footer-brand em{font-style:normal;color:var(--hims-lime)}
.hims-footer-v6 .footer-back{
  width:92px;height:92px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
  text-transform:uppercase;letter-spacing:2px;font-size:9px;
  transition:transform .45s,background .45s,color .45s;
}
.hims-footer-v6 .footer-back:hover{transform:rotate(-12deg) scale(1.08);background:var(--hims-lime);color:#111}
.hims-footer-v6 .footer-grid{
  position:relative;display:grid;grid-template-columns:1.3fr .8fr .8fr 1fr;
  gap:50px;padding-top:38px;border-top:1px solid rgba(255,255,255,.12);
}
.hims-footer-v6 h4{font-size:10px!important;letter-spacing:3px!important;text-transform:uppercase;color:#8f958b!important;margin-bottom:20px!important}
.hims-footer-v6 p,.hims-footer-v6 li,.hims-footer-v6 a{color:#aeb2a9!important}
.hims-footer-v6 a{transition:color .25s,transform .25s;display:inline-block}
.hims-footer-v6 a:hover{color:#fff!important;transform:translateX(4px)}
.hims-footer-v6 ul{list-style:none;padding:0;margin:0}
.hims-footer-v6 li{margin:0 0 9px;font-size:13px}
.hims-footer-v6 .footer-bottom{
  position:relative;display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(255,255,255,.1);margin-top:55px;padding-top:20px;
  color:#686e65;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
}
.hims-footer-v6 .footer-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.hims-footer-v6.in-view .footer-reveal{opacity:1;transform:none}
.hims-footer-v6 .footer-reveal:nth-child(2){transition-delay:.1s}.hims-footer-v6 .footer-reveal:nth-child(3){transition-delay:.2s}

/* ---------- compact menu button ---------- */
.hims-menu-trigger{transition:transform .45s cubic-bezier(.22,1,.36,1),background .35s}
.hims-menu-trigger:hover{transform:rotate(90deg) scale(1.08)!important}

/* ---------- mobile ---------- */
@media(max-width:991px){
 .hims-tl-card,.hims-tl-item:nth-child(odd) .hims-tl-card,.hims-tl-item:nth-child(even) .hims-tl-card{grid-template-columns:210px minmax(0,1fr)!important}
 .hims-tl-item:nth-child(odd) .hims-tl-card{direction:ltr}
 .hims-tl-image{width:210px!important;height:230px!important}
 .hims-cinematic.is-business .hc-title{left:5vw!important;max-width:90vw!important}
 .hims-cinematic.is-business .hc-title h2{font-size:clamp(54px,9vw,90px)!important}
 .hims-cinematic.is-business .hc-stage{width:62vw!important;height:54vh!important}
 .hims-footer-v6 .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
 .hims-side-timeline{padding-top:20px!important}
 .hims-tl-item,.hims-tl-item:nth-child(even){padding:0 0 55px 42px!important}
 .hims-tl-card,.hims-tl-item:nth-child(odd) .hims-tl-card,.hims-tl-item:nth-child(even) .hims-tl-card{
   grid-template-columns:115px minmax(0,1fr)!important;min-height:155px!important;padding:10px!important;
 }
 .hims-tl-image{width:115px!important;height:135px!important}
 .hims-tl-year{font-size:34px!important}
 .hims-tl-card h4{font-size:20px!important}
 .hims-cinematic:not(.is-business) .hc-stage{width:calc(100% - 40px)!important;right:20px!important;height:43vh!important;top:38%!important}
 .hims-cinematic:not(.is-business) .hc-title{left:20px!important;top:auto!important;bottom:70px!important;transform:none!important;max-width:calc(100% - 40px)!important}
 .hims-cinematic:not(.is-business) .hc-title h2{font-size:43px!important}
 .hims-cinematic.is-business .hc-stage{width:100%!important;right:0!important;height:43vh!important;bottom:0!important;opacity:.6!important}
 .hims-cinematic.is-business .hc-title{left:20px!important;top:auto!important;bottom:85px!important;transform:none!important}
 .hims-cinematic.is-business .hc-title .hc-year{font-size:60px!important}
 .hims-cinematic.is-business .hc-title h2{font-size:48px!important;max-width:calc(100% - 30px)!important}
 .hims-cinematic.is-business .hc-title p{font-size:13px!important;max-width:85%!important}
 .hims-cinematic.is-business .hc-kicker{left:20px!important;top:92px!important}
 .hims-cinematic.is-business .hc-counter{right:20px!important;top:92px!important}
 .hims-footer-v6{padding:75px 0 22px}
 .hims-footer-v6 .footer-marquee{margin-bottom:55px}
 .hims-footer-v6 .footer-top{align-items:flex-start;flex-direction:column;margin-bottom:55px}
 .hims-footer-v6 .footer-brand{font-size:78px}
 .hims-footer-v6 .footer-grid{grid-template-columns:1fr 1fr;gap:35px 20px}
 .hims-footer-v6 .footer-bottom{flex-direction:column;gap:8px}
 .hims-footer-v6 .footer-orb{width:250px;height:250px}
}
@media(prefers-reduced-motion:reduce){
 .hims-footer-v6 .footer-marquee-track,.hims-footer-v6 .footer-orb{animation:none!important}
}

/* =========================================================
   V7 FINAL FIXES — timeline typography + no home collage
   ========================================================= */
/* Home business showcase/collage is intentionally removed. */
.hims-cinematic.is-home{display:none!important}

/* Keep every timeline year fully visible and optically aligned. */
.hims-side-timeline{overflow:visible!important}
.hims-tl-card{overflow:hidden!important}
.hims-tl-card > div{min-width:0!important;overflow:visible!important}
.hims-tl-year{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;
  min-width:4.15ch!important;
  white-space:nowrap!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  font-size:clamp(38px,4vw,58px)!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  overflow:visible!important;
  position:relative!important;
  z-index:2!important;
}
.hims-tl-card h4{position:relative;z-index:2;word-break:normal!important;overflow-wrap:normal!important}
.hims-tl-card p{position:relative;z-index:2}

/* More stable card proportions on desktop. */
@media(min-width:992px){
  .hims-tl-item{padding-left:34px!important;padding-right:34px!important}
  .hims-tl-card,.hims-tl-item:nth-child(odd) .hims-tl-card{
    grid-template-columns:minmax(0,1fr) 300px!important;
    gap:22px!important;
  }
  .hims-tl-item:nth-child(even) .hims-tl-card{
    grid-template-columns:300px minmax(0,1fr)!important;
  }
  .hims-tl-image{width:300px!important;height:292px!important}
}
@media(max-width:991px){
  .hims-tl-year{min-width:4.1ch!important;font-size:38px!important}
}
