/* ==========================================================================
   34CMYK — design tokens
   A print shop's own vocabulary: process-colour swatches, registration
   marks and halftone dots stand in for generic "modern web" decoration.
   ========================================================================== */

:root {
	/* colour — the primaries (cyan/magenta/yellow) and the secondaries their
	   overlaps make in real subtractive mixing (blue, red, green), same as
	   ink on paper. Used for real via mix-blend-mode, not just as swatches. */
	--c-ink: #14140f;
	--c-ink-soft: #57524a;
	--c-paper: #ffffff;
	--c-surface: #ffffff;
	--c-line: rgba(23, 20, 15, 0.12);

	--c-cyan: #00a9e6;
	--c-magenta: #ec1793;
	--c-yellow: #ffe000;

	--c-blue: #1c2fc0;
	--c-red: #ff4d1f;
	--c-green: #1f9d4a;

	--c-green-soft: #93cc00;
	--c-orange: #c1550f;
	--c-orange-soft: #f0973d;

	/* type */
	--font-display: 'Unbounded', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--fs-h1: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
	--fs-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
	--fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);

	/* space */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;

	/* shape — flat and rectilinear, like the poster/ink references: sharp
	   swatches, modest rounding only where usability needs it. */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 4px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(23, 20, 15, 0.06);
	--shadow-md: 0 16px 32px -16px rgba(23, 20, 15, 0.22);
	--shadow-lg: 0 30px 60px -20px rgba(23, 20, 15, 0.32);

	--container: none;
	--header-h: 108px;
}

/* ==========================================================================
   reset
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
}

html, body {
	height: 100%;
}

body {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	color: var(--c-ink);
	background: var(--c-paper);
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* set by main.js while the mobile nav drawer is open, so the page
   underneath can't be scrolled behind it */
body.nav-open {
	overflow: hidden;
}

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

svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

a {
	color: inherit;
}

ul, ol {
	list-style: none;
	padding: 0;
}

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

button {
	background: none;
	border: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

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

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

/* ==========================================================================
   typography
   ========================================================================== */

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-ink);
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--fs-h1);
	margin-bottom: 0.6em;
}

h2 {
	font-size: var(--fs-h2);
	margin-bottom: 0.6em;
}

h3 {
	font-size: var(--fs-h3);
	margin-bottom: 0.5em;
}

p {
	margin-bottom: 1.1em;
	max-width: 68ch;
}

.lead {
	font-size: 1.15em;
	color: var(--c-ink-soft);
}

.page-content {
	animation: page-content-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}

@keyframes page-content-reveal {
	0% {
		opacity: 0;
		transform: translateY(36px) scale(0.96);
		filter: blur(10px);
	}
	60% {
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

.page-content:not(.home-content) {
	max-width: 1100px;
	margin-inline: auto;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid var(--c-line);
	padding: clamp(1.75rem, 4vw, 3rem);
}

.page-content ul,
.page-content ol {
	margin: 0 0 1.2em;
	/* outside markers need reserved room, or a wrapped second line has
	   nowhere to hang-indent to and collapses back to the left edge
	   instead of lining up under the first line's text */
	padding-left: 1.3em;
	list-style-position: outside;
}

.page-content ul { list-style-type: disc; }
.page-content ol { list-style-type: decimal; }

.page-content li {
	margin-bottom: 0.5em;
	padding-left: 0.3em;
	line-height: 1.5;
}

.page-content a {
	text-decoration-color: var(--c-orange-soft);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 0.6em 1em;
	border-radius: var(--radius-sm);
	z-index: 200;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 1rem;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.eyebrow svg {
	width: 1.3em;
	height: 1.3em;
}

.rings-icon circle {
	mix-blend-mode: multiply;
}

/* ==========================================================================
   registration bar — the signature motif: four process-colour swatches,
   used the way a printer uses a colour bar to check plate alignment.
   ========================================================================== */

.reg-bar {
	display: flex;
	height: 6px;
}

.reg-bar span {
	flex: 1;
}

.reg-bar span:nth-child(1) { background: var(--c-cyan); }
.reg-bar span:nth-child(2) { background: var(--c-magenta); }
.reg-bar span:nth-child(3) { background: var(--c-yellow); }
.reg-bar span:nth-child(4) { background: var(--c-ink); }

/* ==========================================================================
   ambient background — one of four photos, picked at random per page load
   (see app.py). Fixed to the viewport: content scrolls over it, so it
   never runs out and never shows white underneath.
   ========================================================================== */

.ambient-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

/* ==========================================================================
   buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.85em 1.5em;
	border-radius: var(--radius-pill);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	white-space: nowrap;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--c-green);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
	background: #275e0a;
	box-shadow: var(--shadow-md);
}

.btn--outline {
	background: var(--c-surface);
	color: var(--c-ink);
	box-shadow: inset 0 0 0 2px var(--c-line);
}

.btn--outline:hover {
	box-shadow: inset 0 0 0 2px var(--c-ink);
}

.btn svg {
	width: 1.1em;
	height: 1.1em;
}

/* ==========================================================================
   layout shell
   ========================================================================== */

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 clamp(1rem, 3vw, 3rem);
}

.app-shell {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
}

.site-column {
	margin-left: 272px;
	min-width: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#layout {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------- header/nav */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	border-bottom: 1px solid var(--c-line);
	transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-lg);
	min-height: 84px;
	padding-block: 0.75rem;
}

.brand {
	flex: none;
	display: block;
}

.brand img {
	height: 44px;
	width: auto;
}

.primary-nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1.4vw, 0.75rem);
}

.primary-nav__link,
.nav-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.65em 1em;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--c-ink);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-nav__link svg,
.nav-dropdown__trigger svg {
	width: 1.15em;
	height: 1.15em;
	color: var(--c-ink-soft);
}

.primary-nav__link:hover,
.nav-dropdown__trigger:hover {
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}

.nav-dropdown {
	position: relative;
}

.nav-dropdown__trigger[aria-expanded='true'] {
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}

.nav-dropdown__trigger .chev {
	width: 0.85em;
	height: 0.85em;
	color: var(--c-ink-soft);
	transition: transform 0.15s ease;
}

.nav-dropdown__trigger[aria-expanded='true'] .chev {
	transform: rotate(180deg);
}

.nav-dropdown__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	min-width: 260px;
	background: var(--c-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-dropdown__panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.nav-dropdown__panel a {
	display: block;
	padding: 0.7em 0.9em;
	border-radius: var(--radius-sm);
	font-weight: 500;
	font-size: 0.92rem;
}

.nav-dropdown__panel a:hover {
	background: var(--c-paper);
}

.nav-toggle {
	display: none;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	align-items: center;
	justify-content: center;
}

.nav-toggle:hover {
	background: var(--c-surface);
}

.nav-toggle svg {
	width: 1.4em;
	height: 1.4em;
}

.nav-toggle .icon-close {
	display: none;
}

.nav-toggle[aria-expanded='true'] .icon-open {
	display: none;
}

.nav-toggle[aria-expanded='true'] .icon-close {
	display: block;
}

/* ------------------------------------------------------------------ main */

#main {
	position: relative;
	z-index: 2;
	flex: 1;
	min-width: 0;
	padding-block: var(--space-lg) var(--space-2xl);
}

.content-col {
	min-width: 0;
}

.sidebar-col {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 272px;
	height: 100vh;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-md) var(--space-sm) var(--space-lg);
	background: var(--c-ink);
	color: rgba(246, 241, 231, 0.72);
}

.sidebar-col .brand {
	flex-shrink: 0;
}

.sidebar-col .brand img {
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------- sidebar */

.spec-card {
	flex-shrink: 0;
	overflow: hidden;
}

.spec-card__head {
	padding: 0.3rem 1.3rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	border-bottom: 1px solid rgba(246, 241, 231, 0.14);
}

.spec-card__head .eyebrow {
	color: rgba(246, 241, 231, 0.55);
}

.spec-card__head h2 {
	font-size: 1.05rem;
	margin-bottom: 0;
	color: #fff;
}

.spec-group {
	border-top: 1px solid rgba(246, 241, 231, 0.14);
}

.spec-group:first-child {
	border-top: 0;
}

.spec-group__title {
	margin: 0;
	padding: 0.9rem 1.05rem 0.2rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, 0.55);
}

.spec-list {
	padding: 0.5rem;
}

.spec-list li {
	border-bottom: 1px dashed rgba(246, 241, 231, 0.14);
}

.spec-list li:last-child {
	border-bottom: 0;
}

.spec-list a,
.spec-list .is-current-label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.65em 0.75em;
	font-size: 0.92rem;
	font-weight: 500;
	border-radius: var(--radius-sm);
	border-left: 3px solid transparent;
	text-decoration: none;
}

.spec-list a:hover {
	background: rgba(246, 241, 231, 0.08);
	border-left-color: var(--c-orange-soft);
}

.spec-list .is-current-label {
	font-weight: 700;
	border-left-color: var(--c-orange-soft);
	color: var(--c-orange-soft);
}

.spec-list__icon {
	flex: none;
	width: 1.1em;
	font-size: 0.95em;
	text-align: center;
	color: var(--c-cyan);
	opacity: 0.8;
}

.spec-list a:hover .spec-list__icon {
	color: var(--c-orange-soft);
	opacity: 1;
}

.spec-list .is-current-label .spec-list__icon {
	color: var(--c-orange-soft);
	opacity: 1;
}

/* ==========================================================================
   home / hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: min(82vh, 800px);
	display: flex;
	align-items: center;
	margin-bottom: var(--space-xl);
}

.hero__card {
	position: relative;
	z-index: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid var(--c-line);
	padding: clamp(1.75rem, 4vw, 3rem);
	max-width: 34rem;
}

.hero__card .eyebrow {
	margin-bottom: 1.1rem;
}

.hero__card h1 {
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	margin-bottom: 0.5em;
}

.hero__lead {
	font-size: 1.15rem;
	color: var(--c-ink-soft);
}

.hero__body p:not(.hero__lead) {
	color: var(--c-ink-soft);
}

/* ==========================================================================
   price tables — a data sheet, not a spreadsheet
   ========================================================================== */

.price-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	padding: 1.4rem 1.4rem 0.4rem;
	margin-bottom: var(--space-lg);
}

.price-card__title {
	font-size: 1.05rem;
	padding: 0 0.2rem;
}

.price-scroll {
	overflow-x: auto;
	border-radius: var(--radius-md);
	margin: 0 -0.2rem;
	scrollbar-width: thin;
}

table.price-table {
	width: 100%;
	min-width: 480px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.88rem;
}

table.price-table thead th,
table.price-table thead td {
	position: sticky;
	top: 0;
	background: var(--c-ink);
	color: var(--c-paper);
	font-family: var(--font-mono);
	font-weight: 500;
	text-align: left;
	padding: 0.75em 0.9em;
	white-space: nowrap;
}

table.price-table thead td:first-child {
	border-top-left-radius: var(--radius-sm);
}

table.price-table thead td:last-child {
	border-top-right-radius: var(--radius-sm);
}

table.price-table tbody td {
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--c-line);
	font-family: var(--font-mono);
}

table.price-table tbody tr:nth-child(even) {
	background: var(--c-paper);
}

table.price-table td.first_col {
	font-family: var(--font-body);
	font-weight: 500;
	white-space: normal;
}

table.price-table td.first_col em {
	font-style: normal;
}

table.price-table td.feat_col {
	font-family: var(--font-body);
	font-weight: 500;
	white-space: normal;
}

table.price-table td.feat_col em {
	font-style: normal;
}

table.price-table td.data {
	white-space: nowrap;
	text-align: right;
}

.tbl_hover {
	background: rgba(240, 151, 61, 0.28) !important;
	cursor: pointer;
}

.info-note {
	margin: var(--space-lg) 0;
	padding: 1.25rem 1.5rem;
	background: var(--c-surface);
	border-radius: var(--radius-md);
	border-left: 4px solid var(--c-green-soft);
	box-shadow: var(--shadow-sm);
}

.info-note h2 {
	font-size: 1.05rem;
}

/* self-promo box linking a product/service page to its live calculator —
   the reg-bar strip echoes the header/footer CMYK motif so it reads as
   "this is the real print-shop tool", not a generic banner ad */
.calc-promo {
	margin: var(--space-lg) 0;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--c-surface);
	box-shadow: var(--shadow-sm);
}

.calc-promo__body {
	padding: 1.1rem 1.5rem 1.35rem;
}

.calc-promo__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-orange);
	margin-bottom: 0.5rem;
}

.calc-promo__label svg {
	width: 1.2em;
	height: 1.2em;
}

.calc-promo p {
	margin: 0;
	font-size: 1.02rem;
}

.calc-promo a {
	font-weight: 700;
}

/* ==========================================================================
   portfolio
   ========================================================================== */

.gallery {
	columns: 3 220px;
	column-gap: var(--space-sm);
}

.gallery__item {
	position: relative;
	display: block;
	break-inside: avoid;
	margin-bottom: var(--space-sm);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease;
}

.gallery__item:hover {
	box-shadow: var(--shadow-md);
}

.gallery__item img {
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.gallery__item:hover img {
	transform: scale(1.05);
}

.gallery__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.5em 0.9em 0.7em;
	background: linear-gradient(0deg, rgba(23, 20, 15, 0.85), transparent);
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery__item:hover .gallery__overlay {
	opacity: 1;
	transform: translateY(0);
}

.lightbox[hidden] {
	display: none;
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(17, 15, 11, 0.9);
	backdrop-filter: blur(6px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	z-index: 100;
	padding: 2rem;
	animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lightbox-img {
	max-width: min(90vw, 1100px);
	max-height: 78vh;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.lightbox-caption {
	color: #fff;
	text-align: center;
	max-width: 60ch;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
}

.lightbox-close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.lightbox-close:hover {
	background: rgba(255, 255, 255, 0.24);
}

.lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.lightbox-nav:hover {
	background: rgba(255, 255, 255, 0.22);
}

.lightbox-nav--prev { left: 1.25rem; }
.lightbox-nav--next { right: 1.25rem; }

.lightbox-nav svg,
.lightbox-close svg {
	width: 1.3em;
	height: 1.3em;
}

/* ==========================================================================
   posts / articles
   ========================================================================== */

.post-list {
	display: grid;
	gap: var(--space-md);
}

.post-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	padding: 1.6rem 1.8rem;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
	border-color: var(--c-ink);
	transform: translateY(-2px);
}

.post-card h2 {
	font-size: 1.15rem;
}

.post-card h2 a:hover {
	color: var(--c-orange);
}

.post_annotation {
	color: var(--c-ink-soft);
}

.post_date {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	color: var(--c-ink-soft);
	margin-bottom: 0.6em;
}

article.post {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.post_text :is(h2, h3) {
	margin-top: 1em;
}

/* ==========================================================================
   contacts
   ========================================================================== */

.contacts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: var(--space-lg);
	align-items: start;
}

.info-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	padding: var(--space-lg);
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.25rem;
}

.info-list li {
	display: flex;
	gap: 0.9em;
	align-items: flex-start;
}

.info-list svg {
	flex: none;
	width: 1.3em;
	height: 1.3em;
	color: var(--c-green);
	margin-top: 0.15em;
}

.info-list .label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-ink-soft);
	margin-bottom: 0.15em;
}

.info-card__hours {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--c-line);
}

.map-card {
	overflow: hidden;
	border: 1px solid var(--c-line);
	min-height: 360px;
}

.map-card iframe,
.map-card__mount {
	border: 0;
	width: 100%;
	height: 100%;
	min-height: 360px;
}

/* ==========================================================================
   calculators — Листовки / Визитки / Цифровая печать / Широкий формат.
   Every price comes from the server (see pricing.py); these are just the
   shared shell (form + live result panel) all four pages use.
   ========================================================================== */

.calc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-lg);
	align-items: start;
}

.calc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: -0.75rem 0 1.5rem;
}

.calc-chip {
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	font-size: 0.82rem;
	color: var(--c-ink-soft);
}

.calc-fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.calc-field-card {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	padding: 1.25rem 1.5rem;
}

.calc-field-card h3 {
	font-size: 0.95rem;
	margin: 0 0 0.9rem;
}

.calc-field-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.calc-field-card__head h3 {
	margin: 0;
}

.calc-field-card__hint {
	font-size: 0.85rem;
	color: var(--c-ink-soft);
	margin: 0.4rem 0 0.9rem;
}

.calc-field-card__hint.is-error {
	color: var(--c-orange);
	font-weight: 600;
}

.calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem 1.25rem;
	margin-bottom: 0.9rem;
}

.calc-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.calc-field label {
	font-weight: 600;
	font-size: 0.88rem;
}

.calc-field input,
.calc-field textarea {
	font: inherit;
	padding: 0.65em 0.85em;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	resize: vertical;
}

.calc-field input:focus,
.calc-field textarea:focus {
	border-color: var(--c-green);
}

.calc-field input:disabled,
.calc-field textarea:disabled {
	background: var(--c-line);
	color: var(--c-ink-soft);
	cursor: not-allowed;
}

#wfn_order .calc-field {
	margin-bottom: 0.9rem;
}

.file-upload {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.file-upload__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.file-upload__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.file-upload__btn svg {
	width: 1.1em;
	height: 1.1em;
}

.file-upload__name {
	font-size: 0.85rem;
	color: var(--c-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#wfn_order .btn {
	width: 100%;
	justify-content: center;
	margin-top: 0.4rem;
}

#wfn_order.is-busy {
	opacity: 0.6;
	pointer-events: none;
	cursor: wait;
	transition: opacity 0.15s ease;
}

#wfn_order .btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.opt-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.opt-group + .opt-group {
	margin-top: 0.75rem;
}

.opt-btn {
	padding: 0.6em 1.1em;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	background: var(--c-paper);
	font-size: 0.9rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.opt-btn:hover {
	border-color: var(--c-ink);
}

.opt-btn.is-active {
	background: var(--c-ink);
	color: var(--c-paper);
	border-color: var(--c-ink);
}

.opt-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.opt-btn:disabled:hover {
	border-color: var(--c-line);
}

.calc-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.65em;
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
}

.calc-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.calc-switch__track {
	flex: none;
	width: 40px;
	height: 24px;
	border-radius: var(--radius-pill);
	background: var(--c-line);
	position: relative;
	transition: background-color 0.15s ease;
}

.calc-switch__track::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s ease;
}

.calc-switch input:checked + .calc-switch__track {
	background: var(--c-ink);
}

.calc-switch input:checked + .calc-switch__track::before {
	transform: translateX(16px);
}

.calc-subfields {
	margin-top: 0.9rem;
}

.calc-subfields[hidden] {
	display: none;
}

.calc-result-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.calc-result {
	position: sticky;
	top: calc(84px + var(--space-md));
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.calc-result__details {
	border-bottom: 1px solid var(--c-line);
}

.calc-result__details-title {
	padding: 1rem 1.25rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.calc-result__breakdown {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.88rem;
	padding: 0 1.25rem 1.1rem;
}

.calc-result__breakdown div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: var(--c-ink-soft);
}

.calc-result__total {
	padding: 1.25rem;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.calc-result__total-label {
	font-size: 0.92rem;
	color: var(--c-ink-soft);
}

.calc-result__total-price {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
}

.calc-result__meta {
	padding: 0 1.25rem 1.25rem;
	font-size: 0.85rem;
	color: var(--c-ink-soft);
}

.calc-result__empty {
	padding: 1.25rem;
	font-size: 0.9rem;
	color: var(--c-ink-soft);
}

/* ==========================================================================
   404
   ========================================================================== */

.error-card {
	text-align: center;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	padding: clamp(2.5rem, 8vw, 5rem) 2rem;
	max-width: 40rem;
	margin: var(--space-xl) auto;
}

.error-card .error-code {
	font-family: var(--font-mono);
	font-size: 1rem;
	letter-spacing: 0.2em;
	color: var(--c-cyan);
	margin-bottom: 1rem;
}

.error-card p {
	margin-inline: auto;
}

.error-card .btn {
	margin-top: 0.5rem;
}

/* ==========================================================================
   footer
   ========================================================================== */

.site-footer {
	position: relative;
	z-index: 1;
	background: var(--c-ink);
	color: rgba(246, 241, 231, 0.72);
	margin-top: auto;
}

.footer__grid {
	padding-block: var(--space-xl) var(--space-lg);
	display: grid;
	grid-template-columns: 9fr 8fr 3fr; /* ~45% / 40% / 15% */
	gap: var(--space-lg);
}

.footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.footer__logo {
	height: 40px;
	width: auto;
	background: var(--c-paper);
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius-sm);
}

.footer__brand p {
	color: rgba(246, 241, 231, 0.6);
	font-size: 0.92rem;
}

.footer__counters-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer__metrika img {
	display: block;
	width: 88px;
	height: 31px;
}

.footer__vk {
	min-width: 0;
}

/* VK's widget script sizes its iframe from width:"auto" at load time, but
   needs the container (and the iframe it injects) explicitly forced to
   100% — otherwise it falls back to its own default fixed pixel width. */
.footer__vk #vk_groups,
.footer__vk #vk_groups iframe {
	width: 100% !important;
}

.footer h3 {
	color: #fff;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
	margin-bottom: 1rem;
}

.footer__contact {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 0.92rem;
}

.footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.footer__contact svg {
	width: 1.1em;
	height: 1.1em;
	color: var(--c-green-soft);
}

.footer__bottom {
	border-top: 1px solid rgba(246, 241, 231, 0.12);
	padding-block: 1.25rem;
	font-size: 0.82rem;
	color: rgba(246, 241, 231, 0.5);
}

.footer__bottom a {
	color: rgba(246, 241, 231, 0.8);
}

/* ==========================================================================
   scroll reveal
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

@media (max-width: 960px) {
	/* .sidebar-col comes before .site-column in the DOM (harmless on
	   desktop, where it's position:fixed and out of flow) — but once it
	   goes static here, source order would otherwise dump the whole
	   21-link product catalog above the header and page content on every
	   single page. Reorder visually via flex instead of touching the
	   markup. */
	.app-shell {
		display: flex;
		flex-direction: column;
	}

	.sidebar-col {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		order: 2;
	}

	.site-column {
		margin-left: 0;
		min-height: 0;
		order: 1;
	}

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

	.footer__brand {
		grid-column: 1 / -1;
	}

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

	.calc-layout {
		grid-template-columns: 1fr;
	}

	.calc-result {
		position: static;
		top: auto;
	}

	.hero {
		min-height: 0;
	}

	/* Long dynamic labels (material names from the pricing sheet, e.g.
	   "Баннер литой 510 г (2,2/2,5/3,2 м.)") forced a single-line .opt-btn
	   wider than a phone screen — nowrap has no upper bound, so the whole
	   page pushed out sideways instead of just wrapping the button text. */
	.opt-btn {
		white-space: normal;
		overflow-wrap: break-word;
		text-align: left;
	}

	/* Was gated at 640px, separately from the sidebar going static above
	   — left a dead zone (~641-960px, tablet-portrait/narrow-laptop
	   territory) where the horizontal header nav had nowhere to go: no
	   hamburger yet, but not enough width either, since flex items don't
	   wrap by default. Moved to the same breakpoint the sidebar already
	   uses, so there's one clean "compact" layout instead of two
	   different collapse points fighting each other. */
	.nav-toggle {
		display: inline-flex;
	}

	.primary-nav {
		position: fixed;
		inset: 84px 0 0 0;
		height: calc(100vh - 84px);
		background: var(--c-paper);
		flex-direction: column;
		justify-content: flex-start;
		padding: 1.5rem;
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
	}

	.primary-nav.is-open {
		transform: translateX(0);
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.4rem;
	}

	.primary-nav__link,
	.nav-dropdown__trigger {
		width: 100%;
		justify-content: flex-start;
	}

	/* icon+label stay clustered on the left like .primary-nav__link — only
	   the chevron itself gets pushed to the row's far right, instead of
	   justify-content:space-between spreading the label away from its icon */
	.nav-dropdown__trigger .chev {
		margin-left: auto;
	}

	.nav-dropdown__panel {
		position: static;
		box-shadow: none;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		min-width: 0;
	}

	.nav-dropdown__panel.is-open {
		max-height: 220px;
		padding: 0.5rem;
	}
}

@media (max-width: 720px) {
	.gallery {
		columns: 2 160px;
	}

	.hero__card {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.footer__grid {
		grid-template-columns: 1fr;
	}
}