/* WeManage Rentals — compact first-screen HOME hero.
   Scoped to homepage; public header, other heroes and CMS admin remain unchanged. */
@media (min-width:1021px) {
  .home-hero {
    /* Main navigation is 94px high; announcement bar is approximately 36px. */
    min-height: max(570px, calc(100svh - 130px));
    padding: clamp(16px, 2.4vh, 28px) 0 clamp(16px, 2.4vh, 28px) !important;
    display:flex;
    align-items:center;
  }
  .home-hero > .w.g2 {
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    align-items:center;
    gap:clamp(24px,3.3vw,54px) !important;
  }
  .home-hero > .w.g2 > div,
  .home-hero > .w.g2 > form {min-width:0;}
  .home-hero .k {font-size:.72rem;letter-spacing:.14em;line-height:1.35;margin-bottom:12px;}
  .home-hero h1 {
    font-size:clamp(2.05rem,2.45vw,2.7rem) !important;
    line-height:1.105 !important;
    letter-spacing:-.032em;
    max-width:31ch;
    margin-bottom:12px !important;
  }
  .home-hero p.l {
    font-size:clamp(.95rem,1.03vw,1.05rem) !important;
    line-height:1.55 !important;
    margin:0 0 13px !important;
    max-width:70ch;
  }
  .home-hero > .w.g2 > div > p:has(> .btn) {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 12px !important;
    max-width:none;
  }
  .home-hero > .w.g2 > div > p:has(> .btn) .btn {
    min-height:42px;
    padding:9px 16px;
    margin:0 !important;
    font-size:.84rem;
  }
  .home-hero > .w.g2 > div > p.fine {
    font-size:.79rem;
    line-height:1.43;
    margin:0 0 13px !important;
    max-width:70ch;
  }
  .home-hero > .w.g2 > div > .ph {
    margin-top:0 !important;
    min-height:98px !important;
    height:clamp(98px,13vh,122px);
    max-height:122px;
    padding:12px 22px;
    font-size:.77rem;
    line-height:1.45;
    overflow:hidden;
  }
  .home-hero > .w.g2 > div > .ph .icon {font-size:25px;margin:0;}
  /* Admin-selected images and videos must also respect the viewport-friendly frame. */
  .home-hero > .w.g2 > div > .ph img,
  .home-hero > .w.g2 > div > .ph video,
  .home-hero > .w.g2 > div > .ph iframe {
    width:100%;
    height:100%;
    max-height:122px !important;
    max-width:100%;
    object-fit:cover;
    display:block;
  }
  .home-hero .form {
    padding:clamp(19px,2vw,26px) !important;
    align-self:center;
    margin:0;
    border-radius:15px;
  }
  .home-hero .stp {margin-bottom:9px !important;gap:8px;}
  .home-hero .stp i {height:4px;}
  .home-hero #stl {font-size:.78rem;line-height:1.35;}
  .home-hero .form h2 {
    font-size:clamp(1.25rem,1.45vw,1.52rem) !important;
    line-height:1.24 !important;
    margin:9px 0 10px !important;
    max-width:28ch;
  }
  .home-hero .form > p.fine {font-size:.78rem;line-height:1.43;margin-bottom:8px !important;}
  .home-hero .form label {
    margin:9px 0 4px !important;
    font-size:.77rem !important;
    line-height:1.3;
  }
  .home-hero .form input:not([type="hidden"]),
  .home-hero .form select {
    min-height:42px !important;
    height:42px;
    padding:8px 12px !important;
    font-size:.88rem !important;
  }
  .home-hero .form .btn {
    min-height:43px;
    margin-top:14px !important;
    padding:10px 14px;
    font-size:.88rem;
  }
  .home-hero .form > p.fine[style] {margin-top:10px !important;}
  .home-hero .form > p.fine:last-child {margin-bottom:0 !important;}
}

/* Tighter desktop screens: reduce spare space without cropping any form content. */
@media (min-width:1021px) and (max-height:760px) {
  .home-hero {padding:12px 0 !important;min-height:0;}
  .home-hero .k {margin-bottom:8px;}
  .home-hero h1 {font-size:clamp(1.9rem,2.2vw,2.35rem) !important;margin-bottom:8px !important;}
  .home-hero p.l {font-size:.94rem !important;line-height:1.43 !important;margin-bottom:10px !important;}
  .home-hero > .w.g2 > div > p:has(> .btn) {margin-bottom:8px !important;}
  .home-hero > .w.g2 > div > p.fine {font-size:.75rem;margin-bottom:9px !important;}
  .home-hero > .w.g2 > div > .ph {height:85px;min-height:85px !important;}
  .home-hero .form {padding:16px 21px !important;}
  .home-hero .form h2 {font-size:1.27rem !important;margin:7px 0 !important;}
  .home-hero .form label {margin-top:7px !important;}
  .home-hero .form input:not([type="hidden"]),.home-hero .form select {height:38px;min-height:38px !important;}
  .home-hero .form .btn {min-height:39px;margin-top:11px !important;}
}

/* Tablet and phone: preserve natural vertical scroll and usable font/field sizes. */
@media (max-width:1020px) {
  .home-hero {padding:38px 0 74px !important;min-height:0;}
  .home-hero > .w.g2 {align-items:start;gap:26px !important;}
  .home-hero h1 {margin-bottom:16px;}
  .home-hero .ph {margin-top:18px !important;}
}
@media (max-width:600px) {
  .home-hero {padding:27px 0 68px !important;}
  .home-hero .ph {min-height:115px !important;}
  .home-hero .form {padding:22px !important;}
}

/* Keep the second enquiry step in view on ordinary 768px-tall desktop displays. */
@media (min-width:1021px) and (max-height:840px) {
  .home-hero .form .a2 label {margin-top:6px !important;}
  .home-hero .form .a2 input:not([type="hidden"]),
  .home-hero .form .a2 select {min-height:40px !important;height:40px;}
}

/* Oct 22 refinement: equal-height media and enquiry card, stable typography.
   Override the former 85–122px media cap without changing other pages. */
@media (min-width:1021px) {
  .home-hero {
    display:block !important;
    height:auto !important;
    min-height:calc(100svh - 130px);
    padding:clamp(18px,2.7vh,30px) 0 !important;
  }
  .home-hero > .w.g2 {
    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
    align-items:stretch !important;
    gap:clamp(22px,3vw,46px) !important;
  }
  .home-hero > .w.g2 > div:first-child {
    display:flex !important;
    flex-direction:column !important;
    min-width:0;
    align-self:stretch;
  }
  .home-hero > .w.g2 > form.form {
    align-self:stretch !important;
    height:auto !important;
    min-width:0;
    position:relative;
    top:auto !important;
    transform:none !important;
  }
  /* Keep the heading at the established site scale instead of resizing it by screen height. */
  .home-hero h1,
  .home-hero p.l {
    font-size:revert-layer;
  }
  .home-hero h1 {
    font-size:clamp(2.05rem,2.45vw,2.7rem) !important;
    line-height:1.13 !important;
    margin-bottom:12px !important;
  }
  .home-hero p.l {
    font-size:clamp(.95rem,1.03vw,1.05rem) !important;
    line-height:1.52 !important;
  }
  .home-hero > .w.g2 > div:first-child > .ph {
    display:flex !important;
    flex:1 1 190px !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:180px !important;
    height:auto !important;
    max-height:none !important;
    margin-top:12px !important;
    overflow:hidden;
  }
  .home-hero > .w.g2 > div:first-child > .ph:has(img),
  .home-hero > .w.g2 > div:first-child > .ph:has(video),
  .home-hero > .w.g2 > div:first-child > .ph:has(iframe) {padding:0 !important;}
  .home-hero > .w.g2 > div:first-child > .ph img,
  .home-hero > .w.g2 > div:first-child > .ph video,
  .home-hero > .w.g2 > div:first-child > .ph iframe {
    width:100% !important;
    height:100% !important;
    min-height:180px;
    max-height:none !important;
    object-fit:cover;
  }
  .home-hero .form h2 {
    font-size:clamp(.94rem,1.13vw,1.13rem) !important;
    line-height:1.3 !important;
    font-weight:750;
    max-width:none !important;
    white-space:nowrap;
    letter-spacing:-.025em;
  }
}
/* Consistent typography on short desktop screens; reduce gaps, not headings. */
@media (min-width:1021px) and (max-height:760px) {
  .home-hero h1 {font-size:clamp(2.05rem,2.45vw,2.7rem) !important;line-height:1.13 !important;}
  .home-hero p.l {font-size:clamp(.95rem,1.03vw,1.05rem) !important;line-height:1.52 !important;}
  .home-hero > .w.g2 > div:first-child > .ph {min-height:150px !important;flex-basis:150px !important;}
  .home-hero .form h2 {font-size:clamp(.94rem,1.13vw,1.13rem) !important;}
}
/* Very narrow desktops can use a slightly smaller heading without wrapping. */
@media (min-width:1021px) and (max-width:1200px) {
  .home-hero > .w.g2 {grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:22px !important;}
  .home-hero .form {padding:15px !important;}
  .home-hero .form h2 {font-size:.93rem !important;letter-spacing:-.035em;}
}
@media (max-width:1020px) {
  /* Do not force a one-line form heading on phones; preserve legibility. */
  .home-hero .form h2 {white-space:normal !important;max-width:none !important;}
  .home-hero > .w.g2 > div:first-child > .ph {min-height:220px !important;height:auto !important;max-height:none !important;}
}

/* 2026-10-22: Prevent homepage hero from sliding beneath the sticky header.
   This block deliberately wins over the older short-screen compact rules. */
.home-hero {
  position:relative !important;
  top:auto !important;
  margin-top:0 !important;
  scroll-margin-top:0;
  overflow:visible;
}
@media (min-width:1021px) {
  .home-hero {
    display:block !important;
    padding-top:clamp(58px,7vh,82px) !important;
    padding-bottom:clamp(26px,3.2vh,44px) !important;
    min-height:0 !important;
    height:auto !important;
  }
  .home-hero > .w.g2 {
    align-items:start !important;
    position:relative !important;
    top:0 !important;
    margin-top:0 !important;
  }
  .home-hero > .w.g2 > div:first-child,
  .home-hero > .w.g2 > form.form {
    top:0 !important;
    margin-top:0 !important;
    translate:none !important;
  }
  /* Form is never vertically centred above the left-hand heading. */
  .home-hero > .w.g2 > form.form {align-self:start !important;}
}
@media (min-width:1021px) and (max-height:800px) {
  .home-hero {padding-top:48px !important;padding-bottom:22px !important;}
}
@media (max-width:1020px) {
  .home-hero {padding-top:38px !important;}
}

/* Form title: restore a legible heading size (previous compact rules shrank it). */
@media (min-width:1281px) {
  .home-hero .form h2 {
    font-size:1.45rem !important;
    line-height:1.3 !important;
    letter-spacing:-.025em !important;
    white-space:nowrap !important;
    margin:10px 0 12px !important;
  }
}
@media (min-width:1021px) and (max-width:1280px) {
  .home-hero .form h2 {
    font-size:clamp(1.15rem,1.7vw,1.35rem) !important;
    line-height:1.3 !important;
    letter-spacing:-.03em !important;
    white-space:normal !important;
    margin:10px 0 12px !important;
  }
}
@media (max-width:1020px) {
  .home-hero .form h2 {
    font-size:clamp(1.3rem,4.3vw,1.45rem) !important;
    line-height:1.3 !important;
    white-space:normal !important;
  }
}

/* Final: hero flow must begin visibly BELOW the sticky header.
   Earlier first-screen rules centered the two columns vertically inside a
   viewport-sized hero; that allowed the top to slip underneath navigation. */
body main > section.hero.home-hero {
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin-top:0 !important;
  padding-top:46px !important;
  padding-bottom:65px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
body main > section.hero.home-hero > .w.g2 {
  display:grid !important;
  align-items:start !important;
  margin:0 auto !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  transform:none !important;
  translate:none !important;
}
body main > section.hero.home-hero > .w.g2 > div:first-child,
body main > section.hero.home-hero > .w.g2 > form.form {
  align-self:start !important;
  margin-top:0 !important;
  top:auto !important;
  transform:none !important;
  translate:none !important;
}
/* The clear gap must also apply on low-height desktop windows. */
@media (min-width:1021px) and (max-height:760px) {
  body main > section.hero.home-hero { padding-top:40px !important; padding-bottom:55px !important; }
}
@media (min-width:601px) and (max-width:1020px) {
  body main > section.hero.home-hero { padding-top:36px !important; padding-bottom:58px !important; }
}
@media (max-width:600px) {
  body main > section.hero.home-hero { padding-top:28px !important; padding-bottom:55px !important; }
}