/* Homepage hero refinement (Kelly's brief, 2026-10-24): two clear columns on laptops and desktops, a crisp framed photo (no fade),
   a hero that fits the first screen, per-photo focal points, calmer type weights. Phones and tablets keep the compact stacked hero. */
.hero .eyebrow{font-weight:500}
.hero .price{font-weight:600}
.hero .hero-links a{font-family:var(--ui,Inter,system-ui,sans-serif);font-size:15px;font-weight:500}
.hero .hero-bg img:nth-child(1){object-position:66% 38%}
.hero .hero-bg img:nth-child(2){object-position:96% 40%}
.hero .hero-bg img:nth-child(3){object-position:52% 36%}
@media (min-width:1024px){
  .hero{display:grid !important;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;column-gap:clamp(28px,4vw,56px);
    height:auto;min-height:clamp(430px,calc(100svh - 72px),620px) !important;
    padding:clamp(18px,3svh,32px) max(32px,calc((100vw - 1240px) / 2)) !important;box-sizing:border-box}
  .hero .hero-bg{grid-column:2;grid-row:1;position:relative !important;inset:auto !important;height:auto !important;align-self:stretch;min-height:360px;border-radius:22px;overflow:hidden;
    box-shadow:0 14px 40px rgba(11,31,75,.16)}
  .hero .hero-bg img{left:0 !important;width:100% !important;height:100% !important;-webkit-mask-image:none !important;mask-image:none !important}
  .hero .scrim{display:none !important}
  .hero .hero-in{grid-column:1;grid-row:1;padding:0 !important;margin:0 !important;width:100%}
  .hero .hero-in.wrap{max-width:none}
  .hero .hero-text{max-width:none !important}
  .hero h1,.hero .hs-h{font-size:clamp(34px,3.4vw,46px);line-height:1.1}
  .hero .hslides{align-items:end !important}
  .hero .fade-ctl{top:calc(clamp(18px,3svh,32px) + 12px);right:calc(max(32px,(100vw - 1240px) / 2) + 12px)}
}
/* short laptop screens (about 550-760px of usable height): keep the whole hero, boxes included, above the fold */
@media (min-width:1024px) and (max-height:760px){
  .hero .kb .kb-s{display:none !important}
  .hero .kb li{padding:10px 14px !important}
  .hero .hero-links{margin-top:6px !important}
  .hero h1,.hero .hs-h{font-size:clamp(30px,3vw,40px)}
  .hero .eyebrow{margin-bottom:4px}
}
/* the price reads as a quiet line under the headline, on one row */
@media (min-width:1024px){.hero .price{font-size:clamp(16px,1.45vw,18px);margin-top:22px;color:#2B3A5C}}
/* Phones and tablets (Kelly 2026-10-24): message first, then price card, one button, quiet links, then the photo in its own framed card.
   No fade, no blend. The slide controls sit on the bottom of the photo card. */
@media (max-width:1023px){
  .hero:not(.eqh){display:flex !important;flex-direction:column;padding:14px 16px 10px !important;min-height:0 !important;align-items:stretch !important}
  .hero:not(.eqh) .hero-in,.hero:not(.eqh) .hero-text{display:contents !important}
  .hero:not(.eqh) .hslides{order:1}
  .hero:not(.eqh) .price{order:2;display:block;margin:14px 0 0;padding:12px 16px;background:#FFF3D6;border:1px solid #EBD9A8;border-left:6px solid #E8A020;border-radius:14px;color:#0B1F4B;font-size:16px;line-height:1.4;font-weight:600}
  .hero:not(.eqh) .cta-row{order:3;margin-top:14px}
  .hero:not(.eqh) .hero-links{order:4;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:0 18px}
  .hero:not(.eqh) .hero-links a{font-size:15px;min-height:36px;display:inline-flex;align-items:center}
  .hero:not(.eqh) .hero-bg{order:5;position:relative !important;inset:auto !important;height:clamp(200px,56vw,320px) !important;margin:8px 0 0;border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(11,31,75,.14)}
  .hero:not(.eqh) .hero-bg img{-webkit-mask-image:none !important;mask-image:none !important}
  .hero:not(.eqh) .scrim{display:none !important}
  .hero:not(.eqh) .fade-ctl{order:6;position:static !important;align-self:flex-end;margin:-54px 10px 12px 0}
  .hero:not(.eqh) .kb{order:7;margin-top:14px}
  .hero:not(.eqh) h1,.hero:not(.eqh) .hs-h{font-size:clamp(24px,6.6vw,34px);line-height:1.12}
}