/* =========================================================
   Kitchen Site — Base style.css
   Tokens, reset, layout, header, simple utilities
   ========================================================= */

:root {
    --ks-bg: #f3efe8;
    --ks-bg-deep: #e7dfd4;
    --ks-surface: #fffaf2;
    --ks-surface-2: #f8f2ea;

    --ks-ink: #1f2524;
    --ks-heading: #151918;
    --ks-muted: #68706a;
    --ks-soft: #9a948b;

    --ks-accent: #b76f4a;
    --ks-accent-dark: #8f4e35;
    --ks-accent-soft: #dfb18e;

    --ks-olive: #5f6c58;
    --ks-olive-dark: #414c3d;

    --ks-charcoal: #222827;
    --ks-charcoal-soft: #343c3a;
    --ks-white: #ffffff;

    --ks-border: rgba(31, 37, 36, 0.13);
    --ks-border-strong: rgba(31, 37, 36, 0.24);

    --ks-container: 1440px;
    --ks-header-height: 92px;

    --ks-shadow-sm: 0 12px 30px rgba(31, 37, 36, 0.07);
    --ks-shadow-md: 0 26px 70px rgba(31, 37, 36, 0.12);
    --ks-shadow-lg: 0 40px 110px rgba(31, 37, 36, 0.18);

    --ks-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: var(--ks-bg);
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: var(--ks-bg);
    color: var(--ks-ink);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

main {
    display: block;
    min-width: 0;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

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

button {
    cursor: pointer;
}

::selection {
    background: var(--ks-accent-dark);
    color: var(--ks-white);
}

/* Layout */

.container {
    width: min(var(--ks-container), calc(100% - 64px));
    margin: 0 auto;
    padding: 0;
}

#guides,
#about,
#faq,
#terms,
#kitchen-categories,
#kitchen-knives,
#cookware,
#small-appliances,
#care-storage {
    scroll-margin-top: calc(var(--ks-header-height) + 28px);
}

/* Motion */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================================================
   HEADER
   Calm sticky header + rope hide/reveal behavior
   ========================================================= */

:root {
    --ks-header-height: 76px;
}

html {
    scrollbar-gutter: stable;
}

/* ---------- HEADER / skip link ---------- */

.tp-skip-link {
    position: fixed;
    left: 18px;
    top: 18px;
    z-index: 9999;
    padding: 12px 16px;
    background: var(--ks-charcoal);
    color: var(--ks-surface);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translateY(-140%);
    transition: transform 180ms var(--ks-ease);
}

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

/* ---------- HEADER / shell ---------- */

.tp-header {
    position: sticky;
    top: 0;
    z-index: 5000;
    width: 100%;
    padding: 0;
    background: rgba(243, 239, 232, 0.94);
    border-bottom: 1px solid rgba(31, 37, 36, 0.075);
    box-shadow: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translate3d(0, 0, 0);
    transition: transform 220ms var(--ks-ease), background-color 160ms ease, border-color 160ms ease;
    will-change: transform;
}

.tp-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(31, 37, 36, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(31, 37, 36, 0.014) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.14;
    pointer-events: none;
}

.tp-header.is-scrolled {
    background: rgba(243, 239, 232, 0.94);
    border-bottom-color: rgba(31, 37, 36, 0.075);
}

.tp-header.is-hidden {
    transform: translate3d(0, calc(-100% - 10px), 0);
    pointer-events: none;
}

body.tp-menu-open .tp-header,
.tp-header:focus-within {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.tp-header__inner {
    position: relative;
    z-index: 2;
    width: min(var(--ks-container), calc(100% - 64px));
    min-height: var(--ks-header-height);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: clamp(22px, 3vw, 42px);
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ---------- HEADER / brand ---------- */

.tp-header__brand {
    display: inline-block;
    grid-template-columns: 44px auto;
    align-items: center;
    gap: 13px;
    min-width: 0;
    color: var(--ks-heading);
    text-decoration: none;
}

.tp-header__brand-image {
    width: 220px;
}

.tp-header__brand-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #252c2a 0%, #151918 100%);
    border: 1px solid rgba(31, 37, 36, 0.32);
    color: var(--ks-accent-soft);
    font-size: 0.55rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.07em;
    box-shadow: 0 13px 28px rgba(31, 37, 36, 0.13);
}

.tp-header__brand-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
    line-height: 1;
}

.tp-header__brand-copy strong {
    color: var(--ks-heading);
    font-size: 1.04rem;
    font-weight: 920;
    line-height: 0.96;
    letter-spacing: -0.036em;
    white-space: nowrap;
}

.tp-header__brand-copy span {
    color: var(--ks-accent-dark);
    font-size: 0.55rem;
    font-weight: 930;
    line-height: 1;
    letter-spacing: 0.165em;
    text-transform: uppercase;
}

/* ---------- HEADER / desktop nav ---------- */

.tp-nav {
    justify-self: center;
}

.tp-nav__close {
    display: none;
}

.tp-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(7px, 0.8vw, 11px);
    margin: 0;
    padding: 5px;
    list-style: none;
    background: rgba(255, 250, 242, 0.58);
    border: 1px solid rgba(31, 37, 36, 0.085);
    box-shadow:
        0 12px 32px rgba(31, 37, 36, 0.032),
        0 1px 0 rgba(255, 250, 242, 0.68) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tp-nav__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-nav__link {
    position: relative;
    min-height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--ks-heading);
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition:
        color 180ms ease,
        background-color 180ms ease;
}

.tp-nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(183, 111, 74, 0.082);
    opacity: 0;
    transform: scaleX(0.72);
    transform-origin: center;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
    pointer-events: none;
}

.tp-nav__link::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 5px;
    height: 2px;
    background: var(--ks-accent);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
    pointer-events: none;
}

.tp-nav__link:hover,
.tp-nav__link:focus-visible,
.tp-nav__link.is-current,
.tp-nav__link[aria-current="true"] {
    color: var(--ks-accent-dark);
}

.tp-nav__link:hover::before,
.tp-nav__link:focus-visible::before,
.tp-nav__link.is-current::before,
.tp-nav__link[aria-current="true"]::before {
    opacity: 1;
    transform: scaleX(1);
}

.tp-nav__link:hover::after,
.tp-nav__link:focus-visible::after,
.tp-nav__link.is-current::after,
.tp-nav__link[aria-current="true"]::after {
    opacity: 1;
    transform: scaleX(1);
}

/* ---------- HEADER / actions ---------- */

.tp-header__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.tp-header__cta {
    min-height: 42px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ks-charcoal);
    border: 1px solid var(--ks-charcoal);
    color: var(--ks-surface) !important;
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    box-shadow: 0 12px 26px rgba(31, 37, 36, 0.11);
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tp-header__cta:link,
.tp-header__cta:visited,
.tp-header__cta:hover,
.tp-header__cta:focus-visible,
.tp-header__cta:active {
    color: var(--ks-surface) !important;
}

.tp-header__cta:hover,
.tp-header__cta:focus-visible {
    background: var(--ks-accent-dark);
    border-color: var(--ks-accent-dark);
}

/* ---------- HEADER / burger ---------- */

.tp-header__toggle {
    position: relative;
    display: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(31, 37, 36, 0.13);
    background: rgba(255, 250, 242, 0.72);
    color: var(--ks-heading);
    box-shadow: 0 12px 30px rgba(31, 37, 36, 0.055);
}

.tp-header__toggle-line {
    position: absolute;
    left: 12px;
    height: 2px;
    background: currentColor;
}

.tp-header__toggle-line--top {
    top: 13px;
    width: 20px;
}

.tp-header__toggle-line--middle {
    top: 20px;
    width: 14px;
}

.tp-header__toggle-line--bottom {
    top: 27px;
    width: 20px;
}

.tp-header__toggle:hover,
.tp-header__toggle:focus-visible {
    background: var(--ks-surface);
    border-color: rgba(143, 78, 53, 0.22);
}

/* =========================================================
   HEADER / responsive
   ========================================================= */

@media (max-width: 1180px) {
    .tp-header__inner {
        gap: 20px;
    }

    .tp-header__brand {
        grid-template-columns: 42px auto;
        gap: 12px;
    }

    .tp-header__brand-mark {
        width: 42px;
        height: 42px;
    }

    .tp-header__brand-copy strong {
        font-size: 1rem;
    }

    .tp-nav__link {
        padding: 0 10px;
        font-size: 0.6rem;
    }

    .tp-header__cta {
        padding: 0 17px;
    }
}

@media (max-width: 920px) {
    :root {
        --ks-header-height: 70px;
    }

    .tp-header__inner {
        width: min(100% - 32px, var(--ks-container));
        min-height: var(--ks-header-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tp-header__brand {
        grid-template-columns: 40px auto;
        gap: 11px;
    }

    .tp-header__brand-mark {
        width: 40px;
        height: 40px;
        font-size: 0.5rem;
    }

    .tp-header__brand-copy {
        max-width: 230px;
    }

    .tp-header__brand-copy strong {
        font-size: 0.94rem;
        line-height: 0.98;
        letter-spacing: -0.032em;
    }

    .tp-header__brand-copy span {
        font-size: 0.5rem;
    }

    .tp-header__cta {
        display: none;
    }

    .tp-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .tp-nav {
        display: none;
    }

    body.tp-menu-open {
        overflow: hidden;
    }
}

@media (max-width: 460px) {
    .tp-header__inner {
        width: min(100% - 22px, var(--ks-container));
    }

    .tp-header__brand-copy {
        max-width: 178px;
    }

    .tp-header__brand-copy span {
        display: none;
    }

    .tp-header__brand-copy strong {
        font-size: 0.88rem;
        line-height: 1.02;
        letter-spacing: -0.032em;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tp-header,
    .tp-skip-link,
    .tp-nav__link,
    .tp-header__cta {
        transition: none !important;
    }
}

/* =========================================================
   MOBILE MENU OVERLAY
   JS-created fullscreen menu
   ========================================================= */

.tp-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9000;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(15, 24, 20, 0.992),
            rgba(8, 15, 13, 0.998));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 240ms var(--ks-ease),
        visibility 240ms var(--ks-ease);
}

.tp-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tp-mobile-menu::before {
    content: "Auntie Mei Makes It Neat";
    position: absolute;
    left: 24px;
    top: 104px;
    z-index: 1;
    color: var(--ks-accent-soft);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
}

.tp-mobile-menu::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -46px;
    z-index: 0;
    width: 260px;
    height: 260px;
    background:
        repeating-linear-gradient(-45deg,
            rgba(223, 177, 142, 0.09) 0,
            rgba(223, 177, 142, 0.09) 1px,
            transparent 1px,
            transparent 10px);
    opacity: 0.62;
    pointer-events: none;
}

.tp-mobile-menu__brand {
    position: absolute;
    left: 24px;
    top: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 250, 242, 0.92);
    text-decoration: none;
}

.tp-mobile-menu__mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(255, 250, 242, 0.12), rgba(223, 177, 142, 0.12));
    border: 1px solid rgba(223, 177, 142, 0.24);
    color: var(--ks-accent-soft);
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.06em;
}

.tp-mobile-menu__name {
    display: grid;
    gap: 4px;
    line-height: 1;
}

.tp-mobile-menu__name strong {
    color: rgba(255, 250, 242, 0.94);
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.038em;
}

.tp-mobile-menu__name span {
    color: var(--ks-accent-soft);
    font-size: 0.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.tp-mobile-menu__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 250, 242, 0.22);
    background: rgba(255, 250, 242, 0.065);
    color: rgba(255, 250, 242, 0.94);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms var(--ks-ease);
}

.tp-mobile-menu__close:hover,
.tp-mobile-menu__close:focus-visible {
    transform: translateY(-2px);
    background: rgba(223, 177, 142, 0.12);
    border-color: rgba(223, 177, 142, 0.34);
}

.tp-mobile-menu__close span {
    position: absolute;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.tp-mobile-menu__close span:first-child {
    transform: rotate(45deg);
}

.tp-mobile-menu__close span:last-child {
    transform: rotate(-45deg);
}

.tp-mobile-menu__list {
    position: absolute;
    left: 50%;
    top: clamp(148px, 25vh, 188px);
    z-index: 2;
    width: min(520px, calc(100% - 40px));
    max-height: calc(100dvh - 180px);
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
    overflow-y: auto;
    list-style: none;
    counter-reset: mobileNav;
    opacity: 0;
    transform: translate(-50%, 22px);
    transition:
        opacity 260ms var(--ks-ease),
        transform 260ms var(--ks-ease);
}

.tp-mobile-menu.is-open .tp-mobile-menu__list {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tp-mobile-menu__item {
    counter-increment: mobileNav;
}

.tp-mobile-menu__link {
    position: relative;
    width: 100%;
    min-height: 72px;
    padding: 0 24px 0 74px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: rgba(255, 250, 242, 0.06);
    border: 1px solid rgba(255, 250, 242, 0.13);
    color: rgba(255, 250, 242, 0.94);
    text-decoration: none;
    font-size: clamp(1.42rem, 7vw, 2.12rem);
    font-weight: 880;
    line-height: 0.95;
    letter-spacing: -0.058em;
    text-transform: none;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.08);
    transition:
        background-color 190ms ease,
        border-color 190ms ease,
        color 190ms ease,
        transform 190ms var(--ks-ease);
}

.tp-mobile-menu__link::before {
    content: counter(mobileNav, decimal-leading-zero);
    position: absolute;
    left: 22px;
    top: 50%;
    color: var(--ks-accent-soft);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.1em;
    transform: translateY(-50%);
}

.tp-mobile-menu__link::after {
    content: "";
    position: absolute;
    left: 74px;
    right: 24px;
    bottom: 16px;
    height: 2px;
    background: var(--ks-accent-soft);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity 190ms ease,
        transform 190ms var(--ks-ease);
}

.tp-mobile-menu__link:hover,
.tp-mobile-menu__link:focus-visible {
    transform: translateX(5px);
    background: rgba(223, 177, 142, 0.11);
    border-color: rgba(223, 177, 142, 0.3);
    color: var(--ks-accent-soft);
}

.tp-mobile-menu__link:hover::after,
.tp-mobile-menu__link:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}


/* ---------- MOBILE MENU / compact phones ---------- */

@media (max-width: 460px) {
    .tp-mobile-menu::before {
        left: 20px;
        top: 96px;
        font-size: 0.58rem;
    }

    .tp-mobile-menu__brand {
        left: 18px;
        top: 16px;
    }

    .tp-mobile-menu__mark {
        width: 40px;
        height: 40px;
        font-size: 0.5rem;
    }

    .tp-mobile-menu__name strong {
        font-size: 0.9rem;
        line-height: 1;
    }

    .tp-mobile-menu__name span {
        display: none;
    }

    .tp-mobile-menu__close {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }

    .tp-mobile-menu__list {
        width: calc(100% - 32px);
        top: 138px;
        max-height: calc(100dvh - 160px);
        gap: 10px;
    }

    .tp-mobile-menu__link {
        min-height: 66px;
        padding-left: 62px;
        padding-right: 18px;
        font-size: clamp(1.24rem, 8vw, 1.82rem);
    }

    .tp-mobile-menu__link::before {
        left: 18px;
        font-size: 0.66rem;
    }

    .tp-mobile-menu__link::after {
        left: 62px;
        right: 18px;
        bottom: 14px;
    }
}


/* =========================================================
   HEADER / reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .tp-header,
    .tp-header::before,
    .tp-header__inner,
    .tp-header__inner::before,
    .tp-header__brand,
    .tp-header__brand::before,
    .tp-header__brand::after,
    .tp-header__brand-mark,
    .tp-header__brand-copy strong,
    .tp-header__brand-copy span,
    .tp-nav__list,
    .tp-nav__link,
    .tp-nav__link::before,
    .tp-nav__link::after,
    .tp-header__cta,
    .tp-header__cta::after,
    .tp-header__toggle,
    .tp-header__toggle-line,
    .tp-mobile-menu,
    .tp-mobile-menu__list,
    .tp-mobile-menu__close,
    .tp-mobile-menu__link,
    .tp-mobile-menu__link::after {
        transition: none;
    }

    .tp-mobile-menu__link:hover,
    .tp-mobile-menu__link:focus-visible {
        transform: none;
    }
}

/* =========================================================
   08. KITCHEN FOOTER
   Final dark editorial footer
   ========================================================= */


/* ---------- 08. FOOTER / section base ---------- */

.kitchen-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: clamp(72px, 6vw, 104px) 0 0;
    background:
        linear-gradient(135deg,
            rgba(15, 24, 20, 0.985),
            rgba(8, 15, 13, 0.998));
    color: var(--ks-surface);
}

.kitchen-footer::before {
    content: "";
    position: absolute;
    left: -150px;
    top: -170px;
    z-index: -3;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    border: 1px solid rgba(255, 250, 242, 0.055);
    background:
        repeating-linear-gradient(-45deg,
            rgba(223, 177, 142, 0.05) 0,
            rgba(223, 177, 142, 0.05) 1px,
            transparent 1px,
            transparent 10px);
    opacity: 0.55;
    pointer-events: none;
}

.kitchen-footer::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: 46px;
    z-index: -3;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 250, 242, 0.045);
    background:
        linear-gradient(90deg,
            rgba(255, 250, 242, 0.026) 1px,
            transparent 1px),
        linear-gradient(rgba(255, 250, 242, 0.02) 1px,
            transparent 1px);
    background-size: 38px 38px;
    opacity: 0.56;
    transform: rotate(2deg);
    pointer-events: none;
}


/* ---------- 08. FOOTER / layout ---------- */

.kitchen-footer__inner {
    position: relative;
    z-index: 2;
    width: min(1360px, calc(100% - 64px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 0.86fr) minmax(300px, 0.54fr);
    gap: clamp(44px, 5.2vw, 86px);
    align-items: start;
}

.kitchen-footer__inner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -32px;
    height: 1px;
    background:
        linear-gradient(90deg,
            rgba(223, 177, 142, 0),
            rgba(223, 177, 142, 0.38),
            rgba(223, 177, 142, 0));
    pointer-events: none;
}


/* ---------- 08. FOOTER / brand ---------- */

.kitchen-footer__brand {
    position: relative;
    max-width: 520px;
}

.kitchen-footer__logo {
    width: fit-content;
    display: inline-block;
    grid-template-columns: 48px auto;
    align-items: center;
    gap: 14px;
    color: var(--ks-surface);
    text-decoration: none;
}

.kitchen-footer__logo-image {
    width: 220px;
}

.kitchen-footer__mark {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 22%,
            rgba(223, 177, 142, 0.3) 0 12%,
            transparent 13%),
        linear-gradient(135deg, #2a312f 0%, #121816 100%);
    border: 1px solid rgba(223, 177, 142, 0.24);
    color: var(--ks-accent-soft);
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.075em;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 250, 242, 0.065);
}

.kitchen-footer__mark::before {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -18px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    border: 1px solid rgba(255, 250, 242, 0.1);
    pointer-events: none;
}

.kitchen-footer__logo-copy {
    display: grid;
    gap: 6px;
    line-height: 1;
}

.kitchen-footer__logo-copy strong {
    display: block;
    color: var(--ks-surface);
    font-size: clamp(1.38rem, 1.7vw, 1.82rem);
    font-weight: 920;
    line-height: 0.96;
    letter-spacing: -0.052em;
}

.kitchen-footer__logo-copy span {
    display: block;
    color: var(--ks-accent-soft);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.kitchen-footer__text {
    max-width: 475px;
    margin: 27px 0 0;
    color: rgba(255, 250, 242, 0.66);
    font-size: clamp(1rem, 1.02vw, 1.08rem);
    line-height: 1.68;
    letter-spacing: -0.014em;
}

.kitchen-footer__rule {
    position: relative;
    max-width: 440px;
    margin-top: 28px;
    padding-left: 52px;
    color: rgba(255, 250, 242, 0.9);
    font-size: clamp(1.03rem, 1.08vw, 1.16rem);
    font-weight: 760;
    line-height: 1.34;
    letter-spacing: -0.034em;
}

.kitchen-footer__rule::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 34px;
    height: 2px;
    background: var(--ks-accent-soft);
}


/* ---------- 08. FOOTER / nav ---------- */

.kitchen-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3.4vw, 56px);
}

.kitchen-footer__column {
    display: grid;
    align-content: start;
    gap: 12px;
}

.kitchen-footer__column-title {
    display: block;
    margin-bottom: 8px;
    color: var(--ks-accent-soft);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.kitchen-footer__column a {
    position: relative;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    color: rgba(255, 250, 242, 0.7);
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 690;
    line-height: 1.18;
    letter-spacing: -0.018em;
    transition:
        color 180ms ease,
        transform 180ms var(--ks-ease);
}

.kitchen-footer__column a::after {
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--ks-accent-soft);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.kitchen-footer__column a:hover,
.kitchen-footer__column a:focus-visible {
    color: var(--ks-accent-soft);
    transform: translateX(3px);
}

.kitchen-footer__column a:hover::after,
.kitchen-footer__column a:focus-visible::after {
    opacity: 0.72;
    transform: scaleX(1);
}


/* ---------- 08. FOOTER / note card ---------- */

.kitchen-footer__note {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 32px;
    background: rgba(255, 250, 242, 0.055);
    border: 1px solid rgba(255, 250, 242, 0.105);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.11);
}

.kitchen-footer__note::before {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-bottom: 18px;
    background: var(--ks-accent-soft);
}

.kitchen-footer__note::after {
    content: "MEI";
    position: absolute;
    right: 16px;
    bottom: -12px;
    color: rgba(255, 250, 242, 0.035);
    font-size: 5.8rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.1em;
    pointer-events: none;
}

.kitchen-footer__note span {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 13px;
    color: var(--ks-accent-soft);
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.kitchen-footer__note p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(255, 250, 242, 0.76);
    font-size: clamp(1rem, 1.05vw, 1.14rem);
    font-weight: 620;
    line-height: 1.55;
    letter-spacing: -0.018em;
}


/* ---------- 08. FOOTER / bottom ---------- */

.kitchen-footer__bottom {
    position: relative;
    z-index: 2;
    width: min(1360px, calc(100% - 64px));
    margin: clamp(56px, 5vw, 78px) auto 0;
    padding: 24px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-top: 1px solid rgba(255, 250, 242, 0.1);
}

.kitchen-footer__bottom p {
    margin: 0;
    color: rgba(255, 250, 242, 0.48);
    font-size: 0.78rem;
    font-weight: 690;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.kitchen-footer__bottom a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 250, 242, 0.68);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition:
        color 180ms ease,
        transform 180ms var(--ks-ease);
}

.kitchen-footer__bottom a::after {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.72;
    transition: width 180ms ease;
}

.kitchen-footer__bottom a:hover,
.kitchen-footer__bottom a:focus-visible {
    color: var(--ks-accent-soft);
    transform: translateY(-2px);
}

.kitchen-footer__bottom a:hover::after,
.kitchen-footer__bottom a:focus-visible::after {
    width: 48px;
}


/* =========================================================
   08. KITCHEN FOOTER / responsive
   ========================================================= */

@media (max-width: 1180px) {
    .kitchen-footer__inner {
        width: min(980px, calc(100% - 48px));
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .kitchen-footer__brand {
        max-width: 760px;
    }

    .kitchen-footer__text,
    .kitchen-footer__rule {
        max-width: 650px;
    }

    .kitchen-footer__nav {
        max-width: 720px;
    }

    .kitchen-footer__note {
        max-width: 560px;
    }

    .kitchen-footer__bottom {
        width: min(980px, calc(100% - 48px));
    }
}

@media (max-width: 760px) {
    .kitchen-footer {
        padding-top: 68px;
    }

    .kitchen-footer__inner,
    .kitchen-footer__bottom {
        width: min(100% - 32px, var(--ks-container));
    }

    .kitchen-footer__inner {
        gap: 42px;
    }

    .kitchen-footer__logo {
        grid-template-columns: 44px auto;
        gap: 12px;
    }

    .kitchen-footer__mark {
        width: 44px;
        height: 44px;
        font-size: 0.54rem;
    }

    .kitchen-footer__logo-copy strong {
        font-size: 1.34rem;
    }

    .kitchen-footer__logo-copy span {
        font-size: 0.52rem;
    }

    .kitchen-footer__text {
        margin-top: 23px;
        font-size: 0.96rem;
        line-height: 1.62;
    }

    .kitchen-footer__rule {
        margin-top: 24px;
        padding-left: 42px;
        font-size: 1rem;
    }

    .kitchen-footer__rule::before {
        width: 28px;
    }

    .kitchen-footer__nav {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .kitchen-footer__column {
        gap: 11px;
    }

    .kitchen-footer__note {
        padding: 26px 24px 28px;
    }

    .kitchen-footer__note p {
        font-size: 0.98rem;
    }

    .kitchen-footer__bottom {
        margin-top: 48px;
        padding: 22px 0 26px;
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 460px) {
    .kitchen-footer__logo-copy strong {
        font-size: 1.22rem;
    }

    .kitchen-footer__logo-copy span {
        letter-spacing: 0.14em;
    }

    .kitchen-footer__rule {
        padding-left: 0;
    }

    .kitchen-footer__rule::before {
        position: static;
        display: block;
        margin-bottom: 14px;
    }

    .kitchen-footer__note::after {
        right: 8px;
        bottom: -8px;
        font-size: 4.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kitchen-footer__column a,
    .kitchen-footer__column a::after,
    .kitchen-footer__bottom a,
    .kitchen-footer__bottom a::after {
        transition: none;
    }

    .kitchen-footer__column a:hover,
    .kitchen-footer__column a:focus-visible,
    .kitchen-footer__bottom a:hover,
    .kitchen-footer__bottom a:focus-visible {
        transform: none;
    }
}