/* Phase 1: Taste of London Ghana's supplied brand and catalogue. */
:root{--navy:#16285e;--ink:#16285e;--gold:#d69e3f;--caramel:#edc798;--cream:#fff3df;--orange:#a94718;--line:rgba(22,40,94,.23)}
body{background:var(--caramel)}
.header{height:110px;background:rgba(246,191,108,.17)}
.brand{display:inline-flex;align-items:center;flex-shrink:0;line-height:1}
.brand-crest{width:94px;height:94px;object-fit:contain}
footer .brand-crest{width:132px;height:132px}
.hero,.three-ready{background:radial-gradient(ellipse at 19% 18%,#ffdc8f 0%,#edae51 42%,#cf752c 76%,#985024 100%)}
.three-journey{background:#d58838}
.hero-art{background:#dc9342}
.hero-art img{opacity:.48;filter:sepia(.35) saturate(1.3)}
.hero:after{background:linear-gradient(90deg,#f4c378 5%,rgba(243,185,92,.9) 37%,rgba(203,115,44,.08) 80%)}
.hero h1,.three-ready h1{font-size:clamp(49px,5.25vw,82px);line-height:1.06;margin:22px 0 19px;letter-spacing:-.06em}
.hero-secondary{font-family:var(--display);font-size:clamp(23px,2.2vw,33px);line-height:1.25;letter-spacing:-.035em;margin-bottom:20px;max-width:570px}
.hero-secondary em{white-space:nowrap}
.hero-description{font-size:16px;margin-bottom:22px}
.hero .eyebrow{font-size:12px}
.hero-stamp{background:rgba(255,213,141,.6)}
.biscuit-side,.biscuit-hint{color:#3c271e}
.ribbon{background:var(--navy);color:var(--cream)}
.ribbon span{color:var(--gold)}
.treats{background:linear-gradient(155deg,#f5d6aa,#e9ba81)}
.product-grid{gap:45px 28px}
.product{min-width:0}
.product-image{height:min(330px,40svh);background:rgba(255,243,223,.36);border-bottom:1px solid rgba(22,40,94,.12);border-radius:0}
.product:nth-child(3n+2) .product-image{background:rgba(214,158,63,.17)}
.product:nth-child(3n) .product-image{background:rgba(255,222,170,.55)}
.product-image img,.product:nth-child(2) img{width:91%;height:91%;max-height:36svh;object-fit:contain;mix-blend-mode:normal;transform:none}
.product:hover img,.product:focus-visible img{transform:translateY(-5px)}
.product-label{font-size:11px;top:14px;left:15px}
.product-info{padding-top:18px;position:relative}
.product-info h3{font-size:20px;max-width:100%;min-height:2.5em}
.product-info>p{font-size:14px}
.product-price{display:block;font-family:var(--display);font-size:23px;font-weight:700;margin-top:13px;color:var(--navy)}
.product-info>span{font-size:14px;margin-top:5px;opacity:1}
.round-arrow{background:var(--cream);color:var(--navy)}
.availability{font-size:14px;color:#443322}
.spotlight{background:radial-gradient(ellipse at 12% 10%,#f9c260 0%,#d28333 47%,#9a491c 100%);color:var(--navy)}
.spotlight-stage{height:min(420px,48svh)}
.pack-wrap{background:transparent;box-shadow:none;border-radius:0;width:84%;height:100%}
.pack-wrap img{width:94%;height:100%;max-height:38svh;mix-blend-mode:normal;filter:drop-shadow(0 18px 15px rgba(71,32,12,.25))}
.giant-word{color:rgba(22,40,94,.12)}
.spotlight-controls{border-color:rgba(22,40,94,.3)}
.flavour,.flavour.active{color:var(--navy)}
.flavour:not(.active){opacity:.8}
.flavour-copy>p:last-child{color:#302629}
.spotlight-price{display:block;font-size:24px;margin:8px 0 12px;font-weight:700}
.stage-caption{opacity:1;color:#302629;font-size:13px}
.story{background:var(--caramel)}
.story-mark{color:#985018}
.how{background:#f8dfbc}
.final-cta{background:radial-gradient(ellipse at 25% 0%,#f8c770,#d68b35 60%,#b76725);color:var(--navy)}
.final-cta .button{background:var(--navy);color:var(--cream);border-color:var(--navy)}
footer{background:var(--navy);color:var(--cream)}
footer .copyright{border-color:rgba(214,158,63,.45)}
.motion{display:inline-block!important;min-height:44px;font-size:12px}
@media(min-width:761px) and (max-height:780px){
 .three-ready{padding-top:128px}
 .hero h1,.three-ready h1{font-size:clamp(48px,5vw,70px);margin:16px 0}
 .hero-secondary{font-size:25px;margin-bottom:15px}
 .hero-description{margin-bottom:18px}
}
@media(max-width:1050px) and (min-width:761px){
 .hero h1,.three-ready h1{font-size:clamp(46px,5.2vw,59px)}
 .hero-secondary{font-size:25px;max-width:390px}
 .product-info h3{font-size:18px}
}
@media(max-width:760px){
 .header{height:88px;gap:8px}
 .brand-crest{width:76px;height:76px}
 .nav-actions{gap:10px}
 .button.small{font-size:12px;padding:10px 12px;gap:8px}
 .hero,.three-ready{padding-top:119px;background:radial-gradient(ellipse at 15% 10%,#ffdc8f,#e8a047 66%,#b66629)}
 .hero h1,.three-ready h1{font-size:clamp(43px,10.5vw,75px);margin:18px 0}
 .hero-secondary{font-size:24px;max-width:440px;margin-bottom:20px}
 .hero .eyebrow{font-size:10px}
 .hero:after{background:linear-gradient(180deg,#f5c67c 40%,rgba(236,171,80,.12) 75%)}
 .three-ready .hero-scene{margin-top:-8px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
 .product-image{height:min(210px,34svh)}
 .product-image img{width:93%;height:93%;max-height:32svh}
 .product-info h3{font-size:16px;line-height:1.35;min-height:0}
 .product-info>p{font-size:13px}
 .product-price{font-size:21px;margin-top:10px}
 .product-label{display:none}
 .round-arrow{width:30px;height:30px;right:8px;bottom:8px;font-size:19px}
 .spotlight-stage{height:min(360px,44svh)}
 .pack-wrap{max-width:420px;width:90%}
 .flavour-copy{min-height:155px}
 footer .brand-crest{width:115px;height:115px}
}
@media(max-width:380px){
 .header{padding-inline:4%;gap:5px}
 .brand-crest{width:64px;height:64px}
 .nav-actions{gap:6px}
 .button.small{font-size:11px;padding:9px;gap:5px}
 .motion{font-size:11px}
 .hero h1,.three-ready h1{font-size:11vw}
 .hero-secondary{font-size:22px}
}