[data-sig="webb-hero"]{min-height:calc(100dvh - 88px);position:relative;overflow:clip;background:var(--felt)}[data-sig="webb-hero"] .hero-layout{display:grid;grid-template-columns:1.1fr 1fr;min-height:730px;align-items:center;gap:16px}[data-sig="webb-hero"] .hero-copy{position:relative;z-index:2;padding:64px 0 88px}[data-sig="webb-hero"] .location{font-size:13px;color:var(--muted);margin-bottom:30px;display:flex;align-items:center;gap:12px}[data-sig="webb-hero"] .location::before{content:'';height:6px;width:6px;background:var(--accent);border-radius:50%}[data-sig="webb-hero"] h1{max-width:700px}[data-sig="webb-hero"] .intro{font-size:18px;margin:26px 0 32px;max-width:380px}[data-sig="webb-hero"] .hero-actions{display:flex;align-items:center;gap:28px}[data-sig="webb-hero"] .hero-stage{position:relative;perspective:1000px;align-self:stretch;display:grid;place-items:center;min-width:0}[data-sig="webb-hero"] .slab{position:relative;width:100%;max-width:500px;transform:rotateY(-18deg) rotateX(8deg) rotateZ(8deg);transform-origin:center;isolation:isolate}[data-sig="webb-hero"] .slab img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px}[data-sig="webb-hero"] .foil-mask{position:absolute;left:26%;right:26%;top:32%;bottom:20%;overflow:hidden;mix-blend-mode:screen;opacity:.34;pointer-events:none}[data-sig="webb-hero"] .foil{position:absolute;inset:-80%;background:linear-gradient(110deg,transparent 38%,rgba(213,235,255,.5) 48%,rgba(255,211,247,.6) 52%,transparent 62%);transform:translateX(-24%)}[data-sig="webb-hero"] .spec-label{position:absolute;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;font-size:14px}[data-sig="webb-hero"] .spec-label strong{color:var(--paper);font-size:18px}[data-sig="webb-hero"] .grade-stamp{position:absolute;right:-6px;top:20%;height:78px;width:78px;border:1px solid var(--accent);background:var(--felt);display:flex;flex-direction:column;align-items:center;justify-content:center}[data-sig="webb-hero"] .grade-stamp b{font-size:34px;line-height:1}[data-sig="webb-hero"] .grade-stamp span{font-size:10px;color:var(--accent-light)}
@supports(animation-timeline:view()){[data-sig="webb-hero"]{view-timeline-name:--slab;view-timeline-axis:block}[data-sig="webb-hero"] .slab{animation:slab-turn linear both;animation-timeline:--slab;animation-range:exit 0% exit 85%}[data-sig="webb-hero"] .foil{animation:foil-pass linear both;animation-timeline:--slab;animation-range:exit 0% exit 85%}}
@keyframes slab-turn{from{transform:rotateY(-18deg) rotateX(8deg) rotateZ(8deg)}to{transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg)}}@keyframes foil-pass{from{transform:translateX(-24%)}to{transform:translateX(30%)}}
@media(min-width:1600px){[data-sig="webb-hero"] .hero-layout{min-height:850px}}
@media(max-width:700px){[data-sig="webb-hero"] .hero-layout{grid-template-columns:1fr;min-height:0;gap:0}[data-sig="webb-hero"] .hero-copy{padding:36px 0 10px}[data-sig="webb-hero"] .location{margin-bottom:18px;font-size:12px}[data-sig="webb-hero"] h1{font-size:49px;max-width:350px}[data-sig="webb-hero"] .intro{font-size:15px;margin:18px 0 20px;max-width:325px}[data-sig="webb-hero"] .hero-actions{gap:20px;font-size:14px}[data-sig="webb-hero"] .hero-stage{min-height:420px}[data-sig="webb-hero"] .slab{max-width:310px;margin-top:-8px}[data-sig="webb-hero"] .spec-label{font-size:11px;bottom:8px;left:0;right:0;background:var(--felt)}[data-sig="webb-hero"] .spec-label strong{font-size:14px}[data-sig="webb-hero"] .grade-stamp{height:60px;width:60px;right:0;top:18%}[data-sig="webb-hero"] .grade-stamp b{font-size:28px}}
@media(prefers-reduced-motion:reduce){[data-sig="webb-hero"] .slab{transform:none}[data-sig="webb-hero"] .foil{opacity:0}}
/* The slab settles while its headline stays in view. */
@media(min-width:701px){[data-sig="webb-hero"]{min-height:calc(145dvh - 88px)}[data-sig="webb-hero"] .hero-layout{position:sticky;top:88px;height:calc(100dvh - 88px);min-height:640px}[data-sig="webb-hero"] .slab{max-width:min(500px,55dvh)}}
@supports(animation-timeline:view()){[data-sig="webb-hero"] .slab,[data-sig="webb-hero"] .foil{animation-range:contain 0% contain 100%}}
@media(max-width:700px){[data-sig="webb-hero"] .slab,[data-sig="webb-hero"] .foil{animation-range:exit 0% exit 42%}}
[data-sig="webb-hero"] .foil-mask{left:24.44%;right:24.44%;top:29.75%;bottom:17.75%;mask-image:url('../../img/foil-mask.svg');mask-size:100% 100%;mask-repeat:no-repeat}