:root{--navy:#0d2031;--red:#ed1c24;--gold:#d9b16c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:white;color:var(--navy);font-family:Arial,Helvetica,sans-serif}.header{height:126px;background:linear-gradient(110deg,#102536,#0c1b2b);position:relative;z-index:3}nav{max-width:1486px;height:100%;margin:auto;display:grid;grid-template-columns:1fr 296px 1fr;grid-template-rows:100%;align-items:center;gap:34px;padding:0 6.6%}.nav-side{display:flex;justify-content:space-between;gap:24px}.nav-side a{position:relative;color:#e9e9eb;text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:1.1px;font-weight:600;white-space:nowrap;padding:12px 0}.nav-side a:before{content:'';height:2px;background:var(--red);position:absolute;bottom:4px;left:0;right:0;transform:scaleX(0);transition:transform .18s}.nav-side a:after{content:'♧';content:'∪';font-size:27px;font-weight:900;color:var(--gold);position:absolute;top:100%;left:50%;transform:translateX(-50%);opacity:0;line-height:22px;text-shadow:1px 1px #90632d}.nav-side a:hover:before,.nav-side a:focus-visible:before{transform:scaleX(1)}.nav-side a:hover:after,.nav-side a:focus-visible:after{opacity:1}.brand{align-self:start;position:relative;top:13px;filter:drop-shadow(0 8px 9px #0003)}.brand img{width:100%;display:block}.hero{position:relative;min-height:710px;height:calc(100svh - 126px);max-height:1000px;overflow:hidden;background:#fff}.footage{position:absolute;inset:0}.footage video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}.sky{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff 0%,#ffffffed 10%,#ffffff80 28%,#fff0 55%),linear-gradient(90deg,#fff 0%,#ffffffed 18%,#ffffff95 34%,#fff0 58%)}.welcome{position:relative;z-index:1;padding:78px 4.8% 0;pointer-events:none}h1{margin:0 0 18px;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-stretch:condensed;font-size:clamp(80px,10.5vw,156px);line-height:.98;letter-spacing:-5px;font-weight:900}h2{font-size:27px;line-height:1.25;margin:23px 0 14px}p{font-size:21px;line-height:1.35;margin:0}.cup{position:absolute;width:clamp(95px,9.1vw,146px);right:4.7%;bottom:11%;filter:drop-shadow(0 12px 12px #0002)}button,a{touch-action:manipulation}button{cursor:pointer}.motion{position:absolute;bottom:20px;left:25px;background:#ffffffed;border:1px solid #0d203133;border-radius:30px;padding:10px 16px;color:var(--navy);font-size:13px}.preview-note{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4.8%;border-top:1px solid #dde1e5;background:#f7f9fa}.preview-note span{font-size:13px;font-weight:700;white-space:nowrap}.preview-note p{font-size:12px;max-width:620px}.preview-note a{color:var(--navy);font-size:12px;white-space:nowrap}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.detail{padding:38px 5%;position:relative;border-top:3px solid var(--gold)}.detail p{font-size:16px}.detail button{position:absolute;right:25px;top:20px;border:0;background:none;font-size:30px;color:var(--navy)}
@media(min-width:1600px){.welcome{padding-top:100px}}@media(max-width:1150px){nav{grid-template-columns:1fr 230px 1fr;gap:20px;padding:0 3%}.nav-side{gap:15px}.nav-side a{font-size:11px;letter-spacing:.8px}.header{height:110px}.hero{height:calc(100svh - 110px);min-height:650px}.welcome{padding-top:90px}}
@media(max-width:700px){.header{height:165px}nav{padding:0 16px;grid-template-columns:1fr 1fr;gap:0;align-items:end;padding-bottom:15px}.brand{position:absolute;top:5px;left:50%;width:176px;transform:translateX(-50%)}.nav-side{justify-content:space-around;gap:8px;flex-wrap:wrap}.nav-side a{font-size:9px;letter-spacing:.4px;padding:8px 0}.nav-side a:after{font-size:18px;line-height:15px}.hero{height:calc(100svh - 165px);min-height:640px;max-height:850px}.welcome{padding:48px 6% 0}h1{font-size:clamp(72px,18vw,126px);letter-spacing:-3px;margin-bottom:20px}h2{font-size:22px;margin:15px 0 12px}.welcome p{font-size:17px}.footage{top:170px;left:-35%;right:-35%}.footage video{object-position:55% center}.sky{background:linear-gradient(#fff 0%,#fff 20%,#ffffffd9 34%,#fff0 61%)}.cup{width:95px;right:5%;bottom:9%}.preview-note{align-items:flex-start;flex-direction:column;gap:9px}.preview-note p{font-size:12px}.motion{left:16px;bottom:16px}}

.nav-side a:after{content:"";width:25px;height:22px;background:url("assets/horseshoe.png") center/contain no-repeat}h1{letter-spacing:-1px}

/* Match the supplied approved artwork rather than substituting a heavier display font. */
.howdy-art{display:block;width:100%;height:auto}h1{width:clamp(220px,29.584vw,440.8px);line-height:1;margin:0 0 32px}
@media(min-width:701px){.header{height:clamp(100px,8.6vw,128px)}nav{grid-template-columns:1fr clamp(220px,19.9vw,296px) 1fr;gap:clamp(20px,2.3vw,34px);padding:0 7.7%}.nav-side{gap:18px}.nav-side a{font-size:clamp(10px,.94vw,14px);letter-spacing:1.4px;font-weight:600}.welcome{padding-top:clamp(72px,6.8vw,101px)}.welcome h2{font-size:clamp(22px,1.82vw,27px)}.welcome p{font-size:clamp(17px,1.41vw,21px)}}
@media(max-width:700px){h1{width:min(60.8vw,312px);margin-bottom:26px}}

/* Leave clear sky below the overlapping logo before the footage begins. */
@media(min-width:701px){.footage{top:115px}.sky{background:linear-gradient(180deg,#fff 0%,#ffffffed 20%,#ffffff80 40%,#fff0 65%),linear-gradient(90deg,#fff 0%,#ffffffed 18%,#ffffff95 34%,#fff0 58%)}}
@media(max-width:700px){.footage{top:210px}}

/* Keep the sky transition and text backing local so the footage retains its color. */
@media(min-width:701px){.sky{background:linear-gradient(180deg,#fff 0%,#ffffffd9 16%,#fff0 37%),radial-gradient(ellipse at 0% 20%,#fff 0%,#ffffffed 35%,#fff0 75%);background-size:100% 100%,48% 440px;background-repeat:no-repeat}}
@media(max-width:700px){.sky{background:linear-gradient(180deg,#fff 0%,#fff 28%,#ffffffb3 38%,#fff0 53%)}}

/* Keep the video on its own compositing layer when the preview panel resizes. */
.footage{isolation:isolate;transform:translateZ(0)}
.footage video{transform:translateZ(0);backface-visibility:hidden}

.cup.traveling-cup{position:fixed;left:0;top:0;right:auto;bottom:auto;width:96px;height:auto;z-index:5;pointer-events:none;will-change:transform;transition:width .25s;filter:drop-shadow(0 10px 12px #0003)}
.cup.traveling-cup.over-hero{width:clamp(95px,9.1vw,146px)}
@media(max-width:700px){.cup.traveling-cup,.cup.traveling-cup.over-hero{width:72px}}
@media(prefers-reduced-motion:reduce){.cup.traveling-cup{transition:none}}

.nav-side a.active:not(:hover):not(:focus-visible):after{opacity:0}

.hero>.coming-ribbon{position:absolute;z-index:2;top:47px;right:-65px;width:280px;padding:15px 0;text-align:center;transform:rotate(45deg);background:#bb2c32;color:#fffdf6;font-family:'Oswald',Arial,sans-serif;font-size:24px;font-weight:500;letter-spacing:1.5px;box-shadow:0 4px 10px #0002}
@media(max-width:700px){.hero>.coming-ribbon{top:34px;right:-64px;width:235px;font-size:19px;padding:12px 0}}

.video-picker{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px;border:1px solid #ffffff80;border-radius:30px;background:#0d2031e8;box-shadow:0 3px 12px #0002}
.video-picker button{border:0;border-radius:24px;padding:10px 18px;background:transparent;color:white;font:600 12px Arial,sans-serif;white-space:nowrap}
.video-picker button[aria-pressed=true]{background:#fff;color:#0d2031}.video-picker button:hover{background:#ffffff30}.video-picker button[aria-pressed=true]:hover{background:#fff}
.video-status{position:absolute;bottom:75px;left:50%;transform:translateX(-50%);font-size:12px;color:#0d2031;background:#ffffffe8;border-radius:20px;padding:5px 12px}.video-status:empty{display:none}
@media(max-width:700px){.video-picker{left:auto;right:12px;transform:none;bottom:16px}.video-picker button{padding:10px 12px;font-size:11px}.motion{font-size:11px;padding:10px 12px}}

/* Mirror only the footage; branding and copy retain their orientation. */
.footage video{transform:translateZ(0) scaleX(-1)}

.footage video.loop-cover{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .25s linear}

/* Shorter sky band, preserving the headline's overlap with the footage. */
@media(min-width:701px){.footage{top:77px}.welcome{padding-top:clamp(34px,calc(6.8vw - 38px),63px)}}
@media(max-width:700px){.footage{top:140px}.welcome{padding-top:24px}}

/* Fuel board sits within the white band beneath the right navigation. */
.fuel-prices{position:absolute;z-index:2;top:12px;right:4.8%;display:flex;gap:28px;color:var(--navy);font-family:Arial,Helvetica,sans-serif}
.fuel-prices>div{display:flex;flex-direction:column;gap:4px;min-width:95px}.fuel-prices>div+div{border-left:1px solid #d9b16c88;padding-left:28px}
.fuel-prices span{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700}.fuel-prices strong{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}.fuel-prices small{font-size:10px;font-weight:400;margin-left:5px;color:#697580}
@media(max-width:1000px){.fuel-prices{right:3%;gap:14px}.fuel-prices>div{min-width:70px}.fuel-prices>div+div{padding-left:14px}.fuel-prices strong{font-size:22px}}
@media(max-width:700px){.fuel-prices{top:88px;right:5%;gap:14px}.fuel-prices span{font-size:9px}.fuel-prices strong{font-size:20px}.fuel-prices>div{gap:2px;min-width:65px}}

.fuel-prices{padding-bottom:12px}.fuel-source{position:absolute;bottom:0;right:0;font-size:8px;color:#697580;text-decoration:none;white-space:nowrap}.fuel-source:hover{text-decoration:underline}

.fuel-prices .digital-price{display:flex;align-items:center;gap:4px;color:#d2222a;height:31px}.fuel-prices .digital-price small{align-self:flex-end;padding-bottom:2px}.fuel-dollar{font-size:20px;font-weight:400}.fuel-digits{display:flex;align-items:flex-end;gap:3px}.fuel-prices .fuel-digit{display:inline-block;position:relative;width:17px;height:29px;transform:skewX(-4deg)}.fuel-digit .seg{position:absolute;background:#d2222a;opacity:.06;display:block}.seg.a,.seg.d,.seg.g{height:3px;width:13px;left:2px;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}.seg.a{top:0}.seg.g{top:13px}.seg.d{bottom:0}.seg.b,.seg.c,.seg.e,.seg.f{width:3px;height:12px;clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}.seg.b{right:0;top:1px}.seg.c{right:0;bottom:1px}.seg.e{left:0;bottom:1px}.seg.f{left:0;top:1px}
.fuel-digit[data-digit="3"] :is(.a,.b,.c,.d,.g),.fuel-digit[data-digit="7"] :is(.a,.b,.c),.fuel-digit[data-digit="1"] :is(.b,.c),.fuel-digit[data-digit="5"] :is(.a,.f,.g,.c,.d){opacity:1}.fuel-prices .fuel-dot{font-size:25px;line-height:16px;letter-spacing:0;color:#d2222a}.fuel-prices .fuel-digits{letter-spacing:0}

.fuel-prices>div{align-items:center}.fuel-prices>div>span{text-align:center;width:100%}.fuel-prices .digital-price{justify-content:center}