/*
 * Decorate With Lights: 2026 brand layer.
 *
 * Source: DWL Brand Guidelines 2026 (colors, Trebuchet MS + Georgia).
 * Goal from Shannen (Oct 2026): tighter spacing, far fewer font sizes.
 *
 * The section templates print inline styles (many with !important), so rules
 * here are prefixed with `body` for specificity and use !important where the
 * templates do.
 */

:root {
	/* Brand colors */
	--dwl-forest: #1D241A;      /* primary: backgrounds, headers */
	--dwl-mid-green: #1B4332;
	--dwl-gold: #C9A560;        /* secondary: accents, CTAs */
	--dwl-gold-dark: #B08D4A;
	--dwl-amber: #F5D87A;       /* accent: icon fills, highlights */
	--dwl-off-white: #F9F6EF;   /* neutral: content backgrounds */
	--dwl-ink: #1D241A;
	--dwl-ink-soft: #4A5046;
	--dwl-on-dark: #F9F6EF;
	--dwl-on-dark-soft: rgba(249, 246, 239, .82);

	/* Fonts: both are system fonts, nothing to download */
	--dwl-serif: Georgia, 'Times New Roman', Times, serif;
	--dwl-sans: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Segoe UI', sans-serif;

	/* One type scale (fluid between phone and desktop) */
	--dwl-size-hero: clamp(2.375rem, 1.55rem + 3.4vw, 4rem);      /* 38-64 */
	--dwl-size-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem);      /* 30-44 */
	--dwl-size-h3: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);        /* 20-24 */
	--dwl-size-body: 1rem;                                        /* 16 */
	--dwl-size-lead: 1.0625rem;                                   /* 17 */
	--dwl-size-label: .8125rem;                                   /* 13 */

	/* One spacing scale */
	--dwl-section-y: clamp(44px, 5vw, 72px);
	--dwl-gap: clamp(20px, 2.4vw, 32px);
	--dwl-radius: 4px;
}

/* ------------------------------------------------------------------ fonts */

body,
body button,
body input,
body select,
body textarea,
body .site-main p,
body .site-main li,
body .site-main a,
body .nv-html-content,
body .builder-item,
body .footer-content-wrap,
body .site-footer {
	font-family: var(--dwl-sans) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .site-main h1, body .site-main h2, body .site-main h3, body .site-main h4,
body .new-header-section .header-title-white,
body .new-header-section .header-title-yellow,
body .header-section .header-title,
body .services-cards-section__heading,
body .services-cards-section__script,
body .services-cards-section__card-heading,
body .form-left-title,
body .text-section-title,
body .dwl-masonry-text-card__title {
	font-family: var(--dwl-serif) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

/* ------------------------------------------------------------ type scale */

body .site-main h1,
body .site-main h2,
body .services-cards-section__heading,
body .services-cards-section__script,
body .form-section h2,
body .split-content-section h2,
body .text-section-title {
	font-size: var(--dwl-size-h2) !important;
	line-height: 1.12 !important;
	margin-bottom: .4em;
}

body .site-main h3,
body .site-main h4,
body .services-cards-section__card-heading,
body .form-left-title,
body .dwl-masonry-text-card__title {
	font-size: var(--dwl-size-h3) !important;
	line-height: 1.25 !important;
}

body .site-main p,
body .site-main li,
body .text-section-content,
body .content-text,
body .card-text,
body .split-paragraph,
body .services-cards-section__intro-right,
body .services-cards-section__card-text,
body .icon-card-text,
body .formtext,
body .left-item p {
	font-size: var(--dwl-size-body) !important;
	line-height: 1.65 !important;
}

/* Labels: eyebrows, card tags, pills, buttons share one size */
body .services-cards-section__card-top-tag,
body .services-cards-section__pill,
body .site-main .btn,
body .new-header-button,
body .services-cards-section__card-button,
body .split-btn,
body .header-button {
	font-family: var(--dwl-sans) !important;
	font-size: var(--dwl-size-label) !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------------------- hero */

body .new-header-section .header-title-white,
body .new-header-section .header-title-yellow,
body .header-section .header-title-white,
body .header-section .header-title-yellow,
body .header-section h1 {
	font-size: var(--dwl-size-hero) !important;
	line-height: 1.05 !important;
}

body .new-header-section .header-title-yellow,
body .header-section .header-title-yellow {
	color: var(--dwl-gold) !important;
	font-style: italic !important;
}

/* Extra legibility over busy hero photos (on top of the hero gradient) */
body .header-section .header-title,
body .header-section .header-title-white,
body .header-section .header-title-yellow {
	text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

/* "America's Premier Outdoor Lighting Services": bigger, per Shannen */
body .new-header-section .new-header-eyebrow {
	font-family: var(--dwl-sans) !important;
	font-size: clamp(.9375rem, .85rem + .35vw, 1.125rem) !important; /* 15-18 */
	letter-spacing: .14em !important;
	font-weight: 700 !important;
	color: var(--dwl-gold) !important;
}

/*
 * Home hero (Mark, Oct 23): gold text was rough over the bright house in the video.
 * Lighter gold for text only, a tighter shadow, and a soft darker patch behind the
 * text block on top of the flat overlay.
 */
body .new-header-section .new-header-eyebrow,
body .new-header-section .header-title-yellow {
	color: #E2C27A !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 2px 22px rgba(0, 0, 0, .55);
}

body .new-header-section .header-title-white,
body .new-header-section .new-header-subheading {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 22px rgba(0, 0, 0, .5);
}

body .new-header-section .video-overlay {
	background:
		radial-gradient(ellipse 58% 62% at 50% 50%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 100%),
		rgba(0, 0, 0, .55) !important;
}

body .new-header-section .new-header-subheading,
body .new-header-section .new-header-subheading p {
	font-size: var(--dwl-size-lead) !important;
}

/* -------------------------------------------------------------- spacing */

body .services-cards-section,
body .form-section,
body .image-grid-section,
body .gallery-section,
body .locations-info-plus,
body .decorate-experience,
body .dwl-masonry-section {
	padding-top: var(--dwl-section-y) !important;
	padding-bottom: var(--dwl-section-y) !important;
}

body .split-content-section {
	padding-top: calc(var(--dwl-section-y) * .6) !important;
	padding-bottom: calc(var(--dwl-section-y) * .6) !important;
}

/*
 * Photos hold their place (Mark's option A): the photo lines up with the top
 * of its text and stays in view (sticky) while long copy scrolls past, instead
 * of floating in the middle of a tall column with empty space above and below.
 * Short copy still centers beside the photo.
 */
body .split-content-section .container {
	gap: var(--dwl-gap) !important;
	align-items: flex-start !important;
}

body .split-content-section .split-text {
	align-self: center;
}

@media (min-width: 769px) {
	body .split-content-section .split-image {
		position: sticky !important;
		top: 32px;
		align-self: flex-start;
		height: clamp(240px, 21vw, 320px) !important; /* ~300px at 1440 */
	}
}

body .split-content-section .split-text {
	padding: 0 8px !important;
}

body .split-content-section .split-image {
	max-height: 440px !important;
	min-height: 280px !important;
}

body .split-content-section .split-paragraph {
	margin-bottom: 20px !important;
}

body .split-content-section .title-icon-row {
	margin-bottom: 12px !important;
}

body .services-cards-section__intro {
	margin-bottom: var(--dwl-gap) !important;
}

/* Heading-only bands (side text removed per Shannen): full width, heading on one line */
body .services-cards-section--no-side .services-cards-section__intro {
	display: block !important;
	grid-template-columns: 1fr !important;
}

body .services-cards-section--no-side .services-cards-section__intro-left {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/*
 * A heading-only band directly followed by a text section (Holiday page) reads
 * as one intro: no gap between them, and the text section's own title steps
 * down a size so it sits under the band heading instead of competing with it.
 */
body .services-cards-section--no-cards:has(+ .text-section) {
	padding-bottom: 8px !important;
}

body .services-cards-section--no-cards + .text-section {
	padding-top: 8px !important;
}

body .services-cards-section--no-cards + .text-section .text-section-title {
	font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem) !important; /* 22-28 */
	line-height: 1.3 !important;
	margin-bottom: 14px !important;
}

body .services-cards-section--no-cards .services-cards-section__intro {
	margin-bottom: 0 !important;
}

body .services-cards-section--no-cards {
	padding-top: calc(var(--dwl-section-y) * .7) !important;
	padding-bottom: calc(var(--dwl-section-y) * .7) !important;
}

body .form-section .container {
	gap: var(--dwl-gap) !important;
}

body .form-section .left-item,
body .form-section .form-left > div {
	margin-bottom: 14px;
}

/* --------------------------------------------------------------- colors */

body .services-cards-section__script,
body .header-title-yellow {
	color: var(--dwl-gold) !important;
}

/* Primary buttons: Warm Gold with Forest Green text */
body .new-header-button--primary,
body .services-cards-section__card-button,
body .split-btn,
body .header-button,
body .form-right button[type="submit"],
body .builder-item--button_base .button,
body .builder-item--button_base a.button-primary,
body .decorate-experience a[style*="border-radius:7px"] {
	background-color: var(--dwl-gold) !important;
	border-color: var(--dwl-gold) !important;
	color: var(--dwl-forest) !important;
	transition: background-color .2s ease, color .2s ease;
}

body .new-header-button--primary:hover,
body .services-cards-section__card-button:hover,
body .split-btn:hover,
body .header-button:hover,
body .form-right button[type="submit"]:hover,
body .builder-item--button_base .button:hover,
body .builder-item--button_base a.button-primary:hover,
body .decorate-experience a[style*="border-radius:7px"]:hover {
	background-color: var(--dwl-amber) !important;
	border-color: var(--dwl-amber) !important;
	color: var(--dwl-forest) !important;
}

body .form-right button[type="submit"] {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: var(--dwl-size-label) !important;
}

/*
 * Section backgrounds and text colors are NOT overridden here: each section
 * keeps the colors set in the page builder, so pages keep their alternating
 * bands (e.g. white state pages, black location contact blocks), per Mark.
 */

/* All buttons are square (Mark): one shape everywhere. Tag pills on cards are labels, not buttons. */
body .new-header-button,
body .services-cards-section__card-button,
body .split-btn,
body .header-button,
body .form-right button[type="submit"],
body .site-main button[type="submit"],
body .builder-item--button_base .button,
body .builder-item--button_base a.button-primary,
body .decorate-experience a[style*="border-radius"],
body .locations-info-plus a[style*="padding:14px 28px"],
body .text-section a[style*="padding"],
body .dwl-split-slider__tabs button,
body .dwl-split-slider__prev,
body .dwl-split-slider__next,
body .gallery-pagination a,
body .gallery-pagination span {
	border-radius: 0 !important;
}

/*
 * Header: nav and the CTA share one treatment, uppercase labels in the brand
 * sans, like every other button on the site (the CTA was sentence case next to
 * an all-caps nav).
 */
body .primary-menu-ul.menu-desktop > li > .wrap > a,
body .primary-menu-ul.menu-mobile > li > .wrap > a {
	font-family: var(--dwl-sans) !important;
	font-size: .875rem !important;   /* 14 */
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

body .builder-item--button_base a.button,
body .builder-item--button_base a.button-primary {
	font-family: var(--dwl-sans) !important;
	font-size: var(--dwl-size-label) !important;
	font-weight: 700 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	padding: 12px 20px !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------- forms */

/* Lead form card: crisp corners, gold top edge, more breathing room */
body .form-section .form-right {
	border-radius: var(--dwl-radius) !important;
	border-top: 4px solid var(--dwl-gold) !important;
	padding: clamp(24px, 3vw, 36px) !important;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

body .form-section .lead_submit_form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body .form-section .lead_submit_form textarea,
body .form-section .lead_submit_form select {
	border-radius: 3px !important;
	border: 1px solid #D9D3C4 !important;
	background: #FBF9F4 !important;
	color: var(--dwl-ink) !important;
	font-family: var(--dwl-sans) !important;
	font-size: .9375rem !important; /* 15 */
	padding: 12px 14px !important;
	min-height: 46px;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

body .form-section .lead_submit_form textarea {
	min-height: 110px;
}

body .form-section .lead_submit_form input::placeholder,
body .form-section .lead_submit_form textarea::placeholder {
	color: #7B7F75;
	opacity: 1;
}

body .form-section .lead_submit_form input:not([type="checkbox"]):focus,
body .form-section .lead_submit_form textarea:focus {
	outline: none !important;
	background: #fff !important;
	border-color: var(--dwl-gold) !important;
	box-shadow: 0 0 0 3px rgba(201, 165, 96, .25) !important;
}

body .form-section .lead_submit_form button[type="submit"] {
	padding: 16px 20px !important;
	letter-spacing: .12em !important;
}

body .form-section .lead_submit_form button[type="submit"]::after {
	content: " \2192";
}

body .form-section .lead_submit_form button[type="submit"].zlr-submitting::after {
	content: none;
}

/* Gallery sections: warm brand Off White instead of the template's cool #fafbfc */
body .gallery-section {
	background: var(--dwl-off-white) !important;
}

/* Featured gallery (home page): even 3-across grid, heading, "view all" button */
body .gallery-section--featured .gallery-section__heading {
	text-align: center;
	margin: 0 0 28px !important;
}

body .gallery-section--featured .gallery-section__heading:has(+ .gallery-section__intro) {
	margin-bottom: 12px !important;
}

body .gallery-section__intro {
	max-width: 720px;
	margin: 0 auto 28px;
	text-align: center;
}

body .gallery-section--featured .gallery-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 14px !important;
}

body .gallery-section--featured .gallery-item,
body .gallery-section--featured .gallery-item img {
	border-radius: var(--dwl-radius) !important;
}

body .gallery-section--featured .gallery-item img {
	height: clamp(180px, 19vw, 270px) !important;
	transition: transform .35s ease;
}

body .gallery-section--featured .gallery-item a:hover img,
body .gallery-section--featured .gallery-item a:focus-visible img {
	transform: scale(1.04);
}

body .gallery-section__more {
	text-align: center;
	margin-top: 28px;
}

body .gallery-section__more-link {
	display: inline-block;
	padding: 14px 26px;
	background: var(--dwl-forest) !important;
	color: var(--dwl-off-white) !important;
	border-radius: 0 !important;
	text-decoration: none !important;
}

body .gallery-section__more-link:hover {
	background: var(--dwl-gold) !important;
	color: var(--dwl-forest) !important;
}

@media (max-width: 767px) {
	body .gallery-section--featured .gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
	}

	body .gallery-section--featured .gallery-item img {
		height: 38vw !important;
	}

	/* 2-across on phones: drop a lone last image so the grid stays even (9 -> 8) */
	body .gallery-section--featured .gallery-item:last-child:nth-child(odd) {
		display: none;
	}
}

/* Alternating bands: set by the script in footer.php on every other white section */
body .site-main > .dwl-band-alt {
	background-color: var(--dwl-off-white) !important;
}

/* Location contact block: gold call button */
body .locations-info-plus a[style*="padding:14px 28px"] {
	background: var(--dwl-gold) !important;
	color: var(--dwl-forest) !important;
}

body .locations-info-plus a[style*="padding:14px 28px"]:hover {
	background: var(--dwl-amber) !important;
}

/* Header + footer */
body .header-main,
body .header-top,
body .hfg_header .header--row,
body .dwl-global-topbar {
	background-color: var(--dwl-forest) !important;
}

body .site-footer,
body .footer-content-wrap,
body .hfg_footer .footer--row,
body .custom-footer {
	background-color: var(--dwl-forest) !important;
	color: var(--dwl-on-dark) !important;
}

body .custom-footer {
	border-top: 2px solid var(--dwl-gold);
}

body .custom-footer .footer-logo {
	width: 220px !important;
	max-width: 100% !important;
	height: auto !important;
}

body .custom-footer h4 {
	font-family: var(--dwl-serif) !important;
	font-size: var(--dwl-size-h3) !important;
	color: var(--dwl-gold) !important;
	letter-spacing: 0 !important;
}

body .custom-footer a,
body .custom-footer p,
body .custom-footer li {
	font-family: var(--dwl-sans) !important;
	font-size: var(--dwl-size-body) !important;
	color: var(--dwl-on-dark) !important;
}

body .custom-footer a:hover {
	color: var(--dwl-gold) !important;
}

/* Hamburger: outlined white box instead of a filled button */
body .navbar-toggle,
body .navbar-toggle-wrapper .navbar-toggle {
	background: transparent !important;
	border: 1.5px solid #fff !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	padding: 8px 9px !important;
}

body .navbar-toggle .icon-bar,
body .navbar-toggle .hamburger-inner,
body .navbar-toggle .hamburger-inner::before,
body .navbar-toggle .hamburger-inner::after {
	background-color: #fff !important;
}

body .navbar-toggle:hover,
body .navbar-toggle:focus-visible {
	border-color: var(--dwl-gold) !important;
}

/* ---------------------------------------------------------- components */

/* Bullets instead of check marks (Architectural page checklist) */
body .dwl-bullet-list {
	margin: 0 0 20px 1.1em;
	padding: 0;
	columns: 2 220px;
	column-gap: var(--dwl-gap);
}

body .dwl-bullet-list li {
	list-style: disc;
	margin: 0 0 6px;
	break-inside: avoid;
}

body .dwl-bullet-list li::marker {
	color: var(--dwl-gold);
}

/* Lists inside content sections (the theme resets list styles) */
body .split-content-section .split-paragraph ul {
	margin: 10px 0 14px 1.2em !important;
	padding: 0 !important;
}

body .split-content-section .split-paragraph ul li {
	list-style: disc !important;
	margin: 0 0 4px !important;
}

body .split-content-section .split-paragraph ul li::marker {
	color: var(--dwl-gold);
}

/* Phone under the form on location pages */
body .dwl-form-phone {
	margin: 18px 0 0 !important;
	text-align: center;
	font-size: var(--dwl-size-body) !important;
	color: var(--dwl-ink) !important;
}

body .dwl-form-phone a {
	color: var(--dwl-forest) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* Split-content slider (Smart Control + holiday slide on the home page) */
body .dwl-split-slider {
	position: relative;
	background: var(--dwl-off-white);
	padding: calc(var(--dwl-section-y) * .8) 20px;
}

/* Tabs named after each slide, so it reads as a set of panels */
body .dwl-split-slider__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 1140px;
	margin: 0 auto 22px;
}

body .dwl-split-slider__tabs button {
	font-family: var(--dwl-sans) !important;
	font-size: var(--dwl-size-label) !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1.5px solid rgba(29, 36, 26, .25);
	background: #fff;
	color: var(--dwl-ink);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

body .dwl-split-slider__tabs button:hover {
	border-color: var(--dwl-forest);
}

body .dwl-split-slider__tabs button.is-active {
	background: var(--dwl-forest);
	border-color: var(--dwl-forest);
	color: var(--dwl-off-white);
}

/* The framed card the slides move inside */
body .dwl-split-slider__stage {
	position: relative;
	max-width: 1140px;
	margin: 0 auto;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(29, 36, 26, .14), 0 2px 8px rgba(29, 36, 26, .06);
	overflow: hidden;
}

body .dwl-split-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	outline: none;
}

body .dwl-split-slider__track::-webkit-scrollbar {
	display: none;
}

body .dwl-split-slider__track > .dwl-split-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	padding: clamp(24px, 3.2vw, 44px) clamp(56px, 6vw, 84px) !important;
	background: #fff !important;
}

body .dwl-split-slider__track > .dwl-split-slide .container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
}

/* Large arrows on the card's edges */
body .dwl-split-slider__prev,
body .dwl-split-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: var(--dwl-forest);
	color: var(--dwl-off-white);
	font-size: 30px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(29, 36, 26, .25);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

body .dwl-split-slider__prev { left: 14px; }
body .dwl-split-slider__next { right: 14px; }

body .dwl-split-slider__prev:hover,
body .dwl-split-slider__next:hover,
body .dwl-split-slider__prev:focus-visible,
body .dwl-split-slider__next:focus-visible {
	background: var(--dwl-gold);
	color: var(--dwl-forest);
	transform: translateY(-50%) scale(1.06);
}

/* Dots + "01 / 02" below the card */
body .dwl-split-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 18px;
}

body .dwl-split-slider__dots {
	display: flex;
	gap: 8px;
}

body .dwl-split-slider__dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 999px;
	border: 0;
	background: rgba(29, 36, 26, .25);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

body .dwl-split-slider__dots button.is-active {
	width: 28px;
	background: var(--dwl-gold);
}

body .dwl-split-slider__count {
	font-family: var(--dwl-sans);
	font-size: var(--dwl-size-label);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--dwl-ink-soft);
}

@media (max-width: 767px) {
	body .dwl-split-slider {
		padding-left: 12px;
		padding-right: 12px;
	}

	body .dwl-split-slider__track > .dwl-split-slide {
		padding: 18px 16px 24px !important;
	}

	/* On phones the arrows sit over the photo's top corners instead of the text */
	body .dwl-split-slider__prev,
	body .dwl-split-slider__next {
		top: 28px;
		transform: none;
		width: 40px;
		height: 40px;
		font-size: 26px;
	}

	body .dwl-split-slider__prev:hover,
	body .dwl-split-slider__next:hover {
		transform: none;
	}

	body .dwl-split-slider__prev { left: 24px; }
	body .dwl-split-slider__next { right: 24px; }

	body .dwl-split-slider__tabs button {
		padding: 8px 12px;
		font-size: 11px !important;
	}
}

/* Experience box: aligned icon column, short title over one line of text */
body .decorate-experience .experience-right {
	gap: 22px !important;
	justify-content: center;
}

/* Only rows that have an icon get the icon column (Features and Benefits on
   Architectural uses this section type with no icons). */
body .decorate-experience .icon-card:has(.icon-img-circle) {
	display: grid !important;
	grid-template-columns: 52px 1fr;
	align-items: start !important;
	column-gap: 18px !important;
	min-height: 0 !important;
}

body .decorate-experience .icon-img-circle {
	width: 52px !important;
	height: 52px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(201, 165, 96, .55);
	border-radius: 50%;
	margin: 0 !important;
}

body .decorate-experience .icon-img-circle img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	object-fit: contain;
	margin: 0 !important;
}

body .decorate-experience .icon-card:not(:has(.icon-img-circle)) {
	display: block !important;
	min-height: 0 !important;
}

body .decorate-experience .icon-card-text {
	font-size: var(--dwl-size-body) !important;
	line-height: 1.55 !important;
	padding-top: 2px;
}

body .decorate-experience .icon-card:has(.icon-img-circle) .icon-card-text b,
body .decorate-experience .icon-card:has(.icon-img-circle) .icon-card-text strong {
	display: block;
	font-family: var(--dwl-serif) !important;
	font-weight: 400 !important;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--dwl-gold);
	margin-bottom: 4px;
}

body .decorate-experience .experience-left .exp-btn-desktop {
	margin-top: 24px !important;
}

@media (prefers-reduced-motion: reduce) {
	body .dwl-split-slider__track {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	body .split-content-section .split-image {
		min-height: 200px !important;
	}

	body .dwl-bullet-list {
		columns: 1;
	}
}

/* -------------------------------------------- feature list with photo */

/* Architectural "Features and Benefits": centered heading + intro, photo left, list right */
body .decorate-experience--feature .experience-head {
	max-width: 760px;
	margin: 0 auto 36px;
	padding: 0 20px;
	text-align: center;
}

body .decorate-experience--feature .experience-head h2 {
	text-align: center !important;
	margin: 0 0 12px !important;
}

body .decorate-experience--feature .experience-head__text p:last-child {
	margin-bottom: 0;
}

body .decorate-experience--feature .experience-flex {
	align-items: center;
	padding: 0 20px;
	box-sizing: border-box;
}

body .decorate-experience--feature .experience-photo img {
	display: block;
	width: 100%;
	height: auto;
}

body .decorate-experience--feature .experience-right {
	justify-content: center;
}

/* ------------------------------------------------- photo corners (Mark, Oct 23) */

/* One small radius for content photos and cards (was 6/10/12/18px) */
body .split-image,
body .split-image img,
body .dwl-split-slider__stage,
body .gallery-item,
body .gallery-item img,
body .experience-photo img,
body .form-right {
	border-radius: var(--dwl-radius) !important;
}

/* ------------------------------------------- one body text color (Mark, Oct 23) */

/* Dark text on light sections: one forest-tinted ink instead of #000 / #0a0a0a /
   #272626 / #4f4f4f / #555. Light-on-dark sections are untouched. */
body .split-text[style*="color: #0"],
body .split-text[style*="color:#0"],
body .text-section[style*=";color:#0"],
body .icon-card-text[style*="color: #0"],
body .services-cards-section__card p,
body .services-cards-section p,
body .services-cards-section__card-text p,
body .gallery-section__intro,
body .experience-head__text {
	color: var(--dwl-ink) !important;
}

body .split-text[style*="color: #0"] :is(p, li, span)[style*="color"],
body .split-text[style*="color:#0"] :is(p, li, span)[style*="color"],
body .text-section[style*=";color:#0"] :is(p, li, span)[style*="color"] {
	color: inherit !important;
}

/* ------------------------------------------ comfortable line length (Mark, Oct 23) */

/* Full-width text sections ran ~140 characters a line; cap the copy at a
   readable measure. Card rows inside the section keep the full width. */
body .text-section .text-section-title,
body .text-section .text-section-content {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Left-aligned copy keeps the page's left edge (lines up with the heading band
   above it, e.g. Holiday "Effortless elegance"); only centered copy is centered. */
body .text-section .text-section-title[style*="text-align:left"],
body .text-section .text-section-content[style*="text-align:left"]:not(:has([style*="text-align: center"], [style*="text-align:center"])) {
	margin-left: 0 !important;
}

/* ------------------------------------------ header between 960 and 1199px (Mark, Oct 23) */

/* Below ~1150px the desktop nav pinched: "About Us" dropped to a second row and
   the CTA wrapped onto two lines until the hamburger takes over at 960px.
   Tighten logo, nav spacing and the CTA in that range; wider screens unchanged. */
@media (min-width: 960px) and (max-width: 1199px) {
	body .header-main .site-logo img,
	body .header-main .custom-logo {
		max-width: 165px !important;
		height: auto !important;
	}

	body .header-main .nav-ul > li {
		margin-left: 11px !important;
		margin-right: 11px !important;
	}

	body .header-main .nav-ul > li > a,
	body .header-main .nav-ul > li > .wrap > a {
		font-size: 13px !important;
		letter-spacing: .06em !important;
		white-space: nowrap !important;
	}

	body .header-main .builder-item--button_base .button {
		padding: 11px 14px !important;
		font-size: 12px !important;
		letter-spacing: .06em !important;
		white-space: nowrap !important;
	}
}