/* Home banner only. Loaded after site.css; nothing else on the site is changed. */
.hero{position:relative;display:block;overflow:hidden;isolation:isolate;aspect-ratio:2400/960;min-height:560px;max-height:820px;
  background:#1b78e6;border-bottom:5px solid var(--marigold);padding:0}

/* Full-width banner picture: vivid blue sky edge to edge, whole tower on the left, trees + sun on the right.
   No overlay, no gradient layer on top - the picture itself carries the colour. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left bottom;z-index:-2}
.hero-inner{align-items:center}

/* CHANGED: full width container, tiny right gutter (16-40px) so content hugs the right corner */
.hero-inner{width:100% !important;max-width:none !important;box-sizing:border-box;min-height:inherit;
  display:flex;align-items:center;justify-content:flex-end;
  margin:0 !important;padding:0 clamp(16px,2.2vw,40px) !important}

/* CHANGED: fixed width, pushed to the far right with margin-left:auto */
.hero-copy{align-items:flex-start;text-align:left;
  width:640px !important;max-width:100% !important;
  margin:0 0 0 auto !important;box-sizing:border-box;
  padding:clamp(40px,5vw,72px) 0 !important}

.hero h1{font-size:clamp(34px,4vw,60px);line-height:1.08;margin-bottom:.4em;color:#fff;text-wrap:balance;text-shadow:0 2px 14px rgba(5,40,110,.45)}
.hero h1 em{display:block;font-style:normal;color:var(--marigold);
  white-space:nowrap;font-size:.82em;letter-spacing:0;
  font-weight:900;-webkit-text-stroke:1.2px var(--marigold);paint-order:stroke fill}
.hero p{font-size:clamp(17px,1.3vw,20px);max-width:100%;color:#eef5ff;margin-bottom:1.5em;color:#fff;border-left:3px solid var(--marigold);padding-left:16px;text-shadow:0 1px 10px rgba(5,40,110,.45)}
.hero .btn-row{justify-content:flex-start;margin-top:0}
.hero .btn{border-radius:999px;padding:14px 28px;font-size:17px}
.hero .btn.outline{border-color:#fff;color:#fff;background:rgba(7,36,90,.35)}
.hero-points{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hero-points li{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:14.5px;color:#fff;
  background:rgba(7,36,90,.62);border:1px solid rgba(255,255,255,.18);text-shadow:none}
.hero-points i{color:var(--marigold)}

/* Van sits bottom right, under the content, clear of the temple */
.hero-van{position:absolute;right:clamp(10px,3vw,56px);bottom:clamp(14px,2vw,30px);width:clamp(260px,27vw,480px);height:auto;z-index:1;
  filter:drop-shadow(0 14px 12px rgba(0,0,0,.35));animation:van-in 1s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes van-in{from{opacity:0;transform:translateX(90px)}}
@media(prefers-reduced-motion:reduce){.hero-van,.hero-copy>*{animation:none}}

@media(max-width:1400px) and (min-width:1021px){
  .hero-copy{width:min(560px,43vw) !important}
  .hero h1{font-size:clamp(34px,3.6vw,52px)}
  .hero p{font-size:clamp(16px,1.25vw,19px)}
}

/* MOBILE / TABLET: image on top, content fully below */
@media(max-width:1020px){
  .hero{display:flex;flex-direction:column;min-height:0;max-height:none;aspect-ratio:auto;border-bottom-width:4px;
    background:linear-gradient(180deg,#0a6fd0 0%,#0f74da 55%,#1b7ee8 100%)}

  /* 1) IMAGE - on top; fades into the blue at the bottom */
  .hero-bg{order:1;position:relative;width:100%;height:clamp(320px,92vw,560px);aspect-ratio:auto;object-fit:cover;object-position:20% 100%;
    margin-top:0;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%)}

  /* 2) VAN - between image and content, slightly overlapping the image */
  .hero-van{order:2;position:relative;right:auto;bottom:auto;width:min(70%,420px);margin:-60px auto 0}

  /* 3) CONTENT - fully below */
  .hero-inner{order:3;position:relative;z-index:2;min-height:0;justify-content:flex-start;padding:0 20px !important;margin:0 !important}
  .hero-copy{padding:24px 0 0 !important;width:100% !important;margin:0 !important}

  .hero h1{text-shadow:0 2px 12px rgba(5,40,110,.5)}
  .hero-points{margin-bottom:22px !important}
}

@media(max-width:520px){
  .hero-bg{height:clamp(320px,92vw,400px)}
  .hero-van{margin-top:-24px}
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .hero h1 em{font-size:clamp(23px,6.9vw,31px);-webkit-text-stroke-width:1px}
  .hero p{font-size:16.5px;line-height:1.55;margin-bottom:1.2em}
  .hero .btn{padding:13px 22px;font-size:16.5px}
  .hero-points{margin-top:20px;gap:8px}
  .hero-points li{padding:7px 13px;font-size:13.5px}
}