/* Poke Bowl & Fusion - shared styles. Two theme colours: --p (teal, primary) and --s (coral, secondary) + white/black. */
:root {
    --p: #0A7C74;
    --s: #D93F27;
    --bg: #fff;
    --alt: #f3f7f6;
    --card: #fff;
    --text: #000;
    --muted: #556160;
    --line: #dde6e4;
    --pt: #0A7C74;
    --hf: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --bf: 'DM Sans', 'Segoe UI', sans-serif;
    --r: 20px
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: no-preference) {
    html:focus-within {
        scroll-behavior: smooth;
    }
}

body {
    font: 400 16px/1.7 var(--bf);
    background: var(--bg);
    color: var(--text);
    /* clip prevents horizontal overflow without turning body into a scroll container.
       That keeps the sticky navigation anchored to the viewport on mobile browsers. */
    overflow-x: clip;
    transition: background .3s, color .3s
}

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

ul {
    list-style: none
}

svg {
    max-width: 100%
}

h1,
h2,
h3,
h4 {
    font-family: var(--hf);
    line-height: 1.1;
    letter-spacing: -.02em
}

h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 700
}

.container {
    width: min(1180px, 92%);
    margin-inline: auto
}

.sec {
    padding: clamp(56px, 8vw, 96px) 0
}

.alt {
    background: var(--alt)
}

.head {
    max-width: 640px;
    margin-bottom: 40px
}

.head p,
.muted {
    color: var(--muted);
    margin-top: 12px
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r)
}

.i {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 28px;
    border-radius: 999px;
    border: 2px solid var(--s);
    background: var(--s);
    color: #fff;
    font: 600 .95rem var(--hf);
    cursor: pointer;
    transition: .25s
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(217, 63, 39, .3)
}

.btn.out {
    background: transparent;
    color: var(--pt);
    border-color: var(--p)
}

.btn.out:hover {
    background: var(--p);
    color: #fff;
    box-shadow: none
}

.btn.wh {
    background: #fff;
    border-color: #fff;
    color: var(--s)
}

.btn.gh {
    background: transparent;
    border-color: #fff
}

.btn.gh:hover {
    background: #fff;
    color: var(--s);
    box-shadow: none
}

.btn.sm {
    padding: 9px 18px;
    font-size: .85rem
}

.btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

/* header */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .25s, background .3s
}

header.scrolled {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12)
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 20px
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 1.4rem var(--hf);
    letter-spacing: -.03em;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate
}

.logo .i {
    width: 30px;
    height: 30px;
    color: var(--pt)
}

.logo b {
    color: var(--pt)
}

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline: auto
}

.menu>li {
    position: relative
}

.menu>li>a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 15px;
    border-radius: 999px;
    font: 500 .95rem var(--hf);
    white-space: nowrap;
    transition: .2s
}

.menu>li>a:hover,
.menu a.on {
    color: var(--pt);
    background: color-mix(in srgb, var(--p) 10%, transparent)
}

.arr {
    transition: transform .25s
}

.has-drop.open .arr {
    transform: rotate(180deg)
}

.drop {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 150px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .2s;
    pointer-events: none
}

.has-drop.open>.drop {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.drop a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 500
}

.drop a:hover,
.drop a.on {
    background: color-mix(in srgb, var(--p) 14%, transparent);
    color: var(--pt)
}

.tools {
    display: flex;
    align-items: center;
    gap: 8px
}

.ib {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    color: inherit;
    cursor: pointer;
    font: 600 .78rem var(--hf);
    display: grid;
    place-items: center;
    transition: .25s
}

.ib:hover {
    background: var(--p);
    border-color: var(--p);
    color: #fff;
    transform: translateY(-2px)
}

.burger,
.mobile-menu-tools {
    display: none
}

@media(max-width:1020px) {
    /* A fixed header is more reliable than sticky inside mobile device emulators
       and prevents the navigation from sliding above the visible viewport. */
    .topbar { display: none }

    header:not(.auth-header) {
        position: fixed;
        inset: 0 0 auto;
        width: 100%;
    }

    header:not(.auth-header)+main {
        padding-top: 72px;
    }

    .burger {
        display: grid
    }

    .tools .rtl-btn,
    .tools .theme-btn,
    .tools .login-btn {
        display: none
    }

    .menu {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--bg);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0 5%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition: max-height .35s, opacity .25s;
        border-top: 1px solid var(--line);
        box-shadow: 0 14px 28px rgba(0, 0, 0, .2)
    }

    .menu.open {
        max-height: 85vh;
        overflow-y: auto;
        opacity: 1;
        padding-block: 16px;
        pointer-events: auto
    }

    .menu>li>a {
        padding: 12px 14px;
        border-radius: 12px
    }

    .drop {
        position: static;
        max-height: 0;
        overflow: hidden;
        padding: 0 10px;
        margin: 0 4px;
        box-shadow: none;
        border: 0;
        transform: none;
        background: var(--alt)
    }

    .has-drop.open>.drop {
        max-height: 160px;
        padding: 6px 10px;
        margin: 4px 4px 8px
    }

    .mobile-menu-tools {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
        padding-top: 16px;
        border-top: 1px solid var(--line)
    }

    .mobile-toggles {
        display: flex;
        gap: 10px
    }

    .mobile-menu-tools .login-btn {
        flex: 1
    }
}

@media(max-width:480px) {
    .logo {
        font-size: 1.15rem
    }

    .logo .i {
        width: 26px;
        height: 26px
    }

    .ib {
        width: 36px;
        height: 36px
    }
}

/* hero */
.hero {
    padding: clamp(36px, 7vw, 84px) 0;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .68) 48%, rgba(0, 0, 0, .24) 100%),
        url("../images/poke.png") center/cover no-repeat
}

.hero .lead {
    color: rgba(255, 255, 255, .84)
}

.hero .container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center
}

.hero .hero-highlights {
    display: block
}

.hero h1 {
    font-size: clamp(2.7rem, 6.4vw, 5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .98
}

.lead {
    font-size: 1.12rem;
    color: var(--muted);
    max-width: 520px;
    margin: 22px 0 30px
}

.ticks {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin-top: 30px;
    font-size: .92rem;
    font-weight: 500
}

.ticks div {
    display: flex;
    align-items: center;
    gap: 7px
}

.ticks .i {
    color: var(--pt)
}

.stage {
    position: relative;
    aspect-ratio: 1;
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
    display: grid;
    place-items: center
}

.stage::before {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    background: var(--p)
}

.stage::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed #fff;
    animation: spin 40s linear infinite
}

.stage svg {
    position: relative;
    z-index: 1;
    width: 90%;
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .28))
}

.fchip {
    position: absolute;
    z-index: 2;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font: 600 .85rem var(--hf);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    animation: bob 5s ease-in-out infinite
}

.ing {
    animation: drop .75s cubic-bezier(.3, 1.5, .5, 1) both
}

.ing rect {
    stroke: rgba(0, 0, 0, .15)
}

@keyframes drop {
    from {
        transform: translateY(-150px);
        opacity: 0
    }
}

@keyframes bob {
    50% {
        transform: translateY(-10px)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* strip + marquee */
.strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 28px
}

.strip>div {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px
}

.strip .ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--p);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.strip h4 {
    font-size: 1.05rem
}

.strip p {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.4
}

.mq {
    background: var(--text);
    color: var(--bg);
    overflow: hidden;
    padding: 16px 0;
    margin-top: 56px
}

.mq-track {
    display: flex;
    gap: 44px;
    width: max-content;
    animation: mq 34s linear infinite;
    font: 600 1.15rem var(--hf);
    white-space: nowrap
}

.mq-track span {
    display: flex;
    align-items: center;
    gap: 44px
}

.mq-track span::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--s)
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* builder */
.build {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 32px;
    align-items: start
}

.steps {
    display: grid;
    gap: 20px
}

.step {
    padding: 24px;
    transition: box-shadow .25s ease
}

.step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.step h3 {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0
}

.step h3 span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--p);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .88rem;
    font-weight: 700;
    flex-shrink: 0
}

.step-hint {
    margin-inline-start: auto;
    color: var(--muted);
    font: 500 .84rem var(--bf);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.count-badge {
    display: inline-block;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--p) 12%, transparent);
    color: var(--pt);
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem
}

/* aligned option cards grid */
.steps .opts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.step[data-step="p"] .opts {
    grid-template-columns: repeat(3, 1fr)
}

.steps .opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--text);
    font: 500 .9rem/1.3 var(--bf);
    cursor: pointer;
    transition: all .2s cubic-bezier(.2, .8, .2, 1);
    min-height: 52px;
    text-align: start;
    box-sizing: border-box;
    width: 100%
}

.steps .opt:hover {
    border-color: var(--p);
    background: color-mix(in srgb, var(--p) 5%, var(--card));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06)
}

.steps .opt .opt-label {
    flex: 1;
    word-break: normal
}

.steps .opt .opt-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--card);
    transition: all .2s ease
}

.steps .opt[aria-pressed=true] {
    background: color-mix(in srgb, var(--p) 10%, var(--card));
    border-color: var(--p);
    color: var(--pt);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(10, 124, 116, .18)
}

.steps .opt[aria-pressed=true] .opt-check {
    background: var(--p);
    border-color: var(--p)
}

.steps .opt[aria-pressed=true] .opt-check::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-1px, -1px);
    display: block
}

/* general pills (tabs, etc.) */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px
}

.opt {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: inherit;
    font: 500 .92rem var(--bf);
    cursor: pointer;
    transition: .2s
}

.opt:hover {
    border-color: var(--p);
    transform: translateY(-2px)
}

.opt[aria-pressed=true] {
    background: var(--p);
    border-color: var(--p);
    color: #fff
}

/* preview card */
.preview {
    position: relative;
    padding: 26px;
    text-align: center
}

.preview-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--s) 12%, transparent);
    color: var(--s);
    font: 600 .78rem var(--hf);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.preview svg {
    width: 100%;
    max-width: 320px;
    filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .14))
}

.preview h3 {
    font-size: 1.45rem;
    margin-top: 10px
}

.preview p {
    color: var(--muted);
    margin: 8px 0 20px;
    min-height: 3.2em;
    font-size: .92rem;
    line-height: 1.5
}

.preview .btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%
}

.preview .btns .btn {
    width: 100%;
    padding: 12px 20px;
    text-align: center
}

/* signature bowls */
.bowls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.bc {
    padding: 18px;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
    contain: layout style;
}

.bc:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .12)
}

.bowls .bc[hidden] {
    display: none
}

.bsv {
    background: color-mix(in srgb, var(--p) 9%, transparent);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 14px
}

.bc h3 {
    font-size: 1.3rem
}

.bc p {
    color: var(--muted);
    font-size: .92rem;
    margin: 6px 0 14px;
    flex: 1 0 auto
}

.meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    font-size: .85rem;
    font-weight: 500
}

.meta .tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto
}

.vg {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    vertical-align: -2.5px;
    margin-inline: 2px 6px;
    box-sizing: border-box;
    flex-shrink: 0;
    line-height: 0
}

.vg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: block
}

.vg.v {
    color: var(--p)
}

.vg.n {
    color: var(--s)
}

#bowls-sec .btns {
    justify-content: center
}

/* story */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center
}

.venn {
    position: relative;
    height: 380px;
    max-width: 520px;
    width: 100%;
    margin-inline: auto
}

.vc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    box-sizing: border-box;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .14)
}

.vc strong {
    display: block;
    font-family: var(--hf);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -.01em
}

.vc span {
    display: block;
    font-family: var(--bf);
    font-size: .88rem;
    line-height: 1.35;
    opacity: .95;
    max-width: 160px
}

.v1 {
    background: var(--p);
    inset-inline-start: 0;
    transform: translateY(-50%) translateX(-12.9%);
    padding-block: 10%;
    padding-inline-start: 8%;
    padding-inline-end: 28%;
    align-items: center;
    text-align: center;
    opacity: .92
}

.v2 {
    background: var(--s);
    inset-inline-end: 0;
    transform: translateY(-50%) translateX(12.9%);
    padding-block: 10%;
    padding-inline-start: 28%;
    padding-inline-end: 8%;
    align-items: center;
    text-align: center;
    opacity: .92
}

.venn.in .v1,
.venn.in .v2 {
    transform: translateY(-50%)
}

.vm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    font: 800 1.05rem var(--hf);
    color: #fff;
    background: rgba(12, 22, 20, .82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 9px 20px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .38);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
    white-space: nowrap;
    letter-spacing: .02em
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 28px
}

.stats b {
    display: block;
    font: 800 2.3rem/1 var(--hf);
    color: var(--pt)
}

.stats span {
    font-size: .85rem;
    color: var(--muted)
}

/* nutrition (coloured section) */
.nut {
    background: var(--p);
    color: #fff
}

.nut h2,
.nut h3 {
    color: #fff
}

.nut .lead {
    color: rgba(255, 255, 255, .85)
}

.nut ul {
    display: grid;
    gap: 10px;
    margin-bottom: 28px
}

.nut li {
    display: flex;
    gap: 10px;
    align-items: center
}

.ncard {
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r);
    padding: 28px
}

.ncard h3 {
    margin-bottom: 20px
}

.bar-row {
    margin-bottom: 18px
}

.bar-row div:first-child {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    margin-bottom: 6px
}

.bar {
    height: 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden
}

.bar i {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: 9px;
    transition: width 1.4s cubic-bezier(.2, .8, .2, 1)
}

.ncard small {
    opacity: .8
}

/* faq + visit */
.faq details {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    margin-bottom: 12px;
    padding: 0 20px
}

.faq summary {
    cursor: pointer;
    padding: 16px 0;
    font: 600 1.02rem var(--hf);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.faq summary::after {
    content: "+";
    color: var(--s);
    font-size: 1.4rem;
    line-height: 1
}

.faq details[open] summary::after {
    content: "\2212"
}

.faq details p {
    padding-bottom: 16px;
    color: var(--muted)
}

.visit {
    padding: 30px
}

.visit h3 {
    font-size: 1.6rem;
    margin-bottom: 16px
}

.visit li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line)
}

.visit .i {
    color: var(--pt);
    margin-top: 3px
}

.visit .btns {
    margin-top: 18px
}

/* cta (coloured section) */
.cta {
    background: var(--s);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
}

.cta .container {
    position: relative;
    z-index: 1
}

.cta h2 {
    color: #fff
}

.cta p {
    max-width: 520px;
    margin: 14px auto 28px;
    opacity: .92
}

.cta .btns {
    justify-content: center
}

.cta::before,
.cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    width: 340px;
    height: 340px;
    inset-inline-start: -90px;
    top: -120px;
    animation: ring 6s ease-out infinite
}

.cta::after {
    inset-inline-start: auto;
    inset-inline-end: -90px;
    top: auto;
    bottom: -140px;
    animation-delay: 3s
}

@keyframes ring {
    from {
        transform: scale(.7);
        opacity: 1
    }

    to {
        transform: scale(1.25);
        opacity: 0
    }
}

/* footer */
footer {
    background: var(--bg);
    color: var(--text);
    border-top: 1px solid var(--line);
    padding: 64px 0 0
}

footer .grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 36px
}

footer h4 {
    margin-bottom: 16px;
    font-size: 1.05rem
}

footer p {
    color: var(--muted);
    margin: 14px 0;
    font-size: .92rem
}

footer li {
    margin-bottom: 8px
}

footer li a,
footer .ct a,
footer .ct span {
    color: var(--muted);
    font-size: .92rem;
    transition: .2s
}

footer li a:hover,
footer .ct a:hover {
    color: var(--pt);
    padding-inline-start: 4px
}

.ct li {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.ct .i {
    color: var(--s);
    margin-top: 3px
}

.soc {
    display: flex;
    gap: 10px
}

.soc a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    transition: .25s
}

.soc a:hover {
    background: var(--s);
    border-color: var(--s)
}

.copy {
    border-top: 1px solid var(--line);
    margin-top: 44px;
    padding: 20px 0;
    font-size: .88rem;
    color: var(--muted)
}

.reveal {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease, transform .4s ease
}

.reveal.in {
    opacity: 1;
    transform: none
}

/* responsive */
@media(max-width:1020px) {
    .bowls {
        grid-template-columns: repeat(2, 1fr)
    }

    .strip {
        grid-template-columns: repeat(2, 1fr)
    }

    footer .grid {
        grid-template-columns: 1fr 1fr
    }

    .steps .opts,
    .step[data-step="p"] .opts {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:900px) {

    .hero .container,
    .build,
    .split {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .preview {
        position: static;
        max-width: 540px;
        margin-inline: auto;
        width: 100%
    }

    .preview .btns {
        flex-direction: row
    }

    .preview .btns .btn {
        flex: 1
    }

    .stage {
        max-width: 440px
    }

    .venn {
        height: 300px
    }
}

@media(max-width:600px) {

    .bowls,
    .strip,
    footer .grid {
        grid-template-columns: 1fr
    }

    .stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .btns .btn {
        flex: 1
    }

    .btns:not(.preview .btns) .btn {
        flex: none;
        width: auto;
        min-width: 180px;
        max-width: 260px
    }

    .mq {
        margin-top: 40px
    }

    .steps .opts,
    .step[data-step="p"] .opts {
        grid-template-columns: 1fr
    }

    .preview .btns {
        flex-direction: column
    }

    .step {
        padding: 18px
    }

    .venn {
        height: 270px;
        max-width: 380px
    }

    .vc strong {
        font-size: .95rem
    }

    .vc span {
        font-size: .78rem;
        max-width: 110px
    }

    .vm {
        font-size: .88rem;
        padding: 7px 14px
    }

    .btns {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .btns .btn {
        width: auto;
        min-width: 180px;
        max-width: 260px;
        padding: 12px 22px;
        font-size: .9rem
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .vc,
    .venn.in .v1,
    .venn.in .v2 {
        transform: translateY(-50%)
    }
}

/* photos */
.stage img {
    position: relative;
    z-index: 1;
    width: 86%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid var(--bg);
    box-shadow: 0 22px 40px rgba(0, 0, 0, .3)
}

.bsv img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 12px
}

.preview img {
    display: block;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 18px;
    margin-inline: auto
}

.ph {
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--p);
    color: #fff;
    font: 600 .9rem/1.4 var(--hf);
    aspect-ratio: 4/3;
    border-radius: 12px;
    padding: 12px
}

.stage .ph {
    position: relative;
    z-index: 1;
    width: 86%;
    aspect-ratio: 1;
    border-radius: 50%
}

.preview .ph {
    aspect-ratio: 1;
    max-width: 340px;
    margin-inline: auto;
    border-radius: 18px
}

/* ============================================================
   HOME 2 — all classes below are used only by pages/home2.html
   ============================================================ */

/* --- home 2 hero --- */
.h2hero {
    background: linear-gradient(130deg, var(--p) 0%, color-mix(in srgb, var(--p) 62%, #04302d) 52%, color-mix(in srgb, var(--s) 88%, #6d1508) 135%);
    color: #fff;
    padding: clamp(48px, 7vw, 90px) 0;
    overflow: hidden;
    position: relative
}

.h2hero .container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center
}

.h2badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
    font: 600 .8rem var(--hf);
    letter-spacing: .05em;
    text-transform: uppercase
}

.h2hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.02;
    margin-top: 18px
}

.h2hero .lead {
    color: rgba(255, 255, 255, .85);
    max-width: 470px
}

.hstats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .25)
}

.hstats b {
    display: block;
    font: 800 1.55rem var(--hf);
    line-height: 1.1
}

.hstats span {
    font-size: .84rem;
    opacity: .85
}

.hcoll {
    position: relative;
    aspect-ratio: 1/.95;
    max-width: 520px;
    width: 100%;
    margin-inline: auto
}

.hcoll img {
    position: absolute;
    object-fit: cover;
    border-radius: 22px;
    border: 5px solid rgba(255, 255, 255, .88);
    box-shadow: 0 24px 44px rgba(0, 0, 0, .3)
}

.hcoll .c1 {
    width: 62%;
    aspect-ratio: 1;
    inset-inline-start: 0;
    top: 8%;
    z-index: 2;
    transform: rotate(-5deg)
}

.hcoll .c2 {
    width: 44%;
    aspect-ratio: 4/5;
    inset-inline-end: 0;
    top: 0;
    z-index: 1;
    transform: rotate(4deg)
}

.hcoll .c3 {
    width: 52%;
    aspect-ratio: 4/3;
    inset-inline-end: 6%;
    bottom: 0;
    z-index: 3;
    transform: rotate(-2deg)
}

.hcoll .price-chip {
    position: absolute;
    z-index: 4;
    bottom: 16%;
    inset-inline-start: 2%;
    background: var(--card);
    color: var(--text);
    border-radius: 16px;
    padding: 10px 16px;
    font: 800 .95rem var(--hf);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
    white-space: nowrap
}

.hcoll .price-chip small {
    display: block;
    font: 500 .74rem var(--bf);
    color: var(--muted)
}

/* --- fresh promise --- */
.promise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.pcard {
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s
}

.pcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .12)
}

.pcard .pnum {
    position: absolute;
    top: 12px;
    inset-inline-end: 18px;
    font: 800 2.7rem var(--hf);
    color: color-mix(in srgb, var(--p) 13%, transparent);
    line-height: 1
}

.pcard .ico {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--p) 12%, transparent);
    color: var(--pt);
    display: grid;
    place-items: center;
    margin-bottom: 18px
}

.pcard .ico .i {
    width: 24px;
    height: 24px
}

.pcard:nth-child(2n) .ico {
    background: color-mix(in srgb, var(--s) 12%, transparent);
    color: var(--s)
}

.pcard:nth-child(2n) .pnum {
    color: color-mix(in srgb, var(--s) 13%, transparent)
}

.pcard h4 {
    font-size: 1.12rem;
    margin-bottom: 8px
}

.pcard p {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55
}

/* --- how it works --- */
.flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.fstep {
    text-align: center;
    padding: 30px 20px;
    position: relative
}

.fstep .fnum {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--p);
    color: #fff;
    display: grid;
    place-items: center;
    font: 800 1.3rem var(--hf);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--p) 35%, transparent)
}

.fstep:nth-child(2n) .fnum {
    background: var(--s);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--s) 35%, transparent)
}

.fstep:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 60px;
    inset-inline-end: -22px;
    width: 22px;
    border-top: 2px dashed color-mix(in srgb, var(--p) 40%, var(--line))
}

.fstep h4 {
    font-size: 1.1rem;
    margin-bottom: 8px
}

.fstep p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5
}

/* --- chef's specials --- */
.specials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.sp {
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s
}

.sp:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .14)
}

.sp .sp-img {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--p) 9%, transparent)
}

.sp .sp-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform .5s
}

.sp:hover .sp-img img {
    transform: scale(1.05)
}

.sp .ribbon {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--s);
    color: #fff;
    font: 700 .74rem var(--hf);
    letter-spacing: .04em;
    text-transform: uppercase;
    z-index: 1
}

.sp .ribbon.t {
    background: var(--p)
}

.sp .ribbon.d {
    background: #14201e
}

.sp h3 {
    font-size: 1.3rem
}

.sp>p {
    color: var(--muted);
    font-size: .92rem;
    margin: 6px 0 14px;
    flex: 1 0 auto
}

.sp .sp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto
}

.sp .price {
    font: 800 1.25rem var(--hf);
    color: var(--pt);
    white-space: nowrap
}

.sp .price s {
    font: 500 .85rem var(--bf);
    color: var(--muted);
    margin-inline-start: 6px
}

/* --- flavour spotlight --- */
.spot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center
}

.spot-img {
    position: relative;
    padding: 18px
}

.spot-img::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: linear-gradient(140deg, var(--p), var(--s));
    transform: rotate(-3deg)
}

.spot-img img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .22)
}

.spot-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--s) 12%, transparent);
    color: var(--s);
    font: 600 .78rem var(--hf);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 14px
}

.spot-list {
    margin: 20px 0;
    display: grid;
    gap: 10px
}

.spot-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: .95rem
}

.spot-list .i {
    color: var(--pt)
}

.spot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px
}

.spot-tags span {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card);
    font: 600 .82rem var(--hf)
}

.spot .btns {
    align-items: center;
    gap: 12px
}

/* --- testimonials --- */
.revs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.rev {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .3s, box-shadow .3s
}

.rev:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12)
}

.stars {
    display: flex;
    gap: 3px;
    color: #f5a623
}

.stars svg {
    width: 17px;
    height: 17px;
    fill: currentColor
}

.rev blockquote {
    margin: 0;
    font-size: .96rem;
    line-height: 1.65;
    flex: 1
}

.rev-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line)
}

.rev-user .av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--p);
    color: #fff;
    display: grid;
    place-items: center;
    font: 700 .9rem var(--hf);
    flex-shrink: 0
}

.rev-user img.av {
    object-fit: cover;
    border: 2px solid var(--line)
}

.rev:nth-child(2n) .av {
    background: var(--s)
}

.rev-user b {
    display: block;
    font: 700 .95rem var(--hf)
}

.rev-user span {
    font-size: .8rem;
    color: var(--muted)
}

/* --- weekly deals --- */
.deals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.deal {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s
}

.deal:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .14)
}

.deal-top {
    padding: 22px 24px;
    color: #fff;
    background: var(--p)
}

.deal:nth-child(2) .deal-top {
    background: var(--s)
}

.deal:nth-child(3) .deal-top {
    background: color-mix(in srgb, var(--p) 72%, #000)
}

.deal-top b {
    display: block;
    font: 800 2rem var(--hf);
    line-height: 1
}

.deal-top span {
    font: 600 .84rem var(--hf);
    opacity: .9
}

.deal-body {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.deal-body h4 {
    font-size: 1.15rem;
    margin-bottom: 8px
}

.deal-body p {
    color: var(--muted);
    font-size: .92rem;
    margin-bottom: 14px
}

.deal-body ul {
    display: grid;
    gap: 8px;
    margin-bottom: 20px;
    flex: 1
}

.deal-body li {
    display: flex;
    gap: 8px;
    align-items: start;
    font-size: .9rem
}

.deal-body li .i {
    width: 16px;
    height: 16px;
    color: var(--pt);
    margin-top: 4px
}

.deal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.deal-foot .price {
    font: 800 1.25rem var(--hf);
    color: var(--pt)
}

.deal-foot .price s {
    font: 500 .85rem var(--bf);
    color: var(--muted);
    margin-inline-start: 6px
}

/* --- order band --- */
.oband {
    background: linear-gradient(120deg, color-mix(in srgb, var(--p) 85%, #000), var(--p) 55%, color-mix(in srgb, var(--p) 70%, var(--s)));
    color: #fff;
    position: relative;
    overflow: hidden
}

.oband .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1
}

.oband h2 {
    color: #fff
}

.oband p {
    margin: 14px 0 26px;
    opacity: .9;
    max-width: 460px
}

.hours {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--r);
    padding: 26px 28px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px)
}

.hours h3 {
    font-size: 1.15rem;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.hours li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: .92rem;
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.hours li:first-of-type {
    border-top: 0
}

.hours li b {
    font-weight: 600
}

.hours .loc {
    display: flex;
    gap: 8px;
    align-items: start;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .9rem;
    opacity: .92
}

.hours .loc .i {
    margin-top: 3px
}

/* --- home 2 hover polish --- */
.hcoll img {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.hcoll:hover .c1 {
    transform: rotate(-7deg) translateY(-8px)
}

.hcoll:hover .c2 {
    transform: rotate(6deg) translateY(-6px)
}

.hcoll:hover .c3 {
    transform: rotate(-1deg) translateY(-10px)
}

.hcoll .price-chip {
    transition: transform .3s, box-shadow .3s
}

.hcoll .price-chip:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .3)
}

.pcard .ico {
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1)
}

.pcard:hover .ico {
    transform: scale(1.12) rotate(-6deg)
}

.pcard .pnum {
    transition: transform .4s
}

.pcard:hover .pnum {
    transform: scale(1.18)
}

.fstep {
    transition: transform .3s, box-shadow .3s
}

.fstep:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .12)
}

.fstep .fnum {
    transition: transform .35s cubic-bezier(.2, 1.5, .4, 1)
}

.fstep:hover .fnum {
    transform: scale(1.18)
}

.sp .ribbon {
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1)
}

.sp:hover .ribbon {
    transform: translateY(-2px) scale(1.06)
}

.sp .price {
    transition: transform .25s
}

.sp:hover .price {
    transform: scale(1.08)
}

.spot-img {
    transition: transform .4s
}

.spot-img::before {
    transition: transform .5s
}

.spot-img img {
    transition: transform .5s
}

.spot-img:hover {
    transform: translateY(-4px)
}

.spot-img:hover::before {
    transform: rotate(0)
}

.spot-img:hover img {
    transform: scale(1.04)
}

.spot-list .i {
    transition: transform .25s cubic-bezier(.2, 1.5, .4, 1)
}

.spot-list li {
    transition: color .25s
}

.spot-list li:hover {
    color: var(--pt)
}

.spot-list li:hover .i {
    transform: scale(1.3)
}

.spot-tags span {
    transition: transform .25s, border-color .25s, background .25s
}

.spot-tags span:hover {
    transform: translateY(-3px);
    border-color: var(--p);
    background: color-mix(in srgb, var(--p) 8%, var(--card))
}

.stars svg {
    transition: transform .25s cubic-bezier(.2, 1.5, .4, 1)
}

.rev:hover .stars svg {
    transform: scale(1.18)
}

.rev:hover .stars svg:nth-child(2) {
    transition-delay: .05s
}

.rev:hover .stars svg:nth-child(3) {
    transition-delay: .1s
}

.rev:hover .stars svg:nth-child(4) {
    transition-delay: .15s
}

.rev:hover .stars svg:nth-child(5) {
    transition-delay: .2s
}

.rev-user .av {
    transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s
}

.rev:hover .av {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18)
}

.deal-top b {
    margin-bottom: 3px;
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1)
}

.deal:hover .deal-top b {
    transform: scale(1.1)
}

.deal-body li .i {
    transition: transform .25s cubic-bezier(.2, 1.5, .4, 1)
}

.deal:hover .deal-body li .i {
    transform: scale(1.25)
}

.deal-foot .price {
    transition: transform .25s
}

.deal:hover .deal-foot .price {
    transform: scale(1.08)
}

.hours {
    transition: transform .35s, box-shadow .35s, border-color .35s
}

.hours:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .25);
    border-color: rgba(255, 255, 255, .45)
}

/* --- home 2 responsive --- */
@media(max-width:1020px) {

    .promise-grid,
    .specials,
    .revs,
    .deals {
        grid-template-columns: repeat(2, 1fr)
    }

    .flow {
        grid-template-columns: repeat(2, 1fr)
    }

    .fstep:not(:last-child)::after {
        display: none
    }
}

@media(max-width:900px) {

    .h2hero .container,
    .spot,
    .oband .container {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .hcoll {
        max-width: 460px
    }
}

@media(max-width:600px) {

    .promise-grid,
    .flow,
    .specials,
    .revs,
    .deals {
        grid-template-columns: 1fr
    }

    .hstats {
        gap: 14px 24px
    }

    .deal-foot,
    .sp .sp-foot {
        flex-wrap: wrap
    }
}

/* ============================================================
   ABOUT PAGE — all classes below are used only by pages/about.html
   ============================================================ */

/* --- about hero --- */
.abhero {
    text-align: center;
    padding: clamp(48px, 7vw, 88px) 0;
    background:
        linear-gradient(120deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .58) 55%, rgba(0, 0, 0, .7)),
        url("../images/hero2.avif") center 30%/cover no-repeat,
        var(--alt);
    color: #fff;
    position: relative;
    overflow: hidden
}

.abhero::before,
.abhero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .16;
    pointer-events: none
}

.abhero::before {
    width: 340px;
    height: 340px;
    background: var(--p);
    top: -120px;
    inset-inline-start: -80px
}

.abhero::after {
    width: 300px;
    height: 300px;
    background: var(--s);
    bottom: -140px;
    inset-inline-end: -60px
}

.abhero .container {
    position: relative;
    z-index: 1
}

.ab-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    font: 600 .8rem var(--hf);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 18px
}

.abhero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05
}

.abhero h1 em {
    font-style: normal;
    color: #6fe3d8
}

.abhero .lead {
    margin: 20px auto 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .85)
}

.abchips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px
}

.abchips span {
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    font: 600 .85rem var(--hf);
    transition: transform .25s, background .25s, border-color .25s
}

.abchips span:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .55)
}

/* --- our story --- */
.story-media {
    position: relative;
    aspect-ratio: 1/.9;
    max-width: 520px;
    width: 100%;
    margin-inline: auto
}

.story-media img {
    position: absolute;
    object-fit: cover;
    border-radius: 20px;
    border: 5px solid var(--bg);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .22)
}

.story-media .s1 {
    width: 58%;
    aspect-ratio: 4/3;
    top: 4%;
    inset-inline-start: 0;
    z-index: 1;
    transform: rotate(-4deg)
}

.story-media .s2 {
    width: 52%;
    aspect-ratio: 1;
    bottom: 4%;
    inset-inline-end: 0;
    z-index: 2;
    transform: rotate(3deg)
}

.story-media .stamp {
    position: absolute;
    z-index: 3;
    bottom: 2%;
    inset-inline-start: 6%;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--s);
    color: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    font: 800 .95rem/1.2 var(--hf);
    transform: rotate(-8deg);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .28)
}

.story-media .stamp small {
    display: block;
    font: 600 .68rem var(--bf);
    opacity: .9;
    letter-spacing: .06em;
    text-transform: uppercase
}

.story {
    max-width: 540px;
    margin-inline: auto
}

.story h2 {
    text-wrap: balance;
    margin-bottom: 8px
}

.story p {
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.75
}

.story p:first-of-type {
    margin-top: 16px
}

.story p strong {
    color: var(--text)
}

.sstats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 26px
}

.sstats div {
    flex: 1 1 130px;
    text-align: start;
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card)
}

.sstats b {
    display: block;
    font: 800 1.4rem var(--hf);
    color: var(--pt);
    line-height: 1.2
}

.sstats span {
    font-size: .8rem;
    color: var(--muted)
}

.sign {
    margin-top: 26px;
    font: 700 1.35rem var(--hf);
    color: var(--pt)
}

.sign small {
    display: block;
    font: 500 .82rem var(--bf);
    color: var(--muted);
    margin-top: 2px
}

/* --- journey timeline --- */
.tl {
    position: relative;
    max-width: 860px;
    margin-inline: auto
}

.tl::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(var(--p), var(--s))
}

.tl-item {
    position: relative;
    width: 50%;
    padding-bottom: 34px;
    box-sizing: border-box
}

.tl-item:last-child {
    padding-bottom: 0
}

.tl-item:nth-child(odd) {
    margin-inline-start: 50%;
    padding-inline-start: 48px
}

.tl-item:nth-child(even) {
    padding-inline-end: 48px
}

.tl-item::before {
    content: "";
    position: absolute;
    top: 22px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--bg);
    border: 4px solid var(--p);
    box-sizing: border-box;
    z-index: 1
}

.tl-item:nth-child(odd)::before {
    inset-inline-start: -8.5px
}

.tl-item:nth-child(even)::before {
    inset-inline-end: -8.5px
}

.tl-item:nth-child(2n)::before {
    border-color: var(--s)
}

.tl-item::after {
    content: "";
    position: absolute;
    top: 29px;
    height: 2px;
    width: 39px;
    background: color-mix(in srgb, var(--p) 45%, var(--line))
}

.tl-item:nth-child(odd)::after {
    inset-inline-start: 9px
}

.tl-item:nth-child(even)::after {
    inset-inline-end: 9px;
    background: color-mix(in srgb, var(--s) 45%, var(--line))
}

.tl-item .card {
    padding: 20px 24px;
    transition: transform .3s, box-shadow .3s
}

.tl-item .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12)
}

.tl-year {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--p);
    color: #fff;
    font: 700 .8rem var(--hf);
    margin-bottom: 8px
}

.tl-item:nth-child(2n) .tl-year {
    background: var(--s)
}

.tl-item h4 {
    font-size: 1.12rem;
    margin-bottom: 6px
}

.tl-item p {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.55
}

/* --- team --- */
.team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.tc {
    padding: 30px 24px;
    text-align: center;
    transition: transform .3s, box-shadow .3s
}

.tc:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .13)
}

.tci {
    width: 112px;
    height: 112px;
    margin: 0 auto 16px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(140deg, var(--p), var(--s));
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1)
}

.tc:hover .tci {
    transform: scale(1.07) rotate(-3deg)
}

.tci img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card)
}

.tc h4 {
    font-size: 1.15rem
}

.tc .role {
    display: block;
    color: var(--s);
    font: 600 .85rem var(--hf);
    margin: 4px 0 10px
}

.tc p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55
}

/* --- values --- */
.vtiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.vtile {
    overflow: hidden;
    padding: 0;
    transition: transform .3s, box-shadow .3s
}

.vtile:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .13)
}

.vtile .vth {
    padding: 22px 24px;
    background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 68%, #000));
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px
}

.vtile:nth-child(2n) .vth {
    background: linear-gradient(135deg, var(--s), color-mix(in srgb, var(--s) 68%, #000))
}

.vtile .vth .i {
    width: 24px;
    height: 24px
}

.vtile .vth h4 {
    font-size: 1.05rem
}

.vtile .vtb {
    padding: 18px 24px 24px
}

.vtile .vtb p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55
}

/* --- farm to bowl --- */
.farm {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center
}

.farm-img {
    position: relative
}

.farm-img img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 22px 44px rgba(0, 0, 0, .2)
}

.farm-chip {
    position: absolute;
    bottom: 18px;
    inset-inline-start: 18px;
    background: var(--card);
    color: var(--text);
    border-radius: 14px;
    padding: 10px 16px;
    font: 700 .88rem var(--hf);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    gap: 8px
}

.farm-chip .i {
    color: var(--pt)
}

.farm-list {
    display: grid;
    gap: 18px;
    margin: 22px 0 28px
}

.farm-list li {
    display: flex;
    gap: 14px
}

.farm-list .i {
    color: var(--pt);
    margin-top: 4px
}

.farm-list b {
    display: block;
    font: 700 1rem var(--hf);
    margin-bottom: 2px
}

.farm-list span {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55
}

/* --- press --- */
.press {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px
}

.pr {
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .3s, box-shadow .3s
}

.pr:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .12)
}

.pr .qmark {
    font: 800 3rem var(--hf);
    color: color-mix(in srgb, var(--s) 32%, transparent);
    line-height: .5;
    height: 20px
}

.pr blockquote {
    margin: 0;
    font-size: .96rem;
    line-height: 1.65;
    flex: 1
}

.pr .pub {
    font: 800 1.05rem var(--hf);
    color: var(--pt);
    letter-spacing: -.01em
}

.pr .date {
    font-size: .8rem;
    color: var(--muted)
}

/* --- about hover polish --- */
.story-media img {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.story-media:hover .s1 {
    transform: rotate(-6deg) translateY(-8px)
}

.story-media:hover .s2 {
    transform: rotate(5deg) translateY(-6px)
}

.story-media .stamp {
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), box-shadow .35s
}

.story-media:hover .stamp {
    transform: rotate(-2deg) scale(1.1);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .32)
}

.sstats div {
    transition: transform .25s, border-color .25s, box-shadow .25s
}

.sstats div:hover {
    transform: translateY(-3px);
    border-color: var(--p);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .08)
}

.tl-item::before {
    transition: transform .3s cubic-bezier(.2, 1.5, .4, 1)
}

.tl-item:hover::before {
    transform: scale(1.3)
}

.tl-year {
    transition: transform .25s cubic-bezier(.2, 1.4, .4, 1)
}

.tl-item .card:hover .tl-year {
    transform: scale(1.1)
}

.farm-img img {
    transition: transform .5s
}

.farm-img:hover img {
    transform: scale(1.04)
}

.farm-chip {
    transition: transform .3s, box-shadow .3s
}

.farm-img:hover .farm-chip {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28)
}

.farm-list li {
    transition: color .25s
}

.farm-list li .i {
    transition: transform .25s cubic-bezier(.2, 1.5, .4, 1)
}

.farm-list li:hover b {
    color: var(--pt)
}

.farm-list li:hover .i {
    transform: scale(1.3)
}

.pr .qmark {
    transition: transform .3s, color .3s
}

.pr:hover .qmark {
    transform: scale(1.25) translateY(-4px);
    color: color-mix(in srgb, var(--s) 55%, transparent)
}

.pr .pub {
    transition: color .25s
}

.pr:hover .pub {
    color: var(--s)
}

.tc:hover .role {
    color: var(--pt)
}

.tc .role {
    transition: color .25s
}

/* --- about cta --- */
.abcta {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    border-radius: 28px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
    transition: transform .35s, box-shadow .35s
}

.abcta:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 60px rgba(0, 0, 0, .22)
}

.abcta-l {
    padding: clamp(32px, 5vw, 56px);
    background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 62%, #000));
    display: flex;
    flex-direction: column;
    justify-content: center
}

.abcta-l h2 {
    color: #fff
}

.abcta-l p {
    margin: 14px 0 28px;
    opacity: .9;
    max-width: 460px
}

.abcta-r {
    padding: clamp(32px, 5vw, 56px);
    background: linear-gradient(135deg, var(--s), color-mix(in srgb, var(--s) 62%, #000));
    display: flex;
    flex-direction: column;
    justify-content: center
}

.abcta-r h3 {
    font-size: 1.3rem;
    margin-bottom: 14px
}

.abcta-r li {
    display: flex;
    gap: 10px;
    align-items: start;
    padding: 8px 0;
    font-size: .94rem
}

.abcta-r li .i {
    margin-top: 3px;
    flex-shrink: 0
}

.abcta-r li a {
    color: #fff;
    transition: opacity .2s
}

.abcta-r li a:hover {
    opacity: .8
}

.abcta-r .btn {
    align-self: flex-start;
    margin-top: 18px
}

/* --- about responsive --- */
@media(max-width:1020px) {

    .vtiles {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:900px) {

    .farm {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .story-media {
        max-width: 460px
    }

    .story {
        max-width: none
    }

    .abcta {
        grid-template-columns: 1fr
    }
}

/* journey timeline: single left-aligned rail on tablets and below (must come
   after the desktop .tl-item rules above to win the cascade) */
@media(max-width:900px) {

    .tl {
        padding-inline-start: 18px
    }

    .tl::before {
        left: 10px;
        right: auto;
        transform: none
    }

    .tl-item,
    .tl-item:nth-child(odd),
    .tl-item:nth-child(even) {
        width: 100%;
        margin-inline-start: 0;
        padding-inline-start: 38px;
        padding-inline-end: 0
    }

    .tl-item::before,
    .tl-item:nth-child(odd)::before,
    .tl-item:nth-child(even)::before {
        left: -30px;
        right: auto
    }

    .tl-item::after {
        display: none
    }

    .tl-item .card {
        padding: 18px 20px
    }
}

@media(max-width:600px) {
    .team,
    .vtiles,
    .press {
        grid-template-columns: 1fr
    }

    .sstats {
        gap: 10px
    }
}

/* --- menu hero --- */
.mhero {
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 9vw, 108px) 0 clamp(56px, 7vw, 88px);
    color: #fff;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .38) 32%, rgba(0, 0, 0, .68)),
        radial-gradient(680px 340px at 12% 8%, color-mix(in srgb, var(--p) 42%, transparent), transparent 60%),
        radial-gradient(760px 380px at 90% -10%, color-mix(in srgb, var(--s) 38%, transparent), transparent 62%),
        radial-gradient(900px 420px at 50% 118%, color-mix(in srgb, var(--p) 30%, transparent), transparent 65%),
        radial-gradient(520px 300px at 78% 62%, rgba(111, 227, 216, .28), transparent 62%),
        linear-gradient(115deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .48) 44%, rgba(0, 0, 0, .7)),
        linear-gradient(200deg, color-mix(in srgb, var(--p) 35%, transparent), transparent 55%),
        url("../images/hero4.avif") center 35%/cover no-repeat,
        var(--bg)
}

.mhero::before,
.mhero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px)
}

.mhero::before {
    width: min(38vw, 510px);
    aspect-ratio: 1;
    right: -10vw;
    bottom: -38%;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 26px rgba(255, 255, 255, .05), 0 0 0 72px rgba(255, 255, 255, .035);
}

.mhero::after {
    width: 14px;
    height: 14px;
    left: 13%;
    top: 24%;
    background: var(--s);
    box-shadow: 210px 92px 0 -3px var(--p), 560px -36px 0 -5px rgba(255, 255, 255, .7);
}

.mhero .container {
    position: relative;
    z-index: 1
}

.mbadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 20px
}

.mhero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.3rem);
    max-width: 17ch;
    margin-inline: auto
}

.mhero .lead {
    color: rgba(255, 255, 255, .94);
    max-width: 56ch;
    margin: 16px auto 0
}

.mhero-notes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px auto 0;
    max-width: 750px
}

.mhero-notes span {
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .2);
    color: rgba(255, 255, 255, .88);
    font-size: .78rem;
    backdrop-filter: blur(8px)
}

.mhero-notes strong {
    color: #fff;
    font-weight: 800
}

.mjumps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 30px
}

.mjumps a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    transition: transform .25s, background .25s, border-color .25s
}

.mjumps a:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .27);
    border-color: #fff
}

.mhero h1 em {
    font-style: normal;
    color: #6fe3d8
}

/* --- browse by protein --- */
.mgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.mtile {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.mtile::after {
    content: "";
    position: absolute;
    inset: auto 20px 0;
    height: 3px;
    border-radius: 99px 99px 0 0;
    background: linear-gradient(90deg, var(--p), var(--s));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease
}

.mtile:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    border-color: color-mix(in srgb, var(--p) 40%, var(--line))
}

.mtile:hover::after {
    transform: scaleX(1)
}

.mtile .ti {
    aspect-ratio: 16/10;
    overflow: hidden
}

.mtile .ti img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.mtile:hover .ti img {
    transform: scale(1.07)
}

.mtile .tb {
    padding: 18px 20px 20px
}

.mtile .tb .r1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px
}

.mtile .tb h3 {
    font-size: 1.15rem
}

.mtile .tb .from {
    font-family: var(--hf);
    font-weight: 800;
    color: var(--pt);
    white-space: nowrap
}

.mtile .tb p {
    color: var(--muted);
    font-size: .87rem;
    margin-top: 6px
}

.mtile .tb .cnt {
    display: inline-block;
    margin-top: 12px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pt);
    background: color-mix(in srgb, var(--p) 12%, transparent);
    padding: 5px 12px;
    border-radius: 999px
}

/* --- price lists --- */
.mcols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start
}

.mgroup {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(20px, 3vw, 28px);
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.mgroup::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 180px;
    height: 180px;
    top: -118px;
    right: -75px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--p) 12%, transparent);
    transition: transform .45s ease, background .3s
}

.mgroup:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .1);
    border-color: color-mix(in srgb, var(--p) 46%, var(--line))
}

.mgroup:hover::before {
    transform: scale(1.25);
    background: color-mix(in srgb, var(--p) 17%, transparent)
}

.mcols .mgroup:nth-child(2)::before,
.sgrid .mgroup:nth-child(2)::before {
    background: color-mix(in srgb, var(--s) 13%, transparent)
}

.mcols .mgroup:nth-child(3)::before,
.sgrid .mgroup:nth-child(3)::before {
    background: color-mix(in srgb, #8bcf65 15%, transparent)
}

.mcols .mgroup:nth-child(2) .gi,
.sgrid .mgroup:nth-child(2) .gi {
    color: var(--s);
    background: color-mix(in srgb, var(--s) 15%, transparent)
}

.mcols .mgroup:nth-child(3) .gi,
.sgrid .mgroup:nth-child(3) .gi {
    color: #58a937;
    background: color-mix(in srgb, #8bcf65 18%, transparent)
}

.mgroup h3 {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px
}

.mgroup h3 .gi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--p) 14%, transparent);
    color: var(--pt)
}

.mgroup .gsub {
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 12px
}

.mrow {
    padding: 12px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent)
}

.mrow:first-of-type {
    padding-top: 16px
}

.mrow:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.mr1 {
    display: flex;
    align-items: baseline;
    gap: 10px
}

.mr1 .nm {
    font-weight: 700;
    font-size: .98rem
}

.mr1 .dots {
    flex: 1 0 18px;
    border-bottom: 2px dotted color-mix(in srgb, var(--muted) 45%, transparent);
    transform: translateY(-4px)
}

.mr1 .pr {
    font-family: var(--hf);
    font-weight: 800;
    color: var(--pt);
    white-space: nowrap
}

.mrow .ds {
    color: var(--muted);
    font-size: .84rem;
    margin-top: 5px;
    line-height: 1.5
}

/* --- bases & add-ons --- */
.msplit {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: start
}

.stitle {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 18px 0 6px
}

.mgroup h3 + .stitle {
    margin-top: 14px
}

.apill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    font-size: .9rem;
    font-weight: 600;
    margin-top: 10px;
    transition: transform .25s, border-color .25s, box-shadow .25s
}

.apill:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--p) 45%, var(--line));
    box-shadow: 0 8px 18px rgba(0, 0, 0, .07)
}

.apill .prc {
    color: var(--pt);
    font-family: var(--hf);
    font-weight: 800;
    white-space: nowrap
}

/* --- sides & sips --- */
.sgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start
}

.slist li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    font-size: .93rem
}

.slist li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.slist .prc {
    color: var(--pt);
    font-family: var(--hf);
    font-weight: 700;
    white-space: nowrap
}

/* --- kitchen video --- */
.vgrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px, 4vw, 44px);
    align-items: center
}

.vidframe {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
    background: #000;
    transition: transform .35s, box-shadow .35s
}

.vidframe:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 56px rgba(0, 0, 0, .22)
}

.vidframe video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: #000
}

.vidcap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--muted);
    margin-top: 12px;
    text-align: center
}

.vidcap b {
    color: var(--pt);
    direction: ltr
}

.vcopy h2 {
    margin-bottom: 12px
}

.vlist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    font-size: .95rem
}

.vlist li .i {
    color: var(--pt);
    margin-top: 3px;
    flex-shrink: 0
}

.vcopy .btns {
    margin-top: 24px
}

/* --- dietary key --- */
.dsplit {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 24px;
    align-items: stretch
}

.dkeys {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.dkey {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.dkey:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .1);
    border-color: color-mix(in srgb, var(--p) 40%, var(--line))
}

.dkey .di {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--p) 13%, transparent);
    color: var(--pt);
    margin-bottom: 14px;
    transition: transform .3s cubic-bezier(.2, 1.5, .4, 1)
}

.dkey:hover .di {
    transform: scale(1.12)
}

.dkey h4 {
    font-size: 1rem;
    margin-bottom: 6px
}

.dkey p {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55
}

.dkey .vg {
    vertical-align: -2.5px
}

.allerg {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(22px, 3vw, 30px);
    display: flex;
    flex-direction: column
}

.allerg h3 {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px
}

.allerg h3 .gi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--s) 14%, transparent);
    color: var(--s)
}

.allerg > p {
    color: var(--muted);
    font-size: .88rem;
    margin-bottom: 16px
}

.atchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.atchip {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--s) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--s) 28%, transparent);
    font-size: .83rem;
    font-weight: 600;
    transition: transform .2s, background .2s
}

.atchip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--s) 18%, transparent)
}

.allerg .note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: .84rem;
    color: var(--muted);
    margin-top: auto;
    padding-top: 18px
}

.allerg .note .i {
    color: var(--pt);
    margin-top: 2px;
    flex-shrink: 0
}

.allerg .note a {
    color: var(--pt);
    font-weight: 700
}


/* --- menu responsive --- */
@media(max-width:1020px) {

    .mcols {
        grid-template-columns: 1fr
    }

    .mgrid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:900px) {

    .msplit,
    .vgrid,
    .dsplit {
        grid-template-columns: 1fr
    }

    .vcopy {
        order: -1
    }
}

@media(max-width:768px) {

    .sgrid {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {

    .mgrid,
    .dkeys {
        grid-template-columns: 1fr
    }

    .mjumps a {
        flex: 1 1 auto;
        justify-content: center
    }

    .mhero-notes {
        gap: 6px
    }

    .mhero-notes span {
        font-size: .72rem;
        padding: 7px 10px
    }
}

/* --- nutri hero --- */
.nhero {
    text-align: center;
    padding: clamp(70px, 9vw, 104px) 0;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .38) 32%, rgba(0, 0, 0, .68)),
        radial-gradient(680px 340px at 12% 8%, color-mix(in srgb, var(--p) 42%, transparent), transparent 60%),
        radial-gradient(760px 380px at 90% -10%, color-mix(in srgb, var(--s) 38%, transparent), transparent 62%),
        radial-gradient(900px 420px at 50% 118%, color-mix(in srgb, var(--p) 30%, transparent), transparent 65%),
        radial-gradient(520px 300px at 78% 62%, rgba(111, 227, 216, .28), transparent 62%),
        linear-gradient(135deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .7)),
        linear-gradient(200deg, color-mix(in srgb, var(--p) 35%, transparent), transparent 55%),
        url("../images/hero1.avif") center 30%/cover no-repeat,
        var(--bg)
}

.nhero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    max-width: 18ch;
    margin-inline: auto
}

.nhero .lead {
    color: rgba(255, 255, 255, .92);
    max-width: 54ch;
    margin: 16px auto 0
}

.nstats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px
}
.nhero h1 em {
    font-style: normal;
    color: #6fe3d8
}


.nstat {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 18px;
    padding: 16px 26px;
    min-width: 150px;
    backdrop-filter: blur(6px);
    transition: transform .25s, background .25s
}

.nstat:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .22)
}

.nstat b {
    display: block;
    font: 800 1.55rem var(--hf)
}

.nstat span {
    display: block;
    margin-top: 4px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    opacity: .85
}

/* --- macro rings --- */
.nrings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.nring-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px 22px;
    text-align: center;
    transition: transform .3s, box-shadow .3s
}

.nring-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
}

.nring {
    position: relative;
    width: 116px;
    aspect-ratio: 1;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--rc, var(--p)) calc(var(--v, 50) * 1%), color-mix(in srgb, var(--line) 55%, transparent) 0);
    transition: transform .35s
}

.nring-card:hover .nring {
    transform: scale(1.07)
}

.nring::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background: var(--card)
}

.nring b {
    position: relative;
    z-index: 1;
    font: 800 1.3rem var(--hf)
}

.nring-card h3 {
    font-size: 1.02rem
}

.nring-card p {
    color: var(--muted);
    font-size: .85rem;
    margin-top: 6px
}

/* --- nutrition table --- */
.nwrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--card);
    -webkit-overflow-scrolling: touch
}

.ntable {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    font-size: .9rem
}

.ntable thead th {
    background: color-mix(in srgb, var(--p) 10%, var(--card));
    color: var(--pt);
    font: 700 .76rem var(--hf);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 14px 16px;
    text-align: start;
    white-space: nowrap
}

.ntable td {
    padding: 13px 16px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 85%, transparent)
}

.ntable tbody tr {
    transition: background .2s
}

.ntable tbody tr:hover {
    background: color-mix(in srgb, var(--p) 5%, transparent)
}

.ntable .bn {
    font-weight: 700
}

.ntable .kc {
    font-family: var(--hf);
    font-weight: 800;
    color: var(--s)
}

.ntable .pc {
    font-weight: 700;
    color: var(--pt)
}

.ntable .tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--p) 12%, transparent);
    color: var(--pt);
    margin-inline-start: 6px
}

.tnote {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: .82rem;
    color: var(--muted);
    margin-top: 14px
}

.tnote .i {
    color: var(--pt);
    margin-top: 2px;
    flex-shrink: 0
}

.tnote a {
    color: var(--pt);
    font-weight: 700
}

/* --- nutri video --- */
.nvwrap {
    max-width: 900px;
    margin-inline: auto
}

.nvfacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 26px
}

.nvfact {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    transition: transform .25s, box-shadow .25s
}

.nvfact:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .09)
}

.nvfact .i {
    color: var(--pt)
}

.nvfact b {
    display: block;
    margin: 8px 0 4px;
    font-size: .95rem
}

.nvfact p {
    color: var(--muted);
    font-size: .82rem
}

/* --- smarter swaps --- */
.nswaps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.nswap {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px 22px;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.nswap:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    border-color: color-mix(in srgb, var(--p) 45%, var(--line))
}

.nswap .save {
    align-self: flex-start;
    font: 800 .78rem var(--hf);
    color: var(--pt);
    background: color-mix(in srgb, var(--p) 14%, transparent);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px
}

.nswap h4 {
    font-size: 1rem;
    margin-bottom: 8px
}

.nswap .from,
.nswap .to {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: .88rem;
    padding: 5px 0
}

.nswap .from {
    color: var(--muted)
}

.nswap .from .i {
    color: color-mix(in srgb, var(--s) 70%, var(--muted));
    flex-shrink: 0
}

.nswap .to {
    font-weight: 700
}

.nswap .to .i {
    color: var(--pt);
    flex-shrink: 0
}

.nswap .why {
    color: var(--muted);
    font-size: .83rem;
    margin-top: 10px;
    flex: 1
}

/* --- clean label --- */
.nlab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
}

.nlab-col {
    border-radius: 24px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid var(--line)
}

.nlab-col.yes {
    background: color-mix(in srgb, var(--p) 7%, var(--card));
    border-color: color-mix(in srgb, var(--p) 30%, var(--line))
}

.nlab-col.no {
    background: color-mix(in srgb, var(--s) 6%, var(--card));
    border-color: color-mix(in srgb, var(--s) 28%, var(--line))
}

.nlab-col h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    margin-bottom: 4px
}

.nlab-col .gsub {
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 12px
}

.nlab-col .gi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.nlab-col.yes .gi {
    background: color-mix(in srgb, var(--p) 15%, transparent);
    color: var(--pt)
}

.nlab-col.no .gi {
    background: color-mix(in srgb, var(--s) 15%, transparent);
    color: var(--s)
}

.nlab-col li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 0;
    font-size: .93rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent)
}

.nlab-col li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.nlab-col.yes li .i {
    color: var(--pt);
    margin-top: 3px;
    flex-shrink: 0
}

.nlab-col.no li .i {
    color: var(--s);
    margin-top: 3px;
    flex-shrink: 0
}

.nlab-col.no li span {
    color: var(--muted)
}

.nlab-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 26px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px 24px
}

.nlab-foot p {
    color: var(--muted);
    font-size: .9rem;
    max-width: 58ch
}

/* --- nutrition responsive --- */
@media(max-width:1020px) {

    .nrings,
    .nswaps {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:900px) {

    .nlab {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {

    .nrings,
    .nswaps,
    .nvfacts {
        grid-template-columns: 1fr
    }

    .nstat {
        flex: 1 1 100%
    }
}

/* --- contact hero --- */
.chero {
    text-align: center;
    padding: clamp(70px, 9vw, 104px) 0;
    color: #fff;
    background:
        radial-gradient(800px 320px at 50% -10%, rgba(255, 255, 255, .12), transparent 65%),
        linear-gradient(135deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .7)),
        url("../images/h-7.jpg") center 40%/cover no-repeat,
        var(--bg)
}

.chero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    max-width: 17ch;
    margin-inline: auto
}

.chero .lead {
    color: rgba(255, 255, 255, .92);
    max-width: 54ch;
    margin: 16px auto 0
}

.chero .btn {
    justify-content: center;
    margin-top: 28px
}
.chero h1 em {
    font-style: normal;
    color: #6fe3d8
}


/* --- order form --- */
.cgrid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 28px;
    align-items: start
}

.cform {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(24px, 3.5vw, 36px)
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.ffield {
    margin-top: 18px
}

.frow .ffield {
    margin-top: 0
}

.ffield label {
    display: block;
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: 7px
}

.ffield label .req {
    color: var(--s)
}

.ffield input,
.ffield select,
.ffield textarea {
    width: 100%;
    font: inherit;
    font-size: .93rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s
}

/* Custom select keeps its menu inside the contact form at every viewport size. */
.custom-select { position: relative; width: 100% }
.custom-select-toggle {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .93rem;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s
}
.custom-select-toggle:focus-visible {
    outline: 0;
    border-color: var(--p);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 16%, transparent)
}
.custom-select-toggle svg { width: 18px; height: 18px; margin-inline-start: auto; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s }
.custom-select.open .custom-select-toggle { border-color: var(--p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--p) 12%, transparent) }
.custom-select.open .custom-select-toggle svg { transform: rotate(180deg) }
.custom-select-menu {
    position: absolute;
    z-index: 20;
    inset: calc(100% + 6px) 0 auto;
    display: none;
    width: 100%;
    max-height: 210px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .16)
}
.custom-select.open .custom-select-menu { display: grid }
.custom-select-option {
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    text-align: start;
    cursor: pointer
}
.custom-select-option:hover, .custom-select-option:focus-visible, .custom-select-option[aria-selected=true] { background: color-mix(in srgb, var(--p) 12%, transparent); color: var(--pt); outline: 0 }

.ffield select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 46px;
    line-height: 1.3;
    padding-inline-end: 42px;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer
}

[dir=rtl] .ffield select {
    background-position: left 14px center
}

.ffield input:focus,
.ffield select:focus,
.ffield textarea:focus {
    outline: none;
    border-color: var(--p);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 15%, transparent)
}

.ffield textarea {
    resize: vertical;
    min-height: 120px
}

.check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 18px;
    font-size: .88rem;
    color: var(--muted)
}

.check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--p);
    flex-shrink: 0
}

.cform .btn {
    margin-top: 22px
}

.fnote {
    font-size: .78rem;
    color: var(--muted);
    margin-top: 12px
}

.ctips {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(22px, 3vw, 30px)
}

.ctips h3 {
    font-size: 1.15rem;
    margin-bottom: 4px
}

.ctips .gsub {
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 8px
}

.cstep {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    font-size: .9rem
}

.cstep:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.cstep .n {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--p) 13%, transparent);
    color: var(--pt);
    font: 800 .82rem var(--hf);
    flex-shrink: 0
}

.cstep b {
    display: block;
    margin-bottom: 2px
}

.cstep p {
    color: var(--muted);
    font-size: .84rem
}

/* --- visit us --- */
.cvisit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start
}

.vcard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(22px, 3vw, 28px);
    transition: transform .3s, box-shadow .3s
}

.vcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .1)
}

.vcard h3 {
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px
}

.vcard .gi {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--p) 14%, transparent);
    color: var(--pt);
    flex-shrink: 0
}

.vcard .gsub {
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 10px
}

.hrs li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    font-size: .9rem
}

.hrs li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.hrs .day {
    color: var(--muted)
}

.hrs .time {
    font-weight: 700
}

.hrs .closed {
    color: var(--s);
    font-weight: 700
}

.vinfo li {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    font-size: .9rem;
    border-bottom: 1px dashed color-mix(in srgb, var(--line) 85%, transparent)
}

.vinfo li:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.vinfo li .i {
    color: var(--pt);
    margin-top: 3px;
    flex-shrink: 0
}

.vinfo li span {
    color: var(--muted)
}

.vinfo li b {
    color: var(--text)
}

/* --- map --- */
.cmap {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 24px;
    align-items: stretch
}

.mapbox {
    min-height: 380px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .06);
    position: relative
}

.mapbox iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0
}

.mcard {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(22px, 3vw, 28px);
    display: flex;
    flex-direction: column
}

.mcard h3 {
    font-size: 1.15rem;
    margin-bottom: 4px
}

.mcard .gsub {
    color: var(--muted);
    font-size: .84rem;
    margin-bottom: 14px
}

.mcard .addr {
    font-size: .93rem;
    line-height: 1.6;
    margin-bottom: 16px
}

.tchips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px
}

.tchip {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--p) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--p) 26%, transparent);
    font-size: .8rem;
    font-weight: 600;
    transition: transform .2s, background .2s
}

.tchip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--p) 17%, transparent)
}

.mcard .btn {
    align-self: flex-start;
    margin-top: auto
}

/* --- contact methods --- */
.cmeth {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px
}

.cmeth-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 22px;
    transition: transform .3s, box-shadow .3s, border-color .3s
}

.cmeth-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    border-color: color-mix(in srgb, var(--p) 45%, var(--line))
}

.cmeth-card .di {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--p) 13%, transparent);
    color: var(--pt);
    margin-bottom: 14px;
    transition: transform .3s cubic-bezier(.2, 1.5, .4, 1)
}

.cmeth-card:hover .di {
    transform: scale(1.12) rotate(-6deg)
}

.cmeth-card h4 {
    font-size: 1.02rem;
    margin-bottom: 6px
}

.cmeth-card p {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
    flex: 1;
    margin-bottom: 16px
}

.cmeth-card a {
    align-self: flex-start;
    font-size: .88rem;
    font-weight: 700;
    color: var(--pt);
    overflow-wrap: anywhere
}

.cmeth-card a:hover {
    text-decoration: underline
}

/* --- contact cta --- */
.ccta {
    border-radius: 28px;
    padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
    text-align: center;
    color: #fff;
    background:
        radial-gradient(700px 260px at 50% -20%, rgba(255, 255, 255, .14), transparent 65%),
        linear-gradient(135deg, #06322e, var(--p) 140%);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16)
}

.ccta h2 {
    color: #fff
}

.ccta p {
    color: rgba(255, 255, 255, .9);
    max-width: 52ch;
    margin: 12px auto 0
}

.ccta .tel {
    display: inline-block;
    margin-top: 26px;
    font: 800 clamp(1.7rem, 4.5vw, 2.6rem) var(--hf);
    color: #ffe08a;
    text-decoration: none;
    transition: transform .25s, opacity .25s
}

.ccta .tel:hover {
    transform: scale(1.04);
    opacity: .9
}

.ccta .btns {
    justify-content: center;
    margin-top: 24px
}

.ccta .hours {
    font-size: .85rem;
    color: rgba(255, 255, 255, .75)
}

/* --- contact responsive --- */
@media(max-width:1020px) {

    .cmeth {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:900px) {

    .cgrid,
    .cmap {
        grid-template-columns: 1fr
    }

    .cvisit {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {

    .frow,
    .cmeth {
        grid-template-columns: 1fr
    }
}

@media(max-width:768px) {

    .frow {
        grid-template-columns: 1fr;
        gap: 0
    }

    .frow .ffield {
        margin-top: 18px
    }

    .ffield select {
        font-size: .95rem;
        background-position: right 14px center
    }
}

/* authentication pages */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.auth-header {
    position: relative;
    top: auto
}

.auth-header nav .container {
    height: 82px
}

.auth-tools {
    display: flex;
    align-items: center;
    gap: 9px
}

.auth-main {
    flex: 1;
    display: grid;
    place-items: center;
    padding: clamp(34px, 6vw, 72px) 20px;
    background: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--p) 9%, transparent), transparent 24rem), radial-gradient(circle at 92% 88%, color-mix(in srgb, var(--s) 8%, transparent), transparent 26rem)
}

.auth-card {
    width: min(100%, 480px);
    padding: clamp(28px, 5vw, 44px);
    border-radius: 28px;
    box-shadow: 0 18px 46px rgba(7, 49, 46, .13)
}

.auth-card--signup {
    width: min(100%, 530px)
}

.auth-intro {
    text-align: center;
    margin-bottom: 28px
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--pt);
    font: 700 .78rem var(--hf);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px
}

.auth-kicker::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--s)
}

.auth-intro h1 {
    font-size: clamp(2rem, 5vw, 2.65rem)
}

.auth-intro p {
    color: var(--muted);
    margin-top: 9px
}

.auth-form {
    display: grid;
    gap: 18px
}

.auth-field {
    display: grid;
    gap: 7px
}

.auth-field label {
    color: var(--muted);
    font: 700 .74rem var(--hf);
    letter-spacing: .075em;
    text-transform: uppercase
}

.auth-input {
    position: relative
}

.auth-input input {
    width: 100%;
    min-height: 52px;
    padding: 13px 48px 13px 15px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    font: 500 1rem var(--bf);
    outline: none;
    transition: border-color .2s, box-shadow .2s
}

.auth-input input::placeholder { color: color-mix(in srgb, var(--muted) 58%, transparent) }
.auth-input input:focus { border-color: var(--p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 14%, transparent) }

.password-toggle {
    position: absolute;
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer
}

.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--muted);
    font-size: .9rem
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer
}

.auth-check input { appearance: none; width: 17px; height: 17px; margin: 0; border: 1px solid var(--muted); border-radius: 4px; display: grid; place-content: center; cursor: pointer }
.auth-check input::after { content: ''; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .15s }
.auth-check input:checked { background: var(--p); border-color: var(--p) }
.auth-check input:checked::after { transform: rotate(-45deg) scale(1) }

.auth-link { color: var(--s); font-weight: 600 }
.auth-link:hover { text-decoration: underline }
.auth-submit { width: 100%; margin-top: 2px }

.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 700 .7rem var(--hf); letter-spacing: .08em; text-transform: uppercase; margin: 5px 0 1px }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line) }

.social-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.social-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 68px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); font: 600 .78rem var(--bf); cursor: pointer; transition: .2s }
.social-button svg { width: 20px; height: 20px; display: block }
.social-button span { line-height: 1 }
.social-button:hover { border-color: var(--p); transform: translateY(-2px) }
.social-button.apple { color: var(--text) }

.auth-switch { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 4px }
.auth-message { display: none; padding: 10px 13px; border-radius: 10px; background: color-mix(in srgb, var(--p) 12%, transparent); color: var(--pt); font-size: .88rem }
.auth-message.show { display: block }

@media(max-width: 520px) {
    .auth-page { min-height: 100svh }

    .auth-header nav .container { height: 58px }
    .auth-header .logo { font-size: 1.02rem }
    .auth-header .logo .i { width: 23px; height: 23px }

    .auth-main {
        align-items: center;
        align-items: safe center;
        padding: 10px 16px
    }

    .auth-card {
        border-radius: 18px;
        padding: 18px 16px;
        box-shadow: 0 10px 28px rgba(7, 49, 46, .12)
    }

    .auth-intro { margin-bottom: 14px }
    .auth-kicker { font-size: .68rem; margin-bottom: 5px }
    .auth-intro h1 { font-size: 1.55rem }
    .auth-intro p { font-size: .84rem; margin-top: 5px }

    .auth-form { gap: 11px }
    .auth-field { gap: 4px }
    .auth-field label { font-size: .66rem }

    .auth-input input {
        min-height: 44px;
        padding: 10px 42px 10px 12px;
        border-radius: 11px;
        font-size: .95rem
    }

    .auth-options {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: .82rem
    }

    .auth-check { font-size: .82rem }
    .auth-submit { min-height: 44px }

    .auth-divider { font-size: .64rem; margin: 2px 0 0 }
    .social-button { min-height: 56px; gap: 5px; padding: 8px 4px; font-size: .7rem }
    .social-button svg { width: 17px; height: 17px }
    .auth-switch { font-size: .82rem; margin-top: 0 }
    .auth-message { padding: 8px 10px; font-size: .8rem }
}

@media(max-width: 520px) and (max-height: 720px) {
    .auth-header nav .container { height: 52px }
    .auth-main { padding: 8px 14px }
    .auth-intro { margin-bottom: 10px }
    .auth-kicker,
    .auth-intro p { display: none }
    .auth-form { gap: 9px }
    .social-button { min-height: 50px }
}


/* --- 404 page --- */
.errwrap {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 48px 20px;
    background: var(--bg)
}

.errwrap::before,
.errwrap::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .22;
    pointer-events: none
}

.errwrap::before {
    background: var(--p);
    top: -150px;
    inset-inline-start: -130px
}

.errwrap::after {
    background: var(--s);
    bottom: -170px;
    inset-inline-end: -150px
}

.err {
    position: relative;
    z-index: 1;
    max-width: 560px
}

.err .mi {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    background: color-mix(in srgb, var(--p) 13%, transparent);
    color: var(--pt);
    font-size: 34px
}

.err .code {
    display: block;
    font: 800 clamp(5rem, 18vw, 8.5rem)/1 var(--hf);
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--p), var(--s));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.err h1 {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    margin-top: 14px
}

.err p {
    color: var(--muted);
    margin-top: 14px;
    line-height: 1.65
}

.err .btns {
    justify-content: center;
    margin-top: 28px
}

.errlinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    margin-top: 32px
}

.errlinks a {
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted);
    transition: color .2s, transform .2s;
    display: inline-block
}

.errlinks a:hover {
    color: var(--pt);
    transform: translateY(-2px)
}

.err .fine {
    font-size: .76rem;
    color: var(--muted);
    opacity: .75;
    margin-top: 26px
}

/* --- coming soon page --- */
.visually {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.csoon {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 48px 20px;
    color: #fff;
    background:
        radial-gradient(800px 380px at 50% -10%, rgba(255, 255, 255, .14), transparent 65%),
        linear-gradient(135deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .6) 55%, rgba(0, 0, 0, .78)),
        url("../images/hero-bowl.jpg") center 35%/cover no-repeat,
        var(--bg)
}

.csoon::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: var(--p);
    filter: blur(130px);
    opacity: .25;
    bottom: -160px;
    inset-inline-start: -140px;
    pointer-events: none
}

.csoon-in {
    position: relative;
    z-index: 1;
    max-width: 620px
}

.csoon .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 800 1.05rem var(--hf);
    letter-spacing: .02em;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(6px);
    margin-bottom: 26px
}

.csoon h1 {
    color: #fff;
    font-size: clamp(2.6rem, 9vw, 5rem);
    line-height: 1.02
}

.csoon h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #6fe3d8, #ffe08a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.csoon .lead {
    color: rgba(255, 255, 255, .9);
    max-width: 52ch;
    margin: 16px auto 0;
    line-height: 1.65
}

.cd {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 34px
}

.cd div {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    padding: 14px 16px;
    min-width: 92px;
    backdrop-filter: blur(6px);
    transition: transform .25s, background .25s
}

.cd div:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .2)
}

.cd b {
    display: block;
    font: 800 clamp(1.7rem, 5vw, 2.4rem) var(--hf);
    line-height: 1.1
}

.cd span {
    display: block;
    margin-top: 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 600;
    opacity: .85
}

.notify {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 34px
}

.notify input {
    flex: 1 1 260px;
    max-width: 340px;
    font: inherit;
    font-size: .93rem;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    transition: border-color .2s, box-shadow .2s, background .2s
}

.notify input::placeholder {
    color: rgba(255, 255, 255, .7)
}

.notify input:focus {
    outline: none;
    border-color: #fff;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .18)
}

.notify .btn {
    flex: 0 0 auto
}

.csoon .fn {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    margin-top: 14px
}

.csoon .btns {
    justify-content: center;
    margin-top: 30px
}

.csoc {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 30px
}

.csoc a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    transition: transform .25s, background .25s
}

.csoc a:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .25)
}

.csoc a svg {
    width: 18px;
    height: 18px
}

.csoon .fine {
    font-size: .76rem;
    color: rgba(255, 255, 255, .65);
    margin-top: 30px
}

@media(max-width:600px) {

    .cd div {
        flex: 1 1 calc(50% - 12px);
        min-width: 0
    }

    .notify input {
        max-width: none
    }
}