/* Hero-only: reference canvas 1848 × 777 (excluding its header).
   The capped canvas scales photography and HTML together; only the outer background grows. */
.hero-ad { --hero-unit: min(1vw, 18.48px); position: relative; width: 100%; max-width: none; margin-inline: 0; overflow: hidden; isolation: isolate; background: #e6f4fd; }
.hero-ad::before {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  /* Accents belong to the full-width section, never the capped content box.
     Thin white cores and low-opacity halos remain behind the photograph. */
  background:
    radial-gradient(ellipse 980px 780px at 660px -95px, transparent 99.2%, #c9e9fa4d 99.6%, #ffffffed 99.91% 100.09%, #ffffff55 100.35%, transparent 100.8%),
    radial-gradient(ellipse 1040px 860px at 730px -115px, transparent 99.2%, #d8f0ff55 99.6%, #ffffffd9 99.92% 100.08%, #ffffff44 100.4%, transparent 100.9%),
    radial-gradient(ellipse 1120px 980px at 750px -155px, transparent 99.3%, #d4edfa40 99.7%, #ffffffb3 99.93% 100.07%, #ffffff33 100.4%, transparent 100.9%),
    radial-gradient(ellipse 980px 780px at calc(100% - 660px) -95px, transparent 99.2%, #c9e9fa4d 99.6%, #ffffffed 99.91% 100.09%, #ffffff55 100.35%, transparent 100.8%),
    radial-gradient(ellipse 1040px 860px at calc(100% - 730px) -115px, transparent 99.2%, #d8f0ff55 99.6%, #ffffffd9 99.92% 100.08%, #ffffff44 100.4%, transparent 100.9%);
}
.hero-ad::after {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 150px 610px, #fff 0 2.8px, #ffffffed 3.8px, #e9f8ffb3 8px, #e9f8ff33 13px, transparent 19px),
    radial-gradient(circle at 355px 690px, #fff 0 2.3px, #ffffffd9 3.3px, #e9f8ff99 7px, #e9f8ff2b 12px, transparent 18px),
    radial-gradient(circle at calc(100% - 150px) 610px, #fff 0 2.8px, #ffffffed 3.8px, #e9f8ffb3 8px, #e9f8ff33 13px, transparent 19px),
    radial-gradient(circle at calc(100% - 330px) 690px, #fff 0 2.3px, #ffffffd9 3.3px, #e9f8ff99 7px, #e9f8ff2b 12px, transparent 18px);
}
.hero-ad .ad-stage { box-sizing: border-box; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0; width: min(100%, 1848px); max-width: 1848px; min-height: calc(var(--hero-unit) * 42.0455); margin: 0 auto; padding: calc(var(--hero-unit) * 4.22) 0 calc(var(--hero-unit) * 1.05); }
.hero-ad .ad-stage { z-index: 2; }
.hero-ad .ad-stage::before { content: none; }
.hero-ad .ad-stage::after { content: none; }
.hero-ad .ad-heading, .hero-ad .ad-numbers, .hero-ad .ad-action { position: relative; z-index: 2; box-sizing: border-box; width: 31.6%; max-width: none; margin-left: 11.85%; }
.hero-ad .ad-heading .eyebrow { margin: 0 0 calc(var(--hero-unit) * 1.65); font-size: clamp(12px, calc(var(--hero-unit) * .9), 17px); line-height: 1.5; letter-spacing: .04em; }
.hero-ad .ad-heading h1 { margin: 0; font-size: calc(var(--hero-unit) * 3.46); font-weight: 900; line-height: 1.32; letter-spacing: -.035em; }
.hero-ad .ad-heading h1 > span { display: block; width: auto; padding: 0; background: none; white-space: nowrap; }
.hero-ad .ad-heading h1 > small { display: block; width: auto; max-width: none; padding: 0; margin-top: calc(var(--hero-unit) * .7); background: none; font-size: calc(var(--hero-unit) * 1.52); line-height: 1.6; letter-spacing: -.035em; white-space: nowrap; }
.hero-ad .ad-heading h1 em { color: #ff7900; border-bottom: 2px solid #ff7900; padding-bottom: 4px; }
.hero-ad .ad-description { width: 110%; margin-top: calc(var(--hero-unit) * 1.05); font-size: clamp(14px, calc(var(--hero-unit) * .97), 18px); line-height: 1.55; color: #607787; letter-spacing: 0; }
.hero-ad .ad-numbers { display: grid; grid-template-columns: 1fr 1fr 1.12fr; margin-top: calc(var(--hero-unit) * 1.25); padding: calc(var(--hero-unit) * 1) calc(var(--hero-unit) * .3); background: #ffffffed; border: 0; border-radius: 5px; box-shadow: 0 10px 28px #183f5910; }
.hero-ad .ad-numbers > div { min-width: 0; padding: 0 calc(var(--hero-unit) * 1.05); border-right: 1px solid #d2e2ef; }
.hero-ad .ad-numbers > div:last-child { border: 0; }
.hero-ad .ad-numbers strong { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px; white-space: nowrap; line-height: 1.05; }
.hero-ad .ad-numbers strong b, .hero-ad .ad-numbers > div:last-child strong b { font-size: calc(var(--hero-unit) * 3.25); font-weight: 800; letter-spacing: -.06em; line-height: 1.1; }
.hero-ad .ad-numbers strong > span { font-size: calc(var(--hero-unit) * 1.05); }
.hero-ad .ad-numbers strong > small { width: auto; font-size: clamp(10px, calc(var(--hero-unit) * .7), 13px); }
.hero-ad .ad-numbers p { margin-top: 7px; font-size: clamp(11px, calc(var(--hero-unit) * .74), 14px); font-weight: 600; line-height: 1.6; }
.hero-ad .ad-numbers p > span { display: block; margin-top: 2px; font-size: clamp(10px, calc(var(--hero-unit) * .62), 12px); font-weight: 400; color: #738694; }
.hero-ad .ad-action { margin-top: calc(var(--hero-unit) * 1.3); }
.hero-ad .ad-action .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: calc(var(--hero-unit) * 3.35); padding: 14px 16px; gap: 22px; border-radius: 5px; font-size: clamp(15px, calc(var(--hero-unit) * 1), 19px); background: linear-gradient(110deg, #ff8000, #ff7100); }
.hero-ad .ad-action .button > span { margin-left: 0; }
.hero-ad .ad-action > p { margin-top: 11px; font-size: clamp(12px, calc(var(--hero-unit) * .81), 15px); color: #718592; line-height: 1.65; text-align: left; }
/* Only the photo of the supplied reference is displayed: x=810..1848, y=74..851.
   Its header and copy are clipped out. Page copy/CTA remain live HTML.
   Percentage geometry retains the source aspect ratio without distortion. */
.hero-ad .ad-scene { position: absolute; z-index: 0; inset: auto auto 0 43.8312%; width: min(56.1688%, 898.7px); height: auto; aspect-ratio: 1038 / 777; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; transform: none; opacity: 1; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 8% 100%); }
.hero-ad .ad-scene::before { content: none; }
.hero-ad .ad-scene .owner-photo { position: absolute; display: block; width: 178.0347%; max-width: none; height: auto; left: -78.0347%; top: -9.5238%; object-fit: contain; object-position: center; mask-image: none; }
.hero-ad .ad-screen, .hero-ad .scene-caption { display: none; }
@media (min-width: 901px) and (max-width: 1300px) {
  .hero-ad .ad-stage { padding-top: 46px; padding-bottom: 25px; }
  .hero-ad .ad-heading, .hero-ad .ad-numbers, .hero-ad .ad-action { width: 36%; margin-left: 7.5%; }
  .hero-ad .ad-heading h1 { font-size: clamp(34px, 3.46vw, 45px); }
  .hero-ad .ad-heading h1 > small { font-size: clamp(16px, 1.52vw, 20px); }
  .hero-ad .ad-description { width: 112%; }
  .hero-ad .ad-action .button { min-height: 52px; }
}
@media (max-width: 900px) {
  .hero-ad .ad-stage { width: min(100% - 40px, 580px); min-height: 0; padding: 32px 0 0; }
  .hero-ad .ad-heading, .hero-ad .ad-numbers, .hero-ad .ad-action { width: 100%; margin-left: 0; }
  .hero-ad .ad-heading { order: 1; }
  .hero-ad .ad-heading .eyebrow { margin-bottom: 18px; font-size: 12px; }
  .hero-ad .ad-heading h1 { font-size: clamp(30px, 8vw, 48px); line-height: 1.35; }
  .hero-ad .ad-heading h1 > small { margin-top: 14px; font-size: clamp(18px, 3.6vw, 23px); line-height: 1.6; white-space: normal; }
  .hero-ad .ad-description { width: 100%; margin-top: 18px; font-size: 14px; line-height: 1.75; }
  .hero-ad .ad-numbers { order: 2; margin-top: 22px; padding: 17px 3px; grid-template-columns: 1fr 1fr 1.2fr; }
  .hero-ad .ad-numbers > div { padding: 0 8px; }
  .hero-ad .ad-numbers strong { gap: 1px; }
  .hero-ad .ad-numbers strong b, .hero-ad .ad-numbers > div:last-child strong b { font-size: clamp(30px, 8vw, 43px); }
  .hero-ad .ad-numbers strong > span { font-size: 13px; }
  .hero-ad .ad-numbers strong > small { font-size: 10px; }
  .hero-ad .ad-numbers p { font-size: 11px; }
  .hero-ad .ad-numbers p > span { font-size: 10px; }
  .hero-ad .ad-action { order: 3; margin-top: 20px; }
  .hero-ad .ad-action .button { min-height: 56px; font-size: 16px; padding: 14px 12px; gap: 12px; }
  .hero-ad .ad-action > p { font-size: 12px; text-align: center; }
  .hero-ad .ad-scene { position: relative; order: 4; inset: auto; width: calc(100% + 40px); height: auto; margin: 22px -20px 0; aspect-ratio: 1038 / 777; mask-image: linear-gradient(180deg, transparent, #000 6% 96%, transparent); }
  .hero-ad::before { opacity: .28; background: radial-gradient(ellipse 520px 540px at 360px -80px, transparent 99.3%, #fff 99.9% 100.1%, transparent 100.8%), radial-gradient(ellipse 600px 620px at 380px -110px, transparent 99.3%, #ffffffb3 99.9% 100.1%, transparent 100.8%); }
  .hero-ad::after { content: none; }
}
/* Keep the existing brand width and align the tagline to the same center. */
.header .logo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 5px; }
.header .logo-tagline { display: block; width: 100%; max-width: 100%; margin-top: -10px; padding-left: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; color: #526a79; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .header .logo { padding-block: 3px; } .header .logo-tagline { margin-top: -6px; font-size: 9px; letter-spacing: .04em; } }
@media (max-width: 370px) { .header .logo-tagline { font-size: 7.5px; letter-spacing: 0; } }

/* Hero copy update: retain the existing three-panel layout without number styling. */
.hero-ad .ad-description-follow { margin-top: 5px; }
.hero-ad .ad-numbers .ad-number-message { display: block; color: #143d69; font-size: clamp(17px, calc(var(--hero-unit) * 1.35), 25px); font-weight: 800; letter-spacing: -.025em; line-height: 1.35; white-space: nowrap; }
@media (max-width: 900px) { .hero-ad .ad-numbers .ad-number-message { font-size: clamp(13px, 3.6vw, 20px); } }

/* Mobile only: release the desktop no-wrap title constraint before it clips. */
@media (max-width: 640px) {
  .hero-ad .ad-heading h1 { max-width: 100%; font-size: clamp(27px, 7.5vw, 31px); overflow: visible; }
  .hero-ad .ad-heading h1 > span { min-width: 0; max-width: 100%; white-space: normal; }
  .hero-ad .ad-heading h1 > span:nth-of-type(2) { letter-spacing: -.06em; }
}