@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

:root {
    --ink: #183b2d;
    --muted: #5f6f67;
    --paper: #fffbed;
    --surface: #ffffff;
    --line: #e7dfc9;
    --sun: #ffca05;
    --guava: #ff58c8;
    --sea: #00a7b5;
    --leaf: #6cca98;
    --night: #204c38;
    --orange: #ff9e00;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.catering-header,
.admin-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: .75rem clamp(1rem, 4vw, 3rem);
    color: #fff;
    background: rgba(32, 76, 56, .96);
    border-bottom: 3px solid var(--sun);
    box-shadow: 0 6px 18px rgba(15, 35, 25, .18);
}

.admin-header {
    position: sticky;
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}

.brand,
.catering-header nav,
.header-cta {
    border: 0;
    background: transparent;
    backdrop-filter: blur(16px);
}

.brand.dark,
.header-cta.dark {
    background: var(--surface);
    border-color: var(--line);
}

.brand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 3.4rem;
    border-radius: 0;
    padding: 0;
    font-weight: 900;
    box-shadow: none;
    font-size: clamp(1.15rem, 2vw, 1.8rem);
}

.brand-logo {
    display: block;
    width: clamp(8.4rem, 14vw, 11.5rem);
    height: auto;
}

.brand-context-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .18rem .32rem .12rem;
    color: var(--leaf);
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .12);
    white-space: nowrap;
}

.brand-context-text::before,
.brand-context-text::after {
    content: "";
    position: absolute;
    width: .42rem;
    height: .1rem;
    border-radius: 999px;
    background: var(--sun);
}

.brand-context-text::before {
    left: -.06rem;
    top: .16rem;
    transform: rotate(14deg);
    box-shadow:
        -.22rem -.1rem 0 -.02rem var(--sun),
        -.15rem .18rem 0 -.02rem var(--sun);
}

.brand-context-text::after {
    right: -.03rem;
    bottom: .24rem;
    transform: rotate(18deg);
    box-shadow:
        .12rem .22rem 0 -.02rem var(--sun),
        .26rem .42rem 0 -.02rem var(--sun);
}

.catering-header nav {
    display: flex;
    gap: .3rem;
    border-radius: 999px;
    padding: .25rem;
    background: rgba(255, 255, 255, .1);
}

.catering-header nav a,
.header-cta {
    display: inline-grid;
    min-height: 2.4rem;
    place-items: center;
    border-radius: 999px;
    padding: 0 .95rem;
    font-weight: 850;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    position: relative;
    white-space: nowrap;
}

.cart-cta {
    width: 3.1rem;
    min-height: 2.75rem;
    padding: .18rem;
}

.cart-pineapple-icon {
    position: relative;
    display: inline-grid;
    width: 2.25rem;
    height: 2.05rem;
    place-items: center;
}

.cart-outline {
    color: #fff;
    font-size: 1.85rem;
    line-height: 1;
}

.cart-pineapple {
    position: absolute;
    left: 50%;
    top: 48%;
    font-size: .95rem;
    line-height: 1;
    transform: translate(-50%, -50%);
}

.header-cta sup {
    position: absolute;
    top: .12rem;
    right: .16rem;
    display: inline-grid;
    min-width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 999px;
    background: var(--sun);
    color: var(--ink);
    font-size: .7rem;
    line-height: 1;
    padding: 0 .22rem;
    transform: translate(35%, -35%);
}

.hero {
    position: relative;
    min-height: 88vh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background: var(--night);
}

.hero img {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 88vh;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    display: none;
}

.hero-copy {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    width: 100%;
    min-height: 88vh;
    padding: 7rem clamp(1rem, 4vw, 4rem) 4rem;
    background: var(--paper);
    color: var(--ink);
}

.eyebrow {
    margin: 0 0 .75rem;
    color: var(--guava);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: var(--sun);
}

.aloha-lockup {
    display: grid;
    justify-items: center;
    width: min(38rem, 100%);
    padding: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.aloha-lockup h1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .22em;
    max-width: none;
    margin: 0;
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(2.15rem, 4vw, 4.05rem);
    line-height: .92;
    letter-spacing: 0;
    overflow-wrap: normal;
}

.aloha-word,
.bite-word,
.hero-subhead,
.hero-menu-line {
    overflow-wrap: normal;
    text-transform: uppercase;
}

.aloha-word {
    display: inline-flex;
    align-items: baseline;
    color: var(--sun);
}

.bite-word {
    color: var(--guava);
}

.pineapple-o {
    position: relative;
    top: .04em;
    display: inline-block;
    width: .72em;
    height: .94em;
    margin: 0 .01em;
    border-radius: 48% 48% 44% 44%;
    background:
        repeating-linear-gradient(38deg, transparent 0 .13em, rgba(255, 255, 255, .88) .14em .18em),
        repeating-linear-gradient(-38deg, transparent 0 .13em, rgba(255, 255, 255, .88) .14em .18em),
        var(--sun);
    box-shadow: inset 0 0 0 .05em var(--sun);
}

.pineapple-o::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .83em;
    width: .56em;
    height: .52em;
    transform: translateX(-50%);
    background: var(--leaf);
    clip-path: polygon(48% 0, 57% 44%, 94% 12%, 72% 55%, 100% 60%, 64% 70%, 74% 100%, 50% 74%, 27% 100%, 36% 70%, 0 60%, 28% 55%, 6% 12%, 43% 44%);
}

.hero-subhead {
    margin: .85rem 0 0;
    color: #049a64;
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.25rem, 2.9vw, 2.18rem);
    font-weight: 950;
    line-height: 1.18;
    letter-spacing: 0;
}

.hero-menu-line {
    margin: clamp(1.7rem, 4vw, 3rem) 0 0;
    color: #0b0c0b;
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.25rem, 2.85vw, 2.12rem);
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: 0;
}

.hero-delivery-line {
    margin: .25rem 0 0;
    color: #17120f;
    font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(1.1rem, 2.35vw, 1.85rem);
    font-style: italic;
    line-height: 1.1;
}

h1,
h2,
h3,
p,
span,
strong {
    overflow-wrap: anywhere;
}

h1 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(3rem, 7vw, 6.8rem);
    line-height: .92;
    letter-spacing: 0;
}

h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1;
    letter-spacing: 0;
}

.hero-copy > p:not(.eyebrow) {
    max-width: 42rem;
    font-size: clamp(1rem, 1.8vw, 1.28rem);
    line-height: 1.55;
    font-weight: 650;
}

.hero-actions,
.editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.5rem;
}

.primary-btn,
.secondary-btn,
.filter-chip,
.item-add,
.qty-btn {
    min-height: 2.75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
}

.primary-btn {
    display: inline-grid;
    place-items: center;
    background: var(--sun);
    color: var(--ink);
    padding: 0 1.15rem;
}

.secondary-btn {
    display: inline-grid;
    place-items: center;
    color: #fff;
    padding: 0 1.15rem;
}

.restaurant-site-btn {
    border-color: var(--night);
    background: #fffdf3;
    color: var(--ink);
}

.rush-band {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    justify-content: center;
    padding: .9rem 1rem;
    background: var(--sun);
    color: var(--ink);
    border-block: 3px solid var(--night);
}

.fine-print,
.package-card p,
.faq p,
.quote-meta {
    color: var(--muted);
    line-height: 1.45;
}

.brochure-info,
.catering-policy-banner,
.ordering-layout,
.faq,
.admin-shell {
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 4rem);
}

.brochure-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
    background: #fffdf0;
    padding-top: clamp(2rem, 5vw, 4rem);
    padding-bottom: .75rem;
}

.catering-policy-banner {
    padding-top: 0;
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
    background: #fffdf0;
}

.brochure-copy-card {
    display: grid;
    align-content: start;
    gap: .7rem;
    min-height: 13.5rem;
    border-radius: 8px;
    background: #fffaf0;
    padding: clamp(1rem, 2.2vw, 1.65rem);
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(231, 223, 201, .75);
}

.brochure-copy-card.feature {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-content: center;
    min-height: 16rem;
}

.brochure-copy-card.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url("/static/hello-hilo-catering-what.jpg");
    background-position: center;
    background-size: cover;
    opacity: .34;
}

.brochure-copy-card.feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 250, 240, .58);
}

.brochure-copy-card h2 {
    color: var(--leaf);
    font-size: clamp(1.9rem, 3.7vw, 3.25rem);
    line-height: .9;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(32, 76, 56, .16);
}

.what-hilo-wordmark {
    display: block;
    width: min(28rem, 92%);
    height: auto;
    margin: 0 auto .25rem;
}

.brochure-copy-card p {
    max-width: 28rem;
    margin: 0 auto;
    color: #111;
    font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(.98rem, 1.1vw, 1.12rem);
    line-height: 1.22;
}

.catering-policy-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #fffaf0, #fffdf6);
    color: #111;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    box-shadow: 0 14px 34px rgba(32, 76, 56, .1);
}

.policy-copy {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    align-items: center;
    color: #111;
    font-weight: 900;
    text-transform: uppercase;
}

.policy-copy strong,
.policy-copy span {
    color: #111;
    line-height: 1.15;
}

.download-menu-link {
    display: inline-grid;
    min-height: 2.75rem;
    place-items: center;
    border: 2px solid var(--night);
    border-radius: 999px;
    background: var(--sun);
    color: var(--ink);
    padding: 0 1rem;
    text-transform: none;
    white-space: nowrap;
}

.ordering-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem);
    gap: 1.25rem;
    align-items: start;
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
}

.ono-guide {
    display: grid;
    grid-template-columns: minmax(12rem, .55fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    border: 3px solid #ff4b83;
    border-radius: 8px;
    background: #fffaf0;
    padding: .9rem 1rem;
    color: #111;
}

.ono-guide div {
    display: grid;
    gap: .1rem;
}

.ono-guide strong {
    color: #2a806c;
    font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.35rem, 3vw, 2.35rem);
    line-height: .95;
    text-transform: uppercase;
}

.ono-guide div span {
    color: #f2a000;
    font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-style: italic;
}

.ono-guide ul {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1rem;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ono-guide li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #111;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
}

.guide-icon-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .18rem;
    align-items: center;
    vertical-align: middle;
}

.guide-icon {
    display: inline-grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    color: #18a244;
    font-size: .9rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.guide-icon-huli,
.guide-icon-spicy {
    font-size: 1.1rem;
}

.guide-icon-gluten-free {
    color: var(--guava);
    font-size: .86rem;
}

.item-guide-icons {
    margin-left: .25rem;
}

.choice-guide-icons,
.cart-choice-icons {
    margin-left: .2rem;
}

.section-title {
    margin-bottom: 1.2rem;
}

.section-title.compact h1 {
    max-width: none;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.ohana-choice-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin: 0 0 1rem;
}

.ohana-choice-panel div {
    display: grid;
    gap: .35rem;
    min-height: 6.25rem;
    border: 2px solid rgba(255, 88, 200, .28);
    border-radius: 8px;
    background: #fffdf3;
    padding: .9rem;
}

.ohana-choice-panel strong {
    color: var(--night);
    font-size: 1.05rem;
    text-transform: uppercase;
}

.ohana-choice-panel span {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.filter-chip {
    background: var(--surface);
    color: var(--ink);
    padding: 0 .95rem;
}

.filter-chip.active {
    background: var(--leaf);
    color: var(--ink);
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.package-card {
    display: grid;
    min-height: 29rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
}

.package-body {
    display: grid;
    grid-template-rows: minmax(13.6rem, 13.6rem) minmax(5.35rem, 5.35rem) auto;
    gap: .75rem;
    padding: 1rem;
}

.package-body > div:first-child {
    min-height: 0;
    overflow: hidden;
}

.package-body h3 {
    margin: 0;
    font-size: 1.1rem;
}

.package-body p:not(.eyebrow) {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    align-self: end;
    border-top: 1px solid var(--line);
    padding-top: .9rem;
}

.menu-card-meta,
.quote-total,
.cart-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}

.menu-card-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 5.35rem;
    border-top: 1px solid var(--line);
    padding: .85rem 0;
}

.price-stack {
    display: grid;
    justify-items: end;
    gap: .12rem;
    min-width: 7.5rem;
}

.price-stack strong {
    color: var(--night);
    font-size: 1.45rem;
    line-height: 1;
}

.serve-pill,
.person-price {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 850;
}

.person-price {
    min-height: 1.2rem;
    text-align: right;
}

.item-add,
.choice-detail {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
}

.item-add {
    background: var(--night);
    color: #fff;
}

.item-actions .item-add:only-child {
    grid-column: 1 / -1;
}

.choice-detail {
    background: var(--sun);
    color: var(--ink);
}

.catalog-panel,
.quote-panel {
    min-width: 0;
}

.quote-sticky {
    position: sticky;
    top: 5rem;
    display: grid;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 1rem;
}

.quote-sticky h2 {
    font-size: 1.35rem;
}

.cart-items {
    display: grid;
    gap: .65rem;
}

.cart-line {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .75rem;
    align-items: flex-start;
}

.cart-line-title {
    display: grid;
    gap: .24rem;
    min-width: 0;
}

.cart-line-title span {
    color: var(--muted);
    font-size: .84rem;
}

.cart-line-title .cart-category {
    color: var(--leaf);
    font-size: .75rem;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cart-line-title .guide-icon {
    color: #18a244;
}

.cart-line-title .guide-icon-gluten-free {
    color: var(--guava);
}

.cart-choice-list {
    display: grid;
    gap: .18rem;
    margin: .45rem 0 0;
    padding: .55rem .7rem .55rem 1.15rem;
    border: 1px solid rgba(108, 202, 152, .36);
    border-radius: 8px;
    background: rgba(108, 202, 152, .13);
    color: var(--night);
}

.cart-choice-list li {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .4rem;
    margin: 0;
    color: var(--night);
    font-size: .82rem;
    line-height: 1.3;
}

.cart-choice-list strong {
    color: var(--leaf-dark);
}

.cart-choice-value {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
}

.qty-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .4rem;
    min-width: 7rem;
}

.qty-btn {
    width: 2rem;
    min-height: 2rem;
    background: var(--surface);
}

.edit-choice {
    flex-basis: 100%;
    min-height: 2rem;
    border: 1px solid var(--night);
    border-radius: 999px;
    background: var(--surface);
    color: var(--night);
    cursor: pointer;
    font-size: .76rem;
    font-weight: 900;
}

.quote-total {
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.quote-form,
.admin-form,
.form-grid {
    display: grid;
    gap: .8rem;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

label {
    display: grid;
    gap: .35rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: .75rem;
    font-size: 1rem;
}

textarea {
    resize: vertical;
}

.submit-btn {
    width: 100%;
}

.quote-message {
    min-height: 1.2rem;
    margin: 0;
    color: var(--leaf);
    font-weight: 850;
}

.quote-message.error {
    color: var(--guava);
}

.faq {
    display: grid;
    gap: .75rem;
    background: #f7fff0;
}

.catering-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.5rem;
    align-items: center;
    justify-content: center;
    border-top: 3px solid var(--sun);
    background: var(--night);
    color: #fff;
    padding: 1.35rem clamp(1rem, 4vw, 3rem);
    text-align: center;
}

.catering-footer div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    align-items: center;
    justify-content: center;
}

.catering-footer strong {
    color: var(--leaf);
    font-weight: 950;
}

.catering-footer a,
.catering-footer span {
    color: #fff;
    font-weight: 800;
}

.phone-link,
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.instagram-link {
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
}

.footer-icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

details {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 1rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(21, 35, 31, .62);
}

.modal-backdrop[hidden] {
    display: none;
}

.ohana-modal {
    position: relative;
    width: min(1040px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    scrollbar-color: rgba(32, 76, 56, .42) transparent;
    scrollbar-width: thin;
    border-radius: 18px;
    background: #fff;
    padding: clamp(1.2rem, 3vw, 2rem);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

.ohana-modal::-webkit-scrollbar {
    width: 10px;
}

.ohana-modal::-webkit-scrollbar-track {
    background: transparent;
}

.ohana-modal::-webkit-scrollbar-thumb {
    border: 3px solid #fff;
    border-radius: 999px;
    background: rgba(32, 76, 56, .42);
}

.ohana-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 76, 56, .62);
}

.modal-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    z-index: 2;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--night);
    color: #fff;
    cursor: pointer;
    font-weight: 1000;
}

.modal-menu-title {
    text-align: center;
    padding: .5rem 2.75rem 1.1rem;
}

.modal-menu-title h2 {
    color: var(--leaf);
    font-size: clamp(2.1rem, 7vw, 3.4rem);
    text-transform: uppercase;
}

.modal-menu-title p {
    margin: .45rem 0 0;
    color: var(--muted);
    font-weight: 850;
}

.modal-choice-grid {
    display: grid;
    gap: .9rem;
    padding: .5rem 0 .25rem;
}

.modal-choice-grid > div {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    border-radius: 24px;
    background: #f8f3e6;
    padding: 1rem 1.2rem;
}

.modal-choice-grid > div > strong {
    color: var(--leaf);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.choice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
}

.choice-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.85rem;
    border: 1px solid rgba(108, 202, 152, .28);
    border-radius: 999px;
    background: #fffaf0;
    color: #111;
    cursor: pointer;
    padding: .45rem .75rem;
    font-size: .95rem;
    font-weight: 900;
}

.choice-option input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--night);
}

.choice-option span {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .15rem;
    align-items: center;
    color: #111;
    line-height: 1.15;
}

.modal-error {
    min-height: 1.3rem;
    margin: .8rem 0 0;
    color: var(--guava);
    font-weight: 950;
    text-align: center;
}

.modal-error:not(.visible) {
    visibility: hidden;
}

.modal-add {
    width: 100%;
    margin-top: .7rem;
}

.modal-add:disabled {
    cursor: not-allowed;
    filter: grayscale(.75);
    opacity: .55;
}

summary {
    cursor: pointer;
    font-weight: 900;
}

.admin-body {
    background: #f5f7f7;
}

.admin-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    gap: 1rem;
}

.quote-list {
    display: grid;
    gap: .6rem;
}

.quote-list button {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    padding: .85rem;
    text-align: left;
}

.quote-list button.active {
    border-color: var(--sea);
    box-shadow: inset 4px 0 0 var(--sea);
}

.admin-editor,
.admin-list {
    min-width: 0;
}

.admin-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 1rem;
}

.editor-empty {
    min-height: 18rem;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 850;
}

.editor-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.editor-head h2 {
    font-size: 1.6rem;
}

.racc-catering-body {
    min-height: 100vh;
    background: #f7f8f4;
    color: #17231f;
}

.racc-catering-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem clamp(1rem, 4vw, 3rem);
    background: rgba(247, 248, 244, .94);
    border-bottom: 1px solid #dfe5dd;
    backdrop-filter: blur(16px);
}

.racc-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-weight: 950;
    color: #17231f;
}

.racc-brand img {
    width: 2.35rem;
    height: 2.35rem;
}

.racc-header-link,
.racc-secondary-btn {
    display: inline-grid;
    min-height: 2.75rem;
    place-items: center;
    border: 1px solid #cfd8d0;
    border-radius: 999px;
    padding: 0 1rem;
    background: #ffffff;
    color: #17231f;
    font-weight: 850;
}

.racc-catering-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .98fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    min-height: calc(100vh - 4.5rem);
    padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 5rem);
}

.racc-hero-copy {
    max-width: 45rem;
}

.racc-hero-copy h1 {
    margin: 0;
    max-width: 13ch;
    font-size: clamp(3rem, 7vw, 6.9rem);
    line-height: .92;
    letter-spacing: 0;
}

.racc-hero-copy p:not(.eyebrow) {
    max-width: 38rem;
    margin: 1.25rem 0 0;
    color: #4e5d57;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.55;
}

.racc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.racc-hero-visual {
    position: relative;
    min-height: clamp(24rem, 56vw, 40rem);
    overflow: hidden;
    border: 1px solid #dfe5dd;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(23, 35, 31, .14);
}

.racc-hero-visual img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.racc-preview-card {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    gap: .25rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .7);
    color: #17231f;
    backdrop-filter: blur(14px);
}

.racc-preview-card span {
    color: #65736d;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.racc-preview-card strong {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.racc-capabilities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #dfe5dd;
    border-top: 1px solid #dfe5dd;
}

.racc-capabilities article {
    min-height: 16rem;
    padding: clamp(1.25rem, 3vw, 2.4rem);
    background: #ffffff;
}

.racc-capabilities span {
    color: var(--sea);
    font-size: .8rem;
    font-weight: 950;
}

.racc-capabilities h2 {
    margin: 1.25rem 0 .6rem;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.racc-capabilities p {
    margin: 0;
    color: #596963;
    line-height: 1.55;
}

@media (max-width: 920px) {
    .catering-header {
        grid-template-columns: 1fr auto;
        gap: .75rem;
        padding: .62rem 1rem;
    }

    .catering-header nav {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(18rem, 42vh) auto;
        min-height: auto;
    }

    .hero img {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        max-height: 28rem;
        object-position: center 38%;
    }

    .hero-copy {
        grid-column: 1;
        grid-row: 2;
        z-index: 1;
        min-height: auto;
        margin-top: -1.75rem;
        border-radius: 22px 22px 0 0;
        padding: 2.5rem 1.25rem 2.75rem;
    }

    .hero-overlay {
        display: none;
    }

    .aloha-lockup {
        width: 100%;
        margin-inline: auto;
    }

    .brochure-info,
    .ordering-layout,
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .brochure-copy-card,
    .brochure-copy-card.feature {
        min-height: auto;
    }

    .package-card {
        min-height: auto;
    }

    .package-body {
        grid-template-rows: auto auto auto;
    }

    .ono-guide {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ono-guide ul {
        justify-content: center;
    }

    .catering-policy-card {
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: center;
    }

    .policy-copy {
        justify-content: center;
    }

    .download-menu-link {
        width: 100%;
    }

    .ohana-choice-panel {
        grid-template-columns: 1fr;
    }

    .quote-sticky {
        position: static;
    }

    #packages,
    #quote,
    #faq {
        scroll-margin-top: 5.25rem;
    }

    .brand {
        min-height: 3.4rem;
        font-size: 1.05rem;
        padding: .5rem .85rem;
    }

    .brand-logo {
        width: 7.6rem;
    }

    .racc-catering-hero,
    .racc-capabilities {
        grid-template-columns: 1fr;
    }

    .racc-catering-hero {
        min-height: auto;
    }

    .racc-hero-copy h1 {
        max-width: 11ch;
    }

}

@media (max-width: 560px) {
    .catering-header {
        gap: .5rem;
        padding: .55rem .75rem;
    }

    .header-cta {
        min-height: 2.25rem;
        padding: 0 .7rem;
        font-size: .88rem;
    }

    .header-cta sup {
        min-width: 1rem;
        height: 1rem;
        font-size: .64rem;
    }

    .cart-cta {
        width: 2.75rem;
        min-height: 2.45rem;
        padding: .1rem;
    }

    .cart-pineapple-icon {
        width: 2rem;
        height: 1.85rem;
    }

    .cart-outline {
        font-size: 1.58rem;
    }

    .cart-pineapple {
        font-size: .82rem;
    }

    .brand {
        min-height: 2.6rem;
        padding: 0;
        gap: .28rem;
    }

    .brand-logo {
        width: clamp(6.5rem, 31vw, 7.8rem);
    }

    .brand-context-text {
        padding: .14rem .24rem .08rem;
        font-size: clamp(.82rem, 4.3vw, 1.02rem);
    }

    .hero {
        grid-template-rows: minmax(15rem, 38vh) auto;
    }

    .hero-copy {
        margin-top: -1.5rem;
        border-radius: 20px 20px 0 0;
        padding: 2.1rem 1.05rem 2.25rem;
    }

    .form-grid,
    .case-grid {
        grid-template-columns: 1fr;
    }

    .brochure-info,
    .catering-policy-banner,
    .ordering-layout,
    .faq,
    .admin-shell {
        padding: 2rem .85rem;
    }

    .brochure-info {
        gap: .75rem;
        padding-bottom: .75rem;
    }

    .brochure-copy-card {
        gap: .55rem;
        padding: .9rem;
    }

    .brochure-copy-card h2 {
        font-size: clamp(1.9rem, 12vw, 2.8rem);
    }

    .what-hilo-wordmark {
        width: min(20rem, 96%);
    }

    .brochure-copy-card p {
        font-size: 1rem;
        line-height: 1.28;
    }

    .catering-policy-banner {
        padding-top: 0;
    }

    .catering-policy-card {
        padding: .9rem;
    }

    .policy-copy {
        gap: .45rem;
        font-size: .9rem;
    }

    .download-menu-link,
    .primary-btn,
    .secondary-btn,
    .item-add,
    .choice-detail {
        min-height: 2.9rem;
    }

    .download-menu-link {
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        padding-block: .55rem;
    }

    .rush-band {
        align-items: center;
        padding: .8rem .9rem;
        text-align: center;
    }

    .rush-band a {
        overflow-wrap: anywhere;
    }

    .ono-guide {
        gap: .75rem;
        padding: .85rem;
    }

    .ono-guide strong {
        font-size: clamp(1.35rem, 8vw, 1.9rem);
    }

    .ono-guide ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem .65rem;
        width: 100%;
    }

    .ono-guide li {
        justify-content: center;
        white-space: normal;
        font-size: .84rem;
    }

    .filter-row {
        flex-wrap: nowrap;
        gap: .45rem;
        margin-inline: -.85rem;
        padding: 0 .85rem .35rem;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-padding-inline: .85rem;
    }

    .filter-row::-webkit-scrollbar {
        display: none;
    }

    .filter-chip {
        flex: 0 0 auto;
        min-height: 2.55rem;
        padding: 0 .85rem;
        white-space: nowrap;
    }

    .package-grid {
        grid-template-columns: 1fr;
        gap: .85rem;
    }

    .package-body {
        gap: .65rem;
        padding: .9rem;
    }

    .package-body > div:first-child {
        overflow: visible;
    }

    .package-body p:not(.eyebrow) {
        display: block;
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .menu-card-meta {
        min-height: auto;
        padding: .75rem 0;
    }

    .price-stack {
        min-width: 6.5rem;
    }

    .price-stack strong {
        font-size: 1.25rem;
    }

    .item-actions {
        grid-template-columns: 1fr;
    }

    .quote-sticky {
        padding: .9rem;
    }

    .cart-line {
        display: grid;
        gap: .75rem;
    }

    .qty-controls {
        justify-content: start;
        min-width: 0;
    }

    .edit-choice {
        flex-basis: auto;
    }

    .modal-choice-grid div {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .choice-options {
        grid-template-columns: 1fr;
    }

    .modal-backdrop {
        align-items: stretch;
        padding: .5rem;
    }

    .ohana-modal {
        width: 100%;
        max-height: calc(100vh - 1rem);
        border-radius: 12px;
        padding: 1rem;
    }

    .modal-menu-title {
        padding: 1.9rem .25rem .85rem;
    }

    .modal-menu-title h2 {
        font-size: clamp(1.7rem, 10vw, 2.4rem);
    }

    .modal-choice-grid > div {
        gap: .75rem;
        border-radius: 12px;
        padding: .85rem;
    }

    .modal-choice-grid > div > strong {
        white-space: normal;
    }

    .aloha-lockup {
        padding: 0;
    }

    .aloha-lockup h1 {
        font-size: clamp(2.15rem, 12vw, 3.2rem);
    }

    .hero-subhead {
        margin-top: .65rem;
        font-size: clamp(1.05rem, 6.4vw, 1.5rem);
    }

    .hero-menu-line {
        margin-top: 1.15rem;
        font-size: clamp(1.05rem, 6vw, 1.45rem);
    }

    .hero-actions {
        width: 100%;
        justify-content: stretch;
    }

    .hero-actions a {
        flex: 1 1 100%;
    }

    .quote-message {
        font-size: .95rem;
        line-height: 1.35;
    }

    .racc-catering-header {
        align-items: stretch;
        flex-direction: column;
    }

    .racc-header-link {
        width: 100%;
    }

    .racc-hero-actions a {
        width: 100%;
    }
}