/* Hero v2.1 - /airbnb-virtual-assistant-services/
   Every selector scoped under .svab-hero. No bare element selectors, no :root.

   THE PHOTOGRAPH, MEASURED
   ------------------------
   1717x916, used whole and un-mirrored (the monitor and desk sign carry Airbnb
   wordmarks). Per-column luma stddev, measured both over the full image height and
   restricted to the band the copy occupies - both give the same answer:
       x 0..535px  -> 0.33-0.91   flat, evenly-lit wall
       x 550px+    -> 40-100      busy: subject, desk, monitor, shelving
   Region means: far-left #FBF8F6, upper-left #FAF7F5, x 430..535 #F7F4EF.

   So the extendable wall is on the LEFT and the subject is centre-RIGHT. Copy sits
   left, on the wall already in the frame. --svab-wall is the sampled upper-left
   value and is also the section background, so photo and page are the same colour
   where they meet, and the photo's masked left edge dissolves with no seam.

   GEOMETRY
   --------
   The section fills the viewport, so the next section is never visible above the
   fold. The photo fills the section's full height and bleeds off the RIGHT edge
   (losing only the neon sign), rather than being fitted inside it.

   Its left edge P is placed so the flat wall still clears the copy column:
       flat wall covers  P .. P + 535 * scale,  scale >= sectionHeight/916
       so  P = max(0, copyRightEdge + 40px - 58.4vh)
   58.4vh is 535/916 of the section height - the conservative, height-driven form;
   when the window is wide and short the true scale is larger, which only adds
   clearance. Verified at 11 window sizes from 1024x768 to 2560x1440: every one
   clears the copy by 40px or more. */

.svab-hero{
  --svab-wall:#FAF7F5;          /* sampled: image upper-left, stddev 1.63 */
  --svab-accent:#F64A00;        /* 3.34:1 on the wall - large text and borders only */
  --svab-accent-deep:#D64000;   /* 4.57:1 with white */
  --svab-ink:#1A1A1A;           /* 16.32:1 on the wall */
  --svab-body:#3A4250;          /*  9.49:1 on the wall */
  --svab-ease:cubic-bezier(.4,0,.2,1);

  /* The theme header is a 1320px centred container (element ec912a4,
     --content-width:1320px). Matching it puts the copy's left edge on the same
     vertical line as the banner above it. */
  --svab-gutter:max(24px, calc((100vw - 1320px) / 2));
  --svab-colw:min(34vw, 500px);
  /* Right edge of the copy, plus breathing room before the subject starts. */
  --svab-clean:calc(var(--svab-gutter) + var(--svab-colw) + 40px);
  --svab-photo-left:max(0px, calc(var(--svab-clean) - 58.4vh));

  --svab-pad-top:190px;         /* clears the ~170px absolutely-positioned header */
  --svab-pad-bottom:88px;

  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  /* Fill the viewport so the following section never peeks in. The WP admin bar
     is only present for logged-in users; the variable is 0 otherwise. */
  min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height:calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  padding:var(--svab-pad-top) 0 var(--svab-pad-bottom);
  background:var(--svab-wall);
  color:var(--svab-ink);
  overflow:hidden;
  isolation:isolate;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.svab-hero *,
.svab-hero *::before,
.svab-hero *::after{box-sizing:border-box;}

/* ---------------- the photograph ----------------
   Absolutely positioned, so it contributes nothing to layout and cannot shift it:
   CLS from this image is structurally zero. */
.svab-hero .svab-hero__photo{
  position:absolute;
  left:var(--svab-photo-left);
  right:0;
  top:0;
  bottom:0;
  display:block;
  z-index:0;
  pointer-events:none;
  /* Dissolve the left edge across the image's own flat left third. Being a
     percentage of the element, the cut stays on flat wall at every size. */
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 14%, rgba(0,0,0,1) 30%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 14%, rgba(0,0,0,1) 30%);
}
.svab-hero .svab-hero__photo img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:left center;   /* keep the wall, crop the neon sign off the right */
}

/* ---------------- content ---------------- */
.svab-hero .svab-hero__content{
  position:relative;
  z-index:1;
  width:var(--svab-colw);
  min-width:0;
  margin-left:var(--svab-gutter);
  animation:svabHeroIn 400ms var(--svab-ease) both;
}

.svab-hero .svab-hero__title{
  margin:0 0 22px;
  padding:0;
  border:0;
  font-family:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--svab-ink);
  text-transform:none;
  overflow-wrap:break-word;
}
.svab-hero .svab-hero__title-accent{color:var(--svab-accent);}

.svab-hero .svab-hero__copy{margin:0 0 32px;}
.svab-hero .svab-hero__copy p{
  margin:0 0 14px;
  padding:0;
  font-size:clamp(1rem, .96rem + .15vw, 1.0625rem);
  line-height:1.62;
  font-weight:400;
  color:var(--svab-body);
}
.svab-hero .svab-hero__copy p:last-child{margin-bottom:0;}

/* ---------------- actions ---------------- */
.svab-hero .svab-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin:0;}
.svab-hero .svab-hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 30px;
  border:2px solid transparent;
  border-radius:8px;
  font-family:"Red Hat Display",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:1rem;
  line-height:1.2;
  font-weight:700;
  text-decoration:none;
  text-transform:none;
  cursor:pointer;
  transition:background-color .2s var(--svab-ease), color .2s var(--svab-ease), border-color .2s var(--svab-ease);
}
.svab-hero .svab-hero__btn--primary{
  background:var(--svab-accent-deep);
  border-color:var(--svab-accent-deep);
  color:#FFFFFF;
}
.svab-hero .svab-hero__btn--primary:hover,
.svab-hero .svab-hero__btn--primary:focus-visible{background:#B03400;border-color:#B03400;}
.svab-hero .svab-hero__btn--secondary{
  background:#FFFFFF;
  border-color:var(--svab-accent);
  color:var(--svab-accent-deep);
}
.svab-hero .svab-hero__btn--secondary:hover,
.svab-hero .svab-hero__btn--secondary:focus-visible{
  background:#FFF4EE;
  border-color:var(--svab-accent-deep);
  color:#B03400;
}
.svab-hero .svab-hero__btn:focus-visible{outline:3px solid var(--svab-accent-deep);outline-offset:3px;}

@keyframes svabHeroIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------------- 1024-1199: copy narrows a little ---------------- */
@media (max-width:1199.98px) and (min-width:1024px){
  .svab-hero{--svab-colw:min(40vw, 460px);--svab-pad-bottom:72px;}
}

/* ---------------- <1024: photo becomes a top band, copy below on the wall ------- */
@media (max-width:1023.98px){
  .svab-hero{
    --svab-pad-top:0px;
    --svab-pad-bottom:64px;
    display:block;
    min-height:0;
    padding:0 0 var(--svab-pad-bottom);
  }
  .svab-hero .svab-hero__photo{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:100%;
    height:50vh;
    min-height:340px;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .svab-hero .svab-hero__photo img{
    object-position:72% center;   /* keeps the subject and both screens in frame */
  }
  .svab-hero .svab-hero__content{
    width:auto;
    max-width:640px;
    margin-left:0;
    padding:40px 24px 0;
  }
}

/* ---------------- <768: shorter band ---------------- */
@media (max-width:767.98px){
  .svab-hero .svab-hero__photo{height:38vh;min-height:250px;}
  .svab-hero .svab-hero__photo img{object-position:76% center;}
  .svab-hero .svab-hero__content{padding:32px 20px 0;}
  .svab-hero .svab-hero__title{margin-bottom:16px;}
  .svab-hero .svab-hero__copy{margin-bottom:26px;}
}

/* ---------------- <400: buttons full width, stacked ---------------- */
@media (max-width:399.98px){
  .svab-hero .svab-hero__actions{flex-direction:column;align-items:stretch;gap:12px;}
  .svab-hero .svab-hero__btn{width:100%;padding:15px 20px;}
}

@media (prefers-reduced-motion:reduce){
  .svab-hero .svab-hero__content{animation:none;}
  .svab-hero .svab-hero__btn{transition:none;}
}