/* Hawaiian Delights | Clean approved production layout | October 28, 2026
   Single authoritative stylesheet. Sharp photographic assets and clean edge treatment. */
:root{--ink:#083c4a;--sea:#087c8b;--gold:#eab44b;--cream:#fff8ed;--pink:#ef448b;--film-width:min(100vw,calc(100dvh * 1.776833156));--header-h:calc(var(--film-width) * .08732057);--frame-h:calc(var(--film-width) * .47547847)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 10px)}
body{margin:0;background:#078bc8;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:clip}
a{color:inherit}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-header{width:var(--film-width);height:var(--header-h);margin:0 auto;position:sticky;top:0;z-index:100;background:#0875a7 url('assets/approved-hero-sharp-header.png') center / 100% 100% no-repeat}
.site-header nav{position:absolute;inset:0}
.site-logo,.site-header nav a{position:absolute;top:10%;height:84%;display:flex;align-items:center;justify-content:center;text-decoration:none;outline-offset:-4px}
.site-logo{left:11%;width:28%;z-index:1}
.site-header nav a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nav-delights{left:39%;width:13%}.nav-story{left:52%;width:12.6%}.nav-explore{left:64.6%;width:21%}
.site-header a:focus-visible{outline:3px solid #ffe071;border-radius:10px}
.mobile-brand{display:none}
body.alternate-nav .site-header{background-image:url('assets/gold-arc-navigation.jpg')}
.cinematic-hero{position:relative;width:var(--film-width);height:var(--frame-h);margin:0 auto;background:#078bc8;overflow:hidden;isolation:isolate}
.cinematic-frame{position:absolute;inset:0;background-color:#078bc8;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:0;z-index:0;pointer-events:none;transition:opacity .55s ease}
.cinematic-frame.active{opacity:1;z-index:1}
.cinematic-hero.is-playing .cinematic-frame{bottom:44px}
.cinematic-play{position:absolute;z-index:15;left:35%;top:74.3%;width:30%;height:14%;border:0;border-radius:50px;background:transparent;color:transparent;cursor:pointer;padding:0}
.cinematic-play[hidden],.cinematic-actions[hidden]{display:none!important}
.cinematic-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cinematic-play:focus-visible{outline:4px solid #fff;outline-offset:3px}
.cinematic-actions{position:absolute;z-index:12;left:0;right:0;bottom:0;height:44px;background:#053b53;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 14px}
.cinematic-actions button{border:1px solid #ffda75;border-radius:30px;background:#0074ae;color:#fff;font-size:13px;font-weight:700;padding:5px 16px;cursor:pointer}
.cinematic-actions button:hover{background:#0695d1}.cinematic-actions button:focus-visible{outline:3px solid #ffd27e;outline-offset:2px}
.cinematic-progress{position:absolute;z-index:13;bottom:0;left:0;right:0;height:4px;opacity:0;pointer-events:none}
.cinematic-progress.visible{opacity:1}.cinematic-progress span{display:block;width:0;height:100%;background:#f5be60}
#top{scroll-margin-top:0}#discover,#story,#connect{scroll-margin-top:calc(var(--header-h) + 10px)}
/* All previously approved sections and product copy remain unchanged. */
.kicker{color:#bd7b2a;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.3em}
.section-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(37px,5.1vw,73px);font-weight:500;line-height:1.14;margin:17px auto 20px;max-width:950px}
.section-copy{max-width:780px;margin:0 auto;font-size:clamp(16px,1.7vw,20px);line-height:1.85;color:#47636a}
.collection{background:#063e4c;padding:100px clamp(18px,5vw,85px) 120px;color:#fff}
.collection-head{text-align:center;margin-bottom:60px}.collection .section-title{color:#fff}.collection .section-copy{color:#d2e9e8}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1300px;margin:auto}
.product{background:#fff9f0;color:var(--ink);border-radius:19px;overflow:hidden;box-shadow:0 24px 55px #001d263d;transition:transform .35s}
.product:hover{transform:translateY(-8px)}
.photo{height:clamp(250px,33vw,460px);overflow:hidden;background:#fff}
.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.product:hover .photo:not(.wheels-gallery) img{transform:scale(1.065)}
.product:first-child .photo{height:auto;aspect-ratio:682/477;background:#fff9f0}
.product:first-child .photo img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important}
.product:nth-child(2) .photo img{object-position:center 30%}.product:nth-child(4) .photo img{object-position:center 40%}
.product-text{padding:29px 30px 35px}.product-text small{text-transform:uppercase;color:#b67a2b;letter-spacing:.18em;font-weight:800}
.product h3{font-family:'Playfair Display',Georgia,serif;font-size:clamp(28px,3vw,41px);font-weight:500;margin:8px 0 12px}.product p{line-height:1.75;color:#526b70;margin:0}
.wheels-gallery{position:relative;background:#fff8ee}
.wheels-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;animation:wheelsCycle 18s infinite;transform:none!important}
.wheels-gallery img:nth-child(1){animation-delay:0s}.wheels-gallery img:nth-child(2){animation-delay:6s}.wheels-gallery img:nth-child(3){animation-delay:12s}
@keyframes wheelsCycle{0%,30%{opacity:1}33.333%,96%{opacity:0}100%{opacity:1}}
.interlude-clean{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:0;padding:75px 20px 80px;background:#fff8ed;color:#083c4a;gap:35px}
.interlude-clean .interlude-content{max-width:900px}.interlude-clean h2{font:500 clamp(42px,6vw,78px)/1.12 'Playfair Display',Georgia,serif;margin:12px 0}
.interlude-clean .eyebrow{color:#bd7b2a;text-transform:uppercase;letter-spacing:.32em;font-size:12px;font-weight:700}
.interlude-clean p{font-size:clamp(17px,2vw,23px);line-height:1.6}
.interlude-clean .refreshers-photo{display:block;width:min(1250px,100%);height:auto;object-fit:contain;border-radius:16px;box-shadow:0 18px 55px rgba(2,45,57,.12)}
.story{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:620px;background:#fff5e8}
.story-visual{height:100%;min-height:570px;overflow:hidden}.story-visual img{display:block;width:100%;height:100%;object-fit:cover}
.story-text{padding:70px clamp(30px,6vw,110px)}.story-text h2{font:500 clamp(38px,4.5vw,68px)/1.15 'Playfair Display',Georgia,serif;margin:18px 0}
.story-text p{font-size:18px;line-height:1.85;color:#526b70}
.closing{padding:110px 22px 90px;text-align:center;background:linear-gradient(150deg,#043e4b,#077c83);color:#fff}
.closing .section-title{max-width:750px}.closing p{max-width:700px;margin:0 auto 30px;line-height:1.8;font-size:18px;color:#d9f0ed}
.closing-logo{width:220px;max-width:60vw;display:block;margin:0 auto 25px}
.domain{display:inline-block;font-size:clamp(17px,2.5vw,26px);font-weight:700;letter-spacing:.03em;color:#ffce74;text-decoration:none;border-bottom:1px solid #ffce7480;padding-bottom:5px}
footer{background:#022d39;color:#c5e0e1;padding:28px 20px;text-align:center;font-size:13px;line-height:1.8}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}.reveal.visible{opacity:1;transform:none}
@media(max-width:750px){
 :root{--film-width:100vw;--frame-h:calc(100vw * .49461722)}
 html{scroll-padding-top:86px}#top{scroll-margin-top:0}#discover,#story,#connect{scroll-margin-top:86px}
 .site-header{width:100%;height:82px;background:#034b6f!important;border-bottom:3px solid #f5c568;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px 9px}
 .site-logo{position:static;height:auto;width:auto;margin:0 auto 7px;line-height:1}
 .mobile-brand{display:block;color:#fff7d6;font-family:'Playfair Display',Georgia,serif;font-size:20px;font-style:italic;white-space:nowrap}
 .mobile-brand strong{color:#f9cd73;text-transform:uppercase;font:800 14px 'DM Sans',Arial,sans-serif;letter-spacing:.04em}
 .site-header nav{position:static;display:flex;gap:4px;width:100%;align-items:center;justify-content:space-around}
 .site-header nav a{position:static;height:auto;width:auto;flex:1;text-align:center;padding:5px 2px;border:1px solid rgba(255,255,255,.34);border-radius:6px;color:#fff;font-size:clamp(10px,2.7vw,13px);font-weight:700}
 .site-header nav a span{position:static;width:auto;height:auto;clip:auto;white-space:normal;overflow:visible}
 .cinematic-hero{height:calc(var(--frame-h) + 62px)}
 .first-frame{background-image:url('assets/approved-hero-sharp-mobile.png')!important;bottom:62px}
 .cinematic-frame:not(.first-frame){bottom:62px}
 .cinematic-hero.is-playing .cinematic-frame{bottom:62px}
 .cinematic-play{left:50%;top:auto;bottom:10px;transform:translateX(-50%);width:min(90%,295px);height:43px;background:linear-gradient(180deg,#16c6fc,#0077bd 54%,#03467f);border:2px solid #c6f2ff;box-shadow:0 3px 0 #003a61;color:white;font-weight:800;font-size:13px;letter-spacing:.02em}
 .cinematic-play span{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}
 .cinematic-actions{height:62px;justify-content:center;gap:12px}
 .cinematic-actions button{padding:9px 24px}
 .cards{grid-template-columns:1fr}.photo{height:340px}
 .collection{padding:80px 18px}.collection-head{margin-bottom:37px}.product-text{padding:24px 24px 30px}
 .story{grid-template-columns:1fr}.story-visual{height:350px;min-height:0}.story-text{padding:65px 26px}
 .interlude-clean{padding:60px 14px}
}
@media(max-width:440px){.photo{height:260px}.collection{padding:55px 14px 70px}.cards{gap:18px}.interlude-clean h2{font-size:39px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}.wheels-gallery img{opacity:0}.wheels-gallery img:first-child{opacity:1}}