/* ==========================================================================
   Baldogres — design system

   - Page is white. Sections are full-width bands that alternate white / tint
     (.band, .band--tint) so each one reads as its own block.
   - --frame  thin inset around full-bleed frames (hero, footer)
   - --pad    inner padding inside frames; the header aligns to it
   - .container  content width for every band, same left/right edges
   - .card    tinted surface on white bands, white surface on tinted bands
   ========================================================================== */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
	--navy: #002368;
	--navy-deep: #001a4d;
	--ink: #111518;
	--text: #3f4245;
	--muted: #717175;
	--line: #cfcfcf;
	--hairline: rgba(17, 21, 24, 0.1);
	--tint: #f4f4f5;
	--white: #fff;

	--serif: "Instrument Serif", "Times New Roman", serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-xs: 0.6875rem;
	--fs-sm: 0.8125rem;
	--fs-base: 0.9375rem;
	--fs-heading: clamp(1.875rem, 1.5rem + 1.3vw, 2.625rem);
	--fs-hero: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);

	--frame: clamp(0.5rem, 0.3rem + 0.6vw, 0.875rem);
	--pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);
	--inset: clamp(1rem, 0.5rem + 2vw, 2.25rem);
	--max: 1320px;
	--section: clamp(4rem, 2.8rem + 4.5vw, 7rem);
	--gap: 1rem;
	--radius: 16px;
	--radius-sm: 10px;

	--ease: cubic-bezier(0.25, 0.8, 0.25, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--sans); font-size: var(--fs-base); line-height: 1.6;
	color: var(--text); background: var(--white);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; line-height: 1.2; }
em { font-style: italic; }
:focus-visible { outline: 1.5px solid var(--navy); outline-offset: 3px; }
.icon { width: 1em; height: 1em; flex: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300; padding: 0.6rem 1rem; background: var(--navy); color: #fff; font-size: var(--fs-sm); border-radius: 999px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container { width: 100%; max-width: calc(var(--max) + var(--inset) * 2); margin-inline: auto; padding-inline: var(--inset); }
.band { padding-block: var(--section); background: var(--white); }
.band--tint { background: var(--tint); }

/* ==========================================================================
   Type
   ========================================================================== */
.heading, .hero__title, .frame__title, .ctile__title, .card__title--serif, .mobile-menu__list a {
	font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; color: var(--ink);
}
.heading { font-size: var(--fs-heading); line-height: 1.05; }

.eyebrow { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.eyebrow--light { color: rgba(255, 255, 255, 0.78); }

.text-link {
	display: inline-block; padding-bottom: 2px; font-size: var(--fs-sm); color: var(--ink);
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.5s var(--ease), color 0.3s;
}
.text-link:hover { color: var(--navy); background-size: 0 1px; background-position: 100% 100%; }
.text-link--light, .text-link--light:hover { color: #fff; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	height: 44px; padding: 0 1.4rem; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
	border-radius: 999px; border: 1px solid transparent;
	transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn--sm { height: 38px; padding: 0 1.1rem; font-size: 0.78rem; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: rgba(255, 255, 255, 0.85); }

.round-btn {
	display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
	border: 1px solid var(--line); color: var(--ink);
	transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s;
}
.round-btn .icon { width: 15px; height: 15px; }
.round-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.round-btn[disabled] { opacity: 0.35; pointer-events: none; }
.round-btn--light { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.round-btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem; margin-top: 1.75rem; }

/* ==========================================================================
   Section head (same on every band)
   ========================================================================== */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.rail-nav { display: flex; gap: 0.5rem; }

/* ==========================================================================
   Header (aligned to the hero's inner padding)
   ========================================================================== */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 100;
	padding: calc(var(--frame) + 1rem) 0 0.75rem;
	transition: transform 0.6s var(--ease), background 0.4s var(--ease), padding 0.4s var(--ease);
}
.site-header__inner { position: relative; display: flex; align-items: center; gap: 1.25rem; padding-inline: calc(var(--frame) + var(--pad)); }
.logo { flex: none; }
.logo img { height: 30px; width: auto; transition: filter 0.4s var(--ease); }

.site-nav {
	position: absolute; left: 50%; transform: translateX(-50%);
	padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.site-nav__list { display: flex; }
.site-nav__list a { display: block; padding: 0.5rem 1rem; font-size: var(--fs-sm); color: var(--muted); border-radius: 999px; transition: color 0.3s, background 0.3s; }
.site-nav__list a:hover { color: var(--ink); }
.site-nav__list .current-menu-item a { color: var(--ink); background: var(--tint); }

.site-header__end { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
.site-header__phone { font-size: var(--fs-sm); color: var(--ink); }

.site-header.is-scrolled {
	padding-top: 0.75rem; background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
	box-shadow: 0 1px 0 var(--hairline);
}
.site-header.is-scrolled .site-nav { background: var(--tint); }
.site-header.is-hidden { transform: translateY(-110%); }

.has-hero .site-header:not(.is-scrolled) .logo img { filter: brightness(0) invert(1); }
.has-hero .site-header:not(.is-scrolled) .site-header__phone,
.has-hero .site-header:not(.is-scrolled) .menu-toggle { color: #fff; }
body:not(.has-hero) .site-main { padding-top: 96px; }
body:not(.has-hero) .site-nav { background: var(--tint); }

.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.menu-toggle { display: none; align-items: center; gap: 0.6rem; margin-left: auto; height: 40px; font-size: var(--fs-sm); color: var(--ink); }
.menu-toggle__bars { position: relative; width: 18px; height: 8px; }
.menu-toggle__bars span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 7px; }
.menu-open .menu-toggle__bars span:first-child { top: 3.5px; transform: rotate(45deg); }
.menu-open .menu-toggle__bars span:last-child { top: 3.5px; transform: rotate(-45deg); }

.mobile-menu {
	position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between;
	padding: 7rem calc(var(--frame) + var(--pad)) 2.5rem;
	background: var(--navy); color: #fff; opacity: 0; visibility: hidden;
	transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.mobile-menu[hidden] { display: flex; }
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease), visibility 0s; }
.mobile-menu__list li { overflow: hidden; }
.mobile-menu__list a { display: block; padding: 0.2rem 0; font-size: 2.25rem; line-height: 1.2; color: #fff; transform: translateY(100%); transition: transform 0.7s var(--ease); }
.menu-open .mobile-menu__list a { transform: none; }
.menu-open .mobile-menu__list li:nth-child(2) a { transition-delay: 0.05s; }
.menu-open .mobile-menu__list li:nth-child(3) a { transition-delay: 0.1s; }
.menu-open .mobile-menu__list li:nth-child(4) a { transition-delay: 0.15s; }
.menu-open .mobile-menu__list li:nth-child(5) a { transition-delay: 0.2s; }
.menu-open .mobile-menu__list li:nth-child(n+6) a { transition-delay: 0.25s; }
.mobile-menu__foot { display: grid; justify-items: start; gap: 0.6rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.75); }
.mobile-menu__foot .btn { margin-bottom: 0.75rem; }
.menu-open { overflow: hidden; }
.menu-open .site-header { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }
.menu-open .site-header .logo img { filter: brightness(0) invert(1); }
.menu-open .menu-toggle { color: #fff; }

@media (max-width: 1280px) { .site-header__phone { display: none; } }
@media (max-width: 1080px) {
	.site-nav, .site-header__end { display: none; }
	.menu-toggle { display: inline-flex; }
	.logo img { height: 26px; }
}

/* ==========================================================================
   Hero: full screen, thin frame
   ========================================================================== */
.hero { padding: var(--frame); }
.hero__frame, .frame { position: relative; overflow: hidden; isolation: isolate; border-radius: calc(var(--radius) + 2px); background: var(--ink); color: #fff; }
.hero__frame { height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); min-height: 520px; }
.admin-bar .hero__frame { height: calc(100vh - 32px - var(--frame) * 2); }

.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease-in-out), visibility 0s linear 1.4s; }
.hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.4s var(--ease-in-out), visibility 0s; }
.hero__img, .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img { transform: scale(1.06); transition: transform 9s cubic-bezier(0.2, 0.6, 0.35, 1); }
.hero__slide.is-active .hero__img { transform: scale(1); }
.hero__slide::after, .frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 22%),
		linear-gradient(0deg, rgba(5, 12, 30, 0.62) 0%, rgba(5, 12, 30, 0.12) 40%, rgba(0, 0, 0, 0) 62%);
}

.hero__content, .frame__content { position: absolute; left: 0; z-index: 2; padding-inline: var(--pad); max-width: 54rem; }
.hero__content { bottom: 6.25rem; }
.frame__content { bottom: var(--pad); }
.hero__caption { display: flex; gap: 0.9rem; margin-bottom: 1rem; font-size: var(--fs-xs); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.hero__caption span + span::before { content: "/"; margin-right: 0.9rem; opacity: 0.5; }
.hero__title { font-size: var(--fs-hero); line-height: 1.02; color: #fff; max-width: 15ch; }
.frame__title { font-size: var(--fs-heading); line-height: 1.05; color: #fff; max-width: 16ch; }

.hero__caption, .hero__title { opacity: 0; transform: translateY(14px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.hero__slide.is-active .hero__caption { opacity: 1; transform: none; transition-delay: 0.4s; }
.hero__slide.is-active .hero__title { opacity: 1; transform: none; transition-delay: 0.55s; }

.hero__bottom {
	position: absolute; inset: auto var(--pad) 0; z-index: 3;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-block: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: #fff; }
.hero__link .icon { transition: transform 0.4s var(--ease); }
.hero__link:hover .icon { transform: translateX(4px); }
.hero__nav { display: flex; align-items: center; gap: 0.5rem; }
.hero__progress { display: flex; gap: 4px; margin-right: 0.75rem; }
.hero__bar { position: relative; width: 22px; height: 20px; }
.hero__bar::before, .hero__bar span { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, 0.35); }
.hero__bar span { background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__bar.is-done span { transform: scaleX(1); }
.hero__bar.is-active span { animation: hero-progress var(--hero-delay, 6.5s) linear forwards; }
.hero.is-paused .hero__bar.is-active span { animation-play-state: paused; }
@keyframes hero-progress { to { transform: scaleX(1); } }
@media (max-width: 640px) {
	.hero__content { bottom: 5.25rem; }
	.hero__nav .round-btn { display: none; }
	.hero__progress { margin-right: 0; }
}

/* Framed photo band (showroom) */
.frame--band { height: clamp(420px, 68vh, 620px); }
.frame--band .frame__img { transform: scale(1.04); transition: transform 1.6s var(--ease); }
.frame--band.is-visible .frame__img { transform: scale(1); }
.frame .actions { margin-top: 1.5rem; }

/* ==========================================================================
   Product cards: the whole tile on a soft backdrop, magnified on hover
   ========================================================================== */
.rail {
	--cols: 4;
	display: grid; grid-auto-flow: column; gap: var(--gap);
	grid-auto-columns: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .rail { --cols: 3; } }
@media (max-width: 820px) { .rail { --cols: 2; } }
@media (max-width: 520px) { .rail { --cols: 1.65; } }

.pcard__link { display: flex; flex-direction: column; height: 100%; }
.pcard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--tint); }
.pcard__tile {
	position: absolute; inset: 0; margin: auto;
	width: auto; height: auto; max-width: 58%; max-height: 80%;
	box-shadow: 0 18px 30px -18px rgba(17, 21, 24, 0.45), 0 2px 6px rgba(17, 21, 24, 0.06);
	transition: transform 1.2s var(--ease);
}
.pcard__link:hover .pcard__tile { transform: scale(1.07); }
.pcard__badge {
	position: absolute; top: 10px; left: 10px; z-index: 1; padding: 0.2rem 0.6rem; font-size: 0.6875rem; color: var(--ink);
	background: rgba(255, 255, 255, 0.9); border-radius: 999px;
}
.pcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0.15rem 0.7rem; }
.pcard__title { font-size: 0.9rem; font-weight: 500; color: var(--ink); transition: color 0.3s; }
.pcard__link:hover .pcard__title { color: var(--navy); }
.pcard__aside { flex: none; font-size: 0.75rem; color: var(--muted); }
.pcard__specs {
	display: flex; align-items: center; gap: 0.9rem; margin-top: auto;
	padding: 0.65rem 0.15rem 0; border-top: 1px solid var(--hairline);
	font-size: 0.75rem; color: var(--text); font-variant-numeric: tabular-nums;
}
.pcard__label { font-weight: 500; color: var(--ink); margin-right: auto; }
.pcard__dim { display: inline-flex; align-items: center; gap: 0.3rem; }
.pcard__dim svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.pcard__muted { color: var(--muted); }

/* ==========================================================================
   Collections
   ========================================================================== */
.collections__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ctile { display: block; }
.ctile__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.ctile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ctile:hover .ctile__media img { transform: scale(1.04); }
.ctile__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0.25rem 0; }
.ctile__title { font-size: 1.625rem; line-height: 1.1; }
.ctile__blurb { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--muted); }
.ctile__count { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--muted); padding-top: 0.5rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
	.collections__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.collections__grid::-webkit-scrollbar { display: none; }
	.ctile { scroll-snap-align: start; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
.about__media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--tint); }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about .heading { max-width: 15ch; }
.about__text { margin-top: 1.25rem; max-width: 32em; color: var(--muted); }
.about__list { margin: 2rem 0 1.75rem; }
.about__list li { display: grid; grid-template-columns: 2.75rem 1fr; padding: 1.1rem 0; border-top: 1px solid var(--hairline); }
.about__list li:last-child { border-bottom: 1px solid var(--hairline); }
.about__num { font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--muted); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.about__title { font-size: var(--fs-base); font-weight: 500; margin-bottom: 0.2rem; }
.about__list p { font-size: var(--fs-sm); color: var(--muted); max-width: 34em; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__media { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   Cards + closing split (contact | catalog)
   ========================================================================== */
.card { background: var(--tint); border-radius: var(--radius); }
.band--tint .card { background: var(--white); }
.card--form { padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.card__title--serif { font-size: 1.375rem; line-height: 1.1; }
.card--form > .card__title--serif { margin-bottom: 1.25rem; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.split__card { display: flex; flex-direction: column; padding: var(--pad); }
.split__text { margin: 1rem 0 1.75rem; max-width: 30em; color: var(--muted); }
.split__card .actions { margin-top: auto; padding-top: 1.75rem; }
.split__frame { min-height: 460px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__frame { min-height: 380px; } }

.details > div { display: grid; grid-template-columns: 6.5rem 1fr; padding: 0.85rem 0; border-top: 1px solid var(--hairline); font-size: var(--fs-sm); }
.details > div:last-child { border-bottom: 1px solid var(--hairline); }
.details dt { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.details dd { color: var(--ink); }
.details a { transition: color 0.3s; }
.details a:hover { color: var(--navy); }

/* ==========================================================================
   Product archive
   ========================================================================== */
/* Banner: a shorter framed image in the hero style; the header sits over it */
.page-hero { padding: var(--frame); }
.page-hero__frame { height: clamp(360px, 50vh, 500px); }
.page-hero__content { max-width: 46rem; }
.page-hero__title { margin-top: 1rem; font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.015em; color: #fff; }
.page-hero__intro { margin-top: 0.75rem; max-width: 30em; color: rgba(255, 255, 255, 0.82); }
.admin-bar .page-hero__frame { height: clamp(360px, calc(50vh - 32px), 500px); }

.catalog-list { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--muted); }
.crumbs a { transition: color 0.3s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs--light, .crumbs--light [aria-current] { color: rgba(255, 255, 255, 0.85); }
.crumbs--light a:hover { color: #fff; }
.crumbs--light span[aria-hidden] { opacity: 0.5; }

.pills { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hairline); }
.pills::-webkit-scrollbar { display: none; }
.pill {
	flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
	height: 36px; padding: 0 1rem; font-size: var(--fs-sm); color: var(--text);
	border: 1px solid var(--hairline); border-radius: 999px;
	transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.pill span { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.pill:hover { border-color: var(--navy); color: var(--navy); }
.pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill.is-active span { color: rgba(255, 255, 255, 0.6); }

/* Filter bar */
.filterbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 0; }
.filterbar__main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filterbar__count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.filterbar__count [data-filter-count] { color: var(--ink); font-weight: 500; }

.filter { position: relative; }
.filter__btn, .sort {
	display: inline-flex; align-items: center; gap: 0.45rem;
	height: 36px; padding: 0 0.85rem 0 1rem; font-size: var(--fs-sm); color: var(--ink);
	background: var(--tint); border: 1px solid transparent; border-radius: 999px;
	transition: background 0.3s, border-color 0.3s;
}
.filter__btn:hover, .sort:hover { background: #ebebed; }
.filter.is-open .filter__btn { background: var(--white); border-color: var(--ink); }
.filter.is-set .filter__btn { background: var(--white); border-color: var(--navy); color: var(--navy); }
.filter__n[hidden] { display: none; }
.filter__n {
	display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
	font-size: 0.6875rem; font-weight: 500; color: #fff; background: var(--navy); border-radius: 999px;
}
.filter__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); }
.filter.is-open .filter__chev { transform: rotate(180deg); }

.filter__panel {
	position: absolute; top: calc(100% + 8px); left: 0; width: 300px;
	padding: 1.1rem; background: var(--white); border-radius: var(--radius);
	box-shadow: 0 24px 60px -20px rgba(17, 21, 24, 0.25), 0 0 0 1px var(--hairline);
	animation: pop 0.35s var(--ease);
}
.filter__panel[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.filter__title { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.filter__options { display: grid; max-height: 260px; overflow-y: auto; margin-inline: -0.4rem; }
.filter__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); }

.check { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.4rem; font-size: var(--fs-sm); color: var(--ink); border-radius: 8px; cursor: pointer; transition: background 0.2s; }
.check:hover { background: var(--tint); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1px solid var(--line); border-radius: 5px; transition: background 0.2s, border-color 0.2s; }
.check__box svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.3s var(--ease); }
.check input:checked + .check__box { background: var(--navy); border-color: var(--navy); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 1.5px solid var(--navy); outline-offset: 2px; }
.check__label { flex: 1; }
.check__count { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.sort { position: relative; padding-right: 0.85rem; cursor: pointer; }
.sort__label { color: var(--muted); }
.sort select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; color: var(--ink); padding: 0 1.1rem 0 0; margin-right: -1.1rem; cursor: pointer; }
.sort select:focus-visible { outline: none; }
.sort:focus-within { border-color: var(--navy); }
.sort .filter__chev { pointer-events: none; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1.25rem; }
.active-filters[hidden] { display: none; }
.active-filters__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
	display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.6rem 0 0.85rem;
	font-size: 0.75rem; color: var(--navy); background: rgba(0, 35, 104, 0.07); border-radius: 999px;
	transition: background 0.3s;
	animation: pop 0.3s var(--ease);
}
.chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.chip:hover { background: rgba(0, 35, 104, 0.14); }

.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem var(--gap); }
.product-grid[hidden] { display: none; }
.product-grid .pcard[hidden] { display: none; }
.product-grid .pcard { animation: pop 0.5s var(--ease); }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.75rem; } }

.empty { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.empty[hidden] { display: none; }
.empty__title { font-family: var(--serif); font-size: var(--fs-heading); color: var(--ink); margin-bottom: 0.5rem; }
.empty .btn { margin-top: 1.5rem; }

@media (max-width: 640px) {
	.filterbar__main { width: 100%; }
	.filter { position: static; }
	.filterbar { position: relative; }
	.filter__panel { left: 0; right: 0; width: auto; }
	.pcard__specs { gap: 0.6rem; font-size: 0.6875rem; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-page { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--gap); align-items: start; }
.contact-page__side { display: grid; gap: var(--gap); }
.card--form .heading { margin-bottom: 0.75rem; }
.card--form__text { margin-bottom: 1.75rem; max-width: 30em; color: var(--muted); }
.map { overflow: hidden; border-radius: var(--radius); background: var(--tint); aspect-ratio: 16 / 10; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter 0.6s var(--ease); }
.map:hover iframe { filter: none; }
#quote { scroll-margin-top: 110px; }
@media (max-width: 900px) { .contact-page { grid-template-columns: 1fr; } }

/* ==========================================================================
   Catalog page: one full-screen framed hero
   ========================================================================== */
.catalog-hero .frame::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 24%),
		linear-gradient(90deg, rgba(5, 12, 30, 0.72) 0%, rgba(5, 12, 30, 0.35) 50%, rgba(5, 12, 30, 0.15) 100%);
}
.catalog-hero__inner {
	position: absolute; inset: 0 0 5rem; z-index: 2;
	display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem;
	padding: calc(var(--frame) + 5rem) var(--pad) 0;
}
.catalog-hero__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.015em; color: #fff; }
.catalog-hero__intro { margin-top: 1rem; max-width: 26em; color: rgba(255, 255, 255, 0.82); }
.catalog-hero .hero__caption { opacity: 1; transform: none; }
.catalog-hero__cover { justify-self: center; display: block; width: min(100%, 300px); }
.catalog-hero__cover img {
	width: 100%; height: auto;
	box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: rotate(-2deg);
	transition: transform 1.2s var(--ease);
}
.catalog-hero__cover:hover img { transform: rotate(0) scale(1.03); }
.catalog-hero__meta { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) {
	.catalog-hero__inner { grid-template-columns: 1fr; align-content: end; bottom: 5rem; padding-bottom: 0; }
	.catalog-hero__cover { display: none; }
}

/* ==========================================================================
   Single product: a catalog page as a full-screen hero
   ========================================================================== */
.phero { position: relative; --sheet: 372px; padding: var(--frame); }
.phero__frame { height: calc(100vh - var(--frame) * 2); height: calc(100svh - var(--frame) * 2); min-height: 640px; }
.admin-bar .phero__frame { height: calc(100vh - 32px - var(--frame) * 2); }

.phero__slide { position: absolute; inset: 0; width: 100%; height: 100%; cursor: zoom-in; animation: pop 0.7s var(--ease); }
.phero__slide[hidden] { display: none; }
.phero__slide img { width: 100%; height: 100%; object-fit: cover; }

.phero__caption { position: absolute; left: var(--pad); bottom: 1.75rem; z-index: 2; color: #fff; pointer-events: none; }
.phero__caption a { pointer-events: auto; }

.phero__nav { position: absolute; right: calc(var(--sheet) + 4.5rem); bottom: 1.75rem; z-index: 2; display: flex; gap: 0.4rem; }

/* Vertical symbol strip, as on the catalog page */
.phero__symbols {
	position: absolute; right: calc(var(--sheet) + 1.75rem); bottom: 1.75rem; z-index: 2;
	display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem;
	background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.phero__symbols li { position: relative; width: 30px; height: 30px; border-radius: 50%; cursor: help; }
.phero__tip {
	position: absolute; top: 50%; right: calc(100% + 0.75rem); z-index: 4;
	padding: 0.35rem 0.7rem; font-size: 0.75rem; white-space: nowrap; color: var(--ink);
	background: var(--white); border-radius: 999px; box-shadow: 0 8px 24px -10px rgba(5, 12, 30, 0.5);
	opacity: 0; visibility: hidden; transform: translate(6px, -50%);
	transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.25s;
	pointer-events: none;
}
.phero__symbols li:hover .phero__tip,
.phero__symbols li:focus .phero__tip,
.phero__symbols li:focus-visible .phero__tip { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
.phero__symbols img { width: 100%; height: 100%; }
.psymbols__blank { display: grid; place-items: center; width: 100%; height: 100%; font-size: 0.5rem; font-weight: 600; line-height: 1; text-align: center; color: #fff; background: var(--navy); border-radius: 50%; }

/* The white catalog sheet with its navy rule */
.psheet {
	position: absolute; z-index: 3; right: calc(var(--frame) + 0.875rem); bottom: calc(var(--frame) + 0.875rem);
	display: flex; flex-direction: column; width: var(--sheet); max-height: calc(100vh - var(--frame) * 2 - 5.625rem); padding: 1.5rem 2.25rem 1.5rem 1.5rem; overflow-y: auto; scrollbar-width: none;
	background: var(--white); border-radius: var(--radius);
}
.admin-bar .psheet { max-height: calc(100vh - 32px - var(--frame) * 2 - 5.625rem); }
.psheet::-webkit-scrollbar { display: none; }
.psheet::after { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; right: 1.25rem; width: 1px; background: var(--navy); }
.psheet__head { text-align: right; }
.psheet .eyebrow { margin-bottom: 0.6rem; }
.psheet__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 1.6vw, 3.25rem); line-height: 0.98; letter-spacing: -0.015em; color: var(--navy); }
.psheet__finish { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--muted); }

.pfaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.25rem; }
.pfaces--1, .pfaces--2 { grid-template-columns: 1fr; }
.pfaces--3 .pface:first-child { grid-column: span 2; }
.pface { position: relative; display: block; width: 100%; aspect-ratio: var(--frame-r, 2); overflow: hidden; cursor: zoom-in; background: var(--tint); box-shadow: 0 0 0 1px var(--hairline); }
.pface--square { width: 50%; margin-left: auto; }

.psizes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; margin-top: 0.75rem; }
.psize { display: flex; align-items: center; gap: 0.85rem; }
.psize__text { font-size: 1rem; line-height: 1.25; color: #fff; font-variant-numeric: tabular-nums; }
.psize__text small { display: block; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); }
.psize__mock { justify-self: start; border: 1px solid rgba(255, 255, 255, 0.9); }
.pface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pface--turned img {
	inset: auto; top: 50%; left: 50%;
	width: max(calc(100% / var(--frame-r)), calc(100% / var(--r)));
	height: max(calc(100% * var(--r)), calc(100% * var(--frame-r)));
	transform: translate(-50%, -50%) rotate(90deg);
}
.pface:not(.pface--turned):hover img { transform: scale(1.05); }
.pface--turned:hover img { transform: translate(-50%, -50%) rotate(90deg) scale(1.05); }

.psheet .pinfo__group { margin-top: 1rem; padding-top: 0; }
.psheet .pinfo__label { margin-bottom: 0.45rem; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); text-align: right; }
.psheet .swatches { justify-content: flex-end; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: var(--tint); transition: box-shadow 0.3s; }
.swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.swatch:hover img { transform: scale(1.08); }
.swatch.is-active { box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--navy); }

.psheet__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; }
.psheet__actions .btn { padding-inline: 1.2rem; }

@media (max-height: 760px) and (min-width: 901px) {
	.phero { --sheet: 340px; }
	.psheet { padding-block: 1.1rem; }
	.psheet__title { font-size: 2.5rem; }
	.pinfo__label { display: none; }
	.phero__symbols li { width: 26px; height: 26px; }
}

@media (max-width: 900px) {
	.phero__frame { height: 72svh; min-height: 420px; }
	.psheet { position: relative; inset: auto; width: auto; max-height: none; margin-top: var(--gap); padding: 0.5rem 2.25rem 1.5rem 0.5rem; overflow: visible; }
	.admin-bar .psheet { max-height: none; }
	.psheet::after { top: 0.5rem; }
	.phero__nav { right: 1rem; }
	.phero__caption { bottom: 4.5rem; }
	.phero__symbols { flex-direction: row; flex-wrap: wrap; left: 1rem; right: auto; bottom: 1rem; border-radius: 22px; }
	.phero__tip { top: auto; right: auto; left: 0; bottom: calc(100% + 0.75rem); transform: translateY(6px); }
	.phero__symbols li:hover .phero__tip,
	.phero__symbols li:focus .phero__tip,
	.phero__symbols li:focus-visible .phero__tip { transform: none; }
	.phero__nav { bottom: 4.5rem; }
}

/* Written specs */
.pspecs__table { columns: 2; column-gap: clamp(2rem, 1rem + 4vw, 5rem); padding: 0.5rem clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.pspecs__table > div { grid-template-columns: 9.5rem 1fr; break-inside: avoid; border-top: 0; border-bottom: 1px solid var(--hairline); }
.pspecs__table > div:last-child { border-bottom: 1px solid var(--hairline); }

.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; }
.lightbox::backdrop { background: rgba(5, 10, 24, 0.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 92vh; width: auto; height: auto; cursor: zoom-out; }
.lightbox__close { position: fixed; top: 1rem; right: 1rem; }

@media (max-width: 1080px) { .pspecs__table { columns: 1; } }

/* The mu-plugin form, restyled for this theme (white fields on the tinted card) */
.card--form .bcf { gap: 0.9rem; font-family: var(--sans); }
.card--form .bcf label { font-size: 0.75rem; font-weight: 500; color: var(--ink); }
.card--form .bcf-req { color: var(--muted); }
.card--form .bcf input[type=text],
.card--form .bcf input[type=email],
.card--form .bcf input[type=tel],
.card--form .bcf textarea {
	min-height: 44px; padding: 0.65rem 0.9rem; font-family: inherit; font-size: 0.875rem; color: var(--ink);
	background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
	transition: border-color 0.3s var(--ease);
}
.card--form .bcf textarea { min-height: 96px; }
.card--form .bcf input:focus, .card--form .bcf textarea:focus { border-color: var(--navy); box-shadow: none; }
.card--form .bcf ::placeholder { color: #a3a3a8; }
.card--form .bcf-submit { min-height: 44px; margin-top: 0.4rem; font-family: inherit; font-size: var(--fs-sm); font-weight: 500; text-transform: none; letter-spacing: 0; border-radius: 999px; }
.card--form .bcf-submit:hover, .card--form .bcf-submit:focus-visible { background: var(--navy-deep); color: #fff; }
.card--form .bcf-msg { font-size: var(--fs-sm); border-radius: var(--radius-sm); border-left-width: 0; }
.card--form .bcf-err { font-size: 0.75rem; }

/* ==========================================================================
   Footer: a navy frame mirroring the hero
   ========================================================================== */
.site-footer { padding: 0 var(--frame) var(--frame); }
.site-footer__panel { padding: var(--pad) var(--pad) 0; background: var(--navy); color: rgba(255, 255, 255, 0.72); font-size: var(--fs-sm); border-radius: calc(var(--radius) + 2px); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.site-footer .logo img { height: 26px; filter: brightness(0) invert(1); margin-bottom: 1rem; }
.site-footer__brand p { max-width: 24em; }
.site-footer__title { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; }
.site-footer a { transition: color 0.3s; }
.site-footer a:hover { color: #fff; }
.site-footer__links { display: grid; gap: 0.35rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fallback page shell
   ========================================================================== */
.page-shell { padding-block: 3rem 5rem; }
.page-shell__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.75rem + 2.8vw, 4.25rem); margin-bottom: 2rem; }

/* ==========================================================================
   Reveal on scroll (subtle)
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
	.js [data-reveal], .hero__caption, .hero__title { opacity: 1; transform: none; }
	.hero__img, .frame__img { transform: none !important; }
}

/* ==========================================================================
   Leftovers from plugins that still print markup on these pages
   ========================================================================== */
.htwl-modal, .htwl-modal-dialog { display: none !important; }

/* ==========================================================================
   Touch and phone refinements
   ========================================================================== */
@media (pointer: coarse) {
	.round-btn { width: 42px; height: 42px; }
	.pill, .filter__btn, .sort { height: 42px; }
	.crumbs a { padding-block: 0.35rem; }
}

@media (max-width: 760px) {
	/* iOS zooms the page when a focused field is under 16px */
	.bcf input, .bcf textarea, .card--form .bcf input[type=text], .card--form .bcf input[type=email], .card--form .bcf input[type=tel], .card--form .bcf textarea, .sort select { font-size: 16px; }

	/* Swipe rows: show a smaller card and a clear peek of the next one */
	.collections__grid { grid-auto-columns: 72%; }
	.ctile__media { aspect-ratio: 1; }

	/* Inner page banners: get to the content sooner */
	.page-hero__frame { height: clamp(280px, 40svh, 340px); }
	.page-hero__title { font-size: 2.75rem; }

	/* Filter bar: the three filters share one row; sort and the count share the next */
	.filterbar { display: block; padding-bottom: 0.75rem; }
	.filterbar__main { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 0.4rem; }
	.filter { position: static; }
	.filter__btn { width: 100%; justify-content: center; padding: 0 0.7rem; }
	.sort { grid-column: 1 / -1; justify-self: start; padding-inline: 0.85rem; margin-top: 0.1rem; }
	.filterbar__count { position: absolute; right: 0; bottom: 1.5rem; }
	.filterbar:has(.filter.is-open) { z-index: 120; }

	/* Filter panels become a bottom sheet */
	.filter__panel {
		position: fixed; inset: auto 0 0 0; z-index: 120; width: auto; max-height: 72svh;
		display: flex; flex-direction: column;
		padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0;
		box-shadow: 0 0 0 100vmax rgba(5, 12, 30, 0.5);
		animation: sheet-up 0.4s var(--ease);
	}
	.filter__panel[hidden] { display: none; }
	.filter__options { flex: 1; min-height: 0; max-height: none; }
	.check { padding-block: 0.7rem; }
	@keyframes sheet-up { from { transform: translateY(100%); } }

	/* Contact page: the form comes before the map */
	.contact-page__side { display: contents; }
	.contact-page .split__card { order: 1; }
	.contact-page .card--form { order: 2; }
	.contact-page .map { order: 3; }

	/* Footer: shorter link list */
	.site-footer__links { grid-template-columns: 1fr 1fr; }
}

/* Single product on small screens: the sheet overlaps the photo so the name is on the first screen */
@media (max-width: 900px) {
	.phero__frame { height: 62svh; min-height: 400px; }
	.psheet { z-index: 3; width: auto; margin: -2.25rem 0.5rem 0; padding: 1.25rem 2.25rem 1.5rem 1.25rem; box-shadow: 0 -12px 30px -18px rgba(5, 12, 30, 0.4); }
	.psheet::after { top: 1.25rem; }
	.phero__symbols { bottom: 3.25rem; }
	.phero__caption, .phero__nav { bottom: 7rem; }
	.psheet__actions { flex-direction: column; align-items: stretch; text-align: center; }
	.psheet__actions .text-link { align-self: center; }
}

/* Catalog hero on phones: keep the cover, above the text */
@media (max-width: 760px) {
	.catalog-hero__cover { display: block; order: -1; justify-self: start; width: 112px; margin-bottom: 0.25rem; }
	.catalog-hero__cover img { transform: rotate(-3deg); }
}

/* Tablets: keep tile faces at a sensible size on the wide sheet */
@media (min-width: 521px) and (max-width: 900px) {
	.pfaces { width: 100%; max-width: 440px; margin-left: auto; }
	.psheet__actions { flex-direction: row; justify-content: flex-end; }
}

@media (max-width: 760px) and (max-height: 720px) {
	.catalog-hero__cover { display: none; }
}

/* Tiles in a swipe row are off screen sideways, so they shouldn't wait for a fade-in */
@media (max-width: 760px) {
	.js .collections__grid [data-reveal] { opacity: 1; transform: none; }
}

/* Short laptop screens: smaller faces so the sheet never needs to scroll */
@media (max-height: 760px) and (min-width: 901px) {
	.pfaces { margin-top: 0.75rem; }
	.pfaces--1 .pface, .pfaces--2 .pface { width: 68%; margin-left: auto; }
	.pfaces--1 .pface--square { width: 34%; }
	.psheet .pinfo__group { margin-top: 0.75rem; }
}

/* Size outlines and caption stay legible over bright room photos */
.phero__caption { text-shadow: 0 1px 10px rgba(5, 12, 30, 0.55); }
.psize__mock { box-shadow: 0 1px 8px rgba(5, 12, 30, 0.35), inset 0 0 0 1px rgba(5, 12, 30, 0.08); }

/* Phones: each size is a small column, so two sit side by side */
@media (max-width: 640px) {
	.psizes { align-items: flex-end; gap: 1.5rem; }
	.psize { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* Several sizes: upright tiles to scale, bottom and right aligned, as in the catalog */
.ptiles { --k: 1; display: flex; justify-content: flex-end; align-items: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.ptile { position: relative; flex: none; width: calc(var(--tw) * var(--k) * 1px); height: calc(var(--th) * var(--k) * 1px); overflow: hidden; cursor: zoom-in; background: var(--tint); box-shadow: 0 0 0 1px rgba(17, 21, 24, 0.22); }
.ptile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ptile:hover img { transform: scale(1.05); }
@media (max-height: 760px) and (min-width: 901px) { .ptiles { --k: 0.62; margin-top: 0.75rem; } }
@media (max-width: 420px) { .ptiles { --k: 0.85; } }

/* Archive search pill */
.fsearch { display: inline-flex; align-items: center; gap: 0.45rem; height: 36px; padding: 0 1rem 0 0.85rem; color: var(--muted); background: var(--tint); border: 1px solid transparent; border-radius: 999px; transition: background 0.3s, border-color 0.3s; }
.fsearch:hover { background: #ebebed; }
.fsearch:focus-within { background: var(--white); border-color: var(--navy); color: var(--navy); }
.fsearch svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.fsearch input { width: 112px; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--ink); -webkit-appearance: none; appearance: none; }
.fsearch input::placeholder { color: var(--muted); opacity: 1; }
@media (pointer: coarse) { .fsearch { height: 42px; } }
@media (max-width: 760px) {
	.fsearch { grid-column: 1 / -1; }
	.fsearch input { flex: 1; width: 100%; font-size: 16px; }
}

/* 404 */
.notfound { display: grid; align-items: center; min-height: 62vh; }
.notfound__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); line-height: 1; letter-spacing: -0.015em; }
.notfound__text { margin-top: 1rem; max-width: 30em; color: var(--muted); }

/* Sizes: on the photo on desktop, inside the sheet once it drops below the photo */
.psizes--sheet { display: none; }
@media (max-width: 900px) {
	.psizes--photo { display: none; }
	.psizes--sheet { display: flex; justify-content: flex-end; align-items: flex-end; gap: 1.25rem; margin-top: 1rem; }
	.psizes--sheet .psize { flex-direction: row; align-items: center; gap: 0.6rem; }
	.psizes--sheet .psize__text { color: var(--ink); font-size: var(--fs-sm); text-shadow: none; }
	.psizes--sheet .psize__text small { color: var(--muted); }
	.psizes--sheet .psize__mock { border-color: var(--navy); box-shadow: none; transform: scale(0.75); transform-origin: right center; }
	.phero__caption, .phero__nav { bottom: 6.75rem; }
}

.catalog-hero .hero__bottom { justify-content: flex-end; }