/* Studio Kokomo HOME hero redesign - 2026-09-28
   HOME first view only. Other pages are unchanged. */

.hero-full{
  position:relative;
  display:block;
  height:clamp(650px,calc(100svh - 86px),860px);
  min-height:650px;
  overflow:hidden;
  isolation:isolate;
  background:#101820;
}

.hero-full::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(8,17,28,.72) 0%,
      rgba(8,17,28,.58) 22%,
      rgba(8,17,28,.32) 38%,
      rgba(8,17,28,.08) 56%,
      rgba(8,17,28,0) 72%);
}

.hero-image,
.hero-image.auto-photo-frame,
.hero-image.auto-photo-frame.photo-landscape,
.hero-image.auto-photo-frame.photo-portrait{
  position:absolute;
  inset:0;
  z-index:0;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  margin:0 !important;
  aspect-ratio:auto !important;
  align-self:stretch !important;
  background:#101820;
}

.hero-image img,
.hero-image .auto-photo-image{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center 48% !important;
}

.hero-copy-main{
  position:relative;
  z-index:2;
  width:min(720px,52vw);
  height:100%;
  min-height:650px;
  padding:clamp(72px,8vh,110px) 0 clamp(56px,7vh,90px) max(64px,calc((100vw - var(--max))/2));
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.08);
}

.hero-copy-main .eyebrow{
  color:rgba(255,255,255,.92);
  margin-bottom:24px;
}

.hero-copy-main h1{
  color:#fff;
  font-size:clamp(68px,6vw,112px);
  line-height:.93;
  letter-spacing:-.055em;
  font-weight:500;
}

.hero-copy-main .lead{
  max-width:570px;
  margin-top:30px;
  color:rgba(255,255,255,.96);
  font-size:17px;
  line-height:2;
  font-weight:500;
}

.hero-copy-main .hero-actions{
  margin-top:34px;
}

.hero-copy-main .solid-button{
  background:#111;
  border-color:#111;
  color:#fff;
}

.hero-copy-main .outline-button{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.86);
  color:#fff;
  backdrop-filter:blur(3px);
}

.hero-copy-main .solid-button:hover,
.hero-copy-main .outline-button:hover{
  transform:translateY(-1px);
}

@media(max-width:1100px){
  .hero-full{
    height:clamp(620px,calc(100svh - 74px),780px);
    min-height:620px;
  }
  .hero-copy-main{
    width:min(650px,62vw);
    min-height:620px;
    padding-left:40px;
  }
  .hero-copy-main h1{
    font-size:clamp(62px,7vw,90px);
  }
}

@media(max-width:900px){
  .hero-full{
    height:clamp(650px,88svh,820px);
    min-height:650px;
  }
  .hero-full::after{
    background:
      linear-gradient(90deg,rgba(8,17,28,.68) 0%,rgba(8,17,28,.42) 56%,rgba(8,17,28,.14) 100%),
      linear-gradient(0deg,rgba(8,17,28,.58) 0%,rgba(8,17,28,0) 52%);
  }
  .hero-copy-main{
    width:min(680px,82vw);
    min-height:650px;
    padding:72px 0 58px 28px;
  }
  .hero-image img,
  .hero-image .auto-photo-image{
    object-position:56% 50% !important;
  }
}

@media(max-width:560px){
  .hero-full{
    height:clamp(640px,82svh,740px);
    min-height:640px;
  }
  .hero-full::after{
    background:
      linear-gradient(0deg,rgba(7,15,25,.78) 0%,rgba(7,15,25,.44) 48%,rgba(7,15,25,.18) 100%),
      linear-gradient(90deg,rgba(7,15,25,.50) 0%,rgba(7,15,25,.10) 100%);
  }
  .hero-copy-main{
    width:100%;
    min-height:640px;
    justify-content:flex-end;
    padding:50px 20px 44px;
  }
  .hero-copy-main .eyebrow{
    margin-bottom:14px;
    font-size:10px;
  }
  .hero-copy-main h1{
    font-size:clamp(50px,15vw,66px);
    line-height:.92;
  }
  .hero-copy-main .lead{
    max-width:94%;
    margin-top:22px;
    font-size:14px;
    line-height:1.8;
  }
  .hero-copy-main .hero-actions{
    width:100%;
    gap:8px;
    margin-top:24px;
  }
  .hero-copy-main .solid-button,
  .hero-copy-main .outline-button{
    min-height:50px;
    padding:0 18px;
    font-size:11px;
  }
  .hero-image img,
  .hero-image .auto-photo-image{
    object-position:58% 50% !important;
  }
}