.hero-banner{position:relative;margin-top:32px;margin-bottom:40px;border:1px solid #d8cfc012;border-radius:28px;overflow:hidden;isolation:isolate;background:#f2ede3}
.hero-banner>.sr-only,.hero-banner>[data-banner-status]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-banner-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.hero-banner-track::-webkit-scrollbar{display:none}
.hero-banner-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);aspect-ratio:2/1;min-height:500px;scroll-snap-align:start;scroll-snap-stop:always;background:radial-gradient(ellipse at 85% 45%,var(--banner-glow),transparent 75%),#faf7f1}
.hero-banner-copy{align-self:center;min-width:0;padding:48px 28px 88px 64px}
.hero-banner-copy .eyebrow{display:block;margin-bottom:24px;font-size:13px;letter-spacing:.14em}
.hero-banner-copy h2{font-size:clamp(40px,4.5vw,68px);font-weight:650;line-height:1.03;letter-spacing:-.045em}
.hero-banner-copy h2 span{display:block;color:#86602e;margin-top:8px}
.hero-banner-copy>p{max-width:390px;margin-top:26px;font-size:17px;line-height:1.7;color:#28241e}
.hero-banner-copy .button-row{margin-top:28px;gap:12px}
.hero-banner-media{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:32px 48px 76px 12px}
.hero-banner-media img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:1;object-fit:contain;background:#ffffff;border-radius:20px;user-select:none}
.hero-banner-controls[hidden]{display:none}
.hero-banner-controls{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-banner-toolbar{position:absolute;left:64px;right:48px;bottom:19px;display:flex;justify-content:center;align-items:center;height:44px}
.hero-banner-dots{display:flex;align-items:center;justify-content:center;gap:0;max-width:100%;pointer-events:auto}
.hero-banner-dots button{width:30px;min-width:20px;flex:0 1 30px;height:40px;display:grid;place-items:center;border:0;padding:0;background:transparent;border-radius:8px}
.hero-banner-dots button span{width:6px;height:6px;border-radius:10px;background:#e0c9a4;transition:width .2s,background .2s}
.hero-banner-dots button[aria-pressed=true] span{width:22px;background:#d6ba88}
.hero-banner-arrow{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #d8cfc040;border-radius:50%;background:#faf7f1cf;color:#28241e;backdrop-filter:blur(10px)}
.hero-banner-arrow{position:absolute;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .2s,background .2s}
.hero-banner-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.banner-prev{left:12px}.banner-next{right:12px}
.hero-banner:hover .hero-banner-arrow,.hero-banner:focus-within .hero-banner-arrow{opacity:1}
.hero-banner-arrow:hover{background:#e9dfcee8}
@media(min-width:701px) and (max-width:1023px){.hero-banner-copy{padding:36px 20px 84px 44px}.hero-banner-copy h2{font-size:44px}.hero-banner-copy>p{font-size:16px}.hero-banner-media{padding:30px 32px 76px 0}.hero-banner-toolbar{left:44px;right:32px}}
@media(max-width:700px){.hero-banner{margin-top:20px;margin-bottom:28px;border-radius:22px}.hero-banner-slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;aspect-ratio:auto;min-height:0}.hero-banner-copy{padding:30px 26px 24px;align-self:start}.hero-banner-copy .eyebrow{font-size:12px;margin-bottom:16px}.hero-banner-copy h2{display:flex;flex-wrap:wrap;column-gap:9px;row-gap:6px;font-size:38px}.hero-banner-copy h2 span{display:block;margin:0}.hero-banner-copy>p{font-size:16px;line-height:1.6;margin-top:18px}.hero-banner-copy .button-row{margin-top:20px;gap:10px}.hero-banner-media{align-self:end;padding:0 26px 72px}.hero-banner-media img{border-radius:16px}.hero-banner-toolbar{left:26px;right:26px;bottom:15px}.hero-banner-arrow{display:none}}
@media(max-width:360px){.hero-banner-copy{padding-inline:20px}.hero-banner-copy h2{font-size:34px}.hero-banner-media{padding-inline:20px}.hero-banner-toolbar{left:20px;right:20px}}
@media(prefers-reduced-motion:reduce){.hero-banner *{animation:none;transition:none;scroll-behavior:auto}}
