/* ===========================================================================
   Native homepage hero. Real HTML injected as a sibling BEFORE Framer's #main
   root (so hydration never touches it); Framer's own Hero is hidden via
   hero-cta.css. Sits BELOW the fixed header (z-index:0) and has no nav/logo of
   its own. Grows to fit content (height:auto, min-height:100vh floor).
   Two columns on desktop/tablet, single column (photo banner on top) on mobile.
   =========================================================================== */

.lhero {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;   /* floor, never a cap */
  height: auto;
  overflow: visible;   /* nothing clips */
  background: #000;
  color: #fff;
  font-family: "Roboto Mono", monospace;   /* site body/UI font (matches the /about body preset) */
}

/* ---- left column: content ---- */
.lhero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 120px 5vw 80px;   /* top padding clears the fixed header */
  box-sizing: border-box;
  min-width: 0;
}
.lhero-content > * { max-width: 560px; margin: 0; }   /* readable line length */

.lhero-eyebrow { font-size: 13px; letter-spacing: 1.6px; color: #9aa3ad; }
.lhero-title {
  /* site display/headline font — same as the footer "LANDON DURM" and headings */
  font-family: "Space Grotesk", "Space Grotesk Placeholder", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: -1.2px;
  font-size: clamp(44px, 6vw, 120px);
  color: #fff;
}
.lhero-intro { font-size: 17px; line-height: 1.65; color: #e8e8e8; }
.lhero-proof {
  font-size: 16px; line-height: 1.7; color: #cfcfcf;
  padding-left: 14px; border-left: 2px solid rgba(0, 153, 255, .55);
}
.lhero-offer { font-size: 15.5px; line-height: 1.7; color: #fff; }
.lhero-intro strong, .lhero-offer strong { color: #fff; font-weight: 700; }
.lhero-intro em, .lhero-proof em { font-style: italic; color: #d8d8d8; }
.lhero-num { color: #0099ff; font-weight: 700; }

/* ---- form ---- */
.lhero-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; max-width: 560px; }
.lhero-label { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: #a0a0a0; }
.lhero-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* Underline field — a line, not a box. */
.lhero-input {
  flex: 1 1 240px; min-width: 0; box-sizing: border-box;
  padding: 4px 2px 12px; background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); border-radius: 0;
  font: inherit; font-size: 18px; letter-spacing: .3px;
  transition: border-color .2s ease;
}
.lhero-input::placeholder { color: #7a828c; }
.lhero-input:focus { outline: none; border-bottom-color: #0099ff; }

/* Chamfered button (top-left + bottom-right corners cut, 14px — the site's box
   style), light-blue fill with a dark frame. Two clipped layers so the dark
   border follows the chamfer. */
.lhero-btn {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  padding: 15px 32px;
  border: 0;
  background: transparent;
  color: #0b0b0d;                 /* dark text on the white fill */
  font: inherit; font-weight: 700; letter-spacing: .3px;
  cursor: pointer;
  transition: color .4s cubic-bezier(.4, 0, .2, 1);
}
.lhero-btn::before {   /* dark chamfer frame (bottom layer) */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: #0b0b0d;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
/* Fill: white by default; on hover the site's blue (#0099ff) slides in from the
   left — a background-position wipe rather than a fade — matching the header/nav
   buttons. Inset 2px so the dark frame reads as a border. */
.lhero-btn::after {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background: linear-gradient(to right, #0099ff 0 50%, #ffffff 50% 100%);
  background-size: 200% 100%;
  background-position: 100% 50%;   /* white showing */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background-position .4s cubic-bezier(.4, 0, .2, 1);
}
.lhero-btn:hover { color: #ffffff; }
.lhero-btn:hover::after { background-position: 0% 50%; }   /* blue wipes in from the left */
.lhero-btn:focus-visible { color: #ffffff; outline: none; }
.lhero-btn:focus-visible::after { background-position: 0% 50%; }
.lhero-btn:disabled { opacity: .55; cursor: default; }
.lhero-status { min-height: 18px; font-size: 13px; color: #7fd4ff; margin: 2px 0 0; }
.lhero-status.is-error { color: #ff7a7a; }

/* ---- right column: photo, full-bleed ---- */
.lhero-photo { position: relative; overflow: hidden; }
.lhero-photo picture { display: block; width: 100%; height: 100%; }
.lhero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%; }

/* ---- tablet 810–1199 ---- */
@media (max-width: 1199px) {
  .lhero-content { padding: 104px 40px 64px; gap: 20px; }
  .lhero-content > *, .lhero-form { max-width: 520px; }
  .lhero-title { font-size: clamp(40px, 6.5vw, 92px); }
}

/* ---- mobile <810: single column, photo banner on top, nothing clips ---- */
@media (max-width: 809px) {
  .lhero { grid-template-columns: 1fr; }
  .lhero-photo { order: -1; height: 42vh; min-height: 260px; }
  .lhero-photo img { object-position: 55% 25%; }
  .lhero-content { justify-content: flex-start; padding: 40px 24px 56px; gap: 20px; }
  .lhero-content > *, .lhero-form { max-width: none; }
  .lhero-title { font-size: clamp(40px, 12vw, 72px); }
  .lhero-row { flex-direction: column; align-items: stretch; }
  .lhero-btn { width: 100%; }
}