/* Approved For Brands geometry, scoped to For Shoppers Section 1. */
#hero{--hero-bg:var(--ivory);--hero-ink:var(--midnight);background:var(--hero-bg);color:var(--hero-ink)}
#hero .hero-grid{width:calc(100% - 144px);max-width:1296px;display:grid}
#hero .hero-copy h1{max-width:none}
#hero h1 span{display:inline}
#hero .hero-visual{height:auto;padding:0;border:0;margin:0}
#hero .hero-visual img{border:0;border-radius:0}
#hero .primary{border:0;font:600 15px/1.8 Poppins,sans-serif;padding:16px 22px;min-height:52px;text-decoration:none}
#hero .secondary{padding:7px 0;border:0;border-bottom:1px solid currentColor;background:none;font:400 15px/1.8 Poppins,sans-serif;min-height:0}
/* Static original TFR render; all layout and colour rules are hero-scoped. */
html:not([data-variant="B"]) #hero{--hero-bg:var(--ivory);--hero-ink:var(--midnight)}
html[data-variant="B"] #hero{--hero-bg:var(--midnight);--hero-ink:var(--ivory)}
html:not([data-variant="B"]) #hero h1 span{color:var(--deep)}
html[data-variant="B"] #hero h1 span{color:var(--blue)}
#hero .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr;column-gap:56px;row-gap:0;padding-top:56px;padding-bottom:56px;min-height:760px;align-items:start}
#hero .hero-copy{display:contents}
#hero h1{grid-column:1;grid-row:1;align-self:end;font-size:clamp(48px,4.5vw,70px);line-height:1.13;letter-spacing:-.015em}
#hero p{grid-column:1;grid-row:2;max-width:640px;font-size:16px;line-height:1.9;margin-top:28px}
#hero .actions{grid-column:1;grid-row:3;gap:20px 24px;margin-top:32px}
#hero .primary{background:var(--midnight);color:var(--ivory)}
#hero .primary:hover{background:var(--deep)}
html[data-variant="B"] #hero .primary{background:var(--ivory);color:var(--midnight)}
html[data-variant="B"] #hero .primary:hover{background:var(--blue)}
#hero .hero-visual{grid-column:2;grid-row:1/4;min-height:650px;align-self:stretch;background:transparent;display:flex;align-items:center;justify-content:center}
#hero .hero-visual img{position:static;width:100%;height:650px;object-fit:contain;object-position:center;filter:none}
html[data-variant="B"] #hero .hero-visual{background:radial-gradient(ellipse at 52% 46%,#24484D 0%,#24484d80 36%,#10272b00 72%)}
@media(max-width:1100px) and (min-width:761px){
 #hero .hero-grid{column-gap:30px;min-height:680px;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
 #hero h1{font-size:clamp(40px,4.6vw,51px)}
 #hero .hero-visual{min-height:570px}#hero .hero-visual img{height:570px}
}
@media(max-width:760px){
 #hero .hero-grid{display:flex;flex-direction:column;gap:0;padding-top:32px;padding-bottom:36px;min-height:0}
 #hero h1{align-self:stretch;font-size:clamp(30px,8.7vw,58px);line-height:1.15}
 #hero .hero-visual{height:auto;min-height:0;width:100%;align-self:center;margin-top:24px}
 #hero .hero-visual img{width:100%;height:clamp(350px,105vw,440px);object-fit:contain}
 #hero p{font-size:15px;line-height:1.85;margin-top:24px}
 #hero .actions{margin-top:24px;gap:18px}
}
/* Final approved handoff: desktop neck on divider, mobile Option B crop. */
#hero .hero-visual{position:relative;isolation:isolate;overflow:visible}
#hero .hero-visual img{position:absolute;top:-56px;left:0;width:100%;height:716px;max-width:none;z-index:1}
#hero .hero-visual::before{content:"";position:absolute;z-index:-1;inset:-56px -60px -44px -100px;background:radial-gradient(ellipse closest-side at 56% 53%,#ffffff70 0%,rgba(242,240,234,0.478431) 48%,rgba(242,240,234,0.188235) 76%,#f2f0ea00 100%);pointer-events:none}
#hero .hero-visual::after{content:"";position:absolute;z-index:0;bottom:-28px;left:9%;width:82%;height:34px;background:radial-gradient(ellipse closest-side,#10272b38 0%,#10272b20 35%,#10272b00 100%);filter:blur(8px);pointer-events:none}
html[data-variant="B"] #hero .hero-visual{background:transparent}
html[data-variant="B"] #hero .hero-visual::before{background:radial-gradient(ellipse closest-side at 56% 53%,rgba(36,72,77,0.658824) 0%,rgba(36,72,77,0.701961) 32%,#24484d80 63%,#10272b00 100%)}
html[data-variant="B"] #hero .hero-visual::after{background:radial-gradient(ellipse closest-side,rgba(16,39,43,0.4) 0%,rgba(16,39,43,0.2) 38%,#0000 100%)}
@media(min-width:761px) and (max-width:1100px){
 #hero .hero-visual img{height:626px}
}
@media(max-width:760px){
 #hero .hero-visual{width:calc(100% + 40px);height:clamp(330px,100.77vw,440px);margin-top:13px;overflow:hidden;flex:none}
 #hero .hero-visual img{top:0;left:50%;transform:translateX(-50%);width:auto;height:clamp(414px,126.4vw,552px);object-fit:contain}
 #hero .hero-visual::before{inset:0;background:radial-gradient(ellipse closest-side at 50% 49%,#ffffff38 0%,rgba(242,240,234,0.34902) 48%,#f2f0ea00 100%)}
 #hero .hero-visual::after{display:none}
 html[data-variant="B"] #hero .hero-visual::before{background:radial-gradient(ellipse closest-side at 50% 49%,rgba(36,72,77,0.611765) 0%,#24484d80 48%,#10272b00 100%)}
 #hero .actions{margin-top:40px;gap:18px}
}
/* Mobile calf finish: approximately 55px below hem at 390px, short terminal fade. */
@media(max-width:760px){
 #hero .hero-visual{height:clamp(374px,114.1vw,498px)}
 /* Keep the approved lighting field at its previous dimensions. */
 #hero .hero-visual::before{bottom:auto;height:clamp(330px,100.77vw,440px)}
}
@media(max-width:760px){#hero .hero-grid{width:calc(100% - 40px)}#hero .hero-visual img{mask-image:none}#hero .hero-visual{height:clamp(370px,113.1vw,494px)}}

/* Typography values from for-brands/study.css + hero-editorial.css. */
#hero h1{font-family:Anton,sans-serif;font-weight:400}
#hero p{font-family:Poppins,sans-serif;font-weight:400}

/* Hero-only light alternative; the selected lower-page composition stays B. */
html[data-hero-tone="light"] #hero{--hero-bg:#F2F0EA;--hero-ink:#10272B;--ink:#10272B;--line:#F2F0EA}
html[data-hero-tone="light"] #hero h1 span{color:#A7CCD4}
html[data-hero-tone="light"] #hero .primary{background:#10272B;color:#F2F0EA}
html[data-hero-tone="light"] #hero .primary:hover{background:#24484D}
html[data-hero-tone="light"] #hero .hero-visual::before{background:radial-gradient(ellipse closest-side at 56% 53%,#ffffff70 0%,rgba(242,240,234,0.478431) 48%,rgba(242,240,234,0.188235) 76%,#f2f0ea00 100%)}
html[data-hero-tone="light"] #hero .hero-visual::after{background:radial-gradient(ellipse closest-side,#10272b38 0%,#10272b20 35%,#10272b00 100%)}
@media(max-width:760px){html[data-hero-tone="light"] #hero .hero-visual::before{background:radial-gradient(ellipse closest-side at 50% 49%,#ffffff38 0%,rgba(242,240,234,0.34902) 48%,#f2f0ea00 100%)}}