/* =====================================================================
   Site scale (2026-10-08): desktop renders at 90%, phones (up to 700px wide) at 86%.
   - html { zoom } shrinks every px value, image and font together.
   - Viewport units are written as var(--vw) / var(--vh) / var(--dvh) / var(--svh)
     so full-screen pieces (dialogs, the camera, full-bleed strips) still fill
     the real screen: in browsers whose zoom also shrinks 100vw, these divide
     it back out. The small script after this stylesheet sets --vz to 1 in
     browsers where viewport units are not affected by zoom.
   - Change the two --site-zoom values below to adjust the scale.
   ===================================================================== */
:root {
	--site-zoom: 0.9;
	--vz: var(--site-zoom);
	--vw: calc(1vw / var(--vz));
	--vh: calc(1vh / var(--vz));
	--dvh: calc(1dvh / var(--vz));
	--svh: calc(1svh / var(--vz));
	--lvh: calc(1lvh / var(--vz));
	--vmin: calc(1vmin / var(--vz));
	--vmax: calc(1vmax / var(--vz));
}
@media (max-width: 700px) { :root { --site-zoom: 0.86; } }
html { zoom: var(--site-zoom); }
@media print { :root { --site-zoom: 1; } }

@font-face {
	font-family: Inter;
	src: url('assets/inter-latin.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: Inter;
	src: url('assets/inter-latin-medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: Inter;
	src: url('assets/inter-latin-semibold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
:root {
	--paper: #f8f8f6;
	--paper-light: #fff;
	--ink: #252624;
	--olive: #66675e;
	--olive-deep: #292b28;
	--sage: #e9e8e3;
	--muted: #74756f;
	--line: #25262424;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sans: Inter, 'Helvetica Neue', Arial, sans-serif;
	--serif: var(--sans);
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 14px/1.65 var(--sans);
	-webkit-font-smoothing: antialiased;
}
/* Any pop-up open (gallery photo, booth, etc.): lock the page behind it.
   The lock has to sit on <html> because html/body use overflow-x: clip,
   which keeps body's overflow from reaching the page scroller. */
html:has(dialog[open]),
html:has(dialog[open]) body {
	overflow: hidden !important;
	overscroll-behavior: none;
}
.gallery-dialog,
.gallery-zoom { overscroll-behavior: contain; }
button,
input,
textarea,
select {
	font: inherit;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	color: inherit;
	cursor: pointer;
	background: none;
	border: 0;
}
a,
button {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
button:disabled {
	cursor: default;
	opacity: 0.5;
}
h1,
h2,
h3,
p,
figure {
	margin: 0;
}
h1,
h2,
h3 {
	font-weight: 400;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
}
video {
	object-fit: cover;
}
button img {
	pointer-events: none;
}
::selection {
	background: #d9d8cf;
	color: var(--ink);
}
:focus-visible {
	outline: 2px solid #777b71;
	outline-offset: 5px;
}
[hidden] {
	display: none !important;
}
.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.skip-link {
	position: fixed;
	top: -80px;
	left: 20px;
	z-index: 300;
	padding: 12px 24px;
	background: var(--ink);
	color: white;
}
.skip-link:focus {
	top: 10px;
}
.section-pad {
	padding: 110px calc(5.5 * var(--vw));
}
.eyebrow,
.section-index,
.hero-kicker,
.hero-bottomline {
	font-size: 9px;
	letter-spacing: 1.1px;
	line-height: 1.65;
	font-weight: 400;
	text-transform: uppercase;
}
.eyebrow {
	display: block;
}
.section-index {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 30px;
	color: var(--muted);
	padding-bottom: 27px;
	border-bottom: 1px solid var(--line);
}
.section-index > span:last-child {
	text-align: right;
	font-size: 8px;
}
.display {
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -3px;
	line-height: 1.08;
}
.display em {
	font-style: normal;
	color: var(--muted);
}
.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 17px 23px;
	font-size: 12px;
	line-height: 1.5;
	min-height: 49px;
	transition:
		background 0.35s,
		color 0.35s,
		border-color 0.35s,
		transform 0.5s var(--ease);
}
.button > span[aria-hidden] {
	font-size: 20px;
	line-height: 1;
	transition: transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.button:hover > span[aria-hidden] {
	transform: translate(3px, -3px);
}
}
.button-dark {
	background: var(--ink);
	color: #fff;
}
.button-dark:hover {
	background: #474943;
}
.button-light {
	background: #f8f8f6;
	color: var(--ink);
}
.button-light:hover {
	background: white;
}
.button-outline {
	border-color: #25262442;
}
.button-outline:hover {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.button-small {
	font-size: 10px;
	padding: 12px 19px;
	min-height: 44px;
	gap: 22px;
}
.text-link {
	display: inline-flex;
	gap: 28px;
	align-items: center;
	font-size: 12px;
	padding: 10px 0 9px;
	position: relative;
	line-height: 1.5;
	min-height: 44px;
	border-bottom: 1px solid #2526244a;
}
.text-link:hover {
	border-color: var(--ink);
}
.text-link span {
	font-size: 18px;
	transition: transform 0.3s;
}
@media (hover: hover) and (pointer: fine) {
.text-link:hover span {
	transform: translate(2px, -2px);
}
}
.icon-button {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 22px;
	transition:
		background 0.3s,
		color 0.3s;
}
.icon-button:hover {
	background: var(--ink);
	color: #fff;
}
.glass {
	background: #ffffff70;
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	border: 1px solid #ffffffa6;
}
.tiny-star {
	font-size: 27px;
	line-height: 1;
	color: var(--muted);
}
/* The typography and photographs do the work. Glass is reserved for controls. */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	height: 100px;
	padding: 0 calc(5.5 * var(--vw));
	position: sticky;
	top: 0;
	z-index: 40;
	background: #f8f8f6ec;
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	border-bottom: 1px solid transparent;
	transition:
		height 0.4s,
		border-color 0.4s,
		background 0.4s;
}
.site-header.scrolled {
	height: 80px;
	border-bottom-color: var(--line);
	background: #f8f8f6d9;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.brand img {
	width: 103px;
	height: auto;
}
.brand > span {
	font-size: 7px;
	writing-mode: vertical-rl;
	letter-spacing: 1.8px;
	margin-top: 5px;
}
.desktop-nav {
	display: flex;
	gap: 34px;
	align-items: center;
	margin-left: auto;
	margin-right: 55px;
}
.desktop-nav a {
	font-size: 11px;
	position: relative;
	padding-block: 12px;
	color: #555750;
	transition: color 0.3s;
}
.desktop-nav a:hover,
.desktop-nav a[aria-current='page'] {
	color: #151612;
}
.desktop-nav a[aria-current='page']::after {
	content: '';
	width: 3px;
	height: 3px;
	background: var(--ink);
	border-radius: 50%;
	position: absolute;
	bottom: 4px;
	left: 50%;
}
.nav-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}
.nav-actions .button {
	border-radius: 50px;
}
.menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 12px;
}
.menu-toggle span {
	display: block;
	height: 1px;
	background: var(--ink);
	margin: 5px 0;
	transition: transform 0.3s;
}
.menu-toggle[aria-expanded='true'] span:first-child {
	transform: translateY(3px) rotate(45deg);
}
.menu-toggle[aria-expanded='true'] span:last-child {
	transform: translateY(-3px) rotate(-45deg);
}
.mobile-nav {
	position: absolute;
	inset: 100% 0 auto;
	padding: 24px calc(6 * var(--vw)) 30px;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	box-shadow: 0 25px 30px #00000008;
}
.mobile-nav a {
	display: block;
	font-size: 22px;
	letter-spacing: -0.7px;
	padding: 12px 0;
}
.hero-v2 {
	padding: 39px calc(3 * var(--vw)) 0;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	column-gap: calc(7 * var(--vw));
	overflow: hidden;
}
.hero-kicker {
	grid-column: 1/-1;
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding-inline: calc(2.5 * var(--vw));
	color: var(--muted);
	font-size: 8px;
	letter-spacing: 1.2px;
}
.hero-wordmark {
	font-size: clamp(53px, calc(6.35 * var(--vw)), 94px);
	letter-spacing: -4.5px;
	line-height: 1.075;
	font-weight: 400;
	padding-left: calc(2.5 * var(--vw));
	margin: 31px 0 36px;
}
.hero-wordmark > span {
	color: #93958a;
}
.hero-intro {
	display: flex;
	align-self: end;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 280px;
	margin-bottom: 48px;
}
.hero-intro > p {
	font-size: 13px;
	color: #6c6e66;
	line-height: 1.9;
}
.hero-intro .text-link {
	font-size: 11px;
	gap: 38px;
}
.hero-stage {
	grid-column: 1/-1;
	height: 490px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 3px;
	background: #ddddd6;
}
.stage-photo {
	position: absolute;
	inset: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.stage-photo > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	filter: grayscale(1);
	transition:
		filter 0.8s var(--ease),
		transform 1.2s var(--ease),
		opacity 0.3s;
	transform: scale(1.005);
}
@media (hover: hover) and (pointer: fine) {
.stage-photo:hover > img {
	transform: scale(1.025);
}
}
.hero-stage.is-color .stage-photo > img {
	filter: grayscale(0);
}
.stage-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, #0002, transparent 25%, transparent 65%, #0004);
}
.photo-hover {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	border: 1px solid #ffffff80;
	border-radius: 50%;
	background: #ffffff27;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: white;
	font-size: 9px;
	line-height: 1.6;
	letter-spacing: 1.3px;
	display: grid;
	align-content: center;
	transform: scale(0.9);
	opacity: 0;
	transition:
		opacity 0.4s,
		transform 0.5s var(--ease);
	z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.stage-photo:hover .photo-hover,
.stage-photo:focus-visible .photo-hover {
	opacity: 1;
	transform: scale(1);
}
}
.stage-top {
	position: absolute;
	left: 29px;
	right: 29px;
	top: 25px;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	font-size: 8px;
	color: #fff;
	letter-spacing: 1.2px;
	text-shadow: 0 1px 5px #0006;
	z-index: 2;
}
.stage-top > span:first-child {
	display: flex;
	align-items: center;
	gap: 9px;
}
.rec-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	display: inline-block;
	flex-shrink: 0;
}
.stage-bottom {
	position: absolute;
	bottom: 23px;
	left: 24px;
	right: 24px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	pointer-events: none;
	gap: 24px;
	z-index: 3;
}
.stage-glass {
	display: grid;
	grid-template-columns: 1fr 44px;
	align-items: center;
	gap: 8px 40px;
	background: #ffffff95;
	border: 1px solid #ffffffa8;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	padding: 20px 22px;
	border-radius: 5px;
	min-width: 325px;
	pointer-events: auto;
	box-shadow: 0 8px 28px #0000000a;
}
.stage-glass .eyebrow {
	font-size: 7px;
	color: #5f6259;
	letter-spacing: 1px;
}
.stage-glass > span:nth-child(2) {
	font-size: 12px;
	line-height: 1.6;
	grid-column: 1;
}
.stage-glass > a {
	grid-column: 2;
	grid-row: 1/3;
	font-size: 27px;
	display: grid;
	place-items: center;
	align-self: stretch;
}
.stage-controller {
	display: flex;
	gap: 5px;
	align-items: center;
	padding: 6px;
	background: #ffffff30;
	border: 1px solid #ffffff7a;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: #fff;
	border-radius: 50px;
	pointer-events: auto;
}
.stage-controller button {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	font-size: 21px;
	transition: background 0.3s;
}
.stage-controller button:hover {
	background: #ffffff30;
}
.stage-filter button {
	width: auto;
	min-width: 64px;
	font-size: 10px;
	padding-inline: 13px;
}
.stage-filter {
    display: flex;
    align-items: center;
    gap: 3px;
}
.stage-filter button {
    border-radius: 24px;
}
.stage-filter button[aria-pressed='true'] {
    background: #ffffffeb;
    color: var(--ink);
}
.stage-glass > a svg {
    width: 18px;
    height: 18px;
}
.closing-arrow svg {
    width: 100%;
    height: auto;
}
.stage-controller > span {
	width: 1px;
	height: 17px;
	background: #ffffff60;
	margin: 0 3px;
}
.hero-shutter {
	position: absolute;
	inset: 0;
	background: #fff;
	pointer-events: none;
	opacity: 0;
	z-index: 5;
}
.hero-shutter.active {
	animation: camera-flash 0.4s ease-out;
}
.hero-bottomline {
	grid-column: 1/-1;
	display: flex;
	justify-content: space-between;
	padding: 22px calc(2.5 * var(--vw));
	font-size: 7px;
	letter-spacing: 1px;
	color: #72756b;
	border-bottom: 1px solid var(--line);
}
.intro-statement {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: calc(7 * var(--vw));
	margin: 48px 0 52px;
	align-items: start;
}
.intro-statement h2 {
	font-size: clamp(31px, calc(3.4 * var(--vw)), 49px);
	line-height: 1.2;
	letter-spacing: -1.7px;
}
.intro-statement h2 span {
	color: #74766d;
}
.intro-statement > div > p {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.9;
	max-width: 365px;
}
.intro-statement .text-link {
	margin-top: 21px;
	font-size: 11px;
}
.experience-layout {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: calc(8 * var(--vw));
	align-items: center;
}
.equipment-frame {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
}
.equipment-frame > img {
	width: 100%;
	aspect-ratio: 1.04;
	object-fit: cover;
}
.equipment-label {
	position: absolute;
	bottom: 21px;
	left: 23px;
	font-size: 7px;
	letter-spacing: 1.1px;
	color: white;
	text-shadow: 0 1px 5px #000b;
}
.equipment-cross {
	position: absolute;
	top: 12px;
	right: 20px;
	color: white;
	font-size: 25px;
	font-weight: 400;
}
.spec-row {
	display: flex;
	gap: 29px;
	padding: 28px 0;
	border-top: 1px solid var(--line);
}
.spec-row > span {
	font-size: 9px;
	color: #8c8f82;
	padding-top: 5px;
}
.spec-row h3 {
	font-size: 19px;
	letter-spacing: -0.5px;
	line-height: 1.4;
	margin-bottom: 12px;
}
.spec-row p {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.9;
	max-width: 310px;
}
.experience-link {
	padding-top: 30px;
	border-top: 1px solid var(--line);
}
.experience-link > .eyebrow {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
	margin-bottom: 20px;
}
.experience-link .button {
	font-size: 11px;
}
/* Feature-card treatment for the celebration overview. */
.experience-features { align-items: stretch; gap: 24px; }
.experience-card { min-height: 310px; padding: 25px 25px 28px; text-align: center; border: 0; border-radius: 14px; background: linear-gradient(120deg, #f0f0eb 0%, #f5ece8 34%, #edf2eb 65%, #f0f0eb 100%); background-size: 260% 260%; box-shadow: none; animation: experience-card-gradient 12s ease-in-out infinite alternate; }
.experience-decorator { position: relative; width: 148px; height: 112px; margin: 0 auto 21px; overflow: hidden; opacity: .72; -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 65%, transparent 100%); mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 65%, transparent 100%); background-image: linear-gradient(to right, rgba(39,42,34,.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(39,42,34,.22) 1px, transparent 1px); background-size: 22px 22px; }
.experience-icon { position: absolute; inset: 0; width: 52px; height: 52px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(39,42,34,.4); border-radius: 4px; background: #f0f0eb; color: #2d3128; font-size: 22px; line-height: 1; }
.experience-card h3 { margin-top: 0; font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.experience-card p { max-width: 285px; margin: 13px auto 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
@media (max-width: 700px) { .experience-card { min-height: 0; padding: 22px 20px 25px; } .experience-decorator { width: 126px; height: 92px; margin-bottom: 17px; } }
@keyframes experience-card-gradient { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .experience-card { animation: none; } }
.contact-sheet-section {
	background: #efefeb;
}
.contact-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 35px;
	margin: 44px 0 42px;
}
.contact-heading h2 {
	font-size: clamp(40px, calc(4.3 * var(--vw)), 64px);
	letter-spacing: -2.5px;
	line-height: 1.12;
}
.contact-heading h2 span {
	color: #7c7f74;
}
.contact-heading > p {
	font-size: 12px;
	line-height: 1.9;
	color: var(--muted);
	padding-bottom: 7px;
}
.contact-sheet {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 28px 21px;
}
.contact-frame {
	display: flex;
	flex-direction: column;
	padding: 0;
	text-align: left;
	overflow: hidden;
	min-width: 0;
}
.contact-frame img {
	width: 100%;
	aspect-ratio: 1.23;
	object-fit: cover;
	transition:
		filter 0.7s var(--ease),
		opacity 0.7s var(--ease),
		transform 1s var(--ease);
	border-radius: 2px;
}
.contact-frame > span {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 7px;
	letter-spacing: 0.7px;
	padding-top: 12px;
	line-height: 1.6;
	color: var(--muted);
	width: 100%;
	position: relative;
	z-index: 2;
	background: #efefeb;
}
.contact-frame b {
	font-weight: 400;
	color: var(--ink);
	font-size: 8px;
}
.contact-frame i {
	font-style: normal;
	font-size: 19px;
	margin-left: auto;
	line-height: 1;
}
.frame-large {
	grid-row: 1/3;
}
.frame-large img {
	flex: 1;
	min-height: 0;
	aspect-ratio: auto;
	max-height: none;
	object-position: 51% 50%;
}
@media (hover: hover) and (pointer: fine) {
.contact-frame:hover img {
	filter: brightness(1.06);
	transform: scale(1.02);
}
}
.contact-sheet:has(.contact-frame:hover) .contact-frame:not(:hover) img {
	opacity: 0.72;
}
.contact-sheet-foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 30px;
	padding-top: 23px;
}
.contact-sheet-foot > span {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
}
.contact-sheet-foot .text-link {
	font-size: 10px;
	border-bottom: 0;
	gap: 20px;
}
.format-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(9 * var(--vw));
	margin-top: 45px;
	align-items: center;
}
.formats-copy h2 {
	font-size: clamp(40px, calc(4.5 * var(--vw)), 67px);
	letter-spacing: -2.5px;
	line-height: 1.15;
}
.formats-copy h2 span {
	color: #7c7e73;
}
.media-tabs {
	margin-top: 46px;
	max-width: 390px;
}
.media-tabs button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--line);
	padding: 18px 0;
	width: 100%;
	font-size: 10px;
	letter-spacing: 0.5px;
	text-align: left;
	color: #9b9d93;
	transition:
		color 0.3s,
		padding 0.4s var(--ease);
}
.media-tabs button:last-child {
	border-bottom: 1px solid var(--line);
}
.media-tabs button > span {
	font-size: 18px;
	opacity: 0;
	transition: opacity 0.3s;
}
.media-tabs button[aria-selected='true'] {
	color: var(--ink);
	padding-left: 12px;
}
.media-tabs button[aria-selected='true'] > span {
	opacity: 1;
}
.formats-copy > p {
	font-size: 11px;
	color: var(--muted);
	margin-top: 20px;
	min-height: 40px;
}
.format-stage {
	position: relative;
	height: 520px;
	background: #e9e9e4;
	border-radius: 2px;
	overflow: hidden;
}
.format-panel {
	position: absolute;
	inset: 0;
}
.print-layout {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 38px;
}
.mini-strip {
	width: 185px;
	padding: 11px;
	background: #fffffc;
	box-shadow: 0 20px 38px -20px #272b294a;
	transform: rotate(-5deg);
}
.mini-strip > img {
	width: 100%;
	height: 105px;
	object-fit: cover;
	margin-bottom: 7px;
}
.mini-strip > span {
	display: block;
	text-align: center;
	font-weight: 600;
	font-size: 27px;
	letter-spacing: -1.7px;
	line-height: 1.2;
	padding: 12px 0 8px;
}
.mini-strip-brand img {
	width: 88px;
	height: auto;
	margin: 0 auto;
}
.mini-strip small {
	display: block;
	font-size: 5px;
	letter-spacing: 1px;
	font-weight: 400;
	margin-top: 6px;
}
.print-side-label {
	writing-mode: vertical-rl;
	font-size: 7px;
	letter-spacing: 1.4px;
	color: var(--muted);
}
.format-stage-label {
	position: absolute;
	bottom: 21px;
	left: 24px;
	right: 24px;
	font-size: 7px;
	letter-spacing: 1.1px;
	color: #818478;
	text-align: right;
}
.motion-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
}
.motion-panel video {
	display: block;
	width: 100%;
	max-height: 410px;
	object-fit: contain;
	background: #d0d1c9;
	border-radius: 2px;
}
.interactive-studio {
	background: #2b2d2b;
	color: #f1f2ed;
	padding-block: 75px 86px;
}
.studio-top {
	display: flex;
	justify-content: space-between;
	gap: 25px;
	padding-bottom: 31px;
	border-bottom: 1px solid #ffffff24;
}
.studio-top .eyebrow {
	font-size: 8px;
	letter-spacing: 1.1px;
	color: #c5c7bd;
	display: flex;
	align-items: center;
	gap: 10px;
}
.studio-top .eyebrow:last-child {
	font-size: 7px;
	text-align: right;
}
.studio-content {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	align-items: center;
	gap: calc(8 * var(--vw));
	margin-top: 49px;
}
.studio-copy h2 {
	font-size: clamp(39px, calc(4.5 * var(--vw)), 66px);
	letter-spacing: -2.4px;
	line-height: 1.13;
}
.studio-copy h2 span {
	color: #aaafa2;
}
.studio-copy > p {
	font-size: 12px;
	color: #bec2b6;
	line-height: 1.9;
	max-width: 300px;
	margin: 26px 0 30px;
}
.studio-copy > .button {
	font-size: 11px;
}
.studio-privacy {
	display: block;
	font-size: 8px;
	color: #9ba292;
	margin-top: 16px;
}
.studio-preview {
	padding: 0;
	display: block;
	width: 100%;
	text-align: left;
}
.studio-viewfinder {
	position: relative;
	aspect-ratio: 1.33;
	overflow: hidden;
	border-radius: 3px;
}
.studio-viewfinder > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.9);
	transition:
		filter 0.7s,
		transform 1.1s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.studio-preview:hover img {
	filter: brightness(1);
	transform: scale(1.025);
}
}
.viewfinder-corner {
	position: absolute;
	width: 20px;
	height: 20px;
	border: 1px solid #ffffff82;
}
.viewfinder-corner.tl {
	left: 20px;
	top: 20px;
	border-right: 0;
	border-bottom: 0;
}
.viewfinder-corner.tr {
	right: 20px;
	top: 20px;
	border-left: 0;
	border-bottom: 0;
}
.viewfinder-corner.bl {
	left: 20px;
	bottom: 20px;
	border-right: 0;
	border-top: 0;
}
.viewfinder-corner.br {
	right: 20px;
	bottom: 20px;
	border-left: 0;
	border-top: 0;
}
.studio-enter {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 92px;
	height: 92px;
	display: grid;
	place-content: center;
	text-align: center;
	line-height: 1.8;
	font-size: 10px;
	letter-spacing: 1px;
	border-radius: 50%;
	border: 1px solid #ffffff90;
	background: #ffffff1e;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: background 0.4s;
}
.studio-preview:hover .studio-enter {
	background: #ffffff40;
}
.studio-hud {
	position: absolute;
	bottom: 29px;
	left: 30px;
	right: 30px;
	display: flex;
	justify-content: space-between;
	font-size: 6px;
	letter-spacing: 1px;
	color: #f1f1eb;
}
.studio-hud b {
	font-weight: 400;
}
.studio-preview-caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 7px;
	letter-spacing: 1px;
	color: #bec2b7;
	margin-top: 16px;
}
.studio-preview-caption > span {
	font-size: 18px;
}
.package-heading {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin: 47px 0 47px;
}
.package-heading h2 {
	font-size: clamp(36px, calc(3.9 * var(--vw)), 58px);
	line-height: 1.15;
	letter-spacing: -2px;
}
.package-heading h2 > span {
	color: #7b7e72;
}
.package-heading > p {
	font-size: 11px;
	color: var(--muted);
	line-height: 1.9;
	max-width: 290px;
}
.package-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: #f0f0eb;
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
}
.package-card {
	padding: 37px 42px 39px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.package-card + .package-card {
	border-left: 1px solid var(--line);
	background: #e8e9e2;
}
.package-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--line);
}
.package-top > .eyebrow,
.package-top > span:last-child {
	font-size: 8px;
	letter-spacing: 0.7px;
	color: var(--muted);
}
.package-card h3 {
	font-size: 30px;
	letter-spacing: -1px;
	margin: 28px 0 0;
	line-height: 1.2;
}
.package-price {
	display: flex;
	align-items: baseline;
	gap: 19px;
	margin: 22px 0 23px;
}
.package-price > span {
	font-size: 58px;
	letter-spacing: -3px;
	line-height: 1.1;
}
.package-price small {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
}
.package-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 29px;
	flex: 1;
}
.package-card li {
	font-size: 12px;
	padding: 8px 0;
	display: flex;
	gap: 13px;
	align-items: baseline;
	color: #61665a;
}
.package-card li::before {
	content: '+';
	color: #898e80;
	font-size: 14px;
}
.package-card > .button {
	justify-content: space-between;
	font-size: 11px;
	width: 100%;
}
.packages-note {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	margin-top: 23px;
}
.packages-note > span {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
}
.packages-note > .text-link {
	border: 0;
	font-size: 10px;
	gap: 18px;
}
.faq-section {
	padding-top: 20px;
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: calc(8 * var(--vw));
}
.faq-intro > .eyebrow {
	font-size: 8px;
	letter-spacing: 1.2px;
	margin-bottom: 24px;
	color: var(--muted);
}
.faq-intro h2 {
	font-size: 52px;
	letter-spacing: -2.5px;
	line-height: 1.1;
}
.faq-intro > .text-link {
	font-size: 10px;
	margin-top: 24px;
}
.faq-list details {
	border-top: 1px solid var(--line);
}
.faq-list details:last-child {
	border-bottom: 1px solid var(--line);
}
.faq-list summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	font-size: 13px;
}
.faq-list summary::-webkit-details-marker {
	display: none;
}
.faq-list summary span {
	font-size: 23px;
	font-weight: 400;
	transition: transform 0.3s;
	color: #7b8172;
}
.faq-list details[open] summary span {
	transform: rotate(45deg);
}
.faq-list p {
	font-size: 12px;
	line-height: 1.9;
	color: var(--muted);
	padding: 0 35px 28px 0;
}
.closing {
	background: #e9e9e3;
	padding-top: 50px;
	padding-bottom: 50px;
}
.closing-top {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 37px;
	color: var(--muted);
}
.closing-top .eyebrow {
	font-size: 8px;
	letter-spacing: 1px;
}
.closing-top .eyebrow:last-child {
	text-align: right;
	font-size: 7px;
}
.closing-title {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	align-items: center;
	font-size: clamp(52px, calc(6.4 * var(--vw)), 97px);
	line-height: 1.08;
	letter-spacing: -4px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 41px;
}
.closing-arrow {
	width: clamp(32px, calc(4 * var(--vw)), 52px);
	flex-shrink: 0;
	line-height: 0;
	font-weight: 400;
	transition: transform 0.6s var(--ease);
	margin-right: 30px;
	color: #686e60;
}
@media (hover: hover) and (pointer: fine) {
.closing-title:hover .closing-arrow {
	transform: translate(8px, -8px);
}
}
.closing-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 25px;
}
.closing-bottom p {
	font-size: 11px;
	color: var(--muted);
}
.closing-bottom > .button {
	font-size: 11px;
}
.site-footer {
	padding: 60px calc(5.5 * var(--vw)) 22px;
}
.footer-main {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 45px;
	align-items: start;
	padding-bottom: 60px;
}
.footer-logo {
	font-size: 57px;
	font-weight: 600;
	letter-spacing: -4px;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 14px;
}
.footer-logo img {
	width: 140px;
	height: auto;
}
.footer-logo > span {
	writing-mode: vertical-rl;
	font-size: 7px;
	font-weight: 400;
	letter-spacing: 1.6px;
	margin-top: 8px;
}
.footer-note {
	font-size: 11px;
	line-height: 1.9;
	color: var(--muted);
	padding-top: 8px;
}
.footer-links {
	justify-self: end;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}
.footer-links a {
	font-size: 11px;
}
.footer-links a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	padding-top: 19px;
	border-top: 1px solid var(--line);
	font-size: 7px;
	letter-spacing: 0.6px;
	color: var(--muted);
}
/* About is a quiet photographic essay, with the same clear rhythm as the homepage. */
.about-v2 {
	padding-top: 38px;
	padding-bottom: 0;
}
.about-title {
	font-size: clamp(64px, calc(8 * var(--vw)), 118px);
	font-weight: 400;
	letter-spacing: -6px;
	line-height: 1.03;
	margin-top: 46px;
}
.about-lede {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin: 37px 0 43px;
}
.about-lede > span {
	font-size: 8px;
	letter-spacing: 1px;
	color: var(--muted);
}
.about-lede > p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--muted);
	max-width: 400px;
}
.about-photo-pair {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 30px;
	align-items: end;
}
.about-main-photo img {
	width: 100%;
	height: 470px;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: 2px;
	filter: grayscale(1);
}
.about-small-photo img {
	width: 100%;
	height: 310px;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: 2px;
}
.about-photo-pair figcaption {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
	margin-top: 14px;
}
.about-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(10 * var(--vw));
	margin-top: 46px;
}
.about-story h2 {
	font-size: clamp(38px, calc(3.8 * var(--vw)), 55px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -2px;
}
.about-story p {
	font-size: 13px;
	line-height: 1.95;
	color: var(--muted);
	margin-bottom: 22px;
}
.about-story .story-lead {
	font-size: 22px;
	line-height: 1.65;
	letter-spacing: -0.4px;
	color: var(--ink);
	margin-bottom: 27px;
}
.about-story .text-link {
	font-size: 11px;
	margin-top: 4px;
}
.about-principles {
	background: #eeeee8;
}
.about-principles > .eyebrow {
	font-size: 8px;
	color: var(--muted);
}
.principles-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
	margin-top: 42px;
}
.principles-grid article {
	border-top: 1px solid var(--line);
	padding-top: 20px;
}
.principles-grid article > span {
	font-size: 9px;
	color: var(--muted);
}
.principles-grid h3 {
	font-size: 21px;
	letter-spacing: -0.6px;
	margin: 25px 0 17px;
}
.principles-grid p {
	font-size: 12px;
	line-height: 1.9;
	color: var(--muted);
}
.local-v2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(9 * var(--vw));
	align-items: center;
}
.local-copy > .eyebrow {
	font-size: 8px;
	color: var(--muted);
	margin-bottom: 30px;
}
.local-copy h2 {
	font-size: clamp(35px, calc(3.8 * var(--vw)), 57px);
	line-height: 1.2;
	letter-spacing: -2px;
}
.local-copy h2 > span {
	color: #7d8174;
}
.local-copy > p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--muted);
	margin: 28px 0;
	max-width: 350px;
}
.local-copy > .button {
	font-size: 11px;
}
.local-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 2px;
}
.local-image > span {
	display: block;
	font-size: 7px;
	letter-spacing: 1.2px;
	color: var(--muted);
	padding-top: 17px;
	text-align: right;
}
.hero-enter {
	animation: enter 0.8s var(--ease) both;
}
.hero-enter:nth-child(3) {
	animation-delay: 0.12s;
}
.reveal {
	opacity: 1;
}
.js-motion .reveal {
	opacity: 0;
	transform: translateY(17px);
	transition:
		opacity 0.8s var(--ease),
		transform 0.8s var(--ease);
}
.js-motion .reveal.is-visible {
	opacity: 1;
	transform: none;
}
@keyframes enter {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes dialog-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes camera-flash {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
	}
}
.inquiry-section {
	display: grid;
	grid-template-columns: 0.87fr 1.13fr;
	gap: calc(7 * var(--vw));
	padding-top: 60px;
	padding-bottom: 100px;
	align-items: start;
}
.inquiry-copy {
	position: sticky;
	top: 140px;
}
.inquiry-copy > .eyebrow {
	font-size: 8px;
	margin-bottom: 25px;
}
.inquiry-copy h1 {
	font-size: clamp(50px, calc(6 * var(--vw)), 88px);
	letter-spacing: -4px;
}
.inquiry-copy > p {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.9;
	max-width: 360px;
	margin-top: 27px;
}
.contact-details {
	display: flex;
	flex-direction: column;
	gap: 23px;
	margin-top: 34px;
}
.contact-details a {
	font-size: 12px;
	word-break: break-word;
}
.contact-details .eyebrow {
	font-size: 8px;
	color: var(--muted);
	margin-bottom: 7px;
}
.contact-details a > span:last-child {
	margin-left: 10px;
	font-size: 17px;
}
.inquiry-booking {
	display: flex;
	gap: 20px;
	padding: 25px 22px;
	border-radius: 7px;
	margin-top: 38px;
	background: #e0e6d780;
	max-width: 370px;
}
.inquiry-booking > .tiny-star {
	font-size: 30px;
}
.inquiry-booking h2 {
	font-size: 12px;
	font-weight: 500;
}
.inquiry-booking p {
	font-size: 10px;
	color: var(--muted);
	margin-top: 5px;
}
.inquiry-booking .text-link {
	font-size: 10px;
	margin-top: 6px;
	padding-bottom: 4px;
}
.inquiry-form-wrap {
	background: var(--paper-light);
	padding: 32px;
	border: 1px solid #ffffff;
	border-radius: 18px;
	box-shadow: 0 25px 50px -30px #303c2520;
}
.form-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 25px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 28px;
}
.form-heading > .eyebrow {
	font-size: 9px;
}
.form-heading > span:last-child {
	font-size: 7px;
	letter-spacing: 1px;
	color: var(--muted);
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.field {
	margin-bottom: 22px;
}
.field label,
.package-selection legend {
	display: block;
	font-size: 10px;
	font-weight: 500;
	margin-bottom: 9px;
}
.field label > span {
	color: var(--olive);
}
.field input,
.field select,
.field textarea {
	display: block;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 11px 0;
	background: transparent;
	color: var(--ink);
	border-radius: 10px;
	font-size: 11px;
	outline-offset: 4px;
	transition: border-color 0.3s;
	min-height: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--olive);
}
.field textarea {
	resize: vertical;
	line-height: 1.8;
	min-height: 100px;
}
.field ::placeholder {
	color: #85867b;
	opacity: 1;
	font-size: 10px;
}
.field small {
	display: block;
	font-size: 8px;
	color: var(--muted);
	margin-top: 7px;
}
.field select {
	padding-right: 16px;
	text-overflow: ellipsis;
}
.package-selection {
	border: 0;
	padding: 0;
	margin: 2px 0 25px;
	min-width: 0;
}
.package-selection > div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
.package-selection label {
	display: block;
	position: relative;
	cursor: pointer;
}
.package-selection input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.package-selection label > span {
	display: block;
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 13px 10px;
	font-size: 9px;
	line-height: 1.4;
	transition:
		border-color 0.3s,
		background 0.3s;
	height: 100%;
}
.package-selection small {
	display: block;
	color: var(--muted);
	font-size: 7px;
	margin-top: 6px;
}
.package-selection input:checked + span {
	border-color: #738460;
	background: #e7ecdd;
}
.package-selection input:focus-visible + span {
	outline: 2px solid var(--olive);
	outline-offset: 3px;
}
#inquiry-form > .button {
	width: 100%;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
}
.form-note {
	font-size: 9px;
	color: var(--muted);
	line-height: 1.8;
	margin-top: 16px;
}
.honeypot {
	position: absolute;
	left: -9999px;
	opacity: 0;
}
.status-message {
	font-size: 11px;
	line-height: 1.8;
	margin-top: 14px;
}
.status-message.error {
	color: #98412b;
}
#form-success {
	padding: 40px 0;
}
.success-star {
	display: block;
	font-size: 60px;
	color: var(--olive);
	line-height: 1;
	margin-bottom: 25px;
}
#form-success > .display {
	font-size: 60px;
}
#form-success > p {
	font-size: 13px;
	line-height: 1.9;
	color: var(--muted);
	margin: 24px 0 30px;
}
#form-success .button {
	font-size: 10px;
	white-space: normal;
}

dialog {
	color: var(--ink);
	border: 0;
	padding: 28px;
	background: var(--paper);
	max-height: calc(90 * var(--svh));
	max-width: calc(calc(100 * var(--vw)) - 32px);
	border-radius: 10px;
	box-shadow: 0 30px 100px #14201350;
}
dialog::backdrop {
	background: #1b2519b3;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
dialog[open] {
	animation: dialog-in 0.4s var(--ease);
}
.gallery-dialog {
	width: 1060px;
}
.lightbox-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
}
.lightbox-top h2 {
	font-family: var(--serif);
	font-size: 27px;
	letter-spacing: -0.6px;
}
.lightbox-image {
	position: relative;
	background: #e6e8de;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
}
.lightbox-image > img {
	max-height: calc(65 * var(--svh));
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.lightbox-image > .icon-button {
	position: absolute;
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	background: #f4f2ebdc;
	backdrop-filter: blur(10px);
}
.lightbox-image > .icon-button:hover {
	background: var(--ink);
}
.gallery-prev {
	left: 13px;
}
.gallery-next {
	right: 13px;
}
.lightbox-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	font-size: 11px;
	padding-top: 19px;
}
.lightbox-bottom > span {
	font-size: 9px;
	white-space: nowrap;
}
.booth-dialog {
	width: 1020px;
}
.booth-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 25px;
	gap: 20px;
}
.booth-top .eyebrow {
	font-size: 8px;
	color: var(--muted);
	margin-bottom: 8px;
}
.booth-top h2 {
	font-family: var(--serif);
	font-size: 43px;
	line-height: 1.1;
	letter-spacing: -2px;
}
.booth-dialog-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 38px;
	align-items: start;
}
.viewfinder {
	position: relative;
	width: 100%;
	aspect-ratio: 4/3;
	max-height: 300px;
	background: #d7dccb;
	overflow: hidden;
	border-radius: 4px;
}
.viewfinder > img,
.viewfinder > video {
	height: 100%;
	width: 100%;
	position: absolute;
	inset: 0;
	object-fit: cover;
}
.viewfinder > video {
	transform: scaleX(-1);
}
.viewfinder::after {
	content: '';
	position: absolute;
	inset: 18px;
	border: 1px solid #ffffff5c;
	pointer-events: none;
	border-radius: 2px;
}
.viewfinder-label {
	position: absolute;
	bottom: 24px;
	left: 28px;
	z-index: 1;
	font-size: 8px;
	letter-spacing: 1.5px;
	color: white;
	text-shadow: 0 1px 6px #000;
}
.capture-flash {
	position: absolute;
	inset: 0;
	background: white;
	opacity: 0;
	pointer-events: none;
}
.capture-flash.active {
	animation: camera-flash 0.45s ease-out;
}
#countdown {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--serif);
	font-size: 100px;
	color: white;
	text-shadow: 0 2px 15px #0005;
}
.camera-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.camera-actions .button {
	font-size: 11px;
	padding: 15px 22px;
	flex: 1;
}
.text-button {
	padding: 6px 0;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: 10px;
	cursor: pointer;
}
.booth-alternatives {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 16px;
	font-size: 9px;
}
.upload-label {
	position: relative;
	overflow: hidden;
}
#photo-upload {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.upload-label:focus-within {
	outline: 2px solid var(--olive);
	outline-offset: 3px;
}
.privacy-note {
	font-size: 9px;
	line-height: 1.7;
	color: var(--muted);
	margin-top: 12px;
}
.strip-workspace {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px;
	background: #e0e6d5;
	border-radius: 7px;
	min-height: 435px;
}
.canvas-wrap {
	width: 150px;
	min-width: 110px;
	transform: rotate(3deg);
	box-shadow: 0 16px 25px #24351820;
	background: var(--paper);
	transition: transform 0.5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.canvas-wrap:hover {
	transform: rotate(0);
}
}
#photo-strip {
	display: block;
	width: 100%;
	height: auto;
}
.strip-options {
	flex: 1;
	min-width: 0;
}
.strip-options > .eyebrow {
	font-size: 8px;
}
.swatches {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 18px 0;
}
.swatch {
	height: 27px;
	width: 27px;
	min-width: 27px;
	border-radius: 50%;
	border: 1px solid #272d2530;
	position: relative;
}
.swatch[aria-pressed='true']::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 1px solid var(--olive);
	border-radius: 50%;
}
.swatch-ivory {
	background: #faf7ef;
}
.swatch-sage {
	background: #cfd8c1;
}
.swatch-ink {
	background: #2b352a;
}
.mono-toggle {
	display: flex;
	gap: 7px;
	align-items: center;
	font-size: 9px;
	line-height: 1.5;
	cursor: pointer;
}
.mono-toggle input {
	accent-color: var(--olive);
	margin: 0;
	width: 14px;
	height: 14px;
}
.strip-options > .button {
	font-size: 9px;
	margin-top: 22px;
	padding: 13px 16px;
	white-space: normal;
	text-align: center;
}
/* Dialog and form refinements shared by the three pages. */
.field label,
.package-selection legend {
	font-size: 12px;
}
.field input,
.field select,
.field textarea {
	font-size: 14px;
}
.field ::placeholder {
	font-size: 12px;
}
.package-selection label > span {
	font-size: 11px;
}
.package-selection small {
	font-size: 9px;
}

.inquiry-copy h1 {
	font-weight: 400;
	line-height: 1.09;
	letter-spacing: -3px;
	font-size: clamp(48px, calc(5 * var(--vw)), 74px);
}
.inquiry-form-wrap {
	border-radius: 4px;
	box-shadow: none;
	border-color: var(--line);
}
.inquiry-booking {
	background: #eaeae580;
	border-radius: 3px;
}
.inquiry-booking .tiny-star {
	font-size: 0;
}
.inquiry-booking .tiny-star::before {
	content: '↗';
	font-size: 25px;
}
.field label,
.package-selection legend {
	font-weight: 400;
}
.package-selection input:checked + span {
	border-color: #7a7e71;
	background: #e5e7df;
}
.package-selection label > span {
	border-radius: 3px;
}
.swatch-sage {
	background: #d7d8d0;
}
.swatch-ink {
	background: #292d2a;
}
.strip-workspace {
	background: #e6e8e0;
	border-radius: 3px;
}
.canvas-wrap {
	transform: rotate(0);
}
.booth-top h2 {
	font-size: 36px;
	font-weight: 400;
	letter-spacing: -1.5px;
}
.booth-dialog,
.gallery-dialog {
	border-radius: 6px;
}
.lightbox-top h2 {
	font-size: 23px;
	letter-spacing: -0.7px;
	font-weight: 400;
}
#form-success > .display {
	font-size: 50px;
	letter-spacing: -2px;
	line-height: 1.1;
}
.success-star {
	font-size: 0;
}
.success-star::before {
	content: '✓';
	font-size: 40px;
}
.studio-preview:focus-visible {
	outline-color: #d1d6c7;
}
.viewfinder {
	width: 100%;
	max-height: 300px;
}
.status-message {
	min-height: 0;
}
@media (min-width: 1600px) {
	.site-header,
	.section-pad,
	.site-footer {
		padding-inline: max(calc(5.5 * var(--vw)), calc((calc(100 * var(--vw)) - 1430px) / 2));
	}
	.hero-v2 {
		padding-inline: max(calc(3 * var(--vw)), calc((calc(100 * var(--vw)) - 1510px) / 2));
	}
	.hero-wordmark {
		font-size: 96px;
	}
	.hero-stage {
		height: 570px;
	}
}
@media (max-width: 1100px) {
	.desktop-nav {
		margin-right: 18px;
		gap: 25px;
	}
	.hero-wordmark {
		font-size: 67px;
		letter-spacing: -3.3px;
	}
	.hero-intro {
		max-width: 235px;
		margin-bottom: 40px;
		gap: 12px;
	}
	.hero-intro > p {
		font-size: 12px;
	}
	.hero-stage {
		height: 440px;
	}
	.hero-v2 {
		column-gap: calc(5 * var(--vw));
	}
	.hero-kicker {
		font-size: 7px;
	}
	.section-pad {
		padding-block: 90px;
	}
	.intro-statement {
		gap: calc(6 * var(--vw));
		grid-template-columns: 1.1fr 0.9fr;
	}
	.intro-statement h2 {
		font-size: 36px;
		letter-spacing: -1.3px;
	}
	.intro-statement > div > p {
		font-size: 12px;
	}
	.experience-layout {
		gap: calc(6 * var(--vw));
	}
	.spec-row {
		padding-block: 22px;
		gap: 20px;
	}
	.spec-row h3 {
		font-size: 18px;
	}
	.spec-row p {
		font-size: 11px;
	}
	.experience-link {
		padding-top: 23px;
	}
	.experience-link > .eyebrow {
		margin-bottom: 15px;
	}
	.contact-heading h2 {
		font-size: 49px;
		letter-spacing: -2px;
	}
	.contact-sheet {
		gap: 25px 16px;
	}
	.contact-frame > span {
		font-size: 6px;
		gap: 8px;
	}
	.contact-frame b {
		font-size: 7px;
	}
	.format-layout {
		gap: calc(7 * var(--vw));
	}
	.formats-copy h2 {
		font-size: 50px;
		letter-spacing: -2px;
	}
	.studio-content {
		gap: calc(6 * var(--vw));
	}
	.studio-copy h2 {
		font-size: 48px;
		letter-spacing: -2px;
	}
	.package-heading h2 {
		font-size: 44px;
		letter-spacing: -1.6px;
	}
	.package-heading > p {
		font-size: 10px;
		max-width: 245px;
	}
	.package-card {
		padding: 32px;
	}
	.package-card li {
		font-size: 11px;
	}
	.faq-section {
		padding-top: 15px;
	}
	.about-title {
		font-size: 90px;
		letter-spacing: -4.5px;
	}
	.about-main-photo img {
		height: 395px;
	}
	.about-small-photo img {
		height: 275px;
	}
	.about-story-grid {
		gap: calc(7 * var(--vw));
	}
	.about-story h2 {
		font-size: 39px;
		letter-spacing: -1.5px;
	}
	.about-story .story-lead {
		font-size: 20px;
	}
	.local-v2 {
		gap: calc(7 * var(--vw));
	}
	.local-copy h2 {
		font-size: 40px;
	}
	.principles-grid {
		gap: 40px;
	}
	.inquiry-section {
		gap: calc(5 * var(--vw));
	}
	.inquiry-form-wrap {
		padding: 27px;
	}
	.inquiry-copy h1 {
		font-size: 53px;
	}
	.contact-details a {
		font-size: 11px;
	}
}
@media (max-width: 900px) {
	.desktop-nav {
		display: none;
	}
	.menu-toggle {
		display: block;
	}
	.site-header {
		height: 87px;
		padding-inline: calc(5 * var(--vw));
	}
	.section-pad {
		padding: 77px calc(5 * var(--vw));
	}
	.hero-v2 {
		padding-top: 28px;
		grid-template-columns: 1.1fr 0.9fr;
		column-gap: calc(4 * var(--vw));
	}
	.hero-kicker {
		padding-inline: calc(2 * var(--vw));
		font-size: 6px;
	}
	.hero-wordmark {
		font-size: 59px;
		letter-spacing: -3px;
		padding-left: calc(2 * var(--vw));
		margin: 30px 0;
	}
	.hero-intro {
		max-width: 235px;
		margin-bottom: 31px;
	}
	.hero-intro > p {
		font-size: 11px;
	}
	.hero-intro .text-link {
		font-size: 10px;
		gap: 24px;
	}
	.hero-stage {
		height: 420px;
	}
	.hero-bottomline {
		font-size: 6px;
		letter-spacing: 0.8px;
		padding-inline: calc(2 * var(--vw));
	}
	.stage-glass {
		min-width: 285px;
		padding: 17px 18px;
		gap: 7px 20px;
	}
	.stage-glass > span:nth-child(2) {
		font-size: 11px;
	}
	.stage-controller {
		padding: 4px;
	}
	.stage-controller button {
		width: 39px;
		height: 39px;
	}
	.intro-statement h2 {
		font-size: 32px;
		line-height: 1.25;
		letter-spacing: -1.2px;
	}
	.intro-statement h2 br {
		display: none;
	}
	.intro-statement > div > p {
		font-size: 11px;
	}
	.intro-statement {
		margin-block: 35px;
		gap: 40px;
	}
	.experience-layout {
		gap: calc(5 * var(--vw));
	}
	.spec-row {
		padding-block: 20px;
		gap: 16px;
	}
	.spec-row h3 {
		font-size: 17px;
		line-height: 1.4;
		margin-bottom: 8px;
	}
	.spec-row p {
		font-size: 11px;
	}
	.equipment-frame > img {
		aspect-ratio: 0.82;
	}
	.equipment-label {
		font-size: 6px;
		left: 17px;
		bottom: 17px;
	}
	.experience-link > .eyebrow {
		font-size: 6px;
	}
	.contact-heading {
		margin-block: 36px;
	}
	.contact-heading h2 {
		font-size: 45px;
		letter-spacing: -1.8px;
	}
	.contact-heading > p {
		font-size: 10px;
	}
	.contact-sheet {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		gap: 25px;
	}
	.frame-large {
		grid-row: auto;
		grid-column: 1/-1;
		aspect-ratio: 1.65;
	}
	.frame-large img {
		height: calc(100% - 29px);
		width: 100%;
	}
	.contact-frame:not(.frame-large) img {
		aspect-ratio: 1.33;
	}
	.contact-frame > span {
		font-size: 7px;
		gap: 15px;
	}
	.contact-sheet-foot > span {
		font-size: 6px;
	}
	.formats-copy h2 {
		font-size: 45px;
		letter-spacing: -1.8px;
	}
	.format-stage {
		height: 475px;
	}
	.format-layout {
		gap: calc(6 * var(--vw));
	}
	.mini-strip {
		width: 165px;
	}
	.mini-strip > img {
		height: 97px;
	}
	.print-layout {
		gap: 24px;
	}
	.print-side-label {
		font-size: 6px;
	}
	.media-tabs {
		margin-top: 30px;
	}
	.media-tabs button {
		font-size: 9px;
	}
	.studio-copy h2 {
		font-size: 42px;
		letter-spacing: -1.7px;
	}
	.studio-copy > p {
		font-size: 11px;
		margin: 23px 0 27px;
	}
	.studio-content {
		gap: calc(6 * var(--vw));
	}
	.studio-viewfinder {
		aspect-ratio: 1.04;
	}
	.studio-top .eyebrow {
		font-size: 6px;
	}
	.studio-top .eyebrow:last-child {
		font-size: 6px;
	}
	.studio-enter {
		width: 78px;
		height: 78px;
		font-size: 9px;
	}
	.studio-hud {
		font-size: 5px;
		letter-spacing: 0.7px;
		left: 25px;
		right: 25px;
	}
	.studio-preview-caption {
		font-size: 6px;
	}
	.package-heading h2 {
		font-size: 37px;
		letter-spacing: -1.4px;
	}
	.package-heading > p {
		font-size: 10px;
		max-width: 220px;
	}
	.package-card {
		padding: 27px;
	}
	.package-top > .eyebrow,
	.package-top > span:last-child {
		font-size: 7px;
	}
	.package-card h3 {
		font-size: 27px;
	}
	.package-card li {
		font-size: 10px;
	}
	.package-price > span {
		font-size: 53px;
	}
	.package-card > .button {
		font-size: 10px;
		padding-inline: 18px;
	}
	.faq-section {
		grid-template-columns: 0.75fr 1.25fr;
		gap: calc(6 * var(--vw));
		padding-top: 0;
	}
	.faq-intro h2 {
		font-size: 46px;
	}
	.faq-list summary {
		font-size: 12px;
	}
	.faq-list p {
		font-size: 11px;
	}
	.closing {
		padding-block: 40px;
	}
	.closing-top .eyebrow:last-child {
		max-width: 190px;
		font-size: 6px;
	}
	.closing-title {
		font-size: 64px;
		letter-spacing: -3px;
	}
	.closing-arrow {
		font-size: 90px;
		margin-right: 0;
	}
	.closing-bottom > p {
		font-size: 10px;
	}
	.footer-main {
		gap: 35px;
		grid-template-columns: 1fr auto;
	}
	.footer-logo {
		font-size: 49px;
	}
	.footer-note {
		font-size: 10px;
	}
	.footer-links a {
		font-size: 10px;
	}
	.about-v2 {
		padding-top: 30px;
		padding-bottom: 0;
	}
	.about-title {
		font-size: 83px;
		letter-spacing: -4px;
	}
	.about-photo-pair {
		gap: 22px;
		grid-template-columns: 1.3fr 1fr;
	}
	.about-main-photo img {
		height: 340px;
	}
	.about-small-photo img {
		height: 250px;
	}
	.about-lede > p {
		font-size: 12px;
	}
	.about-story-grid {
		gap: calc(6 * var(--vw));
	}
	.about-story h2 {
		font-size: 35px;
		letter-spacing: -1.3px;
	}
	.about-story .story-lead {
		font-size: 19px;
	}
	.about-story p {
		font-size: 12px;
	}
	.principles-grid {
		gap: 30px;
	}
	.principles-grid h3 {
		font-size: 18px;
	}
	.principles-grid p {
		font-size: 11px;
	}
	.local-copy h2 {
		font-size: 35px;
		letter-spacing: -1.5px;
	}
	.local-copy > p {
		font-size: 12px;
	}
	.local-v2 {
		gap: calc(6 * var(--vw));
	}
	.inquiry-section {
		grid-template-columns: 1fr;
		gap: 42px;
		padding-top: 42px;
	}
	.inquiry-copy {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
	}
	.inquiry-copy > .eyebrow {
		grid-column: 1/-1;
	}
	.inquiry-copy h1 {
		grid-row: 2/4;
		font-size: 60px;
	}
	.inquiry-copy > p {
		margin: 0;
	}
	.contact-details {
		margin-top: 23px;
	}
	.inquiry-booking {
		grid-column: 1/-1;
		max-width: none;
		margin-top: 28px;
		align-items: center;
	}
	.inquiry-booking > div {
		display: flex;
		align-items: center;
		gap: 20px;
		flex: 1;
		flex-wrap: wrap;
	}
	.inquiry-booking p {
		margin-top: 0;
	}
	.inquiry-booking .text-link {
		margin-left: auto;
		margin-top: 0;
	}
	.inquiry-form-wrap {
		padding: 32px;
	}
	.field label,
	.package-selection legend {
		font-size: 12px;
	}
	.field input,
	.field select,
	.field textarea {
		font-size: 13px;
	}
	.field ::placeholder {
		font-size: 11px;
	}
	.package-selection label > span {
		font-size: 11px;
		padding: 15px;
	}
	.package-selection small {
		font-size: 9px;
	}
	.booth-dialog-grid {
		gap: 22px;
	}
	.strip-workspace {
		flex-direction: column;
		gap: 20px;
		min-height: auto;
	}
	.canvas-wrap {
		width: 140px;
	}
	.strip-options {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 13px;
		max-width: 230px;
	}
	.strip-options > .eyebrow {
		display: none;
	}
	.swatches {
		margin: 6px 0;
	}
	.strip-options > .button {
		margin-top: 4px;
	}
	.mono-toggle {
		font-size: 9px;
	}
}
@media (max-width: 640px) {
	html {
		scroll-padding-top: 90px;
	}
	.site-header {
		height: 79px;
		padding-inline: 22px;
		gap: 15px;
	}
	.site-header.scrolled {
		height: 73px;
	}
	.brand img {
		width: 105px;
		flex-shrink: 0;
	}
	.brand > span {
		font-size: 6px;
		letter-spacing: 1.5px;
	}
	.nav-actions {
		gap: 5px;
	}
	.nav-actions > .button {
		font-size: 9px;
		padding: 11px 15px;
		gap: 14px;
		min-height: 43px;
	}
	.nav-actions > .button > span[aria-hidden] {
		font-size: 17px;
	}
	.menu-toggle {
		width: 37px;
		padding-inline: 9px;
	}
	.section-pad {
		padding: 65px 23px;
	}
	.section-index {
		padding-bottom: 20px;
		font-size: 7px;
		gap: 20px;
	}
	.section-index > span:last-child {
		font-size: 6px;
		max-width: 150px;
		letter-spacing: 0.6px;
		line-height: 1.8;
	}
	.eyebrow {
		font-size: 8px;
		letter-spacing: 1px;
	}
	.hero-v2 {
		padding: 29px 13px 0;
		display: block;
	}
	.hero-kicker {
		padding: 0 10px;
		font-size: 6px;
		letter-spacing: 0.7px;
		gap: 15px;
	}
	.hero-kicker > span:first-child {
		max-width: 165px;
		line-height: 1.8;
	}
	.hero-kicker > span:last-child {
		font-size: 6px;
		max-width: 100px;
		text-align: right;
	}
	.hero-wordmark {
		font-size: clamp(44px, calc(12.2 * var(--vw)), 73px);
		letter-spacing: -2.5px;
		line-height: 1.13;
		margin: 30px 10px 21px;
		padding: 0;
	}
	.hero-intro {
		max-width: 300px;
		margin: 0 10px 30px;
		gap: 12px;
	}
	.hero-intro > p {
		font-size: 12px;
		line-height: 1.85;
		max-width: 285px;
	}
	.hero-intro > .text-link {
		font-size: 10px;
		gap: 33px;
		min-height: 36px;
		padding-bottom: 7px;
	}
	.hero-stage {
		height: 465px;
		border-radius: 2px;
	}
	.stage-photo > img {
		object-position: 49% 38%;
		filter: grayscale(1);
		transform: none;
	}
	.stage-top {
		left: 16px;
		right: 16px;
		top: 17px;
		font-size: 6px;
		letter-spacing: 0.7px;
		align-items: flex-start;
		gap: 16px;
	}
	.stage-top > span:first-child {
		max-width: 150px;
		line-height: 1.8;
		align-items: flex-start;
		gap: 7px;
	}
	.stage-top .rec-dot {
		margin-top: 3px;
		width: 4px;
		height: 4px;
	}
	.stage-top > span:last-child {
		font-size: 6px;
		white-space: nowrap;
	}
	.stage-bottom {
		left: 12px;
		right: 12px;
		bottom: 13px;
		align-items: flex-end;
		gap: 10px;
	}
	.stage-glass {
		min-width: 0;
		grid-template-columns: 1fr 22px;
		gap: 7px 12px;
		padding: 15px 13px;
		border-radius: 4px;
		flex: 1;
		max-width: 235px;
		background: #ffffffa3;
	}
	.stage-glass .eyebrow {
		font-size: 5px;
		letter-spacing: 0.7px;
	}
	.stage-glass > span:nth-child(2) {
		font-size: 10px;
		line-height: 1.7;
	}
	.stage-glass > a {
		font-size: 22px;
	}
	.stage-controller {
		display: grid;
		grid-template-columns: 1fr 1fr;
		border-radius: 5px;
		gap: 0;
		padding: 4px;
		width: 105px;
		flex-shrink: 0;
	}
	 .stage-filter {
		grid-column: 1/-1;
	}
	.stage-filter button {
		flex: 1;
		font-size: 8px;
		min-width: 0;
		line-height: 1;
		padding-block: 0;
		height: 30px;
	}
	.stage-controller > span {
		display: none;
	}
	.stage-controller > button {
		height: 33px;
		width: 39px;
		font-size: 20px;
	}
	.photo-hover {
		width: 73px;
		height: 73px;
		margin: -36px 0 0 -36px;
		font-size: 8px;
	}
	.hero-bottomline {
		font-size: 5px;
		letter-spacing: 0.6px;
		padding: 19px 10px;
		gap: 20px;
		line-height: 1.7;
	}
	.hero-bottomline > a {
		white-space: nowrap;
	}
	.intro-statement {
		grid-template-columns: 1fr;
		gap: 24px;
		margin: 29px 0 33px;
	}
	.intro-statement h2 {
		font-size: 34px;
		letter-spacing: -1.3px;
		line-height: 1.25;
	}
	.intro-statement h2 br {
		display: none;
	}
	.intro-statement > div > p {
		font-size: 13px;
		line-height: 1.9;
		max-width: none;
	}
	.intro-statement .text-link {
		font-size: 11px;
		margin-top: 15px;
	}
	.experience-layout {
		grid-template-columns: 1fr;
		gap: 29px;
	}
	.equipment-frame > img {
		aspect-ratio: 1.05;
		object-position: 50% center;
	}
	.equipment-label {
		font-size: 6px;
		bottom: 17px;
		left: 18px;
	}
	.spec-row {
		padding: 24px 0;
		gap: 22px;
	}
	.spec-row > span {
		font-size: 8px;
	}
	.spec-row h3 {
		font-size: 19px;
		letter-spacing: -0.5px;
	}
	.spec-row p {
		font-size: 12px;
		line-height: 1.9;
		max-width: 280px;
	}
	.experience-link {
		padding-top: 23px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px;
	}
	.experience-link > .eyebrow {
		font-size: 6px;
		margin: 0;
		max-width: 100px;
		line-height: 1.8;
	}
	.experience-link > .button {
		font-size: 10px;
		padding-inline: 19px;
		gap: 23px;
		margin-left: auto;
	}
	.contact-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
		margin: 30px 0 28px;
	}
	.contact-heading h2 {
		font-size: 43px;
		letter-spacing: -1.8px;
		line-height: 1.13;
	}
	.contact-heading > p {
		font-size: 11px;
		line-height: 1.8;
	}
	.contact-sheet {
		gap: 23px 13px;
	}
	.frame-large {
		aspect-ratio: 1.03;
	}
	.frame-large img {
		object-position: 50% 40%;
		height: calc(100% - 26px);
	}
	.contact-frame:not(.frame-large) img {
		aspect-ratio: 0.91;
		object-position: center;
	}
	.contact-frame > span {
		font-size: 5px;
		gap: 7px;
		letter-spacing: 0.4px;
		line-height: 1.7;
		padding-top: 10px;
	}
	.contact-frame > span b {
		font-size: 6px;
	}
	.contact-frame > span i {
		font-size: 16px;
	}
	.contact-sheet-foot {
		padding-top: 21px;
		align-items: flex-start;
		gap: 20px;
	}
	.contact-sheet-foot > span {
		font-size: 5px;
		letter-spacing: 0.7px;
		max-width: 140px;
		padding-top: 11px;
		line-height: 1.9;
	}
	.contact-sheet-foot > .text-link {
		font-size: 9px;
		gap: 9px;
		white-space: nowrap;
	}
	.format-layout {
		grid-template-columns: 1fr;
		gap: 29px;
		margin-top: 30px;
	}
	.formats-copy h2 {
		font-size: 44px;
		letter-spacing: -1.8px;
		line-height: 1.17;
	}
	.media-tabs {
		max-width: none;
		margin-top: 28px;
	}
	.media-tabs button {
		font-size: 9px;
		padding: 18px 0;
	}
	.formats-copy > p {
		font-size: 11px;
		margin-top: 17px;
		min-height: 0;
	}
	.format-stage {
		height: 455px;
	}
	.mini-strip {
		width: 175px;
		transform: rotate(-4deg);
	}
	.mini-strip > img {
		height: 100px;
	}
	.print-layout {
		gap: 32px;
	}
	.print-side-label {
		font-size: 6px;
	}
	.format-stage-label {
		font-size: 6px;
		bottom: 19px;
		left: 20px;
		right: 20px;
	}
	.motion-panel {
		padding: 23px;
	}
	.motion-panel video {
		max-height: 370px;
	}
	.interactive-studio {
		padding-top: 39px;
		padding-bottom: 48px;
	}
	.studio-top {
		padding-bottom: 23px;
		gap: 22px;
	}
	.studio-top .eyebrow {
		font-size: 6px;
		letter-spacing: 0.7px;
		line-height: 1.9;
		max-width: 155px;
		align-items: flex-start;
	}
	.studio-top .rec-dot {
		margin-top: 4px;
		width: 4px;
		height: 4px;
	}
	.studio-top .eyebrow:last-child {
		font-size: 5px;
		max-width: 90px;
	}
	.studio-content {
		grid-template-columns: 1fr;
		gap: 35px;
		margin-top: 33px;
	}
	.studio-copy h2 {
		font-size: 43px;
		letter-spacing: -1.8px;
	}
	.studio-copy > p {
		font-size: 12px;
		line-height: 1.9;
		max-width: 300px;
		margin: 23px 0 25px;
	}
	.studio-copy > .button {
		font-size: 11px;
		padding-inline: 23px;
	}
	.studio-privacy {
		font-size: 8px;
		margin-top: 15px;
	}
	.studio-viewfinder {
		aspect-ratio: 1.13;
	}
	.studio-preview-caption {
		font-size: 6px;
	}
	.studio-hud {
		font-size: 5px;
		letter-spacing: 0.7px;
		bottom: 26px;
		left: 27px;
		right: 27px;
	}
	.studio-enter {
		width: 77px;
		height: 77px;
		font-size: 8px;
	}
	.package-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 21px;
		margin: 29px 0;
	}
	.package-heading h2 {
		font-size: 37px;
		letter-spacing: -1.5px;
		line-height: 1.2;
	}
	.package-heading > p {
		font-size: 11px;
		max-width: none;
		line-height: 1.85;
	}
	.package-grid {
		grid-template-columns: 1fr;
	}
	.package-card {
		padding: 27px 25px 29px;
	}
	.package-card + .package-card {
		border-left: 0;
		border-top: 1px solid var(--line);
	}
	.package-top {
		padding-bottom: 22px;
	}
	.package-top > .eyebrow,
	.package-top > span:last-child {
		font-size: 7px;
		letter-spacing: 0.6px;
	}
	.package-card h3 {
		font-size: 29px;
		margin-top: 25px;
		letter-spacing: -1px;
	}
	.package-price > span {
		font-size: 58px;
	}
	.package-price small {
		font-size: 7px;
	}
	.package-card li {
		font-size: 11px;
		line-height: 1.8;
		padding: 8px 0;
		gap: 12px;
	}
	.package-card > .button {
		font-size: 11px;
		padding-inline: 21px;
	}
	.packages-note {
		align-items: flex-start;
		gap: 10px;
		flex-direction: column;
		margin-top: 21px;
	}
	.packages-note > span {
		font-size: 6px;
		letter-spacing: 0.8px;
	}
	.packages-note > .text-link {
		font-size: 10px;
		gap: 25px;
	}
	.faq-section {
		grid-template-columns: 1fr;
		gap: 31px;
		padding-top: 10px;
	}
	.faq-intro > .eyebrow {
		font-size: 7px;
		margin-bottom: 20px;
	}
	.faq-intro h2 {
		font-size: 44px;
		letter-spacing: -1.8px;
		line-height: 1.15;
	}
	.faq-intro h2 br {
		display: none;
	}
	.faq-intro .text-link {
		font-size: 10px;
		margin-top: 19px;
	}
	.faq-list summary {
		font-size: 12px;
		padding-block: 23px;
	}
	.faq-list p {
		font-size: 12px;
		line-height: 1.9;
		padding-right: 25px;
		padding-bottom: 23px;
	}
	.closing {
		padding: 32px 23px;
	}
	.closing-top {
		padding-bottom: 27px;
		gap: 20px;
	}
	.closing-top .eyebrow {
		font-size: 6px;
		letter-spacing: 0.7px;
	}
	.closing-top .eyebrow:last-child {
		font-size: 5px;
		max-width: 130px;
		line-height: 1.9;
	}
	.closing-title {
		font-size: clamp(37px, calc(10 * var(--vw)), 60px);
		letter-spacing: -1.8px;
		line-height: 1.13;
		gap: 10px;
		padding-bottom: 29px;
	}
	.closing-arrow {
		font-size: 48px;
		line-height: 1;
		align-self: flex-end;
		margin-bottom: 5px;
	}
	.closing-bottom {
		margin-top: 21px;
		align-items: flex-start;
		flex-direction: column;
		gap: 21px;
	}
	.closing-bottom > p {
		font-size: 10px;
		max-width: 240px;
		line-height: 1.8;
	}
	.closing-bottom > .button {
		font-size: 10px;
		min-height: 44px;
		padding: 13px 19px;
		gap: 29px;
	}
	.site-footer {
		padding: 44px 23px 20px;
	}
	.footer-main {
		grid-template-columns: 1fr 1fr;
		gap: 29px 25px;
		padding-bottom: 35px;
	}
	.footer-logo {
		grid-column: 1;
		font-size: 52px;
		letter-spacing: -3px;
	}
	.footer-logo > span {
		font-size: 6px;
		letter-spacing: 1.6px;
	}
	.footer-note {
		font-size: 10px;
		line-height: 1.9;
		padding: 0;
	}
	.footer-links {
		gap: 9px;
		padding: 0;
		align-items: flex-end;
	}
	.footer-links a {
		font-size: 9px;
	}
	.footer-bottom {
		gap: 10px;
		flex-wrap: wrap;
		font-size: 6px;
		letter-spacing: 0.3px;
		line-height: 1.8;
	}
	.footer-bottom > a:last-child {
		margin-left: auto;
	}
	.about-v2 {
		padding-top: 31px;
		padding-bottom: 0;
	}
	.about-title {
		font-size: 68px;
		letter-spacing: -3.2px;
		line-height: 1.04;
		margin-top: 32px;
	}
	.about-lede {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
		margin: 27px 0 32px;
	}
	.about-lede > span {
		font-size: 7px;
		letter-spacing: 1px;
	}
	.about-lede > p {
		font-size: 12px;
		line-height: 1.9;
		max-width: 300px;
	}
	.about-photo-pair {
		grid-template-columns: 1fr 0.65fr;
		gap: 18px;
		align-items: start;
	}
	.about-main-photo {
		grid-column: 1/-1;
	}
	.about-main-photo img {
		height: 330px;
		object-position: center;
	}
	.about-small-photo {
		grid-column: 2;
		margin-top: -8px;
	}
	.about-small-photo img {
		height: 190px;
		object-position: center;
	}
	.about-photo-pair figcaption {
		font-size: 5px;
		letter-spacing: 0.7px;
		line-height: 1.8;
		margin-top: 12px;
	}
	.about-story-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-top: 31px;
	}
	.about-story h2 {
		font-size: 39px;
		letter-spacing: -1.6px;
		line-height: 1.16;
	}
	.about-story p {
		font-size: 12px;
		line-height: 1.9;
	}
	.about-story .story-lead {
		font-size: 21px;
		line-height: 1.6;
		letter-spacing: -0.3px;
		margin-bottom: 22px;
	}
	.about-story .text-link {
		font-size: 11px;
	}
	.about-principles > .eyebrow {
		font-size: 7px;
	}
	.principles-grid {
		grid-template-columns: 1fr;
		gap: 31px;
		margin-top: 31px;
	}
	.principles-grid article {
		padding-top: 19px;
		display: grid;
		grid-template-columns: 34px 1fr;
		gap: 0 17px;
	}
	.principles-grid article > span {
		grid-row: 1/3;
		font-size: 8px;
		padding-top: 6px;
	}
	.principles-grid h3 {
		font-size: 20px;
		margin: 0 0 13px;
		letter-spacing: -0.5px;
	}
	.principles-grid p {
		font-size: 12px;
		line-height: 1.85;
	}
	.local-v2 {
		grid-template-columns: 1fr;
		gap: 35px;
	}
	.local-copy > .eyebrow {
		font-size: 7px;
		margin-bottom: 22px;
	}
	.local-copy h2 {
		font-size: 39px;
		letter-spacing: -1.6px;
		line-height: 1.18;
	}
	.local-copy > p {
		font-size: 12px;
		line-height: 1.9;
		margin: 24px 0;
	}
	.local-copy > .button {
		font-size: 11px;
	}
	.local-image img {
		aspect-ratio: 1.1;
	}
	.local-image > span {
		font-size: 6px;
	}
	.inquiry-section {
		padding-top: 33px;
		gap: 32px;
	}
	.inquiry-copy {
		display: block;
	}
	.inquiry-copy > .eyebrow {
		font-size: 7px;
		margin-bottom: 25px;
	}
	.inquiry-copy h1 {
		font-size: 48px;
		letter-spacing: -2.3px;
		line-height: 1.13;
	}
	.inquiry-copy > p {
		font-size: 12px;
		line-height: 1.9;
		margin-top: 23px;
		max-width: none;
	}
	.contact-details {
		gap: 20px;
		margin-top: 28px;
	}
	.contact-details a {
		font-size: 12px;
	}
	.contact-details .eyebrow {
		font-size: 7px;
	}
	.inquiry-booking {
		padding: 21px 18px;
		gap: 18px;
		margin-top: 29px;
		align-items: flex-start;
	}
	.inquiry-booking > div {
		display: block;
	}
	.inquiry-booking h2 {
		font-size: 12px;
	}
	.inquiry-booking p {
		font-size: 10px;
		margin-top: 5px;
	}
	.inquiry-booking .text-link {
		margin-top: 7px;
		font-size: 10px;
		min-height: 35px;
	}
	.inquiry-form-wrap {
		padding: 25px 19px;
		margin-inline: -4px;
	}
	.form-heading {
		gap: 15px;
		padding-bottom: 20px;
		margin-bottom: 25px;
	}
	.form-heading > .eyebrow {
		font-size: 8px;
	}
	.form-heading > span:last-child {
		font-size: 6px;
		letter-spacing: 0.8px;
	}
	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.field {
		margin-bottom: 24px;
	}
	.field label,
	.package-selection legend {
		font-size: 11px;
	}
	.field input,
	.field select,
	.field textarea {
		font-size: 16px;
	}
	.field ::placeholder {
		font-size: 12px;
	}
	.field input[type='date'] {
		min-width: 0;
		min-height: 44px;
	}
	.field small {
		font-size: 9px;
	}
	.package-selection > div {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.package-selection label > span {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 13px;
		font-size: 11px;
	}
	.package-selection small {
		font-size: 9px;
		margin: 0;
	}
	.form-note {
		font-size: 9px;
	}
	.status-message {
		font-size: 11px;
	}
	#form-success > .display {
		font-size: 43px;
		letter-spacing: -1.7px;
	}
	#form-success .button {
		font-size: 10px;
		white-space: normal;
	}
	.gallery-dialog {
		padding: 17px;
		max-width: calc(calc(100 * var(--vw)) - 20px);
	}
	.lightbox-top {
		gap: 15px;
		margin-bottom: 16px;
	}
	.lightbox-top h2 {
		font-size: 20px;
		line-height: 1.3;
		letter-spacing: -0.5px;
	}
	.lightbox-top .icon-button {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}
	.lightbox-image {
		min-height: 185px;
	}
	.lightbox-image > .icon-button {
		width: 34px;
		height: 34px;
		min-width: 34px;
		font-size: 18px;
	}
	.gallery-prev {
		left: 6px;
	}
	.gallery-next {
		right: 6px;
	}
	.lightbox-bottom {
		font-size: 9px;
		padding-top: 15px;
		line-height: 1.8;
		gap: 15px;
	}
	.lightbox-bottom > span {
		font-size: 8px;
	}
	.booth-dialog {
		padding: 22px 18px;
		max-width: calc(calc(100 * var(--vw)) - 16px);
		max-height: calc(94 * var(--svh));
	}
	.booth-top {
		margin-bottom: 21px;
		gap: 12px;
	}
	.booth-top .eyebrow {
		font-size: 6px;
		letter-spacing: 1px;
	}
	.booth-top h2 {
		font-size: 29px;
		letter-spacing: -1px;
	}
	.booth-top .icon-button {
		width: 38px;
		height: 38px;
		min-width: 38px;
	}
	.booth-dialog-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.viewfinder {
		max-height: 275px;
		width: 100%;
		aspect-ratio: 4/3;
	}
	.camera-actions {
		gap: 12px;
		margin-top: 17px;
	}
	.camera-actions .button {
		font-size: 11px;
	}
	.booth-alternatives {
		justify-content: center;
		gap: 10px;
	}
	.booth-alternatives .text-button {
		font-size: 10px;
	}
	.privacy-note {
		text-align: center;
		font-size: 8px;
	}
	.strip-workspace {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 29px;
		padding: 25px;
	}
	.canvas-wrap {
		width: 124px;
		min-width: 100px;
	}
	.strip-options {
		display: block;
		max-width: 155px;
	}
	.strip-options > .eyebrow {
		display: block;
		font-size: 7px;
	}
	.swatches {
		margin: 17px 0 22px;
		gap: 11px;
	}
	.swatch {
		width: 24px;
		height: 24px;
		min-width: 24px;
	}
	.mono-toggle {
		font-size: 9px;
	}
	.strip-options > .button {
		font-size: 9px;
		margin-top: 22px;
		padding: 13px 15px;
	}
}
@media (max-width: 360px) {
	.site-header {
		padding-inline: 16px;
	}
	.brand img {
		width: 79px;
	}
	.brand > span {
		font-size: 5px;
	}
	.nav-actions > .button {
		font-size: 8px;
		padding-inline: 12px;
		gap: 11px;
	}
	.hero-wordmark {
		font-size: 43px;
		letter-spacing: -2.3px;
	}
	.hero-kicker > span:first-child {
		max-width: 150px;
	}
	.hero-kicker > span:last-child {
		font-size: 5px;
	}
	.hero-stage {
		height: 427px;
	}
	.stage-controller {
		width: 92px;
	}
	.stage-controller > button {
		width: 34px;
	}
	.stage-glass {
		padding: 12px 10px;
		gap: 5px 6px;
	}
	.stage-glass > span:nth-child(2) {
		font-size: 9px;
	}
	.stage-glass .eyebrow {
		font-size: 4.5px;
	}
	.intro-statement h2 {
		font-size: 30px;
	}
	.contact-heading h2 {
		font-size: 39px;
	}
	.experience-link {
		gap: 10px;
	}
	.experience-link > .button {
		font-size: 9px;
		padding-inline: 13px;
	}
	.closing-title {
		font-size: 35px;
		letter-spacing: -1.7px;
	}
	.closing-arrow {
		font-size: 39px;
	}
	.package-card {
		padding-inline: 21px;
	}
	.package-heading h2 {
		font-size: 33px;
	}
	.inquiry-copy h1 {
		font-size: 42px;
		letter-spacing: -2px;
	}
	.strip-workspace {
		padding: 20px 17px;
		gap: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.js-motion .reveal {
		opacity: 1;
		transform: none;
	}
	.stage-photo:hover img,
	.contact-frame:hover img,
	.studio-preview:hover img {
		transform: none;
	}
}

/* Section headings now lead directly into their content. */
.experience-v2 > .intro-statement,
.contact-sheet-section > .contact-heading,
.formats-v2 > .format-layout {
    margin-top: 0;
}
@media (max-width: 600px) {
    .footer-logo img { width: 112px; }
    .stage-filter button { padding-inline: 5px; }
    .stage-controller > button { justify-self: center; }
    .stage-glass { gap: 7px 8px; }
    .stage-glass > a svg { width: 16px; height: 16px; }
}

/* Keep the layout balanced after removing decorative labels. */
.hero-kicker,
.stage-top,
.package-top {
    justify-content: flex-end;
}
.interactive-studio > .studio-content,
.packages > .package-heading {
    margin-top: 0;
}
.package-top > .package-duration:last-child {
    font-size: clamp(20px, calc(2 * var(--vw)), 26px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ink);
}

/* Preview titles and clearer calls to action. */
.hero-v2 > .hero-kicker {
    justify-content: flex-start;
}
.format-panel > .format-panel-title {
    position: absolute;
    top: 24px;
    left: 28px;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.6px;
    z-index: 1;
}
.format-panel .print-layout {
    top: 58px;
}
.format-stage > .motion-panel {
    padding-top: 70px;
}
.faq-intro > .faq-contact {
    margin-top: 28px;
    max-width: 100%;
    min-height: 54px;
    padding: 16px 20px;
    gap: 20px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.faq-contact > span:first-child {
    min-width: 0;
}
.faq-contact > span[aria-hidden] {
    flex-shrink: 0;
}
.packages > .packages-note > span {
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.7px;
}
.packages > .packages-note > .text-link {
    font-size: 15px;
    font-weight: 500;
}
.about-v2 > .about-title {
    margin-top: 0;
    margin-bottom: 44px;
}
.about-story > .about-story-grid {
    margin-top: 0;
}
@media (max-width: 600px) {
    .format-panel > .format-panel-title {
        top: 20px;
        left: 20px;
        font-size: 20px;
    }
    .format-stage { height: 490px; }
    .about-v2 > .about-title { margin-bottom: 32px; }
    .packages > .packages-note > span { font-size: 11px; }
    .packages > .packages-note > .text-link { font-size: 14px; }
    .faq-intro > .faq-contact { font-size: 13px; gap: 16px; }
}

.about-principles .principles-grid article { border-top: 0; }

/* Image-led format cards: a complete overview on desktop and mobile. */
.formats-heading {
    margin-bottom: 42px;
}
.formats-heading h2 {
    font-size: clamp(42px, calc(4.5 * var(--vw)), 64px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -2.4px;
}
.formats-heading h2 span { color: #7c7e73; }
.format-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
}
.format-card {
    min-width: 0;
    overflow: hidden;
    background: #fdfdfb;
    border: 1px solid #2526241c;
    border-radius: 16px;
    box-shadow: 0 8px 24px -18px #25262424;
}
.format-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ebece7;
}
.format-card-media > img,
.format-card-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.format-card-media > img { object-position: 50% 60%; }
.format-card-loop { background: #080908; }
.format-card-loop > video { object-fit: cover; }
.format-card-copy { padding: 27px 27px 30px; }
.format-card-copy h3 {
    margin: 0 0 14px;
    font-size: clamp(20px, calc(1.65 * var(--vw)), 24px);
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.6px;
}
.format-card-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #666862;
}
.format-play {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 82px;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid #ffffff73;
    border-radius: 999px;
    background: #ffffffdc;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink);
    font-size: 11px;
    line-height: 1;
    transition: background 0.2s ease;
}
.format-play:hover { background: #fff; }
.format-play-icon { font-size: 10px; width: 10px; text-align: center; }
@media (min-width: 901px) and (max-width: 1150px) {
    .format-cards { gap: 18px; }
    .format-card-copy { padding: 22px 20px 25px; }
}
@media (max-width: 900px) {
    .formats-heading,
    .format-cards { max-width: 560px; margin-inline: auto; }
    .format-cards { grid-template-columns: 1fr; gap: 25px; }
    .format-card-copy h3 { font-size: 23px; }
    .format-card-copy p { font-size: 15px; }
}
@media (max-width: 600px) {
    .formats-heading { margin-bottom: 30px; }
    .formats-heading h2 { font-size: 42px; letter-spacing: -1.8px; }
    .format-card { border-radius: 14px; }
    .format-card-copy { padding: 23px 22px 26px; }
    .format-card-copy h3 { font-size: 22px; margin-bottom: 12px; }
    .format-card-copy p { font-size: 14px; line-height: 1.75; }
}

/* A single hero reading path, followed by a quieter three-column overview. */
.hero-v3 {
    padding: 36px calc(3 * var(--vw)) 0;
    max-width: 1800px;
    margin-inline: auto;
}
.hero-copy {
    margin: 0 calc(2.5 * var(--vw)) 42px;
    max-width: 940px;
}
.hero-location {
    margin: 0 0 19px;
    color: #484a43;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.35px;
}
.hero-copy h1 {
    margin: 0 0 23px;
    font-size: clamp(54px, calc(6.8 * var(--vw)), 94px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -4.6px;
}
.hero-copy h1 > span { color: #777b70; }
.hero-description {
    max-width: 560px;
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #60635b;
}
.hero-primary {
    margin-top: 25px;
    min-height: 52px;
    padding-inline: 25px;
    gap: 34px;
    font-size: 14px;
}
.hero-media { position: relative; padding-bottom: 38px; }
.hero-v3 .hero-stage { height: clamp(420px, calc(40 * var(--vw)), 540px); }
.hero-v3 .stage-photo > img {
    object-position: 50% 15%;
    transition: filter 160ms ease, transform 1s var(--ease);
}
.hero-v3 .stage-bottom { justify-content: flex-end; }
.hero-media > .stage-glass {
    position: absolute;
    left: 28px;
    bottom: 0;
    z-index: 4;
    width: 350px;
    background: #ffffffe0;
    border-color: #ffffffeb;
    box-shadow: 0 10px 30px -20px #25262455;
    gap: 8px 20px;
}
.hero-v3 .stage-glass .eyebrow {
    color: #484a43;
    font-size: 9px;
    letter-spacing: 0.9px;
}
.hero-v3 .stage-glass > span:nth-child(2) {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.6;
}
.hero-v3 .stage-controller {
    display: flex;
    width: auto;
    gap: 3px;
    border-radius: 999px;
    background: #292b284f;
    padding: 5px;
}
.hero-v3 .stage-controller button {
    width: 44px;
    height: 44px;
}
.hero-v3 .stage-filter button {
    width: auto;
    min-width: 56px;
    padding-inline: 12px;
    font-size: 11px;
}
.experience-heading {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}
.experience-heading h2 {
    margin: 0 0 22px;
    font-size: clamp(34px, calc(3.8 * var(--vw)), 52px);
    line-height: 1.15;
    letter-spacing: -1.8px;
    font-weight: 400;
}
.experience-heading h2 > span { color: #74766d; }
.experience-heading > p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #65685f;
}
.experience-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(5 * var(--vw));
}
.experience-features h3 {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.65px;
    font-weight: 500;
}
.experience-features p {
    margin: 0;
    color: #65685f;
    font-size: 14px;
    line-height: 1.85;
    max-width: 340px;
}
.experience-more { margin-top: 38px; text-align: center; }
.experience-more .text-link { font-size: 13px; }
@media (max-width: 900px) {
    .hero-v3 { padding-top: 27px; }
    .hero-copy h1 { letter-spacing: -3px; }
    .experience-features { gap: 28px; }
    .experience-features h3 { font-size: 20px; }
}
@media (max-width: 600px) {
    .hero-v3 { padding: 28px 13px 0; }
    .hero-copy { margin: 0 10px 30px; }
    .hero-location { font-size: 11px; letter-spacing: 1px; margin-bottom: 18px; }
    .hero-copy h1 {
        font-size: clamp(40px, calc(10.8 * var(--vw)), 62px);
        letter-spacing: -2px;
        line-height: 1.08;
        margin-bottom: 20px;
    }
    .hero-description { font-size: 14px; line-height: 1.8; }
    .hero-primary { margin-top: 22px; font-size: 13px; min-height: 50px; }
    .hero-v3 .hero-stage { height: 400px; }
    .hero-v3 .stage-bottom { bottom: 25px; }
    .hero-media { padding-bottom: 0; }
    .hero-media > .stage-glass {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        margin: -18px 12px 0;
        padding: 18px;
        grid-template-columns: 1fr 32px;
        gap: 7px 12px;
    }
    .hero-v3 .stage-glass .eyebrow { font-size: 8px; }
    .hero-v3 .stage-glass > span:nth-child(2) { font-size: 12px; }
    .experience-heading { margin-bottom: 35px; text-align: left; }
    .experience-heading h2 { font-size: 34px; letter-spacing: -1.2px; }
    .experience-heading h2 br { display: none; }
    .experience-heading > p { font-size: 14px; }
    .experience-features { grid-template-columns: 1fr; gap: 28px; }
    .experience-features h3 { font-size: 21px; margin-bottom: 10px; }
    .experience-features p { max-width: none; }
    .experience-more { margin-top: 25px; text-align: left; }
}

/* Separate personal inquiries from date availability. */
.contact-section, .availability-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}
.contact-section { position: relative; overflow: hidden; padding-top: clamp(72px, calc(8 * var(--vw)), 118px); padding-bottom: clamp(72px, calc(8 * var(--vw)), 118px); border-top: 1px solid #dfe1d8; border-bottom: 1px solid #dfe1d8; }
.contact-section::before { content: 'LET’S MAKE A MOMENT'; display: block; position: absolute; top: 30px; left: calc(5.5 * var(--vw)); color: #7b8174; font-size: 9px; letter-spacing: .18em; }
.contact-section::after { content: ''; position: absolute; right: 8%; top: 50%; width: 190px; height: 190px; border: 1px solid #cbd0c3; border-radius: 50%; transform: translateY(-50%); opacity: .7; }
.contact-section { background: #eeeee8; }
.contact-copy { position: relative; z-index: 1; max-width: 650px; }
.contact-section h2 {
    margin: 0 0 24px;
    font-size: clamp(36px, calc(4.7 * var(--vw)), 64px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -2px;
}
.contact-section p, .availability-section p {
    margin: 0;
    max-width: 480px;
    font-size: 15px;
    line-height: 1.8;
}
.contact-section p { color: #62655c; }
.contact-section > .button { position: relative; z-index: 1; flex-shrink: 0; border: 0; border-radius: 999px; background: #242722; color: #f8f8f2; padding: 17px 28px; box-shadow: 0 10px 22px #2427221c; }
@media (hover: hover) and (pointer: fine) {
.contact-section > .button:hover { background: #3a4037; transform: translateY(-2px); }
}
.availability-section { background: #292c27; color: #fafaf5; }
.availability-section h2 {
    margin: 0 0 18px;
    font-size: clamp(30px, calc(3.5 * var(--vw)), 46px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -1.3px;
}
.availability-section p { color: #d0d3c9; }
.availability-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    text-align: center;
}
.availability-date { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; text-align: left; color: #d0d3c9; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.availability-date input { width: 220px; min-height: 46px; padding: 0 14px; border: 1px solid #73796e; border-radius: 8px; background: #f8f8f3; color: #242622; font: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.availability-date input:focus-visible { outline: 2px solid #d8c5cf; outline-offset: 3px; }
.availability-calendar { width: min(100%, 264px); padding: 16px; border: 1px solid #555c52; border-radius: 14px; background: #32362f; color: #f8f8f3; text-align: center; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendar-month { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.calendar-nav { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid #697065; border-radius: 50%; background: transparent; color: #f8f8f3; font-size: 20px; line-height: 1; cursor: pointer; }
.calendar-nav:hover { background: #464d44; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { margin-bottom: 5px; color: #aeb5a8; font-size: 10px; text-transform: uppercase; }
.calendar-day { display: grid; width: 28px; height: 28px; place-items: center; justify-self: center; border: 0; border-radius: 50%; background: transparent; color: #f8f8f3; font: inherit; font-size: 12px; cursor: pointer; }
.calendar-day:not(:disabled):hover, .calendar-day:focus-visible { background: #d8c5cf; color: #242622; outline: none; }
.calendar-day-today { box-shadow: inset 0 0 0 1px #aeb5a8; }
.calendar-day:disabled { color: #697065; cursor: not-allowed; }
.calendar-day-outside { pointer-events: none; }
.availability-action .button { background: #f8f8f3; color: #242622; }
.availability-action .button:hover { background: #e0e3d8; }
.availability-action > span { display: block; margin-top: 0; font-size: 11px; color: #c1c5b8; }
@media (max-width: 700px) {
    .contact-section, .availability-section { align-items: flex-start; flex-direction: column; gap: 28px; }
    .contact-section h2 { letter-spacing: -1.2px; }
    .contact-section::before { left: 22px; top: 22px; }
    .contact-section::after { right: -60px; top: 28%; width: 170px; height: 170px; }
    .contact-section p, .availability-section p { font-size: 14px; }
    .availability-action { width: 100%; align-items: flex-start; text-align: left; }
    .availability-date input { width: 100%; }
    .availability-action .button, .contact-section > .button { width: 100%; justify-content: center; }
    .availability-action > span { text-align: center; }
}

/* Expanding circle and sliding arrow, adapted from ObsidianUI Arrow Fill Button. */
:is(.nav-actions, .hero-copy) > .booking-fill {
    position: relative;
    height: 46px;
    min-height: 46px;
    padding: 0 52px 0 21px;
    border-radius: 999px;
    overflow: hidden;
    white-space: nowrap;
    background: #242622;
    color: #fff;
    border: 0;
    gap: 0;
    font-size: 11px;
    isolation: isolate;
}
.booking-fill-label { position: relative; z-index: 1; }
:is(.nav-actions, .hero-copy) > .booking-fill > span.booking-fill-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 52px 0 21px;
    border-radius: inherit;
    background: #e6e8df;
    color: #242622;
    font-size: inherit;
    line-height: inherit;
    z-index: 2;
    transform: none;
    clip-path: inset(6px 6px 6px calc(100% - 40px) round 999px);
    transition: clip-path .45s cubic-bezier(.785,.135,.15,.86);
}
.booking-fill-arrow { position: absolute; right: 15px; width: 16px; height: 16px; overflow: hidden; }
.booking-fill-arrow path {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform-origin: center;
    transition: transform .45s cubic-bezier(.785,.135,.15,.86);
}
.booking-fill-arrow path:first-child { transform: translateX(-120%) scale(0); }
:is(.nav-actions, .hero-copy) > .booking-fill:focus-visible > .booking-fill-layer { clip-path: inset(0 round 999px); }
.booking-fill:focus-visible .booking-fill-arrow path:first-child { transform: translateX(0) scale(1); }
.booking-fill:focus-visible .booking-fill-arrow path:last-child { transform: translateX(120%) scale(0); }
:is(.nav-actions, .hero-copy) > .booking-fill:focus-visible { outline: 2px solid #626c55; outline-offset: 4px; }
@media (hover: hover) {
    :is(.nav-actions, .hero-copy) > .booking-fill:hover > .booking-fill-layer { clip-path: inset(0 round 999px); }
    @media (hover: hover) and (pointer: fine) {
.booking-fill:hover .booking-fill-arrow path:first-child { transform: translateX(0) scale(1); }
}
    @media (hover: hover) and (pointer: fine) {
.booking-fill:hover .booking-fill-arrow path:last-child { transform: translateX(120%) scale(0); }
}
}
@media (max-width: 600px) {
    :is(.nav-actions, .hero-copy) > .booking-fill { height: 44px; min-height: 44px; font-size: 10px; padding-left: 15px; padding-right: 45px; }
    :is(.nav-actions, .hero-copy) > .booking-fill > span.booking-fill-layer { padding-left: 15px; padding-right: 45px; clip-path: inset(6px 6px 6px calc(100% - 38px) round 999px); }
    .booking-fill-arrow { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.nav-actions, .hero-copy) > .booking-fill > span.booking-fill-layer, .booking-fill-arrow path { transition: none; }
}

.hero-copy > .hero-primary.booking-fill { font-size: 13px; height: 52px; min-height: 52px; padding-right: 60px; padding-left: 24px; }
.hero-copy > .hero-primary.booking-fill > span.booking-fill-layer { padding-right: 60px; padding-left: 24px; clip-path: inset(6px 6px 6px calc(100% - 46px) round 999px); }
.hero-primary.booking-fill .booking-fill-arrow { right: 18px; }
.hero-copy > .hero-primary.booking-fill:focus-visible > span.booking-fill-layer { clip-path: inset(0 round 999px); }
@media (hover: hover) {
    .hero-copy > .hero-primary.booking-fill:hover > span.booking-fill-layer { clip-path: inset(0 round 999px); }
}

/* A ribbon of real celebrations, following a looping SVG path. */
.hero-v3 .photo-ribbon { position: relative; margin: 16px calc(-3 * var(--vw)) 0; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; height: 460px; }
.photo-ribbon.is-dragging { cursor: grabbing; }
.ribbon-path { position: absolute; width: 0; height: 0; pointer-events: none; }
.ribbon-photos { position: absolute; inset: 0; }
.ribbon-photo { position: absolute; top: 0; left: 0; width: 164px; height: 195px; object-fit: cover; border: 6px solid #fffefa; border-bottom-width: 20px; border-radius: 3px; box-shadow: 0 7px 20px #25262418; pointer-events: none; will-change: transform; }
.photo-ribbon:focus-visible { outline: 2px solid #727a65; outline-offset: -4px; }
.ribbon-footer { margin: 4px calc(2.5 * var(--vw)) 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #62655c; font-size: 12px; }
.ribbon-toggle { min-height: 44px; padding: 10px 16px; border: 1px solid #cbcec3; border-radius: 999px; font-size: 12px; color: #33362f; }
.ribbon-toggle:hover { background: #e6e8df; }
.studio-preview-wrap { min-width: 0; }
.studio-preview-wrap .studio-viewfinder > img { filter: none; transition: filter .16s ease, transform .6s ease; }
.studio-preview-wrap.is-mono .studio-viewfinder > img { filter: grayscale(1); }
.preview-finish { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; color: #d4d7ce; font-size: 13px; }
.preview-filter { display: inline-flex; padding: 5px; border: 1px solid #717769; border-radius: 999px; gap: 4px; }
.preview-filter button { min-height: 44px; min-width: 70px; padding: 10px 17px; border-radius: 999px; color: #ecede7; font-size: 12px; }
.preview-filter button[aria-pressed="true"] { color: #262923; background: #f5f5ee; }
.preview-filter button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
    .hero-v3 .photo-ribbon { margin: 0 -13px; }
    .ribbon-footer { margin: 0 10px; font-size: 11px; gap: 10px; }
    .ribbon-toggle { font-size: 11px; }
    .preview-finish { font-size: 12px; }
    .preview-filter button { min-width: 61px; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-preview-wrap .studio-viewfinder > img { transition: none; }
}

/* Clear section actions, a wider finish palette, and softened package cards. */
.photo-ribbon { isolation: isolate; }
.experience-more .studio-link, .contact-sheet-foot .gallery-open {
    font-size: 15px;
    min-height: 54px;
    padding: 16px 28px;
    border-radius: 8px;
}
.experience-more { margin-top: 42px; }
.contact-sheet-foot { justify-content: center; margin-top: 30px; }
.studio-preview-wrap .studio-viewfinder > img { filter: var(--preview-finish, none); }
.preview-finish { flex-direction: column; align-items: flex-start; gap: 12px; }
.preview-filter { flex-wrap: wrap; border: 0; padding: 0; gap: 8px; border-radius: 0; }
.preview-filter button { border: 1px solid #73796b; min-width: 66px; padding: 10px 17px; }
.preview-filter button[aria-pressed="true"] { border-color: #f5f5ee; }
#packages .package-heading { margin-top: 0; margin-bottom: 38px; }
#packages .package-grid { gap: 24px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
#packages .package-card { border: 1px solid #dedfd6; border-radius: 16px; background: #f3f3ef; padding: 32px; box-shadow: 0 6px 20px #24262204; }
#packages .package-card.package-featured { background: #e9ece3; border-color: #d4d9cc; }

/* Refined photo-booth presentation. */
#photobooth.interactive-studio { background: #20221f; padding-block: clamp(64px, calc(8 * var(--vw)), 112px); }
#photobooth .studio-content { max-width: 1180px; margin: 0 auto; padding: clamp(28px, calc(4 * var(--vw)), 58px); grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(32px, calc(6 * var(--vw)), 86px); align-items: center; border: 1px solid #ffffff1f; border-radius: 28px; background: linear-gradient(135deg, #30332f, #252825 58%, #1f211f); box-shadow: 0 22px 55px #00000026; }
#photobooth .studio-copy { padding: 8px 0 8px 10px; }
#photobooth .studio-copy h2 { font-size: clamp(42px, calc(4.7 * var(--vw)), 68px); line-height: 1.02; letter-spacing: -.055em; }
#photobooth .studio-copy > p { max-width: 34ch; margin: 28px 0 32px; color: #c9cdc3; font-size: 14px; line-height: 1.8; }
#photobooth .studio-copy > .button { border-radius: 999px; min-height: 52px; padding-inline: 25px; font-size: 12px; }
#photobooth .studio-privacy { color: #9da59a; }
#photobooth .studio-viewfinder { aspect-ratio: 1.35; border: 1px solid #ffffff35; border-radius: 16px; box-shadow: 0 12px 28px #00000026; }
#photobooth .studio-enter { width: 100px; height: 100px; border-color: #ffffffa6; background: #ffffff25; }
#photobooth .preview-finish { padding-top: 18px; color: #dfe3da; }
#photobooth .preview-filter { gap: 7px; }
#photobooth .preview-filter button { border-color: #7f8878; min-height: 40px; min-width: 68px; padding: 9px 15px; }
#photobooth .preview-filter button[aria-pressed="true"] { background: #f3f4ed; border-color: #f3f4ed; }
#photobooth .studio-viewfinder::after,
#photobooth .viewfinder-corner,
#photobooth .studio-enter,
#photobooth .studio-hud { display: none; }
@media (max-width: 800px) {
 #photobooth .studio-content { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 20px; }
 #photobooth .studio-copy { padding: 0; }
 #photobooth .studio-copy h2 { font-size: clamp(40px, calc(11 * var(--vw)), 56px); }
 #photobooth .studio-viewfinder { aspect-ratio: 1.15; }
}
#packages .package-top { padding-bottom: 24px; border-bottom: 1px solid #d9ddd1; justify-content: flex-end; }
#packages .package-duration { display: inline-block; padding: 8px 14px; border: 1px solid #d7dbd0; border-radius: 999px; background: #ffffff70; color: #444b3c; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }
#packages .package-card h3 { font-size: 32px; margin-top: 26px; }
#packages .package-price { margin: 20px 0 26px; gap: 16px; }
#packages .package-price > span { font-size: clamp(48px, calc(4.8 * var(--vw)), 64px); }
#packages .package-price small { font-size: 9px; color: #62685b; }
#packages .package-card li { font-size: 14px; line-height: 1.65; padding: 9px 0; color: #50584a; }
#packages .package-card > .button { min-height: 54px; border-radius: 8px; font-size: 13px; margin-top: 8px; }
@media (max-width: 700px) {
    #packages .package-grid { grid-template-columns: 1fr; gap: 18px; }
    #packages .package-card { padding: 25px; border-radius: 14px; }
    #packages .package-card h3 { font-size: 29px; }
    #packages .package-card li { font-size: 13px; }
    #packages .package-heading { margin-bottom: 28px; }
}
@media (max-width: 600px) {
    .experience-more .studio-link, .contact-sheet-foot .gallery-open { width: 100%; justify-content: center; font-size: 14px; }
    .preview-filter button { min-width: 0; padding-inline: 15px; }
}

/* RewampUI-inspired drifting iridescent surface with a fixed gloss highlight. */
:is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 25px;
    border: 1px solid #cdbcc7;
    border-radius: 999px;
    background: #d9c6c2;
    color: #2a2320;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px #00000040;
    transition: box-shadow .2s ease, transform .2s ease;
}
.booking-gloss::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(115deg, #d9c6c2 0%, #b7a8c4 22%, #e8d2b8 40%, #c9a8ae 58%, #a99bbd 76%, #dcc4c0 100%);
    background-size: 220% 220%;
    animation: booking-gloss-drift 6s ease-in-out infinite;
    pointer-events: none;
}
.booking-gloss::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 12px;
    right: 12px;
    height: 50%;
    border-radius: 999px;
    background: #ffffff40;
    filter: blur(3px);
    z-index: -1;
    pointer-events: none;
}
.booking-gloss-label { position: relative; }
:is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss):hover { box-shadow: 0 10px 24px -10px #00000045; }
:is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss):active { transform: translateY(1px); }
:is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss):focus-visible { outline: 2px solid #625068; outline-offset: 4px; }
@keyframes booking-gloss-drift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (max-width: 600px) {
    :is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss) { min-height: 44px; padding: 11px 19px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .booking-gloss::before { animation: none; background-position: 50% 50%; }
    :is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss) { transition: none; }
}

/* Pricing reference: compact plan headers, photograph accents, and a soft lift. */
#packages.pricing-cards-v2 .package-heading { display: block; text-align: center; margin: 0 auto 44px; }
#packages.pricing-cards-v2 .package-heading > p { max-width: 440px; margin: 20px auto 0; font-size: 14px; }
#packages.pricing-cards-v2 .package-grid { max-width: 1040px; margin: 0 auto; gap: 28px; }
#packages.pricing-cards-v2 .package-card { padding: 30px; background: #fffefa; border: 1px solid #dedfd7; border-radius: 12px; box-shadow: 0 3px 10px #26292305; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
#packages.pricing-cards-v2 .package-featured { background: #f3f4ed; }
.plan-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#packages.pricing-cards-v2 .package-card h3 { font-size: 25px; font-weight: 500; margin: 0; letter-spacing: -.8px; }
#packages.pricing-cards-v2 .package-price { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 0; }
#packages.pricing-cards-v2 .package-price > span { font-size: 48px; font-weight: 500; letter-spacing: -2px; }
#packages.pricing-cards-v2 .package-price small { font-size: 12px; letter-spacing: 0; color: #656b5e; }
.plan-photo { width: 80px; height: 96px; flex: 0 0 80px; object-fit: cover; border: 4px solid #fff; border-bottom-width: 13px; border-radius: 3px; box-shadow: 0 4px 10px #26292315; transform: rotate(5deg); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.plan-description { font-size: 14px; line-height: 1.75; color: #656b5e; margin: 25px 0 20px; max-width: 370px; }
#packages.pricing-cards-v2 .package-card ul { padding-top: 18px; border-top: 1px solid #e1e3da; margin-bottom: 24px; }
#packages.pricing-cards-v2 .package-card li { font-size: 13px; gap: 12px; padding: 8px 0; align-items: flex-start; }
#packages.pricing-cards-v2 .package-card li::before { content: ''; width: 7px; height: 7px; border: 1px solid #79866c; border-radius: 50%; flex: 0 0 7px; margin: 7px 2px 0; }
#packages.pricing-cards-v2 .package-card > .button { justify-content: center; border-radius: 7px; min-height: 50px; margin-top: auto; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    @media (hover: hover) and (pointer: fine) {
#packages.pricing-cards-v2 .package-card:hover { transform: translateY(-5px) scale(1.025); box-shadow: 0 15px 30px -5px #2629231a; }
}
    @media (hover: hover) and (pointer: fine) {
#packages.pricing-cards-v2 .package-card:hover .plan-photo { transform: rotate(-5deg) scale(1.1); }
}
}
@media (max-width: 700px) {
    #packages.pricing-cards-v2 .package-grid { gap: 20px; }
    #packages.pricing-cards-v2 .package-card { padding: 24px; }
    #packages.pricing-cards-v2 .package-heading { text-align: left; margin-bottom: 30px; }
    #packages.pricing-cards-v2 .package-heading > p { margin-left: 0; }
    .plan-photo { width: 66px; height: 82px; flex-basis: 66px; }
    #packages.pricing-cards-v2 .package-card h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #packages.pricing-cards-v2 .package-card, .plan-photo { transition: none; }
}

/* In-page 3D gallery: every event photograph, without a fullscreen overlay. */
.full-gallery { margin-top: 44px; padding-top: 34px; border-top: 1px solid #d5d8cd; scroll-margin-top: 100px; }
.full-gallery-heading h3 { font-size: 30px; font-weight: 400; letter-spacing: -1px; margin: 0 0 12px; }
.full-gallery-heading p { color: #636a5c; font-size: 14px; line-height: 1.7; margin: 0; }
.gallery-cylinder { --gallery-radius: 500px; position: relative; height: 340px; perspective: 1100px; overflow: hidden; cursor: grab; touch-action: pan-y; isolation: isolate; }
.gallery-ring { position: absolute; width: 0; height: 100%; left: 50%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.22,.8,.25,1); }
.gallery-face { position: absolute; top: 50%; width: 135px; height: 184px; padding: 5px; background: #fffefa; border-radius: 10px; box-shadow: 0 8px 20px #24262218; transform: translate(-50%,-50%) rotateY(var(--face-angle)) translateZ(var(--gallery-radius)); backface-visibility: hidden; }
.gallery-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; pointer-events: none; }
.gallery-cylinder.is-dragging { cursor: grabbing; }
.gallery-cylinder.is-dragging .gallery-ring { transition: none; }
.gallery-turn-controls { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 0 0 28px; }
.gallery-turn-controls button { border: 1px solid #bec5b5; border-radius: 50%; width: 46px; height: 46px; font-size: 22px; }
.gallery-turn-controls span { min-width: 65px; text-align: center; font-size: 13px; color: #56604d; }
.gallery-thumbnails { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 12px; }
.gallery-thumb { padding: 4px; border: 2px solid transparent; border-radius: 8px; }
.gallery-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.gallery-thumb[aria-pressed='true'] { border-color: #59634f; }
.gallery-inline-detail { margin: 30px 0 0; background: #e4e7de; border-radius: 12px; padding: 20px; }
.gallery-inline-detail img { width: 100%; max-height: 650px; object-fit: contain; border-radius: 6px; }
.gallery-detail-close { display: block; margin: 0 0 16px auto; min-height: 44px; padding: 10px 18px; border: 1px solid #bac2b1; border-radius: 999px; font-size: 12px; }
.gallery-inline-detail figcaption { color: #505b47; font-size: 14px; text-align: center; margin-top: 16px; line-height: 1.6; }
@media (max-width: 700px) {
    .gallery-cylinder { --gallery-radius: 360px; height: 270px; perspective: 800px; }
    .gallery-face { width: 97px; height: 140px; }
    .gallery-thumbnails { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
    .full-gallery-heading h3 { font-size: 26px; }
    .gallery-inline-detail { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .gallery-ring { transition: none; } }

/* Inquiry layout inspired by the supplied reference. */
.inquiry-reference { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,calc(7 * var(--vw)),110px); align-items: stretch; padding-top: 72px; padding-bottom: 90px; background: #fff; }
.inquiry-reference .inquiry-copy { display: flex; flex-direction: column; padding-top: 28px; position: static; min-width: 0; }
.inquiry-reference .inquiry-copy h1 { font-size: clamp(42px,calc(5.1 * var(--vw)),76px); line-height: 1.1; letter-spacing: -2.8px; margin: 0; }
.inquiry-reference .inquiry-copy > p { font-size: 16px; line-height: 1.8; color: #747570; max-width: 440px; margin: 28px 0 0; }
.inquiry-reference .contact-details { margin: auto 0 16px; padding-top: 80px; display: grid; gap: 18px; }
.inquiry-reference .contact-details a { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; font-size: 14px; line-height: 1.5; color: #252622; min-width: 0; }
.inquiry-reference .contact-details a > span:last-child { font-size: inherit; position: static; overflow-wrap: anywhere; }
.inquiry-reference .contact-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; background: #f3f3f1; color: #555850; }
.inquiry-reference .contact-icon svg { width: 24px; height: 24px; }
.inquiry-reference .inquiry-form-wrap { padding: 36px; background: #f4f4f2; border: 0; border-radius: 24px; box-shadow: none; min-width: 0; }
.inquiry-reference .field { margin: 0 0 22px; }
.inquiry-reference .field label { display: block; font-size: 14px; margin-bottom: 10px; color: #343630; }
.inquiry-reference .field input, .inquiry-reference .field textarea, .inquiry-reference .field select { width: 100%; background: #fff; border: 1px solid transparent; border-radius: 10px; padding: 15px 16px; font-size: 14px; line-height: 1.5; color: #272923; min-height: 52px; }
.inquiry-reference .field textarea { min-height: 150px; resize: vertical; }
.inquiry-reference .field input:focus, .inquiry-reference .field textarea:focus, .inquiry-reference .field select:focus { outline: 2px solid #87927c; outline-offset: 2px; border-color: transparent; }
.inquiry-reference .field input::placeholder, .inquiry-reference .field textarea::placeholder { color: #83877d; }
.inquiry-reference .optional-label { color: #777e6f; font-size: 12px; }
.inquiry-event-details { margin-bottom: 24px; }
.inquiry-event-details summary { cursor: pointer; font-size: 13px; color: #626b58; min-height: 44px; padding: 12px 0; }
.inquiry-event-details[open] summary { margin-bottom: 14px; }
.inquiry-reference #inquiry-form > .button { width: auto; min-height: 52px; padding: 13px 22px; font-size: 14px; border-radius: 13px; gap: 15px; }
.inquiry-reference .form-note { font-size: 10px; line-height: 1.7; margin-top: 18px; }
@media (max-width: 900px) {
    .inquiry-reference { grid-template-columns: 1fr; gap: 35px; padding-top: 38px; }
    .inquiry-reference .inquiry-copy { padding-top: 0; }
    .inquiry-reference .contact-details { padding-top: 30px; margin-bottom: 0; }
    .inquiry-reference .inquiry-copy h1 { font-size: clamp(40px,calc(7 * var(--vw)),64px); letter-spacing: -1.8px; }
}
@media (max-width: 600px) {
    .inquiry-reference .inquiry-form-wrap { padding: 23px 18px; border-radius: 18px; }
    .inquiry-reference .contact-details a { font-size: 12px; gap: 10px; }
    .inquiry-reference .inquiry-copy > p { font-size: 14px; }
    .inquiry-reference .field input, .inquiry-reference .field select, .inquiry-reference .field textarea { font-size: 16px; }
    .inquiry-reference #inquiry-form > .button { width: 100%; justify-content: center; }
}

.inquiry-reference .event-details-title { font-size: 18px; font-weight: 500; margin: 8px 0 22px; padding-top: 22px; border-top: 1px solid #dedfd8; letter-spacing: -.3px; }

/* Iridescent recommendation badge, adapted from the supplied award badge. */
#packages .package-featured { position: relative; }
.reel-award { position: absolute; top: -19px; right: 24px; width: 174px; z-index: 2; perspective: 700px; }
.reel-award-face { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 14px 5px 8px; border: 1px solid #b7ad84; border-radius: 9px; background: #f3e3ac; color: #514b35; overflow: hidden; isolation: isolate; box-shadow: 0 3px 8px #55441c14; transform: rotateX(var(--badge-x,0deg)) rotateY(var(--badge-y,0deg)); transition: transform .2s ease-out; }
.reel-award-face::before { content: ''; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 20deg,#ffd6ac80,#c5e5c780,#d3c4e980,#ffe7ac90,#f1b7c180,#ffd6ac80); animation: reel-award-shine 6s ease-in-out infinite; }
.reel-award-face::after { content: ''; position: absolute; inset: 3px; border: 1px solid #ffffff80; border-radius: 6px; pointer-events: none; }
.reel-award svg { width: 30px; height: 30px; flex-shrink: 0; }
.reel-award small { display: block; font-size: 8px; line-height: 1.4; letter-spacing: 1px; font-weight: 600; }
.reel-award strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 600; }
@keyframes reel-award-shine { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(65deg); } }
@media (max-width: 700px) { .reel-award { right: 18px; width: 155px; } #packages.pricing-cards-v2 .package-grid { row-gap: 38px; } }
@media (prefers-reduced-motion: reduce) { .reel-award-face { transition: none; } .reel-award-face::before { animation: none; } }

/* Successful inquiries print as a small thermal-paper keepsake. */
#form-success.receipt-confirmation {
	padding: 12px 0;
	text-align: center;
	scroll-margin-top: 110px;
}
.inquiry-receipt {
	position: relative;
	isolation: isolate;
	max-width: 420px;
	margin: 0 auto 28px;
	padding: 38px 30px 32px;
	color: #34352f;
	background: repeating-linear-gradient(0deg, rgba(52,53,47,.025) 0 1px, transparent 1px 3px), #fffef9;
	font-family: 'Courier New', monospace;
	mask: linear-gradient(135deg, transparent 50%, #000 0) 0 0 / 12px 6px repeat-x,
		linear-gradient(-135deg, transparent 50%, #000 0) 0 0 / 12px 6px repeat-x,
		linear-gradient(#000, #000) 0 6px / 100% calc(100% - 12px) no-repeat,
		linear-gradient(135deg, #000 50%, transparent 0) 0 100% / 12px 6px repeat-x,
		linear-gradient(-135deg, #000 50%, transparent 0) 0 100% / 12px 6px repeat-x;
}
.receipt-merchant { font-size: 18px; font-weight: 700; letter-spacing: .17em; }
.receipt-kicker, .receipt-signoff { font-size: 11px; line-height: 1.7; margin-top: 8px; }
.receipt-rule { border-top: 1px dashed #a4a496; margin: 24px 0; }
.inquiry-receipt h2 { font-family: inherit; font-size: clamp(22px, calc(2.5 * var(--vw)), 29px); letter-spacing: -.05em; line-height: 1.2; }
.receipt-intro { margin: 12px auto 24px; max-width: 28ch; font-size: 12px; line-height: 1.7; }
.receipt-ledger { border-block: 1px dashed #a4a496; padding: 18px 0; text-align: left; }
.receipt-ledger > div { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 12px; line-height: 1.6; }
.receipt-ledger dt { flex: 0 0 auto; }
.receipt-ledger dd { margin: 0; flex: 1; text-align: right; overflow-wrap: anywhere; min-width: 0; font-weight: 700; }
.receipt-stamp { width: fit-content; margin: 26px auto 22px; padding: 7px 12px; border: 2px solid #667052; color: #53603e; font-size: 12px; font-weight: 700; letter-spacing: .14em; transform: rotate(-4deg); }
.receipt-next { font-size: 12px; line-height: 1.7; }
.receipt-note { font-size: 11px; line-height: 1.7; margin: 12px auto 0; max-width: 30ch; color: #65665d; }
.receipt-print-head { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(transparent 86%, rgba(52,53,47,.06) 97%, rgba(52,53,47,.3)); }
#form-success.receipt-confirmation .button { font-size: 13px; min-height: 48px; border-radius: 8px; }
.receipt-confirmation:not([hidden]) .inquiry-receipt { animation: receipt-print 700ms cubic-bezier(.22,1,.36,1) both; }
.receipt-confirmation:not([hidden]) .receipt-print-head { animation: receipt-head 860ms cubic-bezier(.22,1,.36,1) both; }
@keyframes receipt-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes receipt-head { 0% { transform: translateY(-100%); opacity: 1; } 81% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@media (max-width: 600px) {
	.inquiry-receipt { padding: 30px 18px 26px; }
	.receipt-ledger > div { gap: 8px; font-size: 11px; }
	.receipt-merchant { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.receipt-confirmation:not([hidden]) .inquiry-receipt,
	.receipt-confirmation:not([hidden]) .receipt-print-head { animation: none; }
}

/* Random-order letter swap for navigation; link dimensions stay unchanged. */
.letter-swap-label { display: inline-flex; white-space: nowrap; vertical-align: middle; }
.letter-swap-link .nav-arrow { display: inline-block; margin-left: 4px; font-size: .72em; line-height: 1; vertical-align: .08em; }
.letter-swap-letter { display: inline-block; height: 1.6em; margin-block: -.15em; overflow: hidden; line-height: 1.6; }
.letter-swap-track { display: flex; flex-direction: column; }
.letter-swap-track > span { display: block; height: 1.6em; }
/* Taller letter boxes so Safari does not clip the tails of g, y, p (2026-10-06). */
.is-swapping .letter-swap-track { animation: nav-letter-swap 600ms cubic-bezier(.22,1.2,.36,1) var(--letter-delay, 0ms) both; }
@keyframes nav-letter-swap { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .is-swapping .letter-swap-track { animation: none; } }

/* Column footer adapted to Mochi's existing contact information. */
.site-footer.footer-columns { padding: 88px calc(5.5 * var(--vw)) 28px; }
.footer-columns .footer-main { grid-template-columns: minmax(220px, 1fr) minmax(0, 1.5fr); gap: 64px; padding-bottom: 68px; }
.footer-columns .footer-logo img { width: 150px; }
.footer-description { margin-top: 22px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.footer-sections { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 28px; padding-top: 5px; }
.footer-section h2 { font-size: 14px; font-weight: 600; margin-bottom: 18px; letter-spacing: 0; }
.footer-section ul { margin: 0; padding: 0; list-style: none; }
.footer-section a { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-size: 13px; line-height: 1.6; color: var(--muted); text-underline-offset: 5px; transition: color .2s; }
.footer-section a:hover { color: var(--ink); text-decoration: underline; }
.footer-social svg { flex-shrink: 0; }
.footer-columns .footer-bottom { font-size: 11px; letter-spacing: .03em; padding-top: 24px; gap: 16px; }
.footer-columns .footer-bottom > a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; }
@media (max-width: 1000px) {
 .footer-columns .footer-main { grid-template-columns: 1fr; gap: 38px; }
 .footer-sections { max-width: 760px; }
}
@media (max-width: 600px) {
 .site-footer.footer-columns { padding: 52px 23px 22px; }
 .footer-columns .footer-main { gap: 32px; padding-bottom: 36px; }
 .footer-columns .footer-logo img { width: 128px; }
 .footer-description { font-size: 13px; margin-top: 16px; }
 .footer-sections { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
 .footer-section h2 { margin-bottom: 8px; }
 .footer-section a { font-size: 12px; }
 .footer-columns .footer-bottom { align-items: flex-start; font-size: 10px; }
 .footer-columns .footer-bottom > span { padding-top: 12px; }
}

.digital-sharing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, calc(6 * var(--vw)), 90px); align-items: center; background: #f0f0ea; }
.sharing-video-wrap { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 12px 36px rgba(35,38,30,.05); }
.sharing-video { display: block; width: 100%; aspect-ratio: 1200 / 1190; object-fit: contain; background: white; }
.sharing-eyebrow { font-size: 10px; letter-spacing: .14em; color: #64685c; margin-bottom: 22px; }
.sharing-copy h2 { font-size: clamp(32px, calc(3.8 * var(--vw)), 56px); line-height: 1.12; letter-spacing: -.045em; font-weight: 400; }
.sharing-copy h2 span { color: #757a6c; }
.sharing-copy > p:not(.sharing-eyebrow) { margin-top: 25px; max-width: 48ch; color: #65695f; font-size: 14px; line-height: 1.85; }
.sharing-methods { display: grid; grid-template-columns: 1fr 1fr; list-style: none; padding: 0; margin: 32px 0 0; gap: 25px 20px; }
.sharing-methods li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; }
.sharing-number { color: #777c6e; font-size: 10px; }
.sharing-methods small { display: block; margin-top: 7px; font-size: 12px; line-height: 1.65; color: #65695f; }
@media (max-width: 800px) {
 .digital-sharing { grid-template-columns: 1fr; gap: 30px; }
 .sharing-copy { order: -1; }
 .sharing-video-wrap { width: 100%; max-width: 560px; justify-self: center; border-radius: 14px; }
 .sharing-copy h2 { font-size: clamp(32px, calc(6 * var(--vw)), 46px); }
}
@media (max-width: 380px) { .sharing-methods { column-gap: 12px; } .sharing-methods li { gap: 7px; font-size: 14px; } }

/* The sharing clip is an ambient demonstration, without interactive controls. */
.sharing-video { pointer-events: none; }

/* Cursor-following eyes inspired by RewampUI's Googly Eyes Button. */
.lab-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .15em; margin-bottom: 24px; }

/* Rainbow Button treatment for the Meet the Lab CTA. */
.rainbow-button {
 position: relative;
 isolation: isolate;
 border: 0;
 background: #232622;
}
.rainbow-button::before {
 content: '';
 position: absolute;
 z-index: -1;
 left: 20%;
 right: 20%;
 bottom: -18%;
 height: 20%;
 border-radius: 999px;
 background: linear-gradient(90deg, hsl(0 100% 63%), hsl(270 100% 63%), hsl(210 100% 63%), hsl(195 100% 63%), hsl(90 100% 63%));
 background-size: 200% 100%;
 filter: blur(11px);
 opacity: .7;
 animation: rainbow-glow-shift 2s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
.rainbow-button:hover { transform: translateY(-2px); }
}
@keyframes rainbow-glow-shift { from { background-position: 0% 0%; } to { background-position: 200% 0%; } }
@media (prefers-reduced-motion: reduce) {
 .rainbow-button::before { animation: none; }
}

/* Classic photo-booth capture room. */
#booth-dialog.booth-dialog { width: 1080px; padding: 0; overflow: hidden; border: 1px solid #dad4c7; border-radius: 18px; background: #f5f1e8; box-shadow: 0 32px 90px #111a155c; }
#booth-dialog .booth-top { margin: 0; padding: 25px 30px 22px; align-items: center; background: #252a25; color: #f7f3e9; border-bottom: 0; }
#booth-dialog .booth-top .eyebrow { color: #c4c8ba; letter-spacing: .18em; }
#booth-dialog .booth-top h2 { font-family: var(--sans); font-size: clamp(30px, calc(3.5 * var(--vw)), 45px); font-weight: 500; letter-spacing: -.055em; }
#booth-dialog .booth-top .icon-button { border-color: #ffffff40; color: #f7f3e9; }
#booth-dialog .booth-dialog-grid { padding: 30px; gap: 30px; grid-template-columns: 1.15fr .85fr; }
#booth-dialog .viewfinder { max-height: none; aspect-ratio: 4 / 3; border: 8px solid #252a25; border-radius: 10px; background: #d9ddd2; box-shadow: 0 8px 0 #252a25; }
#booth-dialog .viewfinder::after { inset: 18px; border-color: #ffffff75; }
#booth-dialog .viewfinder-label { bottom: 20px; left: 24px; font-size: 8px; }
#booth-dialog .viewfinder::after,
#booth-dialog .viewfinder-label { display: none; }
#booth-dialog .camera-actions { margin-top: 26px; }
#booth-dialog .camera-actions .button { border-radius: 7px; background: #252a25; color: #f7f3e9; min-height: 52px; font-size: 12px; }
#booth-dialog .booth-alternatives { color: #62675b; }
#booth-dialog .text-button { color: #252a25; }
#booth-dialog .privacy-note { color: #777b70; }
#booth-dialog .strip-workspace { min-height: 435px; padding: 28px; border: 1px solid #d7d2c6; border-radius: 10px; background: #e1e3d8; }
#booth-dialog .canvas-wrap { box-shadow: 0 14px 26px #252a2530; }
#booth-dialog .strip-options > .eyebrow { color: #62675b; }
#booth-dialog .swatches { gap: 8px; }
#booth-dialog .swatch { border: 2px solid #a8aa9f; }
@media (max-width: 700px) {
 #booth-dialog.booth-dialog { border-radius: 14px; }
 #booth-dialog .booth-top { padding: 20px 20px 17px; }
 #booth-dialog .booth-dialog-grid { padding: 20px; }
 #booth-dialog .viewfinder { border-width: 5px; }
 #booth-dialog .strip-workspace { min-height: 360px; padding: 20px; }
}
.lab-button { border-radius: 999px; font-size: 13px; min-height: 52px; }
.lab-teaser, .lab-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(36px, calc(6 * var(--vw)), 90px); }
.lab-teaser { grid-template-columns: minmax(0, 1fr); padding-top: 64px; padding-bottom: 64px; }
.lab-teaser { background: #efefe9; color: #20231f; }
.lab-teaser-art { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; justify-self: stretch; overflow: hidden; border-radius: 0; background: transparent; text-decoration: none; }
.lab-teaser-art img, .lab-art img { width: 92%; height: auto; display: block; transform: translateX(-24px); }
.lab-teaser-meet { display: block; font-size: clamp(78px, calc(10 * var(--vw)), 132px); line-height: .78; letter-spacing: -.085em; font-weight: 600; color: #20231f; margin: 0 0 8px; }
.lab-teaser h2, .lab-section-heading h2, .lab-process h2, .lab-invitation h2 { font-size: clamp(34px, calc(4 * var(--vw)), 58px); line-height: 1.12; font-weight: 400; letter-spacing: -.045em; }
.lab-teaser h2 span { color: #757b6d; }
.lab-teaser-copy { max-width: 760px; }
.lab-teaser-copy > p:not(.lab-eyebrow) { color: #62675b; font-size: 14px; line-height: 1.9; margin: 25px 0; max-width: 48ch; }
.lab-teaser ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; list-style: none; margin: 0 0 32px; padding: 0; font-size: 12px; color: #62675b; }
.lab-teaser li::before { content: '+'; margin-right: 10px; color: #757b6d; }
.lab-hero { padding-top: 48px; padding-bottom: 48px; min-height: 0; }
.lab-hero h1 { font-size: clamp(40px, calc(4.7 * var(--vw)), 70px); line-height: 1.07; letter-spacing: -.055em; font-weight: 400; }
.lab-hero h1 span, .lab-section-heading h2 span, .lab-process h2 span { color: #757b6d; }
.lab-hero-copy > p:not(.lab-eyebrow) { max-width: 45ch; font-size: 16px; color: #62675b; line-height: 1.8; margin: 28px 0; }
.lab-art { margin: 0; border-radius: 18px; overflow: hidden; }
.lab-stations { background: #efefe9; }
.lab-section-heading { max-width: 710px; margin-bottom: 48px; }
.lab-section-heading > p:last-child { font-size: 15px; line-height: 1.8; max-width: 54ch; margin-top: 24px; color: #62675b; }
.lab-station-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lab-station { display: flex; flex-direction: column; padding: clamp(25px, calc(3.4 * var(--vw)), 48px); border-radius: 16px; background: #fafaf5; }
.lab-station-number { font-size: 10px; letter-spacing: .12em; color: #68705d; margin-bottom: 30px; }
.lab-station h3 { font-weight: 500; font-size: clamp(23px, calc(2.3 * var(--vw)), 32px); line-height: 1.25; letter-spacing: -.035em; }
.lab-station p { font-size: 14px; line-height: 1.9; color: #62675b; margin: 20px 0 28px; }
.lab-station-tag { font-size: 11px; color: #62675b; border-top: 1px solid #dedfd5; padding-top: 20px; margin-top: auto; }
.lab-keepsake-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.lab-keepsake-grid figure { margin: 0; min-width: 0; }
.lab-keepsake-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; }
.lab-keepsake-grid figcaption { padding: 23px 0 0; }
.lab-keepsake-grid h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.lab-keepsake-grid p { margin-top: 9px; font-size: 14px; line-height: 1.7; color: #62675b; }
@media (max-width: 600px) { .lab-keepsake-grid { grid-template-columns: 1fr; gap: 34px; } .lab-keepsake-grid img { border-radius: 12px; } }
.lab-process ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0; list-style: none; margin: 48px 0 0; }
.lab-process li { border-top: 1px solid #d9dccf; padding-top: 24px; }
.lab-process li > span { font-size: 11px; color: #707765; }
.lab-process h3 { font-size: 20px; margin: 18px 0 12px; font-weight: 500; }
.lab-process li p { font-size: 14px; line-height: 1.8; color: #62675b; }
.lab-invitation { background: #272924; color: #f8f8f2; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.lab-invitation p:not(.lab-eyebrow) { margin-top: 25px; max-width: 48ch; font-size: 14px; line-height: 1.8; color: #d2d5ca; }
.lab-invitation .button { flex-shrink: 0; }
@media (min-width: 901px) and (max-width: 1200px) { .desktop-nav { gap: 20px; margin-right: 25px; } }
@media (max-width: 800px) {
 .lab-teaser, .lab-hero { grid-template-columns: 1fr; gap: 32px; }
 .lab-teaser-copy { order: -1; }
 .lab-teaser-art { justify-self: start; }
 .lab-teaser-art, .lab-art { max-width: 520px; width: 100%; justify-self: center; }
 .lab-teaser-art img { transform: translateX(-10px); }
 .lab-hero { padding-top: 40px; padding-bottom: 55px; }
 .lab-station-grid { grid-template-columns: 1fr; gap: 18px; }
 .lab-process ol { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
 .lab-invitation { align-items: flex-start; flex-direction: column; gap: 28px; }
}
.faq-intro > .faq-contact.googly-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; border-radius: 999px; background: #171914; color: #fff; padding: 10px 12px 10px 23px; min-height: 58px; max-width: 100%; box-shadow: 0 7px 18px rgba(25,28,20,.12); transition: transform .25s, box-shadow .25s; }
.googly-label { font-size: 13px; line-height: 1.45; }
.googly-eyes { display: flex; flex-shrink: 0; gap: 6px; }
.googly-eye { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: inset 0 2px 4px #0002; transition: transform .2s cubic-bezier(.22,1.2,.36,1); }
.googly-pupil { width: 12px; height: 12px; border-radius: 50%; background: #171914; transform: translate(var(--pupil-x,0px), var(--pupil-y,0px)); transition: transform .12s ease-out; }
@media (hover: hover) and (pointer: fine) {
.googly-button:hover { transform: scale(1.02); }
}
@media (hover: hover) and (pointer: fine) {
.googly-button:active { transform: scale(.98); }
}
@media (hover: hover) and (pointer: fine) {
.googly-button:active .googly-eye:first-child { transform: scaleY(.45) rotate(-8deg); }
}
@media (hover: hover) and (pointer: fine) {
.googly-button:active .googly-eye:last-child { transform: scaleY(.45) rotate(8deg); }
}
@media (max-width: 600px) {
 .faq-intro > .faq-contact.googly-button { gap: 12px; padding-left: 18px; }
 .googly-label { font-size: 12px; }
 .googly-eye { width: 28px; height: 28px; }
 .googly-pupil { width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 .faq-intro > .faq-contact.googly-button, .googly-eye, .googly-pupil { transition: none; }
 .googly-button:hover, .googly-button:active, .googly-button:active .googly-eye { transform: none; }
}

/* ==========================================================================
   Polish pass (2026-09-23)
   One button system, a readable type floor, calmer effects, and tidier
   layouts for the experience cards, availability, and inquiry pages.
   Everything below overrides earlier rules; delete this block to revert.
   ========================================================================== */

:root {
    --btn-h: 50px;
    --btn-h-sm: 42px;
    --micro: 11px;          /* smallest text on the site */
    --micro-track: .14em;
    --micro-ink: #6a6c65;
}

/* ---- Buttons: pill shape, one height, one type size ---- */
body .button {
    border-radius: 999px;
    min-height: var(--btn-h);
    padding: 14px 26px;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
}
body .button > span[aria-hidden] { font-size: 16px; }
body .button-small { min-height: var(--btn-h-sm); padding: 10px 20px; font-size: 12px; }
body .button-outline {
    background: transparent;
    color: var(--ink);
    border: 1px solid #25262447;
}
body .button-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
body .experience-more .studio-link,
body .contact-sheet-foot .gallery-open {
    min-height: var(--btn-h);
    padding: 14px 30px;
    font-size: 13px;
    border-radius: 999px;
}
body .hero-copy > .hero-primary.booking-fill { font-size: 13px; }
#packages.pricing-cards-v2 .package-card > .button { border-radius: 999px; min-height: 52px; }
.availability-action .button { border-radius: 999px; }
.inquiry-reference #inquiry-form > .button { border-radius: 999px; padding-inline: 28px; }
#booth-dialog .button, #booth-dialog .camera-actions .button { border-radius: 999px; font-size: 13px; }
#booth-dialog #download-strip { min-height: 46px; padding: 12px 22px; }

/* Header booking button: RewampUI Gloss Button (drifting iridescent surface + fixed gloss arc). */
:is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss) { font-size: 12px; font-weight: 600; padding: 12px 24px; }
.booking-gloss::before {
    background: linear-gradient(115deg, #d9c6c2 0%, #b7a8c4 22%, #e8d2b8 40%, #c9a8ae 58%, #a99bbd 76%, #dcc4c0 100%);
    background-size: 220% 220%;
    animation: booking-gloss-drift 6s ease-in-out infinite;
}
.booking-gloss::after { top: 4px; left: 12px; right: 12px; height: 50%; border-radius: 999px; background: #ffffff40; filter: blur(3px); }

/* Rainbow glow retired from the Lab link (class kept harmless if reused). */
.rainbow-button::before { display: none; }

/* ---- Readable small text ---- */
.desktop-nav a { font-size: 13px; }
.desktop-nav { gap: 30px; }
.eyebrow,
body .faq-intro > .eyebrow,
body .about-principles > .eyebrow,
body .local-copy > .eyebrow,
body .inquiry-copy > .eyebrow,
.sharing-eyebrow,
.lab-eyebrow,
.hero-location {
    font-size: var(--micro);
    letter-spacing: var(--micro-track);
    font-weight: 500;
}
body .faq-intro > .eyebrow,
body .about-principles > .eyebrow,
body .local-copy > .eyebrow,
.sharing-eyebrow { color: var(--micro-ink); }

/* Gallery captions */
body .contact-frame > span { font-size: 10px; letter-spacing: .12em; color: #6f716a; margin-top: 10px; }
body .contact-frame > span b { font-size: 10px; font-weight: 600; margin-right: 10px; }
.contact-heading p { font-size: 14px; line-height: 1.7; }

/* Experience cards */
.experience-card p { font-size: 14px; line-height: 1.75; }

/* Photo booth preview panel */
.studio-privacy { font-size: 12px; color: #a3aa9f; }
.studio-hud, .studio-hud b { font-size: 10px; letter-spacing: .14em; }
.studio-enter { font-size: 11px; letter-spacing: .14em; }

/* Digital sharing + packages */
.sharing-number { font-size: 11px; }
.sharing-methods small { font-size: 13px; }
.reel-award small { font-size: 9px; letter-spacing: .12em; }

/* About */
body [class*="about-"] figcaption, body .local-image > span { font-size: 10px; letter-spacing: .12em; }
body .text-link { font-size: 13px; }

/* Availability microcopy */
.calendar-weekdays { font-size: 11px; }
.availability-action > span { font-size: 12px; }

/* Inquiry form */
body .package-selection small { font-size: 12px; }
body .package-selection label > span { font-size: 13px; }
body .package-selection legend { font-size: 14px; }
body .inquiry-reference .form-note { font-size: 12px; line-height: 1.6; }

/* Photo booth dialog */
#booth-dialog .booth-top .eyebrow,
#booth-dialog .strip-options > .eyebrow { font-size: 11px; }
#booth-dialog .viewfinder-label { font-size: 10px; letter-spacing: .14em; }
#booth-dialog .text-button { font-size: 13px; }
#booth-dialog .booth-alternatives > span { font-size: 12px; }
#booth-dialog .privacy-note { font-size: 12px; }
#booth-dialog .mono-toggle { font-size: 13px; }

/* Footer */
.footer-columns .footer-bottom { font-size: 11px; letter-spacing: .06em; }

/* ---- Experience cards: calmer surface, line icons instead of emoji ---- */
.experience-card {
    animation: none;
    background: #f1f1ed;
    border: 1px solid #e6e6e0;
    padding: 34px 30px 36px;
    min-height: 0;
}
.experience-decorator { width: 132px; height: 96px; margin-bottom: 22px; opacity: .55; }
.experience-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid #25262430;
    background: #fbfbf9;
    color: #33352f;
    box-shadow: 0 4px 12px -6px #2426221f;
}
.experience-svg { width: 24px; height: 24px; }
.experience-card h3 { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 700px) {
    .experience-card { padding: 26px 22px 28px; }
    .experience-decorator { width: 112px; height: 76px; margin-bottom: 14px; }
}

/* ---- Availability: bring copy and calendar together ---- */
@media (min-width: 701px) {
    .availability-section {
        justify-content: center;
        gap: clamp(48px, calc(10 * var(--vw)), 150px);
    }
    .availability-copy { max-width: 460px; }
}
.availability-section h2 {
    font-size: clamp(34px, calc(4.2 * var(--vw)), 56px);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.availability-action { width: min(100%, 300px); gap: 14px; }
.availability-calendar { width: 100%; padding: 18px; }
.calendar-day, .calendar-nav { width: 32px; height: 32px; }
.availability-action .button { width: 100%; }

/* ---- Inquiry page: keep contact details beside the intro, not at the bottom ---- */
@media (min-width: 901px) {
    .inquiry-reference .inquiry-copy { position: sticky; top: 110px; align-self: start; }
    .inquiry-reference .contact-details { margin: 44px 0 0; padding-top: 32px; border-top: 1px solid #e6e6e2; }
}

body .principles-grid article > span { font-size: 11px; letter-spacing: .1em; }
body .local-copy .button { font-size: 13px; }
body .receipt-confirmation .button { border-radius: 999px; }
body .interactive-studio .button-light { font-size: 13px; }
@media (min-width: 701px) { .availability-copy { max-width: 560px; } }
body .faq-list summary { font-size: 15px; }
body .faq-list details p { font-size: 14px; line-height: 1.75; }

/* ---- "Meet the Lab": rainbow border + glow (plain-CSS port of the RainbowButton component) ---- */
:root {
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
    --rainbow: linear-gradient(90deg, hsl(var(--color-1)), hsl(var(--color-5)), hsl(var(--color-3)), hsl(var(--color-4)), hsl(var(--color-2)));
}
body .experience-more .lab-rainbow {
    position: relative;
    isolation: isolate;
    overflow: visible;
    color: #fff;
    border: calc(0.08 * 1rem) solid transparent;
    background:
        linear-gradient(#121213, #121213) padding-box,
        linear-gradient(#121213 50%, rgba(18, 18, 19, .6) 80%, rgba(18, 18, 19, 0)) border-box,
        var(--rainbow) border-box;
    background-size: 200%;
    animation: rainbow var(--speed, 2s) infinite linear;
    transition: transform .25s var(--ease);
}
body .experience-more .lab-rainbow::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -20%;
    width: 60%;
    height: 20%;
    transform: translateX(-50%);
    background: var(--rainbow);
    background-size: 200%;
    filter: blur(calc(0.8 * 1rem));
    animation: rainbow var(--speed, 2s) infinite linear;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
body .experience-more .lab-rainbow:hover { background-color: transparent; color: #fff; transform: translateY(-2px); }
}
body .experience-more .lab-rainbow:focus-visible { outline: 2px solid #8b7cf6; outline-offset: 4px; }
@keyframes rainbow {
    0%   { background-position: 0%; }
    100% { background-position: 200%; }
}
@media (prefers-reduced-motion: reduce) {
    body .experience-more .lab-rainbow,
    body .experience-more .lab-rainbow::before { animation: none; }
}

/* ==========================================================================
   Experience cards: frosted-glass finish.
   Soft color pools sit behind the row so the glass has something to blur.
   ========================================================================== */
.experience-v3 .experience-features { position: relative; isolation: isolate; }
.experience-v3 .experience-features::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -12% -4%;
    background:
        radial-gradient(38% 60% at 14% 42%, #d8c8f0b3 0%, #d8c8f000 70%),
        radial-gradient(34% 58% at 52% 64%, #f3d3c4a6 0%, #f3d3c400 70%),
        radial-gradient(36% 60% at 88% 38%, #c9dcc8a6 0%, #c9dcc800 70%);
    filter: blur(24px);
    animation: exp-glass-drift 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes exp-glass-drift {
    from { transform: translate3d(-1.5%, 0, 0) scale(1); }
    to   { transform: translate3d(1.5%, -3%, 0) scale(1.04); }
}
.experience-v3 .experience-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff99 0%, #ffffff59 55%, #ffffff40 100%);
    border: 1px solid #ffffffc7;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow:
        inset 0 1px 0 #ffffffe6,
        inset 0 -1px 0 #ffffff33,
        0 1px 2px #1d1f1a0a,
        0 18px 40px -22px #3a2f5540;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* glossy sheen along the top edge */
.experience-v3 .experience-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 46%;
    background: linear-gradient(180deg, #ffffff66 0%, #ffffff00 100%);
    pointer-events: none;
}
.experience-v3 .experience-card > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
.experience-v3 .experience-card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 #ffffffe6,
        inset 0 -1px 0 #ffffff33,
        0 1px 2px #1d1f1a0a,
        0 26px 50px -24px #3a2f5559;
}
}
.experience-v3 .experience-decorator { opacity: .35; }
.experience-v3 .experience-icon {
    background: #ffffffb3;
    border: 1px solid #ffffffe6;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px -8px #3a2f5540;
}
.experience-v3 .experience-card p { color: #5f6159; }
@media (prefers-reduced-motion: reduce) {
    .experience-v3 .experience-features::before { animation: none; }
    .experience-v3 .experience-card { transition: none; }
}
/* glass tuning: let more color through, keep icons crisp */
.experience-v3 .experience-features::before {
    background:
        radial-gradient(38% 62% at 14% 45%, #cdb8f2e6 0%, #cdb8f200 70%),
        radial-gradient(34% 60% at 50% 62%, #f5c9b5d9 0%, #f5c9b500 70%),
        radial-gradient(36% 62% at 86% 40%, #b9d6b8d9 0%, #b9d6b800 70%);
}
.experience-v3 .experience-card {
    background: linear-gradient(160deg, #ffffff80 0%, #ffffff38 60%, #ffffff26 100%);
}
.experience-v3 .experience-decorator { opacity: .7; }
.experience-v3 .experience-icon { color: #2d2f2a; }
/* no grid behind the card icons */
.experience-v3 .experience-decorator {
    background-image: none;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    width: 56px;
    height: 56px;
    margin: 4px auto 22px;
    overflow: visible;
}

/* ==========================================================================
   The Lab: glass + neumorphic redesign (same layout and content).
   Neumorphic = soft raised/pressed surfaces made of the page color.
   Glass      = translucent frosted panels over soft color pools.
   ========================================================================== */
body[data-page="lab"] {
    --neu-bg: #ecebe6;
    --neu-dark: #d2d0c8;
    --neu-light: #ffffff;
    --neu-raised: 12px 12px 28px var(--neu-dark), -12px -12px 28px var(--neu-light);
    --neu-raised-sm: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
    --neu-pressed: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light);
    --neu-pressed-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
    --glass-bg: linear-gradient(155deg, #ffffff8c 0%, #ffffff47 60%, #ffffff33 100%);
    --glass-edge: #ffffffd1;
    background: var(--neu-bg);
}
body[data-page="lab"] main > section { background: transparent; position: relative; isolation: isolate; }
body[data-page="lab"] .lab-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px; border-radius: 999px;
    background: var(--neu-bg); box-shadow: var(--neu-pressed-sm);
    color: #5d6056; font-size: 11px; letter-spacing: .14em;
}
body[data-page="lab"] .lab-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: #a88be0; box-shadow: 0 0 0 3px #a88be033;
}

/* ---- Hero ---- */
.lab-hero { padding-top: clamp(48px, calc(6 * var(--vw)), 88px); padding-bottom: clamp(56px, calc(7 * var(--vw)), 104px); }
.lab-hero::before {
    content: ''; position: absolute; z-index: -1; inset: 0;
    background:
        radial-gradient(30% 45% at 78% 40%, #d6c6f2a6 0%, #d6c6f200 70%),
        radial-gradient(26% 40% at 62% 72%, #f4cdbb8c 0%, #f4cdbb00 70%);
    filter: blur(20px); pointer-events: none;
}
.lab-neu-button {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 52px; padding: 14px 26px; border-radius: 999px;
    background: var(--neu-bg); color: var(--ink);
    font-size: 13px; font-weight: 500;
    box-shadow: var(--neu-raised-sm);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.lab-neu-button:hover { transform: translateY(-1px); box-shadow: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light); }
}
.lab-neu-button:active { transform: none; box-shadow: var(--neu-pressed-sm); }
.lab-neu-button:focus-visible { outline: 2px solid #a88be0; outline-offset: 4px; }

body[data-page="lab"] .lab-art { overflow: visible; border-radius: 0; display: flex; justify-content: center; }
.lab-console {
    position: relative;
    width: min(100%, 460px);
    aspect-ratio: 1;
    padding: clamp(22px, calc(3 * var(--vw)), 34px);
    border-radius: 40px;
    background: var(--neu-bg);
    box-shadow: var(--neu-raised);
}
.lab-screen {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border-radius: 28px;
    background: var(--neu-bg);
    box-shadow: var(--neu-pressed);
    overflow: hidden;
}
body[data-page="lab"] .lab-screen img { width: 78%; height: auto; transform: none; }
.lab-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 17px; border-radius: 999px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: inset 0 1px 0 #fff, 0 14px 30px -16px #3a2f5559;
    color: #2b2c28; font-size: 13px; font-weight: 500; white-space: nowrap;
    animation: lab-chip-float 7s ease-in-out infinite alternate;
}
.lab-chip i { width: 8px; height: 8px; border-radius: 50%; background: #8bc59a; box-shadow: 0 0 0 3px #8bc59a33; }
.lab-chip-a { top: 14%; left: -12%; }
.lab-chip-b { bottom: 12%; right: -10%; animation-delay: -3.5s; }
.lab-chip-b i { background: #e9a98f; box-shadow: 0 0 0 3px #e9a98f33; }
@keyframes lab-chip-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ---- Keepsakes: raised cards, glass captions over the photo ---- */
.lab-keepsakes::before {
    content: ''; position: absolute; z-index: -1; inset: 20% 0 0;
    background:
        radial-gradient(28% 40% at 20% 60%, #c9dcc873 0%, #c9dcc800 70%),
        radial-gradient(28% 40% at 80% 50%, #d6c6f273 0%, #d6c6f200 70%);
    filter: blur(24px); pointer-events: none;
}
body[data-page="lab"] .lab-keepsake-grid { gap: clamp(24px, calc(3 * var(--vw)), 40px); }
body[data-page="lab"] .lab-keepsake-grid figure {
    position: relative;
    padding: 14px;
    border-radius: 30px;
    background: var(--neu-bg);
    box-shadow: var(--neu-raised);
}
body[data-page="lab"] .lab-keepsake-grid img { border-radius: 20px; aspect-ratio: 4 / 5; }
body[data-page="lab"] .lab-keepsake-grid figcaption {
    position: absolute;
    left: 30px; right: 30px; bottom: 30px;
    padding: 18px 22px;
    border-radius: 18px;
    background: linear-gradient(155deg, #ffffffb3 0%, #ffffff73 100%);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 #fff, 0 16px 34px -18px #1d1f1a66;
}
body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 20px; }
body[data-page="lab"] .lab-keepsake-grid p { margin-top: 4px; color: #4f5249; }

/* ---- Stations: glass cards over color pools, neumorphic details ---- */
.lab-stations::before {
    content: ''; position: absolute; z-index: -1; inset: 30% 2% 4%;
    background:
        radial-gradient(30% 34% at 22% 30%, #d6c6f2cc 0%, #d6c6f200 70%),
        radial-gradient(30% 34% at 78% 36%, #f4cdbbb3 0%, #f4cdbb00 70%),
        radial-gradient(30% 34% at 24% 78%, #c9dcc8b3 0%, #c9dcc800 70%),
        radial-gradient(30% 34% at 80% 80%, #cfd8f0b3 0%, #cfd8f000 70%);
    filter: blur(28px);
    animation: lab-pools 20s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes lab-pools { from { transform: translate3d(-1%, 0, 0); } to { transform: translate3d(1%, -2%, 0) scale(1.03); } }
body[data-page="lab"] .lab-station-grid { gap: clamp(20px, calc(2.4 * var(--vw)), 32px); }
body[data-page="lab"] .lab-station {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-edge);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 1px 0 #ffffffe6, 0 1px 2px #1d1f1a0a, 0 22px 44px -26px #3a2f5552;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
body[data-page="lab"] .lab-station::after {
    content: ''; position: absolute; inset: 0 0 auto; height: 40%;
    background: linear-gradient(180deg, #ffffff59, #ffffff00);
    pointer-events: none;
}
body[data-page="lab"] .lab-station > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
body[data-page="lab"] .lab-station:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 #ffffffe6, 0 1px 2px #1d1f1a0a, 0 30px 54px -26px #3a2f5566; }
}
body[data-page="lab"] .lab-station-number {
    display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
    margin-bottom: 28px;
    color: #5d6056; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
body[data-page="lab"] .lab-station-number b {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 14px;
    background: #f3f2ee; color: var(--ink);
    font-size: 13px; letter-spacing: 0;
    box-shadow: 4px 4px 10px #cfcdc5b3, -4px -4px 10px #ffffff;
}
body[data-page="lab"] .lab-station p { color: #555850; font-size: 15px; line-height: 1.75; }
.lab-station-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: auto 0 0; padding: 0; list-style: none;
}
.lab-station-tags li {
    padding: 7px 13px; border-radius: 999px;
    background: #f1f0ec; color: #4f5249;
    font-size: 12px; font-weight: 500;
    box-shadow: inset 2px 2px 5px #d6d4cc, inset -2px -2px 5px #ffffff;
}

/* Footer blends into the neumorphic page */
body[data-page="lab"] .site-footer { background: var(--neu-bg); }

@media (max-width: 900px) {
    .lab-console { width: min(100%, 380px); }
    .lab-chip-a { left: -4%; }
    .lab-chip-b { right: -4%; }
}
@media (max-width: 600px) {
    .lab-console { border-radius: 30px; padding: 18px; }
    .lab-screen { border-radius: 20px; }
    .lab-chip { font-size: 12px; padding: 9px 14px; }
    .lab-chip-a { top: 8%; left: 0; }
    .lab-chip-b { bottom: 8%; right: 0; }
    body[data-page="lab"] .lab-keepsake-grid figure { padding: 10px; border-radius: 24px; }
    body[data-page="lab"] .lab-keepsake-grid figcaption { left: 20px; right: 20px; bottom: 20px; padding: 14px 16px; }
    body[data-page="lab"] .lab-station { border-radius: 22px; }
    body[data-page="lab"] {
        --neu-raised: 8px 8px 20px var(--neu-dark), -8px -8px 20px var(--neu-light);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lab-chip, .lab-stations::before { animation: none; }
    body[data-page="lab"] .lab-station { transition: none; }
}
body[data-page="lab"] .site-header { background: #ecebe6eb; }
body[data-page="lab"] .site-header.scrolled { background: #ecebe6d9; }
@media (max-width: 900px) {
    .lab-hero::before {
        background:
            radial-gradient(45% 22% at 45% 68%, #d6c6f2a6 0%, #d6c6f200 70%),
            radial-gradient(40% 18% at 60% 82%, #f4cdbb8c 0%, #f4cdbb00 70%);
    }
}

/* ==========================================================================
   Mobile-first pass (phones ≤ 700px unless noted)
   ========================================================================== */
/* Tighter sticky header gives content more of the screen */
@media (max-width: 700px) {
    html { scroll-padding-top: 76px; }
    .site-header, .site-header.scrolled { height: 64px; padding-inline: 20px; gap: 12px; }
    .brand img { width: 98px; }
    :is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss) { min-height: 42px; padding: 10px 18px; font-size: 12px; }
    .menu-toggle { width: 44px; height: 44px; padding: 0 10px; margin-right: -8px; }
}

/* Experience cards: compact rows (icon beside text) instead of tall tiles */
@media (max-width: 700px) {
    .experience-v3 .experience-features { gap: 14px; }
    .experience-v3 .experience-card {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 20px 18px;
        text-align: left;
        border-radius: 18px;
    }
    .experience-v3 .experience-decorator { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
    .experience-v3 .experience-icon { width: 48px; height: 48px; }
    .experience-v3 .experience-card h3 { font-size: 17px; margin: 2px 0 0; }
    .experience-v3 .experience-card p { max-width: none; margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
}

/* Formats: swipeable row with a peek of the next card */
@media (max-width: 700px) {
    .formats-section .format-cards {
        display: flex;
        gap: 14px;
        max-width: none;
        margin: 0 -23px;
        padding: 4px 23px 20px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 23px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .formats-section .format-cards::-webkit-scrollbar { display: none; }
    .formats-section .format-card { flex: 0 0 84%; scroll-snap-align: start; }
    .format-card-copy { padding: 20px 20px 22px; }
    .format-card-copy h3 { font-size: 20px; margin-bottom: 8px; }
    .format-card-copy p { font-size: 14px; line-height: 1.65; }
    .format-swipe-hint { display: flex; }
}
.format-swipe-hint {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #74766e;
    font-size: 12px;
}

/* Calendar: finger-sized dates */
@media (max-width: 700px) {
    .availability-action { width: 100%; }
    .availability-calendar { padding: 16px 12px; }
    .calendar-weekdays, .calendar-grid { gap: 2px; }
    .calendar-day, .calendar-nav { width: 42px; height: 42px; font-size: 14px; }
}

/* Touch screens: no sticky hover lifts after a tap */
@media (hover: none) {
    .experience-v3 .experience-card:hover,
    body[data-page="lab"] .lab-station:hover,
    .lab-neu-button:hover,
    :is(.nav-actions > .booking-gloss, .mobile-nav > .booking-gloss, .experience-more > .booking-gloss):hover,
    body .experience-more .lab-rainbow:hover { transform: none; }
}

/* Respect the iPhone home-indicator area */
.site-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
@media (max-width: 700px) {
    .calendar-day { width: 100%; max-width: 42px; height: auto; aspect-ratio: 1; }
}
@media (max-width: 700px) { .formats-section .format-swipe-hint { display: flex; margin: -8px 0 14px; } }

/* ---- Lab page adjustments: flat logo, plain cards, captions under photos ---- */
/* Logo: no raised/pressed 3D frame */
.lab-console { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.lab-screen { background: transparent; box-shadow: none; border-radius: 0; }

/* Cards: no color gradients */
.lab-keepsakes::before,
.lab-stations::before { display: none; }
body[data-page="lab"] .lab-station {
    background: #f7f6f2;
    border: 1px solid #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 2px #1d1f1a0a, 0 18px 40px -28px #1d1f1a40;
}
body[data-page="lab"] .lab-station::after { display: none; }

/* Keepsake captions sit below the photo */
body[data-page="lab"] .lab-keepsake-grid figcaption {
    position: static;
    padding: 18px 8px 6px;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
body[data-page="lab"] .lab-keepsake-grid p { color: #62655c; }
@media (max-width: 600px) {
    body[data-page="lab"] .lab-keepsake-grid figcaption { padding: 14px 6px 4px; }
}
.lab-hero::before { display: none; }

/* ==========================================================================
   Experience: stacked, swipeable cards (vanilla port of the
   TestimonialCarousel component). Replaces the three-card row.
   ========================================================================== */
.feature-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px auto 0;
    outline: none;
}
.feature-stack:focus-visible .feature-stack-cards { outline: 2px solid #a88be0; outline-offset: 10px; border-radius: 20px; }
.feature-stack-cards {
    position: relative;
    width: min(100%, 360px);
    height: 280px;
    margin-top: 12px;
}
.feature-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 44px 28px 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 25px -5px #1d1f1a1a, 0 8px 10px -6px #1d1f1a1a;
    text-align: center;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform, opacity;
    transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .45s ease;
}
.feature-card.is-dragging { cursor: grabbing; transition: none; }
.feature-card[data-pos="0"] { z-index: 3; opacity: 1; transform: translateX(var(--drag-x, 0px)) rotate(var(--drag-r, 0deg)); }
.feature-card[data-pos="1"] { z-index: 2; opacity: .6; transform: translateY(8px) scale(.95) rotate(-2deg); pointer-events: none; }
.feature-card[data-pos="2"] { z-index: 1; opacity: .3; transform: translateY(16px) scale(.95) rotate(-4deg); pointer-events: none; }
.feature-card:not([data-pos="0"]) > * { visibility: hidden; }
.feature-card-arrows {
    position: absolute;
    inset: 8px 10px auto;
    display: flex;
    justify-content: space-between;
}
.feature-arrow {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #b9bbb3;
    font-size: 22px;
    line-height: 1;
    transition: color .2s, background .2s;
}
.feature-arrow:hover { color: #6c6e67; background: #f3f3ef; }
.feature-arrow:focus-visible { outline: 2px solid #a88be0; outline-offset: 1px; }
.feature-card-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f3f2ee;
    color: #2d2f2a;
}
.feature-card-icon svg { width: 28px; height: 28px; }
.feature-card h3 { margin: 4px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: #252624; }
.feature-card p { margin: 0; max-width: 30ch; color: #62645d; font-size: 14px; line-height: 1.65; }
.feature-stack-dots { display: flex; gap: 4px; margin-top: 30px; }
.feature-stack-dots button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.feature-stack-dots button::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3d4ce;
    transition: background .25s, transform .25s;
}
.feature-stack-dots button[aria-current="true"]::before { background: var(--ink); transform: scale(1.1); }
.feature-stack-hint { margin-top: 6px; color: #8a8c84; font-size: 12px; }
@media (max-width: 700px) {
    .feature-stack-cards { height: 290px; }
    .feature-card { padding: 44px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .feature-card { transition: opacity .2s ease; }
}
/* Feature cards: round photos in place of icons */
.feature-card-photo {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background: #e9e8e3;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #25262414, 0 8px 18px -8px #1d1f1a59;
    pointer-events: none;
}
.feature-stack-cards { height: 304px; }
@media (max-width: 700px) { .feature-stack-cards { height: 314px; } }
/* Feature cards v2: photo across the top of the card, arrows float on it */
.feature-card { padding: 10px 10px 24px; gap: 10px; }
.feature-card-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    box-shadow: none;
    margin-bottom: 8px;
}
.feature-card h3 { margin-top: 0; padding-inline: 16px; }
.feature-card p { padding-inline: 16px; }
.feature-card-arrows { inset: 18px 18px auto; z-index: 1; }
.feature-arrow {
    width: 36px; height: 36px;
    font-size: 18px;
    color: #252624;
    background: #ffffffc4;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px -6px #0000004d;
}
.feature-arrow:hover { color: #000; background: #fff; }
.feature-stack-cards { width: min(100%, 380px); height: 400px; }
@media (max-width: 700px) { .feature-stack-cards { height: 410px; } }
@media (max-width: 700px) { .feature-stack-cards { height: 384px; } }
/* Show the whole photo (no crop) where the image's own shape is kept */
.feature-card-photo--full { aspect-ratio: 2048 / 1370; }
.feature-stack-cards { height: 416px; }
@media (max-width: 700px) { .feature-stack-cards { height: 400px; } }
.feature-card-photo--light { aspect-ratio: 2048 / 1293; }
.feature-stack-cards { height: 446px; }
@media (max-width: 700px) { .feature-stack-cards { height: 420px; } }

/* ==========================================================================
   About: "Thoughtful by design" v2 - heading + three white cards
   ========================================================================== */
.principles-v2 { background: #efefea; }
.principles-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, calc(6 * var(--vw)), 96px);
    align-items: end;
    max-width: 1240px;
    margin: 0 auto clamp(36px, calc(5 * var(--vw)), 56px);
}
.principles-head h2 {
    font-size: clamp(34px, calc(4.2 * var(--vw)), 58px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.045em;
}
.principles-head h2 span { color: #7a7c73; }
.principles-head p { max-width: 38ch; color: #62645d; font-size: 16px; line-height: 1.7; padding-bottom: 6px; }
.principles-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, calc(2 * var(--vw)), 24px);
    max-width: 1240px;
    margin: 0 auto;
}
.principle-card {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px #1d1f1a0a, 0 16px 36px -26px #1d1f1a4d;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.principle-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px #1d1f1a0a, 0 24px 44px -24px #1d1f1a59; }
}
.principle-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(32px, calc(4 * var(--vw)), 56px); }
.principle-icon {
    display: grid; place-items: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: #f3f2ee; color: #2d2f2a;
}
.principle-icon svg { width: 24px; height: 24px; }
.principle-num { color: #9a9c94; font-size: 13px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.principle-card h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.principle-card p { margin: 10px 0 0; color: #62645d; font-size: 15px; line-height: 1.7; }
@media (max-width: 900px) {
    .principles-head { grid-template-columns: 1fr; gap: 16px; }
    .principles-cards { grid-template-columns: 1fr; }
    .principle-top { margin-bottom: 20px; }
}
@media (max-width: 700px) {
    .principle-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 16px;
        padding: 20px 18px;
        border-radius: 18px;
    }
    .principle-top { grid-row: 1 / span 2; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
    .principle-icon { width: 48px; height: 48px; }
    .principle-num { font-size: 11px; }
    .principle-card h3 { font-size: 18px; margin-top: 2px; }
    .principle-card p { font-size: 14px; margin-top: 6px; line-height: 1.6; }
    .principles-head p { font-size: 15px; }
}
@media (hover: none) { .principle-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .principle-card { transition: none; } }

/* About principles v3: no icons; soft neumorphic cards with a frosted-glass face */
.principles-v2 {
    --neu-bg: #ecebe6;
    --neu-dark: #d3d1c9;
    --neu-light: #ffffff;
    background: var(--neu-bg);
}
.principle-card {
    position: relative;
    padding: 30px 30px 34px;
    border-radius: 28px;
    background: #ffffff2e;
    border: 1px solid #ffffff99;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        14px 14px 30px var(--neu-dark),
        -14px -14px 30px var(--neu-light),
        inset 0 1px 0 #ffffffd9;
}
@media (hover: hover) and (pointer: fine) {
.principle-card:hover {
    transform: translateY(-3px);
    box-shadow:
        18px 18px 36px var(--neu-dark),
        -16px -16px 34px var(--neu-light),
        inset 0 1px 0 #ffffffd9;
}
}
.principle-num {
    display: grid;
    place-items: center;
    align-self: flex-start;
    width: 52px;
    height: 52px;
    margin-bottom: clamp(36px, calc(4 * var(--vw)), 60px);
    border-radius: 50%;
    background: var(--neu-bg);
    color: #3a3c36;
    font-size: 14px;
    letter-spacing: .04em;
    box-shadow: inset 4px 4px 9px var(--neu-dark), inset -4px -4px 9px var(--neu-light);
}
@media (max-width: 900px) { .principle-num { margin-bottom: 24px; } }
@media (max-width: 700px) {
    .principles-cards { gap: 22px; }
    .principle-card {
        display: flex;
        padding: 22px 22px 26px;
        border-radius: 22px;
        box-shadow: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light), inset 0 1px 0 #ffffffd9;
    }
    .principle-num { width: 44px; height: 44px; font-size: 13px; margin-bottom: 18px; }
}

/* Gallery wheel: photo viewer that zooms out of the tapped photo */
.gallery-zoom {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    color: #f6f6f1;
}
.gallery-zoom[open] { display: grid; place-items: center; }
.gallery-zoom::backdrop { background: transparent; }
.gallery-zoom-scrim {
    position: absolute;
    inset: 0;
    background: #141512d9;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.gallery-zoom-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 72px 20px 64px;
    max-width: 100%;
    pointer-events: none;
}
.gallery-zoom-figure img {
    display: block;
    max-width: min(calc(92 * var(--vw)), 1100px);
    max-height: calc(calc(100 * var(--vh)) - 190px);
    max-height: calc(calc(100 * var(--dvh)) - 190px);
    width: auto;
    height: auto;
    border-radius: 14px;
    clip-path: inset(0 round 14px);
    box-shadow: 0 30px 80px -30px #000c;
    transform-origin: center;
    will-change: transform, clip-path;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
}
.gallery-zoom-figure figcaption { max-width: 60ch; color: #deded6; font-size: 14px; line-height: 1.6; text-align: center; }
.gallery-zoom-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #ffffff33;
    border-radius: 50%;
    background: #ffffff1f;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    transition: background .2s;
}
.gallery-zoom-btn:hover { background: #ffffff38; }
.gallery-zoom-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gallery-zoom-close { top: max(16px, env(safe-area-inset-top)); right: 16px; font-size: 28px; }
.gallery-zoom-prev { left: 16px; top: 50%; translate: 0 -50%; }
.gallery-zoom-next { right: 16px; top: 50%; translate: 0 -50%; }
.gallery-zoom-count { position: absolute; top: max(28px, calc(env(safe-area-inset-top) + 12px)); left: 20px; color: #cfcfc7; font-size: 12px; letter-spacing: .12em; }
@media (max-width: 700px) {
    .gallery-zoom-figure { padding: 70px 12px 96px; }
    .gallery-zoom-figure img { max-width: calc(calc(100 * var(--vw)) - 24px); max-height: calc(calc(100 * var(--dvh)) - 230px); }
    .gallery-zoom-prev, .gallery-zoom-next { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
    .gallery-zoom-prev { left: calc(50% - 60px); }
    .gallery-zoom-next { right: calc(50% - 60px); }
}

/* Footer: privacy link beside "Back to top" */
.footer-links { display: inline-flex; align-items: center; gap: 24px; }
.footer-links a { color: inherit; }
.footer-links a:hover { color: var(--ink); }

/* Gallery: Instagram link beside the gallery button */
.contact-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.gallery-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #4f5249;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.gallery-instagram:hover { color: var(--ink); border-bottom-color: currentColor; }

/* How it works: four cards in the same style as the About principles */
.how-it-works .principles-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.how-it-works .principle-card { padding: 26px 24px 30px; }
.how-it-works .principle-card h3 { font-size: 20px; }
@media (max-width: 1100px) { .how-it-works .principles-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .how-it-works .principles-cards { grid-template-columns: 1fr; } }

/* Privacy page */
.privacy-page { max-width: 820px; margin: 0 auto; padding-top: clamp(48px, calc(7 * var(--vw)), 96px); }
.privacy-head h1 { font-size: clamp(40px, calc(5 * var(--vw)), 68px); font-weight: 400; letter-spacing: -.05em; line-height: 1.05; }
.privacy-head p { margin-top: 18px; color: #6a6c65; font-size: 15px; }
.privacy-body { margin-top: clamp(36px, calc(5 * var(--vw)), 56px); }
.privacy-body h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.privacy-body p { margin: 0 0 14px; color: #4f5249; font-size: 16px; line-height: 1.75; }
.privacy-body strong { color: var(--ink); font-weight: 600; }
.privacy-body a { text-decoration: underline; text-underline-offset: 3px; }
.footer-columns .footer-bottom { align-items: center; }
.footer-columns .footer-bottom > .footer-links { display: inline-flex; flex-direction: row; align-items: center; gap: 28px; padding-top: 0; }
.footer-columns .footer-bottom .footer-links a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; }

/* ==========================================================================
   How it works v2: horizontal timeline (vertical on phones)
   ========================================================================== */
.how-v2 {
    background: var(--paper);
    padding-top: clamp(80px, calc(9 * var(--vw)), 130px);
    padding-bottom: clamp(96px, calc(11 * var(--vw)), 160px);
}
.how-head {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, calc(6 * var(--vw)), 96px);
    align-items: end;
    max-width: 1240px;
    margin: 0 auto clamp(48px, calc(6 * var(--vw)), 80px);
}
.how-head h2 { font-size: clamp(34px, calc(4.2 * var(--vw)), 58px); font-weight: 400; line-height: 1.08; letter-spacing: -.045em; }
.how-head h2 span { color: #7a7c73; }
.how-head p { max-width: 38ch; color: #62645d; font-size: 16px; line-height: 1.7; padding-bottom: 6px; }

.how-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, calc(3 * var(--vw)), 44px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
/* the connecting line runs through the markers */
.how-steps::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 22px;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #25262440, #25262440 80%, #25262400);
}
.how-step { position: relative; }
.how-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    border-radius: 50%;
    border: 1px solid #25262459;
    background: var(--paper);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: background .3s, color .3s, border-color .3s;
}
.how-step:first-child .how-marker { background: var(--ink); border-color: var(--ink); color: #fff; }
.how-step:hover .how-marker { background: var(--ink); border-color: var(--ink); color: #fff; }
.how-step h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.025em; }
.how-step p { margin: 10px 0 0; max-width: 30ch; color: #62645d; font-size: 15px; line-height: 1.7; }

.how-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    max-width: 1240px;
    margin: clamp(48px, calc(6 * var(--vw)), 72px) auto 0;
}
.how-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #4f5249; font-size: 14px; font-weight: 500; }
.how-link:hover { color: var(--ink); }

@media (max-width: 1000px) {
    .how-head { grid-template-columns: 1fr; gap: 16px; }
    .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
    .how-steps::before { display: none; }
}
@media (max-width: 700px) {
    .how-v2 { padding-bottom: 104px; }
    .how-steps { grid-template-columns: 1fr; gap: 0; }
    /* vertical timeline */
    .how-steps::before {
        display: block;
        top: 22px;
        bottom: 22px;
        left: 21px;
        right: auto;
        width: 1px;
        height: auto;
        background: #25262433;
    }
    .how-step {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 32px;
    }
    .how-step:last-child { padding-bottom: 0; }
    .how-marker { grid-row: 1 / span 2; margin: 0; }
    .how-step h3 { font-size: 18px; padding-top: 10px; }
    .how-step p { font-size: 14px; margin-top: 6px; max-width: none; }
    .how-cta { flex-direction: column; align-items: stretch; }
    .how-cta .button { width: 100%; }
    .how-link { justify-content: center; }
}
.feature-stack-cards { height: 416px; }
@media (max-width: 700px) { .feature-stack-cards { height: 400px; } }

/* About — "Our story", a simple single-column essay (2026-09-24).
   Motion comes from the site-wide .reveal fade-up only. */
.story {
	border-top: 1px solid var(--line);
	margin-top: 30px;
	padding-top: 90px;
}
.story-col {
	max-width: 680px;
	margin: 0 auto;
}
.story-title {
	font-size: clamp(34px, calc(4 * var(--vw)), 52px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.035em;
	margin-bottom: 40px;
}
.story h3 {
	font-size: clamp(24px, calc(2.4 * var(--vw)), 30px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.025em;
	margin: 90px 0 22px;
}
.story p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--muted);
	margin-bottom: 22px;
}
.story .story-q {
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 32px 0;
	padding-left: 20px;
	border-left: 2px solid var(--ink);
}
.story .story-lines {
	color: var(--ink);
	margin: 30px 0;
}
.story-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 44px 0;
}
.story-pair figure,
.story-photo {
	margin: 0;
}
.story-pair img,
.story-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.story-pair img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}
.story-photo {
	margin: 40px 0;
}
.story figcaption {
	font-size: 13px;
	color: var(--muted);
	margin-top: 10px;
}
.about-story-page .local-v2 {
	border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
	.story { margin-top: 36px; padding-top: 64px; }
	.story p { font-size: 16px; }
	.story h3 { margin-top: 64px; }
	.story-pair { gap: 10px; }
}

/* About — typewriter title. Characters are hidden (not removed) so the layout
   never shifts; the caret takes no width and is removed once typing finishes. */
.js-typing [data-typewriter]:not(.is-typing):not(.is-typed) {
	visibility: hidden;
	animation: typewriter-failsafe 0s 2.5s forwards; /* shows the title if the script never runs */
}
@keyframes typewriter-failsafe { to { visibility: visible; } }
[data-typewriter] .tw-char { visibility: hidden; }
[data-typewriter] .tw-char.is-on { visibility: visible; }
[data-typewriter] .tw-caret {
	display: inline-block;
	width: 0.06em;
	height: 0.82em;
	margin-left: 0.04em;
	margin-right: -0.1em;
	vertical-align: -0.04em;
	background: currentColor;
	animation: tw-blink 1s steps(1) infinite;
	transition: opacity 0.4s ease;
}
[data-typewriter].is-typing:not(.is-paused) .tw-caret { animation: none; }
[data-typewriter] .tw-caret.is-leaving { opacity: 0; animation: none; }
@keyframes tw-blink { 50% { opacity: 0; } }

/* =====================================================================
   Designs page — scrollable 3D card row (v2, 2026-09-24)
   A native sideways-scrolling row (trackpad, touch, wheel, drag, arrows).
   Cards stay upright; the ones off-centre tilt away in 3D.
   ===================================================================== */
.designs-hero { padding-bottom: 20px; }
.designs-lead {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--muted);
	margin-top: 28px;
}
.designs-stage {
	--card-w: 340px;
	--card-h: 460px;
	padding: 30px 0 90px;
}
.designs-track {
	list-style: none;
	margin: 0;
	display: flex;
	gap: 28px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 40px calc(50% - var(--card-w) / 2) 50px;
	perspective: 1600px;
	cursor: grab;
	outline: none;
}
.designs-track::-webkit-scrollbar { display: none; }
.designs-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.designs-track:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.designs-track > li {
	flex: 0 0 var(--card-w);
	height: var(--card-h);
	scroll-snap-align: center;
	transform-style: preserve-3d;
}
.design-card {
	display: block;
	width: 100%;
	height: 100%;
	padding: 16px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 0 0 1px #25262410, 0 26px 50px -26px #00000066;
	cursor: pointer;
	transform: var(--tilt, none);
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
	will-change: transform;
}
.designs-track.is-live .design-card { transition: box-shadow 0.45s var(--ease); }
.design-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
@media (hover: hover) {
	.design-card:hover { box-shadow: 0 0 0 1px #25262418, 0 34px 60px -24px #00000080; }
}
.design-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.designs-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.designs-hud {
	min-width: 220px;
	text-align: center;
	font-size: var(--micro, 11px);
	letter-spacing: var(--micro-track, 0.14em);
	text-transform: uppercase;
	color: var(--micro-ink, var(--muted));
}
.designs-hud b { color: var(--ink); font-weight: 500; }
.designs-hud span { color: var(--ink); margin-left: 12px; }
.designs-hint {
	text-align: center;
	margin-top: 14px;
	font-size: 13px;
	color: var(--muted);
}
@media (max-width: 700px) {
	.designs-stage { --card-w: 250px; --card-h: 340px; padding-bottom: 70px; }
	.designs-track { gap: 16px; padding-top: 24px; padding-bottom: 36px; }
	.design-card { padding: 10px; border-radius: 12px; }
	.designs-hud { min-width: 0; }
	.designs-hud span { display: block; margin: 4px 0 0; }
}

/* Process */
.designs-process { border-top: 1px solid var(--line); }
.designs-process-head { max-width: 640px; }
.designs-process-head .eyebrow { color: var(--micro-ink, var(--muted)); margin-bottom: 26px; }
.designs-process-head h2 {
	font-size: clamp(34px, calc(3.8 * var(--vw)), 54px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.035em;
}
.designs-process-head h2 span { color: #7d8174; }
.designs-process-head p {
	font-size: 17px;
	line-height: 1.8;
	color: var(--muted);
	margin-top: 26px;
}
.designs-steps {
	list-style: none;
	padding: 0;
	margin: 56px 0 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.designs-steps li {
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px 28px;
	box-shadow: 0 1px 2px #00000008, 0 16px 34px -26px #00000040;
}
.designs-steps span { font-size: var(--micro, 11px); letter-spacing: 0.1em; color: var(--micro-ink, var(--muted)); }
.designs-steps h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; margin: 30px 0 8px; }
.designs-steps p { font-size: 14px; line-height: 1.7; color: var(--muted); }
@media (max-width: 800px) { .designs-steps { grid-template-columns: 1fr; } }

/* Viewer */
.design-viewer {
	width: min(920px, calc(calc(100 * var(--vw)) - 32px));
	max-height: calc(calc(100 * var(--vh)) - 32px);
	padding: 22px 24px 18px;
	border: 0;
	border-radius: 20px;
	background: var(--paper);
	color: var(--ink);
	box-shadow: 0 30px 80px -30px #00000080;
}
.design-viewer[open] { display: flex; flex-direction: column; animation: dialog-in 0.35s var(--ease); }
.design-viewer::backdrop { background: #1c1d1bcc; backdrop-filter: blur(6px); }
.design-viewer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.design-viewer-top h2 { font-size: 24px; font-weight: 400; letter-spacing: -0.02em; }
.design-viewer-top p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.design-viewer-body {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	min-height: 0;
	flex: 1;
}
.design-viewer-body img {
	justify-self: center;
	max-width: 100%;
	max-height: calc(calc(100 * var(--vh)) - 190px);
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 12px 34px -18px #00000066;
}
.design-viewer-count {
	text-align: center;
	font-size: var(--micro, 11px);
	letter-spacing: 0.14em;
	color: var(--micro-ink, var(--muted));
	margin-top: 12px;
}
@media (max-width: 600px) {
	.design-viewer { padding: 18px 14px 14px; }
	.design-viewer-body { grid-template-columns: 1fr 1fr; }
	.design-viewer-body img { grid-column: 1 / -1; grid-row: 1; max-height: calc(calc(100 * var(--vh)) - 230px); }
	.design-viewer-body [data-viewer-prev] { justify-self: end; }
}

/* =====================================================================
   Pricing page (2026-09-24): packages, comparison table (adapted from
   the "comparison-3" block), add-ons and FAQ & policies.
   ===================================================================== */
.pricing-hero { padding-bottom: 10px; }
.pricing-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pricing-jump a {
	font-size: 13px;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pricing-jump a:hover { background: var(--ink); color: var(--paper); }

/* Shared section head */
.compare-head { max-width: 640px; margin-bottom: 44px; }
.compare-head .eyebrow { color: var(--micro-ink, var(--muted)); margin-bottom: 22px; }
.compare-head h2 {
	font-size: clamp(34px, calc(3.8 * var(--vw)), 54px);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.035em;
}
.compare-head h2 span { color: #7d8174; }
.compare-head p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-top: 18px; }
.compare-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	margin-bottom: 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}
.compare-badge svg { width: 14px; height: 14px; }

/* Comparison table */
.compare { border-top: 0; }
.compare-wrap { position: relative; max-width: 1040px; }
.compare-pick {
	position: absolute;
	bottom: 100%;
	left: 64.5%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	z-index: 3;
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.compare-scroll {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--paper-light);
}
.compare-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	font-size: 14px;
}
.compare-table .c-feature { width: 34%; }
.compare-table th,
.compare-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
}
.compare-table tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); }
.compare-table td { color: var(--muted); font-weight: 500; }
.compare-table td.is-pick { color: var(--ink); }
.compare-table .is-pick { background: #25262408; }
.compare-table thead th {
	position: sticky;
	top: 100px;
	z-index: 2;
	background: var(--paper-light);
	padding: 18px 12px 16px;
	vertical-align: bottom;
}
.compare-table thead th:first-child { border-top-left-radius: 14px; }
.compare-table thead th:last-child { border-top-right-radius: 14px; }
.compare-table thead th.is-pick { background: #f3f3f1; }
.compare-table thead b { display: block; font-size: 14px; font-weight: 600; }
.compare-table thead strong { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0; }
.compare-table thead small { display: block; font-size: 12px; color: var(--muted); }
.compare-table thead .c-label { text-align: left; }
.compare-table thead .c-label span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.compare-section th {
	text-align: left !important;
	padding: 9px 16px !important;
	background: #eeeee8;
	font-size: 11px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
}
@media (hover: hover) {
	.compare-table tbody tr:not(.compare-section):hover > * { background: #25262406; }
	.compare-table tbody tr:not(.compare-section):hover > .is-pick { background: #2526240f; }
}
/* Check / cross marks */
.compare-table td[data-v]::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	border-radius: 5px;
	background: #e7e7e2 center / 14px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2374756f' d='m12 10.6 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z'/%3E%3C/svg%3E");
}
.compare-table td[data-v="yes"]::before {
	background-color: #5a5b56;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m10 15.17 9.19-9.19 1.42 1.41L10 18 3.64 11.64l1.41-1.41z'/%3E%3C/svg%3E");
}
.compare-table td.is-pick[data-v="yes"]::before { background-color: var(--ink); }
.compare-table td[data-v="yes"]::after { content: 'Included'; }
.compare-table td[data-v="no"]::after { content: 'Not included'; }
.compare-table td[data-v]::after {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.compare-table tfoot td { border-bottom: 0; padding: 16px 12px; }
.compare-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 40px;
	border-radius: 0;
	background: #e9e8e3;
	color: var(--ink);
	font-size: 13px;
	font-weight: 500;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.compare-btn:hover { background: #dedcd6; }
.compare-btn-pick { background: var(--ink); color: var(--paper); }
.compare-btn-pick:hover { background: #000; }
.compare-note { max-width: 860px; margin-top: 32px; color: var(--muted); }
.compare-custom { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-light); }
.compare-custom .compare-custom-title { margin: 0 0 10px; color: var(--ink); font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
.compare-custom p { max-width: 54ch; margin: 0; font-size: 15px; line-height: 1.7; }
.compare-custom .compare-note-link { display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 500; }
.compare-travel { max-width: 70ch; margin: 20px 0 0; font-size: 13px; line-height: 1.7; }
@media (max-width: 480px) {
	.compare-custom { padding: 22px; }
}

@media (max-width: 760px) {
	.compare-scroll { overflow-x: auto; }
	.compare-table { min-width: 640px; }
	.compare-table thead th { position: static; }
	.compare-table tbody th[scope="row"],
	.compare-table .c-label,
	.compare-table tfoot td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--paper-light);
		box-shadow: 1px 0 0 var(--line);
	}
	.compare-pick { left: auto; right: 16px; transform: none; }
}

/* Add-ons */
.addons { border-top: 1px solid var(--line); }
.addons-builder {
	max-width: 860px;
	margin-top: 40px;
	padding: clamp(32px, calc(5 * var(--vw)), 52px) clamp(22px, calc(4 * var(--vw)), 44px);
	border: 1px solid #dedfd7;
	border-radius: 24px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(38, 41, 35, 0.05);
	background: #fffefa;
}
.addons-builder-kicker { display: block; margin-bottom: 18px; color: #625368; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; }
.addons-builder h3 { margin: 0 0 20px; font-size: clamp(34px, calc(5 * var(--vw)), 52px); font-weight: 500; line-height: 1.08; letter-spacing: -0.045em; }
.addons-builder > p { margin-left: auto; margin-right: auto; max-width: 48ch; color: var(--muted); font-size: 16px; line-height: 1.75; }
.addons-builder-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px; padding: 0; margin: 26px 0 30px; list-style: none; }
.addons-builder-steps li { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); background: none; border: none; border-radius: 0; padding: 0; }
.addons-builder-steps span { display: block; width: auto; height: auto; font-size: 28px; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--ink); background: none; border: none; border-radius: 0; box-shadow: none; }
.addons-builder-cta {
	--pearl-bg: #080808;
	position: relative;
	display: inline-block;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background-color: var(--pearl-bg);
	color: rgba(255, 255, 255, 0.82);
	font: inherit;
	cursor: pointer;
	outline: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow:
		inset 0 0.3rem 0.9rem rgba(255, 255, 255, 0.3),
		inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
		inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.5),
		0 1.4rem 1.8rem -0.6rem rgba(0, 0, 0, 0.28),
		0 0.7rem 0.7rem -0.45rem rgba(0, 0, 0, 0.7);
}
.addons-builder-cta .pearl-wrap {
	position: relative;
	display: block;
	padding: 17px 26px;
	border-radius: inherit;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}
.addons-builder-cta .pearl-text {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	transform: translateY(2%);
	transition: transform 0.2s ease;
	-webkit-mask-image: linear-gradient(to bottom, #fff 45%, rgba(255, 255, 255, 0.55));
	mask-image: linear-gradient(to bottom, #fff 45%, rgba(255, 255, 255, 0.55));
}
.addons-builder-cta .pearl-wrap::before,
.addons-builder-cta .pearl-wrap::after {
	content: '';
	position: absolute;
	pointer-events: none;
	transition: all 0.3s ease;
}
.addons-builder-cta .pearl-wrap::before {
	left: -15%;
	right: -15%;
	bottom: 25%;
	top: -100%;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
}
.addons-builder-cta .pearl-wrap::after {
	left: 6%;
	right: 6%;
	top: 12%;
	bottom: 40%;
	border-radius: 22px 22px 0 0;
	box-shadow: inset 0 10px 8px -10px rgba(255, 255, 255, 0.8);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
}
.addons-builder-cta:hover,
.addons-builder-cta:focus-visible {
	box-shadow:
		inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.4),
		inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.7),
		inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.7),
		0 1.4rem 1.8rem -0.6rem rgba(0, 0, 0, 0.28),
		0 0.7rem 0.7rem -0.45rem rgba(0, 0, 0, 0.7);
}
@media (hover: hover) and (pointer: fine) {
.addons-builder-cta:hover .pearl-wrap::before {
	transform: translateY(-5%);
}
}
@media (hover: hover) and (pointer: fine) {
.addons-builder-cta:hover .pearl-wrap::after {
	opacity: 0.4;
	transform: translateY(5%);
}
}
@media (hover: hover) and (pointer: fine) {
.addons-builder-cta:hover .pearl-text {
	transform: translateY(-4%);
}
}
.addons-builder-cta:active {
	transform: translateY(3px);
	box-shadow:
		inset 0 0.3rem 0.5rem rgba(255, 255, 255, 0.5),
		inset 0 -0.1rem 0.3rem rgba(0, 0, 0, 0.8),
		inset 0 -0.4rem 0.9rem rgba(255, 255, 255, 0.4),
		0 0.8rem 1.2rem -0.6rem rgba(0, 0, 0, 0.3),
		0 0.4rem 0.5rem -0.4rem rgba(0, 0, 0, 0.8);
}
.addons-builder-cta:focus-visible {
	outline: 2px solid #777b71;
	outline-offset: 4px;
}
.addons-builder .addons-builder-note { margin-top: 24px; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) {
	.addons-builder-steps { gap: 14px; }
	.addons-builder-cta { width: 100%; }
}
.addon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}
.addon-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper-light);
	border-radius: 18px;
	padding: 26px 24px 24px;
	box-shadow: 0 1px 2px #00000008, 0 16px 34px -26px #00000040;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
@media (hover: hover) {
	@media (hover: hover) and (pointer: fine) {
.addon-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px #00000008, 0 24px 40px -24px #00000055; }
}
}
.addon-card h3 { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 10px; padding-right: 80px; }
.addon-card p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.addon-price {
	margin-top: auto;
	padding-top: 22px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.addon-price strong { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.addon-price small { font-size: 12px; color: var(--muted); text-align: right; }
.addon-tag {
	position: absolute;
	top: 22px;
	right: 20px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ink);
	color: var(--paper);
	font-size: 11px;
	font-weight: 600;
}
.upsell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 30px;
	padding: 28px 30px;
	border-radius: 18px;
	border: 1px dashed #25262455;
}
.upsell h3 { font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.upsell p { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 6px; max-width: 560px; }
.upsell .button { flex-shrink: 0; }
@media (max-width: 700px) {
	.upsell { flex-direction: column; align-items: flex-start; padding: 24px 22px; }
}

/* Policies */
.policies { border-top: 0; }
.policy-groups { display: grid; gap: 44px; }
.policy-group > h3 {
	font-size: var(--micro, 11px);
	letter-spacing: var(--micro-track, 0.14em);
	text-transform: uppercase;
	font-weight: 500;
	color: var(--micro-ink, var(--muted));
	margin-bottom: 8px;
}
.packages-compare-link {
    display: block;
    width: max-content;
    margin: 28px auto 0;
}
/* Add-ons: 3 across, then 2 wider cards */
.addon-grid { grid-template-columns: repeat(6, 1fr); }
.addon-card { grid-column: span 2; }
.addon-card:nth-child(4), .addon-card:nth-child(5) { grid-column: span 3; }
.addon-price strong { white-space: nowrap; }
@media (max-width: 1000px) {
	.addon-grid { grid-template-columns: repeat(2, 1fr); }
	.addon-card, .addon-card:nth-child(4) { grid-column: span 1; }
	.addon-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.addon-grid { grid-template-columns: 1fr; }
	.addon-card:nth-child(5) { grid-column: auto; }
}
.compare-table td[data-v] { position: relative; }
.compare-scroll { position: relative; }
@media (max-width: 760px) {
	.compare-table .c-label { top: auto; }
	.compare-pick { display: none; }
	.compare-table thead th.is-pick::before {
		content: 'Mochi pick';
		display: inline-block;
		margin-bottom: 6px;
		padding: 2px 9px;
		border-radius: 999px;
		background: var(--ink);
		color: var(--paper);
		font-size: 10px;
		font-weight: 600;
	}
}
.compare-section th span { position: sticky; left: 16px; }
@media (max-width: 760px) {
	.compare-table { min-width: 580px; }
	.compare-table .c-feature { width: 150px; }
	.compare-table th, .compare-table td { padding: 11px 12px; }
	.compare-table tbody th[scope="row"] { font-size: 13px; }
}

/* =====================================================================
   About — stack & spread hero (2026-09-24). Adapted from the
   Hyperiux "stack-spread" component. JS drives --p (0 stacked → 1
   spread) from scroll; without JS or with reduced motion the photos
   sit spread out and the title is simply visible.
   ===================================================================== */
.stack-spread {
	--p: 1;
	--hh: 100px; /* header height, set by JS */
	position: relative;
	background: var(--paper);
}
.stack-stage {
	position: relative;
	height: calc(calc(100 * var(--vh)) - var(--hh));
	height: calc(calc(100 * var(--svh)) - var(--hh));
	min-height: 520px;
	overflow: hidden;
}
.js-stack .stack-spread { height: calc(350 * var(--vh)); }
.js-stack .stack-stage { position: sticky; top: var(--hh); }
.stack-copy {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	text-align: center;
	pointer-events: none;
	opacity: var(--copy, 1);
	transform: scale(var(--copy-s, 1));
}
.stack-title {
	font-size: clamp(44px, calc(6 * var(--vw)), 96px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.045em;
}
.stack-title span { opacity: 0.55; }
.stack-sub {
	margin-top: 18px;
	font-size: clamp(15px, calc(1.15 * var(--vw)), 18px);
	color: var(--muted);
}
.stack-cards { position: absolute; inset: 0; z-index: 10; }
.stack-card {
	/* sizes: --w in vw, --h in % of the stage; positions likewise */
	--x: calc(var(--sx) + (var(--ex, var(--tx)) - var(--sx)) * var(--p));
	--y: calc(var(--sy) + (var(--ey, var(--ty)) - var(--sy)) * var(--p));
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--cw, var(--w)) * calc(1 * var(--vw)));
	height: calc(var(--ch, var(--h)) * 1%);
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
	background: var(--sage);
	box-shadow: 0 18px 40px -22px #00000059;
	translate: calc(-50% + var(--x) * calc(1 * var(--vw)) + var(--px, 0px)) calc(-50% + var(--y) * var(--sh, calc(1 * var(--vh))) + var(--py, 0px));
	rotate: calc(var(--sr) * (1 - var(--p)) * 1deg);
	scale: calc(var(--ss, .82) + (var(--rs, var(--ts)) - var(--ss, .82)) * var(--p));
	will-change: translate, rotate, scale;
}
.stack-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}
.stack-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(3 * var(--vh));
	z-index: 20;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: var(--hint, 0);
	pointer-events: none;
}
.js-stack .stack-hint { display: flex; }
.stack-hint svg { animation: stack-bounce 1s infinite; }
@keyframes stack-bounce { 0%, 100% { transform: translateY(-25%); } 50% { transform: none; } }

/* Touch devices: a tidy two-column grid instead of the scatter. */
@media (pointer: coarse), (max-width: 760px) {
	.stack-card {
		--ex: calc(var(--mx) * 22);
		--ey: var(--my);
		--cw: 40;
		--ch: 20;
		--rs: .72;
		border-radius: calc(4 * var(--vw));
	}
}
/* Leave room so the next section doesn't butt up against the photos */
.about-story-page .stack-spread + .story { margin-top: 0; }

/* Comparison v2 (2026-09-24): two packages, card-matching Mochi pick badge, mobile fit */
.compare-wrap { max-width: 860px; }
.compare-table .c-feature { width: 40%; }
.compare-table thead th { padding-top: 40px; }
.compare-award.reel-award {
	top: -22px;
	right: auto;
	left: 85%;
	translate: -50% 0;
	z-index: 4;
}
.compare-note-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
	.compare-scroll { overflow: visible; }
	.compare-table { min-width: 0; font-size: 13px; }
	.compare-table .c-feature { width: 40%; }
	.compare-table th,
	.compare-table td { padding: 11px 8px; }
	.compare-table tbody th[scope="row"] { padding-left: 14px; font-size: 13px; line-height: 1.35; }
	.compare-table tbody th[scope="row"],
	.compare-table .c-label,
	.compare-table tfoot td:first-child { position: static; box-shadow: none; }
	.compare-table thead th { padding: 38px 6px 14px; }
	.compare-table thead .c-label { padding-left: 14px; }
	.compare-table thead .c-label span { font-size: 10px; }
	.compare-table thead b { font-size: 13px; }
	.compare-table thead strong { font-size: 19px; }
	.compare-table thead small { font-size: 11px; line-height: 1.35; }
	.compare-table thead th.is-pick::before { content: none; }
	.compare-section th { padding: 8px 14px !important; }
	.compare-section th span { position: static; }
	.compare-table tfoot td { padding: 14px 6px; }
	.compare-btn { min-height: 38px; font-size: 12px; }
	.compare-award.reel-award { left: auto; right: -4px; translate: none; width: 146px; }
	.compare-award .reel-award-face { min-height: 38px; padding: 4px 10px 4px 6px; }
	.compare-award svg { width: 24px; height: 24px; }
	.compare-award strong { font-size: 12px; }
}

/* =====================================================================
   Neumorphic buttons, site-wide (2026-09-24).
   Soft raised surfaces in the page color; pressed-in when clicked.
   Deliberately excluded: "Book the booth" (.booking-gloss) and
   "Meet the Lab" (.lab-rainbow). The Lab page keeps its own tones.
   ===================================================================== */
:root {
	--nm-bg: #f3f2ee;
	--nm-dark: #d6d4cc;
	--nm-light: #ffffff;
	--nm-raised: 6px 6px 14px var(--nm-dark), -6px -6px 14px var(--nm-light);
	--nm-raised-hover: 8px 8px 18px var(--nm-dark), -8px -8px 18px var(--nm-light);
	--nm-pressed: inset 3px 3px 7px var(--nm-dark), inset -3px -3px 7px var(--nm-light);
}
body[data-page="lab"] {
	--nm-bg: var(--neu-bg);
	--nm-dark: var(--neu-dark);
}
body :is(.button, .compare-btn, .icon-button, .pricing-jump a):not(.booking-gloss):not(.lab-rainbow) {
	background: var(--nm-bg) !important;
	color: var(--ink) !important;
	border: 1px solid #ffffff99 !important;
	box-shadow: var(--nm-raised) !important;
	transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease) !important;
}
@media (hover: hover) and (pointer: fine) {
body :is(.button, .compare-btn, .icon-button, .pricing-jump a):not(.booking-gloss):not(.lab-rainbow):hover {
	transform: translateY(-1px);
	box-shadow: var(--nm-raised-hover) !important;
}
}
body :is(.button, .compare-btn, .icon-button, .pricing-jump a):not(.booking-gloss):not(.lab-rainbow):active,
body .icon-button[aria-pressed="true"] {
	transform: none;
	box-shadow: var(--nm-pressed) !important;
}
body :is(.button, .compare-btn, .icon-button, .pricing-jump a):not(.booking-gloss):not(.lab-rainbow):focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}
body :is(.button, .compare-btn, .icon-button):disabled {
	box-shadow: var(--nm-pressed) !important;
	opacity: 0.55;
}
/* The Reel's button in the comparison stays the stronger choice */
body .compare-btn-pick { font-weight: 600; }
/* "View packages" hero button: keep its dark fill-on-hover layer */
body .booking-fill > .booking-fill-label { color: var(--ink); }
@media (hover: none) {
	body :is(.button, .compare-btn, .icon-button, .pricing-jump a):not(.booking-gloss):not(.lab-rainbow):hover { transform: none; }
}
/* Googly eyes stay visible on the light neumorphic surface */
body .googly-button .googly-eye { box-shadow: inset 1px 1px 3px var(--nm-dark), 0 0 0 1px #25262426; }

/* =====================================================================
   Photo booth on phones (2026-09-24): full-screen, one column, big
   viewfinder, readable controls. Landscape phones get a compact header
   so the camera fits on screen.
   ===================================================================== */
@media (max-width: 760px) {
	#booth-dialog.booth-dialog {
		width: calc(100 * var(--vw));
		max-width: calc(100 * var(--vw));
		height: calc(100 * var(--vh));
		height: calc(100 * var(--dvh));
		max-height: calc(100 * var(--dvh));
		margin: 0;
		border: 0;
		border-radius: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	#booth-dialog .booth-top {
		position: sticky;
		top: 0;
		z-index: 3;
		margin: 0;
		padding: max(16px, env(safe-area-inset-top)) 18px 14px;
	}
	#booth-dialog .booth-top .eyebrow { font-size: 10px; }
	#booth-dialog .booth-top h2 { font-size: 26px; letter-spacing: -0.04em; }
	#booth-dialog .booth-top .icon-button { width: 42px; height: 42px; min-width: 42px; }
	#booth-dialog .booth-dialog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 16px 16px max(24px, env(safe-area-inset-bottom));
	}
	#booth-dialog .viewfinder {
		width: 100%;
		max-height: none;
		aspect-ratio: 4 / 3;
		border-width: 5px;
		box-shadow: 0 5px 0 #252a25;
	}
	#booth-dialog .camera-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin-top: 22px;
	}
	#booth-dialog .camera-actions .button {
		width: 100%;
		min-height: 52px;
		justify-content: center;
		font-size: 15px;
	}
	#booth-dialog .camera-actions .text-button { min-height: 44px; font-size: 14px; }
	#booth-dialog .booth-alternatives {
		justify-content: center;
		flex-wrap: wrap;
		gap: 6px 12px;
		margin-top: 14px;
		font-size: 14px;
	}
	#booth-dialog .booth-alternatives .text-button { font-size: 14px; min-height: 44px; }
	#booth-dialog .privacy-note,
	#booth-dialog .status-message { text-align: center; font-size: 13px; line-height: 1.5; }
	#booth-dialog .strip-workspace {
		min-height: 0;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 22px;
		padding: 20px 18px;
	}
	#booth-dialog .canvas-wrap { width: 112px; min-width: 96px; }
	#booth-dialog .strip-options { max-width: none; flex: 1; }
	#booth-dialog .strip-options > .eyebrow { font-size: 11px; }
	#booth-dialog .swatch { width: 32px; height: 32px; min-width: 32px; }
	#booth-dialog .mono-toggle { font-size: 14px; min-height: 44px; display: flex; align-items: center; gap: 8px; }
	#booth-dialog .strip-options > .button {
		width: 100%;
		justify-content: center;
		font-size: 14px;
		min-height: 48px;
		margin-top: 12px;
	}
}
@media (max-height: 520px) and (orientation: landscape) {
	#booth-dialog.booth-dialog {
		width: calc(100 * var(--vw));
		max-width: calc(100 * var(--vw));
		height: calc(100 * var(--dvh));
		max-height: calc(100 * var(--dvh));
		margin: 0;
		border: 0;
		border-radius: 0;
		overflow-y: auto;
	}
	#booth-dialog .booth-top {
		position: sticky;
		top: 0;
		z-index: 3;
		padding: 10px max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left));
	}
	#booth-dialog .booth-top .eyebrow { display: none; }
	#booth-dialog .booth-top h2 { font-size: 20px; }
	#booth-dialog .booth-top .icon-button { width: 38px; height: 38px; min-width: 38px; }
	#booth-dialog .booth-dialog-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 18px;
		padding: 14px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left));
	}
	#booth-dialog .viewfinder {
		width: min(100%, calc((calc(100 * var(--dvh)) - 150px) * 4 / 3));
		margin: 0 auto;
		border-width: 4px;
	}
	#booth-dialog .camera-actions { margin-top: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
	#booth-dialog .camera-actions .button { min-height: 44px; width: auto; padding-left: 26px; padding-right: 26px; }
	#booth-dialog .strip-workspace { min-height: 0; padding: 16px; }
	#booth-dialog .canvas-wrap { width: 96px; min-width: 80px; }
}

/* Mobile: buttons keep their natural size instead of stretching full width (2026-09-24).
   "Book the booth" and "Meet the Lab" are left as they were. */
@media (max-width: 760px) {
	body :is(.button, .lab-neu-button):not(.booking-gloss):not(.lab-rainbow):not(.booking-fill) {
		width: auto !important;
		max-width: 100%;
		flex: 0 0 auto;
		align-self: flex-start;
		justify-self: start;
		min-height: 50px;
		padding-left: 28px;
		padding-right: 28px;
	}
	body .package-card > .button,
	body #booth-dialog .camera-actions .button,
	body #booth-dialog .strip-options > .button { align-self: center; justify-self: center; }
	body .package-card > .button { margin-left: auto; margin-right: auto; display: flex; }
	body #booth-dialog .camera-actions { align-items: center; }
}
@media (max-width: 760px) {
	body .experience-more .lab-rainbow {
		width: auto !important;
		max-width: 100%;
		min-height: 50px;
		padding-left: 28px;
		padding-right: 28px;
	}
}
@media (max-width: 760px) {
	body .experience-more { text-align: center; }
	body .experience-more .lab-rainbow { display: inline-flex; margin-left: auto; margin-right: auto; }
}

/* About hero on touch screens: keep each photo's desktop shape (2026-09-24).
   --ar reproduces the desktop card proportions (w vw × h% of the stage at 1440×800). */
@media (pointer: coarse), (max-width: 760px) {
	.stack-card {
		--ar: calc(var(--w) * 1.8 / var(--h));
		--rs: 1;
		width: min(calc(38 * var(--vw)), calc(var(--ar) * calc(30 * var(--vw))));
		height: auto;
		aspect-ratio: var(--ar);
		border-radius: 10px;
	}
}

/* About hero: photos always keep their desktop proportions, whatever the window height (2026-09-24). */
.stack-card {
	--ar: calc(var(--w) * 1.8 / var(--h));
	height: auto;
	aspect-ratio: var(--ar);
}

/* Availability calendar on phones: same size as on desktop instead of full width (2026-09-24) */
@media (max-width: 760px) {
	body .availability-action { width: min(100%, 300px) !important; align-items: stretch; }
	body .availability-calendar { width: 100%; padding: 18px; }
	body .calendar-weekdays, body .calendar-grid { gap: 4px; }
	body .calendar-day, body .calendar-nav { width: 32px; height: 32px; max-width: none; aspect-ratio: auto; font-size: 13px; }
	body .availability-action > :is(a, button).button:not(.booking-gloss):not(.lab-rainbow):not(.booking-fill) { align-self: center; }
	body .availability-action > span { text-align: center; }
}
@media (max-width: 760px) {
	body .availability-section { align-items: center !important; text-align: center; }
	body .availability-section .availability-copy { margin-left: auto; margin-right: auto; }
	body .availability-action { margin-left: auto; margin-right: auto; }
}

/* No glow on buttons that sit on dark sections (2026-09-24) */
body .availability-action > :is(a, button).button:not(.booking-gloss):not(.lab-rainbow),
body :is(a, button).button.button-light[data-open-booth]:not(.booking-gloss):not(.lab-rainbow) {
	box-shadow: none !important;
	border-color: transparent !important;
}
body .availability-action > :is(a, button).button:not(.booking-gloss):not(.lab-rainbow):active,
body :is(a, button).button.button-light[data-open-booth]:not(.booking-gloss):not(.lab-rainbow):active {
	box-shadow: inset 2px 2px 5px #00000026 !important;
}

/* Mobile header: menu button on the left, "Book the booth" on the right (2026-09-24) */
.nav-actions > .menu-toggle { order: -1; margin-right: 4px !important; }

/* More noticeable menu button (2026-09-24): soft raised circle, bolder lines */
.nav-actions > .menu-toggle {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--nm-bg, #f3f2ee);
	box-shadow: 4px 4px 10px var(--nm-dark, #d6d4cc), -4px -4px 10px var(--nm-light, #fff);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	transition: box-shadow 0.3s var(--ease);
}
@media (max-width: 900px) { .nav-actions > .menu-toggle { display: inline-flex; } }
.nav-actions > .menu-toggle span {
	width: 18px;
	height: 2px;
	margin: 0;
	border-radius: 2px;
}
.nav-actions > .menu-toggle:active,
.nav-actions > .menu-toggle[aria-expanded='true'] {
	box-shadow: inset 3px 3px 7px var(--nm-dark, #d6d4cc), inset -3px -3px 7px var(--nm-light, #fff);
}
.nav-actions > .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-actions > .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-actions > .menu-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Menu button + panel animation (2026-09-24) */
.nav-actions > .menu-toggle span {
	transition: transform 0.45s cubic-bezier(0.68, -0.6, 0.32, 1.6), width 0.3s var(--ease);
}
.nav-actions > .menu-toggle[aria-expanded='true'] span { width: 20px; }
.nav-actions > .menu-toggle.is-popping { animation: menu-pop 0.45s var(--ease); }
@keyframes menu-pop {
	0% { transform: scale(1) rotate(0); }
	30% { transform: scale(0.86) rotate(-8deg); }
	65% { transform: scale(1.08) rotate(4deg); }
	100% { transform: scale(1) rotate(0); }
}
.mobile-nav:not([hidden]) { animation: menu-panel-in 0.38s var(--ease) both; transform-origin: top center; }
.mobile-nav.is-closing { animation: menu-panel-out 0.26s var(--ease) both; }
.mobile-nav:not([hidden]):not(.is-closing) > a { animation: menu-link-in 0.45s var(--ease) both; }
.mobile-nav > a:nth-child(1) { animation-delay: 0.04s !important; }
.mobile-nav > a:nth-child(2) { animation-delay: 0.08s !important; }
.mobile-nav > a:nth-child(3) { animation-delay: 0.12s !important; }
.mobile-nav > a:nth-child(4) { animation-delay: 0.16s !important; }
.mobile-nav > a:nth-child(5) { animation-delay: 0.2s !important; }
.mobile-nav > a:nth-child(6) { animation-delay: 0.24s !important; }
.mobile-nav > a:nth-child(7) { animation-delay: 0.28s !important; }
.mobile-nav > a:nth-child(8) { animation-delay: 0.32s !important; }
@keyframes menu-panel-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -40px 0); } }
@keyframes menu-panel-out { from { clip-path: inset(0 0 -40px 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes menu-link-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.nav-actions > .menu-toggle span,
	.nav-actions > .menu-toggle.is-popping,
	.mobile-nav:not([hidden]),
	.mobile-nav:not([hidden]) > a { animation: none !important; transition: none !important; }
}

/* Lab keepsakes: three across on desktop now that photo strips joined (2026-09-24) */
@media (min-width: 901px) { .lab-keepsake-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 601px) and (max-width: 900px) { .lab-keepsake-grid > figure:first-child { grid-column: 1 / -1; } .lab-keepsake-grid > figure:first-child img { aspect-ratio: 16 / 10; } }

/* =====================================================================
   Photo booth: iPhone-camera style (2026-09-24).
   Black camera UI, portrait viewfinder, mode row, round shutter, last-
   strip thumbnail, and an edit sheet for frame color / B&W / download.
   Full-screen on phones; a phone-sized window on larger screens.
   ===================================================================== */
#booth-dialog.booth-dialog.ios-cam {
	--cam-yellow: #ffd60a;
	--cam-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, 'Helvetica Neue', Arial, sans-serif;
	width: min(430px, calc(calc(100 * var(--vw)) - 32px));
	max-width: none;
	height: min(900px, calc(calc(100 * var(--dvh)) - 32px));
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 38px;
	background: #000;
	color: #fff;
	font-family: var(--cam-font);
	overflow: hidden;
	box-shadow: 0 0 0 10px #1c1c1e, 0 40px 100px #0009;
}
#booth-dialog.ios-cam[open] { display: flex; flex-direction: column; }
#booth-dialog.ios-cam::backdrop { background: #0b0b0ccc; backdrop-filter: blur(8px); }
#booth-dialog.ios-cam button { font-family: inherit; }

/* Top bar */
#booth-dialog.ios-cam .cam-top {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	gap: 8px;
	padding: max(14px, env(safe-area-inset-top)) 16px 10px;
}
#booth-dialog.ios-cam .cam-title {
	margin: 0;
	text-align: center;
	font-family: var(--cam-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: #fff;
}
#booth-dialog.ios-cam .cam-badge {
	justify-self: end;
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--cam-yellow);
	color: #000;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
#booth-dialog.ios-cam .cam-round {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff1f;
	color: #fff;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
#booth-dialog.ios-cam .cam-round:hover { background: #ffffff33; }
@media (hover: hover) and (pointer: fine) {
#booth-dialog.ios-cam .cam-round:active { transform: scale(0.92); }
}
#booth-dialog.ios-cam .cam-round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Viewfinder */
#booth-dialog.ios-cam .cam-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#booth-dialog.ios-cam .viewfinder {
	position: relative;
	width: 100%;
	max-height: 100%;
	aspect-ratio: 3 / 4;
	margin: 0 auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #111;
	overflow: hidden;
}
#booth-dialog.ios-cam .viewfinder::after { display: none; }
#booth-dialog.ios-cam .viewfinder > img,
#booth-dialog.ios-cam .viewfinder > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
#booth-dialog.ios-cam .viewfinder > img { filter: brightness(0.55) saturate(0.9); }
#booth-dialog.ios-cam .cam-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to right, transparent calc(33.33% - 0.5px), #ffffff38 calc(33.33% - 0.5px), #ffffff38 calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), #ffffff38 calc(66.66% - 0.5px), #ffffff38 calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
		linear-gradient(to bottom, transparent calc(33.33% - 0.5px), #ffffff38 calc(33.33% - 0.5px), #ffffff38 calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), #ffffff38 calc(66.66% - 0.5px), #ffffff38 calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
#booth-dialog.ios-cam .cam-hint {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	padding: 8px 14px;
	border-radius: 999px;
	background: #000000a6;
	backdrop-filter: blur(10px);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
}
#booth-dialog.ios-cam.cam-live .cam-hint { display: none; }
#booth-dialog.ios-cam #countdown {
	font-family: var(--cam-font);
	font-size: 120px;
	font-weight: 200;
	color: #fff;
	text-shadow: 0 2px 20px #0008;
	pointer-events: none;
}
#booth-dialog.ios-cam .cam-status {
	min-height: 18px;
	margin: 10px 20px 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.45;
	color: var(--cam-yellow);
}
#booth-dialog.ios-cam .cam-status.error { color: #ff6961; }
#booth-dialog.ios-cam .cam-status:empty { visibility: hidden; }

/* Mode row */
#booth-dialog.ios-cam .cam-modes {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 26px;
	padding: 12px 16px 6px;
}
#booth-dialog.ios-cam .cam-mode {
	position: relative;
	padding: 6px 0;
	border: 0;
	background: none;
	color: #ffffffb3;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	outline-offset: 4px;
}
#booth-dialog.ios-cam .cam-mode:hover { color: #fff; }
#booth-dialog.ios-cam .cam-mode.is-active { color: var(--cam-yellow); cursor: default; }
#booth-dialog.ios-cam .cam-mode:disabled { opacity: 0.4; cursor: default; }
#booth-dialog.ios-cam .upload-label:focus-within { outline: 2px solid var(--cam-yellow); }

/* Controls row */
#booth-dialog.ios-cam .cam-controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 10px 28px 6px;
}
#booth-dialog.ios-cam .cam-thumb {
	justify-self: start;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #1c1c1e;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s;
}
@media (hover: hover) and (pointer: fine) {
#booth-dialog.ios-cam .cam-thumb:active { transform: scale(0.94); }
}
#booth-dialog.ios-cam .cam-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
#booth-dialog.ios-cam .cam-thumb img:not([src]) { visibility: hidden; }
#booth-dialog.ios-cam .cam-thumb.is-new { animation: cam-thumb-pop 0.5s var(--ease); }
@keyframes cam-thumb-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: none; } }
#booth-dialog.ios-cam .cam-shutter-wrap { display: grid; place-items: center; }
#booth-dialog.ios-cam .cam-shutter {
	position: relative;
	width: 76px;
	height: 76px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 0;
	color: transparent;
	cursor: pointer;
	box-shadow: inset 0 0 0 4px #fff;
}
#booth-dialog.ios-cam .cam-shutter::after {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s, background 0.2s;
}
@media (hover: hover) and (pointer: fine) {
#booth-dialog.ios-cam .cam-shutter:active::after { transform: scale(0.88); }
}
#booth-dialog.ios-cam .cam-shutter:focus-visible { outline: 2px solid var(--cam-yellow); outline-offset: 4px; }
#booth-dialog.ios-cam .cam-shutter-start::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: center / 28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}
#booth-dialog.ios-cam .cam-shutter:disabled { cursor: default; }
#booth-dialog.ios-cam .cam-shutter:disabled::after { animation: cam-busy 1.1s ease-in-out infinite; }
#booth-dialog.ios-cam #capture:disabled::after { background: #ff3b30; transform: scale(0.55); border-radius: 8px; animation: none; }
@keyframes cam-busy { 50% { transform: scale(0.8); opacity: 0.7; } }
#booth-dialog.ios-cam .cam-off {
	justify-self: end;
	width: 46px;
	height: 46px;
	font-size: 0;
	background: #ffffff1f center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
#booth-dialog.ios-cam .cam-off:not([hidden]) + .cam-spacer { display: none; }
#booth-dialog.ios-cam .cam-controls > .cam-spacer { justify-self: end; width: 46px; }
#booth-dialog.ios-cam .cam-privacy {
	margin: 4px 0 max(14px, env(safe-area-inset-bottom));
	text-align: center;
	font-size: 11px;
	color: #ffffff73;
}

/* Strip sheet (edit view) */
#booth-dialog.ios-cam .cam-sheet {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	background: #000;
	animation: cam-sheet-in 0.35s var(--ease);
}
#booth-dialog.ios-cam .cam-sheet[hidden] { display: none; }
@keyframes cam-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
#booth-dialog.ios-cam .cam-sheet-top {
	display: grid;
	grid-template-columns: 64px 1fr 64px;
	align-items: center;
	padding: max(16px, env(safe-area-inset-top)) 16px 10px;
}
#booth-dialog.ios-cam .cam-text-btn {
	justify-self: start;
	padding: 8px 0;
	border: 0;
	background: none;
	color: var(--cam-yellow);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
#booth-dialog.ios-cam .cam-sheet-strip {
	position: relative;
	flex: 1;
	min-height: 0;
}
#booth-dialog.ios-cam .canvas-wrap {
	position: absolute;
	inset: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	height: auto;
	transform: none;
	background: none;
	box-shadow: none;
}
#booth-dialog.ios-cam .canvas-wrap canvas {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
	box-shadow: 0 20px 50px #0000008c;
}
#booth-dialog.ios-cam .cam-sheet-tools {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 22px;
	padding: 14px 16px 6px;
}
#booth-dialog.ios-cam .swatches { display: flex; gap: 12px; margin: 0; }
#booth-dialog.ios-cam .swatch {
	width: 34px;
	height: 34px;
	min-width: 34px;
	border: 2px solid #ffffff4d;
	border-radius: 50%;
	cursor: pointer;
}
#booth-dialog.ios-cam .swatch[aria-pressed='true'] { border-color: var(--cam-yellow); box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--cam-yellow); }
#booth-dialog.ios-cam .cam-bw {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
#booth-dialog.ios-cam .cam-bw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#booth-dialog.ios-cam .cam-bw span {
	padding: 8px 14px;
	border-radius: 999px;
	background: #ffffff1f;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background 0.2s, color 0.2s;
}
#booth-dialog.ios-cam .cam-bw input:checked + span { background: var(--cam-yellow); color: #000; }
#booth-dialog.ios-cam .cam-bw input:focus-visible + span { outline: 2px solid var(--cam-yellow); outline-offset: 3px; }
#booth-dialog.ios-cam .cam-keep {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 50px;
	margin: 12px 20px max(18px, env(safe-area-inset-bottom));
	border-radius: 14px;
	background: #fff;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
#booth-dialog.ios-cam .cam-keep[aria-disabled='true'] { opacity: 0.5; pointer-events: none; }

/* Phones: full screen, no frame */
@media (max-width: 600px), (max-height: 700px) {
	#booth-dialog.booth-dialog.ios-cam {
		width: calc(100 * var(--vw));
		height: calc(100 * var(--vh));
		height: calc(100 * var(--dvh));
		border-radius: 0;
		box-shadow: none;
		overflow: hidden;
	}
}
/* Landscape phones: viewfinder beside the controls */
@media (max-height: 500px) and (orientation: landscape) {
	#booth-dialog.ios-cam[open] { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto; }
	#booth-dialog.ios-cam .cam-top { grid-column: 1 / -1; padding-top: 8px; padding-bottom: 6px; }
	#booth-dialog.ios-cam .cam-stage { grid-row: 2 / 5; }
	#booth-dialog.ios-cam .viewfinder { height: 100%; width: auto; aspect-ratio: 4 / 3; }
	#booth-dialog.ios-cam .cam-status { display: none; }
	#booth-dialog.ios-cam .cam-modes { grid-column: 2; grid-row: 2; flex-direction: column; gap: 10px; align-self: center; }
	#booth-dialog.ios-cam .cam-controls { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; gap: 12px; justify-items: center; padding: 6px 20px; }
	#booth-dialog.ios-cam .cam-controls > * { justify-self: center !important; }
	#booth-dialog.ios-cam .cam-controls > .cam-spacer { display: none; }
	#booth-dialog.ios-cam .cam-privacy { grid-column: 2; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
	#booth-dialog.ios-cam .cam-sheet,
	#booth-dialog.ios-cam .cam-thumb.is-new,
	#booth-dialog.ios-cam .cam-shutter:disabled::after { animation: none; }
}
#booth-dialog.ios-cam :is(.cam-round, .cam-thumb, .cam-mode, .cam-text-btn):focus-visible { outline: 2px solid var(--cam-yellow); outline-offset: 3px; }

/* Photo booth tweaks: plain shutter (no icon), controls sit a little higher */
#booth-dialog.ios-cam .cam-shutter-start::before { content: none; }
#booth-dialog.ios-cam .cam-privacy { margin-bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px)); }
#booth-dialog.ios-cam .cam-modes { padding-top: 8px; }

/* About hero photos are tappable (2026-09-24) */
.stack-card { cursor: zoom-in; transition: box-shadow 0.3s var(--ease), filter 0.3s var(--ease); }
@media (hover: hover) {
	.stack-card:hover { box-shadow: 0 28px 54px -20px #00000080; filter: brightness(1.04); }
}
.stack-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.photo-viewer .design-viewer-top { justify-content: flex-end; }
@media (max-width: 600px) {
	.photo-viewer [data-photo-prev] { justify-self: end; margin-right: 8px; }
	.photo-viewer [data-photo-next] { justify-self: start; margin-left: 8px; }
}

/* Pricing FAQ & policies: heading on top, questions below (2026-09-24) */
body .policies.faq-section { display: block; }
body .policies .faq-intro { position: static; max-width: 640px; margin-bottom: 48px; }
body .policies .faq-intro h2 br { display: none; }
body .policies .policy-groups { max-width: 860px; }

/* Lab logo: tight crop, bigger and crisp (2026-09-24) */
body[data-page="lab"] .lab-screen img {
	width: min(100%, 380px);
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	transform: none;
	margin: 0 auto;
}
@media (max-width: 700px) { body[data-page="lab"] .lab-screen img { width: min(calc(72 * var(--vw)), 280px); } }

/* Lab hero: logo sits up beside the heading on every screen size (2026-09-24) */
body[data-page="lab"] .lab-hero {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: clamp(20px, calc(5 * var(--vw)), 80px);
}
body[data-page="lab"] .lab-hero .lab-art { max-width: none; width: auto; justify-self: end; align-self: start; margin-top: 6px; }
body[data-page="lab"] .lab-hero .lab-screen img { width: clamp(96px, calc(24 * var(--vw)), 300px); }
@media (max-width: 700px) {
	body[data-page="lab"] .lab-hero { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; }
	body[data-page="lab"] .lab-hero .lab-screen img { width: 96px; }
	body[data-page="lab"] .lab-hero .lab-hero-copy > p:not(.lab-eyebrow) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
	body[data-page="lab"] .lab-hero { position: relative; display: block; }
	body[data-page="lab"] .lab-hero .lab-art { position: absolute; top: 44px; right: calc(5.5 * var(--vw)); margin: 0; }
	body[data-page="lab"] .lab-hero h1 { padding-right: 112px; }
}

/* Lab hero: logo on the left of the heading (2026-09-24) */
body[data-page="lab"] .lab-hero { grid-template-columns: auto minmax(0, 1fr); }
body[data-page="lab"] .lab-hero .lab-art { order: -1; justify-self: start; }
@media (max-width: 700px) {
	body[data-page="lab"] .lab-hero .lab-art { right: auto; left: calc(5.5 * var(--vw)); }
	body[data-page="lab"] .lab-hero h1 { padding-right: 0; padding-left: 112px; }
}
/* Lab logo nudged a little left (2026-09-24) */
body[data-page="lab"] .lab-hero .lab-art { margin-left: -12px; }
@media (max-width: 700px) { body[data-page="lab"] .lab-hero .lab-art { margin-left: 0; left: calc(calc(5.5 * var(--vw)) - 8px); } }
/* Lab: less empty space under the hero (2026-09-24) */
body[data-page="lab"] .lab-hero { padding-bottom: clamp(24px, calc(3 * var(--vw)), 48px); }
body[data-page="lab"] .lab-hero .lab-hero-copy > p:not(.lab-eyebrow) { margin-bottom: 0; }
body[data-page="lab"] .lab-keepsakes { padding-top: clamp(40px, calc(5 * var(--vw)), 72px); }

/* =====================================================================
   Lab keepsakes as instant-film prints (2026-09-24): white frames with a
   deep bottom border holding the title + description, slightly tilted and
   overlapping like prints laid on a table. They straighten on hover.
   ===================================================================== */
body[data-page="lab"] .lab-keepsake-grid {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	padding: 24px 0 12px;
}
body[data-page="lab"] .lab-keepsake-grid > figure {
	--tilt: 0deg;
	--lift: 0px;
	flex: 0 1 300px;
	min-width: 0;
	margin: 0 -10px;
	padding: 14px 14px 0;
	border-radius: 3px;
	background: #fbfbf9;
	box-shadow: 0 1px 1px #0000000f, 0 10px 24px -10px #00000040, 0 2px 0 #e7e6e1 inset;
	transform: translateY(var(--lift)) rotate(var(--tilt));
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
	position: relative;
}
body[data-page="lab"] .lab-keepsake-grid > figure:nth-child(1) { --tilt: -2.5deg; --lift: 8px; z-index: 1; }
body[data-page="lab"] .lab-keepsake-grid > figure:nth-child(2) { --tilt: 1.5deg; --lift: -4px; z-index: 2; }
body[data-page="lab"] .lab-keepsake-grid > figure:nth-child(3) { --tilt: -1deg; --lift: 12px; z-index: 1; }
@media (hover: hover) {
	@media (hover: hover) and (pointer: fine) {
body[data-page="lab"] .lab-keepsake-grid > figure:hover {
		z-index: 5;
		transform: translateY(-8px) rotate(0deg) scale(1.03);
		box-shadow: 0 1px 1px #0000000f, 0 26px 44px -16px #00000055;
	}
}
}
body[data-page="lab"] .lab-keepsake-grid > figure img,
body[data-page="lab"] .lab-keepsake-grid > figure:first-child img {
	aspect-ratio: 1 / 1;
	border-radius: 1px;
	filter: saturate(0.92) contrast(1.02);
}
body[data-page="lab"] .lab-keepsake-grid figcaption {
	position: static;
	padding: 16px 6px 22px;
	min-height: 92px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: #262724; }
body[data-page="lab"] .lab-keepsake-grid p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #7a7c74; }

@media (max-width: 900px) {
	body[data-page="lab"] .lab-keepsake-grid { flex-wrap: wrap; row-gap: 26px; }
	body[data-page="lab"] .lab-keepsake-grid > figure { flex: 0 1 46%; margin: 0 -6px; }
	body[data-page="lab"] .lab-keepsake-grid > figure:first-child { grid-column: auto; }
}
@media (max-width: 600px) {
	body[data-page="lab"] .lab-keepsake-grid { padding-top: 12px; row-gap: 20px; }
	body[data-page="lab"] .lab-keepsake-grid > figure { flex: 0 1 50%; margin: 0 -5px; padding: 9px 9px 0; }
	body[data-page="lab"] .lab-keepsake-grid > figure:nth-child(3) { --tilt: 2deg; --lift: 0px; }
	body[data-page="lab"] .lab-keepsake-grid figcaption { padding: 10px 3px 14px; min-height: 0; }
	body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 14px; }
	body[data-page="lab"] .lab-keepsake-grid p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	body[data-page="lab"] .lab-keepsake-grid > figure { transition: none; }
}

/* Lab prints: all three in one row on tablets and phones (2026-09-24) */
@media (max-width: 900px) {
	body[data-page="lab"] .lab-keepsake-grid { flex-wrap: nowrap; }
	body[data-page="lab"] .lab-keepsake-grid > figure { flex: 1 1 0; margin: 0 -6px; }
}
@media (max-width: 600px) {
	body[data-page="lab"] .lab-keepsake-grid { padding-left: 4px; padding-right: 4px; }
	body[data-page="lab"] .lab-keepsake-grid > figure { --inset: 6px; margin: 0 -4px; padding: 6px 6px 0; }
	body[data-page="lab"] .lab-keepsake-grid > figure:nth-child(3) { --tilt: -1.5deg; --lift: 6px; }
	body[data-page="lab"] .lab-keepsake-grid figcaption { padding: 7px 2px 10px; }
	body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 11px; line-height: 1.25; }
	body[data-page="lab"] .lab-keepsake-grid p { font-size: 9.5px; line-height: 1.35; margin-top: 3px; }
}

/* Soft corners on the inquiry package options. */
body .package-selection label > span { border-radius: 10px; }


/* Caveat is still used by the Build Your Event artwork (build-art.js). */
@font-face { font-family: 'Caveat'; src: url('assets/caveat-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('assets/caveat-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

/* Lab prints: handwritten captions (Pangolin, SIL Open Font License) (2026-09-25) */
@font-face { font-family: 'Pangolin'; src: url('assets/pangolin-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
body[data-page="lab"] .lab-keepsake-grid h3,
body[data-page="lab"] .lab-keepsake-grid p { font-family: 'Pangolin', 'Bradley Hand', 'Segoe Print', cursive; font-weight: 400; letter-spacing: 0; }
body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 19px; line-height: 1.2; color: #2c2d2a; }
body[data-page="lab"] .lab-keepsake-grid p { font-size: 14.5px; line-height: 1.35; margin-top: 5px; color: #5d5f58; }
body[data-page="lab"] .lab-keepsake-grid figcaption { transform: rotate(-1deg); }
@media (max-width: 600px) {
	body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 11px; }
	body[data-page="lab"] .lab-keepsake-grid p { font-size: 9.5px; margin-top: 2px; }
}

/* Home: "Build your event" teaser (2026-09-25). Artwork comes from build-art.js. */
.build-promo {
	background: var(--paper);
	padding-top: clamp(40px, calc(6 * var(--vw)), 90px);
	padding-bottom: clamp(40px, calc(6 * var(--vw)), 90px);
}
.build-promo-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(28px, calc(5 * var(--vw)), 80px);
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(28px, calc(4.5 * var(--vw)), 64px);
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 1px 2px #2526240d, 0 30px 60px -40px #25262440;
}
.build-promo-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.build-promo-new {
	padding: 4px 9px;
	border-radius: 999px;
	background: #f6dde3;
	color: #8e3552;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
}
.build-promo h2 {
	margin-top: 18px;
	font-size: clamp(34px, calc(4.2 * var(--vw)), 56px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.045em;
}
.build-promo h2 span {
	color: #7a7c73;
}
.build-promo-copy > p {
	margin-top: 18px;
	max-width: 42ch;
	color: #62645d;
	font-size: 16px;
	line-height: 1.7;
}
.build-promo-picks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	max-width: 360px;
}
.build-promo-picks li {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	box-sizing: border-box;
	padding: 4px 13px 4px 4px;
	border-radius: 999px;
	background: #f5f4f0;
	font-size: 12.5px;
	color: #3d3f3a;
}
.build-promo-ico {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, #fff, #ebe9e3);
	overflow: hidden;
}
.build-promo-ico svg {
	width: 34px;
	height: 34px;
}
.build-promo-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-wrap: wrap;
	gap: 14px 20px;
	margin-top: 30px;
}
.build-promo-note {
	font-size: 12px;
	color: var(--muted);
}
.build-promo-stage {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 24px;
	overflow: hidden;
	background: #efece6;
	isolation: isolate;
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.build-promo-stage:hover {
	transform: translateY(-3px);
	box-shadow: 0 24px 50px -30px #25262466;
}
}
.build-promo-layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.build-promo-layer.is-front {
	opacity: 1;
}
.build-promo-layer svg {
	display: block;
	width: 100%;
	height: 100%;
}
.build-promo-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 8px 14px;
	border-radius: 999px;
	background: #ffffffe6;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 4px 14px #2526241f;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}
.build-promo-tag.pop {
	animation: build-promo-pop .45s var(--ease);
}
@keyframes build-promo-pop {
	from { transform: translateY(-6px) scale(.96); opacity: 0; }
}
.build-promo-cta {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: inline-flex;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 12.5px;
	transition: transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
.build-promo-stage:hover .build-promo-cta {
	transform: translateY(-2px);
}
}
.how-inline-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 900px) {
	.build-promo-inner {
		grid-template-columns: 1fr;
	}
	.build-promo-stage {
		order: -1;
	}
}
@media (max-width: 600px) {
	.build-promo-inner {
		padding: 14px 14px 30px;
		border-radius: 26px;
	}
	.build-promo-copy {
		padding: 0 8px;
	}
	.build-promo-stage {
		border-radius: 18px;
	}
	.build-promo-picks li:nth-child(n + 7) {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.build-promo-layer,
	.build-promo-stage,
	.build-promo-cta { transition: none; }
	.build-promo-tag.pop { animation: none; }
}

.compare-table tfoot .compare-choice-label { text-align: left; padding-left: 16px; color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
	.compare-table tfoot .compare-choice-label { padding-left: 14px; }
}

@keyframes addons-gradient-drift {
	0% { background-position: 0% 0%, 100% 100%; }
	50% { background-position: 60% 100%, 40% 0%; }
	100% { background-position: 100% 30%, 0% 70%; }
}
@media (prefers-reduced-motion: reduce) {
	.addons-builder { animation: none; }
}

/* Center only the pricing comparison section. */
body[data-page="pricing"] #compare { text-align: center; }
body[data-page="pricing"] #compare :is(.compare-head, .compare-wrap, .compare-note, .compare-custom p, .compare-travel) { margin-left: auto; margin-right: auto; }
body[data-page="pricing"] #compare .compare-table :is(th, td),
body[data-page="pricing"] #compare .compare-table .c-label,
body[data-page="pricing"] #compare .compare-table tfoot .compare-choice-label { text-align: center; }
body[data-page="pricing"] #compare .compare-section th { text-align: center !important; }

body[data-page="pricing"] #compare .compare-section th {
	text-align: left !important;
	padding-left: 16px !important;
	font-weight: 700 !important;
}
body[data-page="pricing"] #compare .compare-section th span {
	display: block;
	width: 40%;
	text-align: center;
	transform: translateX(-2px);
}

/* Package cards share the soft curves of their selection buttons. */
body:is([data-page="index"], [data-page="pricing"]) #packages.pricing-cards-v2 .package-card { border-radius: 28px; }
body[data-page="pricing"] .addons-builder { margin-left: auto; margin-right: auto; }

/* Phone layout refinement: readable copy and comfortable touch controls. */
@media (max-width: 600px) {
	.pricing-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pricing-jump a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
	body #packages.pricing-cards-v2 .package-card > .button { display: flex; width: 100%; min-height: 48px; }
	.compare-table .compare-btn { min-height: 44px; }
	.compare-table th, .compare-table td { overflow-wrap: break-word; }
	.addons-builder { padding: 32px 20px; border-radius: 24px; }
	.addons-builder h3 { font-size: clamp(28px, calc(8 * var(--vw)), 38px); }
	.addons-builder > p { font-size: 15px; }
	.addons-builder-steps { gap: 12px; }
	.addons-builder-steps li { font-size: 10px; }
	.addons-builder-steps span { font-size: 22px; }
	body .mobile-nav a { min-height: 44px; display: flex; align-items: center; }
	body[data-page="lab"] .lab-hero { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
	body[data-page="lab"] .lab-hero .lab-art { position: static; order: -1; align-self: flex-start; margin: 0; }
	body[data-page="lab"] .lab-hero h1 { padding: 0; font-size: clamp(36px, calc(9 * var(--vw)), 48px); }
	body[data-page="lab"] .lab-keepsake-grid { flex-wrap: wrap; gap: 24px; padding: 12px 10px; }
	body[data-page="lab"] .lab-keepsake-grid > figure { flex: 0 1 280px; margin: 0; padding: 12px 12px 0; }
	body[data-page="lab"] .lab-keepsake-grid figcaption { padding: 14px 6px 20px; }
	body[data-page="lab"] .lab-keepsake-grid h3 { font-size: 20px; }
	body[data-page="lab"] .lab-keepsake-grid p { font-size: 15px; }
}

/* ==========================================================================
   Mobile polish pass (2026-09-25)
   Bigger touch targets and more readable small text on phones. Layout and
   look are unchanged; this only adjusts sizes that were too small to tap or read.
   ========================================================================== */
@media (max-width: 760px) {
	/* Header logo: full 44px tap area */
	body .site-header .brand { min-height: 44px; display: inline-flex; align-items: center; }

	/* Footer: "Privacy" and "Back to top" were 9px text */
	body .footer-columns .footer-bottom { font-size: 12px; letter-spacing: .04em; }
	body .footer-columns .footer-bottom .footer-links { gap: 20px; }
	body .footer-columns .footer-bottom .footer-links a { min-height: 44px; min-width: 44px; justify-content: center; font-size: 12px; }

	/* Homepage feature cards: arrows and dots big enough for thumbs */
	body .feature-arrow { width: 44px; height: 44px; }
	body .feature-stack-dots { gap: 0; }
	body .feature-stack-dots button { width: 44px; height: 44px; }

	/* Homepage hero + gallery labels */
	body .ribbon-footer { font-size: 12px; }
	body .ribbon-toggle { min-height: 44px; font-size: 12px; }
	body .contact-frame > span b { font-size: 11px; }

	/* "Mochi pick" badge label */
	body .reel-award small { font-size: 10px; }

	/* Small print that was 11–12px */
	body .local-copy p { font-size: 15px; line-height: 1.6; }
	body .form-note,
	body .compare-travel,
	body .addons-builder-note { font-size: 13px; }
	body .booth-dialog .privacy-note { font-size: 12px; }
	body .inquiry-receipt :is(.receipt-intro, .receipt-next) { font-size: 14px; }
	body .inquiry-receipt :is(.receipt-kicker, .receipt-note, .receipt-signoff) { font-size: 12px; }

	/* Pricing: "Plan a custom package" link */
	body .compare-custom .compare-note-link { display: inline-flex; align-items: center; min-height: 44px; }

	/* "How it works" had extra padding compared with every other section */
	body .how-v2 { padding-top: 65px; padding-bottom: 65px; }
}

/* ==========================================================================
   No zooming or rescaling on tap (2026-09-25)
   - touch-action: manipulation stops the browser's double-tap zoom on every
     element (pinch-to-zoom still works for accessibility).
   - text-size-adjust stops iOS from enlarging text when the phone rotates.
   - Hover lift/scale effects above are limited to devices with a real mouse,
     so a tap on a phone no longer leaves a card "stuck" scaled up.
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	touch-action: manipulation;
}
body, a, button, label, summary, input, select, textarea, [role="button"], [tabindex] {
	touch-action: manipulation;
}
/* iOS zooms into any text field under 16px when it's focused */
@media (max-width: 900px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	select,
	textarea { font-size: max(16px, 1em); }
}

/* Safety net: nothing can make the page wider than the screen, so iOS never
   has a reason to zoom the whole site out (2026-09-25). */
html, body { max-width: 100%; overflow-x: clip; }

/* The Lab pricing: included with The Reel, $75 add-on for The Snapshot (2026-09-26) */
.package-card li a { color: inherit; text-decoration: underline; text-decoration-color: #25262455; text-underline-offset: 3px; }
.compare-table th a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.lab-price-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: #ffffffb3; box-shadow: 0 1px 2px #1d1f1a0f, 0 10px 24px -18px #1d1f1a66; font-size: 14px; line-height: 1.5; }
.lab-price-note strong { font-weight: 600; color: var(--ink); }
.lab-price-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .lab-price-note { border-radius: 18px; } }

/* Header optical alignment and reviewed page spacing. */
.site-header .brand img { display: block; width: 108px; height: auto; transform: none; }
@media (min-width: 901px) {
 .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
 .site-header .brand { justify-self: start; }
 .site-header .desktop-nav { margin-inline: 0; justify-self: center; }
 .site-header .nav-actions { justify-self: end; }
}
.formats-cta { display: flex; justify-content: center; margin-top: 36px; }
body[data-page="pricing"] #compare .compare-section th .compare-digital { transform: translateX(-7px); }
@media (max-width: 900px) {
 .site-header .brand img { transform: none; }
 .site-header .nav-actions > .booking-gloss { display: none; }
 .site-header .nav-actions { margin-left: auto; }
 .nav-actions > .menu-toggle { margin-right: 0 !important; }
 .mobile-nav { max-height: calc(calc(100 * var(--dvh)) - 90px); overflow-y: auto; }
 .mobile-nav .mobile-booking { margin-top: 12px; font-weight: 600; }
}

.mobile-nav > .mobile-booking.booking-gloss { width: fit-content; margin-top: 18px; font-size: 12px; padding: 12px 24px; }

/* About hero on phones: ten photos in five rows, a touch smaller, title nudged down (2026-10-02). */
@media (pointer: coarse), (max-width: 760px) {
	.stack-card { width: min(calc(30 * var(--vw)), calc(var(--ar) * calc(23 * var(--vw)))); }
	.stack-copy { top: 12%; }
}

/* Hero photo ribbon: clip sideways only, so photo shadows at the top and bottom aren't cut off (2026-10-02). */
.hero-v3 .photo-ribbon { overflow: visible; overflow-x: clip; overflow-y: visible; }

/* Align the Lab logo with the full introductory text block. */
@media (min-width: 761px) {
 body[data-page="lab"] .lab-hero { align-items: center; }
 body[data-page="lab"] .lab-hero .lab-art { align-self: center; margin: 0; }
 body[data-page="lab"] .lab-hero .lab-console { aspect-ratio: auto; }
 body[data-page="lab"] .lab-hero .lab-screen { height: auto; }
}

/* Lab station cards: photo previews and quiet editorial details. */
body[data-page="lab"] .lab-station-redesigned {
 padding: 14px 14px 28px; border-radius: 22px; background: #fffefa;
 border: 1px solid #deded5; box-shadow: 0 8px 24px -20px #24262040;
}
body[data-page="lab"] .lab-station-redesigned:hover { transform: none; box-shadow: 0 8px 24px -20px #24262040; }
.lab-card-visual { height: 220px; border-radius: 12px; overflow: hidden; margin-bottom: 26px; background: #e9e9df; }
.lab-card-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.lab-card-gallery { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 26px 24px 48px; }
.lab-card-gallery img { width: 30%; height: 135px; object-fit: cover; border: 5px solid white; border-bottom-width: 20px; box-shadow: 0 5px 12px #25282018; transform: rotate(-8deg); }
.lab-card-gallery img:nth-child(2) { transform: translateY(-8px) rotate(5deg); }
.lab-card-gallery img:nth-child(3) { transform: rotate(-3deg); }
.lab-card-gallery > span { position: absolute; bottom: 17px; font-size: 11px; color: #62675b; letter-spacing: .04em; }
.lab-card-share { display: flex; align-items: center; justify-content: center; background: #e9e5ed; }
.lab-card-phone { width: 123px; padding: 7px; border-radius: 20px; background: #fffefa; border: 1px solid #d1ccd6; transform: rotate(-8deg) translateX(-25px); box-shadow: 0 10px 18px #30263815; }
.lab-card-phone img { width: 100%; height: 137px; object-fit: cover; border-radius: 14px 14px 4px 4px; }
.lab-card-phone span { display: block; padding: 9px 0 4px; font-size: 10px; text-align: center; }
.lab-card-delivered { position: absolute; left: 49%; top: 55%; padding: 12px 15px; border-radius: 10px; background: #fffefa; box-shadow: 0 8px 22px #30263812; font-size: 12px; white-space: nowrap; }
body[data-page="lab"] .lab-station-redesigned .lab-station-number { margin: 0 16px 18px; gap: 10px; font-size: 10px; letter-spacing: .1em; }
body[data-page="lab"] .lab-station-redesigned .lab-station-number b { width: auto; height: auto; background: none; box-shadow: none; color: #868a7c; font-size: 12px; }
body[data-page="lab"] .lab-station-redesigned h3 { margin: 0 16px; font-size: clamp(23px, calc(2.2 * var(--vw)), 30px); }
body[data-page="lab"] .lab-station-redesigned p { margin: 16px 16px 24px; font-size: 14px; line-height: 1.75; }
body[data-page="lab"] .lab-station-redesigned .lab-station-tags { margin: auto 16px 0; padding-top: 16px; border-top: 1px solid #e5e5dd; gap: 8px 18px; }
body[data-page="lab"] .lab-station-redesigned .lab-station-tags li { background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 11px; color: #717668; }
@media (max-width: 480px) { .lab-card-visual { height: 195px; } .lab-card-delivered { left: 43%; font-size: 11px; padding: 10px; } }

/* Inquiry confirmation styled as a printed paper receipt. */
#form-success.receipt-confirmation { filter: drop-shadow(3px 8px 5px #24242424); }
body .inquiry-receipt {
 max-width: 350px; padding: 34px 26px 32px; color: #373737;
 background: linear-gradient(100deg, #f5f5f5, #fff 35%, #f7f7f7 72%, #fff);
 font-family: 'Courier New', monospace;
 mask: radial-gradient(circle at 6px 0, transparent 4px, #000 4.5px) top left / 12px 51% repeat-x,
 radial-gradient(circle at 6px 100%, transparent 4px, #000 4.5px) bottom left / 12px 51% repeat-x;
}
body .inquiry-receipt .receipt-merchant { font-size: 23px; letter-spacing: .13em; line-height: 1.2; }
body .inquiry-receipt .receipt-kicker { font-size: 11px; margin-top: 4px; letter-spacing: .05em; }
body .inquiry-receipt .receipt-rule { border: 0; height: 14px; margin: 16px 0; overflow: hidden; }
body .inquiry-receipt .receipt-rule::before { content: '******************************'; font-size: 13px; letter-spacing: 3px; white-space: nowrap; }
body .inquiry-receipt h2 { font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
body .inquiry-receipt .receipt-intro { font-size: 11px; line-height: 1.5; margin: 10px auto 18px; }
body .inquiry-receipt .receipt-ledger { border-block: 1px dashed #999; padding: 12px 0; }
body .inquiry-receipt .receipt-ledger > div { font-size: 12px; line-height: 1.45; padding: 4px 0; gap: 14px; }
body .inquiry-receipt .receipt-ledger dd { font-weight: 400; }
body .inquiry-receipt .receipt-stamp { width: auto; display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding: 0; border: 0; color: inherit; transform: none; font-size: 15px; letter-spacing: .07em; }
body .inquiry-receipt .receipt-stamp::after { content: '✓'; }
body .inquiry-receipt .receipt-next { font-size: 12px; line-height: 1.5; }
body .inquiry-receipt .receipt-note { font-size: 10px; line-height: 1.5; margin-top: 10px; }
body .inquiry-receipt .receipt-signoff { font-size: 14px; letter-spacing: .08em; margin: 0; }
.receipt-barcode { width: 174px; height: 34px; margin: 15px auto 3px; background: repeating-linear-gradient(90deg, #333 0 2px, transparent 2px 4px, #333 4px 5px, transparent 5px 8px, #333 8px 13px, transparent 13px 15px, #333 15px 16px, transparent 16px 19px, #333 19px 22px, transparent 22px 24px, #333 24px 25px, transparent 25px 29px); }
@media (max-width: 380px) { body .inquiry-receipt { padding-inline: 18px; } }

@font-face {
 font-family: 'ModeSeven';
 src: url('assets/mode-seven.ttf') format('truetype');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
body .inquiry-receipt,
body .inquiry-receipt h2 {
 font-family: 'ModeSeven', 'Courier New', monospace;
}
body .inquiry-receipt :is(.receipt-merchant, .receipt-stamp, .receipt-ledger dd) {
 font-weight: 400;
}

/* A little preview: freestanding character art beside the invitation. */
#photobooth .studio-content { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: clamp(24px, calc(4 * var(--vw)), 60px); }
#photobooth .studio-character { display: block; width: 100%; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
#photobooth .studio-character img { display: block; width: 100%; height: auto; object-fit: contain; }
#photobooth .studio-character:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; border-radius: 12px; }
@media (max-width: 700px) { #photobooth .studio-preview-wrap { width: 100%; max-width: 520px; justify-self: center; } }

@media (max-width: 700px) {
 #photobooth .studio-copy > .button { display: flex; width: fit-content; margin-inline: auto; }
}

/* Hero photo ribbon spans the full window width on large screens (2026-10-03). */
.hero-v3 .photo-ribbon { width: calc(100 * var(--vw)); margin-left: calc(50% - calc(50 * var(--vw))); margin-right: 0; }

/* Header spans the full window on large screens: logo at the left edge, button at the right (2026-10-03). */
@media (min-width: 1600px) {
	.site-header { padding-inline: calc(4 * var(--vw)); }
}

/* About story on wide screens: a larger, more comfortable column, with photos breaking out a little wider than the text (2026-10-03). */
@media (min-width: 1600px) {
	.story-col { max-width: 820px; }
	.story-title { font-size: 60px; }
	.story h3 { font-size: 34px; }
	.story p { font-size: 19px; }
	.story .story-q { font-size: 23px; }
	.story figcaption { font-size: 14px; }
	.story-pair,
	.story-photo { margin-inline: -140px; }
	.story-pair { gap: 24px; }
}
@media (min-width: 2200px) {
	.story-col { max-width: 900px; }
	.story p { font-size: 20px; }
	.story-pair,
	.story-photo { margin-inline: -200px; }
}


/* Mochi, the mascot: waves on the empty event panel and on the "sent" receipts (2026-10-03). */
.mochi-wave { display: block; width: fit-content; margin: 0 auto; }
.mochi-wave img { display: block; width: 96px; height: auto; }
.bx-empty .mochi-wave { margin-bottom: 6px; }
.bx-empty > span { display: block; line-height: 1.6; }
.mochi-receipt img { width: 120px; }
.mochi-says { margin: 4px auto 14px; font-size: 15px; font-weight: 500; color: var(--ink, #252624); text-align: center; }
.receipt-confirmation:not([hidden]) .mochi-receipt { animation: mochi-pop 520ms cubic-bezier(.34,1.56,.64,1) both; }
@keyframes mochi-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .receipt-confirmation:not([hidden]) .mochi-receipt { animation: none; } }

/* Receipt prints out of a little printer slot, line by line (2026-10-03). */
.receipt-printer {
	position: relative; z-index: 2;
	width: min(100%, 392px); height: 20px; margin: 6px auto 0;
	border-radius: 10px;
	background: linear-gradient(#3a3b37, #222320);
	box-shadow: 0 6px 14px -6px #00000066, inset 0 1px 0 #ffffff26;
}
.receipt-printer::after {
	content: ''; position: absolute; left: 18px; right: 18px; top: 9px; height: 3px;
	border-radius: 2px; background: #0b0b0a; box-shadow: 0 1px 0 #ffffff1a;
}
.receipt-feed {
	position: relative; z-index: 1;
	margin-top: -10px;
	clip-path: inset(0 -60px -60px -60px); /* hides the paper above the slot, keeps its shadow */
}
.receipt-confirmation:not([hidden]) .receipt-feed .inquiry-receipt {
	animation: receipt-feed 2.6s linear both;
}
.receipt-confirmation:not([hidden]) .receipt-feed .receipt-print-head { animation: none; opacity: 0; }
.receipt-confirmation:not([hidden]) .receipt-printer { animation: printer-buzz 2.6s linear both; }
.receipt-confirmation:not([hidden]) .receipt-feed ~ .button,
.receipt-confirmation:not([hidden]) > .button { animation: receipt-after 400ms ease 2.6s both; }
@keyframes receipt-feed {
	0%, 8% { transform: translateY(-100%); }
	20%, 26% { transform: translateY(-78%); }
	38%, 44% { transform: translateY(-56%); }
	56%, 62% { transform: translateY(-34%); }
	74%, 80% { transform: translateY(-14%); }
	94% { transform: translateY(1.5%); }
	100% { transform: translateY(0); }
}
@keyframes printer-buzz {
	0%, 8%, 26%, 44%, 62%, 80%, 100% { transform: none; }
	12%, 30%, 48%, 66%, 84% { transform: translateX(-0.6px); }
	16%, 34%, 52%, 70%, 88% { transform: translateX(0.6px); }
}
@keyframes receipt-after { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.receipt-confirmation:not([hidden]) .receipt-feed .inquiry-receipt,
	.receipt-confirmation:not([hidden]) .receipt-printer,
	.receipt-confirmation:not([hidden]) > .button { animation: none; }
}

/* Lab: a surprised Mochi reacts to the keepsakes (2026-10-03). */
.lab-heading-mochi { display: flex; align-items: flex-end; justify-content: flex-start; gap: 28px; max-width: none; }
.lab-mochi { flex: none; display: block; }
.lab-mochi img { display: block; width: 120px; height: auto; }
@media (max-width: 700px) { .lab-mochi img { width: 84px; } }

/* Keep native mobile date controls within their form column, including iOS. */
.field, .bx-field { min-width: 0; }
.field input[type="date"], .bx-field input[type="date"] {
 display: block;
 box-sizing: border-box;
 width: 100%;
 min-width: 0;
 max-width: 100%;
 -webkit-appearance: none;
 appearance: none;
}
.field input[type="date"]::-webkit-date-and-time-value,
.bx-field input[type="date"]::-webkit-date-and-time-value {
 min-width: 0;
 text-align: left;
}
.field input[type="date"]::-webkit-datetime-edit,
.bx-field input[type="date"]::-webkit-datetime-edit {
 min-width: 0;
 padding: 0;
}

/* Pricing: Mochi on a laptop sits inside the "Make it a little more yours." card, to the right of the text (2026-10-03). */
.addons-builder-mochi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, calc(3 * var(--vw)), 36px); align-items: center; }
.addons-builder-mochi > :not(.addons-mochi) { grid-column: 1; }
.addons-builder-mochi > .addons-builder-cta { justify-self: center; }
.addons-mochi { grid-column: 2; grid-row: 1 / span 5; align-self: center; display: block; }
.addons-mochi img { display: block; width: clamp(170px, calc(20 * var(--vw)), 240px); height: auto; }
@media (max-width: 700px) {
	.addons-builder-mochi > :not(.addons-mochi) { grid-column: 1 / -1; }
	.addons-builder-mochi > h3 { grid-column: 1; grid-row: 1; }
	.addons-builder-mochi { column-gap: 10px; }
	.addons-builder-mochi > h3 { font-size: 39px; line-height: 1.02; }
	.addons-mochi { grid-column: 2; grid-row: 1; align-self: start; margin: -10px -6px 0 0; }
	.addons-mochi img { width: 96px; }
}

@media (max-width: 700px) {
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps li { font-size: 10px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps span { font-size: 24px; }
}

/* Pricing "Make it a little more yours." card on phones: text left-aligned, Mochi on the right (2026-10-03). */
@media (max-width: 700px) {
	.addons-builder-mochi { text-align: left; }
	.addons-builder-mochi > p { margin-left: 0; margin-right: 0; }
	.addons-builder-mochi .addons-builder-steps { justify-content: flex-start; }
}

/* Pricing page on wide screens: line up with the full-width header and give each section more room (2026-10-03). */
@media (min-width: 1600px) {
	body[data-page="pricing"] .section-pad,
	body[data-page="pricing"] main > section:first-child { padding-inline: calc(4 * var(--vw)); }
	body[data-page="pricing"] #packages.pricing-cards-v2 .package-grid { max-width: 1320px; gap: 36px; }
	body[data-page="pricing"] .compare-wrap,
	body[data-page="pricing"] .compare-note { max-width: 1200px; }
	body[data-page="pricing"] .addons-builder { max-width: 1200px; padding: 64px 72px; }
	body[data-page="pricing"] .addons-builder h3 { font-size: 64px; }
	body[data-page="pricing"] .addons-builder > p { font-size: 18px; max-width: 52ch; }
	body[data-page="pricing"] .addons-mochi img { width: 320px; }
	body[data-page="pricing"] .policies .policy-groups { max-width: 1200px; }
}
@media (min-width: 2200px) {
	body[data-page="pricing"] #packages.pricing-cards-v2 .package-grid { max-width: 1500px; }
	body[data-page="pricing"] .compare-wrap,
	body[data-page="pricing"] .compare-note,
	body[data-page="pricing"] .addons-builder,
	body[data-page="pricing"] .policies .policy-groups { max-width: 1400px; }
}

/* "Make it a little more yours." card on wide screens: text on the left, Mochi on the right, no big empty gap (2026-10-03). */
@media (min-width: 1600px) {
	body[data-page="pricing"] .addons-builder.addons-builder-mochi {
		max-width: 1160px;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 64px;
		padding: 72px 88px;
		text-align: left;
	}
	body[data-page="pricing"] .addons-builder-mochi > p { margin-left: 0; margin-right: 0; max-width: 46ch; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps { justify-content: flex-start; }
	body[data-page="pricing"] .addons-builder-mochi > .addons-builder-cta { justify-self: start; }
	body[data-page="pricing"] .addons-builder-mochi .addons-mochi img { width: 340px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps { margin: 32px 0 36px; gap: 14px 28px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps li { font-size: 12px; gap: 6px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-steps span { font-size: 36px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-builder-cta .pearl-wrap { padding: 16px 34px; font-size: 16px; }
	body[data-page="pricing"] .addons-builder-mochi > .addons-builder-note { font-size: 14px; margin-top: 22px; }
}
@media (min-width: 2200px) {
	body[data-page="pricing"] .addons-builder.addons-builder-mochi { max-width: 1280px; }
	body[data-page="pricing"] .addons-builder-mochi .addons-mochi img { width: 380px; }
}

/* Center the builder steps and reassurance beneath the mobile call to action. */
@media (max-width: 900px) {
 body[data-page="pricing"] .addons-builder .addons-builder-steps {
  justify-content: center;
  justify-self: stretch;
  text-align: center;
 }
 body[data-page="pricing"] .addons-builder > .addons-builder-note {
  justify-self: center;
  margin-inline: auto;
  text-align: center;
 }
}

/* Clear closing calls to action for the booth and pricing FAQ. */
#photobooth .studio-bottom-cta { display: flex; justify-content: center; margin-top: 32px; }
body .policies .faq-contact-bottom { margin-top: 48px; margin-inline: auto; max-width: 860px; padding: clamp(28px, calc(5 * var(--vw)), 52px); text-align: center; border: 1px solid #dcd8d1; border-radius: 28px; background: radial-gradient(ellipse at top left, #ddd2eb, transparent 75%), #eee5db; box-shadow: 0 16px 36px -24px #62506855; }
body .policies .faq-contact-bottom h3 { margin: 0 0 16px; font-size: clamp(28px, calc(4 * var(--vw)), 42px); line-height: 1.12; letter-spacing: -.035em; }
body .policies .faq-contact-bottom p { max-width: 44ch; margin: 0 auto 26px; color: var(--muted); line-height: 1.7; }
body .policies .faq-contact-bottom .button { max-width: 100%; text-align: center; }

/* Pricing: a curious Mochi stands on top of the "Still have a question?" card (2026-10-03). */
body .policies .faq-contact-bottom.has-mochi { position: relative; margin-top: 170px; }
.faq-mochi { position: absolute; left: 50%; bottom: calc(100% - 8px); transform: translateX(-50%); display: block; pointer-events: none; }
.faq-mochi img { display: block; width: 120px; height: auto; }
@media (max-width: 700px) {
	body .policies .faq-contact-bottom.has-mochi { margin-top: 140px; }
	.faq-mochi img { width: 96px; }
}

/* Home: Mochi marking a calendar under "Have a date in mind?" (2026-10-03). */
.availability-mochi { display: block; width: clamp(180px, calc(20 * var(--vw)), 280px); height: auto; margin-top: 28px; }
@media (max-width: 700px) { .availability-mochi { width: 180px; margin: 20px auto 4px; } }

/* A little preview, blush pink (2026-10-07; was Mochi green): blush section, dark copy on the left, Mochi large on the right running off the bottom edge. */
#photobooth.interactive-studio { background: #f6e1de; color: #1f201e; padding-block: clamp(64px, calc(8 * var(--vw)), 104px) 0; overflow: hidden; }
#photobooth .booth-v3 { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, calc(4 * var(--vw)), 40px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, calc(5 * var(--vw)), 72px); align-items: end; }
#photobooth .booth-v3 .studio-copy { align-self: center; padding: 0 0 clamp(64px, calc(8 * var(--vw)), 104px); }
#photobooth .booth-v3 .studio-copy h2 { color: #1f201e; }
#photobooth .booth-v3 .studio-copy h2 span { color: #9c5a55; }
#photobooth .booth-v3 .studio-copy > p { max-width: 34ch; margin: 22px 0 30px; color: #4a3533; font-size: 16px; line-height: 1.7; }
#photobooth .booth-v3 .studio-copy > .button { border-radius: 999px; min-height: 52px; padding-inline: 26px; font-size: 14px; }
/* The site-wide button style uses !important, so the dark button on the green section has to as well. */
#photobooth .booth-v3 .studio-preview-wrap { position: relative; top: 40px; align-self: end; margin-bottom: -24px; }
#photobooth .studio-booth { display: block; width: 100%; max-width: 620px; margin-left: auto; cursor: default; }
#photobooth .studio-booth img { display: block; width: 100%; height: auto; }

@media (max-width: 700px) {
 #photobooth .booth-v3 { grid-template-columns: 1fr; gap: 8px; }
 #photobooth .booth-v3 .studio-copy { padding-bottom: 12px; }
 #photobooth .booth-v3 .studio-copy > .button { display: inline-flex; margin-inline: 0; }
 #photobooth .booth-v3 .studio-preview-wrap { width: 100%; max-width: 440px; justify-self: center; top: 28px; margin-bottom: -16px; }
 #photobooth .studio-booth { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
 #photobooth .studio-booth { transition: none; }
 #photobooth .studio-booth:hover { transform: none; }
}

/* Have a date in mind? Night mode calendar (2026-10-07): dark section, dark
   calendar card, today in Mochi green, Fridays and Saturdays in green, and Mochi
   perched on the card's corner. */
#availability.date-section { background: #1f201e; color: #f3f1ea; padding-block: clamp(80px, calc(10 * var(--vw)), 132px); }
#availability .date-inner { max-width: 1080px; margin: 0 auto; padding-inline: clamp(20px, calc(4 * var(--vw)), 40px); display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 460px); gap: clamp(40px, calc(7 * var(--vw)), 110px); align-items: center; }
#availability .date-copy h2 { margin: 0; color: #f3f1ea; font-size: clamp(42px, calc(5 * var(--vw)), 64px); line-height: 1.02; letter-spacing: -.055em; font-weight: 400; }
#availability .date-copy p { max-width: 32ch; margin: 22px 0 0; color: #c9cdc3; font-size: 16px; line-height: 1.7; }
#availability .date-cal-wrap { position: relative; padding-top: 132px; }
#availability .date-mochi { position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%); width: 190px; height: auto; pointer-events: none; }
#availability .date-cal { position: relative; z-index: 2; width: 100%; padding: 22px; border: 1px solid #ffffff14; border-radius: 28px; background: #2a2c29; box-shadow: 0 30px 60px -30px #000000b3; color: #f3f1ea; text-align: center; }
#availability .calendar-header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; padding: 0; border: 0; background: none; }
#availability .calendar-month { color: #f3f1ea; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
#availability .calendar-nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff26; border-radius: 50%; background: transparent; color: #f3f1ea; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s; }
#availability .calendar-nav:hover { background: #ffffff14; border-color: #ffffff40; }
#availability .calendar-nav:focus-visible { outline: 2px solid #cdeeb0; outline-offset: 3px; }
#availability .calendar-weekdays, #availability .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0; }
#availability .calendar-weekdays { margin: 0 0 6px; color: #8f9287; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
#availability .calendar-day { display: grid; place-items: center; justify-self: center; width: 100%; max-width: 48px; height: auto; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #f3f1ea; font: inherit; font-size: 15px; cursor: pointer; transition: background .2s, color .2s; }
/* Fridays and Saturdays (6th and 7th column) in Mochi green: the busy nights. */
#availability .calendar-grid > :nth-child(7n+6), #availability .calendar-grid > :nth-child(7n) { color: #cdeeb0; }
#availability .calendar-day:not(:disabled):hover, #availability .calendar-day:focus-visible { background: #ffffff1f; color: #fff; outline: none; }
#availability .calendar-day-today, #availability .calendar-grid > .calendar-day-today { background: #cdeeb0; color: #1f201e; font-weight: 600; }
#availability .calendar-day-today:not(:disabled):hover { background: #dff5c9; color: #1f201e; }
#availability .calendar-grid > .calendar-day:disabled { color: #ffffff38; cursor: not-allowed; }

/* Side by side only when both columns have room; otherwise stack (heading, then calendar). */
@media (max-width: 960px) {
 #availability .date-inner { grid-template-columns: 1fr; gap: 28px; max-width: 560px; }
 #availability .date-copy p { max-width: 40ch; }
 #availability .date-cal-wrap { width: 100%; max-width: 460px; justify-self: center; }
}
@media (max-width: 700px) {
 #availability .date-cal-wrap { padding-top: 106px; }
 #availability .date-mochi { width: 150px; }
 #availability .date-cal { padding: 16px 12px; border-radius: 24px; }
 #availability .calendar-weekdays, #availability .calendar-grid { gap: 3px; }
 #availability .calendar-day { font-size: 14px; max-width: 44px; }
}

/* Pricing: FAQ & Policies heading and question list centered on the page (2026-10-04). */
body .policies .faq-intro { margin-inline: auto; text-align: center; }
body .policies .policy-groups { margin-inline: auto; }

/* UX pass (2026-10-07) */
/* Lab and About pages end with a next step instead of stopping at the footer. */
.page-next { padding-top: 0; }
.page-next-card { max-width: 860px; margin: 0 auto; padding: clamp(32px, calc(5 * var(--vw)), 56px); text-align: center; border: 1px solid #dcd8d1; border-radius: 28px; background: radial-gradient(ellipse at top left, #ddd2eb, transparent 75%), #eee5db; box-shadow: 0 16px 36px -24px #62506855; }
.page-next-card h2 { margin: 0 0 14px; font-size: clamp(28px, calc(4 * var(--vw)), 42px); line-height: 1.12; letter-spacing: -.035em; }
.page-next-card p { max-width: 46ch; margin: 0 auto 28px; color: var(--muted); line-height: 1.7; }
.page-next-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-next-actions .button { border-radius: 999px; min-height: 48px; padding-inline: 24px; }

/* Small labels were 8–10px; 11px is the site's smallest text size (--micro). */
body .reel-award small { font-size: 11px; }
body[data-page="lab"] .lab-station-redesigned .lab-station-number { font-size: 11px; color: #5f6457; }
body[data-page="lab"] .lab-station-redesigned .lab-station-number b { color: #5f6457; }
.lab-card-phone span { font-size: 11px; }
@media (max-width: 700px) { .compare-table thead .c-label span { font-size: 11px; } }

/* Lab stations as photo cards (2026-10-07): full-bleed photo in a white frame,
   a dark fade at the bottom with the title, description and a frosted pill button. */
body[data-page="lab"] .lab-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, calc(2.4 * var(--vw)), 28px); }
body[data-page="lab"] .lab-photo-card { position: relative; margin: 0; padding: 6px; border-radius: 32px; background: #fff; box-shadow: 0 1px 2px #0000000d, 0 18px 40px -18px #00000047; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
body[data-page="lab"] .lab-photo-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 26px; }
body[data-page="lab"] .lab-photo-card-body { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 110px 20px 20px 24px; border-radius: 0 0 26px 26px; background: linear-gradient(to bottom, #2a221a00, #2a221aa6 40%, #221c16f2); }
body[data-page="lab"] .lab-photo-card-text { min-width: 0; max-width: 40ch; }
body[data-page="lab"] .lab-photo-card h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
body[data-page="lab"] .lab-photo-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #ffffffb3; }
body[data-page="lab"] .lab-card-action { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 999px; background: #ffffff26; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .25s; }
body[data-page="lab"] .lab-card-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body[data-page="lab"] .lab-card-action:hover { background: #ffffff40; }
body[data-page="lab"] .lab-card-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	body[data-page="lab"] .lab-photo-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px #0000000d, 0 28px 50px -20px #00000059; }
}
@media (max-width: 760px) {
	body[data-page="lab"] .lab-photo-grid { grid-template-columns: 1fr; gap: 18px; }
	body[data-page="lab"] .lab-photo-card { width: 100%; max-width: 460px; justify-self: center; padding: 5px; border-radius: 28px; }
	body[data-page="lab"] .lab-photo-card > img { aspect-ratio: 1 / 1; border-radius: 23px; }
	body[data-page="lab"] .lab-photo-card-body { left: 5px; right: 5px; bottom: 5px; flex-direction: column; align-items: flex-start; gap: 14px; padding: 96px 18px 18px; border-radius: 0 0 23px 23px; }
	body[data-page="lab"] .lab-photo-card h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
	body[data-page="lab"] .lab-photo-card { transition: none; }
	body[data-page="lab"] .lab-photo-card:hover { transform: none; }
}

/* Buttons (2026-10-07): one standard raised pill across the site. The glossy
   black "Build your event" (pricing) and the rainbow "Meet the Lab" now use it. */
.addons-builder .addons-builder-button { width: fit-content; align-self: center; margin-inline: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; min-height: 52px; padding-inline: 28px; font-size: 14px; font-weight: 500; background: var(--ink); color: #fff; border-color: transparent; }
.addons-builder .addons-builder-button:hover { background: #3a3d38; }

/* Two button styles site-wide (2026-10-07):
   main = the light raised pill (.button), secondary = outlined pill (.button-outline).
   One-offs kept on purpose: "Book the booth", the Build page step buttons, the googly eyes,
   and the frosted pills on The Lab photo cards. */
html body .button.button-outline:not(.booking-gloss):not(.lab-rainbow) { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px #2526243d !important; }
html body .button.button-outline:not(.booking-gloss):not(.lab-rainbow):hover { background: #25262409 !important; box-shadow: inset 0 0 0 1.5px #25262466 !important; }
html body .button.button-outline:not(.booking-gloss):not(.lab-rainbow):active { background: #25262412 !important; }
/* Comparison table: both "Choose" buttons the same size on phones. */
@media (max-width: 600px) {
	#compare tfoot td { vertical-align: middle; }
	#compare tfoot .compare-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 6px; font-size: 13px; line-height: 1.25; white-space: normal; text-align: center; }
}

/* Inquiry and pricing mobile refinements. */
@media (max-width: 600px) {
 .pricing-jump a:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2); }
 .inquiry-reference #inquiry-form > button.button[type="submit"] { display: flex; width: 100% !important; }
}
.venue-search { display: grid; gap: 10px; margin-bottom: 12px; }
.venue-search gmp-place-autocomplete { width: 100%; color-scheme: light; }
.venue-search-status { font-size: 13px; color: var(--muted); }

/* Geoapify address suggestions use the existing venue field. */
.venue-autocomplete { position: relative; }
/* Keep mobile focus from magnifying smaller form text, including wide phones. */
@media (max-width: 900px) {
 body[data-page="inquire"] .inquiry-reference .field :is(input, select, textarea) { font-size: 16px; }
}
.venue-suggestions { position: absolute; top: 56px; left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px #25262422; }
.venue-suggestions[hidden] { display: none; }
.venue-suggestions [role="option"] { padding: 12px; min-height: 44px; cursor: pointer; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.venue-suggestions [role="option"]:hover, .venue-suggestions [aria-selected="true"] { background: #eceee6; }
.venue-search-status { display: block; margin-top: 6px; }
.venue-search-status:empty { display: none; }
.venue-attribution { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
.venue-attribution a { text-decoration: underline; }
.tally-design-embed { width: 100%; overflow: hidden; border-radius: 14px; background: transparent; }
.tally-design-embed iframe { display: block; width: 100%; min-height: 980px; border: 0; background: transparent; }
.inquiry-form-wrap.is-tally-design { padding: clamp(18px, calc(3 * var(--vw)), 36px); }
@media (max-width: 600px) { .tally-design-embed iframe { min-height: 1100px; } }

/* The About page keeps its story focused and easy to scan. */
body[data-page="about"] .stack-spread,
body[data-page="about"] .story { display: none; }
body[data-page="about"] .about-simple { display: block; max-width: 980px; margin: 0 auto; padding-top: clamp(100px, calc(14 * var(--vw)), 180px); padding-bottom: clamp(90px, calc(12 * var(--vw)), 150px); }
body[data-page="about"] .about-simple h1 { max-width: 760px; margin: 18px 0 24px; font-size: clamp(48px, calc(8 * var(--vw)), 96px); line-height: .98; letter-spacing: -.065em; }
body[data-page="about"] .about-simple-lede { max-width: 560px; margin: 0; color: var(--muted); font-size: clamp(18px, calc(2 * var(--vw)), 23px); line-height: 1.6; }
body[data-page="about"] .about-simple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 90px; padding-top: 28px; border-top: 1px solid var(--line); }
body[data-page="about"] .about-simple-grid h2 { margin: 0 0 12px; font-size: 20px; }
body[data-page="about"] .about-simple-grid p { margin: 0; color: var(--muted); line-height: 1.7; }
body[data-page="about"] .about-simple-actions { display: flex; gap: 14px; margin-top: 52px; }
@media (max-width: 700px) {
 body[data-page="about"] .about-simple { padding-top: 90px; }
 body[data-page="about"] .about-simple-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 60px; }
 body[data-page="about"] .about-simple-actions { flex-direction: column; align-items: stretch; }
 body[data-page="about"] .about-simple-actions .button { justify-content: center; }
}

/* About: "Why Mochi?" section */
body[data-page="about"] .why-mochi.section-pad { padding-top: 80px; padding-bottom: 100px; border-top: 1px solid var(--line); }
body[data-page="about"] .why-mochi-inner { max-width: 980px; margin: 0 auto; }
body[data-page="about"] .why-mochi h2 { font-size: clamp(38px, calc(4.5 * var(--vw)), 56px); font-weight: 400; letter-spacing: -0.05em; line-height: 1; margin: 0 0 16px; }
body[data-page="about"] .why-mochi-lede { font-size: 16px; color: var(--muted); margin: 0 0 52px; }
body[data-page="about"] .why-mochi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); }
body[data-page="about"] .why-mochi-item h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 10px; }
body[data-page="about"] .why-mochi-item p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; }
@media (max-width: 700px) {
	body[data-page="about"] .why-mochi-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Photo picker follows the inquiry form typography and soft pill controls. */
.inquiry-reference #design-photos { font: inherit; font-size: 14px; color: var(--muted); padding: 12px; line-height: 1.5; }
#design-photos::file-selector-button { font: inherit; font-weight: 500; color: var(--ink); background: #fff; border: 1px solid #e5e4df; border-radius: 10px; padding: 11px 16px; margin-right: 12px; cursor: pointer; }
#design-photos::file-selector-button:hover { background: #f5f4f0; }
#design-photos:focus-visible { outline: 2px solid #625068; outline-offset: 3px; }
#clear-design-photos { font: inherit; font-size: 13px; color: var(--ink); border: 0; background: none; padding: 8px 0; text-decoration: underline; cursor: pointer; }

/* =====================================================================
   Photo booth camera, iPhone Camera look (2026-10-08): black UI, outlined
   icons on top, 3:4 viewfinder with grid, corner marks and a yellow focus
   square, uppercase modes with the active one in yellow, square thumbnail,
   white shutter and a grey flip-camera button.
   ===================================================================== */
#booth-dialog.ios-cam { --cam-yellow: #ffd60a; background: #000; }
#booth-dialog.ios-cam .cam-top {
	position: static;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 120px;
	padding: max(18px, env(safe-area-inset-top)) 12px 16px;
	background: #000;
}
#booth-dialog.ios-cam .cam-top .cam-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#booth-dialog.ios-cam .cam-close {
	justify-self: start;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: 2px;
	padding: 0;
	border: 1.6px solid #fff;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
#booth-dialog.ios-cam .cam-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#booth-dialog.ios-cam .cam-chevron {
	grid-column: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2c2c2e;
	color: #fff;
	cursor: pointer;
}
#booth-dialog.ios-cam .cam-chevron svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#booth-dialog.ios-cam .cam-live-icon { justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; color: var(--cam-yellow); }
#booth-dialog.ios-cam .cam-live-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Viewfinder */
#booth-dialog.ios-cam .cam-stage { flex: 0 0 auto; justify-content: flex-start; }
#booth-dialog.ios-cam .viewfinder { width: 100%; aspect-ratio: 3 / 4; border-radius: 0; background: #0b0b0b; }
#booth-dialog.ios-cam .viewfinder > img { filter: brightness(0.6); }
#booth-dialog.ios-cam.cam-back .viewfinder > video { transform: none; }
#booth-dialog.ios-cam .cam-grid {
	background:
		linear-gradient(to right, transparent calc(33.33% - 0.5px), #ffffff73 calc(33.33% - 0.5px), #ffffff73 calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), #ffffff73 calc(66.66% - 0.5px), #ffffff73 calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)),
		linear-gradient(to bottom, transparent calc(33.33% - 0.5px), #ffffff73 calc(33.33% - 0.5px), #ffffff73 calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.66% - 0.5px), #ffffff73 calc(66.66% - 0.5px), #ffffff73 calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
#booth-dialog.ios-cam .cam-corners {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--c: #ffffffb3;
	background:
		linear-gradient(var(--c), var(--c)) top left / 24px 1px,
		linear-gradient(var(--c), var(--c)) top left / 1px 24px,
		linear-gradient(var(--c), var(--c)) top right / 24px 1px,
		linear-gradient(var(--c), var(--c)) top right / 1px 24px,
		linear-gradient(var(--c), var(--c)) bottom left / 24px 1px,
		linear-gradient(var(--c), var(--c)) bottom left / 1px 24px,
		linear-gradient(var(--c), var(--c)) bottom right / 24px 1px,
		linear-gradient(var(--c), var(--c)) bottom right / 1px 24px;
	background-repeat: no-repeat;
}
#booth-dialog.ios-cam .cam-focus {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 33.33%;
	aspect-ratio: 1;
	translate: -50% -50%;
	border: 1.5px solid var(--cam-yellow);
	opacity: 0;
	pointer-events: none;
	background:
		linear-gradient(var(--cam-yellow), var(--cam-yellow)) top center / 1.5px 8px,
		linear-gradient(var(--cam-yellow), var(--cam-yellow)) bottom center / 1.5px 8px,
		linear-gradient(var(--cam-yellow), var(--cam-yellow)) left center / 8px 1.5px,
		linear-gradient(var(--cam-yellow), var(--cam-yellow)) right center / 8px 1.5px,
		linear-gradient(#fff, #fff) center / 46px 1.5px,
		linear-gradient(#fff, #fff) center / 1.5px 46px;
	background-repeat: no-repeat;
}
#booth-dialog.ios-cam .cam-focus.is-on { animation: cam-focus 2.4s ease both; }
@keyframes cam-focus { 0% { opacity: 0; scale: 1.35; } 12% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0.35; } }
#booth-dialog.ios-cam .cam-hint { padding: 8px 14px; border-radius: 999px; background: #000000a6; font-size: 13px; }
#booth-dialog.ios-cam .cam-status { min-height: 18px; margin: 10px 20px 0; color: var(--cam-yellow); font-size: 12px; }

/* Modes: uppercase text, active one yellow */
#booth-dialog.ios-cam .cam-modes { align-items: center; gap: 34px; margin: 0; padding: 14px 16px 10px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#booth-dialog.ios-cam .cam-mode {
	display: inline-flex;
	align-items: center;
	height: 32px;
	min-height: 32px;
	margin: 0;
	line-height: 1;
	vertical-align: middle;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
#booth-dialog.ios-cam .cam-mode.is-active { color: var(--cam-yellow); background: none; box-shadow: none; }

/* Bottom row */
#booth-dialog.ios-cam .cam-controls { grid-template-columns: 1fr auto 1fr; padding: 10px 24px 6px; }
#booth-dialog.ios-cam .cam-thumb { width: 50px; height: 50px; border: 0; border-radius: 6px; background: #1c1c1e; box-shadow: none; }
#booth-dialog.ios-cam .cam-shutter {
	width: 74px;
	height: 74px;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: inset 0 0 0 4px #fff;
}
#booth-dialog.ios-cam .cam-shutter::after { inset: 7px; box-shadow: none; }
#booth-dialog.ios-cam #stop-camera { display: none !important; }
#booth-dialog.ios-cam .cam-flip {
	justify-self: end;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2c2c2e;
	color: #fff;
	cursor: pointer;
	transition: transform 0.35s var(--ease);
}
#booth-dialog.ios-cam .cam-flip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#booth-dialog.ios-cam .cam-flip:active { transform: rotate(180deg); }
#booth-dialog.ios-cam .cam-privacy { margin: 8px 0 max(18px, env(safe-area-inset-bottom)); color: #ffffff59; }
#booth-dialog.ios-cam :is(.cam-close, .cam-chevron, .cam-flip):focus-visible { outline: 2px solid var(--cam-yellow); outline-offset: 3px; }

/* Strip editor back to the classic look */
#booth-dialog.ios-cam .cam-text-btn { min-height: 0; padding: 8px 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--cam-yellow); font-size: 17px; }
#booth-dialog.ios-cam .cam-sheet-top { grid-template-columns: 64px 1fr 64px; }
#booth-dialog.ios-cam .cam-bw span { background: #ffffff1f; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#booth-dialog.ios-cam .cam-keep { border-radius: 14px; }

/* Short screens and the desktop window: tighter top bar so everything fits */
@media (max-height: 760px), (min-width: 601px) and (max-height: 960px) {
	#booth-dialog.ios-cam .cam-top { min-height: 0; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; }
	#booth-dialog.ios-cam .cam-stage { flex: 1 1 auto; min-height: 0; }
	#booth-dialog.ios-cam .viewfinder { width: auto; height: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	#booth-dialog.ios-cam .cam-focus.is-on { animation: none; opacity: 1; }
	#booth-dialog.ios-cam .cam-flip:active { transform: none; }
}

/* Photo booth on phones (2026-10-08): fit the whole camera in the visible screen,
   including when Safari's toolbar is showing. Controls keep their normal size;
   the viewfinder spans the full width and is up to 3:4 tall, shortening to fit. */
@media (max-width: 600px) {
	#booth-dialog.booth-dialog.ios-cam {
		inset: 0;
		margin: 0;
		width: 100%;
		height: calc(100 * var(--vh));
		height: calc(100 * var(--svh));
		max-height: calc(100 * var(--svh));
	}
	#booth-dialog.ios-cam .cam-top { padding-top: max(10px, env(safe-area-inset-top)); }
	#booth-dialog.ios-cam .cam-stage {
		flex: 1 1 auto;
		min-height: 0;
		container-type: size;
		align-items: center;
		justify-content: center;
	}
	#booth-dialog.ios-cam .viewfinder {
		width: 100%;
		height: min(calc(100cqw * 4 / 3), 100cqh);
		max-height: none;
		aspect-ratio: auto;
		flex: 0 0 auto;
	}
	#booth-dialog.ios-cam .cam-status:empty { display: none; }
	#booth-dialog.ios-cam .cam-privacy { margin-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Hero photo ribbon (2026-10-08): no clipping on the ribbon itself. The page
   already clips sideways (html/body overflow-x: clip), so cards can run to the
   real screen edges even if a browser sizes the full-bleed strip slightly off
   under the 86% site scale. */
.hero-v3 .photo-ribbon { overflow: visible; }

/* Wide screens: the narrow About intro and Privacy page are already centered by max-width,
   so they keep normal side padding instead of the wide-screen centering padding. */
@media (min-width: 1600px) {
	html body .about-simple.section-pad,
	html body .privacy-page.section-pad { padding-inline: 88px; }
}

/* Photo booth open: the page behind it stays put, and on phones the area
   around the camera is solid black instead of showing the page through. */
html.booth-open,
html.booth-open body { overflow: hidden !important; overscroll-behavior: none; }
#booth-dialog.ios-cam { overscroll-behavior: contain; }
@media (max-width: 600px) {
	#booth-dialog.ios-cam::backdrop { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Phones: no auto-zoom when tapping a form field (2026-10-08).
   iPhone Safari zooms in whenever a field's text is smaller than 16px on screen.
   With the 86% site scale, fields need 16 / 0.86 ≈ 18.6px so they show at 16px.
   The embedded design form (Tally) is shown at full size for the same reason. */
@media (max-width: 700px) {
	html body :is(input:not([type='checkbox'], [type='radio'], [type='file'], [type='hidden'], [type='range'], [type='submit'], [type='button']), select, textarea) {
		font-size: calc(16px / var(--site-zoom)) !important;
	}
	.tally-design-embed iframe { zoom: calc(1 / var(--site-zoom)); }
}

/* Gallery photos show without written captions (2026-10-09). The descriptions
   stay in the alt text for screen readers and search. */
.gallery-zoom-figure figcaption,
.gallery-inline-detail figcaption,
#lightbox-caption:empty { display: none; }
.lightbox-bottom { justify-content: flex-end; }

/* Strip editor: delete or retake any of the four photos (2026-10-10). */
#booth-dialog.ios-cam .cam-shots-wrap { padding: 12px 16px 0; }
#booth-dialog.ios-cam .cam-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 0 auto; }
#booth-dialog.ios-cam .cam-shot { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
#booth-dialog.ios-cam .cam-shot canvas { display: block; width: 100%; aspect-ratio: 16 / 11; height: auto; border-radius: 6px; object-fit: cover; background: #1c1c1e; }
#booth-dialog.ios-cam .cam-shot-delete {
	position: absolute; top: -7px; right: -7px; display: grid; place-items: center;
	width: 26px; height: 26px; min-width: 0; min-height: 0; padding: 0;
	border: 2px solid #000; border-radius: 50%; background: #ffffffe6; color: #000;
	font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none;
}
#booth-dialog.ios-cam .cam-shot-retake {
	min-height: 0; padding: 5px 0; border: 0; border-radius: 999px; background: #ffffff1f; box-shadow: none;
	color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
}
#booth-dialog.ios-cam .cam-shot-fill {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	width: 100%; aspect-ratio: 16 / 11; min-height: 0; padding: 0;
	border: 1.5px dashed var(--cam-yellow); border-radius: 6px; background: #ffd60a14; box-shadow: none;
	color: var(--cam-yellow); font-size: 11px; font-weight: 600; cursor: pointer;
}
#booth-dialog.ios-cam .cam-shot-fill span:first-child { font-size: 20px; line-height: 1; }
#booth-dialog.ios-cam .cam-shot.is-empty::after { content: ''; display: block; height: 25px; }
#booth-dialog.ios-cam .cam-shots-hint { margin: 10px 0 0; text-align: center; font-size: 12px; color: #ffffff8c; }
#booth-dialog.ios-cam :is(.cam-shot-delete, .cam-shot-retake, .cam-shot-fill):focus-visible { outline: 2px solid var(--cam-yellow); outline-offset: 2px; }
#booth-dialog.ios-cam .cam-shot-retake:hover { background: #ffffff33; }
@media (max-height: 700px) {
	#booth-dialog.ios-cam .cam-shots { max-width: 320px; gap: 8px; }
	#booth-dialog.ios-cam .cam-shots-hint { margin-top: 6px; }
}