@layer components {

/* ── 2. Trust strip ────────────────────────────────── */
    .trust-strip {
        background:    var(--color-surface-base);
        padding-block: var(--space-md);
        border-bottom: 1px solid var(--color-border);
    }

    .trust-strip-list {
        list-style:      none;
        display:         flex;
        flex-wrap:       wrap;
        justify-content: center;
        gap:             var(--space-lg);
    }

    .trust-strip-item {
        display:        inline-flex;
        align-items:    center;
        gap:            var(--space-xs);
        margin-top:     0;
        font-family:    var(--font-heading);
        font-size:      var(--text-lg);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-text-primary);
        white-space:    nowrap;
    }

    .trust-strip-item i {
        color:     var(--color-brand-primary);
        font-size: 0.85em;
    }

    /* ── 5. Find Us ────────────────────────────────────── */
    .find-us {
        background-color: var(--color-surface-base);
    }

    .find-us .section-header {
        text-align: center;
    }

    .find-us-grid {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   var(--space-md);
    }

    @media (min-width: 640px) {
        .find-us-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:                   var(--space-lg);
        }
    }

    .info-card {
        display:                 flex;
        flex-direction:          column;
        align-items:             center;
        text-align:              center;
        padding:                 var(--space-lg);
        background:
            linear-gradient(
                135deg,
                oklch(14% 0.005 270 / 0.92),
                oklch(14% 0.005 270 / 0.96)
            );
        border:                  1px solid oklch(0% 0 0 / 0.1);
        border-radius:           var(--radius-xl);
        backdrop-filter:         blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow:
            var(--shadow-lg),
            inset 0 1px 0 oklch(100% 0 0 / 0.06);
        margin-top:              0;
    }

    .info-card-icon {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           48px;
        height:          48px;
        border-radius:   var(--radius-full);
        background:      var(--gradient-flame);
        color:           var(--color-text-inverse);
        font-size:       var(--text-md);
        margin-bottom:   var(--space-md);
    }

    .info-card-title {
        font-size:      var(--text-lg);
        letter-spacing: var(--tracking-wide);
        color:          var(--color-dark-text);
        margin-bottom:  var(--space-sm);
    }

    .info-card-text {
        font-size:   var(--text-sm);
        color:       var(--color-dark-text-muted);
        line-height: var(--leading-relaxed);
        margin:      0;
    }

    .info-card-hours {
        display:        flex;
        flex-direction: column;
        gap:            0;
        width:          100%;
        font-size:      var(--text-sm);
    }

    .info-card-hours-row {
        display:         flex;
        justify-content: space-between;
        gap:             var(--space-md);
        padding-block:   var(--space-xs);
        border-bottom:   1px solid oklch(100% 0 0 / 0.06);
    }

    .info-card-hours-row:last-child { border-bottom: none; }

    .info-card-hours-row dt {
        color: var(--color-dark-text-muted);
    }

    .info-card-hours-row dd {
        color:       var(--color-dark-text);
        font-weight: var(--weight-semibold);
    }

    .info-card-closed { color: var(--color-brand-primary-light); }

    .info-card-link {
        display:          inline-flex;
        align-items:      center;
        gap:              var(--space-2xs);
        margin-top:       auto;
        padding-top:      var(--space-md);
        font-family:      var(--font-heading);
        font-size:        var(--text-base);
        letter-spacing:   var(--tracking-wide);
        text-transform:   uppercase;
        color:            var(--color-brand-primary-light);
        text-decoration:  none;
        transition:       gap var(--transition-fast);
    }

    .info-card-link:hover {
        text-decoration: none;
        gap:             var(--space-xs);
    }

    .info-card-link i {
        font-size:  0.8em;
        transition: transform var(--transition-fast);
    }

    .info-card-link:hover i {
        transform: translateX(3px);
    }

    /* ── 6. CTA band ──────────────────────────────────── */
    .cta-band {
        background-color: var(--color-brand-primary);
        padding-block:    var(--space-2xl);
    }

    @media (min-width: 768px) {
        .cta-inner {
            display:         flex;
            flex-direction:  row;
            align-items:     center;
            text-align:      left;
            gap:             var(--space-xl);
            justify-content: center;
        }
    }

    .cta-heading {
        color:       var(--color-text-inverse);
        font-size:   var(--text-2xl);
        line-height: var(--leading-tight);
    }

    .cta-actions {
        display:   flex;
        flex-wrap: wrap;
        gap:       var(--space-sm);
        flex-shrink: 0;
    }

    .cta-btn {
        display:          inline-flex;
        align-items:      center;
        gap:              var(--space-xs);
        padding:          var(--space-xs) var(--space-lg);
        padding-top:      calc(var(--space-xs) + 2px);
        min-height:       48px;
        border-radius:    var(--radius-md);
        font-family:      var(--font-heading);
        font-size:        var(--text-md);
        letter-spacing:   var(--tracking-wide);
        text-transform:   uppercase;
        text-decoration:  none;
        line-height:      var(--leading-none);
        white-space:      nowrap;
        transition:
            background-color var(--transition-fast),
            box-shadow       var(--transition-fast);
    }

    .cta-btn:hover { text-decoration: none; }

    .cta-btn--primary {
        background-color: var(--color-text-inverse);
        color:            var(--color-brand-primary);
        border:           2px solid var(--color-text-inverse);
    }

    .cta-btn--primary:hover {
        background-color: transparent;
        color:            var(--color-text-inverse);
        box-shadow:       0 4px 16px oklch(0% 0 0 / 0.2);
    }

    .cta-btn--secondary {
        background-color: transparent;
        color:            var(--color-text-inverse);
        border:           2px solid oklch(100% 0 0 / 0.4);
    }

    .cta-btn--secondary:hover {
        background-color: oklch(100% 0 0 / 0.12);
        border-color:     oklch(100% 0 0 / 0.6);
    }

    /* Footer styles — see components.css */

    /* Brand column */

    .cta-heading-accent {
        display: block;
        color:   oklch(100% 0 0 / 0.85);
    }

    /* ── Light diagonal texture variant ───────────────── */

    /* ── 4. About ─────────────────────────────────────────── */
    .about {
        background-color:    var(--color-surface-raised);
        background-size:     cover;
        background-position: center 40%;
        padding-block:       var(--space-xl);
        position:            relative;
        overflow:            hidden;
        isolation:           isolate;
    }

    /* Light overlay — lets image peek through subtly */
    .about::after {
        content:    '';
        position:   absolute;
        inset:      0;
        background: oklch(96% 0.002 90 / 0.88);
        z-index:    0;
    }

    .about-inner {
        position:      relative;
        z-index:       1;
        text-align:    center;
        max-width:     600px;
        margin-inline: auto;
    }

    .about-inner h2 {
        font-size:     var(--text-2xl);
        letter-spacing:0.02em;
        margin-bottom: var(--space-xs);
    }

    .about-copy {
        font-size:     var(--text-md);
        color:         var(--color-text-secondary);
        line-height:   var(--leading-relaxed);
        margin-inline: auto;
        margin-bottom: var(--space-md);
    }

    .about-link {
        display:          inline-flex;
        align-items:      center;
        gap:              var(--space-2xs);
        font-family:      var(--font-heading);
        font-size:        var(--text-sm);
        letter-spacing:   var(--tracking-wider);
        text-transform:   uppercase;
        color:            var(--color-brand-primary);
        text-decoration:  none;
        transition:       gap var(--transition-base);
    }

    .about-link:hover {
        text-decoration: none;
        gap:             var(--space-xs);
    }

    .about-link i {
        font-size:  0.8em;
        transition: transform var(--transition-base);
    }

    .about-link:hover i {
        transform: translateX(3px);
    }

    /* ── 3. What We Make ───────────────────────────────── */
    .menu-preview {
        background-color: var(--color-surface-base);
    }

    .section-header h2 {
        margin-bottom: var(--space-xs);
    }

    .section-header p {
        color:         var(--color-text-secondary);
        max-width:     48ch;
        margin-inline: auto;
    }

    .menu-cards {
        list-style:            none;
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   clamp(1.5rem, 1.3rem + 0.5vw, 2rem);
    }

    /* Card — horizontal on mobile, vertical on desktop */
    .menu-card {
        display:          grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        background-color: var(--color-surface-base);
        border:           1px solid var(--color-border);
        border-radius:    var(--radius-xl);
        overflow:         hidden;
        margin-top:       0;
        box-shadow:       var(--shadow-sm);
        transition:
            transform  var(--transition-fast),
            box-shadow var(--transition-fast);
    }

    .menu-card:hover {
        transform:  translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .menu-card-img {
        overflow:  hidden;
        min-width: 0;
    }

    .menu-card-img img {
        width:           100%;
        height:          100%;
        object-fit:      cover;
        object-position: center;
        display:         block;
    }

    .menu-card-body {
        display:        flex;
        flex-direction: column;
        flex:           1;
        padding:        var(--space-sm);
        gap:            var(--space-2xs);
        min-width:      0;
    }

    /* Desktop — switch to vertical cards in 3-col grid */
    @media (min-width: 768px) {
        .menu-cards {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .menu-card {
            grid-template-columns: 1fr;
            grid-template-rows:    auto 1fr;
        }

        .menu-card-img img {
            height: clamp(180px, 18vw, 240px);
        }

        .menu-card-body {
            padding: var(--space-md);
        }
    }

    .menu-card-name {
        font-size:      var(--text-xl);
        line-height:    var(--leading-snug);
        letter-spacing: var(--tracking-wide);
    }

    .menu-card-desc {
        font-size:   var(--text-sm);
        color:       var(--color-text-secondary);
        line-height: var(--leading-relaxed);
        flex-grow:   1;
    }

    .menu-card-footer {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--space-sm);
        margin-top:      var(--space-sm);
        padding-top:     var(--space-sm);
        border-top:      1px solid var(--color-border);
    }

    .menu-card-price {
        font-family:    var(--font-heading);
        font-size:      var(--text-xl);
        letter-spacing: var(--tracking-wide);
        color:          var(--color-brand-primary);
        line-height:    var(--leading-none);
    }

    /* ── Diagonal texture ─────────────────────────────────────
       Reusable pseudo-element pattern for dark sections.
       Apply .has-texture to the section, position: relative
       and isolation: isolate on the parent, z-index: 1+ on
       the content wrapper.
       ──────────────────────────────────────────────────────── */

    /* ── Section inner — sits above texture ───────────────── */

    /* ── 1. Hero ──────────────────────────────────────────── */
    .hero {
        padding-block:    var(--space-xl);
        background-color: var(--color-dark-900);
        /* Dark overlay + burger photo — visible on mobile,
           subtle texture behind parallelogram on desktop */
        background-image:
            linear-gradient(
                oklch(14% 0.005 270 / 0.82),
                oklch(14% 0.005 270 / 0.92)
            ),
            url('../img/hero-bg.jpg');
        background-size:     cover;
        background-position: center center;
        background-repeat:   no-repeat;
        display:             flex;
        align-items:         center;
        min-height:          clamp(480px, 70vh, 720px);
    }

    .hero .container { width: 100%; }

    /* Hero layout — stacked on mobile, split on desktop */
    .hero-grid {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   0;
        align-items:           center;
    }

    /* Parallelogram hidden below 640px — bg image shows instead */
    .hero-visual {
        display: none;
    }

    @media (min-width: 640px) {
        .hero-grid {
            grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
            gap:                   var(--space-2xl);
        }

        .hero-visual {
            display:  block;
            position: relative;
            min-width:0;
        }
    }

    /* ── Hero copy (left) ────────────────────────────────── */
    .hero-copy { min-width: 0; }

    .hero-headline {
        font-size:      var(--text-5xl);
        line-height:    0.9;
        letter-spacing: var(--tracking-wide);
        color:          var(--color-dark-text);
        margin-bottom:  var(--space-sm);
        text-shadow:    2px 3px 12px oklch(0% 0 0 / 0.5);
    }

    .hero-headline .flame { display: block; }

    /* Flame divider — sits between headline and subtitle */
    .hero-divider {
        width:         clamp(60px, 10vw, 100px);
        height:        3px;
        background:    var(--gradient-flame);
        border-radius: var(--radius-full);
        margin-bottom: var(--space-md);
    }

    .hero-sub {
        font-size:    var(--text-md);
        color:        var(--color-dark-text-muted);
        max-width:    38ch;
        line-height:  var(--leading-relaxed);
        margin-bottom:var(--space-lg);
    }

    .hero-cta {
        display:       flex;
        flex-wrap:     wrap;
        gap:           var(--space-sm);
        margin-bottom: var(--space-xl);
    }

    .hero-btn {
        display:         inline-flex;
        align-items:     center;
        gap:             var(--space-xs);
        padding:         var(--space-xs) var(--space-lg);
        padding-top:     calc(var(--space-xs) + 2px);
        min-height:      44px;
        border-radius:   var(--radius-md);
        font-family:     var(--font-heading);
        font-size:       var(--text-md);
        letter-spacing:  var(--tracking-wide);
        text-transform:  uppercase;
        line-height:     var(--leading-none);
        white-space:     nowrap;
        text-decoration: none;
        transition:
            background-color var(--transition-fast),
            box-shadow       var(--transition-fast);
    }

    .hero-btn:hover { text-decoration: none; }

    .hero-btn--primary {
        background-color: var(--color-brand-primary);
        color:            var(--color-text-inverse);
        border:           2px solid var(--color-brand-primary);
    }

    .hero-btn--primary:hover {
        background-color: var(--color-brand-primary-dark);
        border-color:     var(--color-brand-primary-dark);
        box-shadow:       var(--shadow-brand);
    }

    .hero-btn--secondary {
        background:
            linear-gradient(
                135deg,
                oklch(100% 0 0 / 0.08),
                oklch(100% 0 0 / 0.03)
            );
        color:              var(--color-dark-text);
        border:             1px solid oklch(100% 0 0 / 0.15);
        backdrop-filter:    blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.1),
            0 2px 8px oklch(0% 0 0 / 0.15);
        transition:
            background       var(--transition-fast),
            border-color     var(--transition-fast),
            box-shadow       var(--transition-fast);
    }

    .hero-btn--secondary:hover {
        background:
            linear-gradient(
                135deg,
                oklch(100% 0 0 / 0.14),
                oklch(100% 0 0 / 0.06)
            );
        border-color:       oklch(100% 0 0 / 0.25);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.15),
            0 4px 20px oklch(0% 0 0 / 0.25);
        backdrop-filter:    blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    /* ── Hero image (right) ──────────────────────────────── */
    /* Angled parallelogram frame — clip-path cut with an
       offset red frame behind the photo for depth.           */

    /* hero-visual display handled above: none < 640px, block >= 640px */

    .hero-img-wrap {
        position:     relative;
        width:        100%;
        aspect-ratio: 3 / 4.5;
        clip-path:    polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
        overflow:     hidden;
    }

    .hero-img,
    .hero-video {
        width:           100%;
        height:          100%;
        object-fit:      cover;
        object-position: center 30%;
        transform:       scale(1.05);
        display:         block;
    }

    /* Fallback image — hidden by default when video plays */
    .hero-img-wrap .hero-img {
        display: none;
    }

    /* Reduced motion — hide video, show fallback image */
    @media (prefers-reduced-motion: reduce) {
        .hero-video          { display: none; }
        .hero-img-wrap .hero-img { display: block; }
    }

    /* Red offset frame — sits behind the photo, same clip shape,
       shifted down and left to create a branded shadow effect. */
    .hero-img-frame {
        position:   absolute;
        inset:      0;
        top:        var(--space-md);
        left:       calc(-1 * var(--space-md));
        width:      100%;
        height:     100%;
        clip-path:  polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
        background: var(--color-brand-primary);
        z-index:    -1;
        opacity:    0.7;
    }

    /* ── Hero entrance ───────────────────────────────────── */
    @media (prefers-reduced-motion: no-preference) {
        .hero-headline { animation: fadeInUp var(--duration-slower) var(--ease-out) both; }
        .hero-divider  { animation: fadeIn   var(--duration-slower) var(--ease-out) 0.06s both; }
        .hero-sub      { animation: fadeInUp var(--duration-slower) var(--ease-out) 0.1s  both; }
        .hero-cta      { animation: fadeInUp var(--duration-slower) var(--ease-out) 0.16s both; }
        .hero-visual   { animation: fadeIn   var(--duration-slower) var(--ease-out) 0.12s both; }
    }

} /* end @layer components */