@layer components {

/* ============================================================
   SHARED COMPONENTS — nav, footer, cart, scroll-to-top,
   eyebrow, textures, section patterns
   ============================================================ */

/* ── Eyebrow label ─────────────────────────────────── */
    .eyebrow {
        display:        inline-flex;
        align-items:    center;
        gap:            var(--space-xs);
        font-family:    var(--font-body);
        font-size:      var(--text-xs);
        font-weight:    var(--weight-semibold);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          var(--color-brand-primary);
        margin-bottom:  var(--space-sm);
    }

    .eyebrow::before,
    .eyebrow::after {
        content:    '';
        display:    block;
        width:      16px;
        height:     1px;
        background: currentColor;
        flex-shrink:0;
    }

    .eyebrow--light {
        color: var(--color-brand-primary-light);
    }

    /* ── Skip link ────────────────────────────────────── */
    .skip-link {
        position:         fixed;
        top:              var(--space-sm);
        left:             var(--space-sm);
        z-index:          calc(var(--z-toast) + 1);
        padding:          var(--space-xs) var(--space-md);
        background-color: var(--color-brand-primary);
        color:            var(--color-text-inverse);
        font-family:      var(--font-heading);
        font-size:        var(--text-sm);
        letter-spacing:   var(--tracking-wide);
        text-transform:   uppercase;
        text-decoration:  none;
        border-radius:    var(--radius-md);
        transform:        translateY(-200%);
        transition:       transform var(--transition-fast);
    }

    .skip-link:focus-visible { transform: translateY(0); }

    /* ── Site header ──────────────────────────────────────── */
    .site-header {
        position:   sticky;
        top:        0;
        z-index:    var(--z-sticky);
        background: var(--gradient-flame);
    }

    .header-bar {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--space-xs);
        min-height:      clamp(56px, 6vw, 72px);
    }

    /* ── Logo ─────────────────────────────────────────────── */
    .logo {
        display:         flex;
        flex-direction:  column;
        text-decoration: none;
        line-height:     0.85;
        flex-shrink:     0;
    }

    .logo:hover { text-decoration: none; }

    .logo-name {
        font-family:    var(--font-heading);
        font-size:      var(--text-xl);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-text-inverse);
        line-height:    var(--leading-none);
    }

    .logo-location {
        font-family:    var(--font-body);
        font-size:      var(--text-xs);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          oklch(100% 0 0 / 0.7);
    }

    /* ── Cart button ───────────────────────────────────── */
    .cart-btn {
        position:        relative;
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           44px;
        height:          44px;
        color:           var(--color-text-inverse);
        font-size:       var(--text-md);
        border:          1.5px solid oklch(100% 0 0 / 0.7);
        border-radius:   var(--radius-full);
        background:      transparent;
        transition:
            background-color var(--transition-fast),
            border-color     var(--transition-fast);
        order:           4;
    }

    .cart-btn:hover {
        background-color: oklch(100% 0 0 / 0.1);
        border-color:     oklch(100% 0 0 / 1);
    }

    .cart-badge {
        position:         absolute;
        top:              -4px;
        right:            -4px;
        display:          flex;
        align-items:      center;
        justify-content:  center;
        min-width:        20px;
        height:           20px;
        padding-inline:   4px;
        background-color: var(--color-text-inverse);
        color:            var(--color-brand-primary);
        font-family:      var(--font-body);
        font-size:        0.7rem;
        font-weight:      var(--weight-bold);
        line-height:      var(--leading-none);
        border-radius:    var(--radius-full);
    }

    /* ── Nav toggle (mobile only) ─────────────────────────── */
    .nav-toggle {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           40px;
        height:          40px;
        color:           var(--color-text-inverse);
        font-size:       var(--text-sm);
        border-radius:   var(--radius-md);
        transition:      background-color var(--transition-fast);
        order:           5;
    }

    .nav-toggle:hover { background-color: oklch(100% 0 0 / 0.15); }

    /* ── Navigation ───────────────────────────────────────── */
    .nav {
        position:         absolute;
        top:              100%;
        left:             0;
        right:            0;
        background-color: var(--color-dark-800);
        /* Diagonal texture — same pattern as .has-texture */
        background-image: repeating-linear-gradient(
            -55deg,
            transparent,
            transparent              18px,
            oklch(100% 0 0 / 0.018) 18px,
            oklch(100% 0 0 / 0.018) 36px
        );
        border-bottom:    1px solid oklch(100% 0 0 / 0.08);
        padding:          var(--space-lg) var(--container-gutter);
        order:            2;
    }

    .nav[hidden] { display: none; }

    /* Nav links — 2x2 grid on mobile */

    .nav-links li { margin-top: 0; }

    .nav-link:hover {
        color:                   var(--color-dark-text);
        background:              oklch(100% 0 0 / 0.1);
        backdrop-filter:         blur(12px);
        -webkit-backdrop-filter: blur(12px);
        text-decoration:         underline;
        text-underline-offset:   6px;
        text-decoration-thickness:2px;
        text-decoration-color:   var(--color-brand-primary-light);
    }

    .nav-link[aria-current="page"] {
        color:            var(--color-brand-primary-light);
        background:       oklch(100% 0 0 / 0.08);
        border-color:     oklch(100% 0 0 / 0.15);
        backdrop-filter:         blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* CTA — visible on all viewports */
    .nav-cta {
        display:          inline-flex;
        align-items:      center;
        gap:              var(--space-2xs);
        padding:          var(--space-2xs) var(--space-md);
        padding-top:      calc(var(--space-2xs) + 4px);
        min-height:       40px;
        background-color: var(--color-text-inverse);
        color:            var(--color-brand-primary);
        font-family:      var(--font-heading);
        font-size:        var(--text-sm);
        letter-spacing:   var(--tracking-wide);
        text-transform:   uppercase;
        text-decoration:  none;
        border-radius:    var(--radius-full);
        border:           2px solid var(--color-text-inverse);
        line-height:      var(--leading-none);
        white-space:      nowrap;
        order:            3;
        margin-inline:    auto;
        transition:
            background-color var(--transition-fast),
            color            var(--transition-fast);
    }

    .nav-cta:hover {
        background-color: transparent;
        color:            var(--color-text-inverse);
        text-decoration:  none;
    }

    /* Nav hours */
    .nav-hours {
        padding:                 var(--space-sm) var(--space-md);
        background:              oklch(100% 0 0 / 0.06);
        border-radius:           var(--radius-lg);
        border:                  1px solid oklch(100% 0 0 / 0.1);
        backdrop-filter:         blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow:
            inset 0 1px 0 oklch(100% 0 0 / 0.08);
    }

    .nav-hours-heading {
        font-family:    var(--font-heading);
        font-size:      var(--text-lg);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-dark-text);
        margin-bottom:  var(--space-xs);
    }

    .nav-hours-list {
        display:        flex;
        flex-direction: column;
        gap:            0;
        font-size:      var(--text-base);
    }

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

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

    .nav-hours-day {
        color:          var(--color-dark-text-muted);
        font-weight:    var(--weight-medium);
        white-space:    nowrap;
    }

    .nav-hours-time {
        color:          var(--color-dark-text);
        font-weight:    var(--weight-semibold);
        text-align:     right;
    }

    .nav-hours-closed {
        color: var(--color-brand-primary-light);
    }

    /* ── Mobile nav base (dropdown panel) ────────────────── */
    .nav-inner {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   var(--space-lg);
        max-width:             var(--container-max);
        margin-inline:         auto;
    }

    .nav-links {
        list-style:            none;
        display:               grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   var(--space-xs);
    }

    .nav-links li { margin-top: 0; }

    .nav-link {
        display:          flex;
        align-items:      center;
        justify-content:  center;
        gap:              var(--space-xs);
        padding:          var(--space-sm) var(--space-md);
        color:            var(--color-dark-text-muted);
        font-family:      var(--font-heading);
        font-size:        var(--text-lg);
        letter-spacing:   var(--tracking-wide);
        text-transform:   uppercase;
        text-decoration:  none;
        border-radius:    var(--radius-md);
        background:       oklch(100% 0 0 / 0.06);
        border:           1px solid oklch(100% 0 0 / 0.1);
        backdrop-filter:         blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition:
            color            var(--transition-fast),
            background-color var(--transition-fast);
    }

    .nav-link:hover {
        color:            var(--color-text-inverse);
        background-color: oklch(100% 0 0 / 0.15);
        text-decoration:  none;
    }

    .nav-link[aria-current="page"] {
        color:            var(--color-text-inverse);
        background-color: oklch(100% 0 0 / 0.12);
    }

    .nav-link i {
        font-size: var(--text-sm);
        opacity:   0.7;
    }

    /* ── Desktop nav (768px+) ─────────────────────────────── */
    @media (min-width: 768px) {
        .nav-toggle { display: none; }

        .nav {
            position:    static;
            background:  transparent;
            border:      none;
            padding:     0;
            flex:        1;
        }

        .nav-inner {
            display:         flex;
            align-items:     center;
            justify-content: center;
            gap:             0;
        }

        .nav[hidden] { display: block; }

        .nav-links {
            display:         flex;
            flex-direction:  row;
            align-items:     stretch;
            justify-content: center;
            gap:             var(--space-xs);
        }

        .nav-links li {
            display:     flex;
            align-items: stretch;
            margin-top:  0;
        }

        .nav-link {
            display:        flex;
            align-items:    center;
            font-size:      clamp(1rem, 0.85rem + 0.75vw, 1.375rem);
            padding:        var(--space-2xs) var(--space-sm);
            color:          oklch(100% 0 0 / 0.9);
            white-space:    nowrap;
            letter-spacing: var(--tracking-wide);
            background:     transparent;
            border:         none;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .nav-link:hover {
            color:            var(--color-text-inverse);
            background-color: oklch(100% 0 0 / 0.15);
        }

        .nav-link[aria-current="page"] {
            color:            var(--color-text-inverse);
            background-color: oklch(0% 0 0 / 0.15);
        }

        .nav-hours { display: none; }

        .nav-cta {
            font-size:      clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
            padding:        var(--space-2xs) var(--space-md);
            padding-top:    calc(var(--space-2xs) + 4px);
            min-height:     44px;
            letter-spacing: var(--tracking-wide);
            margin-inline:  0;
            margin-left:    var(--space-xs);
            animation:      cta-ripple 2s var(--ease-out) infinite;
        }

        .nav-cta:hover {
            animation:  none;
            transform:  scale(1.03);
            box-shadow: 0 0 0 0 transparent;
        }
    }

    /* ── Scroll to top ─────────────────────────────────── */
    .scroll-top {
        position:         fixed;
        bottom:           calc(var(--space-lg) + 12px);
        right:            var(--space-lg);
        z-index:          var(--z-raised);
        display:          flex;
        align-items:      center;
        justify-content:  center;
        width:            44px;
        height:           44px;
        border-radius:    var(--radius-full);
        background:       var(--color-brand-primary);
        color:            var(--color-text-inverse);
        font-size:        var(--text-base);
        border:           2px solid var(--color-text-inverse);
        box-shadow:       var(--shadow-lg);
        opacity:          0;
        visibility:       hidden;
        transform:        translateY(8px);
        transition:
            opacity    var(--transition-fast),
            visibility var(--transition-fast),
            transform  var(--transition-fast),
            background-color var(--transition-fast);
    }

    .scroll-top.is-visible {
        opacity:    1;
        visibility: visible;
        transform:  translateY(0);
    }

    .scroll-top:hover {
        background: var(--color-brand-primary-dark);
        border-color: var(--color-text-inverse);
        box-shadow:   var(--shadow-brand);
    }

    @media (prefers-reduced-motion: reduce) {
        .scroll-top { transition: none; }
    }

    /* ── Cart drawer ───────────────────────────────────── */
    .cart-backdrop {
        position:       fixed;
        inset:          0;
        background:     oklch(0% 0 0 / 0.5);
        z-index:        var(--z-overlay);
        opacity:        0;
        visibility:     hidden;
        pointer-events: none;
        transition:
            opacity    var(--transition-base),
            visibility var(--transition-base);
    }

    .cart-backdrop.is-open {
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
    }

    .cart-drawer {
        position:         fixed;
        top:              0;
        right:            0;
        bottom:           0;
        width:            min(90vw, 400px);
        z-index:          calc(var(--z-overlay) + 1);
        background-color: var(--color-surface-base);
        display:          flex;
        flex-direction:   column;
        transform:        translateX(100%);
        transition:       transform var(--transition-base);
        box-shadow:       -8px 0 32px oklch(0% 0 0 / 0.2);
    }

    .cart-drawer.is-open {
        transform: translateX(0);
    }

    .cart-drawer-header {
        display:          flex;
        align-items:      center;
        justify-content:  space-between;
        padding:          var(--space-md) var(--space-lg);
        background-color: var(--color-dark-900);
        background-image: repeating-linear-gradient(
            -55deg,
            transparent,
            transparent              18px,
            oklch(100% 0 0 / 0.018) 18px,
            oklch(100% 0 0 / 0.018) 36px
        );
        border-bottom:    1px solid var(--color-border);
        flex-shrink:      0;
    }

    .cart-drawer-title {
        display:        flex;
        align-items:    center;
        gap:            var(--space-xs);
        font-family:    var(--font-heading);
        font-size:      var(--text-xl);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-dark-text);
        margin:         0;
        padding-top:    4px;
    }

    .cart-drawer-title i {
        color: var(--color-brand-primary-light);
    }

    .cart-drawer-close {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           44px;
        height:          44px;
        color:           var(--color-dark-text-muted);
        font-size:       var(--text-lg);
        border-radius:   var(--radius-md);
        transition:      background-color var(--transition-fast);
    }

    .cart-drawer-close:hover {
        background-color: oklch(100% 0 0 / 0.08);
        color:            var(--color-dark-text);
    }

    .cart-drawer-body {
        flex:                1;
        overflow-y:          auto;
        padding:             var(--space-lg);
        overscroll-behavior: contain;
    }

    /* Empty state */
    .cart-empty {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        padding-top:    var(--space-2xl);
        gap:            var(--space-sm);
    }

    .cart-empty > i {
        font-size: var(--text-3xl);
        color:     var(--color-border);
    }

    .cart-empty-title {
        font-family:    var(--font-heading);
        font-size:      var(--text-lg);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-text-primary);
        margin:         0;
    }

    .cart-empty-sub {
        font-size: var(--text-sm);
        color:     var(--color-text-secondary);
        margin:    0;
    }

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

    .cart-empty-link:hover {
        background-color: var(--color-brand-primary-dark);
        border-color:     var(--color-brand-primary-dark);
        box-shadow:       var(--shadow-brand);
        text-decoration:  none;
    }

    /* Cart items list */
    .cart-items {
        list-style:     none;
        display:        flex;
        flex-direction: column;
        gap:            var(--space-xs);
    }

    .cart-item {
        display:        flex;
        flex-direction: column;
        gap:            var(--space-2xs);
        padding:        var(--space-sm);
        background:     var(--color-surface-raised);
        border:         1px solid var(--color-border);
        border-radius:  var(--radius-md);
        margin-top:     0;
    }

    .cart-item-info { min-width: 0; }

    .cart-item-name {
        font-family:    var(--font-heading);
        font-size:      var(--text-md);
        color:          var(--color-text-primary);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        line-height:    var(--leading-snug);
        margin:         0;
    }

    .cart-item-summary {
        font-size:   var(--text-sm);
        color:       var(--color-text-muted);
        line-height: var(--leading-relaxed);
        margin:      0;
    }

    .cart-item-controls {
        display:     flex;
        align-items: center;
        gap:         var(--space-xs);
        margin-top:  var(--space-2xs);
    }

    .cart-item-qty {
        display:     flex;
        align-items: center;
        gap:         var(--space-2xs);
    }

    .cart-qty-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           34px;
        height:          34px;
        min-height:      34px;
        min-width:       34px;
        flex-shrink:     0;
        padding:         0;
        aspect-ratio:    1;
        border:          1px solid var(--color-border);
        border-radius:   var(--radius-full);
        background:      transparent;
        color:           var(--color-text-secondary);
        font-size:       var(--text-sm);
        cursor:          pointer;
        transition:
            background-color var(--transition-fast),
            border-color     var(--transition-fast);
    }

    .cart-qty-btn:hover {
        background:   var(--color-surface-raised);
        border-color: var(--color-brand-primary);
        color:        var(--color-brand-primary);
    }

    .cart-qty-value {
        min-width:   28px;
        text-align:  center;
        font-size:   var(--text-base);
        font-weight: var(--weight-semibold);
        color:       var(--color-text-primary);
    }

    .cart-item-price {
        margin-left:    auto;
        font-family:    var(--font-heading);
        font-size:      var(--text-md);
        color:          var(--color-text-primary);
        letter-spacing: var(--tracking-wide);
    }

    .cart-item-remove {
        display:     flex;
        align-items: center;
        justify-content: center;
        width:       34px;
        height:      34px;
        min-height:  34px;
        border:      none;
        background:  transparent;
        color:       var(--color-text-muted);
        font-size:   var(--text-sm);
        cursor:      pointer;
        opacity:     0.5;
        transition:  opacity var(--transition-fast), color var(--transition-fast);
    }

    .cart-item-remove:hover {
        opacity: 1;
        color:   var(--color-brand-primary);
    }

    .cart-continue-link {
        display:        block;
        text-align:     center;
        font-family:    var(--font-heading);
        font-size:      var(--text-sm);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          var(--color-dark-text-muted);
        text-decoration:none;
        transition:     color var(--transition-fast);
    }

    .cart-continue-link:hover {
        color:          var(--color-dark-text);
        text-decoration:none;
    }

    /* Body border to separate from dark header */
    .cart-drawer-body {
        border-top: none;
    }

    /* Footer */
    .cart-drawer-footer {
        padding:          var(--space-md) var(--space-lg);
        background-color: var(--color-dark-900);
        background-image: repeating-linear-gradient(
            -55deg,
            transparent,
            transparent              18px,
            oklch(100% 0 0 / 0.018) 18px,
            oklch(100% 0 0 / 0.018) 36px
        );
        border-top:       1px solid oklch(100% 0 0 / 0.08);
        flex-shrink:      0;
        display:          flex;
        flex-direction:   column;
        gap:              var(--space-md);
    }

    .cart-total-row {
        display:         flex;
        justify-content: space-between;
        align-items:     baseline;
    }

    .cart-total-label {
        font-family:    var(--font-heading);
        font-size:      var(--text-base);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          var(--color-text-muted);
    }

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

    .cart-checkout-btn {
        display:          flex;
        align-items:      center;
        justify-content:  center;
        gap:              var(--space-xs);
        padding:          var(--space-sm) var(--space-lg);
        padding-top:      calc(var(--space-sm) + 2px);
        min-height:       48px;
        background-color: var(--color-brand-primary);
        color:            var(--color-text-inverse);
        border:           2px solid var(--color-brand-primary);
        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);
        transition:
            background-color var(--transition-fast),
            box-shadow       var(--transition-fast);
    }

    .cart-checkout-btn:hover {
        background-color: var(--color-brand-primary-dark);
        border-color:     var(--color-brand-primary-dark);
        box-shadow:       var(--shadow-brand);
        text-decoration:  none;
    }

    @media (prefers-reduced-motion: reduce) {
        .cart-drawer, .cart-backdrop { transition: none; }
    }

    /* ── Diagonal texture ─────────────────────────────────────
       Apply .has-texture to any dark section.               */
    .has-texture {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .has-texture::before {
        content:          '';
        position:         absolute;
        inset:            0;
        background-image: repeating-linear-gradient(
            -55deg,
            transparent,
            transparent              18px,
            oklch(100% 0 0 / 0.018) 18px,
            oklch(100% 0 0 / 0.018) 36px
        );
        pointer-events: none;
        z-index:        0;
    }

    /* ── Light diagonal texture variant ───────────────── */
    .has-texture--light {
        position:  relative;
        overflow:  hidden;
        isolation: isolate;
    }

    .has-texture--light::before {
        content:          '';
        position:         absolute;
        inset:            0;
        background-image: repeating-linear-gradient(
            -55deg,
            transparent,
            transparent              18px,
            oklch(0% 0 0 / 0.02)    18px,
            oklch(0% 0 0 / 0.02)    36px
        );
        pointer-events: none;
        z-index:        0;
    }

    /* ── Section inner — sits above texture ───────────── */
    .section-inner {
        position: relative;
        z-index:  2;
    }

    /* ── Section header ───────────────────────────────── */
    .section-header {
        text-align:    center;
        margin-bottom: var(--space-xl);
    }

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

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

    /* ── Form elements (shared) ─────────────────────── */
.form-input,
.form-select,
.form-textarea {
    width:              100%;
    padding:            var(--space-sm) var(--space-md);
    min-height:         48px;
    background-color:   var(--color-surface-raised);
    color:              var(--color-text-primary);
    border:             2px solid var(--color-border);
    border-radius:      var(--radius-lg);
    font-family:        var(--font-body);
    font-size:          var(--text-sm);
    line-height:        var(--leading-relaxed);
    -webkit-appearance: none;
    appearance:         none;
    transition:
        border-color     var(--transition-fast),
        box-shadow       var(--transition-fast),
        background-color var(--transition-fast);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color:     var(--color-border-strong);
    background-color: var(--color-surface-base);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline:          none;
    border-color:     var(--color-brand-primary);
    background-color: var(--color-surface-base);
    box-shadow:       0 0 0 4px oklch(50% 0.22 25 / 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color:      var(--color-text-muted);
    font-style: italic;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-md) center;
    padding-right:       calc(var(--space-md) + 20px);
    cursor:              pointer;
}

    /* ── Footer ────────────────────────────────────────── */
    .site-footer {
        background-color: var(--color-dark-900);
        padding-block:    var(--space-2xl) var(--space-sm);
    }

    .footer-grid {
        display:               grid;
        grid-template-columns: 1fr;
        gap:                   var(--space-xl);
        padding-bottom:        var(--space-xl);
        border-bottom:         1px solid oklch(100% 0 0 / 0.08);
    }

    @media (min-width: 640px) {
        .footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .footer-grid {
            grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
        }
    }

    .footer-brand { min-width: 0; }

    .footer-logo {
        display:         flex;
        flex-direction:  column;
        text-decoration: none;
        line-height:     0.85;
        margin-bottom:   var(--space-sm);
    }

    .footer-logo:hover { text-decoration: none; }

    .footer-logo-name {
        font-family:    var(--font-heading);
        font-size:      var(--text-xl);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color:          var(--color-dark-text);
        line-height:    var(--leading-none);
    }

    .footer-logo-location {
        font-family:    var(--font-body);
        font-size:      var(--text-xs);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          var(--color-dark-text-muted);
    }

    .footer-tagline {
        font-size:   var(--text-sm);
        color:       var(--color-dark-text-muted);
        line-height: var(--leading-relaxed);
        max-width:   28ch;
        margin:      0;
    }

    .footer-heading {
        font-family:    var(--font-heading);
        font-size:      var(--text-base);
        letter-spacing: var(--tracking-wider);
        text-transform: uppercase;
        color:          var(--color-dark-text);
        margin-bottom:  var(--space-sm);
    }

    .footer-nav ul {
        list-style:     none;
        display:        flex;
        flex-direction: column;
        gap:            var(--space-xs);
    }

    .footer-nav li { margin-top: 0; }

    .footer-nav a {
        font-size:       var(--text-sm);
        color:           var(--color-dark-text-muted);
        text-decoration: none;
        transition:      color var(--transition-fast);
    }

    .footer-nav a:hover {
        color:           var(--color-dark-text);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .footer-contact ul {
        list-style:     none;
        display:        flex;
        flex-direction: column;
        gap:            var(--space-xs);
    }

    .footer-contact li {
        font-size:   var(--text-sm);
        color:       var(--color-dark-text-muted);
        margin-top:  0;
    }

    .footer-contact a {
        color:           var(--color-dark-text-muted);
        text-decoration: none;
        transition:      color var(--transition-fast);
    }

    .footer-contact a:hover {
        color:           var(--color-dark-text);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .footer-social { min-width: 0; }

    .footer-social-list {
        list-style: none;
        display:    flex;
        gap:        var(--space-sm);
    }

    .footer-social-list li { margin-top: 0; }

    .footer-social-list a {
        display:                 flex;
        align-items:             center;
        justify-content:         center;
        width:                   40px;
        height:                  40px;
        border-radius:           var(--radius-full);
        background:              oklch(100% 0 0 / 0.06);
        border:                  1px solid oklch(100% 0 0 / 0.1);
        color:                   var(--color-dark-text-muted);
        font-size:               var(--text-sm);
        text-decoration:         none;
        backdrop-filter:         blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition:
            background-color var(--transition-fast),
            color            var(--transition-fast);
    }

    .footer-social-list a:hover {
        background:  var(--color-brand-primary);
        border-color:var(--color-brand-primary);
        color:       var(--color-text-inverse);
        text-decoration: none;
    }

    .footer-bottom {
        display:         flex;
        flex-wrap:       wrap;
        justify-content: space-between;
        align-items:     center;
        gap:             var(--space-sm);
        padding-top:     var(--space-lg);
    }

    .footer-bottom p {
        font-size: var(--text-xs);
        color:     var(--color-dark-text-muted);
        margin:    0;
    }

    .footer-credit a {
        color:           var(--color-brand-primary-light);
        text-decoration: none;
        transition:      color var(--transition-fast);
    }

    .footer-credit a:hover {
        color:           var(--color-dark-text);
        text-decoration: underline;
        text-underline-offset: 4px;
    }

} /* end @layer components */