.hero-banner{width:100%;background:var(--color-background)}.hero-banner--margin-bottom{margin-bottom:var(--space-xl)}.hero-banner__inner{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(400px,.82fr);width:calc(100% - (var(--site-padding) * 2));max-width:var(--page-width);margin-inline:auto;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white)}.hero-banner--full-width .hero-banner__inner{width:100%;max-width:none;border-right:0;border-left:0;border-radius:0}.hero-banner--height-compact .hero-banner__inner{min-height:520px}.hero-banner--height-medium .hero-banner__inner{min-height:640px}.hero-banner--height-large .hero-banner__inner{min-height:min(760px,calc(100vh - 120px))}.hero-banner--image-left .hero-banner__media{grid-column:1}.hero-banner--image-left .hero-banner__content-panel{grid-column:2}.hero-banner--image-right .hero-banner__media{grid-column:2;grid-row:1}.hero-banner--image-right .hero-banner__content-panel{grid-column:1;grid-row:1}.hero-banner__media{position:relative;min-width:0;min-height:100%;overflow:hidden;background:var(--color-surface-soft)}.hero-banner__media picture{display:block;width:100%;height:100%}.hero-banner__image,.hero-banner__placeholder,.hero-banner__placeholder-svg{display:block;width:100%;height:100%;min-height:inherit}.hero-banner__image{object-fit:cover;object-position:var(--hero-desktop-position-x) var(--hero-desktop-position-y)}.hero-banner__placeholder-svg{background:var(--color-surface-soft);color:var(--color-muted)}.hero-banner__caption{position:absolute;right:var(--space-sm);bottom:var(--space-sm);max-width:calc(100% - (var(--space-md) * 2));margin:0;padding:7px 10px;border-radius:var(--radius-xs);background:#ffffffeb;color:var(--color-muted);font-size:13px;line-height:1.35}.hero-banner__content-panel{display:flex;min-width:0;padding:clamp(42px,6vw,92px) clamp(34px,5vw,76px);background:var(--color-white)}.hero-banner--content-top .hero-banner__content-panel{align-items:flex-start}.hero-banner--content-centre .hero-banner__content-panel{align-items:center}.hero-banner--content-bottom .hero-banner__content-panel{align-items:flex-end}.hero-banner__content{width:100%;max-width:590px}.hero-banner__eyebrow{margin:0 0 var(--space-md);color:var(--color-muted);font-size:14px;line-height:1.3;font-weight:650;letter-spacing:.045em;text-transform:uppercase}.hero-banner__heading{max-width:13ch;margin:0;color:var(--color-black);font-size:clamp(40px,4.7vw,68px);line-height:1.02;font-weight:600;letter-spacing:-.025em;text-wrap:balance}.hero-banner__text{max-width:42ch;margin-top:var(--space-lg);color:var(--color-muted);font-size:18px;line-height:1.65}.hero-banner__text>*{margin-block:0}.hero-banner__text>*+*{margin-top:var(--space-sm)}.hero-banner__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);margin-top:var(--space-lg)}.hero-banner__primary-button{min-height:52px;padding-inline:28px;border-color:var(--color-main-green);background:var(--color-main-green);color:var(--color-black)}.hero-banner__primary-button:hover{border-color:var(--color-black);background:var(--color-black);color:var(--color-white)}.hero-banner__secondary-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-bottom:3px;border-bottom:2px solid var(--color-main-green);color:var(--color-black);font-size:15px;line-height:1.3;font-weight:650;transition:color var(--transition-fast),border-color var(--transition-fast)}.hero-banner__secondary-link svg{width:18px;height:18px;fill:none;stroke:var(--color-main-green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--transition-fast),transform var(--transition-fast)}.hero-banner__secondary-link:hover{color:var(--color-dark-green);border-color:currentColor}.hero-banner__secondary-link:hover svg{stroke:currentColor;transform:translate(3px)}.hero-banner__supporting-text{max-width:52ch;margin:var(--space-lg) 0 0;padding-top:var(--space-md);border-top:1px solid var(--color-border);color:var(--color-muted);font-size:14px;line-height:1.55;font-weight:550}@media screen and (max-width:1199px){.hero-banner__inner{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}.hero-banner--height-compact .hero-banner__inner{min-height:500px}.hero-banner--height-medium .hero-banner__inner{min-height:580px}.hero-banner--height-large .hero-banner__inner{min-height:660px}.hero-banner__content-panel{padding:clamp(38px,5vw,64px) clamp(30px,4vw,54px)}.hero-banner__heading{font-size:clamp(38px,4.5vw,58px)}}@media screen and (max-width:899px){.hero-banner__inner{grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}.hero-banner--height-compact .hero-banner__inner,.hero-banner--height-medium .hero-banner__inner,.hero-banner--height-large .hero-banner__inner{min-height:540px}.hero-banner__content-panel{padding:36px 30px}.hero-banner__heading{font-size:clamp(34px,5vw,48px)}.hero-banner__text{margin-top:var(--space-md);font-size:17px}.hero-banner__actions{align-items:flex-start;flex-direction:column}}@media screen and (max-width:749px){.hero-banner--margin-bottom{margin-bottom:var(--space-xl)}.hero-banner__inner,.hero-banner--image-left .hero-banner__inner,.hero-banner--image-right .hero-banner__inner{display:flex;flex-direction:column;width:100%;min-height:0;border-right:0;border-left:0;border-radius:0}.hero-banner__media{width:100%;min-height:0;aspect-ratio:4 / 3}.hero-banner__image{object-position:var(--hero-mobile-position-x) var(--hero-mobile-position-y)}.hero-banner__content-panel{width:100%;padding:34px var(--site-padding) 38px;border-top:1px solid var(--color-border)}.hero-banner__content{max-width:none}.hero-banner__eyebrow{margin-bottom:var(--space-sm);font-size:13px}.hero-banner__heading{max-width:16ch;font-size:clamp(34px,10vw,46px);line-height:1.06}.hero-banner__text{max-width:38ch;margin-top:var(--space-md);font-size:17px;line-height:1.6}.hero-banner__actions{align-items:stretch;width:100%;margin-top:var(--space-lg)}.hero-banner__primary-button{width:100%}.hero-banner__secondary-link{align-self:flex-start}.hero-banner__supporting-text{margin-top:var(--space-lg)}.hero-banner__caption{right:10px;bottom:10px;font-size:12px}}@media screen and (max-width:420px){.hero-banner__media{aspect-ratio:5 / 4}.hero-banner__heading{font-size:clamp(32px,10vw,40px)}.hero-banner__text{font-size:16px}}@media(prefers-reduced-motion:reduce){.hero-banner__primary-button,.hero-banner__secondary-link,.hero-banner__secondary-link svg{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/hero-banner.css.map */