/* =========================================================
   Niyukti Vansa - base stylesheet
   1. Tokens
   2. Reset
   3. Layout
   4. Header / nav
   5. Hero
   6. Sections
   7. Components
   8. Footer
   ========================================================= */

/* 1. Tokens ----------------------------------------------
   Brand colours are the logo artwork's two inks:
   red    CMYK 1 / 99 / 98 / 0
   orange CMYK 1 / 50 / 98 / 0
   -------------------------------------------------------- */
:root {
	--nv-red: #ed1c24;
	--nv-red-dark: #c8121a;
	--nv-orange: #f7941e;
	--nv-orange-light: #f9a942;

	--nv-ink: #16181c;
	--nv-ink-soft: #5a6371;
	--nv-bg: #ffffff;
	--nv-bg-alt: #fdf7f1;
	--nv-line: #ece3da;

	--nv-brand: var(--nv-red);
	--nv-brand-dark: var(--nv-red-dark);

	--nv-font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--nv-font-script: "Alex Brush", "Segoe Script", cursive;
	/* Poster display face: squared bowls, angular joins, flat-cut terminals,
	   tall and very narrow. The system fallbacks are the closest widely
	   installed equivalents. */
	--nv-font-display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow Bold", Impact, sans-serif;
	/* Supporting line under the wordmark. */
	--nv-font-display-alt: "Anton", "Haettenschweiler", "Arial Narrow Bold", Impact, sans-serif;

	--nv-maxw: 1140px;
	--nv-maxw-narrow: 760px;
	--nv-gap: 1.5rem;
	--nv-section-y: clamp(3rem, 7vw, 6rem);
	--nv-radius: 8px;
	--nv-header-h: 76px;

	/* Spacing between header links, and between the logo and its neighbours.
	   ~65px at 1920px wide, matching the reference layout. */
	--nv-nav-gap: clamp(1.5rem, 3.4vw, 4rem);
}

/* 2. Reset ----------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--nv-header-h);
	overflow-x: hidden;
	max-width: 100%;
}

body {
	margin: 0;
	font-family: var(--nv-font);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--nv-ink);
	background: var(--nv-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100%;
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--nv-brand); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.nv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .75rem 1rem;
	background: var(--nv-brand);
	color: #fff;
}
.nv-skip-link:focus { left: 0; }

/* 3. Layout ---------------------------------------------- */
.nv-container {
	width: 100%;
	max-width: var(--nv-maxw);
	margin-inline: auto;
	padding-inline: var(--nv-gap);
}
.nv-container--narrow { max-width: var(--nv-maxw-narrow); }

/* 4. Header / nav ---------------------------------------- */
.nv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .95);
	border-bottom: 1px solid var(--nv-line);
	backdrop-filter: saturate(160%) blur(8px);
}

.nv-header__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--nv-header-h);
	position: relative;
}

/* The hover target. Only the logo takes up space; both navs are absolutely
   positioned to its left and right, so the bar reads as just the mark until
   you point at it. They stay descendants of the cluster, and :hover walks the
   DOM rather than the visual box, so moving onto a link keeps the menu open. */
.nv-header__cluster {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nv-header__mark {
	display: grid;
	place-items: center;
	width: clamp(62px, 7vw, 84px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 0 3px var(--nv-red),
		0 6px 18px rgba(0, 0, 0, .35);
	transition: transform .7s cubic-bezier(.22, .68, .3, 1), box-shadow .3s ease;
	will-change: transform;
}
.nv-header__mark-img {
	width: 76%;
	height: 76%;
	object-fit: contain;
}

/* A full turn of the badge on hover, with the nav fanning out behind it. */
.nv-header__cluster:hover .nv-header__mark,
.nv-header__cluster:focus-within .nv-header__mark {
	transform: rotate(360deg);
	box-shadow:
		0 0 0 3px var(--nv-red),
		0 10px 26px rgba(237, 28, 36, .45);
}

.nv-header__toggle {
	display: none;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	padding: 0;
	border: 1px solid var(--nv-line);
	border-radius: var(--nv-radius);
	background: transparent;
	cursor: pointer;
	z-index: 2;
}
.nv-header__toggle-bar,
.nv-header__toggle-bar::before,
.nv-header__toggle-bar::after {
	display: block;
	width: 20px; height: 2px;
	margin-inline: auto;
	background: var(--nv-ink);
	content: "";
}
.nv-header__toggle-bar::before { transform: translateY(-6px); }
.nv-header__toggle-bar::after { transform: translateY(4px); }

/* Hidden until the cluster is hovered, and sitting just outside the badge.
   Hidden with opacity rather than visibility on purpose: visibility:hidden
   drops the links out of the tab order, and then :focus-within can never
   fire, leaving the menu unreachable by keyboard. Tabbing to a link now
   reveals the nav the same way hovering does. */
.nv-nav {
	position: absolute;
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
/* Closed, the halves sit tucked behind the badge; they slide out to
   --nv-nav-gap on reveal so the space around the logo matches the space
   between the links. */
.nv-nav--left  { right: 100%; transform: translate(1rem, -50%); }
.nv-nav--right { left: 100%;  transform: translate(-1rem, -50%); }

.nv-header__cluster:hover .nv-nav,
.nv-header__cluster:focus-within .nv-nav {
	opacity: 1;
	pointer-events: auto;
}
.nv-header__cluster:hover .nv-nav--left,
.nv-header__cluster:focus-within .nv-nav--left {
	transform: translate(calc(var(--nv-nav-gap) * -1), -50%);
}
.nv-header__cluster:hover .nv-nav--right,
.nv-header__cluster:focus-within .nv-nav--right {
	transform: translate(var(--nv-nav-gap), -50%);
}

.nv-nav__list {
	display: flex;
	gap: var(--nv-nav-gap);
	margin: 0; padding: 0;
	list-style: none;
	white-space: nowrap;
}
.nv-nav__list a {
	text-decoration: none;
	color: var(--nv-ink-soft);
	font-weight: 500;
	font-size: .95rem;
	transition: color .3s ease, text-shadow .3s ease;
}
.nv-nav__list a:hover,
.nv-nav__item.is-active > a { color: var(--nv-brand); }

/* Over a full-bleed hero the bar starts transparent and only gains a
   background once the page has scrolled past it. */
.nv-header--overlay {
	position: fixed;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}
.nv-header--overlay .nv-nav__list a { color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.nv-header--overlay .nv-nav__list a:hover { color: var(--nv-orange); }
.nv-header--overlay .nv-header__toggle { border-color: rgba(255, 255, 255, .6); }
.nv-header--overlay .nv-header__toggle-bar,
.nv-header--overlay .nv-header__toggle-bar::before,
.nv-header--overlay .nv-header__toggle-bar::after { background: #fff; }

/* Past the hero the bar stays fully transparent - no panel, no border, no
   blur. Only the ink flips to dark so it reads against the light sections. */
.nv-header--overlay.is-past-hero {
	background: transparent;
	border-bottom-color: transparent;
	backdrop-filter: none;
}
.nv-header--overlay.is-past-hero .nv-nav__list a { color: var(--nv-ink); text-shadow: none; }
.nv-header--overlay.is-past-hero .nv-nav__list a:hover { color: var(--nv-brand); }
.nv-header--overlay.is-past-hero .nv-header__toggle { border-color: var(--nv-line); }
.nv-header--overlay.is-past-hero .nv-header__toggle-bar,
.nv-header--overlay.is-past-hero .nv-header__toggle-bar::before,
.nv-header--overlay.is-past-hero .nv-header__toggle-bar::after { background: var(--nv-ink); }

/* Touch has no hover, so below this width the nav drops into a panel that the
   hamburger toggles instead. The cluster's hover rules are switched off. */
@media (max-width: 860px) {
	.nv-header__toggle { display: block; }

	.nv-header__cluster:hover .nv-header__mark,
	.nv-header__cluster:focus-within .nv-header__mark { transform: none; }

	.nv-nav,
	.nv-header__cluster:hover .nv-nav,
	.nv-header__cluster:focus-within .nv-nav {
		position: absolute;
		left: 50%;
		right: auto;
		top: 100%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background: var(--nv-bg);
	}
	.nv-nav--right { top: calc(100% + 1px); }

	.nv-header.is-open .nv-nav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	.nv-header.is-open .nv-nav--left { padding-top: .5rem; }
	.nv-header.is-open .nv-nav--right {
		top: auto;
		padding-bottom: .75rem;
		border-bottom: 1px solid var(--nv-line);
	}

	/* Stack the two halves as one list. */
	.nv-header.is-open .nv-header__cluster { position: static; }
	.nv-header.is-open .nv-nav--left  { top: 100%; }
	.nv-header.is-open .nv-nav--right { top: calc(100% + 5.5rem); }

	.nv-nav__list {
		flex-direction: column;
		gap: 0;
		padding-inline: var(--nv-gap);
		white-space: normal;
	}
	.nv-nav__list a { display: block; padding: .7rem 0; }

	.nv-header--overlay.is-open .nv-nav__list a { color: var(--nv-ink); text-shadow: none; }
}

/* 5. Hero ------------------------------------------------- */
.nv-hero {
	position: relative;
	height: 100svh;
	max-height: 44rem;
	min-height: 32rem;
	display: flex;
	overflow: visible;
	background: #101010;
	isolation: isolate;
}

/* Background layer: video, poster and the dim over both. */
.nv-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.nv-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.nv-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			rgba(0, 0, 0, .55) 0%,
			rgba(0, 0, 0, .15) 35%,
			rgba(0, 0, 0, .75) 100%),
		rgba(0, 0, 0, var(--nv-hero-overlay, .45));
}

/* Content sits at the bottom, centred, like the reference. */
.nv-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	padding-block: 2.5rem clamp(4rem, 9vh, 6rem);
	text-align: center;
	color: #fff;
}

/* Round badge, top centre - a white disc with a red ring, as in the reference.
   The disc is the wrapper so any logo shape (square, wide, transparent) still
   sits in a true circle; the image is just contained inside it. */
.nv-hero__mark {
	position: absolute;
	top: clamp(1.25rem, 3.5vh, 2.25rem);
	left: 50%;
	transform: translateX(-50%);
	width: clamp(110px, 13vw, 152px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	box-shadow:
		0 0 0 4px var(--nv-red),
		0 10px 30px rgba(0, 0, 0, .45);
}

/* The inset is a percentage of the IMAGE, not padding on the disc: percentage
   padding resolves against the containing block, which here is the whole hero
   inner - 9% of that swallowed the badge and collapsed the image to 0x0. */
.nv-hero__mark-img {
	width: 78%;
	height: 78%;
	object-fit: contain;
	border-radius: 0;
}

.nv-hero__eyebrow {
	margin: 0 0 .6rem;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .72rem;
	font-weight: 600;
	color: var(--nv-orange);
}

.nv-hero__title {
	margin: 0;
	font-family: var(--nv-font-display);
	font-weight: 900;
	text-transform: uppercase;
	line-height: .84;
	/* Big Shoulders is drawn tight; pulling in slightly closes the counters
	   the way the reference wordmark does. */
	letter-spacing: -.005em;
	/* It is far narrower than a normal grotesque, so it needs a much larger
	   size to hold the same measure. */
	font-size: clamp(4.25rem, 14vw, 9.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Both lines use the same recipe as the reference wordmark: a gradient face,
   a heavy dark outline, and a solid extrude falling to the lower right.

   The element itself draws the OUTLINE AND EXTRUDE, and an ::after duplicate
   paints the gradient face on top of it. The obvious arrangement - face on the
   element, extrude on a ::before sitting behind at z-index:-1 - breaks the
   moment a letter is transformed onto the arch, because a transform creates a
   stacking context and the negative child then paints above the element's own
   background rather than beneath it, burying the face under the extrude.
   Stacking the other way round has no such dependency.

   The face and the extrude both live on each letter of line one rather than on
   the word, so they travel with the arch. A 180deg gradient repeated per
   letter is indistinguishable from one drawn across the whole word, because
   every letter box is the same height. */
.nv-hero__ch,
.nv-hero__title-alt {
	position: relative;
	display: inline-block;
	color: #16090a;
	-webkit-text-fill-color: #16090a;
	-webkit-text-stroke: .038em #16090a;
	/* Stacked offsets build the extruded block. The steps are deliberately
	   finer than they are long, otherwise the diagonal shows banding on the
	   curved shoulders of round letters. */
	text-shadow:
		.012em .012em 0 #16090a,
		.024em .024em 0 #16090a,
		.036em .036em 0 #16090a,
		.048em .048em 0 #16090a,
		.060em .060em 0 #16090a,
		.072em .072em 0 #16090a,
		.084em .084em 0 #16090a,
		.096em .096em 0 #16090a,
		.11em .11em .16em rgba(0, 0, 0, .55);
}

/* The lit face, laid exactly over the extruded copy below it. */
.nv-hero__ch::after,
.nv-hero__title-alt::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	/* Both inherit, and both belong to the layer underneath. */
	-webkit-text-stroke-width: 0;
	text-shadow: none;
}

/* Lift and tilt, both supplied per letter by nv_arched_letters(). */
.nv-hero__ch {
	transform: translateY(var(--nv-y, 0)) rotate(var(--nv-r, 0deg));
}

/* Line one: the logo's orange-into-red run, with a lit top edge. */
.nv-hero__ch::after {
	background-image: linear-gradient(180deg,
		#ffd9a0 0%,
		var(--nv-orange) 18%,
		var(--nv-red) 52%,
		var(--nv-red-dark) 100%);
}

/* Line one carries no paint of its own now - each letter does - but it still
   needs room for the lifted centre to sit in without being clipped. */
.nv-hero__title-main {
	display: inline-block;
	padding-top: .14em;
}

/* Line two: brushed silver, as the reference sets its second word. Held back
   to a supporting role - smaller, tracked out and on the softer face - so the
   wordmark above stays dominant. */
.nv-hero__title-alt {
	font-family: var(--nv-font-display-alt);
	font-weight: 400;
	font-size: .42em;
	letter-spacing: .14em;
	margin-top: .12em;
	-webkit-text-stroke-width: .04em;
}
.nv-hero__title-alt::after {
	background-image: linear-gradient(180deg,
		#ffffff 0%,
		#f2f2f2 42%,
		#9d9d9d 56%,
		#e6e6e6 78%,
		#bdbdbd 100%);
}


.nv-hero__tagline {
	font-family: var(--nv-font-script);
	font-size: clamp(1.6rem, 3.6vw, 2.35rem);
	line-height: 1.25;
	color: #fff;
	max-width: 22ch;
	margin: 1rem auto .25rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* Round scroll cue, half-overlapping the section below. */
.nv-hero__scroll {
	position: absolute;
	bottom: -34px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--nv-red);
	color: #fff;
	box-shadow: 0 8px 22px rgba(237, 28, 36, .4);
	transition: transform .25s ease, background .25s ease;
}
.nv-hero__scroll:hover {
	background: var(--nv-red-dark);
	transform: translateX(-50%) translateY(4px);
}
.nv-hero__scroll-icon { animation: nv-bob 2.2s ease-in-out infinite; }

@keyframes nv-bob {
	0%, 100% { transform: translateY(-2px); }
	50%      { transform: translateY(3px); }
}

/* Reduced motion: drop the video entirely and let the poster background show
   through. The element selector spares the <img> fallback, which is static. */
@media (prefers-reduced-motion: reduce) {
	.nv-hero__scroll-icon { animation: none; }
	video.nv-hero__video { display: none; }
}

@media (max-width: 640px) {
	.nv-hero { max-height: none; }
	.nv-hero__scroll { width: 62px; height: 62px; bottom: -28px; }
}

/* 6. Sections -------------------------------------------- */
.nv-section { padding-block: var(--nv-section-y); }
.nv-section:nth-of-type(even) { background: var(--nv-bg-alt); }
.nv-section__title { font-size: clamp(1.6rem, 3vw, 2.25rem); }

/* Clear the scroll badge that overhangs the hero. */
.nv-hero + .nv-section { padding-top: calc(var(--nv-section-y) + 2.5rem); }

/* --- About ------------------------------------------------ */

/* The paper texture is passed in from the template as --nv-paper, so the
   stylesheet never has to hardcode an uploads path. The flat colour underneath
   is the fallback for browsers that cannot decode AVIF. */
.nv-section.nv-about {
	background-color: var(--nv-bg-alt);
	/* The artwork runs past the container on wide screens. `clip` rather than
	   `hidden` so this never becomes a scroll container. */
	overflow-x: clip;
	/* Tighter than the global section rhythm. The extra top allowance is the
	   clearance for the scroll badge overhanging from the hero; it overrides
	   the `.nv-hero + .nv-section` rule, which is deliberately more generous. */
	padding-block: calc(clamp(2rem, 3.5vw, 3rem) + 1.75rem) clamp(2rem, 3.5vw, 3rem);
}
.nv-section.nv-about--paper {
	background-image: var(--nv-paper);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.nv-about__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.25rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.nv-about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* Once there is room the artwork reaches past the container edge so it reads
   as scenery rather than a boxed-in picture. The text column keeps enough
   width for the authored heading break to survive. */
@media (min-width: 1100px) {
	.nv-about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); }
	.nv-about__media { margin-right: calc(var(--nv-gap) * -1 - 4.5vw); }
}

/* Star, label, then a rule running off to the right. */
.nv-about__eyebrow {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.1rem;
}
.nv-about__star { color: var(--nv-orange); flex: none; }
.nv-about__eyebrow-label {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--nv-ink);
}
.nv-about__eyebrow-rule {
	height: 2px;
	width: clamp(2rem, 6vw, 5rem);
	background: linear-gradient(90deg, var(--nv-orange), rgba(247, 148, 30, 0));
}

.nv-about__title {
	font-family: var(--nv-font-display);
	font-weight: 900;
	text-transform: uppercase;
	/* Capped so the longer first line clears its column without wrapping -
	   measured at 519px natural against a 463px column at 2.9rem, hence the
	   step down. Shrinking the type keeps the artwork at full size. */
	font-size: clamp(1.7rem, 2.9vw, 2.4rem);
	line-height: 1.02;
	letter-spacing: .005em;
	color: var(--nv-ink);
	margin: 0 0 1.15rem;
	/* No width cap here - the grid column already sets the measure, and a
	   second constraint just fights it at intermediate widths. */
}
/* Each line is its own block, so the break is authored rather than left to
   wherever the column happens to wrap. */
.nv-about__title-line { display: block; }
.nv-about__title-accent { color: var(--nv-red); }

.nv-about__body {
	/* A warm grey rather than the cool default, which reads slightly blue
	   against the paper. */
	color: #574d45;
	/* No measure cap - the copy runs the full width of its column. */
}
.nv-about__body p { margin: 0 0 .9rem; }
.nv-about__body p { margin: 0 0 1.1rem; }

.nv-about__cta { margin-top: .75rem; }

.nv-about__image {
	width: 100%;
	height: auto;
	/* Line art on paper - no card, no radius, it sits on the ground. */
	mix-blend-mode: multiply;
}

/* --- Food Collage Section (Chained Photo Strip) ---------- */

.nv-section.nv-collage-section {
	padding-top: 0;
	padding-bottom: clamp(1rem, 2.5vw, 2.5rem);
	margin-top: clamp(-2rem, -3vw, -3.25rem);
	overflow-x: clip;
	background: transparent;
	position: relative;
	z-index: 10;
}

.nv-collage {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: clamp(0.5rem, 1.5vw, 1.5rem);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
	cursor: grab;
}

.nv-collage:active {
	cursor: grabbing;
}

.nv-collage__viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
	padding-inline: 1.5rem;
	/* Subtle edge fade so images slide in and out smoothly */
	mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
}

.nv-collage__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.nv-collage__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding-block: 2.25rem 1.5rem;
}

.nv-collage__card {
	flex: none;
	position: relative;
	z-index: var(--card-z, 1);
	transform: rotate(var(--card-tilt, 0deg)) translateY(var(--card-y, 0px));
	transform-origin: center center;
	outline: none;
}

/* Precise subtle overlap matching the reference screenshot */
.nv-collage__card + .nv-collage__card {
	margin-left: clamp(-24px, -2.5vw, -40px);
}

.nv-collage__group + .nv-collage__group {
	margin-left: clamp(-24px, -2.5vw, -40px);
}

/* Polaroids / Framed Sticker Neo-Brutalist Frame */
.nv-collage__frame {
	position: relative;
	background: #16181c;
	border: clamp(5px, 0.45vw, 7.5px) solid #16181c;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2), 4px 6px 0px #16181c;
}

/* Reduced height Vertical / Tall Portrait (e.g. Card 3 and Card 5 in reference) */
.nv-collage__card--xtall .nv-collage__frame {
	width: clamp(280px, 28vw, 390px);
	height: clamp(340px, 35vw, 470px);
}

/* Standard Tall Portrait (e.g. Card 1 in reference) */
.nv-collage__card--tall .nv-collage__frame {
	width: clamp(260px, 26vw, 360px);
	height: clamp(320px, 33vw, 440px);
}

/* Wide Landscape (e.g. Card 2, Card 4, Card 6 in reference) */
.nv-collage__card--wide .nv-collage__frame {
	width: clamp(330px, 34vw, 470px);
	height: clamp(230px, 24vw, 330px);
}

.nv-collage__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.nv-collage__track { will-change: auto; }
}

@media (max-width: 640px) {
	.nv-section.nv-collage-section {
		padding-top: 0;
		padding-bottom: 1.5rem;
		margin-top: -1.5rem;
	}
	.nv-collage {
		padding-block: 0.75rem 1.25rem;
	}
	.nv-collage__card + .nv-collage__card {
		margin-left: -16px;
	}
	.nv-collage__group + .nv-collage__group {
		margin-left: -16px;
	}
	.nv-collage__card--tall .nv-collage__frame {
		width: 220px;
		height: 310px;
	}
	.nv-collage__card--wide .nv-collage__frame {
		width: 270px;
		height: 210px;
	}
	.nv-collage__card--square .nv-collage__frame {
		width: 230px;
		height: 230px;
	}
}

/* --- Specials Section (Dark Menu Board with Checkerboard Ribbon) --- */

.nv-section.nv-specials {
	position: relative;
	background: 
		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(61, 33, 1, 0) 140px),
		radial-gradient(ellipse 90% 50% at 50% 0%, rgba(255, 245, 230, 0.07) 0%, transparent 75%),
		#3d2101;
	color: #f7ede2;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
}

/* Retro Diner / Pizza Restaurant Top & Bottom Checkerboard Ribbon */
.nv-specials__checker {
	--nv-checker-sq: clamp(24px, 2.6vw, 32px);
	width: 100%;
	height: calc(var(--nv-checker-sq) * 3);
	background-color: #3d2101;
	background-image: repeating-conic-gradient(#ffffff 0% 25%, #3d2101 0% 50%);
	background-size: calc(var(--nv-checker-sq) * 2) calc(var(--nv-checker-sq) * 2);
	background-position: 0 0;
	opacity: 1;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.nv-specials__checker--top {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
}

.nv-specials__checker--top::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 40%, rgba(61, 33, 1, 0) 100%);
	pointer-events: none;
}

.nv-specials__checker--bottom {
	margin-top: clamp(3.5rem, 6vw, 5.5rem);
	background-color: #3d2101;
}

.nv-specials__inner {
	position: relative;
	max-width: 1240px;
	z-index: 2;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

/* 3D Momo Floating & Swinging on Left Flank (Restricted Top-End to Middle) */
.nv-specials__3d-momo-wrap {
	position: absolute;
	left: clamp(-45px, -3vw, -15px);
	top: clamp(20px, 4vw, 50px);
	z-index: 6;
	pointer-events: none;
	animation: nv-momo-swing-v 6s ease-in-out infinite alternate;
	will-change: transform;
}

.nv-specials__3d-momo {
	display: block;
	width: clamp(110px, 13vw, 160px);
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.65)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
	user-select: none;
}

@keyframes nv-momo-swing-v {
	0% {
		transform: translateY(0px) rotate(-9deg) scale(0.96);
	}
	50% {
		transform: translateY(75px) rotate(5deg) scale(1.02);
	}
	100% {
		transform: translateY(150px) rotate(-6deg) scale(0.97);
	}
}

/* 3D Green Chili & Onion Slices Floating on Bottom Right Flank */
.nv-specials__3d-garnish-wrap {
	position: absolute;
	right: clamp(-30px, -1.5vw, 5px);
	bottom: clamp(-75px, -6vw, -35px);
	top: auto;
	z-index: 6;
	pointer-events: none;
	animation: nv-garnish-float-v 7s ease-in-out infinite alternate;
	will-change: transform;
}

.nv-specials__3d-garnish {
	display: block;
	width: clamp(120px, 14vw, 175px);
	height: auto;
	filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.7)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
	user-select: none;
}

@keyframes nv-garnish-float-v {
	0% {
		transform: translateY(0px) rotate(6deg) scale(0.97);
	}
	50% {
		transform: translateY(18px) rotate(-3deg) scale(1.02);
	}
	100% {
		transform: translateY(-15px) rotate(5deg) scale(0.98);
	}
}

.nv-specials__header {
	margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
}

.nv-specials__title {
	font-family: var(--nv-font-display-alt), "Cooper Black", "Fraunces", Georgia, serif;
	font-weight: 800;
	font-size: clamp(2.1rem, 4.2vw, 3.4rem);
	color: #f5a623;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.nv-specials__subtitle {
	color: #cbb8aa;
	font-size: clamp(0.95rem, 1.3vw, 1.12rem);
	margin: 0;
	max-width: 65ch;
}

/* 3-Column Menu Grid */
.nv-specials__grid--3col {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 3.8vw, 3.5rem);
}

@media (min-width: 720px) and (max-width: 1060px) {
	.nv-specials__grid--3col {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1061px) {
	.nv-specials__grid--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

.nv-specials__col {
	display: flex;
	flex-direction: column;
}

.nv-specials__col-head {
	display: flex;
	align-items: center;
	padding: 0.85rem 1.2rem;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	margin-bottom: 0.75rem;
}

.nv-specials__col-title {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: clamp(1.1rem, 1.45vw, 1.3rem);
	font-weight: 800;
	color: #ffffff;
	margin: 0;
	letter-spacing: 0.01em;
}

.nv-specials__dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex-shrink: 0;
}

.nv-specials__dot--veg {
	background: #52c41a;
	box-shadow: 0 0 10px rgba(82, 196, 26, 0.7);
}

.nv-specials__dot--fav {
	background: #f5a623;
	box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
}

.nv-specials__dot--indian {
	background: #ed1c24;
	box-shadow: 0 0 10px rgba(237, 28, 36, 0.7);
}

.nv-specials__list {
	display: flex;
	flex-direction: column;
}

.nv-specials__item {
	padding-block: 1.2rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.16);
}

.nv-specials__item:last-child {
	border-bottom: none;
}

.nv-specials__item-name {
	font-size: clamp(1.05rem, 1.3vw, 1.18rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	line-height: 1.3;
}

.nv-specials__item-desc {
	color: #c4b5a8;
	font-size: 0.88rem;
	line-height: 1.55;
	margin: 0.45rem 0 0;
}

.nv-contact__intro { color: var(--nv-ink-soft); max-width: 60ch; }
.nv-contact__list { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.nv-contact__item { display: grid; gap: .15rem; }
.nv-contact__label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 600;
	color: var(--nv-ink-soft);
}

/* --- Testimonials Section (Slice Town Framer Reference Style) --- */

.nv-section.nv-testimonials {
	position: relative;
	background-color: #f8f4e0; /* Light warm cream matching token #f8f4e0 */
	color: #3d2101; /* Deep warm brown token #3d2101 */
	padding: clamp(5rem, 8vw, 8rem) 0 clamp(6rem, 10vw, 9rem);
	overflow: hidden;
}

/* Background Pattern Overlay */
.nv-testimonials__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.85;
	z-index: 1;
}

.nv-testimonials__pattern-img,
.nv-testimonials__pattern-svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nv-testimonials__container {
	position: relative;
	z-index: 5;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Header */
.nv-testimonials__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: clamp(3.5rem, 6vw, 5rem);
	position: relative;
}

.nv-testimonials__title {
	font-family: "Fraunces", "Playfair Display", "Cooper Black", Georgia, "Times New Roman", serif;
	font-weight: 600;
	font-size: clamp(2.6rem, 5.5vw, 4.4rem);
	color: #3d2101;
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0;
	text-align: center;
}

/* Scrapbook 6-Item Grid Layout */
.nv-testimonials__scrapbook {
	display: grid;
	grid-template-columns: 1fr 1.32fr 1fr;
	gap: clamp(1.8rem, 3.5vw, 3.2rem);
	align-items: start;
	width: 100%;
}

@media (max-width: 960px) {
	.nv-testimonials__scrapbook {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin-inline: auto;
		gap: 3.5rem;
	}
}

.nv-testimonials__item {
	display: flex;
	flex-direction: column;
	position: relative;
}

.nv-testimonials__item--top-left {
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.nv-testimonials__item--center {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(2rem, 3.5vw, 3.2rem);
}

.nv-testimonials__item--top-right {
	margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.nv-testimonials__item--bottom-left {
	margin-bottom: 1rem;
}

.nv-testimonials__item--bottom-center {
	margin-top: -3.5rem;
	margin-left: clamp(1rem, 3vw, 2.5rem);
	position: relative;
	z-index: 6;
}

@media (max-width: 960px) {
	.nv-testimonials__item--bottom-center {
		margin-top: 0;
		margin-left: 0;
	}
}

.nv-testimonials__item--bottom-right {
	margin-top: 0.5rem;
}

/* Authentic Framer 3D Post-It Notes Aesthetics */
.nv-testimonials__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 290px;
	transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1);
	cursor: default;
}

.nv-testimonials__card-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(0 14px 28px rgba(61, 33, 1, 0.16));
}

.nv-testimonials__card-bg img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	display: block;
}

.nv-testimonials__card-inner {
	position: relative;
	z-index: 3;
	padding: clamp(2.2rem, 3.6vw, 3rem) clamp(2rem, 3vw, 2.6rem);
}

.nv-testimonials__card--yellow {
	transform: rotate(-3.5deg);
}

.nv-testimonials__card--yellow:hover {
	transform: rotate(-1.5deg) translateY(-4px) scale(1.02);
}

.nv-testimonials__card--green {
	transform: rotate(4deg);
}

.nv-testimonials__card--green:hover {
	transform: rotate(2deg) translateY(-4px) scale(1.02);
}

.nv-testimonials__card--pink {
	transform: rotate(3deg);
}

.nv-testimonials__card--pink:hover {
	transform: rotate(1deg) translateY(-4px) scale(1.02);
}

.nv-testimonials__card--blue {
	transform: rotate(-2.5deg);
}

.nv-testimonials__card--blue:hover {
	transform: rotate(0deg) translateY(-4px) scale(1.02);
}

/* Typography inside Sticky Notes */
.nv-testimonials__text {
	font-family: var(--nv-font-sans);
	font-size: clamp(1.02rem, 1.25vw, 1.15rem);
	font-weight: 600;
	line-height: 1.48;
	color: #3d2101;
	margin: 0 0 1.25rem 0;
	letter-spacing: -0.01em;
}

.nv-testimonials__author {
	font-family: var(--nv-font-sans);
	font-size: 0.95rem;
	font-weight: 800;
	color: #3d2101;
	margin: 0;
}

/* Authentic Framer 3D Pushpins */
.nv-testimonials__pin {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	filter: drop-shadow(0 4px 8px rgba(61, 33, 1, 0.28));
}

.nv-testimonials__pin img {
	width: 100%;
	height: auto;
	display: block;
}

.nv-testimonials__pin--red {
	top: -14px;
	left: 14px;
	width: 34px;
}

.nv-testimonials__pin--blue {
	top: -14px;
	right: 18px;
	width: 32px;
}

.nv-testimonials__pin--red-polaroid {
	top: -12px;
	left: 12px;
	width: 32px;
}

/* Authentic Framer Masking & Washi Tapes */
.nv-testimonials__tape {
	position: absolute;
	z-index: 10;
	pointer-events: none;
	filter: drop-shadow(0 3px 6px rgba(61, 33, 1, 0.16));
}

.nv-testimonials__tape img {
	width: 100%;
	height: auto;
	display: block;
}

.nv-testimonials__tape--top-center {
	top: -38px;
	left: 50%;
	transform: translateX(-50%) rotate(1deg);
	width: 72px;
}

.nv-testimonials__tape--pink {
	top: -16px;
	right: 14px;
	transform: rotate(18deg);
	width: 135px;
}

.nv-testimonials__tape--kraft-left {
	top: -16px;
	left: 14px;
	transform: rotate(-3deg);
	width: 120px;
}

/* Polaroid Photo Frames */
.nv-testimonials__polaroid {
	position: relative;
	background-color: #ffffff;
	padding: 12px 12px 26px 12px;
	border-radius: 3px;
	box-shadow: 0 20px 42px rgba(61, 33, 1, 0.18), 0 4px 12px rgba(61, 33, 1, 0.08);
	transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.28s ease;
	width: 100%;
}

.nv-testimonials__polaroid--main {
	max-width: 390px;
	transform: rotate(-7.5deg);
}

.nv-testimonials__polaroid--main:hover {
	transform: rotate(-4.5deg) scale(1.03);
	box-shadow: 0 28px 56px rgba(61, 33, 1, 0.24), 0 8px 18px rgba(61, 33, 1, 0.12);
}

.nv-testimonials__polaroid--secondary {
	max-width: 320px;
	transform: rotate(6deg);
}

.nv-testimonials__polaroid--secondary:hover {
	transform: rotate(3deg) scale(1.03);
	box-shadow: 0 28px 56px rgba(61, 33, 1, 0.24), 0 8px 18px rgba(61, 33, 1, 0.12);
}

.nv-testimonials__photo-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3.8;
	border-radius: 2px;
	overflow: hidden;
	background-color: #231406;
}

.nv-testimonials__photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Action Buttons inside Slots */
.nv-testimonials__btn-slot {
	margin-top: 1.8rem;
	display: flex;
	justify-content: flex-start;
}

.nv-testimonials__pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background-color: #ffffff;
	color: #000000;
	border: 2.5px solid #000000;
	border-radius: 12px;
	padding: 0.65rem 1.3rem 0.65rem 1.4rem;
	font-family: var(--nv-font-sans);
	font-weight: 800;
	font-size: 1.02rem;
	text-decoration: none;
	box-shadow: -3px 3px 0 #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.nv-testimonials__pill-btn:hover {
	transform: translateY(-2px);
	box-shadow: -4px 4px 0 #000000;
	background-color: #fffdfa;
	color: #000000;
}

.nv-testimonials__pill-btn:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 #000000;
}

.nv-testimonials__pill-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #fab037;
	color: #000000;
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1;
}

/* --- Reservation Section (Slice Town Framer Reference Style) --- */

.nv-section.nv-reservation {
	position: relative;
	background-color: #fab037; /* Warm yellow #fab037 background matching Framer reference */
	color: #1a0f05;
	padding-top: clamp(4.5rem, 7.5vw, 6.5rem);
	padding-bottom: 0;
	overflow: hidden;
}

/* Full-Screen Photographic Collage Wrapper */
.nv-reservation__collage-wrap {
	position: absolute;
	inset: -220px -160px -220px -160px;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
	background-color: #fab037; /* #fab037 yellow background in gaps */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tilted Image Grid (rotate -6deg matching Framer reference) */
.nv-reservation__collage {
	width: 135%;
	height: 160%;
	display: flex;
	justify-content: space-between;
	gap: clamp(14px, 1.8vw, 22px); /* #fab037 yellow gaps */
	transform: rotate(-6deg);
	transform-origin: center center;
}

/* 4 Vertical Moving Strips with Reduced Width */
.nv-reservation__strip {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 22px); /* #fab037 yellow gaps between panels */
	width: calc(25% - clamp(10px, 1.3vw, 16px));
	flex: 0 0 calc(25% - clamp(10px, 1.3vw, 16px));
	will-change: transform;
}

.nv-reservation__strip-group {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 22px);
	width: 100%;
	flex-shrink: 0;
}

/* Elongated Rectangular Photo Panels */
.nv-reservation__panel {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background-color: #231406;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
}

.nv-reservation__panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nv-reservation__panel-tint {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.32);
	pointer-events: none;
}

/* Elongated Rectangle Heights for 4 Columns */
.nv-reservation__panel--1-1 { height: clamp(440px, 52vh, 640px); }
.nv-reservation__panel--1-2 { height: clamp(480px, 56vh, 680px); }
.nv-reservation__panel--1-3 { height: clamp(420px, 50vh, 620px); }

.nv-reservation__panel--2-1 { height: clamp(420px, 50vh, 620px); }
.nv-reservation__panel--2-2 { height: clamp(500px, 58vh, 700px); }
.nv-reservation__panel--2-3 { height: clamp(450px, 54vh, 650px); }

.nv-reservation__panel--3-1 { height: clamp(460px, 55vh, 660px); }
.nv-reservation__panel--3-2 { height: clamp(430px, 51vh, 630px); }
.nv-reservation__panel--3-3 { height: clamp(490px, 57vh, 690px); }

.nv-reservation__panel--4-1 { height: clamp(450px, 54vh, 650px); }
.nv-reservation__panel--4-2 { height: clamp(480px, 56vh, 680px); }
.nv-reservation__panel--4-3 { height: clamp(420px, 50vh, 620px); }

@media (max-width: 900px) {
	.nv-reservation__strip--2,
	.nv-reservation__strip--3 {
		display: none;
	}
	.nv-reservation__strip--1,
	.nv-reservation__strip--4 {
		width: calc(50% - 10px);
		flex: 0 0 calc(50% - 10px);
	}
}

.nv-reservation__container {
	position: relative;
	z-index: 5;
	max-width: 860px;
	margin: 0 auto;
	padding-inline: clamp(1rem, 3.5vw, 2rem);
}

/* Header & Title */
.nv-reservation__header {
	text-align: center;
	margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.nv-reservation__title {
	font-family: var(--nv-font-display-alt), "Cooper Black", "Fraunces", Georgia, serif;
	font-weight: 800;
	font-size: clamp(2.5rem, 5.2vw, 4rem);
	color: #fab037;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.85);
}

/* Card Wrapper & Floating Stamp */
.nv-reservation__card-wrapper {
	position: relative;
	margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

.nv-reservation__stamp {
	position: absolute;
	top: -36px;
	right: clamp(1.5rem, 6vw, 4rem);
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: #321905;
	border: 3px solid #fab037;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transform: rotate(-8deg);
	z-index: 10;
	pointer-events: none;
}

.nv-reservation__stamp-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px dashed rgba(250, 176, 55, 0.6);
	border-radius: 50%;
}

.nv-reservation__stamp-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nv-reservation__stamp-text {
	font-family: var(--nv-font-sans);
	font-size: 10px;
	font-weight: 800;
	fill: #fab037;
	letter-spacing: 0.12em;
}

.nv-reservation__stamp-center {
	font-family: var(--nv-font-sans);
	font-size: 0.72rem;
	font-weight: 900;
	color: #fab037;
	text-align: center;
	line-height: 1.15;
	letter-spacing: 0.05em;
}

/* Cream Reservation Card */
.nv-reservation__card {
	background-color: #faf3e6;
	border-radius: clamp(24px, 3.8vw, 34px);
	padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.75rem, 4vw, 3.2rem);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Success Notice */
.nv-reservation__success {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: #d4edda;
	color: #155724;
	border: 1.5px solid #c3e6cb;
	border-radius: 12px;
	padding: 1.15rem 1.4rem;
	margin-bottom: 1.8rem;
	font-weight: 600;
}

.nv-reservation__success svg {
	flex-shrink: 0;
	color: #28a745;
}

.nv-reservation__success p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.4;
}

/* Form Grid & Fields */
.contact-form,
.wpcf7-form {
	width: 100%;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.5vw, 1.85rem);
	margin-bottom: 1.35rem;
}

@media (max-width: 640px) {
	.form-row {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
}

.form-field.full-width {
	margin-bottom: 1.35rem;
}

.form-field label {
	font-family: var(--nv-font-sans);
	font-size: clamp(0.92rem, 1.2vw, 1.02rem);
	font-weight: 700;
	color: #1f1207;
	margin: 0;
	letter-spacing: -0.01em;
}

/* Form Inputs & Textarea */
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field input[type="number"],
.form-field textarea,
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
	width: 100%;
	background-color: #ffffff;
	border: 1.5px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	padding: 0.95rem 1.25rem;
	font-size: 1rem;
	color: #1e1208;
	font-family: var(--nv-font-sans);
	font-weight: 500;
	outline: none;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
	color: #8c8278;
	opacity: 1;
	font-weight: 400;
}

.form-field input:focus,
.form-field textarea:focus,
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
	border-color: #fab037;
	box-shadow: 0 0 0 3.5px rgba(250, 176, 55, 0.28);
	background-color: #ffffff;
}

.form-field textarea,
.wpcf7-form-control-wrap textarea {
	border-radius: 14px;
	min-height: 120px;
	resize: vertical;
	line-height: 1.5;
}

/* Form Submit Button */
.form-submit {
	margin-top: 1.6rem;
	text-align: left;
}

.nv-reservation__submit-btn,
.form-submit input[type="submit"],
.wpcf7-submit {
	display: inline-block;
	background-color: #fab037;
	color: #000000;
	font-family: var(--nv-font-sans);
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	font-weight: 800;
	padding: 0.95rem 2.6rem;
	border: 2px solid #000000;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: -2px 2px 0px 0px #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.nv-reservation__submit-btn:hover,
.form-submit input[type="submit"]:hover,
.wpcf7-submit:hover {
	background-color: #f5a323;
	transform: translateY(-2px);
	box-shadow: -3px 3px 0px 0px #000000;
}

.nv-reservation__submit-btn:active,
.form-submit input[type="submit"]:active,
.wpcf7-submit:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 #000000;
}

/* Contact Form 7 Validation Feedback */
.wpcf7-not-valid-tip {
	color: #d9381e;
	font-size: 0.85rem;
	font-weight: 600;
	margin-top: 0.35rem;
	display: block;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output {
	border-radius: 10px;
	padding: 0.85rem 1.25rem;
	font-weight: 600;
	font-size: 0.92rem;
	margin-top: 1.25rem;
}

/* Bottom Bar Area (Checkerboard Ribbon + Floating Order Now Pill) */
.nv-reservation__bottom-bar {
	position: relative;
	width: 100%;
	margin-top: 1.5rem;
	z-index: 6;
}

.nv-reservation__checker {
	width: 100%;
	height: calc(clamp(24px, 2.6vw, 32px) * 3);
	background-color: #ebb048;
	background-image: repeating-conic-gradient(#ffffff 0% 25%, #ebb048 0% 50%);
	background-size: calc(clamp(24px, 2.6vw, 32px) * 2) calc(clamp(24px, 2.6vw, 32px) * 2);
	background-position: 0 0;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.nv-reservation__order-container {
	position: absolute;
	inset: 0;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
	display: flex;
	align-items: center;
	pointer-events: none;
}

.nv-reservation__order-pill {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background-color: #ffffff;
	color: #000000;
	border: 2.5px solid #000000;
	border-radius: 12px;
	padding: 0.65rem 1.25rem 0.65rem 1.35rem;
	font-family: var(--nv-font-sans);
	font-weight: 800;
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	text-decoration: none;
	box-shadow: 0 4px 0 #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.nv-reservation__order-pill:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #000000;
	background-color: #fffdfa;
	color: #000000;
}

.nv-reservation__order-pill:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 #000000;
}

.nv-reservation__order-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #ebb048;
	color: #000000;
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1;
}

/* --- Locations Section (Where To Find Us) --- */

.nv-section.nv-locations {
	position: relative;
	background-color: #1a0f05;
	color: #ffffff;
	padding: clamp(5rem, 8vw, 7.5rem) 0 clamp(6rem, 9vw, 8.5rem);
	overflow: hidden;
}

.nv-locations__bg-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.nv-locations__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6) contrast(1.15);
}

.nv-locations__bg-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 15, 5, 0.78) 0%, rgba(18, 9, 3, 0.88) 100%);
}

.nv-locations__top-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background-color: #fab037;
	z-index: 5;
}

.nv-locations__container {
	position: relative;
	z-index: 5;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Header */
.nv-locations__header {
	text-align: center;
	margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

.nv-locations__title {
	font-family: "Fraunces", "Playfair Display", "Cooper Black", Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	line-height: 1.15;
	color: #fab037;
	letter-spacing: -0.01em;
	margin: 0;
	text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

/* 3-Card Grid */
.nv-locations__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.5vw, 2.2rem);
	align-items: stretch;
}

@media (max-width: 960px) {
	.nv-locations__grid {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin-inline: auto;
		gap: 2rem;
	}
}

.nv-locations__card {
	background-color: #ffffff;
	border: 2.5px solid #000000;
	border-radius: clamp(20px, 2.5vw, 26px);
	padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.6rem, 2.5vw, 2.2rem);
	display: flex;
	flex-direction: column;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nv-locations__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.nv-locations__card--cta {
	background-color: #faf3e6;
}

.nv-locations__card-title {
	font-family: var(--nv-font-sans);
	font-size: clamp(1.35rem, 1.8vw, 1.6rem);
	font-weight: 800;
	color: #3d2101;
	margin: 0 0 1.6rem 0;
	line-height: 1.25;
}

.nv-locations__info-list {
	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex-grow: 1;
}

.nv-locations__info-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-family: var(--nv-font-sans);
	font-size: 0.98rem;
	line-height: 1.45;
	color: #3d2101;
	font-weight: 600;
}

.nv-locations__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: #fab037;
	margin-top: 0.1rem;
}

.nv-locations__info-text {
	color: #3d2101;
}

.nv-locations__phone-link {
	color: #3d2101;
	text-decoration: underline;
	font-weight: 700;
	transition: color 0.15s ease;
}

.nv-locations__phone-link:hover {
	color: #e57300;
}

.nv-locations__cta-desc {
	font-family: var(--nv-font-sans);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.55;
	color: #4b321a;
	margin: 0 0 2rem 0;
	flex-grow: 1;
}

.nv-locations__card-action {
	margin-top: auto;
	padding-top: 0.5rem;
}

.nv-locations__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: #ffffff;
	color: #000000;
	border: 2.5px solid #000000;
	border-radius: 12px;
	padding: 0.85rem 1.6rem;
	font-family: var(--nv-font-sans);
	font-weight: 800;
	font-size: 1.05rem;
	text-decoration: none;
	text-align: center;
	box-shadow: -2.5px 2.5px 0 #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
	cursor: pointer;
}

.nv-locations__btn:hover {
	background-color: #fffdfa;
	transform: translateY(-2px);
	box-shadow: -3.5px 3.5px 0 #000000;
}

.nv-locations__btn:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 #000000;
}

.nv-locations__btn--cta {
	background-color: #ffffff;
	color: #000000;
}

.nv-locations__btn--cta:hover {
	background-color: #fab037;
	color: #000000;
}

/* --- Social Media / TikTok Section (Slice Town Framer Reference) --- */

.nv-section.nv-social {
	position: relative;
	background-color: #ffffff;
	color: #3d2101;
	padding: clamp(4.5rem, 7vw, 6.5rem) 0 clamp(5.5rem, 8vw, 7.5rem);
	overflow: hidden;
}

.nv-social__container {
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

.nv-social__layout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.2rem, 2vw, 2rem);
}

.nv-social__group {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 2vw, 2rem);
	flex: 1 1 0;
	min-width: 0;
}

.nv-social__card-wrap {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.nv-social__card-wrap--first {
	padding-bottom: 0.85rem;
}

.nv-social__card {
	display: block;
	position: relative;
	border-radius: clamp(24px, 2.6vw, 32px);
	border: 2.5px solid #000000;
	overflow: hidden;
	background-color: #1a0f05;
	aspect-ratio: 9 / 13.8;
	box-shadow: -3.5px 4.5px 0 #000000, 0 14px 28px rgba(0, 0, 0, 0.12);
	text-decoration: none;
	transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s ease;
}

.nv-social__card:hover {
	transform: translateY(-5px);
	box-shadow: -5px 6.5px 0 #000000, 0 20px 38px rgba(0, 0, 0, 0.18);
}

.nv-social__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.nv-social__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.nv-social__card:hover .nv-social__img {
	transform: scale(1.05);
}

.nv-social__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.25) 100%);
	pointer-events: none;
}

/* Play Button Badge */
.nv-social__play-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 2.5px;
	z-index: 5;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.nv-social__card:hover .nv-social__play-badge {
	transform: scale(1.12);
	background-color: #fab037;
}

/* Overlapping Order Now Pill on Card 1 */
.nv-social__btn-slot {
	position: absolute;
	bottom: -4px;
	left: -8px;
	z-index: 10;
}

.nv-social__pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background-color: #ffffff;
	color: #000000;
	border: 2.5px solid #000000;
	border-radius: 12px;
	padding: 0.6rem 1.2rem 0.6rem 1.3rem;
	font-family: var(--nv-font-sans);
	font-weight: 800;
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	text-decoration: none;
	box-shadow: -3px 3px 0 #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}

.nv-social__pill-btn:hover {
	transform: translateY(-2px);
	box-shadow: -4px 4px 0 #000000;
	background-color: #fffdfa;
	color: #000000;
}

.nv-social__pill-btn:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 #000000;
}

.nv-social__pill-plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #fab037;
	color: #000000;
	font-size: 1.2rem;
	font-weight: 900;
	line-height: 1;
}

/* Center Branding Block */
.nv-social__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: clamp(0.6rem, 1.5vw, 1.5rem);
	flex: 0 0 auto;
	max-width: 300px;
}

.nv-social__icon-link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
	margin-bottom: 1rem;
}

.nv-social__icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #000000;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.nv-social__icon-link:hover .nv-social__icon-badge {
	transform: scale(1.1) rotate(-4deg);
	background-color: #010101;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.nv-social__title {
	font-family: "Fraunces", "Playfair Display", "Cooper Black", Georgia, serif;
	font-weight: 700;
	font-size: clamp(2rem, 3.2vw, 2.85rem);
	color: #3d2101;
	line-height: 1.12;
	margin: 0 0 0.25rem 0;
	letter-spacing: -0.015em;
}

.nv-social__handle {
	font-family: "Fraunces", "Playfair Display", "Cooper Black", Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 2.9vw, 2.55rem);
	color: #3d2101;
	line-height: 1.12;
	text-decoration: none;
	letter-spacing: -0.015em;
	transition: color 0.15s ease, transform 0.15s ease;
}

.nv-social__handle:hover {
	color: #e57300;
}

/* Responsive Styles for Social Section */
@media (max-width: 1024px) {
	.nv-social__layout {
		flex-direction: column;
		gap: 2.8rem;
	}

	.nv-social__center {
		order: -1;
		max-width: 100%;
		margin-bottom: 0.5rem;
	}

	.nv-social__group {
		width: 100%;
		max-width: 640px;
	}
}

@media (max-width: 580px) {
	.nv-social__group {
		flex-direction: column;
		max-width: 320px;
		gap: 2rem;
	}

	.nv-social__card-wrap {
		width: 100%;
	}
}

/* 7. Components ------------------------------------------ */
.nv-btn {
	display: inline-block;
	margin-top: 1.75rem;
	padding: .85rem 1.9rem;
	border-radius: 999px;
	background: var(--nv-brand);
	color: #fff;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nv-btn:hover { background: var(--nv-brand-dark); transform: translateY(-2px); }

/* White pill on the video, flipping to brand red on hover. */
.nv-btn--light {
	background: #fff;
	color: var(--nv-ink);
	border-color: rgba(0, 0, 0, .85);
	border-bottom-width: 4px;
	margin-top: 1.25rem;
}
.nv-btn--light:hover { background: var(--nv-red); color: #fff; border-color: var(--nv-red-dark); }

.nv-prose > *:first-child { margin-top: 0; }
.nv-prose > *:last-child { margin-bottom: 0; }

.nv-entry { padding-block: 1.5rem; border-bottom: 1px solid var(--nv-line); }
.nv-entry__title { font-size: 1.35rem; }

/* 8. Delivery Partners Marquee Ticker -------------------- */
.nv-delivery-marquee {
	position: relative;
	width: 100%;
	background-color: #320406;
	border-top: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
	overflow: hidden;
	padding-block: clamp(0.7rem, 1.2vw, 0.95rem);
	user-select: none;
	z-index: 10;
}

.nv-delivery-marquee__track {
	display: flex;
	width: max-content;
	animation: nv-marquee-scroll 24s linear infinite;
}

.nv-delivery-marquee:hover .nv-delivery-marquee__track {
	animation-play-state: paused;
}

.nv-delivery-marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3.2rem);
	padding-right: clamp(1.5rem, 3vw, 3.2rem);
	flex-shrink: 0;
}

.nv-delivery-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	font-family: "Fraunces", "Playfair Display", Georgia, serif;
	font-size: clamp(1.2rem, 1.8vw, 1.65rem);
	font-weight: 700;
	color: #ffffff;
	white-space: nowrap;
	transition: transform 0.18s ease;
}

.nv-delivery-marquee__item:hover {
	transform: scale(1.06);
}

.nv-delivery-marquee__prefix {
	color: #ffffff;
	letter-spacing: -0.01em;
}

.nv-delivery-marquee__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}

.nv-delivery-marquee__badge--talabat {
	background-color: #FF5A00;
}

.nv-delivery-marquee__badge--snoonu {
	background-color: #E50914;
}

.nv-delivery-marquee__badge--rafeeq {
	background-color: #7B1FA2;
}

.nv-delivery-marquee__badge--keeta {
	background-color: #FFC300;
}

.nv-delivery-marquee__icon {
	display: block;
}

.nv-delivery-marquee__name {
	font-weight: 800;
	letter-spacing: -0.01em;
}

.nv-delivery-marquee__dot {
	color: #fab037;
	margin-left: clamp(0.4rem, 1vw, 1rem);
	font-size: 1.4rem;
}

@keyframes nv-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-33.333%);
	}
}

/* 9. Rich Footer (Dark Red to Black Gradient Canvas) ----- */
.nv-footer {
	position: relative;
	background: 
		radial-gradient(ellipse 95% 55% at 50% 0%, rgba(220, 30, 45, 0.25) 0%, rgba(70, 7, 10, 0.05) 60%),
		linear-gradient(180deg, #4d070b 0%, #290305 45%, #0e0203 100%);
	color: #ffffff;
	padding: 0 0 clamp(1.8rem, 2.8vw, 2.5rem);
	overflow: hidden;
	border-radius: 0;
	margin-top: 0;
	box-shadow: none;
}

.nv-footer__container {
	max-width: 1140px;
	margin: 0 auto;
	padding-top: clamp(2.4rem, 4.5vw, 3.6rem);
	padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Brand Logo Badge */
.nv-footer__brand-wrap {
	margin-bottom: 0.85rem;
}

.nv-footer__mark {
	display: grid;
	place-items: center;
	width: clamp(70px, 7.5vw, 86px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 0 0 3px #ed1c24, 0 10px 24px rgba(0, 0, 0, 0.5);
	transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
	margin: 0 auto;
}

.nv-footer__mark:hover {
	transform: scale(1.08) rotate(10deg);
	box-shadow: 0 0 0 3.5px #fab037, 0 14px 32px rgba(250, 176, 55, 0.3);
}

.nv-footer__mark-img {
	width: 76%;
	height: 76%;
	object-fit: contain;
}

/* Handwritten Script Sign-off */
.nv-footer__thankyou {
	font-family: var(--nv-font-script), "Alex Brush", "Segoe Script", cursive;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	color: #ffffff;
	margin: 0 0 0.85rem 0;
	line-height: 1.2;
	text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

/* Callout Headline */
.nv-footer__heading {
	font-family: "Fraunces", "Playfair Display", "Cooper Black", Georgia, serif;
	font-size: clamp(1.85rem, 3.2vw, 2.6rem);
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 1.35rem 0;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* CTA Buttons */
.nv-footer__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.85rem, 1.8vw, 1.4rem);
	margin-bottom: clamp(1.8rem, 2.8vw, 2.4rem);
	flex-wrap: wrap;
}

.nv-footer__btn {
	display: inline-block;
	padding: 0.72rem 1.95rem;
	border-radius: 12px;
	font-family: var(--nv-font-sans);
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	font-weight: 800;
	text-decoration: none;
	border: 2.5px solid #000000;
	box-shadow: -3px 3px 0 #000000;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
	cursor: pointer;
}

.nv-footer__btn--primary {
	background-color: #fab037;
	color: #000000;
}

.nv-footer__btn--primary:hover {
	background-color: #f5a323;
	transform: translateY(-2px);
	box-shadow: -4px 4px 0 #000000;
}

.nv-footer__btn--secondary {
	background-color: #ffffff;
	color: #000000;
}

.nv-footer__btn--secondary:hover {
	background-color: #fffdfa;
	transform: translateY(-2px);
	box-shadow: -4px 4px 0 #000000;
}

/* Social Media Pills */
.nv-footer__social-pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.2vw, 1rem);
	margin-bottom: clamp(1.8rem, 2.8vw, 2.4rem);
	flex-wrap: wrap;
}

.nv-footer__social-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: #000000;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	padding: 0.48rem 1rem;
	font-family: var(--nv-font-sans);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.nv-footer__social-pill:hover {
	transform: translateY(-2px);
	background-color: #1a1a1a;
	border-color: #fab037;
	color: #ffffff;
}

.nv-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.nv-footer__social-icon--fb { color: #1877F2; }
.nv-footer__social-icon--ig { color: #E1306C; }
.nv-footer__social-icon--tiktok { color: #ffffff; }
.nv-footer__social-icon--wa { color: #25D366; }
.nv-footer__social-icon--x { color: #ffffff; }

/* Navigation Links Bar */
.nv-footer__nav {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 1.25rem;
	margin-bottom: 1.25rem;
}

.nv-footer__nav-list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 2.2vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.nv-footer__nav-item a {
	color: #f0e6dc;
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	transition: color 0.15s ease;
}

.nv-footer__nav-item a:hover {
	color: #fab037;
}

/* Bottom Line */
.nv-footer__bottom-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 1.15rem;
	font-size: 0.85rem;
	color: #c4b0a2;
	flex-wrap: wrap;
	gap: 1rem;
}

.nv-footer__copy,
.nv-footer__credits {
	margin: 0;
}

/* 9. Floating Fixed Order Button (Bottom-Left) ----------- */
.nv-floating-order {
	position: fixed;
	bottom: clamp(20px, 3.5vw, 32px);
	left: clamp(20px, 3.5vw, 32px);
	z-index: 999;
	pointer-events: auto;
}

.nv-floating-order__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	background-color: #ffffff;
	color: #000000;
	border: 2.5px solid #000000;
	border-radius: 14px;
	padding: 0.75rem 1.45rem 0.75rem 1.55rem;
	font-family: var(--nv-font-sans);
	font-weight: 800;
	font-size: clamp(1.02rem, 1.25vw, 1.15rem);
	text-decoration: none;
	box-shadow: -3.5px 3.5px 0 #000000, 0 10px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease;
	cursor: pointer;
}

.nv-floating-order__btn:hover {
	transform: translateY(-3px);
	box-shadow: -5px 5px 0 #000000, 0 16px 32px rgba(0, 0, 0, 0.24);
	background-color: #fffdfa;
	color: #000000;
}

.nv-floating-order__btn:active {
	transform: translateY(2px);
	box-shadow: 0 0 0 #000000;
}

.nv-floating-order__plus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #fab037;
	color: #000000;
	font-size: 1.3rem;
	font-weight: 900;
	line-height: 1;
	transition: transform 0.2s ease;
}

.nv-floating-order__btn:hover .nv-floating-order__plus {
	transform: rotate(90deg);
}