/*
 * Coffee Shop theme stylesheet.
 * Palette is exposed as CSS custom properties — never hard-code these hex
 * values elsewhere in this file or in template markup.
 */

:root {
	/* Required brand tokens */
	--coffee: #3B2B20;
	--clay: #8B5E3C;
	--sand: #D9C7A3;
	--olive: #5A6B47;
	--sage: #7F8F6F;
	--cream: #F7F0E1;

	/* Derived tones used throughout the design */
	--coffee-dark: #291D14;
	--coffee-line: #4E3B2C;
	--coffee-line-soft: #5E4A38;
	--cream-light: #FFFDF6;
	--cream-soft: #F2E7D5;
	--cream-muted: #E8DCC6;
	--sand-soft: #EDE0C8;
	--sand-deep: #E2D0AE;
	--sand-line: #E4D6BC;
	--sand-line-soft: #E0D0B2;
	--sand-dot: #C9B58F;
	--tan: #CBB89A;
	--tan-muted: #BFAC8C;
	--taupe: #A6947A;
	--taupe-soft: #8F8069;
	--band: #EFE2CB;
	--text-muted: #5C4732;
	--marquee-line: #6E4830;

	/* Fonts */
	--font-display: 'Marcellus', serif;
	--font-display-italic: 'Cormorant Garamond', serif;
	--font-body: 'Karla', sans-serif;

	--container: 1180px;

	/*
	 * The header is position:sticky (not absolute like the source design),
	 * so it occupies real flow height. Hero bands pull themselves up by this
	 * amount to sit flush under the header instead of leaving a gap. Kept as
	 * a variable since it must match the header's actual rendered height at
	 * each breakpoint (measured: 144px desktop — 22px padding + 100px logo
	 * — 72px at <=768px).
	 */
	--header-h: 144px;
	--header-h-mobile: 72px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--coffee);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--clay);
	text-decoration: none;
}
a:hover {
	color: var(--olive);
}

::selection {
	background: var(--sand);
	color: var(--coffee);
}

img,
iframe,
video {
	max-width: 100%;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 400;
	margin: 0;
}

p {
	margin: 0;
}

/*
 * Elementor's Heading/Text-Editor widgets wrap the real text one level
 * inside the .elementor-element div that carries this theme's classes
 * (.elementor-heading-title / a plain paragraph), and Elementor's own
 * default widget typography (e.g. .elementor-size-default) sets font-size
 * directly on that inner element — which wins over anything set on the
 * ancestor via a class selector, since a property set on an element beats
 * inheritance from a parent regardless of the parent rule's specificity.
 * Forcing the inner element back to `inherit` lets this theme's classes
 * (applied to the wrapper via the Elementor Advanced > CSS Classes field)
 * govern the actual rendered type again.
 */
.elementor-widget-heading .elementor-heading-title {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
}
.elementor-widget-text-editor .elementor-widget-container {
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}

/* ==========================================================================
   Utility bits
   ========================================================================== */

.cs-eyebrow-line {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}
.cs-eyebrow-line--center {
	justify-content: center;
}
.cs-eyebrow-line span:not(.cs-eyebrow):not(.cs-dot) {
	width: 36px;
	height: 1px;
	background: var(--coffee-line-soft);
}
.cs-eyebrow-line--olive span:not(.cs-eyebrow):not(.cs-dot) {
	/* Centered eyebrows paired with olive-colored text (Gallery, Founders)
	   use these sage-green dashes in the design, not the usual brown. */
	background: var(--sage);
}
.cs-eyebrow {
	font: 600 12px var(--font-body);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--sand);
}
.cs-eyebrow--olive {
	color: var(--olive);
}
.cs-dot {
	width: 7px;
	height: 7px;
	background: var(--clay);
	transform: rotate(45deg);
	flex-shrink: 0;
}
/*
 * Elementor-native eyebrow: unlike .cs-eyebrow-line above (a wrapper with
 * real dot/dash <span> children, used by the PHP fallback templates), the
 * Elementor-built pages render the eyebrow as a single native Heading
 * widget — .cs-eyebrow itself becomes the flex row, and the dot/dashes are
 * drawn with ::before/::after instead of stored as decorative markup.
 */
.cs-eyebrow--native {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.cs-eyebrow--native.cs-eyebrow--center {
	/*
	 * When this heading widget sits alone in a plain (column-direction,
	 * unclassed) Elementor container — Heritage/Gallery section heads —
	 * it's a flex item on the container's stretch cross-axis, so its own
	 * inline-flex box stretches to the full container width (a specified
	 * inline-flex additionally blockifies to flex once it's a flex item).
	 * Centering its own row content is simpler than fighting the stretch,
	 * and gives the same end result: the dot–text–dot row centered in the
	 * section, same as the design.
	 */
	justify-content: center;
}
.cs-eyebrow--native.cs-eyebrow--dot::before {
	content: "";
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	flex-shrink: 0;
	background: var(--sand);
}
.cs-eyebrow--native.cs-eyebrow--dot.cs-eyebrow--olive::before {
	background: var(--clay);
}
.cs-eyebrow--native.cs-eyebrow--center::before,
.cs-eyebrow--native.cs-eyebrow--center::after {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--coffee-line-soft);
}
.cs-eyebrow--native.cs-eyebrow--center.cs-eyebrow--olive::before,
.cs-eyebrow--native.cs-eyebrow--center.cs-eyebrow--olive::after {
	background: var(--sage);
}
.cs-dot--sand {
	background: var(--sand);
}

.cs-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 700 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: 2px;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
	border: 1px solid transparent;
}
.cs-btn--solid {
	background: var(--clay);
	color: var(--cream);
}
.cs-btn--solid:hover {
	background: var(--sand);
	color: var(--coffee);
}
.cs-btn--outline {
	border-color: rgba(242, 231, 213, .45);
	color: var(--cream-soft);
}
.cs-btn--outline:hover {
	border-color: var(--sand);
	color: var(--sand);
}
.cs-btn--sand {
	background: var(--sand);
	color: var(--coffee);
}
.cs-btn--sand:hover {
	background: var(--cream-soft);
}
.cs-btn--dark {
	background: var(--coffee);
	color: var(--cream-soft);
}
.cs-btn--dark:hover {
	background: var(--cream);
	color: var(--coffee);
}
.cs-btn--ghost-dark {
	border-color: var(--coffee-line-soft);
	color: var(--sand);
	font: 600 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 30px;
}
.cs-btn--ghost-dark:hover {
	border-color: var(--sand);
	background: rgba(200, 155, 75, .08);
}

.cs-link-arrow,
.cs-link-underline {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 700 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--coffee);
	border-bottom: 2px solid var(--olive);
	padding-bottom: 6px;
	transition: color .3s ease;
}
.cs-link-arrow:hover,
.cs-link-underline:hover {
	color: var(--clay);
}

.cs-chip {
	border: 1px solid var(--coffee-line-soft);
	color: var(--cream-soft);
	font: 600 12px var(--font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 2px;
	transition: border-color .3s ease, color .3s ease;
}
.cs-chip:hover {
	border-color: var(--sand);
	color: var(--sand);
}
.cs-chip--static {
	display: inline-block;
	border: 1px solid var(--sand-line);
	color: var(--clay);
	background: var(--cream-light);
}

.cs-prose {
	font: 400 17px/1.75 var(--font-body);
	color: var(--text-muted);
}
.cs-prose p {
	margin: 0 0 18px;
}
.cs-prose p:last-child {
	margin-bottom: 0;
}
.cs-prose--light {
	color: var(--cream-soft);
}

.cs-section-head {
	display: flex;
	/*
	 * !important: this sits on a real Elementor Container element, whose own
	 * generated CSS defaults flex-direction to column and otherwise beats an
	 * unqualified class rule here (see the .cs-menu-note__inner comment for
	 * the same fight) — without it, the title stacks above the "Full menu"
	 * link instead of sitting on the same row.
	 */
	flex-direction: row !important;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}
.cs-section-head--center {
	/* This variant stacks its eyebrow + heading vertically (unlike the
	   row layout .cs-section-head needs for its title-plus-link case). */
	flex-direction: column !important;
	justify-content: center;
	text-align: center;
	margin-bottom: 56px;
}
.cs-section-head__title {
	/*
	 * Elementor gives every Container element an explicit `width` (its own
	 * --width custom property, generally 100%) — and per the flex sizing
	 * algorithm, a definite width wins as the used flex-basis even with
	 * flex-grow:0/flex-basis:auto, so this still stretched to fill the row
	 * and pushed the "Full menu" link onto its own line despite
	 * flex-direction:row. Forcing width back to auto lets it size to content.
	 */
	width: auto !important;
	flex: 0 1 auto !important;
	min-width: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.cs-header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	padding: 22px 48px;
	background: transparent;
	transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.cs-header.is-scrolled {
	background: var(--coffee);
	box-shadow: 0 10px 30px rgba(20, 12, 6, .25);
	padding-top: 14px;
	padding-bottom: 14px;
}
.cs-header__inner {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.cs-logo img {
	width: 100px;
	height: 100px;
	display: block;
}
.cs-nav {
	display: flex;
	align-items: center;
}
.cs-nav__list {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-nav__list a {
	color: var(--tan);
	font: 500 13px var(--font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .3s ease;
}
.cs-nav__list a:hover {
	color: var(--sand);
}
.cs-nav__list li.current-menu-item > a {
	color: var(--cream-soft);
	font-weight: 600;
	border-bottom: 1px solid var(--sand);
	padding-bottom: 3px;
}
.cs-nav__list li:last-child a {
	color: var(--coffee);
	background: var(--sand);
	font: 700 12px var(--font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 2px;
}
.cs-nav__list li:last-child a:hover {
	background: var(--cream-soft);
}

.cs-burger {
	display: none;
	background: transparent;
	border: 1px solid var(--coffee-line-soft);
	color: var(--cream-soft);
	width: 44px;
	height: 44px;
	border-radius: 2px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}
.cs-burger span {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	position: relative;
	transition: transform .3s ease, background .3s ease;
}
.cs-burger span::before,
.cs-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s ease, top .3s ease;
}
.cs-burger span::before { top: -6px; }
.cs-burger span::after { top: 6px; }
body[data-nav-open] .cs-burger span { background: transparent; }
body[data-nav-open] .cs-burger span::before { top: 0; transform: rotate(45deg); }
body[data-nav-open] .cs-burger span::after { top: 0; transform: rotate(-45deg); }

.cs-mobile-nav {
	display: none;
}

/* ==========================================================================
   Hero (Home)
   ========================================================================== */

.cs-hero {
	position: relative;
	background: var(--coffee);
	color: var(--cream-soft);
	min-height: 94vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* !important: the hero is a real Elementor Container now (it moved into
	   the Elementor template so it's editable there), and Elementor's own
	   per-element padding rule otherwise wins over this — see
	   .cs-page-hero__inner for the fuller explanation. */
	padding: 90px 48px 120px !important;
	overflow: hidden;
	margin-top: calc(-1 * var(--header-h));
}
/*
 * The overlay gradient and diagonal texture are pure decoration (no text),
 * so they're drawn as this section's own ::before/::after instead of empty
 * widgets an editor would see in Elementor with nothing to actually edit.
 * Explicit z-index on every layer (rather than relying on DOM/paint order)
 * keeps video < overlay < pattern < content correct regardless of how
 * ::before/::after interleave with the real video and content elements.
 */
.cs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(32,20,12,.5), rgba(32,20,12,.68) 55%, var(--coffee) 99%);
}
.cs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: .05;
	pointer-events: none;
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22%3E%3Cpath d=%22M28 4 52 28 28 52 4 28Z%22 fill=%22none%22 stroke=%22%23D9C7A3%22 stroke-width=%221%22/%3E%3C/svg%3E');
	background-size: 56px 56px;
}
.cs-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	object-fit: cover;
}
.cs-hero__video--embed {
	/* A YouTube/Vimeo iframe can't use object-fit:cover like a real <video>
	   can, so this scales+centers it the standard way instead: sized by
	   viewport units in both axes so whichever dimension is the tighter
	   constraint still overflows the container, then clipped by inset:0
	   overflow:hidden on this wrapper. */
	overflow: hidden;
	pointer-events: none;
}
.cs-hero__video--embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100%;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	border: 0;
}
.cs-hero__content {
	position: relative;
	z-index: 3;
	/* !important + explicit width: this is a real Elementor Container now
	   (the hero moved into the Elementor template so its content is
	   editable there) — see .cs-menu-note__inner .cs-prose for why Elementor's
	   own per-element width rule otherwise wins over a plain max-width. */
	width: auto !important;
	max-width: 860px !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Elementor Containers carry a 10px default padding on all sides. */
	padding: 0;
}
.cs-hero__content .cs-eyebrow-line span:not(.cs-eyebrow):not(.cs-dot),
.cs-hero__content .cs-eyebrow--native.cs-eyebrow--center::before,
.cs-hero__content .cs-eyebrow--native.cs-eyebrow--center::after {
	/* The hero's dash lines are a translucent cream, not the solid brown
	   .cs-eyebrow-line default — this section sits over the dark video/
	   overlay background where the default line would barely be visible. */
	background: rgba(242,231,213,.4);
}
.cs-hero__title {
	font: 400 clamp(46px,5.4vw,82px)/1.06 var(--font-display);
	margin: 0 0 26px;
	letter-spacing: .01em;
	text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.cs-hero__title em,
.cs-page-hero__title em {
	font: 500 italic clamp(46px,5.4vw,82px)/1.06 var(--font-display-italic);
	color: var(--sand);
}
.cs-page-hero__title em {
	font-size: inherit;
}
.cs-hero__lede {
	font: 400 18.5px/1.7 var(--font-body);
	color: var(--cream-muted);
	max-width: 580px;
	margin: 0 0 40px;
	text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.cs-hero__ctas {
	display: flex;
	/* !important: real Elementor Container now (holds two native Button
	   widgets) — same flex-direction/padding fight as .cs-hero__stats. */
	flex-direction: row !important;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}
/*
 * Any custom class (.cs-btn, .cs-link-arrow, .cs-chip, ...) applied to a
 * native Elementor Button widget: Elementor's "Advanced > CSS Classes"
 * field lands on the OUTER .elementor-widget-button wrapper, but the actual
 * clickable <a> it renders is nested two levels deeper
 * (.elementor-widget-container > .elementor-button-wrapper > a.elementor-button),
 * each level carrying its own default background/padding — so styling the
 * wrapper directly never reached the real button, and Elementor's own
 * default gray chrome showed through inside it. Collapsing every Button
 * widget's wrappers to display:contents (once, generically, for every
 * button on the site) removes their boxes entirely; each theme class then
 * only needs an ".elementor-button" qualifier to reach the real <a>.
 */
.elementor-widget-button,
.elementor-widget-button .elementor-widget-container,
.elementor-widget-button .elementor-button-wrapper,
.elementor-widget-button .elementor-button-content-wrapper {
	display: contents;
}
.cs-btn.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 700 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: 2px;
	border: 1px solid transparent;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cs-btn--solid.elementor-widget-button .elementor-button {
	background: var(--clay);
	color: var(--cream);
}
.cs-btn--solid.elementor-widget-button .elementor-button:hover {
	background: var(--sand);
	color: var(--coffee);
}
.cs-btn--outline.elementor-widget-button .elementor-button {
	background: transparent;
	border-color: rgba(242, 231, 213, .45);
	color: var(--cream-soft);
}
.cs-btn--outline.elementor-widget-button .elementor-button:hover {
	border-color: var(--sand);
	color: var(--sand);
}
.cs-btn--sand.elementor-widget-button .elementor-button {
	background: var(--sand);
	color: var(--coffee);
}
.cs-btn--sand.elementor-widget-button .elementor-button:hover {
	background: var(--cream-soft);
}
.cs-btn--dark.elementor-widget-button .elementor-button {
	background: var(--coffee);
	color: var(--cream-soft);
}
.cs-btn--dark.elementor-widget-button .elementor-button:hover {
	background: var(--cream);
	color: var(--coffee);
}
.cs-btn--ghost-dark.elementor-widget-button .elementor-button {
	background: transparent;
	border-color: var(--coffee-line-soft);
	color: var(--sand);
	font: 600 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
}
.cs-btn--ghost-dark.elementor-widget-button .elementor-button:hover {
	border-color: var(--sand);
	background: rgba(200, 155, 75, .08);
}
.cs-link-arrow.elementor-widget-button .elementor-button,
.cs-link-underline.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 700 13px var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--coffee);
	border-bottom: 2px solid var(--olive);
	padding: 0 0 6px;
	background: none;
	border-radius: 0;
	transition: color .3s ease;
}
.cs-link-arrow.elementor-widget-button .elementor-button:hover,
.cs-link-underline.elementor-widget-button .elementor-button:hover {
	color: var(--clay);
}
/*
 * A Button widget that sits alone in a plain (column-direction) Elementor
 * container — Welcome, Desserts, Heritage "more", Visit Us teaser, Story's
 * Hospitality body — is a direct flex item of that container once the
 * wrapper collapse above (display:contents) is applied, so the container's
 * default stretch cross-axis alignment stretches the button to the full
 * column width. Pin each back to its natural, content-sized width and the
 * horizontal position the design calls for (left with the left-aligned
 * body copy, centered under the centered Heritage grid).
 */
.cs-welcome__body .elementor-button,
.cs-desserts__body .elementor-button,
.cs-visit-teaser__inner .elementor-button,
.cs-hospitality .elementor-button {
	align-self: flex-start;
}
.cs-heritage__more .elementor-button {
	align-self: center;
}
.cs-chip.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--coffee-line-soft);
	color: var(--cream-soft);
	font: 600 12px var(--font-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 12px 22px;
	border-radius: 2px;
	background: none;
	transition: border-color .3s ease, color .3s ease;
}
.cs-chip.elementor-widget-button .elementor-button:hover {
	border-color: var(--sand);
	color: var(--sand);
}
.cs-hero__stats {
	display: flex;
	/* !important: Elementor Containers default to flex-direction:column —
	   without this the three stats stack vertically instead of sitting in
	   a row. Same fight as .cs-section-head. */
	flex-direction: row !important;
	gap: 44px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 58px;
	/* Elementor Containers carry a 10px default padding on all sides —
	   restated explicitly here so only the intended top border/padding
	   survives. */
	padding: 26px 0 0;
	border-top: 1px solid rgba(242,231,213,.22);
}
.cs-hero__stat {
	/* Elementor Containers default to flex-grow, stretching each of the
	   three stat blocks to fill the row instead of sitting compactly
	   side by side — see .cs-section-head__title for the same fight. */
	width: auto !important;
	flex: 0 1 auto;
}
.cs-hero__stat-value {
	font: 500 26px var(--font-display);
	color: var(--sand);
}
.cs-hero__stat-label {
	font: 500 12px var(--font-body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tan-muted);
	margin-top: 4px;
}

/* Scrolling ticker band under the hero. */
.cs-marquee {
	background: var(--clay);
	color: var(--cream);
	overflow: hidden;
	padding: 16px 0;
	border-top: 1px solid var(--marquee-line);
	border-bottom: 1px solid var(--marquee-line);
}
.cs-marquee__track {
	display: flex;
	width: max-content;
	animation: cs-marquee 36s linear infinite;
}
.cs-marquee__run {
	display: flex;
	white-space: nowrap;
}
.cs-marquee__item {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 14px;
}
.cs-marquee__item span:first-child {
	font: 400 17px var(--font-display);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cs-marquee__dot {
	width: 6px;
	height: 6px;
	background: var(--cream);
	transform: rotate(45deg);
	opacity: .7;
	flex-shrink: 0;
}
@keyframes cs-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Centered section headings/intros reused across Home sections. */
.cs-section-heading {
	font: 400 clamp(34px,3.6vw,50px)/1.12 var(--font-display);
	text-align: center;
	margin: 0 0 60px;
}
.cs-section-heading--tight {
	/* The design uses a distinctly smaller size/line-height for these
	   headings (Gallery, Desserts) than the Heritage/Highlights ones that
	   share the base .cs-section-heading class. */
	font-size: clamp(32px,3.2vw,46px);
	line-height: 1.14;
	margin-bottom: 0;
}
.cs-section-intro {
	font: 400 16px/1.7 var(--font-body);
	color: var(--coffee-line-soft);
	width: auto !important;
	max-width: 560px !important;
	margin: 16px auto 56px;
	text-align: center;
}

/* ==========================================================================
   Welcome
   ========================================================================== */

.cs-welcome {
	padding: 110px 48px;
	background: var(--cream);
}
.cs-welcome__inner {
	max-width: var(--container);
	margin: 0 auto;
	/*
	 * !important: this class sits on a real Elementor Container element.
	 * Elementor's own per-element generated CSS sets display via a
	 * --display custom property that otherwise wins the cascade for
	 * grid-template-columns specifically (confirmed empirically — a
	 * same-specificity, later-loaded rule without !important was still
	 * overridden), collapsing this to a single-column, vertically-stacked
	 * layout instead of the intended 2-column grid.
	 */
	display: grid !important;
	grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
	gap: 80px;
	align-items: center;
}
.cs-welcome__media {
	position: relative;
}
.cs-welcome__image {
	position: relative;
	height: 520px;
	border-radius: 220px 220px 2px 2px;
	overflow: hidden;
	background: var(--sand-soft);
}
.cs-welcome__image img {
	/*
	 * position:absolute instead of relying on width/height:100% directly:
	 * when this class sits on an Elementor Shortcode widget, the real <img>
	 * is two unstyled wrapper divs deeper (.elementor-widget-container >
	 * .elementor-shortcode), neither with an explicit height — so a
	 * percentage height on the img would silently resolve to auto.
	 * Absolute positioning's containing block is the nearest *positioned*
	 * ancestor regardless of how many plain divs sit between, which is what
	 * lets this reach back up to .cs-welcome__image.
	 * inset:0 alone is not enough, though: <img> is a replaced element, and
	 * per the CSS spec an absolutely positioned replaced element with
	 * width/height left auto sizes from its own intrinsic dimensions
	 * (ignoring inset for sizing, only using it for position) — so width/
	 * height:100% still have to be set explicitly alongside inset:0.
	 */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-welcome__badge {
	position: absolute;
	right: -24px;
	top: -24px;
	width: 110px;
	height: 110px;
	border: 1px solid var(--sand);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--cream);
}
.cs-welcome__badge img {
	width: 86px;
	height: 86px;
	animation: cs-slow-pan 24s linear infinite;
}
@keyframes cs-slow-pan {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
.cs-welcome__body .cs-section-heading {
	text-align: left;
	margin: 0 0 24px;
}

/* ==========================================================================
   Heritage
   ========================================================================== */

.cs-heritage {
	position: relative;
	background: var(--coffee);
	color: var(--cream-soft);
	padding: 110px 48px;
}
.cs-heritage::before {
	/* Pure decoration (no text) — drawn as a pseudo-element rather than an
	   empty widget, same reasoning as .cs-hero::before/::after. */
	content: "";
	position: absolute;
	inset: 0;
	opacity: .04;
	pointer-events: none;
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22%3E%3Cpath d=%22M28 4 52 28 28 52 4 28Z%22 fill=%22none%22 stroke=%22%23D9C7A3%22 stroke-width=%221%22/%3E%3C/svg%3E');
	background-size: 56px 56px;
}
.cs-heritage__inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
}
.cs-heritage__grid {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1px;
	background: var(--coffee-line);
	border: 1px solid var(--coffee-line);
}
.cs-heritage__card {
	background: var(--coffee);
	padding: 44px 36px;
}
.cs-heritage__num {
	font: 500 15px var(--font-display-italic);
	font-style: italic;
	color: var(--coffee-line-soft);
	margin-bottom: 22px;
}
.cs-heritage__title {
	font: 400 24px var(--font-display);
	margin: 0 0 16px;
	color: var(--sand);
}
.cs-heritage__body {
	font: 400 15.5px/1.7 var(--font-body);
	color: var(--taupe);
	margin: 0;
}
.cs-heritage__more {
	text-align: center;
	margin-top: 44px;
}

/* ==========================================================================
   Menu highlights (Home)
   ========================================================================== */

.cs-highlights {
	padding: 110px 48px;
	background: var(--cream);
}
.cs-highlights__inner {
	max-width: var(--container);
	margin: 0 auto;
}
.cs-highlights .cs-section-heading {
	text-align: left;
	margin: 0;
	max-width: 560px;
}
.cs-highlights__grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 24px;
}
.cs-highlight-card {
	background: var(--cream-light);
	border: 1px solid var(--sand-line);
	border-radius: 2px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .35s ease, box-shadow .35s ease;
}
.cs-highlight-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 44px rgba(43,27,18,.12);
}
.cs-highlight-card__image {
	height: 200px;
	background: var(--sand-soft);
}
.cs-highlight-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empty-photo placeholder — see coffee_shop_image_placeholder_html(). */
.cs-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--coffee-line-soft);
	background: var(--sand-soft);
	border: 1px dashed var(--sand-line);
}
.cs-image-placeholder span {
	font: 500 12px var(--font-body);
	color: var(--taupe);
}
.cs-highlight-card__body {
	padding: 24px 22px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.cs-highlight-card__tag {
	font: 600 11px var(--font-body);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--clay);
}
.cs-highlight-card__name {
	font: 400 22px var(--font-display);
	color: var(--coffee);
}
.cs-highlight-card__desc {
	font: 400 14.5px/1.6 var(--font-body);
	color: var(--coffee-line-soft);
	margin: 0;
}

/* ==========================================================================
   Desserts teaser (Home)
   ========================================================================== */

.cs-desserts {
	background: var(--band);
	padding: 100px 48px;
	border-top: 1px solid var(--sand-line-soft);
}
.cs-desserts__inner {
	max-width: var(--container);
	margin: 0 auto;
	/* Same Elementor container display/grid-template-columns override as
	   .cs-welcome__inner — see the comment there. */
	display: grid !important;
	grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) !important;
	gap: 70px;
	align-items: center;
}
.cs-desserts__body .cs-section-heading {
	text-align: left;
	margin: 0 0 22px;
}
.cs-desserts__body .cs-prose {
	margin: 0 0 30px;
}
.cs-desserts__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.cs-desserts__photo {
	height: 300px;
	border-radius: 150px 150px 2px 2px;
	overflow: hidden;
	background: var(--sand-deep);
}
.cs-desserts__photo:first-child {
	margin-top: 34px;
}
.cs-desserts__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Gallery (Home)
   ========================================================================== */

.cs-gallery {
	background: var(--cream);
	padding: 110px 48px 90px;
}
.cs-gallery__inner {
	max-width: var(--container);
	margin: 0 auto;
}
.cs-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-auto-rows: 170px;
	gap: 18px;
}
.cs-gallery__item {
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	background: var(--sand-soft);
}
/* Each photo is now a native Elementor Image widget; its own wrapper
   defaults to position:relative (Elementor's default for every widget),
   which would otherwise become the containing block instead of the real
   grid cell — see .cs-welcome__image img for the fuller explanation. */
.cs-gallery__item > .elementor-widget-image {
	position: static;
}
.cs-gallery__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-gallery__item--1 { grid-column: span 2; grid-row: span 2; border-radius: 2px; }
.cs-gallery__item--2 { grid-row: span 2; border-radius: 110px 110px 2px 2px; }
.cs-gallery__item--5 { border-radius: 2px 2px 110px 110px; }
.cs-gallery__item--6 { grid-column: span 3; }
.cs-gallery__follow {
	text-align: center;
	margin-top: 40px;
	font: 500 14px var(--font-body);
	color: var(--taupe-soft);
}
.cs-gallery__follow a {
	font-weight: 700;
}

/* ==========================================================================
   Visit teaser (Home)
   ========================================================================== */

.cs-visit-teaser {
	position: relative;
	background: var(--coffee);
	color: var(--cream-soft);
	padding: 110px 48px;
}
.cs-visit-teaser__inner {
	max-width: var(--container);
	margin: 0 auto;
	display: grid !important;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
	gap: 70px;
	align-items: center;
}
.cs-visit-teaser__heading {
	text-align: left;
	margin: 0 0 30px;
}
.cs-visit-teaser__details {
	display: grid;
	gap: 22px;
	margin: 30px 0 38px;
}
.cs-visit-teaser__row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}
.cs-visit-teaser__row span:first-child {
	font: 400 18px var(--font-display);
	color: var(--sand);
	min-width: 80px;
	letter-spacing: .06em;
}
.cs-visit-teaser__row span:last-child {
	font: 400 16px/1.6 var(--font-body);
	color: var(--tan-muted);
}
.cs-visit-teaser__map {
	position: relative;
	height: 460px;
	border-radius: 230px 230px 2px 2px;
	overflow: hidden;
	border: 1px solid var(--coffee-line);
}
.cs-visit-teaser__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: sepia(.35) saturate(.7);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cs-footer {
	background: var(--coffee-dark);
	color: var(--taupe-soft);
	padding: 70px 48px 40px;
}
.cs-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
}
.cs-footer__grid {
	display: grid;
	grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,.8fr));
	gap: 48px;
	padding-bottom: 50px;
	border-bottom: 1px solid var(--coffee-line);
}
.cs-footer__logo {
	width: 92px;
	height: 92px;
	margin-bottom: 18px;
	display: block;
}
.cs-footer__tagline {
	font: 400 14.5px/1.7 var(--font-body);
	margin: 0;
	max-width: 300px;
}
.cs-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cs-footer__heading {
	font: 600 12px var(--font-body);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--sand);
	margin-bottom: 6px;
}
.cs-footer__col nav,
.cs-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-footer__col a,
.cs-footer__link {
	font: 500 14.5px var(--font-body);
	color: var(--taupe);
	transition: color .3s ease;
}
.cs-footer__col a:hover,
.cs-footer__link:hover {
	color: var(--cream-soft);
}
.cs-footer__text {
	font: 500 14.5px/1.6 var(--font-body);
	color: var(--taupe);
}
.cs-footer__bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 28px;
	font: 400 13px var(--font-body);
}
.cs-footer__flourish {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Simpler single-row footer used on every page except the front page. */
.cs-footer--simple {
	padding: 54px 48px 40px;
}
.cs-footer__inner--simple {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.cs-footer__brand-row {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cs-footer__logo--small {
	width: 56px;
	height: 56px;
	margin: 0;
}
.cs-footer__name {
	font: 400 15px var(--font-display);
	color: var(--taupe);
	letter-spacing: .08em;
}
.cs-footer__simple-nav {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-footer__simple-nav a {
	font: 500 13px var(--font-body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--taupe);
	transition: color .3s ease;
}
.cs-footer__simple-nav a:hover {
	color: var(--cream-soft);
}
.cs-footer__simple-nav .current-menu-item {
	display: none;
}

/* ==========================================================================
   Generic dark page hero (Menu / Story / Visit)
   ========================================================================== */

.cs-page-hero {
	position: relative;
	background: var(--coffee);
	color: var(--cream-soft);
	padding: 170px 48px 100px;
	text-align: center;
	margin-top: calc(-1 * var(--header-h));
}
.cs-page-hero::before {
	/* Pure decoration (no text) — drawn as a pseudo-element rather than an
	   empty widget, same reasoning as .cs-hero::before/::after. Covers both
	   plain .cs-page-hero and the .cs-page-hero--split modifier. */
	content: "";
	position: absolute;
	inset: 0;
	opacity: .05;
	pointer-events: none;
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22%3E%3Cpath d=%22M28 4 52 28 28 52 4 28Z%22 fill=%22none%22 stroke=%22%23D9C7A3%22 stroke-width=%221%22/%3E%3C/svg%3E');
	background-size: 56px 56px;
}
.cs-page-hero__inner {
	/* No max-width here — matches the design source, which leaves this
	   wrapper unconstrained and relies on .cs-page-hero__lede's own
	   max-width to keep the paragraph readable. A width here previously
	   wrapped longer titles (e.g. Menu's "Taste something meaningful")
	   onto an extra line that the design doesn't have. */
	position: relative;
	/* Elementor Containers carry a 10px default padding on all sides,
	   which otherwise narrows and off-centers everything inside. */
	padding: 0;
}
.cs-page-hero__title {
	font: 400 clamp(42px,5vw,68px)/1.08 var(--font-display);
	margin: 0 0 20px;
}
.cs-page-hero__lede {
	font: 400 17px/1.7 var(--font-body);
	color: var(--tan-muted);
	/* !important: Elementor's own per-element width rule otherwise wins
	   (see .cs-menu-note__inner .cs-prose for the full explanation), so
	   this silently stretched to fill the hero instead of staying a
	   readable 560px column. */
	width: auto !important;
	max-width: 560px !important;
	margin: 0 auto;
}
.cs-page-hero__lede--narrow {
	/* Visit's hero paragraph uses a narrower measure than Menu's in the
	   source design (520px vs 560px), despite sharing this same class. */
	max-width: 520px !important;
}
.cs-page-hero__chips {
	display: flex;
	/* !important: real Elementor Container now (holds 4 native Button
	   widgets) — same flex-direction/padding fight as .cs-hero__stats. */
	flex-direction: row !important;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 38px;
	padding: 0;
}

.cs-page-hero--split {
	text-align: left;
	padding: 170px 48px 100px;
}
.cs-page-hero--split .cs-page-hero__inner { display: none; }
.cs-page-hero__split {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	/* !important: see .cs-welcome__inner — same Elementor Container override. */
	display: grid !important;
	grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) !important;
	gap: 70px;
	align-items: center;
	/* Elementor Containers carry a 10px default padding on all sides —
	   without zeroing it here (and on .cs-page-hero__text below), both
	   grid columns render narrower than the design and off-center. */
	padding: 0;
}
.cs-page-hero__text {
	padding: 0;
}
.cs-page-hero--split .cs-page-hero__title { margin: 0 0 24px; font-size: clamp(40px,4.6vw,64px); line-height: 1.08; }
.cs-page-hero--split .cs-page-hero__lede {
	margin: 0;
	max-width: 540px !important;
	text-align: left;
	font-size: 17.5px;
	line-height: 1.75;
}
.cs-page-hero__media {
	position: relative;
	height: 440px;
	border-radius: 220px 220px 2px 2px;
	overflow: hidden;
	background: var(--coffee);
	border: 1px solid var(--coffee-line);
	/* Elementor Containers (unlike Widgets) carry a 10px default padding
	   that would otherwise eat into the photo on all sides. */
	padding: 0;
}
.cs-page-hero__media > .elementor-widget-shortcode,
.cs-page-hero__media > .elementor-widget-image,
.cs-hospitality__media > .elementor-widget-shortcode,
.cs-hospitality__media > .elementor-widget-image,
.cs-visit-teaser__map > .elementor-widget-shortcode,
.cs-welcome__media > .elementor-widget-shortcode {
	/*
	 * Elementor gives every widget wrapper its own position:relative by
	 * default. That sits between .cs-page-hero__media (this photo's real
	 * frame) and the <img>, so the absolutely positioned image was resolving
	 * inset:0 against THIS (height:0, auto-sized around an absolute child)
	 * instead of the frame. Forcing it static lets positioning skip through
	 * to the real frame. .cs-welcome__media needs the same treatment for its
	 * absolutely positioned corner badge, not just an <img>.
	 */
	position: static;
}
.cs-pattern-widget {
	/*
	 * Same Elementor default position:relative fight as above, but for the
	 * decorative diagonal-pattern <div> (an HTML widget, not a shortcode) —
	 * its own widget wrapper otherwise becomes the positioning context
	 * instead of the real section (.cs-page-hero / .cs-heritage), so the
	 * inset:0 overlay collapses to nothing and the texture never shows.
	 */
	position: static;
}
.cs-page-hero__media img {
	/* See .cs-welcome__image img above, and the .elementor-widget-shortcode
	   rule just above this one, for why absolute + width/height:100% and
	   neutralizing the intermediate widget wrapper's position are both needed. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Menu page / archive
   ========================================================================== */

.cs-menu-section {
	padding: 60px 48px;
	scroll-margin-top: 40px;
}
.cs-menu-section:first-of-type {
	padding-top: 100px;
}
.cs-menu-section__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.cs-menu-section__head {
	display: flex;
	/* !important: real Elementor Container now (holds the "No. XX" span and
	   the title heading) — same flex-direction/padding fight as
	   .cs-hero__stats. */
	flex-direction: row !important;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 14px;
	padding: 0;
}
.cs-menu-section__no {
	font: 500 15px var(--font-display-italic);
	font-style: italic;
	color: var(--clay);
}
.cs-menu-section__title {
	font: 400 clamp(30px,3vw,42px) var(--font-display);
}
.cs-menu-section__title a {
	color: inherit;
}
.cs-menu-section__intro {
	font: 400 15.5px/1.7 var(--font-body);
	color: var(--coffee-line-soft);
	margin: 0 0 44px;
	max-width: 620px;
}

.cs-menu-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 56px;
}
.cs-menu-list__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 0;
	border-bottom: 1px solid var(--sand-line);
}
.cs-menu-list__row {
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.cs-menu-list__name {
	font: 400 21px var(--font-display);
	color: var(--coffee);
	white-space: nowrap;
}
.cs-menu-list__leader {
	flex: 1;
	border-bottom: 1px dotted var(--sand-dot);
	transform: translateY(-4px);
}
.cs-menu-list__price {
	font: 600 15px var(--font-body);
	color: var(--clay);
	white-space: nowrap;
}
.cs-menu-list__desc {
	font: 400 14.5px/1.6 var(--font-body);
	color: var(--coffee-line-soft);
	margin: 0;
}

.cs-menu-note {
	padding: 0 48px 100px;
}
.cs-menu-note__inner {
	max-width: 1080px;
	margin: 0 auto;
	background: var(--band);
	border: 1px solid var(--sand-line-soft);
	border-radius: 2px;
	padding: 26px 30px;
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.cs-menu-note__inner .cs-prose {
	/*
	 * !important: Elementor scopes its own per-element width rule with a
	 * 3-class selector (.elementor-{id} .elementor-element .elementor-element-X),
	 * which outranks an unqualified 2-class rule here regardless of source
	 * order — so max-width alone was silently ignored and this text-editor
	 * widget kept stretching to fill the row, pushing the "Ask us in store"
	 * link onto its own line below instead of beside it.
	 */
	width: auto !important;
	max-width: 640px !important;
	margin: 0;
	flex: 0 1 auto;
}
.cs-menu-note__inner .cs-link-underline {
	white-space: nowrap;
}

.cs-menu-interlude {
	background: var(--clay);
	color: var(--cream);
	padding: 70px 48px;
	text-align: center;
}
.cs-menu-interlude__inner {
	max-width: 700px;
	margin: 0 auto;
}
.cs-menu-interlude__inner::before {
	/* Three decorative dots — pure decoration (no text), drawn on one
	   pseudo-element via box-shadow instead of three empty widgets. */
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 0 auto 18px;
	background: var(--cream);
	transform: rotate(45deg);
	box-shadow: -14px 0 0 var(--cream), 14px 0 0 var(--cream);
}
.cs-menu-interlude__quote {
	font: 500 italic clamp(22px,2.4vw,30px)/1.4 var(--font-display-italic);
	margin: 0;
}

/* ==========================================================================
   Our Story page
   ========================================================================== */

.cs-founders {
	padding: 110px 48px;
}
.cs-founders__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.cs-founders__head {
	text-align: center;
	/* !important: same Elementor per-element width override fought
	   throughout this file (see .cs-menu-note__inner .cs-prose) — without
	   it this container ignores max-width and fills the full row. */
	width: auto !important;
	max-width: 620px !important;
	margin: 0 auto 64px;
	/* Elementor Containers carry a 10px default padding — see
	   .cs-page-hero__inner for the fuller explanation. */
	padding: 0;
}
.cs-founders__head .cs-section-heading {
	/* Spacing below the heading comes from .cs-founders__head's own
	   margin-bottom, not from the heading itself. */
	margin: 0;
}
.cs-founders__quote {
	text-align: center;
	font: 500 italic clamp(19px,2vw,24px)/1.6 var(--font-display-italic);
	color: var(--coffee-line-soft);
	width: auto !important;
	max-width: 640px !important;
	margin: 56px auto 0;
}
.cs-founders__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
.cs-founder-card {
	background: var(--cream-light);
	border: 1px solid var(--sand-line);
	border-radius: 2px;
	padding: 40px 38px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cs-founder-card__portrait {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sand-soft);
}
.cs-founder-card__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-founder-card__name {
	font: 400 26px var(--font-display);
}
.cs-founder-card__role {
	font: 600 12px var(--font-body);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--clay);
}
.cs-founder-card__bio {
	font: 400 15.5px/1.7 var(--font-body);
	color: var(--text-muted);
	margin: 0;
}

.cs-journey-section {
	background: var(--coffee);
	color: var(--cream-soft);
	padding: 110px 48px;
}
.cs-journey-section__inner {
	max-width: 1080px;
	margin: 0 auto;
}
.cs-journey-section .cs-section-heading {
	text-align: left;
	margin: 0;
}
.cs-journey {
	display: grid;
	gap: 0;
	margin-top: 40px;
}
.cs-journey__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 40px;
	padding: 38px 0;
	border-top: 1px solid var(--coffee-line);
}
.cs-journey__num {
	font: 500 42px var(--font-display-italic);
	font-style: italic;
	color: var(--coffee-line-soft);
}
.cs-journey__content {
	display: grid;
	grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr);
	gap: 32px;
	align-items: baseline;
}
.cs-journey__title {
	font: 400 24px var(--font-display);
	color: var(--sand);
}
.cs-journey__body {
	font: 400 16px/1.75 var(--font-body);
	color: var(--taupe);
	margin: 0;
}

.cs-hospitality {
	background: var(--band);
	padding: 100px 48px;
	border-top: 1px solid var(--sand-line-soft);
}
.cs-hospitality .cs-section-heading {
	text-align: left;
	margin: 0 0 22px;
}
.cs-hospitality__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid !important;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
	gap: 70px;
	align-items: center;
}
.cs-hospitality__media {
	position: relative;
	height: 420px;
	border-radius: 210px 210px 2px 2px;
	overflow: hidden;
	background: var(--sand-deep);
}
.cs-hospitality__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Visit page
   ========================================================================== */

.cs-visit-details {
	padding: 100px 48px;
}
.cs-visit-details__inner {
	max-width: var(--container);
	margin: 0 auto;
	/* !important: see .cs-welcome__inner — same Elementor Container override. */
	display: grid !important;
	grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) !important;
	gap: 60px;
	align-items: stretch;
}
.cs-visit-details__cards {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cs-visit-card {
	background: var(--cream-light);
	border: 1px solid var(--sand-line);
	border-radius: 2px;
	padding: 34px 34px 30px;
}
.cs-visit-card--dark {
	background: var(--coffee);
	color: var(--cream-soft);
	border: none;
}
.cs-visit-card__label {
	font: 600 12px var(--font-body);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--clay);
	margin-bottom: 14px;
}
.cs-visit-card--dark .cs-visit-card__label {
	color: var(--sand);
}
.cs-visit-card__value {
	font: 400 24px/1.4 var(--font-display);
	margin-bottom: 18px;
}
.cs-visit-card__link {
	display: block;
	font: 400 20px var(--font-display);
	color: var(--coffee);
	margin-bottom: 10px;
}
.cs-visit-card__link:hover {
	color: var(--clay);
}
.cs-visit-card__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font: 500 15px var(--font-body);
	padding: 4px 0;
}
.cs-visit-card__hours-row span:first-child { color: var(--tan-muted); }
.cs-visit-card__hours-row span:last-child { color: var(--cream-soft); }
.cs-visit-card__note {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--coffee-line);
	font: 400 13.5px/1.5 var(--font-body);
	color: var(--taupe-soft);
}
.cs-visit-map {
	position: relative;
	border-radius: 2px;
	overflow: hidden;
	border: 1px solid var(--sand-line);
	min-height: 400px;
}
.cs-visit-map iframe {
	/* See .cs-welcome__image img for why this needs absolute + width/height:100%, not inset:0 alone. */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: sepia(.3) saturate(.75);
}

.cs-visit-cta {
	background: var(--clay);
	color: var(--cream);
	padding: 80px 48px;
	text-align: center;
}
.cs-visit-cta__inner {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.cs-visit-cta .cs-section-heading {
	margin: 0;
}

/* ==========================================================================
   Single / archive menu item
   ========================================================================== */

.cs-single-menu-item {
	max-width: var(--container);
	margin: 0 auto;
	padding: 150px 48px 100px;
	display: grid;
	grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
	gap: 60px;
	align-items: center;
}
.cs-single-menu-item__media {
	height: 420px;
	border-radius: 210px 210px 2px 2px;
	overflow: hidden;
	background: var(--sand-soft);
}
.cs-single-menu-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cs-single-menu-item__back {
	display: inline-flex;
	margin-bottom: 24px;
}
.cs-single-menu-item__title {
	font: 400 clamp(32px,3.6vw,48px) var(--font-display);
	margin: 8px 0 18px;
}
.cs-single-menu-item__price {
	font: 600 20px var(--font-body);
	color: var(--clay);
	margin-bottom: 18px;
}
.cs-single-menu-item__desc {
	font: 400 17px/1.75 var(--font-body);
	color: var(--text-muted);
	margin: 0 0 24px;
}
.cs-single-menu-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ==========================================================================
   Responsive — matches the source design's 1024 / 768 breakpoints
   ========================================================================== */

@media (max-width: 1180px) {
	.cs-header__inner,
	.cs-hero,
	.cs-welcome,
	.cs-heritage,
	.cs-highlights,
	.cs-desserts,
	.cs-gallery,
	.cs-visit-teaser,
	.cs-footer,
	.cs-page-hero,
	.cs-menu-section,
	.cs-founders,
	.cs-journey-section,
	.cs-hospitality,
	.cs-visit-details,
	.cs-visit-cta,
	.cs-single-menu-item {
		padding-left: 44px;
		padding-right: 44px;
	}
}

@media (max-width: 1024px) {
	.cs-nav__list { gap: 20px; }
	.cs-nav__list a { font-size: 12px; letter-spacing: .1em; }

	.cs-welcome__inner,
	.cs-founders__grid,
	.cs-page-hero__split,
	.cs-visit-teaser__inner,
	.cs-hospitality__inner,
	.cs-visit-details__inner,
	.cs-desserts__inner {
		grid-template-columns: 1fr !important;
		gap: 44px;
	}
	.cs-highlights__grid { grid-template-columns: repeat(2,1fr); }
	.cs-heritage__grid { grid-template-columns: 1fr; }
	.cs-gallery__grid { grid-template-columns: repeat(2,1fr); }
	.cs-gallery__item--1,
	.cs-gallery__item--2,
	.cs-gallery__item--6 { grid-column: span 2; grid-row: span 1; }
	.cs-menu-list { grid-template-columns: 1fr; }

	.cs-hero__title,
	.cs-page-hero__title { font-size: clamp(36px,6vw,54px); }
	.cs-single-menu-item { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.cs-header { padding: 14px 18px; }
	.cs-header.is-scrolled { padding-top: 14px; padding-bottom: 14px; }
	.cs-header__inner { gap: 12px; }
	.cs-logo img { width: 44px; height: 44px; }
	.cs-nav { display: none; }
	/* Every page's header starts over a dark hero (.cs-hero on Home,
	   .cs-page-hero elsewhere), and .is-scrolled is dark too — there's no
	   point in this design where the header sits over a light background,
	   so the burger stays cream-colored throughout. */
	.cs-burger { display: inline-flex; color: var(--cream-soft); border-color: var(--coffee-line-soft); }

	.cs-mobile-nav {
		display: flex;
		position: fixed;
		inset: 0;
		background: var(--coffee);
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		z-index: 100;
		opacity: 0;
		pointer-events: none;
		transition: opacity .35s ease;
	}
	body[data-nav-open] .cs-mobile-nav { opacity: 1; pointer-events: auto; }
	.cs-mobile-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	.cs-mobile-nav a {
		color: var(--cream-soft);
		font: 400 26px var(--font-display);
		letter-spacing: .04em;
		padding: 14px 22px;
		text-align: center;
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .5s ease, transform .5s ease;
		display: block;
	}
	body[data-nav-open] .cs-mobile-nav a { opacity: 1; transform: none; }
	.cs-mobile-nav li:nth-child(1) a { transition-delay: .08s; }
	.cs-mobile-nav li:nth-child(2) a { transition-delay: .14s; }
	.cs-mobile-nav li:nth-child(3) a { transition-delay: .2s; }
	.cs-mobile-nav li:nth-child(4) a { transition-delay: .26s; }
	.cs-mobile-nav li:nth-child(5) a { transition-delay: .32s; }
	.cs-mobile-nav li:last-child a {
		margin-top: 20px;
		background: var(--clay);
		padding: 14px 28px;
		font: 700 13px var(--font-body);
		letter-spacing: .16em;
		text-transform: uppercase;
		border-radius: 2px;
		color: var(--cream);
	}
	body[data-nav-open] { overflow: hidden; }

	.cs-hero { padding: 96px 18px 56px !important; margin-top: calc(-1 * var(--header-h-mobile)); }
	.cs-page-hero,
	.cs-page-hero--split { margin-top: calc(-1 * var(--header-h-mobile)); }
	.cs-page-hero,
	.cs-page-hero--split { padding: 120px 18px 56px; }
	.cs-welcome,
	.cs-heritage,
	.cs-highlights,
	.cs-desserts,
	.cs-gallery,
	.cs-visit-teaser,
	.cs-founders,
	.cs-journey-section,
	.cs-hospitality,
	.cs-visit-details,
	.cs-visit-cta,
	.cs-menu-section,
	.cs-single-menu-item {
		padding-left: 18px;
		padding-right: 18px;
	}

	h1, .cs-hero__title, .cs-page-hero__title { font-size: 36px; line-height: 1.12; }
	h2 { font-size: 28px; line-height: 1.18; }
	p { font-size: 15.5px; line-height: 1.65; }

	.cs-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.cs-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
	.cs-footer__inner--simple { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cs-footer__simple-nav { flex-wrap: wrap; gap: 16px; }

	.cs-highlights__grid,
	.cs-gallery__grid,
	.cs-desserts__media,
	.cs-founders__grid { grid-template-columns: 1fr; }
	.cs-desserts__photo { height: 220px; }
	.cs-gallery__item--1,
	.cs-gallery__item--2,
	.cs-gallery__item--5,
	.cs-gallery__item--6 { grid-column: auto; grid-row: auto; border-radius: 2px; height: 220px; }
	.cs-gallery__grid { grid-auto-rows: auto; }

	.cs-welcome__image { height: 320px; border-radius: 120px 120px 2px 2px; }
	.cs-page-hero__media { height: 300px; border-radius: 120px 120px 2px 2px; }
	.cs-single-menu-item__media { height: 260px; border-radius: 120px 120px 2px 2px; }
	.cs-founder-card { padding: 26px 22px; }
	.cs-visit-card { padding: 24px 22px; }

	.cs-journey__row { grid-template-columns: 1fr; gap: 12px; }
	.cs-journey__content { grid-template-columns: 1fr; gap: 8px; }

	.cs-menu-list__leader { display: none; }
	.cs-visit-map { min-height: 280px; }
	.cs-visit-map iframe { min-height: 280px; }
}