/* Offers under the hero: two studio photo cards and the quick-link pills. Rises in once on view. */
.hxo{position:relative;background:#FBFDFC;padding:0 0 64px}

/* heading over the cards: coverage line left, the 10 / 22 split right */
.hxo-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin:0 0 22px}
.hxo-h{max-width:24ch;font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.hxo-note{margin:0;font-size:15px;font-weight:600;color:var(--teal);white-space:nowrap}

/* offer cards: studio photo, two-tone headline top-left, badge top-right, button bottom-left */
.hx-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hx-card{position:relative;display:block;aspect-ratio:16/11;border-radius:26px;overflow:hidden;background:var(--stone-2);text-decoration:none;
  box-shadow:0 30px 60px -38px rgba(17,21,28,.5);isolation:isolate;-webkit-tap-highlight-color:transparent}
.hx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--out-expo)}
.hx-card:hover img{transform:scale(1.04)}
.hx-card-home{background:#16362C;color:#fff}
.hx-card-home img{object-position:62% 40%}
.hx-card-mobile{background:#8DBAD6;color:var(--ink)}
.hx-card-mobile img{object-position:62% 55%}
.hx-card-head{position:absolute;left:26px;top:24px;z-index:2;max-width:52%;font-family:var(--font-display);font-weight:500;font-size:clamp(25px,2.5vw,38px);line-height:1.04;letter-spacing:-.02em}
.hx-card-head b{display:block;font-weight:500}
.hx-card-head span{display:block}
.hx-card-home .hx-card-head span{color:var(--powder)}
.hx-card-mobile .hx-card-head span{color:var(--deep)}
.hx-badge-rx{position:absolute;right:20px;top:22px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:7px 12px}
.hx-card-home .hx-badge-rx{color:#fff;border:1px solid rgba(255,255,255,.42);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-card-mobile .hx-badge-rx{color:var(--ink);border:1px solid rgba(17,21,28,.28);background:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-go-btn{position:absolute;left:26px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-style:normal;font-weight:600;font-size:14.5px;border-radius:999px;padding:11px 16px;transition:background .25s,color .25s,transform .3s var(--out-cubic)}
.hx-go-btn svg{width:16px;height:16px;transition:transform .3s var(--out-cubic)}
.hx-card-home .hx-go-btn{background:#fff;color:var(--ink)}
.hx-card-mobile .hx-go-btn{background:var(--ink);color:#fff}
.hx-card:hover .hx-go-btn svg{transform:translateX(3px)}
.hx-card-home:hover .hx-go-btn{background:var(--powder)}
.hx-card-mobile:hover .hx-go-btn{background:#000}
.hx-card:focus-visible{outline:3px solid var(--powder);outline-offset:3px}

/* quick links */
.hx-links{margin:14px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hx-links a{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 14px 12px 16px;border-radius:16px;background:var(--white);border:1px solid var(--stone);color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;line-height:1.2;
  transition:border-color .25s,transform .3s var(--out-cubic),box-shadow .3s}
.hx-links a:hover{border-color:var(--deep);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.hx-links a > svg{width:22px;height:22px;flex:none;stroke:var(--deep)}
.hx-links a > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.hx-links small{font-weight:500;font-size:12.5px;color:var(--teal)}
.hx-links .go{margin-left:auto;width:18px;height:18px;flex:none;stroke:var(--sage);transition:transform .3s var(--out-cubic)}
.hx-links a:hover .go{transform:translateX(3px);stroke:var(--deep)}

/* rise in once on view (motion.js adds .go) */
.js-motion .hxo:not(.go) :is(.hxo-head,.hx-card,.hx-links li){opacity:0}
.hxo.go .hxo-head{animation:hxoUp .8s var(--out-cubic) both}
.hxo.go .hx-card{animation:hxoRise 1.1s var(--out-expo) both;animation-delay:calc(var(--i) * 130ms)}
.hxo.go .hx-links li{animation:hxoUp .7s var(--out-cubic) both;animation-delay:calc(.3s + var(--i) * 70ms)}
@keyframes hxoRise{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hxoUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* responsive */
@media (max-width:1100px){
  .hx-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .hxo-head{margin-bottom:16px}
  .hxo-h{font-size:clamp(24px,6.6vw,30px)}
  .hx-cards{grid-template-columns:1fr;gap:12px}
  .hx-card{aspect-ratio:4/3.3}
  .hx-card-head{left:20px;top:20px;max-width:60%;font-size:clamp(21px,6.2vw,25px)}
  .hx-badge-rx{display:none}
  .hx-go-btn{left:20px;bottom:20px}
}
@media (max-width:520px){
  .hxo{padding-bottom:48px}
  .hx-links{grid-template-columns:1fr;gap:8px}
  .hx-links a{min-height:58px}
}
@media (prefers-reduced-motion:reduce){
  .hxo *{animation:none!important;transition:none!important}
  .js-motion .hxo :is(.hxo-head,.hx-card,.hx-links li){opacity:1!important;transform:none!important}
}