:root {
    --porcelain: #ffffff;
    --bone: #f8f6ef;
    --obsidian: #191817;
    --ink: #000000;
    --graphite: #5b5a57;
    --mist: #dfdfdc;
    --blue: #1237c7;
    --blue-deep: #08288f;
    --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --page-pad: clamp(20px, 3vw, 48px);
    --section-space: clamp(72px, 10vw, 144px);
    --header-height: 76px;
    --ease: cubic-bezier(.2, .75, .25, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    margin: 0;
    background: var(--porcelain);
    color: var(--obsidian);
    font-family: var(--font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.nav-open {
    overflow: hidden;
}

button, input, select {
    font: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

svg {
    display: block;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: -60px;
    left: 16px;
    background: var(--ink);
    color: white;
    padding: 11px 18px;
    border-radius: 40px;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 14px;
}

:focus-visible {
    outline: 2px solid var(--obsidian);
    outline-offset: 4px;
}

.eyebrow {
    margin: 0 0 18px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow-light {
    color: rgba(255, 255, 255, .72);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--header-height);
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--mist);
    backdrop-filter: blur(14px);
}

.header-inner {
    min-height: var(--header-height);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--page-pad);
    display: grid;
    grid-template-columns: auto minmax(170px, 1fr) auto auto;
    align-items: center;
    gap: clamp(18px, 3vw, 52px);
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--obsidian);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.menu-lines {
    width: 19px;
    display: grid;
    gap: 5px;
}

.menu-lines i {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform .3s var(--ease);
}

.brand {
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    line-height: 1;
}

.brand-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.brand-sub {
    margin-top: 6px;
    color: var(--graphite);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.8vw, 44px);
}

.primary-nav a {
    position: relative;
    padding: 28px 0 25px;
    color: var(--graphite);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
}

.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 18px;
    height: 1px;
    background: var(--ink);
    transition: right .35s var(--ease);
}

.primary-nav a:hover, .primary-nav a[aria-current="page"] {
    color: var(--ink);
}

.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after {
    right: 0;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--obsidian);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.header-action svg {
    transition: transform 0.75s var(--ease);
}

.header-action:hover svg {
    transform: scale(1.12) rotate(-4deg);
}

.cart-count {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid var(--obsidian);
    border-radius: 40px;
    font-size: 10px;
}

/* Shared layout and typography */
main {
    overflow: hidden;
}

.catalog-page {
    display: grid;
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    gap: 0;
}

.catalog-page > .site-header {
    grid-area: header;
}

.catalog-page > .catalog-main {
    grid-area: main;
}

.catalog-page > .site-footer {
    grid-area: footer;
}

.catalog-main {
    display: grid;
    grid-template-areas: "hero" "catalog" "editorial";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    align-content: start;
    gap: 0;
    min-width: 0;
}

.catalog-main > .catalog-hero {
    grid-area: hero;
}

.catalog-main > .catalog-section {
    grid-area: catalog;
    width: 100%;
}

.catalog-main > .editorial-strip {
    grid-area: editorial;
}

.full-bleed {
    width: 100%;
}

.content-section, .catalog-section, .cta-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--section-space) var(--page-pad);
}

.section-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr);
    align-items: end;
    gap: 48px;
    margin-bottom: clamp(48px, 7vw, 92px);
}

.section-intro h2, .cta-section h2, .visit-address h2, .empty-state h2 {
    margin: 0;
    font-size: clamp(34px, 5vw, 68px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.058em;
}

.section-intro > p {
    max-width: 45ch;
    justify-self: end;
    margin: 0;
    color: var(--graphite);
    font-size: 15px;
    line-height: 1.75;
}

.pill-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 27px;
    border: 1px solid var(--obsidian);
    border-radius: 40px;
    background: transparent;
    color: var(--obsidian);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}

.pill-button:hover {
    background: var(--obsidian);
    color: white;
    transform: translateY(-2px);
}

.pill-button-light {
    border-color: white;
    color: white;
}

.pill-button-light:hover {
    background: white;
    color: var(--obsidian);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--obsidian);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.text-link span {
    transition: transform .3s var(--ease);
}

.text-link:hover span {
    transform: translate(4px, -4px);
}

/* Motion */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.service-grid [data-reveal]:nth-child(2), .contact-grid [data-reveal]:nth-child(2) {
    transition-delay: .12s;
}

.service-grid [data-reveal]:nth-child(3), .contact-grid [data-reveal]:nth-child(3) {
    transition-delay: .24s;
}

/* Catalog hero */
.catalog-hero {
    position: relative;
    min-height: min(760px, calc(100vh - var(--header-height)));
    padding: clamp(70px, 9vw, 130px) var(--page-pad);
    display: grid;
    grid-template-columns: minmax(300px, .85fr) 1.15fr;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    background: var(--blue);
    color: white;
}

.catalog-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}

.catalog-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.catalog-hero h1, .page-hero h1, .visit-hero h1 {
    margin: 0;
    font-size: clamp(52px, 7.4vw, 108px);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.069em;
}

.catalog-hero-copy > p:last-child, .page-hero-copy > p:last-child, .visit-hero-copy > p:last-child {
    max-width: 47ch;
    margin: 34px 0 0;
    color: rgba(255, 255, 255, .74);
    font-size: 16px;
    line-height: 1.7;
}

.hero-object {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(45vw, 570px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.hero-object svg {
    position: relative;
    z-index: 2;
    width: 62%;
    overflow: visible;
    animation: float-object 6s ease-in-out infinite;
}

.hero-object svg * {
    fill: none;
    stroke: white;
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: .9;
}

.hero-object svg .hero-object-accent {
    stroke-width: 3;
}

.orbit {
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.orbit::before {
    content: "";
    position: absolute;
    top: 48%;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.orbit-a {
    animation: orbit-spin 18s linear infinite;
}

.orbit-b {
    inset: 20%;
    border-style: dashed;
    animation: orbit-spin 12s linear infinite reverse;
}

.scroll-cue {
    position: absolute;
    z-index: 3;
    left: var(--page-pad);
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-decoration: none;
    text-transform: uppercase;
}

.scroll-cue svg {
    animation: scroll-cue 1.6s ease-in-out infinite;
}

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

@keyframes float-object {
    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes scroll-cue {
    50% {
        transform: translateY(6px);
    }
}

/* Catalog */
.catalog-section {
    scroll-margin-top: var(--header-height);
}

.search-form {
    position: relative;
    margin-bottom: 42px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--obsidian);
}

.search-icon {
    color: var(--graphite);
}

.search-form input {
    width: 100%;
    min-width: 0;
    padding: 18px 0 20px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--obsidian);
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 400;
    letter-spacing: -.035em;
}

.search-form input::placeholder {
    color: #9b9a96;
    opacity: 1;
}

.search-hint {
    color: var(--graphite);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.filter-panel {
    margin-bottom: 36px;
    padding: 28px 0 30px;
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
}

.filter-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.filter-panel-heading .eyebrow {
    margin: 0;
}

.text-action {
    padding: 3px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font-size: 11px;
    cursor: pointer;
}

.filters-bar {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, minmax(130px, 1fr)) 1.15fr;
    gap: clamp(18px, 2vw, 34px);
    align-items: end;
}

.filter-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.filter-group > label:not(.check-control) {
    color: var(--graphite);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.filter-group select, .filter-group input[type="text"] {
    width: 100%;
    min-width: 0;
    padding: 9px 24px 9px 0;
    border: 0;
    border-bottom: 1px solid var(--mist);
    border-radius: 0;
    outline: 0;
    background-color: transparent;
    color: var(--obsidian);
    font-size: 13px;
    transition: border-color .25s ease;
}

.filter-group select:focus, .filter-group input:focus {
    border-color: var(--obsidian);
}

.filter-options {
    align-self: stretch;
    align-content: end;
    gap: 12px;
}

.radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.check-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--graphite);
    font-size: 11px;
    cursor: pointer;
}

.check-control input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--obsidian);
}

.results-row {
    margin: 0 0 36px;
}

.results-status {
    margin: 0;
    color: var(--graphite);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: clamp(2px, 2.3vw, 36px);
    row-gap: clamp(20px, 7vw, 94px);
}

.product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    animation: card-enter .62s var(--ease) both;
}

.product-card:nth-child(1) {
    animation-delay: 0ms;
}

.product-card:nth-child(2) {
    animation-delay: 55ms;
}

.product-card:nth-child(3) {
    animation-delay: 110ms;
}

.product-card:nth-child(4) {
    animation-delay: 165ms;
}

.product-card:nth-child(5) {
    animation-delay: 220ms;
}

.product-card:nth-child(6) {
    animation-delay: 275ms;
}

.product-card:nth-child(7) {
    animation-delay: 330ms;
}

.product-card:nth-child(8) {
    animation-delay: 385ms;
}

.product-card:nth-child(9) {
    animation-delay: 440ms;
}

.product-card:nth-child(10) {
    animation-delay: 495ms;
}

.product-card:nth-child(11) {
    animation-delay: 550ms;
}

.product-card:nth-child(12) {
    animation-delay: 605ms;
}

.product-card:nth-child(13) {
    animation-delay: 660ms;
}

.product-card:nth-child(14) {
    animation-delay: 715ms;
}

.product-card:nth-child(15) {
    animation-delay: 770ms;
}

.product-card:nth-child(16) {
    animation-delay: 825ms;
}

.product-card:nth-child(17) {
    animation-delay: 880ms;
}

.product-card:nth-child(18) {
    animation-delay: 935ms;
}

.product-card:nth-child(19) {
    animation-delay: 990ms;
}

.product-card:nth-child(20) {
    animation-delay: 1045ms;
}

.product-card:nth-child(21) {
    animation-delay: 1100ms;
}

.product-card:nth-child(22) {
    animation-delay: 1155ms;
}

.product-card:nth-child(23) {
    animation-delay: 1210ms;
}

.product-card:nth-child(24) {
    animation-delay: 1265ms;
}

.product-card:nth-child(25) {
    animation-delay: 1320ms;
}

.product-card:nth-child(26) {
    animation-delay: 1375ms;
}

.product-card:nth-child(27) {
    animation-delay: 1430ms;
}

.product-card:nth-child(28) {
    animation-delay: 1485ms;
}

.product-card:nth-child(29) {
    animation-delay: 1540ms;
}

.product-card:nth-child(30) {
    animation-delay: 1595ms;
}

.product-card:nth-child(31) {
    animation-delay: 1650ms;
}

.product-card:nth-child(32) {
    animation-delay: 1705ms;
}

.product-card:nth-child(33) {
    animation-delay: 1760ms;
}

.product-card:nth-child(34) {
    animation-delay: 1815ms;
}

.product-card:nth-child(35) {
    animation-delay: 1870ms;
}

.product-card:nth-child(36) {
    animation-delay: 1925ms;
}

.product-card:nth-child(37) {
    animation-delay: 1980ms;
}

.product-card:nth-child(38) {
    animation-delay: 2035ms;
}

.product-card:nth-child(39) {
    animation-delay: 2090ms;
}

.product-card:nth-child(40) {
    animation-delay: 2145ms;
}

.product-card:nth-child(41) {
    animation-delay: 2200ms;
}

.product-card:nth-child(42) {
    animation-delay: 2255ms;
}

.product-card:nth-child(43) {
    animation-delay: 2310ms;
}

.product-card:nth-child(44) {
    animation-delay: 2365ms;
}

.product-card:nth-child(45) {
    animation-delay: 2420ms;
}

.product-card:nth-child(46) {
    animation-delay: 2475ms;
}

.product-card:nth-child(47) {
    animation-delay: 2530ms;
}

.product-card:nth-child(48) {
    animation-delay: 2585ms;
}

.product-card:nth-child(49) {
    animation-delay: 2640ms;
}

.product-card:nth-child(50) {
    animation-delay: 2695ms;
}

.product-card:nth-child(51) {
    animation-delay: 2750ms;
}

.product-card:nth-child(52) {
    animation-delay: 2805ms;
}

.product-card:nth-child(53) {
    animation-delay: 2860ms;
}

.product-card:nth-child(54) {
    animation-delay: 2915ms;
}

.product-card:nth-child(55) {
    animation-delay: 2970ms;
}

.product-card:nth-child(56) {
    animation-delay: 3025ms;
}

.product-card:nth-child(57) {
    animation-delay: 3080ms;
}

.product-card:nth-child(58) {
    animation-delay: 3135ms;
}

.product-card:nth-child(59) {
    animation-delay: 3190ms;
}

.product-card:nth-child(60) {
    animation-delay: 3245ms;
}

.product-card:nth-child(61) {
    animation-delay: 3300ms;
}

.product-card:nth-child(62) {
    animation-delay: 3355ms;
}

.product-card:nth-child(63) {
    animation-delay: 3410ms;
}

.product-card:nth-child(64) {
    animation-delay: 3465ms;
}

.product-card:nth-child(65) {
    animation-delay: 3520ms;
}

.product-card:nth-child(66) {
    animation-delay: 3575ms;
}

.product-card:nth-child(67) {
    animation-delay: 3630ms;
}

.product-card:nth-child(68) {
    animation-delay: 3685ms;
}

.product-card:nth-child(69) {
    animation-delay: 3740ms;
}

.product-card:nth-child(70) {
    animation-delay: 3795ms;
}

.product-card:nth-child(71) {
    animation-delay: 3850ms;
}

.product-card:nth-child(72) {
    animation-delay: 3905ms;
}

.product-card:nth-child(73) {
    animation-delay: 3960ms;
}

.product-card:nth-child(74) {
    animation-delay: 4015ms;
}

.product-card:nth-child(75) {
    animation-delay: 4070ms;
}

.product-card:nth-child(76) {
    animation-delay: 4125ms;
}

.product-card:nth-child(77) {
    animation-delay: 4180ms;
}

.product-card:nth-child(78) {
    animation-delay: 4235ms;
}

.product-card:nth-child(79) {
    animation-delay: 4290ms;
}

.product-card:nth-child(80) {
    animation-delay: 4345ms;
}

.product-card:nth-child(81) {
    animation-delay: 4400ms;
}

.product-card:nth-child(82) {
    animation-delay: 4455ms;
}

.product-card:nth-child(83) {
    animation-delay: 4510ms;
}

.product-card:nth-child(84) {
    animation-delay: 4565ms;
}

.product-card:nth-child(85) {
    animation-delay: 4620ms;
}

.product-card:nth-child(86) {
    animation-delay: 4675ms;
}

.product-card:nth-child(87) {
    animation-delay: 4730ms;
}

.product-card:nth-child(88) {
    animation-delay: 4785ms;
}

.product-card:nth-child(89) {
    animation-delay: 4840ms;
}

.product-card:nth-child(90) {
    animation-delay: 4895ms;
}

.product-card:nth-child(91) {
    animation-delay: 4950ms;
}

.product-card:nth-child(92) {
    animation-delay: 5005ms;
}

.product-card:nth-child(93) {
    animation-delay: 5060ms;
}

.product-card:nth-child(94) {
    animation-delay: 5115ms;
}

.product-card:nth-child(95) {
    animation-delay: 5170ms;
}

.product-card:nth-child(96) {
    animation-delay: 5225ms;
}

.product-card:nth-child(97) {
    animation-delay: 5280ms;
}

.product-card:nth-child(98) {
    animation-delay: 5335ms;
}

.product-card:nth-child(99) {
    animation-delay: 5390ms;
}

.product-card:nth-child(100) {
    animation-delay: 5445ms;
}

@keyframes card-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

.product-media {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--bone);
    color: var(--obsidian);
}

.product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color .35s ease;
}

.product-media svg {
    width: 42%;
    height: 42%;
    transition: transform .55s var(--ease), color .35s ease;
}

.product-media svg * {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-card:hover .product-media::after {
    border-color: var(--obsidian);
}

.product-card:hover .product-media svg {
    transform: scale(1.09) rotate(-3deg);
}

.product-body {
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-badge-row {
    min-height: 17px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.product-badge {
    color: var(--graphite);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.product-badge-web {
    padding-left: 8px;
    border-left: 1px solid var(--mist);
    color: var(--obsidian);
}

.product-desc {
    min-height: 60px;
    margin: 12px 0 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.product-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 18px;
    color: var(--graphite);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .04em;
}

.product-meta strong {
    color: inherit;
    font-weight: 500;
}

.product-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 8px;
}

.qty-input {
    width: 48px;
    min-height: 40px;
    border: 1px solid var(--mist);
    border-radius: 40px;
    background: transparent;
    text-align: center;
    font-size: 12px;
}

.btn-primary {
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--obsidian);
    border-radius: 40px;
    background: transparent;
    color: var(--obsidian);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.btn-primary:hover {
    background: var(--obsidian);
    color: white;
    transform: translateY(-2px);
}

.empty-state {
    padding: 80px 20px;
    text-align: center;
    background: var(--bone);
}

.empty-state p:not(.eyebrow) {
    margin: 22px auto;
    color: var(--graphite);
}

.pagination-bar {
    margin-top: 78px;
    padding-top: 22px;
    border-top: 1px solid var(--mist);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.per-page {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--graphite);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.per-page select {
    padding: 6px 22px 6px 8px;
    border: 0;
    border-bottom: 1px solid var(--mist);
    background: transparent;
}

.page-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-btn {
    min-width: 35px;
    height: 35px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--graphite);
    font-size: 12px;
    cursor: pointer;
    transition: border-color .25s, color .25s;
}

.page-btn:hover:not(:disabled), .page-btn[aria-current="page"] {
    border-color: var(--obsidian);
    color: var(--obsidian);
}

.page-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.page-ellipsis {
    padding: 0 5px;
    color: var(--graphite);
    font-size: 12px;
}

.editorial-strip {
    position: relative;
    min-height: 590px;
    padding: clamp(84px, 10vw, 150px) var(--page-pad);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--obsidian);
    color: white;
}

.editorial-strip > div:first-child {
    position: relative;
    z-index: 2;
    max-width: 850px;
}

.editorial-strip h2 {
    margin: 0 0 45px;
    font-size: clamp(43px, 6.4vw, 90px);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.062em;
}

.editorial-code {
    position: absolute;
    right: -2vw;
    bottom: -6vw;
    color: rgba(255, 255, 255, .045);
    font-size: clamp(120px, 23vw, 350px);
    font-weight: 700;
    letter-spacing: -.09em;
    white-space: nowrap;
}

/* Cart */
.cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(0, 0, 0, .5);
    opacity: 1;
    animation: fade-in .3s ease;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

.cart-drawer {
    position: fixed;
    z-index: 80;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(460px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--porcelain);
    transform: translateX(100%);
    transition: transform .5s var(--ease);
}

.cart-drawer.is-open {
    transform: none;
}

.cart-drawer-header {
    padding: 34px 32px 28px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    border-bottom: 1px solid var(--mist);
}

.cart-drawer-header .eyebrow {
    margin-bottom: 7px;
}

.cart-drawer-header h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.05em;
}

.cart-close {
    padding: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .3s var(--ease);
}

.cart-close:hover {
    transform: rotate(90deg);
}

.cart-drawer-body {
    flex: 1;
    padding: 24px 32px;
    overflow-y: auto;
}

.cart-empty {
    max-width: 27ch;
    margin: 90px auto 0;
    color: var(--graphite);
    text-align: center;
    font-size: 14px;
    line-height: 1.7;
}

.cart-line {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--mist);
}

.cart-line-icon {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--bone);
    color: var(--graphite);
}

.cart-line-icon svg {
    width: 50%;
    height: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
}

.cart-line-desc {
    margin: 0 0 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.cart-line-meta {
    margin: 0 0 12px;
    color: var(--graphite);
    font-size: 9px;
    letter-spacing: .04em;
}

.cart-line-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--mist);
    border-radius: 40px;
    overflow: hidden;
}

.qty-stepper button {
    width: 27px;
    height: 27px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.qty-stepper span {
    min-width: 22px;
    text-align: center;
    font-size: 11px;
}

.cart-line-remove {
    padding: 3px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    font-size: 10px;
    cursor: pointer;
}

.toast {
    position: fixed;
    z-index: 100;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: 40px;
    background: var(--obsidian);
    color: white;
    font-size: 12px;
    animation: toast-in .35s var(--ease);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }
}

/* Services */
.page-hero {
    min-height: 690px;
    padding: clamp(80px, 10vw, 145px) var(--page-pad);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: center;
    gap: 40px;
    background: var(--bone);
}

.page-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.page-hero h1 {
    font-size: clamp(54px, 7vw, 103px);
}

.page-hero-copy > p:last-child {
    color: var(--graphite);
}

.service-sculpture {
    position: relative;
    justify-self: center;
    width: min(37vw, 480px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.coil {
    position: absolute;
    width: 64%;
    height: 22%;
    border: 1px solid var(--obsidian);
    border-radius: 50%;
    transform: rotate(-23deg);
    animation: coil-breathe 4s ease-in-out infinite;
}

.coil-two {
    width: 48%;
    animation-delay: -.7s;
}

.coil-three {
    width: 32%;
    animation-delay: -1.4s;
}

.service-sculpture i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes coil-breathe {
    50% {
        transform: rotate(-18deg) scale(1.06);
    }
}

@keyframes pulse-dot {
    50% {
        transform: scale(1.55);
    }
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--mist);
}

.service-card {
    position: relative;
    min-height: 500px;
    padding: 35px clamp(22px, 3vw, 44px) 38px 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mist);
}

.service-card + .service-card {
    padding-left: clamp(22px, 3vw, 44px);
}

.service-card:last-child {
    border-right: 0;
}

.service-number {
    color: var(--graphite);
    font-size: 10px;
    letter-spacing: .14em;
}

.service-card svg {
    width: 66px;
    height: 66px;
    margin: 70px 0 50px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    transition: transform .5s var(--ease);
}

.service-card:hover svg {
    transform: rotate(-8deg) scale(1.08);
}

.service-card h3 {
    max-width: 12ch;
    margin: 0 0 18px;
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.service-card p {
    max-width: 36ch;
    margin: 0 0 30px;
    color: var(--graphite);
    font-size: 14px;
    line-height: 1.7;
}

.service-card .text-link {
    margin-top: auto;
}

.process-section {
    min-height: 690px;
    padding: var(--section-space) var(--page-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 10vw, 170px);
    background: var(--blue);
    color: white;
}

.process-heading h2 {
    margin: 0;
    font-size: clamp(48px, 6.5vw, 88px);
    font-weight: 500;
    line-height: .92;
    letter-spacing: -.06em;
}

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

.process-list li {
    padding: 26px 0;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 24px;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

.process-list li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.process-list li > span {
    color: rgba(255, 255, 255, .6);
    font-size: 10px;
    letter-spacing: .15em;
}

.process-list h3 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.035em;
}

.process-list p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 14px;
}

.cta-section {
    padding-top: clamp(100px, 14vw, 200px);
    padding-bottom: clamp(100px, 14vw, 200px);
    text-align: center;
}

.cta-section h2 {
    margin-bottom: 48px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Visit */
.visit-hero {
    position: relative;
    min-height: 720px;
    padding: clamp(85px, 10vw, 150px) var(--page-pad);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 50px;
    overflow: hidden;
    background: var(--blue);
    color: white;
}

.visit-hero-copy {
    position: relative;
    z-index: 2;
}

.map-art {
    position: relative;
    justify-self: stretch;
    height: 510px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
}

.map-line {
    position: absolute;
    display: block;
    width: 140%;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    transform-origin: center;
}

.line-a {
    top: 25%;
    left: -20%;
    transform: rotate(28deg);
}

.line-b {
    top: 62%;
    left: -14%;
    transform: rotate(-18deg);
}

.line-c {
    top: 48%;
    left: -18%;
    transform: rotate(73deg);
}

.map-art::before, .map-art::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.map-art::before {
    width: 370px;
    height: 370px;
    left: -90px;
    top: -80px;
}

.map-art::after {
    width: 280px;
    height: 280px;
    right: -110px;
    bottom: -50px;
}

.map-pin {
    position: absolute;
    z-index: 3;
    left: 56%;
    top: 44%;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    animation: pin-bob 2.7s ease-in-out infinite;
}

.map-pin i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.map-label {
    position: absolute;
    z-index: 3;
    left: calc(56% + 52px);
    top: calc(44% + 12px);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@keyframes pin-bob {
    50% {
        transform: translateY(-9px) rotate(-45deg);
    }
}

.visit-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 10vw, 180px);
    align-items: start;
}

.visit-address p:not(.eyebrow) {
    margin: 26px 0 38px;
    color: var(--graphite);
    font-size: 16px;
    line-height: 1.7;
}

.schedule {
    padding-top: 2px;
}

.schedule-row {
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--mist);
    font-size: 14px;
}

.schedule-row strong {
    font-weight: 500;
}

.schedule-note {
    margin: 24px 0 0;
    color: var(--graphite);
    font-size: 11px;
    line-height: 1.6;
}

.contact-grid {
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.contact-card {
    position: relative;
    min-height: 315px;
    padding: 35px 35px 32px 0;
    border-top: 1px solid var(--mist);
    border-right: 1px solid var(--mist);
    color: inherit;
    text-decoration: none;
    transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease);
}

.contact-card + .contact-card {
    padding-left: 35px;
}

.contact-card:last-child {
    border-right: 0;
}

.contact-card h3 {
    margin: 80px 0 12px;
    font-size: clamp(25px, 2.4vw, 36px);
    font-weight: 500;
    letter-spacing: -.045em;
}

.contact-card p {
    max-width: 31ch;
    margin: 0;
    color: var(--graphite);
    font-size: 13px;
    line-height: 1.7;
}

.contact-arrow {
    position: absolute;
    right: 34px;
    top: 32px;
    font-size: 21px;
    transition: transform .35s var(--ease);
}

.contact-card:hover {
    background: var(--obsidian);
    color: white;
    padding-left: 35px;
}

.contact-card:hover p {
    color: rgba(255, 255, 255, .66);
}

.contact-card:hover .contact-arrow {
    transform: translate(5px, -5px);
}

.visit-tip {
    padding: clamp(90px, 11vw, 160px) var(--page-pad);
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 60px;
    background: var(--bone);
}

.visit-tip h2 {
    margin: 0 0 26px;
    font-size: clamp(42px, 6vw, 84px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.06em;
}

.visit-tip p:not(.eyebrow) {
    max-width: 50ch;
    margin: 0;
    color: var(--graphite);
}

.visit-tip > .pill-button {
    flex: 0 0 auto;
}

/* Footer */
.site-footer {
    padding: 74px var(--page-pad) 24px;
    background: var(--blue-deep);
    color: white;
}

.footer-inner {
    max-width: 1440px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: clamp(70px, 12vw, 180px);
}

.footer-brand {
    max-width: 340px;
}

.footer-brand .brand-name {
    font-size: 25px;
}

.footer-brand p {
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    line-height: 1.7;
}

.footer-links {
    min-width: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}

.footer-links .eyebrow {
    margin-bottom: 8px;
}

.footer-links a {
    position: relative;
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
    text-decoration: none;
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: white;
    transition: right .3s var(--ease);
}

.footer-links a:hover {
    color: white;
}

.footer-links a:hover::after {
    right: 0;
}

.footer-bottom {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 1180px) {
    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filters-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .filter-wide {
        grid-column: span 2;
    }

    .filter-options {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    :root {
        --header-height: 68px;
    }

    .header-inner {
        grid-template-columns: 1fr auto 1fr;
    }

    .menu-toggle {
        display: inline-flex;
        justify-self: start;
    }

    .brand {
        justify-self: center;
        align-items: center;
    }

    .brand-sub {
        display: none;
    }

    .header-action {
        justify-self: end;
    }

    .primary-nav {
        position: fixed;
        inset: var(--header-height) 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        background: var(--porcelain);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .5s var(--ease), visibility .5s;
    }

    .primary-nav a {
        padding: 13px 0;
        font-size: clamp(27px, 7vw, 46px);
        font-weight: 500;
        letter-spacing: -.04em;
        text-transform: none;
    }

    .primary-nav a::after {
        bottom: 7px;
    }

    body.nav-open .primary-nav {
        transform: none;
        visibility: visible;
    }

    body.nav-open .menu-lines i:first-child {
        transform: translateY(3px) rotate(45deg);
    }

    body.nav-open .menu-lines i:last-child {
        transform: translateY(-3px) rotate(-45deg);
    }

    .catalog-hero, .page-hero, .visit-hero {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .catalog-hero {
        padding-top: 90px;
        padding-bottom: 100px;
    }

    .hero-object {
        position: absolute;
        right: -10vw;
        bottom: -7vw;
        width: 52vw;
        opacity: .42;
    }

    .page-hero {
        padding-top: 100px;
    }

    .service-sculpture {
        width: min(70vw, 420px);
    }

    .map-art {
        height: 390px;
    }

    .section-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 26px;
    }

    .section-intro > p {
        justify-self: start;
    }

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

    .service-card {
        min-height: 440px;
    }

    .process-section {
        grid-template-columns: 1fr;
    }

    .visit-tip {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 700px) {
    .header-action > span:not(.cart-count) {
        display: none;
    }

    .header-inner {
        gap: 12px;
    }

    .catalog-hero h1, .page-hero h1, .visit-hero h1 {
        font-size: clamp(48px, 14vw, 74px);
    }

    .catalog-hero h1 {
        font-size: clamp(46px, 9.5vw, 58px);
    }

    .search-form {
        grid-template-columns: auto 1fr;
    }

    .search-hint {
        display: none;
    }

    .filters-bar {
        grid-template-columns: 1fr 1fr;
    }

    .filter-wide, .filter-options {
        grid-column: span 2;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 15px;
    }

    .product-desc {
        min-height: 70px;
        font-size: 13px;
    }

    .product-actions {
        grid-template-columns: 42px 1fr;
    }

    .qty-input {
        width: 42px;
    }

    .editorial-strip {
        min-height: 500px;
    }

    .service-grid {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .service-card, .service-card + .service-card {
        min-height: 410px;
        padding: 30px 0;
        border-top: 1px solid var(--mist);
        border-right: 0;
    }

    .service-card svg {
        margin: 45px 0 35px;
    }

    .visit-details {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-card, .contact-card + .contact-card {
        min-height: 260px;
        padding: 30px 0;
        border-right: 0;
    }

    .contact-card:hover {
        padding-left: 22px;
    }

    .contact-card h3 {
        margin-top: 62px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 55px 30px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .menu-toggle > span:last-child {
        display: none;
    }

    .brand-name {
        font-size: 16px;
    }

    .catalog-section, .content-section, .cta-section {
        padding-left: 18px;
        padding-right: 18px;
    }

    .catalog-hero, .page-hero, .visit-hero, .editorial-strip, .process-section, .visit-tip {
        padding-left: 18px;
        padding-right: 18px;
    }

    .filters-bar {
        grid-template-columns: 1fr;
    }

    .filter-wide, .filter-options {
        grid-column: auto;
    }

    .product-grid {
        grid-template-columns: 1fr;
        row-gap: 58px;
    }

    .product-media {
        aspect-ratio: 1.2;
    }

    .product-desc {
        min-height: auto;
    }

    .pagination-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-controls {
        width: 100%;
        justify-content: center;
    }

    .cart-drawer-header, .cart-drawer-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .map-art {
        height: 310px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}