/* ==========================================================================
   U Design Landing Template — scoped stylesheet
   Everything is namespaced under .udx-root so it neither leaks into nor
   inherits from the host theme / page builder. Palette + radius are the
   exact values extracted from the source design (HSL).
   ========================================================================== */

.udx-root {
	/* --- Exact source palette (light theme) --- */
	--udx-soft-gold: 43 74% 49%;
	--udx-charcoal: 220 13% 18%;
	--udx-cream: 47 100% 97%;
	--udx-warm-beige: 35 20% 94%;
	--udx-forest-green: 140 43% 26%;
	--udx-navy-blue: 220 38% 25%;
	--udx-deep-plum: 281 39% 23%;
	--udx-royal-blue: 221 83% 53%;
	--udx-radius: 0.5rem;

	--udx-text: hsl(var(--udx-charcoal));
	--udx-muted: #4b5563;
	--udx-grey: #d1d5db;
	--udx-border: #e5e7eb;

	/* Local box model + typography reset (scoped, not global) */
	box-sizing: border-box;
	color: var(--udx-text);
	background: hsl(var(--udx-cream));
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.udx-root *,
.udx-root *::before,
.udx-root *::after { box-sizing: border-box; }

.udx-root img { max-width: 100%; height: auto; display: block; }
.udx-root a { text-decoration: none; color: inherit; }
.udx-root h1, .udx-root h2, .udx-root h3, .udx-root p, .udx-root ul { margin: 0; }
.udx-root ul { list-style: none; padding: 0; }

/* --- Typography helpers --- */
.udx-font-elegant { font-family: "Playfair Display", Georgia, "Times New Roman", serif; }
/* Color utilities are scoped with .udx-root to raise specificity (0,2,0) so they
   reliably override single-class component color rules regardless of source order. */
.udx-root .udx-text-gold  { color: hsl(var(--udx-soft-gold)); }
.udx-root .udx-text-green { color: hsl(var(--udx-forest-green)); }
.udx-root .udx-text-navy  { color: hsl(var(--udx-navy-blue)); }
.udx-root .udx-text-plum  { color: hsl(var(--udx-deep-plum)); }
.udx-root .udx-text-white { color: #fff; }
.udx-root .udx-text-grey  { color: var(--udx-grey); }
.udx-root .udx-muted      { color: var(--udx-muted); }
.udx-text-center { text-align: center; }
.udx-block { display: block; }

/* --- Layout primitives --- */
.udx-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }
.udx-section { padding: 5rem 0; }
.udx-hero { padding: 5rem 0 4rem; }
.udx-bg-beige { background: hsl(var(--udx-warm-beige)); }
.udx-bg-white { background: #fff; }
.udx-bg-charcoal { background: hsl(var(--udx-charcoal)); color: #fff; }

.udx-grid { display: grid; gap: 2rem; }
.udx-grid--gap { gap: 2rem; }
.udx-grid--gap-lg { gap: 4rem; }
.udx-items-center { align-items: center; }
.udx-stack { display: flex; flex-direction: column; gap: 2rem; }
.udx-stack--sm { gap: 1rem; }

.udx-section-head { text-align: center; max-width: 48rem; margin: 0 auto 4rem; }

/* --- Header --- */
.udx-header { background: #fff; border-bottom: 1px solid var(--udx-border); box-shadow: 0 1px 2px rgba(0,0,0,.04); position: sticky; top: 0; z-index: 50; }
.udx-header__inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.udx-brand { display: flex; align-items: center; gap: .75rem; }
.udx-brand__mark { width: 2.5rem; height: 2.5rem; border-radius: 4px; background: hsl(var(--udx-soft-gold)); color: #fff; display: flex; align-items: center; justify-content: center; }
.udx-brand__mark--sm { width: 2rem; height: 2rem; }
.udx-brand__mark .udx-ic { width: 1.25rem; height: 1.25rem; }
.udx-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.udx-brand__name { font-size: 1.5rem; letter-spacing: .02em; color: hsl(var(--udx-charcoal)); }
.udx-brand__name--sm { font-size: 1.125rem; }
.udx-brand__sub { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #6b7280; font-weight: 300; }

.udx-nav { display: none; gap: 2rem; }
.udx-nav a { font-weight: 500; color: hsl(var(--udx-charcoal)); transition: color .2s; }
.udx-nav a:hover { color: hsl(var(--udx-soft-gold)); }
.udx-header__cta { display: flex; align-items: center; gap: .75rem; }
.udx-navtoggle { display: inline-flex; background: none; border: 0; cursor: pointer; color: hsl(var(--udx-charcoal)); padding: .25rem; }
.udx-navtoggle .udx-ic { width: 1.5rem; height: 1.5rem; }

/* Mobile nav panel */
.udx-nav.is-open {
	display: flex; flex-direction: column; gap: 1rem;
	position: absolute; top: 4rem; left: 0; right: 0;
	background: #fff; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--udx-border);
	box-shadow: 0 8px 16px rgba(0,0,0,.08);
}

/* --- Icons --- */
.udx-ic { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.udx-ic--muted { color: #9ca3af; }
.udx-ic--xl { width: 3rem; height: 3rem; margin: 0 auto 1rem; }
.udx-star { width: 1rem; height: 1rem; color: #facc15; }
.udx-stars { display: inline-flex; }

/* --- Buttons --- */
.udx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-weight: 500; border-radius: var(--udx-radius); cursor: pointer;
	padding: .625rem 1rem; font-size: .875rem; border: 1px solid transparent;
	transition: background-color .2s, color .2s, border-color .2s; white-space: nowrap;
}
.udx-btn .udx-ic { width: 1rem; height: 1rem; }
.udx-btn--sm { height: 2.25rem; padding: 0 .75rem; }
.udx-btn--lg { padding: 1rem 2rem; font-size: 1.125rem; }
.udx-btn--block { width: 100%; height: 2.75rem; padding: 0 2rem; }
.udx-btn--gold { background: hsl(var(--udx-soft-gold)); color: #fff; }
.udx-btn--gold:hover { background: hsl(var(--udx-soft-gold) / .9); }
.udx-btn--green { background: hsl(var(--udx-forest-green)); color: #fff; }
.udx-btn--green:hover { background: hsl(var(--udx-forest-green) / .9); }
.udx-btn--outline-dark { background: transparent; border-color: hsl(var(--udx-charcoal)); color: hsl(var(--udx-charcoal)); }
.udx-btn--outline-dark:hover { background: hsl(var(--udx-charcoal)); color: #fff; }
.udx-btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.udx-btn--outline-light:hover { background: #fff; color: hsl(var(--udx-charcoal)); }
.udx-btn-row { display: flex; flex-direction: column; gap: 1rem; }

/* --- Badges --- */
.udx-badge { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid; padding: .15rem .65rem; font-size: .75rem; font-weight: 600; margin-bottom: 1.5rem; }
.udx-badge--gold { border-color: hsl(var(--udx-soft-gold)); color: hsl(var(--udx-soft-gold)); background: hsl(var(--udx-soft-gold) / .05); }
.udx-badge--green { border-color: hsl(var(--udx-forest-green)); color: hsl(var(--udx-forest-green)); background: hsl(var(--udx-forest-green) / .05); }

/* --- Headings / lead --- */
.udx-h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 1.5rem; color: hsl(var(--udx-charcoal)); }
.udx-h2 { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1.5rem; color: hsl(var(--udx-charcoal)); }
.udx-h3 { font-size: 1.25rem; margin-bottom: .75rem; color: hsl(var(--udx-charcoal)); }
.udx-lead { font-size: 1.25rem; color: var(--udx-muted); font-weight: 300; line-height: 1.7; margin-bottom: 2rem; }
.udx-lead--sm { font-size: 1.125rem; margin-bottom: 1.5rem; }

/* --- Hero media --- */
.udx-hero__media { position: relative; }
.udx-hero__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--udx-radius); }
.udx-hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.udx-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.2), transparent 60%); pointer-events: none; }
.udx-statcard { position: absolute; bottom: -2rem; left: -2rem; background: #fff; border: 1px solid var(--udx-border); border-radius: var(--udx-radius); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); padding: 1.5rem; text-align: center; }
.udx-statcard__num { font-size: 1.875rem; margin-bottom: .25rem; }
.udx-statcard__label { font-size: .875rem; color: var(--udx-muted); font-weight: 500; }
.udx-statcard__sub { font-size: .75rem; color: #6b7280; margin-top: .25rem; }

/* --- Trust row --- */
.udx-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--udx-border); }
.udx-trust__item { display: flex; align-items: center; gap: .5rem; }
.udx-trust .udx-muted { font-size: .875rem; }

/* --- Feature list --- */
.udx-feature-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }
.udx-feature-list li { display: flex; align-items: center; gap: .75rem; color: #374151; }

/* --- Media blocks --- */
.udx-media-tall img { width: 100%; height: 24rem; object-fit: cover; border-radius: var(--udx-radius); }

/* --- Cards --- */
.udx-card { border: 1px solid var(--udx-border); border-radius: var(--udx-radius); background: #fff; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.udx-card--service:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }
.udx-card--portfolio:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.12); transform: translateY(-2px); }
.udx-card__body { padding: 1.5rem; }
.udx-card--service .udx-card__body { padding: 2rem; }
.udx-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.udx-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.udx-card--portfolio:hover .udx-card__media img { transform: scale(1.05); }

/* --- Contact --- */
.udx-contact-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.udx-contact-item { display: flex; align-items: center; gap: 1rem; color: var(--udx-grey); }
.udx-quickaccess { background: rgba(255,255,255,.05); padding: 2rem; border-radius: var(--udx-radius); }
.udx-quickaccess .udx-h3 { margin-bottom: 1.5rem; }

/* --- Footer --- */
.udx-footer { background: hsl(var(--udx-charcoal)); border-top: 1px solid #1f2937; padding: 2rem 0; }
.udx-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.udx-footer__copy { font-size: .875rem; }

/* --- Order utilities (used on home-staging) --- */
.udx-order-1 { order: 1; }
.udx-order-2 { order: 2; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
	.udx-btn-row { flex-direction: row; }
	.udx-footer__inner { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 768px) {
	.udx-nav { display: flex; }
	.udx-navtoggle { display: none; }
	.udx-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.udx-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.udx-h1 { font-size: 4.5rem; }
	.udx-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.udx-grid--4 { grid-template-columns: repeat(4, 1fr); }
	/* On desktop, restore source ordering: staging image left, text right */
	.udx-order-1 { order: 0; }
	.udx-order-2 { order: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.udx-root *, .udx-root *::before, .udx-root *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Form fields (shared by estimator + contact)
   ========================================================================== */
.udx-root .udx-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.udx-root .udx-field label { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.udx-root .udx-field input,
.udx-root .udx-field select,
.udx-root .udx-field textarea {
	width: 100%; font: inherit; color: hsl(var(--udx-charcoal));
	background: #fff; border: 1px solid var(--udx-border);
	border-radius: var(--udx-radius); padding: .6rem .75rem; line-height: 1.3;
}
.udx-root .udx-field input:focus,
.udx-root .udx-field select:focus,
.udx-root .udx-field textarea:focus {
	outline: none; border-color: hsl(var(--udx-soft-gold));
	box-shadow: 0 0 0 3px hsl(var(--udx-soft-gold) / .2);
}
.udx-root .udx-field textarea { resize: vertical; min-height: 5.5rem; }
.udx-root .udx-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .25rem 0 1rem; }
.udx-root .udx-check input { width: 1rem; height: 1rem; }
.udx-root .udx-req { color: hsl(var(--udx-soft-gold)); }

/* Honeypot: removed from layout + a11y tree, still in the DOM for bots. */
.udx-root .udx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Estimator
   ========================================================================== */
.udx-est { border: 1px solid var(--udx-border); border-radius: var(--udx-radius); background: #fff; overflow: hidden; box-shadow: 0 10px 25px -10px rgba(0,0,0,.12); }
.udx-est__grid { display: grid; gap: 0; }
.udx-est__form { padding: 1.75rem; }
.udx-est__form .udx-h3 { margin-bottom: 1.25rem; }
.udx-est__help { margin-top: .5rem; font-size: .85rem; color: var(--udx-muted); }
.udx-est__help summary { cursor: pointer; font-weight: 600; color: hsl(var(--udx-charcoal)); }
.udx-est__help p { margin-top: .5rem; }
.udx-est__result { padding: 1.75rem; background: hsl(var(--udx-warm-beige)); border-top: 1px solid var(--udx-border); }
.udx-est__result-title { font-size: 1.1rem; margin-bottom: 1rem; color: hsl(var(--udx-charcoal)); }
.udx-est__lines { margin: 0 0 1rem; }
.udx-est__lines > div { display: flex; justify-content: space-between; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed #d8d2c7; font-size: .92rem; }
.udx-est__lines dt { color: var(--udx-muted); margin: 0; }
.udx-est__lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.udx-est__total { display: flex; justify-content: space-between; align-items: baseline; padding: .75rem 0 1rem; }
.udx-est__total strong { font-size: 1.6rem; color: hsl(var(--udx-soft-gold)); font-family: "Playfair Display", Georgia, serif; font-variant-numeric: tabular-nums; }
.udx-est__note { font-size: .72rem; color: #6b7280; margin: 0 0 1rem; }

@media (min-width: 768px) {
	.udx-est__grid { grid-template-columns: 1.1fr .9fr; }
	.udx-est__result { border-top: 0; border-left: 1px solid var(--udx-border); }
}

/* ==========================================================================
   Contact form (self-contained dark card — legible on any background)
   ========================================================================== */
.udx-cf { background: hsl(var(--udx-charcoal)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--udx-radius); padding: 2rem; }
.udx-cf .udx-h3 { margin-bottom: 1.25rem; }
.udx-cf .udx-field label { color: var(--udx-grey); }
.udx-cf__status { margin: .9rem 0 0; font-size: .9rem; min-height: 1.2em; }
.udx-cf__status.is-success { color: #86efac; }
.udx-cf__status.is-error { color: #fca5a5; }
.udx-cf [data-udx-submit]:disabled { opacity: .6; cursor: progress; }