/* =========================================================================
   [BUSINESS NAME] — Event & Equipment Rentals
   Design system: ink/ivory/brass — grounded in string-light amber and
   dusk-marquee ink, not a generic "premium neutral" default.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* Color — matched directly from the reference design (sampled precisely
	   via pixel analysis, not eyeballed): near-black chrome, a single green
	   accent, and a red used only for sale pricing/badges. */
	--ink: #0d0d0f;
	--ink-soft: #1a1a1d;
	--ivory: #f4f4f4;
	--ivory-dim: #e9e9e9;
	--paper: #ffffff;
	--brass: #3c9a30;
	--brass-deep: #2e7a25;
	--brass-pale: #cdeac8;
	--stone: #6b6b6b;
	--stone-line: #e2e2e2;
	--text-on-ink: #ffffff;
	--text-on-ivory: #111111;
	--text-muted-on-ink: #b5b5b5;
	--text-muted-on-ivory: #6b6b6b;
	--good: #3c9a30;
	--warn: #d8392c;
	--sale: #d8392c;

	/* Type */
	--font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Layout */
	--container-max: 1240px;
	--container-pad: clamp(20px, 5vw, 64px);
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 8px 28px rgba(0, 0, 0, 0.14);
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Defense-in-depth against horizontal overflow: the real cause (if one
   exists) should always be fixed at its source — see .nav-links below for
   an actual example — but this catches anything else that slips through
   without silently making a genuine layout bug harder to notice, since it
   only ever clips at the true document edge, which nothing should be
   relying on reaching anyway. */
html, body { overflow-x: hidden; max-width: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--text-on-ivory);
	background: var(--paper);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

:focus-visible {
	outline: 2px solid var(--brass-deep);
	outline-offset: 3px;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--ink); color: var(--text-on-ink);
	padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout primitives ---------- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--ink { background: var(--ink); color: var(--text-on-ink); }
.section--ivory { background: var(--ivory); }
.section--paper { background: var(--paper); }

.section-head {
	max-width: 640px;
	margin-bottom: clamp(32px, 5vw, 56px);
}
.section-head--split {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none;
}
.eyebrow {
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brass-deep);
	margin: 0 0 10px;
}
.section--ink .eyebrow { color: var(--brass); }

h1, .h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 4.6vw, 4.2rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
h2, .h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.9rem, 3.2vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.005em;
}
h3, .h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 1.8vw, 1.6rem);
	line-height: 1.25;
}
.lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--text-muted-on-ivory);
	max-width: 60ch;
	line-height: 1.65;
}
.section--ink .lede { color: var(--text-muted-on-ink); }
p.body { max-width: 68ch; color: var(--text-muted-on-ivory); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.98rem;
	border: 1px solid transparent;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brass); color: #ffffff; }
.btn-primary:hover { background: var(--brass-deep); }
.btn-outline-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline-ink:hover { background: var(--ink); color: var(--text-on-ink); }
.btn-outline-ivory { background: transparent; color: var(--text-on-ink); border-color: rgba(245,242,234,0.4); }
.btn-outline-ivory:hover { background: var(--text-on-ink); color: var(--ink); border-color: var(--text-on-ink); }
.btn-ghost { background: transparent; color: var(--ink); padding: 14px 6px; }
.btn-ghost:hover { color: var(--brass-deep); }
.btn-sm { padding: 10px 18px; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Header / Nav ---------- */
.site-header {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(245, 242, 234, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--stone-line);
	transition: box-shadow var(--dur) var(--ease), transform 280ms var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav-row {
	display: flex; align-items: center; justify-content: space-between;
	height: 84px;
	gap: 18px;
}
.logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--ink);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.logo-mark { height: 26px; width: auto; flex-shrink: 0; display: block; }
.logo span { color: var(--brass-deep); }
.nav-links {
	display: flex; align-items: center; gap: 2px;
	flex: 1;
	min-width: 0;
	justify-content: center;
	/* This is the actual guarantee against overlap, not the padding/gap
	   tuning above (which helps but depends on estimating real rendered
	   text widths — something that turned out repeatedly unreliable to
	   calculate by hand without an actual browser). If the links ever
	   don't fit the available space for any reason — a longer label, a
	   different font falling back, a browser rendering text wider than
	   estimated — this scrolls horizontally within its own row instead of
	   spilling out and overlapping the logo or the CTA button next to it.
	   Structurally impossible to overlap again regardless of exact widths. */
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
	padding: 10px 13px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-on-ivory);
	border-radius: var(--radius-md);
	transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
	position: relative;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav-links a:hover { color: var(--brass-deep); }
.nav-links a.is-active { color: var(--brass-deep); }
.nav-links a.is-active::after {
	content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px;
	height: 2px; background: var(--brass-deep); border-radius: 2px;
}
.nav-cta { flex-shrink: 0; display: flex; align-items: center; gap: 14px; }
.nav-toggle {
	display: none; background: none; border: none; padding: 8px;
	flex-direction: column; gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
	position: fixed; inset: 0; top: 84px; z-index: 999;
	background: var(--ivory);
	transform: translateX(100%);
	transition: transform 320ms var(--ease);
	overflow-y: auto;
	display: none;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav .container { padding-block: 32px; }
.mobile-nav a {
	display: block; padding: 16px 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	border-bottom: 1px solid var(--stone-line);
}
.mobile-nav .nav-cta { margin-top: 28px; }

/* ---------- Breadcrumbs ---------- */
/* ---------- Breadcrumbs — redesigned as a compact pill bar with a home
   icon, chevron separators, and the current page picked out in the accent
   color, rather than plain inline text. ---------- */
.breadcrumbs {
	display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
	font-size: 0.84rem; color: var(--text-muted-on-ivory);
	padding: 9px 16px;
	background: var(--ivory-dim);
	border-radius: var(--radius-pill);
	margin-block: 18px;
}
.breadcrumbs a { color: var(--text-on-ivory); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur) var(--ease); }
.breadcrumbs a:hover { color: var(--brass-deep); }
.breadcrumb-home { width: 14px; height: 14px; flex-shrink: 0; }
.breadcrumbs .sep { color: var(--stone); font-size: 0.8rem; }
.breadcrumbs .current { color: var(--brass-deep); font-weight: 700; }

/* ---------- Page header (interior pages) ---------- */
.page-header { padding-block: clamp(48px, 8vw, 88px) clamp(32px, 5vw, 56px); }
.page-header .h1 { max-width: 800px; }

/* ---------- Hero (left text / right product imagery, matching reference) ---------- */
.hero {
	position: relative;
	background: var(--ink);
	overflow: hidden;
}
.hero .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	min-height: min(78vh, 640px);
	padding-block: 48px;
}
.hero-content { color: var(--text-on-ink); max-width: 520px; }
.hero .eyebrow { color: var(--brass); }
.hero h1 { color: var(--text-on-ink); }
.hero .lede { color: var(--text-muted-on-ink); margin-top: 16px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-media-side {
	aspect-ratio: 4/3;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--ink-soft);
}
.hero-media-side img { width: 100%; height: 100%; object-fit: cover; }
.hero-trust {
	margin-top: 0; padding: 0; border-top: none;
	font-size: 0.92rem; color: var(--text-muted-on-ink);
	display: flex; gap: 28px; flex-wrap: wrap;
}
.hero-trust strong { color: var(--text-on-ink); font-weight: 600; }

/* ---------- Trust bar strip (dark, icon + text triplets — matches reference) ---------- */
.trust-bar {
	background: var(--ink);
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-block: 18px;
}
.trust-bar .container {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 32px;
}
.trust-bar-item {
	display: flex; align-items: center; gap: 10px;
	color: var(--text-muted-on-ink); font-size: 0.88rem; font-weight: 500;
}
.trust-bar-item svg { width: 20px; height: 20px; color: var(--brass); flex-shrink: 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- Category cards ---------- */
.category-card {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 4/5;
	background: var(--ink-soft);
	display: flex; align-items: flex-end;
	transition: transform var(--dur) var(--ease);
}
.category-card:hover { transform: translateY(-4px); }
.category-card-media { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,21,26,0) 30%, rgba(20,21,26,0.92) 100%), var(--img, linear-gradient(150deg,#2a2c35,#1a1b20)); background-size: cover; background-position: center; transition: transform 500ms var(--ease); }
.category-card:hover .category-card-media { transform: scale(1.06); }
.category-card-body { position: relative; z-index: 1; padding: 24px; color: var(--text-on-ink); width: 100%; }
.category-card-body h3 { color: var(--text-on-ink); }
.category-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 12px; }
.category-card-count { font-size: 0.85rem; color: var(--text-muted-on-ink); }
.category-card-body p { color: var(--text-muted-on-ink); font-size: 0.92rem; margin-top: 6px; }
.category-card-link { font-size: 0.88rem; font-weight: 600; color: var(--brass); }

/* ---------- Product cards ---------- */
.product-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--stone-line); }
.product-card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ivory-dim); }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.product-card:hover .product-card-media img { transform: scale(1.05); }
.product-badge {
	position: absolute; top: 12px; left: 12px;
	background: var(--ink); color: var(--text-on-ink);
	font-size: 0.75rem; font-weight: 600;
	padding: 5px 11px; border-radius: var(--radius-pill);
}
.product-badge--brass { background: var(--brass); color: #fff; }
.product-badge--sale { background: var(--sale); color: #fff; }
.product-card-price .sale-price { color: var(--sale); font-weight: 700; }
.product-card-price .was-price { color: var(--text-muted-on-ivory); text-decoration: line-through; font-weight: 400; margin-left: 4px; }
.product-card-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card-cat { font-size: 0.78rem; color: var(--brass-deep); font-weight: 600; }
.product-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.product-card-desc { font-size: 0.9rem; color: var(--text-muted-on-ivory); flex: 1; }
.product-card-price { font-weight: 600; color: var(--text-on-ivory); padding-top: 6px; border-top: 1px solid var(--stone-line); margin-top: 4px; }
.product-card-price small { font-weight: 400; color: var(--text-muted-on-ivory); }
.product-card-actions { display: flex; gap: 10px; margin-top: 8px; }
.product-card-actions .btn { flex: 1; min-width: 0; }
.availability { font-size: 0.82rem; display: inline-flex; align-items: center; gap: 6px; }
.availability::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.availability.is-low::before { background: var(--warn); }

/* ---------- Feature blocks (Why Choose Us) ---------- */
.feature-block { display: flex; flex-direction: column; gap: 14px; }
.feature-icon {
	width: 48px; height: 48px; border-radius: var(--radius-md);
	background: var(--ivory-dim);
	display: flex; align-items: center; justify-content: center;
	color: var(--brass-deep);
}
.feature-icon svg { width: 24px; height: 24px; }

/* ---------- Mission / Vision cards (about.html) — deliberately more
   premium than a plain feature block: these are the two statements a
   visitor is most likely to actually remember, so they get real card
   weight (dark surface, brass accent) instead of blending into the
   surrounding page like a supporting detail would. ---------- */
.mv-card {
	background: var(--ink);
	color: var(--text-on-ink);
	border-radius: var(--radius-md);
	padding: 36px;
	box-shadow: var(--shadow-md);
	display: flex; flex-direction: column; gap: 14px;
	position: relative;
	overflow: hidden;
}
.mv-card::after {
	content: ''; position: absolute; top: -40px; right: -40px;
	width: 120px; height: 120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(201,154,68,0.18) 0%, transparent 70%);
}
.mv-card .eyebrow { color: var(--brass); margin-bottom: 0; }
.mv-card h2 { color: var(--text-on-ink); position: relative; z-index: 1; }

/* ---------- Service cards (services.html) — same underlying content as
   .feature-block elsewhere, but given real card weight here since this
   page is specifically about presenting each service as its own
   offering, not a quiet supporting-detail list. ---------- */
.service-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	padding: 28px;
	display: flex; flex-direction: column; gap: 14px;
	box-shadow: var(--shadow-sm);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brass); }
.service-card .feature-icon { background: var(--brass); color: #fff; transition: background var(--dur) var(--ease); }
.service-card:hover .feature-icon { background: var(--brass-deep); }
.service-card h3 { font-size: 1.1rem; }
.service-card p { color: var(--text-muted-on-ivory); font-size: 0.92rem; }
.feature-block h3 { font-size: 1.15rem; }
.feature-block p { color: var(--text-muted-on-ivory); font-size: 0.94rem; }

/* ---------- Process steps ---------- */
.process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.process-step { position: relative; padding: 0 28px 0 0; border-right: 1px solid var(--stone-line); }
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step:first-child { padding-left: 0; }
.process-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--brass-pale); font-weight: 600; line-height: 1; }
.section--ink .process-num { color: rgba(201,154,68,0.35); }
.process-step h3 { margin-top: 14px; }
.process-step p { margin-top: 8px; color: var(--text-muted-on-ivory); font-size: 0.92rem; }
.section--ink .process-step { border-color: rgba(245,242,234,0.15); }
.section--ink .process-step p { color: var(--text-muted-on-ink); }

/* ---------- Split section (image/text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
/* Same reasoning as .booking-layout above — this holds the Contact form
   in one of its two columns, with the identical risk of an unguarded
   child forcing the whole column (and everything in it) wider than the
   viewport on mobile. */
.split > div { min-width: 0; }
.split-media { aspect-ratio: 4/5; border-radius: var(--radius-md); overflow: hidden; background: var(--ivory-dim); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split.is-reversed .split-media { order: 2; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--stone-line); }
.stat-num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--ink); }
.stat-label { font-size: 0.85rem; color: var(--text-muted-on-ivory); margin-top: 4px; }

/* ---------- Occasions ---------- */
.occasion-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	padding: 28px;
	display: flex; flex-direction: column; gap: 12px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.occasion-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: var(--brass);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur) var(--ease);
}
.occasion-card:hover::before { transform: scaleX(1); }
.occasion-card:hover { border-color: var(--brass); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.occasion-card h3 { font-size: 1.25rem; }
.occasion-card p { color: var(--text-muted-on-ivory); font-size: 0.92rem; flex: 1; }
.occasion-card .btn-ghost { align-self: flex-start; padding-left: 0; }

/* ---------- Packages ---------- */
.package-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	padding: 32px;
	display: flex; flex-direction: column;
}
.package-card.is-featured { border-color: var(--brass); box-shadow: var(--shadow-md); position: relative; }
.package-featured-tag {
	position: absolute; top: -13px; left: 32px;
	background: var(--brass); color: var(--ink);
	font-size: 0.75rem; font-weight: 700; padding: 5px 14px; border-radius: var(--radius-pill);
}
.package-card h3 { margin-bottom: 6px; }
.package-meta { display: flex; gap: 16px; font-size: 0.85rem; color: var(--text-muted-on-ivory); margin-bottom: 20px; }
.package-includes { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; flex: 1; }
.package-includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; }
.package-includes li::before { content: '✓'; color: var(--brass-deep); font-weight: 700; flex-shrink: 0; }
.package-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 16px; }
.package-price small { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--text-muted-on-ivory); }

/* ---------- Testimonials ---------- */
.testimonial-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	padding: 32px;
	display: flex; flex-direction: column; gap: 18px;
}
.testimonial-stars { color: var(--brass); letter-spacing: 2px; }
.testimonial-quote { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; }
.testimonial-author { font-size: 0.88rem; color: var(--text-muted-on-ivory); font-weight: 600; }
.testimonial-note { font-size: 0.78rem; color: var(--stone); font-style: italic; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--text-on-ivory); }
.field .hint { font-size: 0.78rem; color: var(--text-muted-on-ivory); font-weight: 400; }
.field input, .field select, .field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--text-on-ivory);
	transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass-deep); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--warn); }
.field-error { font-size: 0.8rem; color: var(--warn); display: none; }
.field.has-error .field-error { display: block; }
.form-section-title { font-family: var(--font-display); font-size: 1.3rem; margin: 36px 0 20px; padding-top: 28px; border-top: 1px solid var(--stone-line); }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input { width: 18px; height: 18px; accent-color: var(--brass-deep); }
.privacy-note { font-size: 0.82rem; color: var(--text-muted-on-ivory); margin-top: 16px; }
fieldset { border: none; padding: 0; margin: 0; }

/* ---------- Filters / Catalogue ---------- */
.catalogue-toolbar {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
	padding: 20px 0; border-bottom: 1px solid var(--stone-line); margin-bottom: 32px;
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-chip {
	padding: 9px 18px; border-radius: var(--radius-pill);
	border: 1px solid var(--stone-line);
	font-size: 0.88rem; font-weight: 500;
	background: var(--paper);
	transition: all var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--brass); }
.filter-chip.is-active { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.search-box { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.search-box input { width: 100%; padding: 11px 16px 11px 40px; border: 1px solid var(--stone-line); border-radius: var(--radius-pill); background: var(--paper); }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--stone); }
.catalogue-sort-wrap { display: flex; align-items: center; gap: 16px; }
.sort-select { padding: 11px 16px; border: 1px solid var(--stone-line); border-radius: var(--radius-pill); background: var(--paper); }
.results-count { font-size: 0.88rem; color: var(--text-muted-on-ivory); }
.empty-state { text-align: center; padding: 64px 20px; color: var(--text-muted-on-ivory); }
.empty-state h3 { color: var(--text-on-ivory); margin-bottom: 8px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination button {
	width: 40px; height: 40px; border-radius: var(--radius-sm);
	border: 1px solid var(--stone-line); background: var(--paper);
}
.pagination button.is-active { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }

/* ---------- FAQ Accordion ---------- */
.faq-item { border-bottom: 1px solid var(--stone-line); }
.faq-question {
	width: 100%; text-align: left; background: none; border: none;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 22px 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--text-on-ivory);
}
.faq-question .plus { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-question .plus::before, .faq-question .plus::after { content: ''; position: absolute; background: var(--ink); transition: transform var(--dur) var(--ease); }
.faq-question .plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-1px); }
.faq-question .plus::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); }
.faq-item.is-open .plus::after { transform: translateX(-1px) rotate(90deg); opacity: 0; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq-answer-inner { padding-bottom: 22px; color: var(--text-muted-on-ivory); max-width: 68ch; }
.faq-item.is-open .faq-answer { max-height: 400px; }

/* ---------- Gallery ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.masonry { columns: 3; column-gap: 20px; }
.masonry-item { break-inside: avoid; margin-bottom: 20px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; position: relative; }
.masonry-item img { width: 100%; display: block; transition: transform var(--dur) var(--ease); }
.masonry-item:hover img { transform: scale(1.04); }
.lightbox {
	position: fixed; inset: 0; z-index: 2000; background: rgba(20,21,26,0.96);
	display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close, .lightbox-prev, .lightbox-next {
	position: absolute; background: rgba(245,242,234,0.1); color: var(--text-on-ink);
	border: 1px solid rgba(245,242,234,0.3); border-radius: 50%;
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	transition: background var(--dur) var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(245,242,234,0.2); }
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Booking / Quote summary panel ---------- */
.booking-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: flex-start; }
/* Both grid items here are bare, class-less <div>s — the same
   won't-shrink-below-content-size default every other flex/grid item in
   this project has needed guarding against. Without this, if ANYTHING
   inside the form column (or the summary panel) has a natural minimum
   width — a textarea sized by its default cols count rather than a
   percentage, a button pairing an icon with longer text, and so on —
   the grid cell is forced at least that wide, taking the whole card
   (and everything in it, including plain paragraph text that would
   otherwise wrap fine) past the viewport's actual width with it. */
.booking-layout > div { min-width: 0; }

/* ---------- Form card — a proper elevated container for the site's main
   forms (Quote, Contact, each Booking step), which previously had no
   visual container at all and just sat directly on the page background.
   Layered rather than a single flat shadow — a tight, barely-visible
   contact shadow plus a soft, diffuse ambient one reads as more genuine
   depth than one blurred box-shadow, the same technique modern design
   systems use for elevated surfaces. ---------- */
.form-card {
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: var(--radius-md);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 1px 2px rgba(13,13,15,0.05), 0 8px 24px rgba(13,13,15,0.08), 0 24px 48px rgba(13,13,15,0.06);
}
.summary-panel {
	background: var(--ink); color: var(--text-on-ink);
	border-radius: var(--radius-md); padding: 28px;
	position: sticky; top: 104px;
	box-shadow: 0 1px 2px rgba(13,13,15,0.05), 0 8px 24px rgba(13,13,15,0.12), 0 24px 48px rgba(13,13,15,0.1);
}
.summary-panel h3 { color: var(--text-on-ink); margin-bottom: 4px; }
.summary-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(245,242,234,0.15); }
.summary-section:first-of-type { margin-top: 18px; padding-top: 0; border-top: none; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; padding: 8px 0; color: var(--text-muted-on-ink); }
.summary-line strong { color: var(--text-on-ink); font-weight: 500; }
.summary-line .remove-line { color: var(--stone); font-size: 0.8rem; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(245,242,234,0.15); }
.summary-total .amount { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; }
.summary-disclaimer { font-size: 0.76rem; color: var(--text-muted-on-ink); margin-top: 10px; line-height: 1.5; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--stone-line); border-radius: var(--radius-sm); }
.qty-stepper button { width: 32px; height: 32px; background: none; border: none; font-size: 1.1rem; }
.qty-stepper input { width: 40px; text-align: center; border: none; background: none; padding: 0; }
.booking-step { display: none; }
.booking-step.is-active { display: block; }
.booking-progress { display: flex; gap: 8px; margin-bottom: 32px; }
.booking-progress-step { flex: 1; height: 3px; background: var(--stone-line); border-radius: 2px; }
.booking-progress-step.is-done, .booking-progress-step.is-active { background: var(--brass); }
.booking-nav { display: flex; justify-content: space-between; margin-top: 32px; }
.picked-item-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--stone-line); }
.picked-item-row img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.picked-item-info { flex: 1; min-width: 0; }
.picked-item-info h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; overflow-wrap: break-word; }
.review-block { background: var(--ivory); border-radius: var(--radius-md); padding: 24px; margin-bottom: 16px; }
.review-block dt { font-size: 0.8rem; color: var(--text-muted-on-ivory); }
.review-block dd { margin: 2px 0 12px; font-weight: 500; }

/* ---------- Toast ---------- */
.toast-stack { position: fixed; top: 24px; right: 24px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
.toast {
	background: var(--ink); color: var(--text-on-ink);
	padding: 14px 20px; border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	display: flex; align-items: center; gap: 10px;
	opacity: 0; transform: translateY(-10px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	max-width: 340px; font-size: 0.9rem;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Floating quote reminder — redesigned as a notification bell:
   collapsed to a small icon with an unread-style count badge by default,
   expanding into the full detail panel on hover (desktop) or tap (touch,
   since touch devices have no real :hover). Still only ever appears as a
   direct result of adding an item — never shown on an ordinary page load
   just because the cart already has something in it — but once it
   exists, it stays as an unobtrusive icon rather than disappearing after
   a timeout, matching how a notification bell is expected to behave:
   present until the visitor deals with it, not on a timer. Bottom-right —
   a more conventional, higher-visibility spot for a persistent indicator
   than a corner most visitors don't expect to check — with the toast
   stack deliberately moved to top-right so the two can never physically
   overlap even if both happen to be visible at once. ---------- */
.quote-reminder {
	position: fixed; bottom: 24px; right: 24px; z-index: 3000;
	width: 52px; height: 52px;
	opacity: 0; transform: translateY(16px) scale(0.9);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
		width 320ms var(--ease), height 320ms var(--ease);
	pointer-events: none;
}
.quote-reminder.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.quote-reminder.is-expanded {
	width: 320px; max-width: calc(100vw - 32px);
	/* Deliberately NOT height:auto — every child here (.quote-reminder-inner,
	   .quote-reminder-badge) is position:absolute, so there is no in-flow
	   content left for "auto" to measure against; it was resolving to
	   ~0, which is exactly the collapsed-to-a-sliver panel seen in the
	   screenshot. min-height gives it a real, explicit floor instead —
	   sized generously for the panel's heading + message + CTA, including
	   a longer, two-line heading for longer item names. */
	min-height: 160px;
}
/* The badge (below) sits OUTSIDE this element deliberately — see its own
   comment for why: a badge inside a circular overflow:hidden container
   gets clipped by the curve near the corner even when it technically
   fits the container's square bounding box, since a circle inscribed in
   a square doesn't reach the corners. Confirmed by calculating the
   actual geometry: the badge's farthest point sat ~5px beyond the
   circle's edge, exactly matching the sheared-off arc visible in the
   reported screenshot. Splitting the clipped visual chrome into its own
   inner wrapper, with the badge living as this element's direct child
   instead, keeps the badge fully outside anything that clips it. */
.quote-reminder-inner {
	position: absolute; inset: 0;
	background: var(--paper);
	border: 1px solid var(--stone-line);
	border-radius: 999px;
	box-shadow: var(--shadow-md);
	overflow: hidden;
	transition: border-radius 320ms var(--ease);
}
.quote-reminder.is-expanded .quote-reminder-inner {
	border-radius: var(--radius-md);
}
.quote-reminder.is-pulsing .quote-reminder-inner { animation: quote-reminder-pulse 1400ms ease 2; }
@keyframes quote-reminder-pulse {
	0%, 100% { box-shadow: var(--shadow-md); }
	50% { box-shadow: 0 0 0 8px rgba(60,154,48,0.18), var(--shadow-md); }
}

.quote-reminder-bell {
	position: absolute; top: 0; left: 0; width: 52px; height: 52px;
	flex-shrink: 0; border-radius: 50%; border: none;
	background: var(--brass); color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.quote-reminder-bell svg { width: 22px; height: 22px; }
/* Direct child of .quote-reminder (unclipped), not of .quote-reminder-bell
   or .quote-reminder-inner (both clipped) — see the comment above. */
.quote-reminder-badge {
	position: absolute; top: -3px; right: -3px; z-index: 1;
	min-width: 19px; height: 19px; padding: 0 4px;
	border-radius: 999px; background: var(--sale); color: #fff;
	font-size: 0.7rem; font-weight: 700; line-height: 19px; text-align: center;
	border: 2px solid var(--paper);
}

.quote-reminder-panel {
	display: block;
	padding: 14px 16px 14px 68px; min-height: 52px;
	color: var(--text-on-ivory);
	cursor: pointer;
	opacity: 0; visibility: hidden;
	transition: opacity 200ms ease 100ms, visibility 0ms linear 300ms;
}
.quote-reminder.is-expanded .quote-reminder-panel {
	opacity: 1; visibility: visible;
	transition: opacity 200ms ease 100ms, visibility 0ms linear 0ms;
}
.quote-reminder-panel strong { display: block; font-size: 0.92rem; padding-top: 5px; }
.quote-reminder-panel p { font-size: 0.84rem; color: var(--text-muted-on-ivory); margin-top: 3px; }
.quote-reminder-cta { display: inline-block; margin-top: 6px; font-size: 0.84rem; font-weight: 700; color: var(--brass-deep); }

@media (max-width: 640px) {
	.quote-reminder.is-expanded { width: calc(100vw - 32px); }
}

/* ---------- Product detail ---------- */
.pd-gallery-main { aspect-ratio: 4/3; border-radius: var(--radius-md); overflow: hidden; background: var(--ivory-dim); margin-bottom: 12px; }
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; }
.pd-thumbs button { width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: none; }
.pd-thumbs button.is-active { border-color: var(--brass); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pd-price-box { background: var(--ivory); border-radius: var(--radius-md); padding: 24px; margin: 20px 0; }
.pd-price-box .amount { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.pd-meta-list { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.pd-meta-list li { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 10px 0; border-bottom: 1px solid var(--stone-line); }
.pd-meta-list li span:first-child { color: var(--text-muted-on-ivory); }
.pd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stone-line); margin: 48px 0 28px; }
.pd-tab { padding: 12px 22px; font-weight: 600; font-size: 0.94rem; color: var(--text-muted-on-ivory); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pd-tab.is-active { color: var(--text-on-ivory); border-color: var(--brass); }
.pd-tab-panel { display: none; }
.pd-tab-panel.is-active { display: block; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--stone-line); }
.specs-table td { padding: 12px 0; font-size: 0.94rem; }
.specs-table td:first-child { color: var(--text-muted-on-ivory); width: 220px; }

/* ---------- Pricing table ---------- */
.pricing-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.pricing-table th, .pricing-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--stone-line); }
.pricing-table th { font-family: var(--font-display); font-weight: 600; background: var(--ivory); }
.pricing-table tr:hover td { background: var(--ivory); }

/* ---------- CTA banner ---------- */
.cta-banner {
	background: var(--ink); color: var(--text-on-ink);
	border-radius: var(--radius-md);
	padding: clamp(40px, 6vw, 72px);
	text-align: center;
}
.cta-banner h2 { color: var(--text-on-ink); }
.cta-banner .lede { color: var(--text-muted-on-ink); margin: 16px auto 28px; }
.cta-banner .hero-ctas { justify-content: center; }

/* ---------- Image-backed promo banners (full-width + two-column split — matches reference's "Boost Your Productivity" / "New Arrivals" / "Best Sellers" pattern) ---------- */
.promo-banner {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	min-height: 280px;
	display: flex; align-items: center;
	background: var(--ink-soft);
}
.promo-banner-media {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(13,13,15,0.88) 0%, rgba(13,13,15,0.45) 60%, rgba(13,13,15,0.15) 100%), var(--img);
	background-size: cover; background-position: center;
}
.promo-banner-content { position: relative; z-index: 1; padding: clamp(28px, 5vw, 56px); color: var(--text-on-ink); max-width: 440px; }
.promo-banner-content h2 { color: var(--text-on-ink); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.promo-banner-content p { color: var(--text-muted-on-ink); margin-top: 10px; }
.promo-banner-content .btn { margin-top: 20px; }
.promo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promo-tile {
	position: relative; border-radius: var(--radius-md); overflow: hidden;
	min-height: 220px; display: flex; align-items: flex-end;
}
.promo-tile-media { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,15,0.05) 40%, rgba(13,13,15,0.85) 100%), var(--img); background-size: cover; background-position: center; }
.promo-tile-content { position: relative; z-index: 1; padding: 26px; color: #fff; text-align: center; width: 100%; }
.promo-tile-content h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 14px; }

/* ---------- Footer ---------- */
.footer-newsletter { background: var(--ink-soft); border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 32px; }
.footer-newsletter-inner h3 { color: var(--text-on-ink); font-size: 1.3rem; }
.footer-newsletter-inner p { color: var(--text-muted-on-ink); font-size: 0.9rem; margin-top: 4px; }
.footer-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-newsletter-form input { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; min-width: 240px; }
.footer-newsletter-form input::placeholder { color: var(--text-muted-on-ink); }
.site-footer { background: var(--ink); color: var(--text-muted-on-ink); padding-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 48px; }
.footer-brand .logo { color: var(--text-on-ink); }
.footer-brand p { margin-top: 14px; font-size: 0.9rem; max-width: 280px; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--text-on-ink); margin-bottom: 16px; letter-spacing: 0.02em; }
.footer-col a { display: block; padding: 7px 0; font-size: 0.9rem; }
.footer-col a:hover { color: var(--brass); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(245,242,234,0.25); display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { border-color: var(--brass); color: var(--brass); }
.footer-bottom { border-top: 1px solid rgba(245,242,234,0.15); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.82rem; }
.footer-bottom > span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom > span a:hover { color: var(--brass); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a:hover { color: var(--brass); }

/* ---------- Back to top ---------- */
.back-to-top {
	position: fixed; bottom: 24px; left: 24px; z-index: 500;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--ink); color: var(--text-on-ink);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transform: translateY(10px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- Misc utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.loading-spinner { width: 22px; height: 22px; border: 2px solid var(--stone-line); border-top-color: var(--brass); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }