/* Ocean, hibiscus, mango and sunset: a brighter Hawaiian palette. */
:root {
  --ink: #073f53;
  --deep: #005e79;
  --ocean: #007e8c;
  --aqua: #71e5df;
  --paper: #fffdf7;
  --sand: #fff0b8;
  --yellow: #ffcf35;
  --orange: #c64b1b;
  --line: #a8dacf;
  --hibiscus: #b71959;
  --mango: #ffcc32;
  --turquoise: #00bec4;
  --leaf: #207f3b;
}

body { background: #fffdf7; }
.header { background: linear-gradient(110deg, #fff 20%, #fff9dd 70%, #e5fff5); border-bottom: 0; }
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, #00b9c3 0% 28%, #ffcb35 28% 52%, #ff853a 52% 72%, #e94483 72% 88%, #62b74d 88%);
}
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--hibiscus); }
.desktop-nav a::after { background: linear-gradient(90deg, #e52971, #ff963b); }
.mobile-nav { background: linear-gradient(135deg, #fff9ce, #edfff9); }
.eyebrow, .sweet-item .eyebrow, .more-item .eyebrow, .community-row .eyebrow, .faq-intro .eyebrow { color: var(--hibiscus); }
.text-link { border-bottom-color: #129caa; }
.button { border-radius: 999px; }
.button:hover { box-shadow: 0 10px 28px #009ca42b; }
.ocean { background: linear-gradient(115deg, #008591, #00677e); box-shadow: 0 7px 20px #0087992b, inset 0 1px 0 #ffffff5c; }
.line, .mobile-cta .mobile-line { background: linear-gradient(115deg, #138641, #076337); }
.sunshine { background: linear-gradient(110deg, #ffe864, #ffb52d 70%, #ff983c); color: #073b4c; }
.handwritten { color: var(--hibiscus); }

.hero {
  background:
    radial-gradient(ellipse at 2% 100%, #ffb82f 0%, #ffdc5bbd 14%, transparent 39%),
    radial-gradient(ellipse at 97% 90%, #0aabbc 0%, transparent 46%),
    linear-gradient(118deg, #b8fff0 3%, #65e4d9 45%, #12bfcc 100%);
}
.hero-backdrop {
  background:
    radial-gradient(ellipse at 0% 95%, #fff6c974 0 28%, transparent 28.3%),
    radial-gradient(ellipse at 6% 107%, transparent 43%, #fffef5a6 43.2%, transparent 43.5%),
    radial-gradient(ellipse at 110% 15%, transparent 36%, #e6fff450 36.2%, transparent 36.5%);
}
.hero .eyebrow { color: #005569; }
.hero-copy h1 { color: #064354; }
.hero-accent { color: #b71959; }
.hero-description { color: #073f53; }
.hero-actions .ocean {
  color: #073b4c;
  background: linear-gradient(110deg, #ffe654, #ffc72b 55%, #ff9b35);
  box-shadow: 0 8px 22px #ab610e26, inset 0 1px 0 #fffbc0;
}
.hero-actions .text-link { color: #064b60; border-color: #087b83; }
.hero-meta > a { border-color: #0a8790; }
.hero-family { box-shadow: 15px 20px 0 #ffa331, 23px 29px 0 #ec4e866b; }
.hero-food { background: linear-gradient(135deg, #fff8d3, #fffef9); box-shadow: 4px 12px 32px #08556b2b; }
.hero-food figcaption { color: #914020; }
.aloha-stamp { color: #723019; background: linear-gradient(135deg, #ffec63, #ffc329 65%, #ff9a38); outline-color: #a5513a80; box-shadow: 0 8px 20px #b747341f; }
.aloha-stamp strong { color: #ae174e; }
.ribbon { color: #fff; background: linear-gradient(105deg, #b91859, #cf2864 37%, #b4371d 77%, #c83d23); }
.ribbon i { color: #ffe866; }

.about { background: radial-gradient(ellipse at 100% 0%, #ffe89a72, transparent 54%), #fffdf7; }
.about-main { box-shadow: -11px 12px 0 #45d9ce; }
.about-small { border-color: #ffde53; box-shadow: 6px 8px 0 #f58c9c45; }
.about-copy h2 { color: #006b7c; }

.moments { background: radial-gradient(ellipse at 95% 0%, #ffb8589e, transparent 48%), linear-gradient(125deg, #fff7bb, #ffe66b 65%, #ffd78d); }
.moments .section-heading h2 { color: #006579; }
.moments .section-heading > p { color: #476044; }
.moment { box-shadow: 0 8px 20px #996d1914; border-bottom: 6px solid var(--turquoise); }
.moment:nth-child(2), .moment:nth-child(5) { border-bottom-color: #ec4c86; }
.moment:nth-child(3), .moment:nth-child(4) { border-bottom-color: #f47f2f; }
.moment:nth-child(6) { border-bottom-color: #5ba53e; }
.moment::after { background: linear-gradient(0deg, #033849fa, #073b527d 44%, transparent 87%); }
.moment > div > span { color: #ffe061; }
.moment .sweet-moment { background: linear-gradient(135deg, #ffcd55, #f6818d); }
.image-label { background: #075263eb; }

.enjoy::after { background: linear-gradient(110deg, #00557bee, #006b78dd 55%, #36437ccc); }
.enjoy .eyebrow, .enjoy-times b { color: #ffe36b; }
.enjoy-times a { border-color: #5be2d35e; }
.enjoy-times p { color: #effffe; }

.lunch { background: radial-gradient(ellipse at 1% 10%, #ffe26aa6, transparent 35%), linear-gradient(140deg, #fffdf5, #fffefb 65%, #ffefd0); }
.lunch .english-heading { color: #006c7a; }
.lunch .english-heading em { color: #c02060; }
.time-pill { background: linear-gradient(110deg, #b61a5c, #c93456); color: #fff; border-color: #b61a5c; }
.lunch-perks { color: #964514; }
.lunch-perks strong + strong { border-color: #eeaf50; }
.menu-photo { box-shadow: 0 5px 0 #f2b727; }
.lunch-item:nth-child(2) .menu-photo { box-shadow: 0 5px 0 #ee7398; }
.lunch-item:nth-child(3) .menu-photo { box-shadow: 0 5px 0 #19bfc5; }
.lunch-item:nth-child(4) .menu-photo { box-shadow: 0 5px 0 #6eb542; }
.dish-name { border-color: #efc46f; }
.dish-name > p { color: #b51954; }
.dish-name > div > span { color: #006a77; }
.lunch-drinks { background: radial-gradient(ellipse at 0% 100%, #ffdd6e85, transparent 65%), linear-gradient(115deg, #fff5b1, #ffedba 52%, #ffdac7); border-color: #f5c64e; }
.lunch-drinks .eyebrow { color: #b01b52; }
.app-benefit { border-color: #e8b452; }
.app-benefit > strong { color: #a91b53; }

.sweets { background: radial-gradient(ellipse at 90% 0%, #ffca67b3, transparent 58%), linear-gradient(125deg, #ffe0e3, #ffbdce 58%, #ffe6b5); }
.sweets h2 { color: #9b174d; }
.sweets .section-heading > p, .sweet-item p { color: #654052; }
.sweet-photo { box-shadow: 9px 10px 0 #f16f9636; }
.sweet-photo.acai-photo { background: radial-gradient(ellipse at 30% 25%, #ffe26d, #ffc837 60%, #ffb441); }
.pancake-photo { background: radial-gradient(ellipse at 30% 30%, #a0fff0, #35d6ce 70%, #0ababf); }
.sweet-item:nth-child(1) h3 { color: #9b174d; }
.sweet-item:nth-child(2) h3 { color: #005c70; }
.sweet-item:nth-child(3) h3 { color: #853018; }
.sweets .note { color: #61404a; }
.drinks { background: radial-gradient(ellipse at 0% 55%, #83e7dc59, transparent 55%), #fffef8; }
.drinks-photo { background: radial-gradient(ellipse, #9eeadc 0%, #ecffcb66 48%, transparent 73%); }
.drinks-copy h2 { color: #00697a; }
.namihana { border-color: #23b6b5; }
.namihana > span { color: #b11d5a; }
.namihana h3 { color: #944315; }
.more-food { background: #fffef8; }
.more-item { border-color: #02b4ba; }
.more-item:nth-child(2) { border-color: #ee628d; }
.more-item:nth-child(3) { border-color: #f2a31d; }
.more-item:first-child img { background: #d5f7eb; }

.values::after { background: linear-gradient(110deg, #075d61ec, #28552bcf 45%, #075970e5); }
.values .eyebrow { color: #ffe466; }
.community { background: radial-gradient(ellipse at 0% 68%, #ffe58880, transparent 55%), radial-gradient(ellipse at 100% 4%, #8ae6d859, transparent 52%), #fffdf6; }
.community h2 { color: #006d79; }
.community-row figure img { box-shadow: 9px 10px 0 #ffc944; }
.community-row.reverse figure img { box-shadow: -9px 10px 0 #46cec7; }
.small-tag { background: linear-gradient(120deg, #ffec91, #ffd354); color: #6c4018; border-color: #f1ba38; }
.community-row.reverse .small-tag { background: linear-gradient(120deg, #d7fff2, #83e7dd); color: #005561; border-color: #6ed6cd; }
.community-row h3 { color: #a82258; }
.community-row.reverse h3 { color: #006b79; }
.goods { background: radial-gradient(ellipse at 0% 15%, #ffcb4ba8, transparent 62%), linear-gradient(110deg, #fff1a3, #f7efb0 45%, #9be8d8); }
.goods h2 { color: #176342; }
.goods figure img { box-shadow: 9px 10px 0 #16b7af52; }
.faq { background: linear-gradient(130deg, #fffef9, #f4fffc); }
.faq h2 { color: #007481; }
.faq details, .faq details:first-child { border-color: #99d9d0; }
.faq summary > span { color: #c12163; }
.faq summary::after { color: #bd245b; }
.faq details[open] { background: linear-gradient(100deg, #e4fff657, #fff4bd66); }
.faq-intro > img { box-shadow: 7px 8px 0 #ffcd48; }
.access { background: radial-gradient(ellipse at 100% 100%, #13bcca77, transparent 55%), linear-gradient(135deg, #b6f5e8, #dcfff0 55%, #80deda); }
.access h2 { color: #005b74; }
.access-info dl > div { border-color: #82cabc; }
.access-info .phone-number { color: #a51c59; }
.storefront { box-shadow: 7px 8px 0 #ffca47; }
.instagram { background: radial-gradient(ellipse at 100% 0%, #ffd28252, transparent 65%), #fffcf6; }
.instagram .english-heading { color: #ba215d; }
.instagram-photos img:nth-child(3) { background: linear-gradient(130deg, #ffdb53, #ffa58a); }
.contact::after { background: linear-gradient(110deg, #005875eb, #005e6cdb 45%, #833452e6); }
.contact .eyebrow { color: #ffe36a; }
.contact h2 { color: #fff0b0; }
.contact-links a { border-color: #ffc24c; }
.footer { background: linear-gradient(110deg, #00556c, #073a59 70%, #29455d); }
.footer-brand { color: #ffe276; }
.footer-brand span { color: #ecfff8; }
.back-top { color: #ffe17b; border-color: #ffe17b85; }
.mobile-cta { background: linear-gradient(105deg, #fff2ad, #ffdd69); border-top-color: #e7b83a; }
.mobile-cta > a + a { border-left-color: #cdae546b; }

@media (max-width:700px) {
  .hero { background: radial-gradient(ellipse at 5% 95%, #ffd248 0%, transparent 44%), linear-gradient(148deg, #aeffec, #6de4d5 48%, #0abbc9); }
  .hero-family { box-shadow: 9px 12px 0 #ffbd35, 15px 18px 0 #ec518455; }
  .about-main { box-shadow: -7px 8px 0 #45d9ce; }
  .sweet-photo { box-shadow: 6px 8px 0 #f16f9636; }
  .community-row figure img { box-shadow: 6px 8px 0 #ffc944; }
  .community-row.reverse figure img { box-shadow: -6px 8px 0 #46cec7; }
  .goods figure img { box-shadow: 6px 8px 0 #16b7af52; }
  .app-benefit { border-top-color: #e8b452; }
}