.header{--menu-top:7px;background:none;top:7px;height:102px;min-height:102px;padding-top:10px;padding-bottom:10px}
.header .brand{position:relative;min-height:76px;padding-left:138px;gap:0;align-items:flex-end}
.header .logo-badge{position:absolute;left:0;top:calc(50% + 51px);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:114px;height:168px;padding:8px;background:transparent;border:0;border-radius:0;box-shadow:none}
.header .logo-badge img{position:static;width:94px;height:144px;max-width:none}
.header .brand>span:not(.logo-badge){font-size:30px}
.header .button-small{white-space:nowrap}
.header .brand-location{position:absolute;left:calc(5% + 138px);top:111px;gap:10px;margin:0;font-size:9px;letter-spacing:.08em;line-height:1.5;white-space:nowrap}
.header .brand-location .sun{font-size:25px;color:#ffab7f}
.hero-copy{padding-top:194px}
@media(max-width:760px){
 .header{--menu-top:1px;top:1px;height:82px;min-height:82px;padding-top:8px;padding-bottom:8px;gap:10px}
 .header .brand{min-height:64px;padding-left:88px}
 .header .logo-badge{top:calc(50% + 41px);width:74px;height:108px;padding:6px}
 .header .logo-badge img{width:58px;height:89px}
 .header .brand>span:not(.logo-badge){font-size:17px}
 .header .brand small{font-size:7px;letter-spacing:.1em}
 .header .brand-location{left:110px;top:92px;font-size:6.5px;letter-spacing:.03em;gap:6px}
 .header .brand-location .sun{font-size:18px}
 .hero-copy{padding-top:138px}
}
@media(max-width:360px){
 .header{--menu-top:-1px;top:-1px;gap:8px;padding-left:18px;padding-right:18px}
 .header .brand{padding-left:76px}
 .header .logo-badge{width:62px;height:94px;padding:5px}
 .header .logo-badge img{width:48px;height:74px}
 .header .brand>span:not(.logo-badge){font-size:14px}
 .header .brand-location{left:94px;font-size:6px}
 .header .button-small{gap:8px;padding-left:11px;padding-right:11px}
}

/* Continue the menu's shading to y=0 while its divider and logo stay put. */
.header::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--menu-top));bottom:0;background:linear-gradient(#151d18a6,transparent);pointer-events:none;z-index:-1}

/* The background follows the original emblem's outer envelope; the offset is constant in CSS pixels. */
.header .logo-underlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:144px;overflow:visible;pointer-events:none}
.header .logo-underlay path{fill:#fff;stroke:#fff;stroke-width:16px;stroke-linejoin:round}
.header .logo-badge img{position:relative;z-index:1}
@media(max-width:760px){.header .logo-underlay{width:58px;height:89px}.header .logo-underlay path{stroke-width:12px}}
@media(max-width:360px){.header .logo-underlay{width:48px;height:74px}.header .logo-underlay path{stroke-width:10px}}

/* Darken the photograph behind the logo, fading broadly into the hero. */
html[data-logo="sombra"] .header .logo-underlay{display:none}
html[data-logo="sombra"] .header .logo-badge img{filter:none}
html[data-logo="sombra"] .header .logo-badge::before{
 content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:350px;height:340px;pointer-events:none;
 background:radial-gradient(ellipse at center,#07120de0 0%,#07120db8 28%,#07120d70 48%,#07120d24 65%,#07120d00 78%);
}
@media(max-width:760px){html[data-logo="sombra"] .header .logo-badge::before{width:230px;height:230px}}
@media(max-width:360px){html[data-logo="sombra"] .header .logo-badge::before{width:210px;height:210px}}

/* Keep the diffuse photograph shading behind the adjacent brand text. */
html[data-logo="sombra"] .header .brand>span:not(.logo-badge){position:relative;z-index:2}
html[data-logo="sombra"] .header .brand-location{z-index:2}

/* Navigation and CTA share the vertical center of the name above the divider. */
.header{--brand-row-height:76px;--brand-name-size:30px;--menu-alignment:calc((var(--brand-row-height) - var(--brand-name-size) * 1.05) / 2)}
.header nav,.header>.button-small{position:relative;transform:translateY(var(--menu-alignment));z-index:2}
@media(max-width:760px){
 .header{--brand-row-height:64px;--brand-name-size:17px}
 .header>.button-small{min-height:36px;padding-top:8px;padding-bottom:8px}
 .header>.button-small::after{content:'';position:absolute;inset:-4px 0;}
}
@media(max-width:360px){.header{--brand-name-size:14px}}

@media(max-width:360px){
 .header>.button-small{min-height:34px;padding-top:7px;padding-bottom:7px}
 .header>.button-small::after{inset:-5px 0}
}