/* The example studio site shown on the platform home page (and its preview in HQ). */
.lp-site-hero.has-photo { height: 236px; background: #24324F; position: relative; overflow: hidden; }
.lp-site-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; }
.lp-site-hero.has-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,27,51,.82) 0%, rgba(11,27,51,.55) 38%, rgba(11,27,51,.05) 70%),
              linear-gradient(180deg, rgba(11,27,51,.45) 0%, rgba(11,27,51,0) 30%); }
.lp-site-nav { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px;
  padding: 12px 18px; color: #fff; font-size: 11px; line-height: 1.4; letter-spacing: .06em; }
.lp-site-nav b { font-size: 14px; letter-spacing: 0; margin-right: auto; color: #fff; font-weight: 800; }
.lp-site-nav span { opacity: .9; text-transform: uppercase; }
.lp-site-nav i { font-style: normal; background: #F3D9A4; color: #0B1B33; padding: 4px 12px; border-radius: 99px; font-weight: 700; text-transform: uppercase; }
.lp-site-copy { position: absolute; z-index: 1; left: 22px; bottom: 22px; color: #fff; max-width: 62%; }
.lp-site-eyebrow { display: block; font-size: 10px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.lp-site-h1 { font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.15; margin-bottom: 12px;
  color: #fff; letter-spacing: 0; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.lp-site-btns { display: flex; gap: 8px; }
.lp-site-btns i { font-style: normal; font-size: 10.5px; line-height: 1.4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.75); color: #fff; white-space: nowrap; }
.lp-site-btns i.solid { background: #F3D9A4; border-color: #F3D9A4; color: #0B1B33; }
/* Phone size (also forced in the HQ preview with .is-small). */
.lp-site-hero.is-small { height: 190px; }
.is-small .lp-site-h1 { font-size: 19px; }
.is-small .lp-site-nav span { display: none; }
.is-small .lp-site-copy { max-width: 75%; bottom: 16px; left: 16px; }
@media (max-width: 560px) {
  .lp-site-hero.has-photo { height: 190px; }
  .lp-site-h1 { font-size: 19px; }
  .lp-site-nav span { display: none; }
  .lp-site-copy { max-width: 75%; bottom: 16px; left: 16px; }
}