/* ============================================================================
   HERO — engineered to spec.
     - No fixed heights. Padding defines the box; content grows into it.
     - Section wrapper: position:relative; width:100%; margin:0; padding: 3rem 1rem 4rem;
       overflow:hidden.
     - Image layer (z-index:1) sits behind, object-fit:cover with a LEFT-biased
       focal point so the craftsman on the left of the photo is never cropped.
     - Dark gradient overlay (z-index:2) guarantees white text is always legible.
     - Content column (z-index:3) is centered inside max-width:1200px.
   ========================================================================== */

/* Ancestor reset — kill any hidden gutter that inserts a black strip between
   the sticky header and the hero. */
main{margin:0;padding:0;display:block}

/* -----------------------------------------------------------------------------
   1. WRAPPER — flush against the header, height driven by padding + content.
   ---------------------------------------------------------------------------- */
.hero-full{
  position:relative;
  width:100%;
  margin:0;
  padding:3rem 1rem 4rem 1rem;
  overflow:hidden;
  color:#fff;
  background:#0a0a0a;   /* Baseline behind the image. */
  text-align:center;
}

/* -----------------------------------------------------------------------------
   2. IMAGE — absolute, cover, focal point at 20% (keeps left subject in frame).
   ---------------------------------------------------------------------------- */
.hero-full__bg{
  position:absolute;
  inset:0;
  margin:0;padding:0;
  overflow:hidden;
  z-index:1;
}
.hero-full__bg picture{
  display:block;
  width:100%;height:100%;
  margin:0;padding:0;
}
.hero-full__bg img{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:20% center;
  margin:0;padding:0;
  display:block;
  z-index:1;
}

/* -----------------------------------------------------------------------------
   3. OVERLAY — flat, deep dark gradient. No fancy compositing.
   ---------------------------------------------------------------------------- */
.hero-full__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.85) 100%);
  z-index:2;
  pointer-events:none;
}

/* -----------------------------------------------------------------------------
   4. CONTENT COLUMN — everything text-facing lives here.
   ---------------------------------------------------------------------------- */
.hero-full__inner{
  position:relative;
  z-index:3;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* -----------------------------------------------------------------------------
   5. LOCATION BADGE — sleek red pill, one line, never wraps.
   ---------------------------------------------------------------------------- */
.hero-full__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#d32f2f;
  color:#fff;
  padding:5px 12px;
  border-radius:9999px;
  font-size:0.72rem;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.4px;
  white-space:nowrap;
  max-width:100%;
  margin:0 0 1.25rem;
}
.hero-full__eyebrow svg{
  width:12px;
  height:12px;
  flex-shrink:0;
  display:block;
}
.hero-full__eyebrow-text{
  display:inline-block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
}

/* -----------------------------------------------------------------------------
   6. H1 + LEAD PARAGRAPH — clean typography, no drop shadow noise.
   ---------------------------------------------------------------------------- */
.hero-full__title{
  color:#fff;
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 4vw + 1rem, 4.5rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  text-wrap:balance;
  max-width:26ch;
}
.hero-full__title em{font-style:italic;font-weight:500;color:#fff}

.hero-full__lead{
  color:rgba(255,255,255,.92);
  font-size:clamp(1.05rem, 1vw + .75rem, 1.35rem);
  line-height:1.55;
  max-width:44rem;
  margin:0 0 .5rem;
  text-wrap:pretty;
}

/* -----------------------------------------------------------------------------
   7. LEAD-CAPTURE FORM — white card, subtle shadow, always at 480px max.
   ---------------------------------------------------------------------------- */
.hero-full__inner .bridge-form{
  width:100%;
  max-width:480px;
  margin:2rem auto 0 auto;
  padding:1.5rem;
  background:#ffffff;
  border:0;
  border-radius:12px;
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.3);
  text-align:left;
  animation:none;opacity:1;transform:none;
}
.hero-full__inner .bridge-form__row{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}
.hero-full__inner .bridge-form__submit{
  width:100%;
  min-height:52px;
  justify-content:center;
}
.hero-full__inner .bridge-form__hint{
  margin:.75rem 0 0;
  text-align:center;
  font-size:.82rem;
  color:#555;
}

/* -----------------------------------------------------------------------------
   8. "Prefer to talk now" row — small, quiet, centered under the form.
   ---------------------------------------------------------------------------- */
.hero-full__call{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:1.25rem 0 0;
  color:rgba(255,255,255,.85);
  font-size:.92rem;
  line-height:1.2;
}
.hero-full__call svg{width:16px;height:16px;color:#f8bfc5;display:block;flex-shrink:0}
.hero-full__call a{
  color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:1px;
}
.hero-full__call a:hover{border-color:#fff}

/* -----------------------------------------------------------------------------
   9. TRUST BADGES — rendered ONCE, subtle flex-wrap grid under the hero copy.
   ---------------------------------------------------------------------------- */
.hero-full__proof{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:1.5rem;
  padding:0;
  border:0;
  max-width:640px;
}
.hero-full__proof-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:rgba(255,255,255,0.1);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  border-radius:8px;
  font-size:0.85rem;
  line-height:1.2;
}
.hero-full__proof-item svg{
  width:14px;height:14px;
  color:#f8bfc5;
  flex-shrink:0;
  display:block;
}
.hero-full__proof-item span{display:inline-block;line-height:1.2}

/* -----------------------------------------------------------------------------
   10. Scroll cue — kept, but only shown on desktop.
   ---------------------------------------------------------------------------- */
.hero-full__scroll{
  display:none;
  position:absolute;
  bottom:1.25rem;left:50%;
  transform:translateX(-50%);
  z-index:4;
  color:rgba(255,255,255,.55);
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  text-decoration:none;
  align-items:center;flex-direction:column;gap:.4rem;
  transition:color .2s ease;
}
@media(min-width:1024px){
  .hero-full__scroll{display:flex}
}
.hero-full__scroll::after{content:"";width:1px;height:34px;background:rgba(255,255,255,.4)}

/* ============================================================================
   MOBILE (< 768px) — natural document flow. Portrait hero image is 1:1;
   focal point stays LEFT so Rob's face never crops out.
   ========================================================================== */
@media(max-width:768px){
  .hero-full{padding:2.25rem 1rem 3rem 1rem}
  /* Portrait / square source (Rob on the left third of the frame). */
  .hero-full__bg img{object-position:15% center}
  .hero-full__title{font-size:clamp(1.85rem, 8vw, 2.4rem);max-width:20ch}
  .hero-full__lead{font-size:1rem}
  .hero-full__inner .bridge-form{max-width:100%;margin-top:1.5rem}
  .hero-full__proof{margin-top:1.25rem;gap:8px}
  .hero-full__proof-item{padding:7px 12px;font-size:.78rem}
  .hero-full__proof-item svg{width:13px;height:13px}
  .hero-full__eyebrow{font-size:.68rem;padding:4px 11px;letter-spacing:.3px}
  .hero-full__eyebrow svg{width:11px;height:11px}
}
@media(max-width:400px){
  .hero-full__eyebrow{font-size:.64rem;padding:4px 10px;letter-spacing:.25px}
  .hero-full__eyebrow svg{width:10px;height:10px}
}

/* ============================================================================
   DESKTOP FORM WIDTH — spec pins 480px; keep it there but allow the three
   input columns to breathe by reflowing on ≥760px.
   ========================================================================== */
@media(min-width:760px){
  .hero-full__inner .bridge-form{max-width:640px}
  .hero-full__inner .bridge-form__row{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero-full__inner .bridge-form__submit{grid-column:1 / -1}
}

/* ============================================================================
   INTERIOR SUB-HERO — same architecture, shallower padding.
   ========================================================================== */
.hero-sub{
  position:relative;
  width:100%;
  margin:0;
  padding:2.5rem 1rem 3rem 1rem;
  overflow:hidden;
  color:#fff;
  background:#0a0a0a;
  text-align:center;
}
.hero-sub__bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-sub__bg img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:20% center;
  z-index:1;
  display:block;
  margin:0;padding:0;
}
.hero-sub__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.85) 100%);
  z-index:2;pointer-events:none;
}
.hero-sub__inner{
  position:relative;
  z-index:3;
  max-width:1200px;
  width:100%;
  margin:0 auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-sub__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#d32f2f;color:#fff;
  padding:6px 16px;
  border-radius:9999px;
  font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  line-height:1;
  margin:0 0 1rem;
}
.hero-sub__eyebrow svg{width:14px;height:14px;flex-shrink:0;display:block}
.hero-sub__title{
  color:#fff;margin:0 0 .75rem;
  font-family:var(--font-display);
  font-size:clamp(1.9rem, 3vw + .8rem, 3.25rem);
  line-height:1.1;letter-spacing:-.02em;font-weight:700;
  text-wrap:balance;max-width:32ch;
}
.hero-sub__title em{font-style:italic;font-weight:500;color:#fff}
.hero-sub__lead{
  color:rgba(255,255,255,.92);
  font-size:1.05rem;line-height:1.55;
  max-width:40rem;margin:0 0 1.5rem;
  text-wrap:pretty;
}
.hero-sub__cta-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  margin:0;
}
@media(max-width:640px){
  .hero-sub__cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
  .hero-sub__cta-row .btn{width:100%}
}