/* Front-end stylesheet manifest.
 *
 * This file only holds @import lines; all rules live in the partials below.
 * Adding a block means dropping assets/src/styles/blocks/<name>.css and adding
 * one @import here. Order matters: tokens first, then globals, then features,
 * and responsive overrides last.
 *
 * Compiled to assets/css/main.build.css by `npm run build`.
 *//* Design tokens.
 *
 * Every colour, radius, easing and measure the theme uses. Components reference
 * these and never hard-code a colour. The context blocks below are what make a
 * section dark or light: set .velour or .light on a section and its children
 * read --fg / --muted / --faint / --line / --accent from it.
 */

:root {
  --velour: #0E2A1C;
  --velour-deep: #08190F;
  --velour-soft: #19402B;
  --sand: #EFE7DB;
  --sand-2: #E5DACA;
  --cream: #F7F2EA;
  --gold: #C4A46A;
  --gold-light: #E2CC98;
  --gold-deep: #8A6A33;
  --pink: #EA3A93;
  --pink-hot: #FF4FA3;
  --night: #0B0D0C;

  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1520px;
  --gutter: clamp(20px, 3.4vw, 56px);
  --section: clamp(96px, 12vw, 190px);
  --cta-gap: clamp(28px, 2.5vw, 36px);
  --d-size: clamp(60px, 8.4vw, 136px);
  --d-md: clamp(48px, 5.4vw, 88px);
  --d-lg: clamp(64px, 9.6vw, 160px);
  --d-xl: clamp(76px, 15vw, 248px);

  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --neon: drop-shadow(0 0 1.5px #FF9CCD) drop-shadow(0 0 6px var(--pink-hot)) drop-shadow(0 0 16px var(--pink)) drop-shadow(0 0 38px rgba(234, 58, 147, .7));
  interpolate-size: allow-keywords;

  /* Subpage tokens: form validation, form surfaces, and the fixed header height
   * that .phero and .formpage offset their top padding against. */
  --error: #C42B5E;
  --cream-2: #FBF8F3;
  --head: 84px;
}

.velour, .footer { --fg: var(--sand); --muted: rgba(239, 231, 219, .66); --faint: rgba(239, 231, 219, .4); --line: rgba(226, 204, 152, .2); --accent: var(--gold-light); }
.footer { --line: rgba(239, 231, 219, .12); }
.light { --fg: var(--velour); --muted: rgba(14, 42, 28, .7); --faint: rgba(14, 42, 28, .45); --line: rgba(14, 42, 28, .15); --accent: var(--gold-deep); }

/* Light surfaces that sit inside dark sections and need the light context
 * tokens without the .light background. */
.formcard, .cart__panel, .sheet__panel, .store .woocommerce-order, .store .woocommerce-form-login, .store .woocommerce-ResetPassword { --fg: var(--velour); --muted: rgba(14, 42, 28, .68); --faint: rgba(14, 42, 28, .45); --line: rgba(14, 42, 28, .14); --accent: var(--gold-deep); }
/* Reset, base elements, utilities and the section shell.
 *
 * .wrap is the horizontal shell (max-width + gutter) used by every section.
 * Vertical rhythm is not here: each section owns `padding: var(--section) 0`,
 * so changing --section in tokens.css retunes the whole page.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--velour); color: var(--sand);
  font-family: var(--f-body); font-size: 16px; line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::-moz-selection { background: var(--pink); color: var(--velour-deep); }
::selection { background: var(--pink); color: var(--velour-deep); }
:focus, :focus-visible { outline: none; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 500; left: 12px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--pink); color: var(--velour-deep); }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.light { background: var(--sand); color: var(--fg); }
.velour { position: relative; isolation: isolate; color: var(--fg); background: radial-gradient(120% 90% at 50% 0%, var(--velour-soft) 0%, var(--velour) 45%, var(--velour-deep) 100%); }
.velour { overflow: clip; }
.velour__bg, .menu__bg { content: ""; position: absolute; inset: -180px -90px; z-index: -1; pointer-events: none; background: url(../images/palm-damask.png) 0 0 / 560px; opacity: .05; animation: sway 26s ease-in-out infinite alternate; will-change: transform; }
.velour:not(.is-inview) .velour__bg { animation-play-state: paused; }
@keyframes sway { from { translate: -40px -14px; } to { translate: 40px 16px; } }

/* Shared neon flicker, used by the curtain B, the hero sign and the footer
 * logo. Lives here because three unrelated components animate with it. */
@keyframes flicker {
  0%, 4% { opacity: 0; } 5% { opacity: 1; } 8% { opacity: .15; } 11% { opacity: 1; } 13% { opacity: .2; }
  21% { opacity: .2; } 22% { opacity: 1; } 25% { opacity: .5; } 27%, 100% { opacity: 1; }
}
/* Display type, inline links and the section head rule.
 *
 * .display is the condensed Archivo heading used across every section; the
 * --rule custom property on .head is animated from 0 to 1 by GSAP to draw the
 * hairline in. .has-ring is set by JS when a line contains a tall diacritic
 * (å, é, ö) that would otherwise clip against the tight line-height.
 */

.display {
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: var(--d-size); line-height: .84; letter-spacing: -.005em;
}
.display--md { font-size: var(--d-md); }
.display--lg { font-size: var(--d-lg); line-height: .82; }
.display--xl { font-size: var(--d-xl); line-height: .8; letter-spacing: -.012em; }
.display .line-mask { padding-top: .34em; margin-top: -.34em; }
.has-ring { line-height: 1 !important; }
.head .display, .faq__head .display { margin-top: .16em; }

.link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; transition: color .3s; }
.link svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.link:hover svg { transform: translateX(5px); }
.link:hover { color: var(--pink); }
.link--light { color: var(--sand); }

.head, .faq__head { position: relative; }
.head::before, .faq__head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(var(--rule, 1)); transform-origin: left; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 22px; margin-bottom: clamp(28px, 3.4vw, 52px); }
.head--sm { padding-top: 18px; margin-bottom: clamp(24px, 2.6vw, 40px); align-items: center; }

@media (max-width: 640px) {
  .head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .head--sm, .meet .head { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; }
}

/* Breadcrumbs.
 *
 * Colour comes from the surrounding context tokens, so the same markup works on
 * a dark .velour hero and a light .pdp section without a modifier.
 */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: clamp(28px, 4vw, 52px); }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--pink); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs [aria-current] { color: var(--fg); }
/* Long-form prose.
 *
 * Used by the legal page template and by the fallback templates, so a page of
 * plain editor content still reads as part of the site.
 */

.legal { padding: var(--section) 0; }
.legal__grid { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.2fr); gap: 40px clamp(40px, 7vw, 140px); align-items: start; }
.legal__toc { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--muted); }
.legal__toc a:hover { color: var(--fg); }
.legal__body { max-width: 68ch; }
.legal__body h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; margin: 48px 0 12px; scroll-margin-top: 110px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 14px; }
.legal__body a { color: var(--fg); border-bottom: 1px solid currentColor; }
/* Gravity Forms, mapped onto the theme's own field styles.
 *
 * The plugin renders its own markup and loads its stylesheet after the theme's,
 * so matching source order is not enough: several of these need to meet or beat
 * .gform_wrapper.gravity-theme on specificity. The doubled wrapper class is
 * what does that, rather than scattering !important through the file.
 *
 * Forms only ever appear on the light .formcard surface, so there is no dark
 * context to re-declare.
 */

/* The plugin already lays the fields out on a 12-column grid and spans each
 * field according to the width picked in the form editor, so only the gap is
 * restated. Overriding the grid would mean re-deriving those spans here and
 * would break the editor's own width control; this way a field set to half
 * width pairs up on one row, the way the original's .form__row did, with no
 * CSS change. */
.formcard .gform_wrapper.gravity-theme .gform_fields {
	gap: 26px 18px;
}

.formcard .gform_wrapper.gravity-theme .gfield {
	display: grid;
	gap: 8px;
	padding: 0;
}

/* ------------------------------------------------------------- labels --- */

.formcard .gform_wrapper.gravity-theme .gfield_label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--fg);
}

/* The originals mark the optional fields, not the required ones, so the
 * plugin's required indicator is dropped and the inverse is added instead.
 * Keying off the plugin's own class means a field toggled in the form editor
 * picks this up without a CSS change. */
/* The label is named so this outranks the plugin's own
 * .gform-field-label > .gfield_required, which otherwise ties and wins on load
 * order, since the plugin's stylesheets are enqueued after the theme's. */
.formcard .gform_wrapper.gravity-theme .gfield_label .gfield_required,
.formcard .gform_wrapper.gravity-theme .gfield_label > .gfield_required {
	display: none;
}

/* "valgfri" sits next to the label in grey, as .field label span does. */
.formcard .gform_wrapper.gravity-theme .gfield:not( .gfield_contains_required ) .gfield_label::after {
	content: " valgfri";
	color: var(--muted);
	font-weight: 400;
}

.formcard .gform_wrapper.gravity-theme .gfield_description {
	padding: 0;
	font-size: 13.5px;
	color: var(--muted);
}

/* The plugin repeats the form title above the fields; the block's own heading
 * already says what this is. */
.formcard .gform_wrapper .gform_heading {
	display: none;
}

/* ------------------------------------------------------------- inputs --- */

.formcard .gform_wrapper.gravity-theme .gfield input[type="text"],
.formcard .gform_wrapper.gravity-theme .gfield input[type="email"],
.formcard .gform_wrapper.gravity-theme .gfield input[type="tel"],
.formcard .gform_wrapper.gravity-theme .gfield input[type="number"],
.formcard .gform_wrapper.gravity-theme .gfield input[type="date"],
.formcard .gform_wrapper.gravity-theme .gfield textarea,
.formcard .gform_wrapper.gravity-theme .ginput_container_select select {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--cream-2);
	color: var(--fg);
	font: inherit;
	font-size: 16px;
	padding: 0 16px;
	height: 54px;
	transition: border-color .3s, background-color .3s;
}

.formcard .gform_wrapper.gravity-theme .gfield textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}

.formcard .gform_wrapper.gravity-theme .gfield .ginput_container > :is( input, textarea, select ):hover {
	border-color: rgba(14, 42, 28, .3);
}

.formcard .gform_wrapper.gravity-theme .gfield .ginput_container > :is( input, textarea, select ):focus {
	outline: none;
	border-color: var(--velour);
	background: #fff;
}

/* The native arrow is replaced by the same CSS chevron .select uses. */
.formcard .gform_wrapper.gravity-theme .ginput_container_select select {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	cursor: pointer;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_select {
	position: relative;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_select::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	pointer-events: none;
}

/* The datepicker toggle is a sibling button the plugin lays out beside the
 * input. It is placed inside the field's right edge instead, where the
 * original's native date picker showed its indicator, and kept as a button so
 * it still opens the calendar and stays reachable by keyboard. */
.formcard .gform_wrapper.gravity-theme .ginput_container_date {
	position: relative;
	display: block;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_date input.datepicker {
	width: 100%;
	padding-right: 52px;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_date .gform-datepicker-toggle {
	position: absolute;
	top: 0;
	right: 6px;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--fg);
	opacity: .55;
	cursor: pointer;
	transition: opacity .3s;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_date .gform-datepicker-toggle:is( :hover, :focus-visible ) {
	opacity: 1;
}

.formcard .gform_wrapper.gravity-theme .ginput_container_date .gform-datepicker-toggle-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

/* The plugin sizes and colours the glyph on the pseudo-element itself (24px,
 * grey), so sizing the span alone leaves the glyph spilling out of its box.
 * The field-type class is named to outrank that rule. */
.formcard .gform_wrapper.gravity-theme .gfield--datepicker-default-icon .ginput_container_date .gform-calendar-icon::before {
	font-size: 20px;
	line-height: 1;
	color: inherit;
}

/* --------------------------------------------------------- validation --- */

.formcard .gform_wrapper.gravity-theme .gfield_error .ginput_container > :is( input, textarea, select ) {
	border-color: var(--error);
}

/* The message also carries .gfield_description, so the plugin's
 * .field_sublabel_above .gfield_description margin ties with a three-class
 * selector and wins on load order; .gfield is named to outrank it. The 2px
 * sits on top of the field's 8px gap, as .field__error did in the original. */
.formcard .gform_wrapper.gravity-theme .gfield .gfield_validation_message,
.formcard .gform_wrapper.gravity-theme .gfield .validation_message {
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--error);
}

/* The summary at the top of the form repeats what each field already says. */
.formcard .gform_wrapper.gravity-theme .gform_validation_errors {
	display: none;
}

/* ------------------------------------------------------------- submit --- */

/* The original .form spaces every row, the button included, with one 26px
 * gap. The footer sits outside the fields grid, so it takes the same space as
 * a margin. */
.formcard .gform_wrapper.gravity-theme .gform_footer {
	margin: 26px 0 0;
	padding: 0;
}

/* Matches .btn.btn--pink plus .form__submit. The roll-up label needs a span
 * the plugin does not render, so the button is styled flat; everything else
 * about it is the same. */
.formcard .gform_wrapper.gravity-theme .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 58px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--pink);
	color: var(--velour-deep);
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: background-color .35s, color .35s;
}

.formcard .gform_wrapper.gravity-theme .gform_button:hover {
	background: #F67BB8;
}

.formcard .gform_wrapper.gravity-theme .gform_ajax_spinner {
	margin-left: 12px;
}

/* ------------------------------------------------------- confirmation --- */

/* Styled to match the original's .form__done panel. */
.formcard .gform_confirmation_wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: clamp(12px, 3vw, 40px) 0;
}

.formcard .gform_confirmation_message {
	max-width: 40ch;
	color: var(--muted);
	font-size: 17px;
}

.formcard .gform_confirmation_message :is( h2, h3 ) {
	font-family: var(--f-display);
	font-stretch: 62%;
	font-weight: 900;
	text-transform: uppercase;
	font-size: var(--d-md);
	line-height: .84;
	color: var(--fg);
	margin: 0 0 4px;
}

@media (max-width: 760px) {
	/* The plugin keeps half-width fields paired at every width, while the
	 * original stacks them. 1 / -1 fills the row whatever the column count. */
	.formcard .gform_wrapper.gravity-theme .gfield.gfield--width-half {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------- datepicker --- */

/* The plugin's calendar is drawn inside the field container, so it is styled
 * here in the theme's tokens rather than its own slate greys. */
.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
	color: var(--fg);
	font-family: var(--f-body);
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar select {
	height: 38px;
	padding: 0 36px 0 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background-color: var(--cream-2);
	background-position: right 10px center;
	background-size: 18px 18px;
	color: var(--fg);
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 500;
	transition: border-color .3s;
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar select:hover {
	border-color: rgba(14, 42, 28, .3);
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar select:focus {
	outline: none;
	border-color: var(--velour);
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar .nav:is( .prev, .next ) {
	color: var(--fg);
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar th span {
	color: var(--muted);
}

/* Bookable days. */
.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day:not( .disabled ),
.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day:not( .disabled ) span {
	cursor: pointer;
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day span {
	color: var(--fg);
}

.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day:not( .disabled ) span:is( :hover, :focus ),
.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day:not( .disabled ):focus span {
	border-color: var(--velour);
	background: var(--cream-2);
}

/* Days outside the bookable range. The plugin fills these with a grey disc,
 * and today with a solid one, which reads as a selection; they are faded out
 * instead. Today is always outside the range, so it is covered here too. */
.formcard .gform_wrapper.gravity-theme .gform-datepicker-calendar table.calendar td.day.disabled span {
	border-color: transparent;
	background: none;
	box-shadow: none;
	color: var(--muted);
	opacity: .4;
	cursor: default;
}
/* Grid rules the original shares across several section layouts.
 * Kept together, with their selector lists intact, rather than duplicated
 * into each block's stylesheet. */

.pdp__grid > *, .formpage__grid > *, .band__grid > *, .faqx__grid > *, .terms__grid > *, .legal__grid > * { min-width: 0; }

@media (max-width: 999px) {
  .band__grid, .formpage__grid, .pdp__grid, .terms__grid, .faqx__grid, .legal__grid { grid-template-columns: 1fr; }
  .formpage__intro, .gallery, .legal__toc { position: static; }
}

/* Buttons.
 *
 * .btn__roll is the label that rolls up on hover, using a text-shadow clone
 * below it rather than duplicated markup. .btn__fill is the circular wipe that
 * main.js injects and positions from the pointer coordinates; it is suppressed
 * on touch, where there is no hover to trigger it.
 */

.btn__icon { width: 20px; height: 20px; margin-right: 10px; flex: none; }

.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  height: 54px; padding: 0 28px; border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  transition: color .35s ease .06s, box-shadow .35s ease;
}
.btn__roll { display: inline-block; line-height: 1.2; text-shadow: 0 2.4em currentColor; transition: transform .55s var(--ease); }
.btn:hover .btn__roll { transform: translateY(-2.4em); }
.btn--pink { background: var(--pink); color: var(--velour-deep); }
.btn--ghost { box-shadow: inset 0 0 0 1px rgba(239, 231, 219, .4); color: var(--sand); }
.btn--line { box-shadow: inset 0 0 0 1px var(--accent); color: var(--fg); }
.btn--sand { background: var(--sand); color: var(--velour); }
.btn--white { background: #fff; color: var(--night); }
.btn--white .btn__fill { background: #F67BB8; }

.btn__fill { position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); transition: transform .7s cubic-bezier(.22, .7, .25, 1); will-change: transform; }
.btn__fill.on { transform: translate(-50%, -50%) scale(1); transition-duration: 1s; }
.btn--pink .btn__fill { background: #F67BB8; }
.btn--ghost .btn__fill, .btn--line .btn__fill, .btn--sand .btn__fill { background: #fff; }
.btn--ghost.is-filled, .btn--line.is-filled, .header .btn--ghost.is-filled { color: var(--velour); box-shadow: inset 0 0 0 1px transparent; }
@media not (hover: hover) { .btn__fill { display: none; } }
.btn--sm { height: 42px; padding: 0 20px; font-size: 14px; }
.btn--head { height: 48px; padding: 0 24px; font-size: 15px; }

@media (max-width: 999px) {
  .btn--head { height: 42px; padding: 0 18px; font-size: 14px; }
}

@media (max-width: 640px) {
  .btn { height: 50px; padding: 0 22px; }
  .btn--head { height: 42px; padding: 0 18px; }
}

/* Custom cursor and the image peek.
 *
 * Both are single, document-level elements that main.js moves with GSAP
 * quickTo. The cursor label is filled from the [data-cursor] element under the
 * pointer; the peek frame is filled from [data-peek]. Fine pointers only: on
 * touch the cursor is hidden and the peek opens on tap instead.
 */

.cursor { position: fixed; z-index: 350; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; pointer-events: none; transform: translate3d(-200px, -200px, 0); }
.cursor__ball { width: 100%; height: 100%; border-radius: 50%; background: var(--velour); color: var(--sand); box-shadow: 0 18px 40px -16px rgba(8, 25, 15, .6); display: grid; place-items: center; transform: scale(0); transition: transform .45s var(--ease); }
.cursor.is-on .cursor__ball { transform: scale(1); }
.cursor__label { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.peek { position: fixed; z-index: 340; left: 0; top: 0; width: clamp(240px, 22vw, 360px); aspect-ratio: 4 / 5; pointer-events: none; transform: translate3d(-600px, -600px, 0); }
.peek__frame { position: absolute; inset: 0; translate: -50% -50%; border-radius: 12px; overflow: hidden; clip-path: inset(50% 50% 50% 50% round 12px); transition: clip-path .7s var(--ease); background: var(--velour-deep); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.peek__frame img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; scale: 1.25; transition: scale 1s var(--ease); }
.peek.is-on .peek__frame { clip-path: inset(0 0 0 0 round 12px); }
.peek.is-on .peek__frame img { scale: 1; }
@media (hover: hover) and (pointer: fine) { .pill { cursor: none; } }
@media not (hover: hover) { .cursor { display: none; } }
/* Page-transition curtain.
 *
 * main.js drops the curtain, lights the neon B, then performs a real page
 * navigation and raises it again on arrival via a sessionStorage flag. The
 * .curtain-in class is set by an inline script in <head> so an arriving page
 * paints already covered, with no transition to unwind.
 */

.curtain { position: fixed; z-index: 260; inset: 0; pointer-events: none; transform: translate3d(0, calc(-100% - 160px), 0); transition: transform .9s cubic-bezier(.76, 0, .24, 1); }
.curtain.is-down, .curtain-in .curtain { transform: none; pointer-events: auto; }
.curtain-in .curtain { transition: none; }
.curtain-in .curtain__b, .curtain.is-arriving .curtain__b { opacity: 1; animation: none; }
html.is-locked { overflow: hidden; }
.curtain__cloth {
  position: absolute; inset: 0; box-shadow: 0 40px 80px rgba(6, 17, 11, .55);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .08) 26px, rgba(255, 255, 255, .045) 48px, rgba(0, 0, 0, .08) 70px, rgba(0, 0, 0, .34) 96px),
    radial-gradient(120% 80% at 50% 30%, var(--velour-soft), var(--velour) 55%, var(--velour-deep));
}
.curtain__cloth::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent); }
.curtain__b { position: absolute; left: 50%; top: 50%; width: clamp(64px, 7vw, 96px); height: auto; translate: -50% -50%; overflow: visible; filter: var(--neon); opacity: 0; }
.curtain.is-lit .curtain__b { animation: flicker 1.2s linear forwards; }
/* Fixed header.
 *
 * --h-fg / --h-line are the header's own foreground tokens, re-pointed by the
 * .is-light class that main.js toggles from each section's data-theme. .is-solid
 * adds the blur once scrolled past the hero; .is-hidden slides it away on
 * downward scroll; .is-menu makes it transparent while the overlay is open.
 */

.header {
  --h-fg: var(--sand); --h-line: rgba(239, 231, 219, .4);
  position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 84px; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--h-fg);
  transition: transform .6s var(--ease), background-color .5s, color .5s;
}
.header::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 25, 15, .55), transparent); transition: opacity .5s; }
.header.is-solid::before, .header.is-light::before { opacity: 0; }
.header.is-solid { background: rgba(14, 42, 28, .74); backdrop-filter: blur(18px) saturate(1.3); }
.header.is-light { --h-fg: var(--velour); --h-line: rgba(14, 42, 28, .35); }
.header.is-light.is-solid { background: rgba(239, 231, 219, .82); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-menu { --h-fg: var(--sand); --h-line: rgba(239, 231, 219, .4); background: transparent !important; backdrop-filter: none; }
.header.is-menu::before { opacity: 0; }
.header__nav { display: flex; gap: clamp(20px, 2vw, 32px); font-size: 14.5px; font-weight: 500; }
.header__nav a { position: relative; padding: 6px 0; white-space: nowrap; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__nav a[aria-current]::after { transform: scaleX(1); background: var(--pink); }
.header__menu { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.header__menu i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.header__menu i:first-child { top: 17px; }
.header__menu i:last-child { top: 25px; }
.header__menu[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.header__menu[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }
.header__logo { color: var(--pink); }
.header__logo svg { width: 178px; height: 41px; }
.header__end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.header__lang { font-size: 13px; font-weight: 600; letter-spacing: .04em; padding: 8px 10px; margin-right: 4px; opacity: .8; transition: opacity .3s; }
.header__lang:hover { opacity: 1; }
.header__cart { position: relative; width: 48px; height: 48px; margin-right: 2px; border-radius: 50%; display: grid; place-items: center; color: inherit; transition: background-color .3s; }
.header__cart:not([hidden]) { animation: cartIn .6s var(--ease); }
.header__cart:hover { background: rgba(239, 231, 219, .08); }
.header.is-light .header__cart:hover { background: rgba(14, 42, 28, .06); }
.header__cart svg { width: 24px; height: 24px; }
.header__count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: var(--velour-deep); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.header__cart.is-bump .header__count { animation: bump .6s var(--ease); }
@keyframes cartIn { from { opacity: 0; transform: scale(.6); } }
@keyframes bump { 40% { transform: scale(1.5); } }
.header .btn--ghost { color: var(--h-fg); box-shadow: inset 0 0 0 1px var(--h-line); }

@media (max-width: 1240px) {
  .header__nav { gap: 18px; font-size: 14px; }
  .header__logo svg { width: 150px; height: 35px; }
  .header__end .header__lang { display: none; }
}

@media (min-width: 1000px) and (max-width: 1099px) {
  .header__nav { gap: 14px; font-size: 13.5px; }
  .header__logo svg { width: 136px; height: 32px; }
}

@media (max-width: 999px) {
  .header { height: 66px; }
  .header { grid-template-columns: auto 1fr auto; }
  .header__nav, .header__contact { display: none; }
  .header__logo { grid-column: 1; grid-row: 1; }
  .header__end { grid-column: 3; gap: 6px; }
  .header__cart { width: 42px; height: 42px; margin-right: 0; }
  .header__menu { display: block; }
  .header__logo svg { width: 132px; height: 30px; }
}

@media (max-width: 400px) {
  .has-cart .header__logo svg, .has-cart .header.is-solid .header__logo svg { width: 108px; height: 25px; }
  .has-cart .header__end .btn--head { padding: 0 14px; }
  .has-cart .header__end { gap: 2px; }
}

@media (max-width: 359px) {
  .header__logo svg { width: 112px; height: 26px; }
  .header .btn--head { padding: 0 14px; font-size: 13.5px; }
}

/* Full-screen mobile menu.
 *
 * Opens and closes by animating clip-path, with the links staggering in behind
 * it. main.js keeps the element hidden between states so it stays out of the
 * tab order, and .is-closing runs the exit animation before that happens.
 */

.menu { position: fixed; z-index: 90; inset: 0; background: var(--velour); color: var(--sand); display: flex; flex-direction: column; justify-content: space-between; padding: 108px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.menu { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.menu > * { position: relative; }
.menu.is-open { animation: menuIn .7s cubic-bezier(.76, 0, .24, 1); }
@keyframes menuIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.menu.is-closing { animation: menuOut .65s cubic-bezier(.76, 0, .24, 1) forwards; }
.menu.is-closing .menu__nav a, .menu.is-closing .menu__foot { animation: down .4s var(--ease) forwards; }
@keyframes menuOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes down { to { opacity: 0; transform: translateY(-24%); } }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 10.2vw, 96px); line-height: .92; padding: 14px 0 10px; border-bottom: 1px solid rgba(226, 204, 152, .16); }
.menu__nav a[aria-current] { color: var(--pink); }
.menu.is-open .menu__nav a { animation: up .9s var(--ease) both; }
.menu.is-open .menu__nav a:nth-child(2) { animation-delay: .05s; }
.menu.is-open .menu__nav a:nth-child(3) { animation-delay: .1s; }
.menu.is-open .menu__nav a:nth-child(4) { animation-delay: .15s; }
.menu.is-open .menu__nav a:nth-child(5) { animation-delay: .2s; }
@keyframes up { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
.menu__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.menu__foot .header__lang { margin-left: -10px; }
.socials { display: flex; gap: 2px; }
.socials a { width: 42px; height: 42px; display: grid; place-items: center; opacity: .7; transition: opacity .3s, color .3s; }
.socials a:hover { opacity: 1; color: var(--pink-hot); }
.socials svg { width: 20px; height: 20px; }
/* Cart drawer.
 *
 * Slides in from the right over a scrim. .is-empty swaps the item list and
 * footer for the empty state, so cart.js only toggles one class. The panel runs
 * on light context tokens, declared alongside the other light surfaces in
 * tokens.css.
 */

.cart { position: fixed; z-index: 290; inset: 0; }
.cart__scrim { position: absolute; inset: 0; background: rgba(5, 14, 10, .55); opacity: 0; transition: opacity .5s var(--ease); }
.cart__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 460px); display: flex; flex-direction: column; background: var(--sand); color: var(--fg); transform: translate3d(100%, 0, 0); transition: transform .65s cubic-bezier(.76, 0, .24, 1); box-shadow: -30px 0 80px -30px rgba(5, 14, 10, .5); }
.cart.is-open .cart__scrim { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--line); }
.cart__title { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 38px; line-height: .9; display: flex; align-items: flex-start; gap: 8px; }
.cart__title span { font-family: var(--f-body); font-stretch: 100%; font-size: 13px; font-weight: 600; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--velour); color: var(--sand); display: inline-grid; place-items: center; }
.cart__close { width: 48px; height: 48px; margin-right: -8px; border-radius: 50%; display: grid; place-items: center; transition: background-color .25s; }
.cart__close:hover { background: rgba(14, 42, 28, .08); }
.cart__close svg { width: 22px; height: 22px; }
.cart__items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 clamp(20px, 2.4vw, 32px); }
.citem { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: opacity .3s, transform .3s; }
.citem.is-leaving { opacity: 0; transform: translateX(20px); }
.citem__img { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--sand-2); }
.citem__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.citem__body { display: flex; flex-direction: column; min-width: 0; }
.citem__top { display: flex; justify-content: space-between; gap: 12px; }
.citem__title { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.citem__price { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.citem__meta { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.citem__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.citem__remove, .citem__edit { font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid currentColor; transition: color .25s; }
.citem__remove:hover, .citem__edit:hover { color: var(--fg); }
.cart__empty { flex: 1; display: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 0 clamp(20px, 2.4vw, 32px); }
.cart__empty p { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.cart.is-empty .cart__empty { display: flex; }
.cart.is-empty .cart__items, .cart.is-empty .cart__foot { display: none; }
.cart__foot { padding: 20px clamp(20px, 2.4vw, 32px) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total span { font-size: 15px; font-weight: 500; }
.cart__total strong { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 40px; line-height: .9; font-variant-numeric: tabular-nums; }
.cart__note { font-size: 13px; color: var(--muted); }
.cart__checkout { width: 100%; height: 58px; font-size: 16px; margin-top: 6px; }
.cart__more { justify-self: center; font-size: 14px; font-weight: 500; color: var(--muted); padding: 8px; transition: color .25s; }
.cart__more:hover { color: var(--fg); }

/* While the store answers a change, the list dims and stops taking clicks so a
 * second change cannot race the first. */
.cart.is-busy .cart__items {
	opacity: .6;
	pointer-events: none;
	transition: opacity .2s;
}
/* Quantity stepper, shared by the cart drawer, the polterabend booking and
 * the staff shop's product page. Ported unchanged from the original pages.css. */

.stepper { display: inline-flex; align-items: center; height: 54px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-2); }
.stepper button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: background-color .25s, opacity .25s; }
.stepper button:hover:not(:disabled) { background: rgba(14, 42, 28, .08); }
.stepper button:disabled { opacity: .25; cursor: default; }
.stepper svg { width: 18px; height: 18px; }
.stepper output { min-width: 44px; text-align: center; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper--sm { height: 38px; padding: 2px; }
.stepper--sm button { width: 32px; height: 32px; }
.stepper--sm svg { width: 15px; height: 15px; }
.stepper--sm output { min-width: 30px; font-size: 15px; }
/* Product page and booking form: the step fieldsets, calendar, chips, gallery,
 * buy column, packages, add-ons and total. Shared by the polterabend booking
 * and the staff shop's product page, so it lives here rather than with either
 * block. Ported unchanged from the original pages.css, in its order. */

.fstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.fstep__label { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; margin-bottom: 12px; }
.fstep__label > span:not(.fstep__value) { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--velour); color: var(--sand); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.fstep__value { font-weight: 400; color: var(--muted); }
.fstep__link { margin-left: auto; font-size: 13.5px; font-weight: 500; color: var(--muted); border-bottom: 1px solid currentColor; }
.fstep__hint { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.fstep__hint--error, .fstep > .field__error { color: var(--error); font-weight: 500; }
.fstep__row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fstep__row .fstep__hint { margin: 0; max-width: 32ch; }
.fstep.is-invalid .cal, .fstep.is-invalid .chips button { border-color: var(--error); }
.fstep > .field__error { margin-top: 10px; }

.cal { border: 1px solid var(--line); border-radius: 16px; padding: clamp(14px, 1.6vw, 20px); background: var(--cream-2); transition: border-color .3s; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__month { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cal__nav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background-color .25s, opacity .25s; }
.cal__nav:hover:not(:disabled) { background: rgba(14, 42, 28, .07); }
.cal__nav:disabled { opacity: .25; cursor: default; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__wd { justify-self: center; width: 100%; max-width: 52px; text-align: center; font-size: 12px; font-weight: 500; color: var(--faint); padding-bottom: 6px; }
.cal__day { justify-self: center; width: 100%; max-width: 52px; aspect-ratio: 1; border-radius: 12px; font-size: 15px; color: var(--faint); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.cal__day:disabled { cursor: default; opacity: .55; }
.cal__day.is-open { color: var(--fg); font-weight: 600; background: rgba(14, 42, 28, .06); }
.cal__day.is-open:hover { background: rgba(14, 42, 28, .13); }
.cal__day.is-picked, .cal__day.is-picked:hover { background: var(--pink); color: var(--velour-deep); }
.cal__legend { margin-top: 12px; font-size: 13px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.cal__legend i { width: 14px; height: 14px; border-radius: 4px; background: rgba(14, 42, 28, .1); }

.chips, .seg { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .seg button { height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream-2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s, border-color .25s; }
.chips button:hover, .seg button:hover { border-color: rgba(14, 42, 28, .35); }
.chips button[aria-checked="true"], .seg button[aria-checked="true"] { background: var(--velour); border-color: var(--velour); color: var(--sand); }

.pdp { padding: calc(var(--head) + 28px) 0 var(--section); }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px clamp(36px, 5vw, 96px); align-items: start; }
.gallery { position: sticky; top: 100px; }
.gallery__main { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--sand-2); touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .6s var(--ease), scale 1s var(--ease); pointer-events: none; }
.gallery__main img.is-active { opacity: 1; scale: 1; }
.gallery__count { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 25, 15, .55); color: var(--sand); font-size: 13px; font-weight: 500; backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs button { flex: none; width: 76px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; opacity: .45; transition: opacity .3s; }
.gallery__thumbs button.is-active, .gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.buy { display: grid; gap: 30px; }
.buy__title { font-size: clamp(64px, 8.4vw, 136px); line-height: .82; margin-left: -.03em; }
.buy--shop .buy__title { font-size: clamp(52px, 6vw, 96px); }
.buy__lede { max-width: none; font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); margin-top: -12px; }
.buy__from, .buy__price { font-size: 18px; margin-top: -14px; }
.buy__from strong, .buy__price { font-weight: 600; }
.buy__price { font-size: 22px; }
.buy__desc { margin-top: -6px; color: var(--fg); opacity: .8; }
.buy__cat { font-size: 14px; color: var(--muted); margin-bottom: -20px; }
.buy__row { display: flex; gap: 12px; }
.buy__row .buy__add { flex: 1; }
.buy__add { height: 58px; font-size: 16px; }
.buy__pickup { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-top: -10px; }
.buy__pickup svg { width: 18px; height: 18px; color: var(--velour); flex: none; }
.buy__info { margin-top: 6px; }
.buy__info .qa:first-child { border-top: 1px solid var(--line); }

.pkgs { display: grid; gap: 10px; }
.pkg { position: relative; display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--cream-2); cursor: pointer; transition: border-color .3s, background-color .3s, box-shadow .3s; }
.pkg:hover { border-color: rgba(14, 42, 28, .35); }
.pkg input { position: absolute; opacity: 0; pointer-events: none; }
.pkg:has(input:checked) { border-color: var(--velour); background: #fff; box-shadow: inset 0 0 0 1px var(--velour); }
.pkg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pkg__name { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: .9; }
.pkg__name::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 12px; border-radius: 50%; border: 1.5px solid rgba(14, 42, 28, .35); vertical-align: 3px; transition: border-width .25s, border-color .25s; }
.pkg:has(input:checked) .pkg__name::before { border: 5px solid var(--pink); }
.pkg__price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pkg__price small { font-weight: 400; color: var(--muted); font-size: 13px; }
.pkg__list { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-left: 28px; font-size: 14px; color: var(--muted); }
.pkg__list span { display: inline-flex; align-items: center; gap: 7px; }
.pkg__list span::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--gold-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.pkg__badge { position: absolute; top: -11px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--pink); color: var(--velour-deep); font-size: 12px; font-weight: 600; }

.addons { display: grid; border-top: 1px solid var(--line); }
.addon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.addon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.addon__box { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(14, 42, 28, .35); display: grid; place-items: center; background: var(--cream-2); transition: background-color .25s, border-color .25s; }
.addon__box svg { width: 15px; height: 15px; color: var(--sand); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ease); }
.addon input:checked + .addon__box { background: var(--velour); border-color: var(--velour); }
.addon input:checked + .addon__box svg { opacity: 1; transform: none; }
.addon__name { font-size: 15.5px; font-weight: 500; }
.addon__name small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.addon__price { font-size: 15px; font-weight: 600; white-space: nowrap; }
.addon.is-included { cursor: default; }
.addon.is-included .addon__price { color: var(--gold-deep); font-weight: 500; }
.addon.is-included .addon__box { background: var(--gold-deep); border-color: var(--gold-deep); }

.total { --fg: var(--sand); --muted: rgba(239, 231, 219, .66); background: var(--velour); color: var(--fg); border-radius: 20px; padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 16px; }
.total__lines { display: grid; gap: 8px; font-size: 14.5px; color: var(--muted); }
.total__lines > div { display: flex; justify-content: space-between; gap: 16px; }
.total__lines .is-when { color: var(--gold-light); }
.total__sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid rgba(226, 204, 152, .22); }
.total__sum span { font-size: 15px; font-weight: 500; }
.total__sum strong { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: clamp(40px, 3.6vw, 56px); line-height: .9; font-variant-numeric: tabular-nums; }
.total__missing { font-size: 14px; color: var(--gold-light); }
.total__note { font-size: 13px; color: var(--muted); text-align: center; }
.total .buy__add { width: 100%; }

@media (max-width: 999px) {
  .pdp { padding-top: calc(var(--head) + 20px); }
  .gallery { margin: 0 calc(var(--gutter) * -1); }
  .gallery__main { border-radius: 0; aspect-ratio: 4 / 4.4; }
  .gallery__thumbs { padding: 0 var(--gutter); }
}

@media (max-width: 420px) {
  .cal { padding: 12px; }
  .cal__grid { gap: 2px; }
  .cal__day { font-size: 14px; border-radius: 10px; }
  .chips button { padding: 0 14px; }
  .pkg__list { padding-left: 0; }
  .buy__row .buy__add { min-width: 0; padding: 0 18px; }
}

/* Staff shop: the password screen, the product grid and cards, colour
 * swatches, sizes and the "See also" row. Ported unchanged from the original
 * pages.css. Rules the original never used (quick-add, tags, colour dots, the
 * toolbar and the size sheet) are left out. */

.login { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(var(--head) + 40px) 0 80px; text-align: center; }
.login__inner { width: 100%; display: flex; flex-direction: column; align-items: center; }
.login__inner > .display { width: 100%; }
.login__form { width: min(100%, 420px); display: grid; gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.login__field { position: relative; }
.login__field input { width: 100%; height: 58px; border-radius: 999px; border: 1px solid rgba(239, 231, 219, .28); background: rgba(239, 231, 219, .06); color: var(--sand); font: inherit; font-size: 16px; padding: 0 24px; text-align: center; transition: border-color .3s, background-color .3s; }
.login__field input::-moz-placeholder { color: rgba(239, 231, 219, .45); }
.login__field input::placeholder { color: rgba(239, 231, 219, .45); }
.login__field input:focus { outline: none; border-color: var(--sand); background: rgba(239, 231, 219, .1); }
.login__error { color: #FF8FBF; font-size: 14px; font-weight: 500; }
.login__submit { height: 58px; }
.login__form.is-wrong .login__field { animation: shake .45s; }
.login__form.is-wrong input { border-color: #FF8FBF; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.shop { padding: clamp(40px, 5vw, 72px) 0 var(--section); }

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 4vw, 60px) clamp(14px, 1.8vw, 24px); }
.pcard { position: relative; }
.pcard__link { display: block; }
.pcard__img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: opacity .6s var(--ease), scale 1.2s var(--ease); }
.pcard__alt { opacity: 0; }
.pcard__info { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
@media (max-width: 760px) { .pcard__info { flex-direction: column; gap: 2px; margin-top: 10px; } .pcard__name { font-size: 15px; } .pcard__price { font-size: 14px; color: var(--muted); } }
.pcard__link:hover .pcard__name { color: var(--pink); }
.pcard__name { font-size: 16px; font-weight: 600; letter-spacing: -.015em; transition: color .3s; }
.pcard__name:hover { color: var(--pink); }
.pcard__price { font-size: 15px; font-weight: 500; white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .pcard__link { cursor: none; }
  .pcard:hover .pcard__alt { opacity: 1; }
  .pcard:hover .pcard__img img { scale: 1.04; }
}

.swatches { display: flex; gap: 12px; }
.swatches button { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: box-shadow .3s; }
.swatches button[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--sand), 0 0 0 4.5px var(--velour); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes button { min-width: 60px; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--cream-2); font-size: 15px; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s; }
.sizes button:hover:not(:disabled) { border-color: rgba(14, 42, 28, .4); }
.sizes button[aria-checked="true"] { background: var(--velour); color: var(--sand); border-color: var(--velour); }
.sizes button:disabled { opacity: .4; text-decoration: line-through; cursor: default; }
.fstep.is-invalid .sizes button:not(:disabled) { border-color: var(--error); }
.is-shake { animation: shake .45s; }

.related { padding: 0 0 var(--section); }
.related .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pgrid, .related .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .pgrid--rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); gap: 12px; }
  .pgrid--rail::after { content: ""; flex: none; width: 1px; }
  .pgrid--rail::-webkit-scrollbar { display: none; }
  .pgrid--rail .pcard { flex: none; width: min(62vw, 280px); scroll-snap-align: start; }
}

/* Store pages: checkout, empty cart, thank-you and account.
 *
 * The page is a dark .store section (store.php). On checkout the order summary
 * sits on the dark page beside a light .formcard holding the fields, laid out
 * like the form pages' intro beside their form. Fields copy the Gravity Forms
 * fields, and the summary copies the cart drawer's lines.
 *
 * WooCommerce's own stylesheets are switched off (inc/woocommerce.php), so
 * nothing here has to outrank them. The two !important rules below are the
 * only way past inline styles that WooCommerce's scripts write.
 */

.store {
	padding: calc(var(--head) + clamp(32px, 5vw, 80px)) 0 var(--section);
}

.store__head {
	margin-bottom: clamp(36px, 5vw, 72px);
}

.store__head .display--xl {
	margin-left: -.03em;
	font-size: clamp(64px, 8.6vw, 148px);
}

.store__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 48px clamp(40px, 6vw, 110px);
	align-items: start;
}

.store__aside {
	position: sticky;
	top: 110px;
}

/* Small headings: "Din ordre" on the dark side, the numbered steps in the card. */
.store__label {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

/* ------------------------------------------------------- order summary --- */

.osum__items .citem {
	grid-template-columns: 72px 1fr;
}

.osum__items .citem__title {
	font-size: 16px;
}

.osum__items .citem__price {
	font-size: 16px;
}

.osum__totals {
	width: 100%;
	margin-top: 8px;
	border-collapse: collapse;
	font-size: 15px;
}

.osum__totals th,
.osum__totals td {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-weight: 500;
	vertical-align: baseline;
}

.osum__totals td {
	text-align: right;
}

/* Pickup is a single method, so WooCommerce prints it as a plain line with a
 * hidden input rather than a choice. */
.osum__totals .woocommerce-shipping-methods {
	list-style: none;
}

.osum__totals .woocommerce-shipping-methods input[type="radio"] {
	accent-color: var(--pink);
	margin-right: 8px;
}

.osum__totals .woocommerce-shipping-destination,
.osum__totals .woocommerce-shipping-contents {
	display: none;
}

/* The total reads like the drawer's and the booking form's: display figures. */
.osum__totals .order-total th,
.osum__totals .order-total td {
	padding-top: 20px;
	border-bottom: 0;
}

.osum__totals .order-total th {
	font-size: 15px;
}

.osum__totals .order-total strong {
	display: block;
	font-family: var(--f-display);
	font-stretch: 62%;
	font-weight: 900;
	font-size: clamp(40px, 3.6vw, 56px);
	line-height: .9;
	font-variant-numeric: tabular-nums;
}

.osum__totals .includes_tax {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.osum__totals .includes_tax .amount {
	white-space: nowrap;
}

.osum .woocommerce-remove-coupon {
	margin-left: 6px;
	font-size: 13px;
	color: var(--muted);
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------- card --- */

/* "Dine oplysninger", "Bemærkninger", "Betaling" are numbered like the
 * booking form's steps. */
.store__card {
	counter-reset: store-step;
}

.store__card h3 {
	counter-increment: store-step;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.store__card h3::before {
	content: counter(store-step);
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--velour);
	color: var(--sand);
	font-size: 12px;
	font-weight: 600;
}

.store__card .woocommerce-billing-fields,
.store__card .woocommerce-additional-fields {
	margin-bottom: 36px;
}

/* An empty wrapper WooCommerce prints whenever no delivery address is asked. */
.store__card .woocommerce-shipping-fields:empty {
	display: none;
}

/* ------------------------------------------------------------- fields --- */

/* The same field as the Gravity Forms forms: label above, 54px cream input,
 * two to a row where WooCommerce marks a field first or last. */
.store .woocommerce-billing-fields__field-wrapper,
.store .woocommerce-additional-fields__field-wrapper,
.store .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 18px;
}

.store .form-row {
	display: grid;
	gap: 8px;
	grid-column: 1 / -1;
	margin: 0;
}

.store .form-row-first {
	grid-column: 1;
}

.store .form-row-last {
	grid-column: 2;
}

/* The country is fixed to Denmark; the field stays so the order records it. */
.store .form-row.is-hidden {
	display: none;
}

.store .form-row label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--fg);
}

/* Like the other forms, the optional fields are marked, not the required. */
.store .form-row label .required {
	display: none;
}

.store .form-row label .optional {
	color: var(--muted);
	font-weight: 400;
}

.store .input-text,
.store .form-row select {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--cream-2);
	color: var(--fg);
	font: inherit;
	font-size: 16px;
	transition: border-color .3s, background-color .3s;
}

.store textarea.input-text {
	height: auto;
	min-height: 110px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}

.store .input-text::-moz-placeholder {
	color: var(--faint);
}

.store .input-text::placeholder {
	color: var(--faint);
}

.store .input-text:hover,
.store .form-row select:hover {
	border-color: rgba(14, 42, 28, .3);
}

.store .input-text:focus,
.store .form-row select:focus {
	outline: none;
	border-color: var(--velour);
	background: #fff;
}

.store .woocommerce-invalid .input-text,
.store .woocommerce-invalid select {
	border-color: var(--error);
}

/* WooCommerce writes the reason under the field after a failed order. */
.store .checkout-inline-error-message {
	margin: 2px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--error);
}

.store .form-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: -3px;
	accent-color: var(--velour);
}

/* ------------------------------------------------------------ payment --- */

.store .wc_payment_methods {
	display: grid;
	gap: 10px;
	list-style: none;
}

.store .wc_payment_method {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--cream-2);
}

.store .wc_payment_method > label {
	font-size: 15.5px;
	font-weight: 600;
	cursor: pointer;
}

.store .wc_payment_method > label img {
	display: inline-block;
	max-height: 24px;
	margin-left: 8px;
	vertical-align: middle;
}

.store .wc_payment_method > input[type="radio"] {
	margin-right: 10px;
	accent-color: var(--velour);
}

.store .payment_box {
	margin-top: 6px;
	font-size: 14px;
	color: var(--muted);
}

.store .place-order {
	display: grid;
	gap: 16px;
	margin-top: 26px;
}

.store .woocommerce-privacy-policy-text,
.store .woocommerce-terms-and-conditions-checkbox-text {
	font-size: 13.5px;
	color: var(--muted);
}

.store .woocommerce-privacy-policy-text:empty {
	display: none;
}

.store .woocommerce-privacy-policy-text a,
.store .woocommerce-terms-and-conditions-checkbox-text a {
	color: var(--fg);
	border-bottom: 1px solid currentColor;
}

.store__submit {
	width: 100%;
	height: 58px;
	font-size: 16px;
	cursor: pointer;
}

/* While the order is placed, or the summary updates, WooCommerce lays a white
 * veil over the form. Across both columns it would grey out the dark summary,
 * so the veil over the whole form only blocks clicks and the card dims
 * instead; the smaller veils take the colour of what they cover. The colours
 * arrive as inline styles, hence !important. */
.store .woocommerce-checkout > .blockUI.blockOverlay {
	background: transparent !important;
}

.store .woocommerce-checkout.processing .store__card {
	opacity: .6;
	transition: opacity .3s;
}

.store .woocommerce-checkout-payment > .blockUI.blockOverlay {
	background: var(--sand) !important;
}

.store__aside .blockUI.blockOverlay {
	background: var(--velour) !important;
}

/* ------------------------------------------------------------ notices --- */

.store .woocommerce-NoticeGroup,
.store .woocommerce-notices-wrapper:not(:empty) {
	grid-column: 1 / -1;
	margin-bottom: 28px;
}

.store .woocommerce-error,
.store .woocommerce-message,
.store .woocommerce-info {
	list-style: none;
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--sand);
	color: var(--velour);
	font-size: 15px;
	font-weight: 500;
}

.store .woocommerce-error {
	box-shadow: inset 4px 0 0 var(--error);
}

.store .woocommerce-error li + li {
	margin-top: 6px;
}

.store .woocommerce-error a,
.store .woocommerce-message a,
.store .woocommerce-info a {
	border-bottom: 1px solid currentColor;
}

/* The coupon line above the form is a quiet link, not a banner. */
.store .woocommerce-form-coupon-toggle {
	margin-bottom: 20px;
}

.store .woocommerce-form-coupon-toggle .woocommerce-info {
	padding: 0;
	background: none;
	color: var(--muted);
	font-size: 14.5px;
	font-weight: 400;
}

.store .woocommerce-form-coupon-toggle a {
	color: var(--fg);
}

.store .checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
	margin-bottom: 28px;
}

.store .checkout_coupon .form-row-first {
	flex: 1 1 220px;
}

.store .checkout_coupon .input-text {
	background: rgba(239, 231, 219, .08);
	border-color: var(--line);
	color: var(--fg);
}

.store .checkout_coupon .input-text:focus {
	background: rgba(239, 231, 219, .14);
	border-color: var(--gold-light);
}

.store .checkout_coupon .clear {
	display: none;
}

/* ------------------------------------------------------------ buttons --- */

/* WooCommerce's own buttons (coupon, back to the front page, login) as the
 * theme's flat pink pill. */
.store .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--pink);
	color: var(--velour-deep);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -.01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .35s;
}

.store .button:hover {
	background: #F67BB8;
}

/* ------------------------------------------------------------ empty cart --- */

.store .cart-empty.woocommerce-info {
	padding: 0;
	background: none;
	color: var(--fg);
	font-size: clamp(20px, 1.8vw, 26px);
	letter-spacing: -.02em;
}

.store .return-to-shop {
	margin-top: 28px;
}

/* ---------------------------------------------------------- thank you --- */

.store .woocommerce-order {
	max-width: 880px;
	padding: clamp(24px, 3.4vw, 52px);
	border-radius: 22px;
	background: var(--sand);
	color: var(--fg);
}

.store .woocommerce-thankyou-order-received {
	font-size: clamp(19px, 1.6vw, 24px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.3;
}

.store .woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
	margin: 28px 0 40px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	list-style: none;
	font-size: 13.5px;
	color: var(--muted);
}

/* WooCommerce classes the total "total", which is also the booking form's
 * dark total box; here it is one cell like the others. */
.store .woocommerce-order-overview .total {
	--fg: inherit;
	--muted: inherit;
	display: block;
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
}

.store .woocommerce-order-overview strong {
	display: block;
	margin-top: 4px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--fg);
	overflow-wrap: anywhere;
}

.store .woocommerce-order h2 {
	margin-bottom: 14px;
	font-size: 16px;
	font-weight: 600;
}

.store .woocommerce-order-details,
.store .woocommerce-customer-details {
	margin-top: 36px;
}

.store .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.store .shop_table :is( th, td ) {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
	font-weight: 500;
}

.store .shop_table :is( th, td ):last-child {
	text-align: right;
}

.store .shop_table thead th {
	padding-top: 0;
	font-size: 13.5px;
	color: var(--muted);
}

.store .shop_table tfoot tr:last-child :is( th, td ) {
	border-bottom: 0;
	font-weight: 600;
}

.store .shop_table .product-quantity {
	font-weight: 500;
	color: var(--muted);
}

/* A booking's evening, guests and add-ons under the line's name. */
.store .wc-item-meta {
	margin-top: 4px;
	list-style: none;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--muted);
}

.store .wc-item-meta li {
	display: flex;
	gap: 4px;
}

.store .wc-item-meta p {
	margin: 0;
}

.store .includes_tax {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--muted);
}

.store .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
}

.store .woocommerce-customer-details address p {
	margin: 0;
}

/* -------------------------------------------------------------- account --- */

.store .woocommerce-form-login,
.store .woocommerce-ResetPassword {
	display: grid;
	gap: 22px;
	max-width: 560px;
	padding: clamp(24px, 3.4vw, 52px);
	border-radius: 22px;
	background: var(--sand);
	color: var(--fg);
}

.store .woocommerce-form-login .form-row:has( .button ) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.store .lost_password a,
.store .woocommerce-MyAccount-navigation a {
	border-bottom: 1px solid currentColor;
}

/* ---------------------------------------------------------- responsive --- */

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

	.store__aside {
		position: static;
	}
}

@media (max-width: 560px) {
	.store .form-row-first,
	.store .form-row-last {
		grid-column: 1 / -1;
	}
}

/* 404 page.
 *
 * Reuses the page hero's foot and rule, adds a ghosted 404 behind the title and
 * a list of oversized "doors" to the main pages. The hover photo comes from the
 * shared .peek layer via data-peek.
 */

.nf { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; padding: calc(var(--head) + clamp(40px, 6vw, 96px)) 0 var(--section); }
.nf .wrap { position: relative; z-index: 1; }
.nf .display--lg { margin-left: -.03em; }

.nf__ghost {
  position: absolute; top: calc(var(--head) + 8px); right: -.04em; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none;
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; line-height: .8;
  font-size: clamp(220px, 38vw, 680px); color: transparent;
  -webkit-text-stroke: 2px rgba(234, 58, 147, .6);
}

.nf__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 2vw, 30px); font-size: 14px; font-weight: 500; color: var(--muted); }
.nf__code { padding: 5px 12px; border-radius: 999px; background: var(--pink); color: var(--velour-deep); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.nf__btns { display: flex; flex-wrap: wrap; gap: 10px; }

.nf__doors { margin-top: clamp(64px, 8vw, 128px); border-top: 1px solid var(--line); }
.nf__door {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 28px; align-items: center; gap: 6px clamp(16px, 2vw, 32px);
  padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line);
}
.nf__num { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.nf__label {
  font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(44px, 6.4vw, 104px); line-height: .86; transition: transform .6s var(--ease), color .4s;
}
.nf__desc { font-size: 15px; color: var(--muted); text-align: right; transition: color .4s; }
.nf__arrow { width: 26px; height: 26px; justify-self: end; transition: transform .6s var(--ease), color .4s; }

.nf__door:hover .nf__label, .nf__door:focus-visible .nf__label { color: var(--pink); transform: translateX(14px); }
.nf__door:hover .nf__desc, .nf__door:focus-visible .nf__desc { color: var(--fg); }
.nf__door:hover .nf__arrow, .nf__door:focus-visible .nf__arrow { color: var(--pink); transform: translateX(6px); }
.nf__door:focus-visible { outline: none; }

@media (max-width: 760px) {
  .nf__ghost { top: calc(var(--head) + 40px); right: -.08em; font-size: 72vw; }
  .nf__door { grid-template-columns: 30px minmax(0, 1fr) 22px; gap: 4px 12px; }
  .nf__label { font-size: clamp(40px, 12vw, 64px); }
  .nf__desc { grid-column: 2; grid-row: 2; text-align: left; font-size: 14px; }
  .nf__arrow { grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; }
  .nf__num { align-self: start; padding-top: .5em; }
}

/* Footer.
 *
 * Sticky-positioned so #main scrolls over it: the bottom offset is driven by
 * --fh, which main.js keeps in sync with the footer's measured height via a
 * ResizeObserver. The neon wordmark flickers once, when #main's end scrolls in.
 */

#main { position: relative; z-index: 1; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .55); }
.footer { position: sticky; z-index: 0; bottom: min(0px, calc(100vh - var(--fh, 0px))); bottom: min(0px, calc(100svh - var(--fh, 0px))); }
.footer { background: var(--night); color: var(--sand); padding: clamp(88px, 10vw, 150px) 0 calc(28px + env(safe-area-inset-bottom)); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(40px, 7vw, 120px); align-items: center; padding-bottom: clamp(64px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.guest__title { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 5.4vw, 92px); line-height: .86; color: var(--cream); max-width: 8.5em; }
.guest__title span { color: #FFE3F1; text-shadow: 0 0 2px #FF9CCD, 0 0 10px var(--pink-hot), 0 0 26px var(--pink), 0 0 52px rgba(234, 58, 147, .55); }
.guest__perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 30px; }
.guest__perks li { padding: 7px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(226, 204, 152, .35); font-size: 13px; font-weight: 500; color: var(--gold-light); }
.signup { position: relative; display: flex; align-items: center; gap: 8px; max-width: 480px; padding: 6px 6px 6px 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(226, 204, 152, .4); transition: box-shadow .3s; }
.signup:focus-within { box-shadow: inset 0 0 0 1px var(--pink); }
.signup input { flex: 1; min-width: 0; height: 42px; padding: 0; background: none; border: 0; color: var(--sand); font: inherit; font-size: 15px; }
.signup input::-moz-placeholder { color: rgba(239, 231, 219, .4); }
.signup input::placeholder { color: rgba(239, 231, 219, .4); }
.signup input:focus { outline: none; }
.signup__ok { display: none; position: absolute; inset: 0; align-items: center; padding: 0 22px; border-radius: inherit; background: var(--night); }
.signup.is-done .signup__ok { display: flex; }
.footer__sign { text-align: center; }
.footer__logo { width: 100%; max-width: 560px; height: auto; aspect-ratio: 398 / 98; margin: 0 auto; overflow: visible; color: #FFE3F1; filter: var(--neon); }
.footer__logo.is-flicker { animation: flicker 2.4s linear forwards; }
.footer__addr { margin-top: 24px; font-size: 13px; font-weight: 500; color: rgba(239, 231, 219, .4); }
.follow { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.follow__link { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(239, 231, 219, .26); font-size: 15px; font-weight: 500; transition: background-color .35s, color .35s, box-shadow .35s; }
.follow__link:hover { background: var(--pink); color: var(--night); box-shadow: inset 0 0 0 1px var(--pink); }
.follow__link svg { width: 20px; height: 20px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; padding-block: clamp(48px, 5vw, 72px); }
.footer__cols h3 { font-size: 13px; font-weight: 500; color: rgba(239, 231, 219, .4); margin-bottom: 16px; }
.footer__cols nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer__cols a, .footer__cols p { font-size: 15px; color: rgba(239, 231, 219, .86); }
.footer__cols p { line-height: 1.75; }
.footer__cols a { transition: color .3s; }
.footer__cols a:hover { color: var(--pink-hot); }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: rgba(239, 231, 219, .4); }
.footer__credit { display: inline-flex; align-items: center; gap: 6px; color: rgba(239, 231, 219, .6); transition: color .3s; }
.footer__credit:hover { color: var(--sand); }
.footer__cols a[aria-current] { color: var(--pink-hot); }

@media (max-width: 999px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__sign { order: -1; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Mobile action bar.
 *
 * Hidden above 999px. main.js reveals it after boot, and it retracts whenever
 * the scroll is locked or a field has focus, so it never covers the keyboard or
 * an open overlay.
 */

.actbar { display: none; }

@media (max-width: 999px) {
  .actbar { position: fixed; z-index: 95; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 6px; padding: 6px; border-radius: 999px; background: rgba(8, 25, 15, .86); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(226, 204, 152, .18); transform: translateY(calc(100% + 40px)); transition: transform .6s var(--ease); }
  .actbar.is-on { transform: none; }
  html.is-locked .actbar, html.is-typing .actbar { transform: translateY(calc(100% + 40px)); }
  .actbar .btn { height: 56px; padding: 0 12px; font-size: 15.5px; font-weight: 600; }
  .actbar .btn__icon { width: 19px; height: 19px; margin-right: 8px; }
  .page-shop .actbar, .page-login .actbar { display: none; }
}

@media (max-width: 359px) {
  .actbar .btn { font-size: 14px; padding: 0 8px; }
  .actbar .btn__icon { width: 17px; height: 17px; margin-right: 6px; }
}

/* Block stylesheets are imported here, one line per block. */

/* Hero.
 *
 * A full-viewport stage that stays pinned while the page scrolls past it. The
 * wordmark scales up until its letterforms become a clip-path over the image
 * reel, then the closing copy fades in underneath. hero.js drives all of it;
 * the stage starts hidden until that script has keyed the first frame, so the
 * page never flashes an unpositioned sign.
 */

.hero__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--velour-deep); color: var(--sand); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.js .hero__stage:not(.is-keyed) :is(.hero__media, .hero__sign, .hero__intro, .hero__content, .hero__shade) { visibility: hidden; }
.reel { position: absolute; inset: 0; transform: scale(1.3); transform-origin: 50% 45%; will-change: transform; }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; z-index: 0; transition: opacity 1.4s ease; }
.reel img.is-on { opacity: 1; z-index: 2; }
.reel img.is-out { opacity: 1; z-index: 1; transition: none; }
.reel img.is-on, .reel img.is-out { animation: drift 9s linear both; }
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero__shade { position: absolute; inset: 0; opacity: 0; will-change: opacity; background: linear-gradient(180deg, rgba(8, 25, 15, .5) 0%, transparent 24%, transparent 38%, rgba(8, 25, 15, .7) 70%, rgba(8, 25, 15, .94) 100%); }
.hero__wall { position: absolute; inset: 0; background: radial-gradient(75% 75% at 50% 42%, var(--velour-soft), var(--velour) 55%, var(--velour-deep)); }
.hero__wall::after { content: ""; position: absolute; inset: 0; background: url(../images/palm-damask.png) 50% 50% / 560px; opacity: .06; }
.hero__sign { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.hero__sign svg { width: 100%; height: 100%; overflow: visible; filter: var(--neon); opacity: 0; }
.hero.is-lit .hero__sign svg { animation: flicker 1.8s linear forwards; }
.hero__intro { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform, opacity; }
.hero__title, .hero__sub { text-wrap: balance; }
.hero__title { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 76px); line-height: .9; letter-spacing: .01em; color: var(--cream); }
.hero__sub { margin-top: 14px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; letter-spacing: -.01em; color: rgba(239, 231, 219, .78); }
.hero__meta { position: absolute; bottom: clamp(22px, 3vw, 36px); font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(239, 231, 219, .72); }
.hero__meta--l { left: var(--gutter); }
.hero__meta--r { right: var(--gutter); text-align: right; }
.hero__hint { position: absolute; left: 50%; bottom: clamp(22px, 3vw, 36px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: rgba(239, 231, 219, .72); }
.hero__hint i { position: relative; width: 1px; height: 38px; background: rgba(226, 204, 152, .3); overflow: hidden; }
.hero__hint i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--gold-light); animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { from { transform: translateY(-100%); } to { transform: translateY(240%); } }
.hero__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 4vw, 56px); opacity: 0; transform: translateY(36px); will-change: transform, opacity; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 24px 48px; pointer-events: none; }
.hero__content.is-live { pointer-events: auto; }
.hero__lede { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 7.6vw, 132px); line-height: .86; letter-spacing: -.005em; color: var(--cream); padding-top: .12em; }
.hero__intro-text { justify-self: end; max-width: 34ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.38; letter-spacing: -.015em; color: rgba(239, 231, 219, .86); }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: clamp(24px, 2.8vw, 36px); }
.page-home .header__logo { transition: opacity .5s var(--ease); }
.page-home .header.is-top .header__logo { opacity: 0; pointer-events: none; }

@media (max-width: 999px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__intro-text { justify-self: start; }
  /* Both clear the mobile action bar. */
  .hero__meta, .hero__hint { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .hero__content { bottom: calc(104px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1; padding: 0 16px; }
  .hero__meta { font-size: 12px; }
  .hero__hint span { display: none; }
  .hero__lede { font-size: clamp(46px, 13.4vw, 64px); }
  .hero__intro-text { font-size: 16px; }
}

/* Page hero.
 *
 * The standard subpage header: breadcrumbs, an oversized title, and a rule that
 * GSAP draws in by animating --rule from 0 to 1. Its top padding clears the
 * fixed header via --head, which drops to 66px on mobile.
 */

.phero { padding: calc(var(--head) + clamp(40px, 6vw, 96px)) 0 var(--section); }
.phero .display--xl, .phero .display--lg { margin-left: -.03em; }
.phero__foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-top: clamp(28px, 3.4vw, 48px); padding-top: 24px; }
.phero__rule::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(var(--rule, 1)); transform-origin: left; }
.phero__lede { max-width: 34ch; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; }
.phero__aside { font-size: 14px; color: var(--muted); }
.phero__addr { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; }

/* Opening-hours week list, shown under the hero on the hours page.
 * Rows are driven by the Åbningstider theme option, so the hero, the footer
 * and any hours block all read from one source. */

.week { margin-top: clamp(40px, 5vw, 72px); }
.week__day { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(8px, 1vw, 14px) 0 clamp(4px, .6vw, 8px); border-bottom: 1px solid var(--line); font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(54px, 9vw, 150px); line-height: .86; }
.week__time { color: var(--pink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.week__closed { margin-top: 22px; font-size: 15px; color: var(--muted); }

@media (max-width: 760px) {
  .week__day { font-size: clamp(44px, 14vw, 72px); }
}

/* CTA band: an oversized heading against a short pitch and its buttons. */

.band { padding: var(--section) 0; }
.band__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px clamp(40px, 7vw, 120px); align-items: end; }
.band__copy p { max-width: 38ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--muted); margin-bottom: var(--cta-gap); }
.band__cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* Three-up info cards, each a rule-topped column. */

.info { padding: var(--section) 0; }
.info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3.4vw, 56px); }
.info__item { padding-top: 20px; border-top: 1px solid var(--line); }
.info__item h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.info__item p { color: var(--muted); max-width: 36ch; }
.info__note { margin-top: clamp(40px, 5vw, 64px); color: var(--muted); }
.info__note a { color: var(--fg); border-bottom: 1px solid currentColor; }

@media (max-width: 999px) {
  .info__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Numbered steps. Four columns by default, three when the block holds three.
 * The big pink numeral is decorative; the heading carries the meaning. */

.evening { padding: var(--section) 0; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 48px); }
.step { padding-top: 20px; border-top: 1px solid var(--line); }
.step__no { display: block; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; font-size: 72px; line-height: .8; color: var(--pink); margin-bottom: 22px; }
.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.step p { color: var(--muted); }
.steps.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .steps.steps--3 { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; }
  .step__no { grid-row: span 2; font-size: 56px; margin: 0; }
}

/* FAQ teaser: a short list of questions beside a heading, with the optional
 * SEO prose underneath. The disclosure animates with ::details-content, so
 * no JavaScript opens or closes a question. */

.faq { padding: var(--section) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px clamp(40px, 7vw, 140px); align-items: start; }
.faq__head { padding-top: 22px; }
.faq__head .display { margin-bottom: 30px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--accent); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; letter-spacing: -.02em; transition: color .3s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--pink); }
.qa summary i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: transform .6s var(--ease), background-color .4s, color .4s; }
.qa summary i svg { width: 16px; height: 16px; }
.qa[open] summary i { transform: rotate(135deg); background: var(--velour); color: var(--sand); box-shadow: none; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .6s var(--ease), content-visibility .6s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
.qa__a p { padding: 0 60px 26px 0; color: var(--muted); max-width: 56ch; }

@media (max-width: 999px) {
  .vip__grid, .visit__grid, .faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .qa summary { padding: 20px 0; }
  .qa__a p { padding-right: 0; }
}

/* Collapsible SEO prose. Clamped to a few lines behind a mask until the
 * toggle opens it; main.js swaps the button label and the .is-open class. */

.seo { margin-top: clamp(64px, 7vw, 110px); padding-top: 26px; border-top: 1px solid var(--line); }
.seo__inner { max-height: 4.9em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); transition: max-height .9s var(--ease); }
.seo.is-open .seo__inner { max-height: 140em; -webkit-mask-image: none; mask-image: none; }
.seo__cols { -moz-columns: 3 280px; columns: 3 280px; -moz-column-gap: 48px; column-gap: 48px; font-size: 13.5px; line-height: 1.65; color: var(--faint); }
.seo.is-open .seo__cols { color: var(--muted); }
.seo__cols :is(h2, h3, h4, h5, h6) { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--muted); margin: 20px 0 5px; -moz-column-break-after: avoid; break-after: avoid; }
.seo__cols h2 { margin-top: 0; }
.seo__cols p { -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: 10px; }
.seo__toggle { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .3s; }
.seo__toggle:hover { color: var(--fg); }

.seo-wrap { padding: 0 0 var(--section); }

/* Full FAQ page: a sticky category rail beside the grouped questions.
 * Below 999px the rail becomes a horizontal chip bar that sticks under the
 * header, which is why it needs its own --head offset. */

.faqx { padding: var(--section) 0 0; }
.faqx__grid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 40px clamp(40px, 7vw, 140px); align-items: start; }
.faqx__nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line); }
.faqx__nav a { position: relative; padding: 9px 0 9px 20px; font-size: 16px; font-weight: 500; color: var(--muted); transition: color .3s; }
.faqx__nav a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--pink); transform: scaleY(0); transition: transform .45s var(--ease); }
.faqx__nav a.is-active { color: var(--fg); }
.faqx__nav a.is-active::before { transform: scaleY(1); }
.faqx__nav a:hover { color: var(--fg); }
.faqx__group { scroll-margin-top: 110px; }
.faqx__group + .faqx__group { margin-top: clamp(56px, 6vw, 96px); }
.faqx__title { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 3.6vw, 60px); line-height: .9; margin-bottom: 20px; }

@media (max-width: 999px) {
  .header:not(.is-hidden) ~ main .faqx__nav { top: var(--head); }
  .faqx__nav { transition: top .6s var(--ease); }
  .faqx { padding-top: calc(var(--section) - 12px); }
  .faqx__nav { position: sticky; top: 0; z-index: 5; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; border: 0; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter); background: var(--sand); }
  .faqx__nav::-webkit-scrollbar { display: none; }
  .faqx__nav a { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14.5px; }
  .faqx__nav a::before { display: none; }
  .faqx__nav a.is-active { background: var(--velour); color: var(--sand); border-color: var(--velour); }
  .faqx__group { scroll-margin-top: 80px; }
}

/* Dancer rail: a horizontally scrolling row of cards on the home page,
 * draggable with a pointer and stepped by the arrow buttons. */

.meet { padding: var(--section) 0; }
.meet__tools { display: flex; align-items: center; gap: 22px; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .35s, color .35s, opacity .35s; }
.rail-nav button:hover:not(:disabled) { background: var(--velour); color: var(--sand); box-shadow: none; }
.rail-nav button:disabled { opacity: .3; cursor: default; }
.rail-nav svg { width: 20px; height: 20px; }
.meet__rail { --pad: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); display: flex; gap: clamp(14px, 1.6vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--pad); scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; }
.meet__rail::-webkit-scrollbar { display: none; }
.meet__rail::after { content: ""; flex: none; width: 1px; }
.meet__rail.is-drag { scroll-snap-type: none; cursor: grabbing; }
.meet__rail.is-drag a { pointer-events: none; }
.bunny { flex: none; width: clamp(280px, 30vw, 480px); scroll-snap-align: start; }
.bunny a { display: block; }
.bunny__img { display: block; position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.bunny__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: scale 1.2s var(--ease); -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.bunny a:hover .bunny__img img { scale: 1.04; }
.bunny__name { display: block; margin-top: 20px; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(46px, 4.6vw, 78px); line-height: .84; transition: color .45s var(--ease); }
.bunny a:hover .bunny__name { color: var(--pink); }
.bunny__line { display: block; margin-top: 12px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bunny__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 500; }
.bunny__go svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.bunny a:hover .bunny__go svg { transform: translateX(5px); }

@media (max-width: 999px) {
  .meet__tools .rail-nav { display: none; }
  .bunny { width: min(76vw, 360px); }
}

/* Dancer grid. Every second card in a row is pushed down, which is what
 * gives the grid its staggered rhythm. */

.dgrid-wrap { padding: var(--section) 0; }
.dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(16px, 2.2vw, 36px); }
.dcard:nth-child(3n + 2) { margin-top: clamp(56px, 8vw, 140px); }
.dcard__link { display: block; }
.dcard__img { display: block; position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.dcard__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: scale 1.2s var(--ease), filter .8s var(--ease); }
.dcard__link:hover .dcard__img img { scale: 1.05; }
.dcard__name { display: block; margin-top: 14px; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 58px); line-height: .85; transition: color .4s; }
.dcard__link:hover .dcard__name { color: var(--pink); }
.dcard__line { display: block; margin-top: 10px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--muted); }
.dcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; }
.dcard__go svg { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.dcard__link:hover .dcard__go svg { transform: translateX(5px); }
@media (hover: hover) and (pointer: fine) { .dcard__link { cursor: none; } }

@media (max-width: 760px) {
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .dcard:nth-child(3n + 2) { margin-top: 0; }
  .dcard:nth-child(even) { margin-top: 48px; }
  .dcard__name { font-size: 34px; margin-top: 10px; }
}

/* Profile modal. Opened from a card and stepped through with the arrow
 * keys or a swipe; pages.js cross-fades between a dancer's shots by swapping
 * two stacked <img> elements rather than reloading one. */

.profile { position: fixed; z-index: 280; inset: 0; display: grid; place-items: stretch; }
.profile__scrim { position: absolute; inset: 0; background: rgba(5, 14, 10, .6); opacity: 0; transition: opacity .6s var(--ease); }
.profile__panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; --fg: var(--sand); --muted: rgba(239, 231, 219, .7); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--velour); color: var(--fg); clip-path: inset(100% 0 0 0); transition: clip-path .75s cubic-bezier(.76, 0, .24, 1); overflow: hidden; }
.profile.is-open .profile__scrim { opacity: 1; }
.profile.is-open .profile__panel { clip-path: inset(0 0 0 0); }
.profile__img { margin: 0; position: relative; background: var(--velour-deep); overflow: hidden; }
.profile__img img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; }
.profile__img img.is-prev { opacity: 1; z-index: 1; }
.profile__img img.is-current { opacity: 1; z-index: 2; clip-path: inset(0 0 0 0); scale: 1; transition: opacity .6s var(--ease); }
.profile__img img.is-next { opacity: 1; z-index: 2; scale: 1.08; transition: none; }
.profile__img img.is-next.from-right { clip-path: inset(0 0 0 100%); }
.profile__img img.is-next.from-left { clip-path: inset(0 100% 0 0); }
.profile__img img.is-current.is-reveal { transition: clip-path .85s cubic-bezier(.76, 0, .24, 1), scale 1.3s var(--ease); }
.profile__img img.is-next.is-fade { opacity: 0; clip-path: none; scale: 1.04; }
.profile__img img.is-current.is-fadein { transition: opacity .6s var(--ease), scale 1.2s var(--ease); }
.profile__thumbs { position: absolute; z-index: 4; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: flex; gap: 8px; }
.profile__thumbs button { width: 58px; height: 72px; border-radius: 10px; overflow: hidden; opacity: .55; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); transition: opacity .3s, transform .4s var(--ease); }
.profile__thumbs button:hover { opacity: .85; }
.profile__thumbs button[aria-current="true"] { opacity: 1; transform: translateY(-4px); }
.profile__thumbs img { position: static; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 1; }
.profile__content { transition: opacity .28s var(--ease), transform .28s var(--ease); }
.profile__content.is-out { opacity: 0; transform: translateY(14px); }
.profile__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(96px, 8vw, 120px) clamp(28px, 6vw, 110px) clamp(40px, 5vw, 72px); overflow-y: auto; }
.profile__style { font-size: 14px; color: var(--gold-light); margin-bottom: 18px; }
.profile__name { font-size: clamp(80px, 11vw, 190px); line-height: .8; margin: 0 0 30px -.03em; }
.profile__bio p { max-width: 36ch; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; }
.profile__cta { margin-top: var(--cta-gap); }
.profile__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 48px; }
.profile__nav button { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--muted); transition: color .3s; }
.profile__nav button:hover { color: var(--fg); }
.profile__nav svg { width: 18px; height: 18px; }
.profile__nav button:first-child svg { transform: scaleX(-1); }
.profile__close { position: fixed; z-index: 10; top: 18px; right: clamp(16px, 2vw, 28px); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(8, 25, 15, .55); color: var(--sand); backdrop-filter: blur(10px); transition: background-color .3s; }
.profile__close:hover { background: var(--pink); color: var(--velour-deep); }
.profile__close svg { width: 22px; height: 22px; }

@media (max-width: 999px) {
  .profile__panel { grid-template-columns: 1fr; grid-template-rows: 58vh auto; overflow-y: auto; overscroll-behavior: contain; }
  .profile__body { padding: 28px var(--gutter) calc(32px + env(safe-area-inset-bottom)); justify-content: flex-start; overflow: visible; }
  .profile__name { margin-bottom: 20px; }
}

@media (max-width: 420px) {
  .profile__nav { padding-top: 32px; }
}

/* Free Ride band: a full-bleed photo the copy overlaps from below, with the
 * image parallaxed behind it. */

.ride { --fg: var(--sand); --muted: rgba(239, 231, 219, .7); --line: rgba(239, 231, 219, .14); position: relative; isolation: isolate; overflow: clip; background: var(--night); color: var(--fg); }
.ride__media { position: relative; z-index: -1; width: 100%; aspect-ratio: 1536 / 597; max-height: 86vh; overflow: hidden; }
.ride__media img { width: 100%; height: 112%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; will-change: transform; }
.ride__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--night) 2%, rgba(11, 13, 12, .5) 22%, transparent 46%), linear-gradient(180deg, rgba(11, 13, 12, .7), transparent 20%); }
.ride__inner { margin-top: clamp(-150px, -9vw, -40px); padding-bottom: var(--section); }
.ride__copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0 clamp(40px, 6vw, 110px); align-items: end; }
.ride__title { font-size: clamp(66px, 10.4vw, 184px); color: var(--cream); }
.ride__side { padding-bottom: .4em; }
.ride__tag { font-size: clamp(24px, 2.3vw, 36px); line-height: 1.08; font-weight: 500; letter-spacing: -.035em; color: var(--pink-hot); }
.ride__text { margin-top: 18px; max-width: 40ch; font-size: clamp(16px, 1.2vw, 18px); color: var(--muted); }
.ride__call { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--cta-gap); }
.ride__number { margin-left: 14px; }
.ride__number { font-family: var(--f-display); font-stretch: 62%; font-weight: 800; font-size: clamp(30px, 2.6vw, 42px); letter-spacing: .01em; font-variant-numeric: tabular-nums; transition: color .3s; }
.ride__number:hover { color: var(--pink-hot); }
.ride__note { margin-top: 18px; font-size: 13px; color: rgba(239, 231, 219, .5); }
.ride__note a { color: rgba(239, 231, 219, .8); border-bottom: 1px solid rgba(239, 231, 219, .3); transition: color .3s; }
.ride__note a:hover { color: var(--pink-hot); }

/* The Free Ride page's own hero: a taller photo with the breadcrumb on it. */
.ride--page .ride__media { max-height: 92vh; }
.ride--page .crumbs { position: absolute; z-index: 2; top: calc(var(--head) + 22px); left: var(--gutter); }

@media (max-width: 999px) {
  .ride__media { aspect-ratio: 4 / 3; max-height: none; }
  .ride__media img { -o-object-position: 46% 50%; object-position: 46% 50%; }
  .ride__inner { margin-top: -56px; }
  .ride__copy { grid-template-columns: 1fr; }
  .ride__title { margin-bottom: 22px; }
  .ride__side { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .ride__call .btn { flex: 1; }
}

/* VIP feature: image beside a list of what a lounge includes. */

.vip { padding: var(--section) 0; }
.vip__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.vip__img { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.vip__img img { width: 100%; height: 118%; -o-object-fit: cover; object-fit: cover; -o-object-position: 42% 50%; object-position: 42% 50%; will-change: transform; transition: scale 1.2s var(--ease); }
.vip__img:hover img { scale: 1.04; }
.vip__copy .display { font-size: clamp(56px, 7vw, 120px); }
.vip__tag { margin: 26px 0 34px; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; font-weight: 500; letter-spacing: -.03em; }
.vip__list { border-top: 1px solid var(--accent); }
.vip__list li { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.015em; }
.vip__facts { margin: 22px 0 var(--cta-gap); font-size: 15px; color: var(--muted); }
.vip__facts:last-child { margin-bottom: 0; }
.vip__cta { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 999px) {
  .vip__img { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .vip__cta .btn { flex: 1; }
}

/* Described variant, used on the VIP page: each item carries a line of
 * explanation beside it. */

.vip__intro { max-width: 34ch; margin-bottom: 34px; font-size: clamp(20px, 1.8vw, 27px); line-height: 1.26; letter-spacing: -.025em; font-weight: 500; }
.vip__list--desc li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4px 24px; align-items: baseline; padding: 18px 0; }
.vip__list--desc span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* Image on the right.
 *
 * The column ratio mirrors as well as the order, so the image keeps the larger
 * share of the row either way round.
 */
.vip--flip .vip__grid {
	grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.vip--flip .vip__img {
	order: 2;
}

/* A heading is optional and the original never pairs one with the intro, so
 * nothing in the ported CSS separates them. Spacing only when both are present
 * keeps the home-page variant, where a tag follows the heading, untouched. */
.vip__copy .display + .vip__intro {
	margin-top: 26px;
}

@media (max-width: 999px) {
	/* Stacked, the image leads regardless, so the flip has nothing to say. */
	.vip--flip .vip__grid {
		grid-template-columns: 1fr;
	}

	.vip--flip .vip__img {
		order: 0;
	}
}

/* Text variant ("Billede & tekst"): body text from inner blocks in place of
 * the list, under the same gold rule the list starts with. */

.vip__text { max-width: 52ch; padding-top: 24px; border-top: 1px solid var(--accent); }
.vip__copy .display + .vip__text { margin-top: 34px; }
.vip__text p, .vip__text li { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--muted); }
.vip__text > * + * { margin-top: 1em; }
.vip__text :is(h2, h3, h4) { margin-top: 1.6em; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--fg); }
.vip__text > :first-child { margin-top: 0; }
.vip__text :is(h2, h3, h4) + * { margin-top: .5em; }
.vip__text ul, .vip__text ol { padding-left: 1.2em; }
.vip__text ul { list-style: disc; }
.vip__text ol { list-style: decimal; }
.vip__text li + li { margin-top: .35em; }
.vip__text li::marker { color: var(--pink); }
.vip__text a { color: var(--fg); border-bottom: 1px solid currentColor; transition: color .3s; }
.vip__text a:hover { color: var(--pink); }
.vip__text strong { font-weight: 600; color: var(--fg); }
.vip__text + .vip__cta { margin-top: var(--cta-gap); }
/* Occasions: three linked cards that become a snapping rail on mobile. */

.celebrate { padding: var(--section) 0; }
.occasions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); }
.occasion a { display: block; }
.occasion__img { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--velour-soft); }
.occasion__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: scale 1.2s var(--ease); }
.occasion a:hover .occasion__img img { scale: 1.05; }
.occasion__name { display: block; margin-top: 22px; font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(32px, 2.9vw, 50px); line-height: .88; color: var(--cream); transition: color .4s var(--ease); }
.occasion a:hover .occasion__name { color: var(--pink-hot); }
.occasion__text { display: block; margin-top: 12px; max-width: 36ch; font-size: 15px; line-height: 1.5; color: var(--muted); }

@media (max-width: 999px) {
  .occasions { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .occasions::-webkit-scrollbar { display: none; }
  .occasions::after { content: ""; flex: none; width: 1px; }
  .occasion { flex: none; width: min(76vw, 340px); scroll-snap-align: start; }
}

/* Visit: opening hours beside the map. The map is tinted to match the
 * palette with a blend layer, and the pin is drawn in CSS rather than by
 * Google, so it keeps the brand pink. */

.visit { padding: var(--section) 0; }
main > .light + .light { padding-top: 0; }
.visit__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px clamp(40px, 7vw, 140px); }
.visit .display { margin-bottom: clamp(26px, 2.6vw, 40px); }
.hours { border-top: 1px solid var(--accent); }
.hours > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.3vw, 19px); }
.hours dt { font-weight: 500; }
.hours dd { font-variant-numeric: tabular-nums; }
.hours .is-closed { color: var(--faint); }
.visit__addr { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.04em; font-weight: 500; margin-bottom: 24px; }
.map { position: relative; isolation: isolate; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--cta-gap); background: var(--velour-deep); }
.map iframe { position: absolute; inset: -60px 0 0; width: 100%; height: calc(100% + 60px); border: 0; filter: grayscale(1) invert(.9) contrast(1.15) brightness(.9); }
.map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--velour); mix-blend-mode: color; }
.map::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(50% - 30px); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px rgba(234, 58, 147, .22); pointer-events: none; }

@media (max-width: 999px) {
  .vip__grid, .visit__grid, .faq__grid { grid-template-columns: 1fr; }
}

/* Extras used on the Visit page: a note under the hours and a grid of ways
 * to get there. */

.visit__note { margin-top: 20px; font-size: 15px; color: var(--muted); }
.visit__note a, .visit__ways a { color: var(--fg); border-bottom: 1px solid currentColor; }
.visit__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 44px); }
.visit__ways .info__item h3 { font-size: clamp(18px, 1.4vw, 21px); }

@media (max-width: 999px) {
  .visit__ways { grid-template-columns: 1fr; gap: 24px; }
}

/* Feature rows: image beside copy, alternating sides down the page. */

.feats { padding: var(--section) 0; }
.feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 110px); align-items: center; scroll-margin-top: 100px; }
.feat + .feat { margin-top: clamp(80px, 9vw, 150px); }
.feat--flip .feat__img { order: 2; }
.feat__img { aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.feat__img img { width: 100%; height: 112%; -o-object-fit: cover; object-fit: cover; will-change: transform; }
.feat__copy .display { margin-bottom: 26px; }
.feat__copy > p { max-width: 38ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; letter-spacing: -.015em; }
.feat__list { margin: 26px 0 var(--cta-gap); border-top: 1px solid var(--accent); }
.feat__list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }

@media (max-width: 999px) {
  .feat { grid-template-columns: 1fr; }
  .feat--flip .feat__img { order: 0; }
  .feat__img { aspect-ratio: 4 / 3; }
}

/* Pickup band: copy over a darkened photo. Below 999px the photo detaches
 * and sits above the copy instead of behind it. */

.pickup { --fg: var(--sand); --muted: rgba(239, 231, 219, .7); position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; min-height: min(88vh, 820px); padding: var(--section) 0; background: var(--night); color: var(--fg); }
.pickup__media { position: absolute; z-index: -1; inset: 0; }
.pickup__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 60% 50%; object-position: 60% 50%; }
.pickup__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 13, 12, .94) 0%, rgba(11, 13, 12, .78) 36%, rgba(11, 13, 12, .15) 70%), linear-gradient(0deg, rgba(11, 13, 12, .6), transparent 40%); }
.pickup__inner .display { max-width: 7.5em; color: var(--cream); }
.pickup__copy { max-width: 42ch; margin-top: 30px; }
.pickup__copy > p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--muted); }

@media (max-width: 999px) {
  .pickup { min-height: 0; display: block; padding: 0 0 var(--section); }
  .pickup__media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .pickup__media::after { background: linear-gradient(0deg, var(--night) 4%, transparent 50%); }
  .pickup__inner { margin-top: -40px; }
}

/* Roles: three portraits with a heading and a paragraph. Becomes a list
 * with the portrait alongside on narrow screens. */

.roles { padding: var(--section) 0; }
.roles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(16px, 2.4vw, 36px); }
.role__img { margin: 0 0 20px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; }
.role__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.role__name { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 3.6vw, 60px); line-height: .85; margin-bottom: 12px; }
.role p { color: var(--muted); max-width: 38ch; }

@media (max-width: 999px) {
  .roles__list { grid-template-columns: 1fr; gap: 48px; }
  .role { display: grid; grid-template-columns: 120px 1fr; gap: 0 20px; align-items: start; }
  .role__img { grid-row: span 2; margin: 0; }
}

/* Photo row: three figures of unequal width, bottom-aligned, that become a
 * snapping rail on mobile. */

.spot { padding: var(--section) 0; }
.spot__grid { display: grid; grid-template-columns: 1.15fr .9fr 1fr; gap: clamp(14px, 2vw, 28px); align-items: end; }
.spot__img { border-radius: var(--radius); overflow: hidden; background: var(--sand-2); }
.spot__img img { width: 100%; height: auto; }
.spot figcaption { margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.spot__info { margin-top: clamp(64px, 7vw, 110px); }

@media (max-width: 999px) {
  .spot__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); align-items: flex-end; }
  .spot__grid::-webkit-scrollbar { display: none; }
  .spot__grid::after { content: ""; flex: none; width: 1px; }
  .spot__grid figure { flex: none; width: 78vw; scroll-snap-align: start; }
}

/* Full-width map section. */

.bigmap { padding: 0; background: var(--velour-deep); }
.map--big { aspect-ratio: auto; height: min(78vh, 760px); min-height: 420px; margin: 0; border-radius: 0; }

@media (max-width: 760px) {
  .map--big { height: 70vh; min-height: 380px; }
}

/* Lit text: an oversized paragraph whose words brighten as it scrolls past,
 * with small image pills set inline. Hovering a pill opens the shared peek
 * frame that main.js positions. */

.club { padding: var(--section) 0; }
.club__text { font-size: clamp(34px, 5vw, 84px); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; max-width: 17em; }
.pill { display: inline-block; position: relative; width: 1.9em; height: .8em; margin: 0 .04em; border-radius: 999px; overflow: hidden; vertical-align: -.06em; background: var(--velour-soft); }
.pill img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

@media (max-width: 999px) {
  .club { padding-bottom: 0; }
}

@media (max-width: 640px) {
  .club__text { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.16; letter-spacing: -.04em; }
}

/* Rooms: a horizontal gallery pinned to the viewport while it scrolls
 * sideways. Figures carry their own height and alignment variants so the row
 * reads as a staggered composition rather than a strip. */

.rooms { margin-top: clamp(80px, 9vw, 150px); }
.rooms__pin { height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.rooms__track { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 60px); padding-inline: var(--gutter); height: 84vh; will-change: transform; }
.rooms__intro { flex: none; width: min(30vw, 440px); align-self: center; }
.rooms__track::after { content: ""; flex: none; width: 1px; }
.rooms__intro p { margin-top: 26px; max-width: 26ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; letter-spacing: -.02em; color: var(--muted); }
.room { flex: none; margin: 0; }
.room__img { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--velour-soft); }
.room__img img { width: 118%; max-width: none; height: 100%; margin-left: -9%; -o-object-fit: cover; object-fit: cover; }
.room--tall .room__img { height: 62vh; aspect-ratio: 3 / 4; }
.room--wide .room__img { height: 46vh; aspect-ratio: 3 / 2; }
.room--low { align-self: flex-end; }
.room--high { align-self: flex-start; }
.room figcaption { margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--muted); }

@media (max-width: 999px) {
  .rooms { margin-top: 64px; }
  .rooms__pin { padding-top: 66px; }
  .rooms__track { height: auto; gap: 20px; }
  .rooms__intro { width: 78vw; }
  .room--tall .room__img { height: 56vh; }
  .room--wide .room__img { height: 30vh; }
}

/* Without the pin there is nothing to scrub, so the track scrolls natively. */
@media (prefers-reduced-motion: reduce) {
  .rooms__pin { height: auto; }
  .rooms__track { overflow-x: auto; scroll-snap-type: x mandatory; }
}
/* Form page: a sticky intro column beside a light card holding the form.
 * The card re-points the context tokens, which is declared in tokens.css
 * alongside the other light surfaces. */

.formpage { padding: calc(var(--head) + clamp(32px, 5vw, 80px)) 0 var(--section); }
.formpage__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px clamp(40px, 6vw, 110px); align-items: start; }
.formpage__intro { position: sticky; top: 110px; }
.formpage .display--xl { font-size: clamp(64px, 8.6vw, 148px); }
.formpage__lede { max-width: 30ch; margin-top: 28px; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.28; letter-spacing: -.025em; font-weight: 500; }
.formpage__img { margin: 40px 0 0; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; max-width: 520px; }
.formpage__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.formpage__aside { margin-top: 22px; color: var(--muted); font-size: 15px; }
.formpage__aside a, .fstep__hint a { color: inherit; border-bottom: 1px solid currentColor; }
.contacts { margin-top: 44px; border-top: 1px solid var(--line); }
.contacts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contacts dt { font-size: 14px; color: var(--muted); }
.contacts dd { font-size: clamp(16px, 1.3vw, 19px); text-align: right; }
.contacts a { transition: color .3s; }
.contacts a:hover { color: var(--pink); }

.formcard { background: var(--sand); color: var(--fg); border-radius: 22px; padding: clamp(24px, 3.4vw, 52px); }

@media (max-width: 999px) {
  .band__grid, .formpage__grid, .pdp__grid, .terms__grid, .faqx__grid, .legal__grid { grid-template-columns: 1fr; }
  .formpage__intro, .gallery, .legal__toc { position: static; }
  .formpage__img { display: none; }
}

/* Editor-only notice when no form is attached yet. */
.formcard__notice {
	margin: 0;
	padding: 18px;
	border: 1px dashed var(--line);
	border-radius: 12px;
	color: var(--muted);
	font-size: 15px;
}

/* Further down a page the section takes normal section spacing instead of the
 * clearance a page header needs under the fixed header. */
main > .formpage:not(:first-child) { padding-top: var(--section); }
/* Form controls.
 *
 * These are the original's own field styles. Gravity Forms renders its own
 * markup, so forms.css maps the plugin's classes onto exactly these rules
 * rather than restyling them twice. */

.form { display: grid; gap: 26px; transition: opacity .35s; }
.form.is-sent { opacity: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__row--split { gap: 26px; align-items: start; }
.field { display: grid; gap: 8px; }
.field label, .fstep__label { font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--fg); }
.field label span { font-weight: 400; color: var(--faint); margin-left: 6px; }
.field input, .field textarea, .select select {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--cream-2); color: var(--fg);
  font: inherit; font-size: 16px; padding: 0 16px; height: 54px; transition: border-color .3s, background-color .3s;
}
.field textarea { height: auto; padding: 14px 16px; resize: vertical; min-height: 120px; line-height: 1.5; }
.field input:hover, .field textarea:hover, .select select:hover { border-color: rgba(14, 42, 28, .3); }
.field input:focus, .field textarea:focus, .select select:focus { outline: none; border-color: var(--velour); background: #fff; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); }
.field__error { font-size: 13.5px; font-weight: 500; color: var(--error); margin-top: 2px; }
.field input[type="date"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; min-height: 54px; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.select select:invalid { color: var(--faint); }
.select { position: relative; }
.select select { -moz-appearance: none; appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.select--inline select { height: 44px; border-radius: 999px; background: transparent; font-size: 14.5px; font-weight: 500; padding-left: 18px; }

.check { position: relative; display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; flex-wrap: wrap; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.form__submit { width: 100%; height: 58px; font-size: 16px; }
.form__done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(12px, 3vw, 40px) 0; opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.form__done.is-in { opacity: 1; transform: none; }
.form__done p { max-width: 40ch; color: var(--muted); font-size: 17px; }
.form__neon { width: 80px; height: 75px; overflow: visible; fill: none; stroke: var(--pink); stroke-width: 2.2; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(234, 58, 147, .55)); margin-bottom: 8px; }

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

/* Cross-cutting responsive and motion overrides.
 *
 * Only rules that span the whole document belong here. Responsive rules that
 * belong to one feature stay in that feature's own stylesheet, next to the
 * rules they override.
 */

@media (max-width: 999px) {
  :root { --head: 66px; }
}

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

/* WordPress admin bar offset.
 *
 * Only for logged-in users: WordPress adds body.admin-bar and pushes the page
 * down, but fixed and sticky elements measure from the viewport, so each one
 * moves down by --ab. Below 600px WordPress lets the bar scroll away; it is
 * kept fixed here so the offset stays correct while scrolling.
 */

body.admin-bar { --ab: 32px; }

@media (max-width: 782px) {
  body.admin-bar { --ab: 46px; }
}

@media (max-width: 600px) {
  html body.admin-bar #wpadminbar { position: fixed; }
}

/* Fixed layers */
.admin-bar .header { top: var(--ab); }
.admin-bar .menu,
.admin-bar .cart,
.admin-bar .profile { top: var(--ab); }
.admin-bar .profile__close { top: calc(18px + var(--ab)); }

/* Sticky columns */
.admin-bar .gallery { top: calc(100px + var(--ab)); }
.admin-bar .faqx__nav,
.admin-bar .formpage__intro,
.admin-bar .legal__toc,
.admin-bar .store__aside { top: calc(110px + var(--ab)); }
.admin-bar .faqx__group { scroll-margin-top: calc(110px + var(--ab)); }

@media (max-width: 999px) {
  .admin-bar .faqx__nav { top: var(--ab); }
  .admin-bar .header:not(.is-hidden) ~ main .faqx__nav { top: calc(var(--head) + var(--ab)); }
}