/* Dream Events — base theme styles.
   Section-level colour/spacing/typography for the homepage is set per-widget
   inside Elementor (so it stays editable there). This file covers the
   chrome Elementor doesn't touch: global type, header/nav, footer, and
   small utility classes applied via Elementor's "CSS Classes" field. */

:root {
	--de-black: #0b0b0c;
	--de-black-soft: #121214;
	--de-pink: #ee1d6c;
	--de-pink-deep: #c6125a;
	--de-cream: #ffffff;
	--de-muted: #b9b6b2;
	--de-muted-on-pink: rgba(245, 242, 238, 0.85);
	--de-border: rgba(245, 242, 238, 0.14);
	--de-font-heading: 'Bodoni BT', 'Bodoni Moda', 'Playfair Display', Georgia, serif;
	--de-font-body: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--de-container: 1440px;
}

/* Self-hosted Bodoni BT (Bold only — the single weight supplied) replaces
   the Google Fonts "Bodoni Moda" for headings. Only one face is
   registered, so any requested weight (we mostly use 800) still resolves
   to this file — browsers match to the closest available face in a
   family rather than synthesizing missing weights for a static font. */
@font-face {
	font-family: 'Bodoni BT';
	src: url('../fonts/bodoni-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Self-hosted Gotham (Book/Medium/Bold) — licensed webfont files live in
   assets/fonts/, not committed from a public CDN. */
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/gotham-book.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/gotham-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Gotham';
	src: url('../fonts/gotham-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--de-black);
	color: var(--de-cream);
	font-family: var(--de-font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--de-font-heading);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; }

.container { max-width: var(--de-container); margin: 0 auto; padding: 0 24px; }

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
	position: absolute; top: -40px; left: 0; z-index: 10000;
	background: var(--de-pink); color: #fff; padding: 10px 16px;
}
.skip-link:focus { top: 0; }

/* ---------- Header ---------- */
/* Not sticky — stays in normal document flow and scrolls away with the
   page, and never switches to a compact state. Per explicit request:
   "keep navbar as it is always and dont stick it." */
.site-header {
	position: static;
	z-index: 500;
	background: var(--de-black);
	border-bottom: 1px solid transparent;
}
.site-header__inner {
	max-width: var(--de-container);
	margin: 0 auto;
	padding: 28px 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	transition: padding 0.3s ease, gap 0.3s ease;
}
.site-branding .custom-logo,
.site-branding img { max-height: 42px; width: auto; }
.site-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	letter-spacing: 0.08em;
	transition: flex-direction 0.3s ease, gap 0.3s ease;
}
.site-logo__mark {
	width: 50px;
	height: auto;
	display: block;
	transition: width 0.3s ease;
}
.site-logo__text {
	font-family: var(--de-font-heading);
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	transition: font-size 0.3s ease;
}

.main-navigation .nav-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation .nav-menu a {
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--de-cream);
	transition: color 0.2s ease, opacity 0.2s ease;
	opacity: 0.92;
}
.main-navigation .nav-menu a:hover { opacity: 1; }
/* WordPress's current-menu-item detection strips the #hash off custom
   links and matches the remaining URL against the current page — so
   the homepage-anchor nav items (Projects/Design/Services, all
   "/#section" links) get falsely marked current on the homepage
   alongside Home itself. :not(.menu-item-type-custom) limits the
   active-pink state to real pages, where "current" is actually
   meaningful. */
.main-navigation .nav-menu li.current-menu-item:not(.menu-item-type-custom) > a,
.main-navigation .nav-menu a.is-active { color: var(--de-pink); opacity: 1; }

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px; height: 32px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--de-cream);
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons (reusable, also used via Elementor "CSS Classes") ---------- */
/* No base .de-btn/.de-btn-primary/.de-btn-outline style block here on
   purpose: `_css_classes` (see button() in elementor_helpers.py) lands
   on the button's WIDGET WRAPPER div, not the inner `.elementor-button`
   anchor — same pattern already documented for eyebrow(). Every color/
   padding/font/border property these classes might have duplicated is
   already set directly via Elementor's own settings (background_color,
   text_padding, typography, border_*) on `.elementor-button` itself,
   at higher specificity (an ID-scoped selector) than a `.de-btn-x
   .elementor-button` descendant rule could ever beat anyway — so
   redeclaring them here would be redundant at best. Only the mobile
   -specific override below, which Elementor's own responsive controls
   don't cover for this property, actually needs `!important` to win. */

.de-eyebrow {
	display: inline-block;
	font-family: var(--de-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	color: var(--de-pink);
	margin-bottom: 38px;
}
.de-eyebrow--on-pink { color: rgba(255,255,255,0.75); }
/* The Theme Options dynamic CSS (customizer.php) forces every heading
   — including `h1..h6, .elementor-heading-title` — into the primary
   font/color with !important, since that's correct for real headings.
   But eyebrow() widgets are also Elementor "heading" widgets under the
   hood (for convenient sizing controls), so .elementor-heading-title
   also matches them, overriding the Gotham font + pink color set above
   on their outer .de-eyebrow wrapper (color/font-family are inherited,
   so the more specific rule on the inner element wins otherwise).
   Re-assert Gotham + the correct color directly on the inner element,
   at higher specificity (2 classes vs. the global rule's 1) so it wins
   regardless of each rule's position in the cascade. */
.de-eyebrow .elementor-heading-title {
	font-family: var(--de-font-body) !important;
	color: var(--de-pink) !important;
}
.de-eyebrow--on-pink .elementor-heading-title {
	color: rgba(255, 255, 255, 0.75) !important;
}
/* Same bug, much wider blast radius: ANY heading() call with a custom
   non-default color — stats numbers, service names, CTA headlines,
   decade years, process-step labels — was silently losing to this same
   global rule, since every one of them is a real h1-h6 element too.
   Site-wide accent colors (pink/black used deliberately, not meant to
   follow the admin's Theme Options primary color) need the same
   2-class-specificity rescue as eyebrow() got. Discovered by checking
   live computed color on "30+"/"Private" — both were white, not pink,
   despite the generator explicitly setting color=PINK; confirmed via
   CDP, not assumed. */
.de-force-pink .elementor-heading-title { color: var(--de-pink) !important; }
.de-force-black .elementor-heading-title { color: #000000 !important; }

/* Soft luminous bloom behind the hero headline, matching the mockup's
   glowing white text treatment over a dark photo background. */
.de-heading-glow {
	text-shadow: 0 0 40px rgba(255, 255, 255, 0.45), 0 0 90px rgba(255, 255, 255, 0.2);
}

/* Elementor adds its own default margin-bottom:20px between widgets in a
   column (not :last-child). That silently fought every explicit spacer()
   gap and custom margin we set throughout the page (inflating each by an
   extra 20px) — neutralize it so our own spacer()/margin values are the
   single source of truth for spacing. */
.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
.elementor-widget.de-eyebrow:not(:last-child) { margin-bottom: 38px !important; }

/* Bordered multi-column grid (process steps, decades timeline, etc.) —
   matches the design reference (Home.svg): a thin box frame around the
   whole row plus a vertical divider between each column. Confirmed via
   pixel-sampling the rendered SVG: ~1px white line at ~30% opacity on
   the pink background. A complete rectangle — all four sides, not just
   top/bottom — per follow-up feedback with a Figma frame screenshot
   showing the border closing on the left and right edges too. */
.de-grid-bordered > .elementor-container {
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.de-grid-bordered > .elementor-container > .elementor-column:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.35);
}
@media (max-width: 1024px) {
	/* Columns stack to full width below this point, so the vertical
	   divider between them no longer reads as anything — replaced with
	   a horizontal divider between each stacked item instead, matching
	   the mobile design reference. */
	.de-grid-bordered > .elementor-container > .elementor-column:not(:last-child) {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	}
}

/* "Explore" text link (services rows) — plain text with a pink underline
   and a separate arrow glyph, not a bordered button. */
.de-explore-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--de-pink);
	transition: opacity 0.2s ease;
}
.de-explore-link a:hover { opacity: 0.75; }
.de-explore-link .de-explore-arrow { color: var(--de-pink); transition: transform 0.2s ease; }
.de-explore-link a:hover .de-explore-arrow { transform: translateX(4px); }

/* ---------- Projects gallery (homepage) ---------- */
/* !important needed: Elementor's own ".elementor img { height: auto; }"
   (frontend.css) has identical specificity (1 class + 1 element) to our
   rules below and loads after main.css in <head>, so it wins cascade
   ties and silently overrides a plain height declaration here. */
.de-gallery-img { overflow: hidden; }
.de-gallery-img img {
	width: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.de-gallery-img:hover img { transform: scale(1.06); }
.de-gallery-img--side img { height: 356px !important; }
.de-gallery-img--tall img { height: 728px !important; }
@media (max-width: 1024px) {
	.de-gallery-img--side img { height: 280px !important; }
	.de-gallery-img--tall img { height: 576px !important; }
}
@media (max-width: 767px) {
	.de-gallery-img--side img,
	.de-gallery-img--tall img { height: 320px !important; }
}

/* Projects gallery, two structures per breakpoint instead of one CSS
   -reshaped structure (see build-elementor-home.py for why: a
   display:contents flatten of the desktop's nested 3-column layout
   proved unreliable). .de-gallery-desktop is the real asymmetric
   33/34/33 layout, shown above 767px; .de-gallery-mobile is a separate,
   flat single-column gallery (5 images as direct sibling widgets, no
   nested columns to fight) shown only below it, turned into a clean
   2-column CSS grid there. */
@media (max-width: 767px) {
	.de-gallery-desktop { display: none !important; }
}
.de-gallery-mobile { display: none !important; }
@media (max-width: 767px) {
	.de-gallery-mobile { display: block !important; }
	.de-gallery-mobile > .elementor-container > .elementor-column > .elementor-widget-wrap {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 160px;
		gap: 16px;
	}
	.de-gallery-mobile .de-gallery-img { margin: 0 !important; height: 100%; }
	.de-gallery-img--mobile img { height: 100% !important; }
	/* Explicit placement, not uniform auto-flow: the mobile reference
	   shows an asymmetric layout — [purple, candlelit] side by side on
	   row 1, then the tall floral/dancefloor image spanning rows 2–3 in
	   column 1 while [marquee, band] stack individually beside it in
	   column 2 — same visual idea as the desktop asymmetric layout
	   (one tall image + paired stacks), just recomposed into 2 columns
	   instead of 3. Widget order from build-elementor-home.py's
	   gallery_mobile is [purple, candlelit, floral, marquee, band].*/
	.de-gallery-mobile .de-gallery-img:nth-child(1) { grid-column: 1; grid-row: 1; }
	.de-gallery-mobile .de-gallery-img:nth-child(2) { grid-column: 2; grid-row: 1; }
	.de-gallery-mobile .de-gallery-img:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
	.de-gallery-mobile .de-gallery-img:nth-child(4) { grid-column: 2; grid-row: 2; }
	.de-gallery-mobile .de-gallery-img:nth-child(5) { grid-column: 2; grid-row: 3; }
}

/* Our Story page: asymmetric image+text origin section image */
.de-story-origin-img img { height: 560px !important; }
@media (max-width: 1024px) {
	.de-story-origin-img img { height: 420px !important; }
}
@media (max-width: 767px) {
	.de-story-origin-img img { height: 320px !important; }
}

/* ---------- Forminator contact form — reskinned to match the theme ----------
   Forminator renders its own markup (forminator-input/label/button/etc.)
   outside Elementor's control, so the only way to bring it in line with
   the rest of the site is to target its classes directly here. !important
   is used deliberately throughout: Forminator's own CSS (forminator-ui,
   forminator-form-default.base.min.css) is loaded after this stylesheet
   and would otherwise win ties on shared properties, same as the
   Elementor specificity-tie pattern documented earlier in this file. */
/* Forminator's own grid CSS (forminator-grid-default.css) sets
   margin-bottom on .forminator-row-inside/.forminator-row via a
   higher-specificity selector chain (.forminator-ui.forminator-custom-
   form:not(.forminator-size--small)[data-grid="open"] .forminator-row-
   inside:not(:last-child)) that was silently winning over the simple
   rule below even with !important on our side being absent — matched
   here with !important plus the same descendant depth so it can't be
   outranked again. */
.de-contact-form .forminator-row,
.de-contact-form .forminator-row-inside { margin-bottom: 16px !important; }
.de-contact-form .forminator-col { margin-bottom: 16px !important; }

.de-contact-form .forminator-label {
	display: block;
	margin-bottom: 10px !important;
	font-family: var(--de-font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--de-muted) !important;
}
.de-contact-form .forminator-required { color: var(--de-pink) !important; }

.de-contact-form .forminator-input,
.de-contact-form .forminator-textarea,
.de-contact-form select.forminator-select {
	width: 100%;
	background: rgba(245, 242, 238, 0.04) !important;
	border: 1px solid var(--de-border) !important;
	border-radius: 2px !important;
	padding: 15px 18px !important;
	font-family: var(--de-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--de-cream) !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.de-contact-form .forminator-textarea { min-height: 160px; resize: vertical; }
.de-contact-form .forminator-input::placeholder,
.de-contact-form .forminator-textarea::placeholder { color: var(--de-muted); opacity: 0.7; }
.de-contact-form .forminator-input:focus,
.de-contact-form .forminator-textarea:focus,
.de-contact-form select.forminator-select:focus {
	border-color: var(--de-pink) !important;
	background: rgba(245, 242, 238, 0.07) !important;
	outline: none;
}
.de-contact-form .forminator-char-counter,
.de-contact-form .forminator-char-left {
	color: var(--de-muted) !important;
	font-family: var(--de-font-body) !important;
	font-size: 12px !important;
}

.de-contact-form .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--de-pink) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 2px !important;
	padding: 15px 34px !important;
	font-family: var(--de-font-body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	box-shadow: none !important;
	transition: background-color 0.2s ease;
	cursor: pointer;
}
.de-contact-form .forminator-button-submit:hover,
.de-contact-form .forminator-button-submit:focus {
	background: var(--de-pink-deep) !important;
}

.de-contact-form .forminator-response-message {
	border-radius: 2px !important;
	padding: 16px 20px !important;
	font-family: var(--de-font-body) !important;
	margin-bottom: 28px !important;
}
.de-contact-form .forminator-response-message.forminator-success {
	background: rgba(238, 29, 108, 0.12) !important;
	box-shadow: inset 2px 0 0 0 var(--de-pink) !important;
	color: var(--de-cream) !important;
}
.de-contact-form .forminator-response-message.forminator-success p { color: var(--de-cream) !important; }

/* Contact page: constrain both the title row and the form+details row to
   a matching centered 75% width. Two selectors because the two sections
   are two different Elementor element types: the form+details row is a
   classic Section (width lives on its child .elementor-container), the
   title row was converted to the newer flexbox Container type in the
   editor (no such child — the width goes on the element itself). */
.de-container-75 > .elementor-container,
.de-container-75.e-con {
	max-width: 75% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 1024px) {
	.de-container-75 > .elementor-container,
	.de-container-75.e-con { max-width: 100% !important; }
}

/* Title row (Container type): tighten the heading→paragraph gap — each
   of its two direct child containers carries its own 10px top/bottom
   padding by default, stacking up to 20px of dead space between them. */
.de-container-75.e-con > .e-con.e-child:first-child { padding-bottom: 4px !important; }
.de-container-75.e-con > .e-con.e-child:last-child { padding-top: 4px !important; }

/* Contact page v2: dark bordered cards (not the old solid-pink sidebar)
   for both the contact-details block and the form, matching the
   Terms-and-Conditions-style reference layout: a plain heading above a
   bordered box on the left, a fully bordered card (heading + form) on
   the right. Both cards share the same border/background/padding via
   this common rule; the ".de-contact-card" selector below adds a few
   details-only specifics. */
.de-contact-card,
.de-form-card {
	background: transparent;
	border: 1px solid #222222;
	border-radius: 4px;
	padding: 48px !important;
}
.de-contact-card a { transition: opacity 0.2s ease; }
.de-contact-card a:hover { opacity: 0.7; }
.de-contact-card a {
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	padding-bottom: 2px;
}
.de-contact-card a:hover { border-bottom-color: rgba(255, 255, 255, 0.7); }
/* Divider widgets between the three detail rows already carry their own
   spacing; just tighten the gap around them inside the card. */
.de-contact-card .elementor-widget-divider { margin: 18px 0 !important; }
.de-contact-card .elementor-widget-divider .elementor-divider-separator { border-top-color: var(--de-border) !important; }

/* Icon + text rows: a small pink mask-image icon positioned to the left
   of each heading widget via ::before — avoids depending on Elementor's
   icon/icon-box widgets (unverified controls in this project; see the
   button_css_classes lesson elsewhere in this file) and keeps the icon
   entirely in CSS, immune to wp_kses stripping raw <svg> markup from a
   widget's "title" setting. */
.de-contact-icon .elementor-heading-title {
	position: relative;
	padding-left: 34px;
	display: block;
	font-family: var(--de-font-body) !important;
}
.de-contact-icon .elementor-heading-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	background: var(--de-pink);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.de-contact-icon--phone .elementor-heading-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.de-contact-icon--mail .elementor-heading-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
.de-contact-icon--pin .elementor-heading-title::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Consent/links HTML field inside the Forminator form: plain muted text
   with pink links, no label row (field_label left empty). */
.de-contact-form .forminator-field.forminator-merge-tags p { color: var(--de-muted) !important; font-size: 13px !important; line-height: 1.7 !important; margin: 0 0 20px !important; }
.de-contact-form .forminator-field.forminator-merge-tags a { color: var(--de-pink) !important; text-decoration: underline; }

@media (max-width: 900px) {
	.de-contact-card,
	.de-form-card { padding: 32px !important; }
}

/* ---------- Our Story page ---------- */
/* CTA footer button: Elementor's column content_position only maps to
   align-content on the widget-wrap (vertical spread), not
   justify-content, so a single shrink-wrapped widget (the button, via
   _element_width:initial) still sits at the start of its own line
   instead of centering. The other children here are all full-width, so
   centering the whole wrap's main axis doesn't affect them. */
.de-cta-footer .elementor-widget-wrap { justify-content: center; }

/* ---------- Default (non-Elementor) content pages ---------- */
.default-content { padding: 140px 24px 100px; max-width: 860px; }
.default-content .entry-title { font-family: var(--de-font-heading); font-size: clamp(32px, 5vw, 48px); margin-bottom: 14px; }
.default-content .entry-meta { color: var(--de-muted); font-size: 15px; margin: 0 0 32px; }
.default-content .entry-divider { border: none; border-top: 1px solid var(--de-border); margin: 0 0 40px; }
.default-content .entry-content p { color: var(--de-muted); line-height: 1.8; margin: 0 0 20px; }
.default-content .entry-content h2 {
	font-family: var(--de-font-heading);
	font-size: 24px;
	font-weight: 800;
	color: var(--de-cream);
	margin: 44px 0 14px;
}
.default-content .entry-content h2:first-of-type { margin-top: 0; }
@media (max-width: 767px) {
	.default-content { padding: 100px 20px 70px; }
	.default-content .entry-content h2 { font-size: 20px; margin: 34px 0 12px; }
}

/* ---------- Theme Options: Body Layout (boxed / custom width) ---------- */
/* Values come from Customizer > Theme Options > Body Layout. Capping
   #page itself (an earlier version of this rule) also visually clipped
   every Elementor section's own background — a full-bleed hero/CTA
   photo showed black viewport margins either side instead of covering
   the screen, since #page wraps the sections too. Capping each
   section's own content row (.elementor-container) instead achieves
   the same "boxed content" look without ever touching the sections'
   own backgrounds, which stay their natural 100vw/100%-of-#page width
   — #page itself is intentionally left unconstrained here. Full width
   (default) needs no override — everything already renders edge to
   edge with no cap. */
/* !important: Elementor's own per-post generated CSS sets max-width on
   .elementor-container too (its "Content Width" setting), at the same
   or higher specificity depending on the selector it generates — same
   tie-breaking issue documented elsewhere in this file. .de-container-75
   (Contact page)'s own more specific/!important rule still wins over
   this for that one row, as intended, since it targets
   ".de-container-75 > .elementor-container" (2 classes, beats this
   rule's 1 class + 1 attribute-ish body class regardless of order). */
body.layout-boxed .elementor-container {
	max-width: 1440px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.layout-custom .elementor-container {
	max-width: var(--theme-custom-width, 1200px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
@media (max-width: 782px) {
	/* Boxed/custom margins fight for space on small screens — let the
	   layout go full width below this point regardless of the setting. */
	body.layout-boxed .elementor-container,
	body.layout-custom .elementor-container {
		max-width: 100% !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	/* The stacked/centered "expanded" header is a desktop flourish only —
	   on mobile the header always uses the compact row + hamburger, since
	   there's no room to stack logo + wordmark + a full nav row. */
	.site-header__inner {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 16px 20px !important;
		gap: 16px !important;
	}
	.site-logo {
		flex-direction: row !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.site-logo__mark { width: 36px !important; }
	.site-logo__text { font-size: 13px !important; }

	.main-navigation { position: fixed; inset: 72px 0 0 0; background: var(--de-black); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; padding: 32px 24px; }
	.main-navigation.is-open { transform: translateX(0); }
	.main-navigation .nav-menu { flex-direction: column; align-items: flex-start; gap: 24px; }
	.main-navigation .nav-menu a { font-size: 16px; }
	.menu-toggle { display: inline-flex; }
}

/* Buttons stay their natural content-sized width on mobile too — the
   mobile design reference (Home mobile.svg) shows the hero's two
   buttons sitting side by side, and every other button (single or
   not) sized to its own text, never stretched edge to edge. A
   previous `.de-btn { width: 100% }` rule here forced every button
   full-width below 600px, which stacked the hero's pair onto separate
   lines and didn't match any button in the reference. */
@media (max-width: 480px) {
	/* The desktop padding (15px/34px) is fixed at every breakpoint by
	   default (Elementor's text_padding control isn't set responsively
	   in button()), so two full-padded buttons side by side genuinely
	   don't fit a ~390px phone width even once width:auto (set above
	   via _element_width_mobile) lets them shrink to content. Verified
	   via a real mobile viewport (CDP device-metrics override — window
	   -resizing tools in this environment don't reliably emulate narrow
	   widths, giving false readings) that even at ~174px/172px each the
	   hero's two buttons were ~17px too wide combined to share a line
	   and wrapped; tightened further here to comfortably fit. The
	   .elementor-button rule driving the desktop padding is scoped to
	   the widget's own generated ID selector, more specific than
	   ".de-btn .elementor-button" could ever be, so this needs
	   `!important` to win regardless. */
	.de-btn .elementor-button { padding: 12px 18px !important; font-size: 12px !important; }
}