/* BSDimmo Demo – only what theme.json can't express. Colours/fonts come from theme.json presets. */

:root {
	--ht-navy: var(--wp--preset--color--contrast);
	--ht-blue: var(--wp--preset--color--accent-1);
	--ht-gold: var(--wp--preset--color--accent-2);
	--ht-sand: var(--wp--preset--color--accent-3);
	--ht-text: var(--wp--preset--color--accent-4);
	--ht-muted: var(--wp--preset--color--accent-5);
	--ht-line: var(--wp--preset--color--accent-6);
	--ht-serif: var(--wp--preset--font-family--heading);
	--ht-topbar-h: 58px;
	--bsdimmo-heading-font: var(--ht-serif); /* BSDimmo plugin picks this up */
}

body { color: var(--ht-text); }
h1 em, h2 em, h3 em { color: var(--ht-blue); }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + *, .ht-main > * + * { margin-block-start: 0; }

/* ---------- header ---------- */
header.wp-block-template-part { position: sticky; top: calc(-1 * var(--ht-topbar-h)); z-index: 100; }
.admin-bar header.wp-block-template-part { top: calc(32px - var(--ht-topbar-h)); }

.ht-topbar { background: var(--ht-navy); color: #E7ECF3; font-size: 12.5px; letter-spacing: .02em; padding: 4px clamp(20px, 4vw, 56px); height: var(--ht-topbar-h); box-sizing: border-box; }
.ht-topbar p.ht-topbar__row { margin: 0; display: grid; grid-template-columns: 1.1fr 2.4fr 1fr 1.3fr; gap: 1.5rem; line-height: 25px; max-width: 1200px; margin-inline: auto; }
.ht-topbar__row + .ht-topbar__row { border-top: 1px solid rgba(255, 255, 255, .08); }
.ht-topbar em { font-family: var(--ht-serif); font-size: 15px; color: #fff; }
.ht-topbar a { color: #E7ECF3; }
.ht-topbar a:last-child { text-align: right; }
.ht-topbar span { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* no backdrop-filter here: it would trap the fixed mobile menu overlay inside the header */
.ht-header { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--ht-line); padding: 14px clamp(20px, 4vw, 56px); }
.ht-header > * { margin: 0; }
.ht-brand { margin: 0; }
.ht-brand a { display: flex; align-items: center; gap: 12px; color: var(--ht-navy); }
.ht-brand img { width: 44px; height: 44px; }
.ht-brand strong { display: block; white-space: nowrap; font-family: var(--ht-serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.ht-brand strong em { color: var(--ht-blue); }
.ht-brand small { display: block; font-family: var(--ht-serif); font-style: italic; font-size: 13px; color: var(--ht-muted); }

.ht-nav .wp-block-navigation-item__content { white-space: nowrap; padding: 6px 2px; border-bottom: 1px solid transparent; }
.ht-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--ht-navy); color: var(--ht-navy); }
.ht-nav .wp-block-navigation__container { gap: 1.4rem; }
.ht-nav .ht-nav__cta > a { background: var(--ht-navy); color: #fff !important; padding: 10px 20px; border: 0; }
.ht-nav .ht-nav__cta > a:hover { background: var(--ht-blue); }
.ht-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); padding: 28px clamp(20px, 6vw, 40px); }
.ht-nav .is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) { align-items: flex-start !important; }
.ht-nav .is-menu-open .wp-block-navigation__container { gap: .2rem; width: 100%; }
.ht-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--ht-line); }
.ht-nav .is-menu-open .wp-block-navigation-item__content { font-family: var(--ht-serif); font-size: 26px; font-weight: 400; padding: 10px 0; }
.ht-nav .is-menu-open .ht-nav__cta { border: 0; margin-top: 1.5rem; }
.ht-nav .is-menu-open .ht-nav__cta > a { font-family: var(--wp--preset--font-family--body); font-size: 15px; padding: 14px 24px !important; } /* core's overlay rule is more specific */

/* ---------- shared section bits ---------- */
.ht-section { padding-block: clamp(64px, 9vw, 110px); }
.ht-bg-white { background: #fff; }
.ht-bg-sand { background: var(--ht-sand); }
.ht-bg-navy { background: var(--ht-navy); color: #C9D3DF; }
.ht-bg-navy :is(h2, h3, strong) { color: #fff; }
.ht-bg-navy :is(h2, h3) em { color: #9DB8D9; }

.ht-eyebrow, .ht-num { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--ht-blue); }
p.ht-eyebrow::before { content: ""; display: inline-block; width: 40px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 14px; }
.ht-card p.ht-eyebrow::before, .ht-wizard p.ht-eyebrow::before { display: none; }
.ht-num { font-size: 11px; color: var(--ht-muted); line-height: 2; }
.ht-bg-navy .ht-num, .ht-bg-navy .ht-eyebrow { color: #9DB8D9; }

.ht-head { margin-bottom: clamp(40px, 5vw, 64px); }
.ht-head h2 { margin-top: 0; }
.ht-lead { font-size: 15px; max-width: 46rem; }
.ht-head > .wp-block-column:first-child { padding-top: 1.6rem; }

.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ht-navy); color: #fff; }
.ht-bg-navy .wp-block-button.is-style-outline > .wp-block-button__link { color: var(--ht-navy); background: #fff; border-color: #fff; }
.ht-center { justify-content: center; margin-top: 3.5rem; }

.ht-dash-list { list-style: none; padding: 0; }
.ht-dash-list li { padding: 10px 0 10px 36px; border-bottom: 1px solid var(--ht-line); position: relative; font-size: 14px; }
.ht-dash-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--ht-navy); }
.ht-arrow-link a { font-weight: 500; border-bottom: 1px solid currentColor; }
.ht-stars { color: var(--ht-gold); letter-spacing: .15em; }

/* ---------- hero ---------- */
.ht-hero { padding-block: clamp(48px, 7vw, 96px); }
.ht-hero h1 { margin-block: 1.2rem; }
.ht-hero .wp-block-buttons { margin-top: 2rem; }
.ht-rating { font-size: 13px; color: var(--ht-muted); margin-top: 1.5rem; }
.ht-photo-card { position: relative; padding: 14px; border: 1px solid var(--ht-gold); background: #fff; }
.ht-photo-card .wp-block-image { margin: 0; }
.ht-photo-card img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.ht-photo-card__label { position: absolute; left: -24px; bottom: 48px; margin: 0; background: #fff; padding: 16px 26px; font-family: var(--ht-serif); font-size: 24px; color: var(--ht-navy); box-shadow: 0 10px 30px rgba(14, 42, 71, .12); }
.ht-photo-card__label em { color: var(--ht-blue); }
.ht-photo-card__label small { display: block; font-family: var(--wp--preset--font-family--body); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ht-muted); }

/* ---------- tiles ---------- */
.wp-block-columns.ht-tiles { gap: 0; margin: 0; }
.ht-tile { position: relative; min-height: 320px; padding: 34px 30px; display: flex; flex-direction: column; justify-content: flex-end; color: #E7ECF3; background: center / cover no-repeat; isolation: isolate; border-right: 1px solid rgba(255, 255, 255, .12); }
.ht-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 42, 71, .25), rgba(14, 42, 71, .88)); transition: background .3s; }
.ht-tile:hover::after { background: linear-gradient(180deg, rgba(14, 42, 71, .45), rgba(14, 42, 71, .95)); }
.ht-tile--1 { background-image: url(img/tile-1.svg); }
.ht-tile--2 { background-image: url(img/tile-2.svg); }
.ht-tile--3 { background-image: url(img/tile-3.svg); }
.ht-tile--4 { background-image: url(img/tile-4.svg); }
.ht-tile::before { content: ""; width: 28px; height: 28px; margin-bottom: 18px; background: #fff; -webkit-mask: var(--ht-icon) center / contain no-repeat; mask: var(--ht-icon) center / contain no-repeat; }
.ht-icon--home { --ht-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.ht-icon--pin { --ht-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ht-icon--building { --ht-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 21V7l8-4 8 4v14z'/%3E%3Cpath d='M9 10h2M13 10h2M9 14h2M13 14h2M10 21v-3h4v3'/%3E%3C/svg%3E"); }
.ht-icon--coin { --ht-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); }
.ht-tile h3 { color: #fff; margin: 0 0 .6rem; font-size: 26px; }
.ht-tile p { margin: 0; font-size: 13px; }
.ht-tile__link { margin-top: 1.2rem !important; }
.ht-tile__link a { color: var(--ht-gold); font-size: 12px; font-weight: 500; }
.ht-tile__link a::before { content: "›  "; }

/* ---------- stats ---------- */
.ht-stats { background: #fff; padding-block: 44px; border-bottom: 1px solid var(--ht-line); }
.ht-stat { margin: 0; text-align: center; font-family: var(--ht-serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: var(--ht-navy); }
.ht-stat small { display: block; margin-top: 6px; font-family: var(--wp--preset--font-family--body); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ht-muted); }

/* ---------- about / offers ---------- */
.ht-split { gap: clamp(32px, 5vw, 80px); }
.ht-split img, .ht-feature-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wp-block-columns.ht-feature-card { gap: 0; background: #fff; border-top: 2px solid var(--ht-navy); margin-bottom: 3.5rem; }
.ht-feature-card .wp-block-image { margin: 0; height: 100%; }
.ht-feature-card .wp-block-image img { height: 100%; }
.ht-feature-card > .wp-block-column:last-child { padding: clamp(24px, 3.5vw, 48px); }
.ht-feature-card h3 { font-size: 32px; margin-block: .8rem 1.2rem; }

/* ---------- process ---------- */
.ht-steps { gap: 3rem 4rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ht-step { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.2rem; }
.ht-step__num { font-size: 11px; letter-spacing: .25em; color: #9DB8D9; margin: 0 0 1.4rem; }
.ht-step h3 { font-size: 24px; margin: 0 0 .6rem; }
.ht-step p:last-child { font-size: 13.5px; margin: 0; }

/* ---------- valuation teaser ---------- */
.ht-wizard { background: var(--ht-sand); border: 1px solid var(--ht-line); padding: clamp(24px, 3.5vw, 44px); }
.ht-wizard__progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 1.5rem; }
.ht-wizard__progress span { height: 3px; background: var(--ht-line); }
.ht-wizard__progress span:first-child { background: var(--ht-navy); }
.ht-wizard h3 { font-size: 28px; margin-top: .4rem; }
.ht-wizard__options { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-block: 1.5rem; }
.ht-wizard__options .wp-block-button__link { width: 100%; text-align: left; background: #fff; border-color: var(--ht-line); }
.ht-wizard__nav { justify-content: space-between; }

/* ---------- team ---------- */
.ht-team { gap: 24px; }
.ht-card { background: #fff; padding: 0 0 28px; border: 1px solid var(--ht-line); }
.ht-card > * { padding-inline: 28px; }
.ht-card > .wp-block-image { padding: 0; margin: 0 0 1.6rem; }
.ht-card img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: top; }
.ht-card h3 { margin: 0; font-size: 28px; }
.ht-card .ht-eyebrow { font-size: 10px; margin-top: .3rem; }
.ht-card p { font-size: 13.5px; }
.ht-contact-lines { border-top: 1px solid var(--ht-line); padding-top: 1rem; line-height: 2; }
.ht-contact-lines span { display: inline-block; width: 60px; font-size: 11px; color: var(--ht-muted); }
.ht-favorite { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ht-line); }

/* ---------- references marquee ---------- */
.ht-marquee { overflow: hidden; }
.ht-marquee__track { display: flex; gap: 20px; width: max-content; animation: ht-marquee 60s linear infinite; }
.ht-marquee:hover .ht-marquee__track { animation-play-state: paused; }
.ht-marquee__track > .wp-block-image { margin: 0; width: 320px; flex: none; }
.ht-marquee img { display: block; width: 320px; height: 220px; object-fit: cover; }
.ht-marquee figcaption { margin: 12px 0 0; text-align: left; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--ht-muted); }
.ht-marquee figcaption strong { font-family: var(--ht-serif); font-size: 20px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ht-navy); }
@keyframes ht-marquee { to { transform: translateX(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) {
	.ht-marquee { overflow-x: auto; }
	.ht-marquee__track { animation: none; }
}

/* ---------- region ---------- */
.ht-places { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; margin-block: 2rem; }
.ht-places li { border-bottom: 1px solid var(--ht-line); padding: 9px 0; font-size: 13.5px; }
.ht-places li:nth-child(-n+2) { font-weight: 600; color: var(--ht-navy); }
#region .wp-block-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--ht-line); }
#region figcaption { font-size: 11px; color: var(--ht-muted); }

/* ---------- testimonials ---------- */
.ht-score { display: flex; align-items: center; gap: 20px; margin: 0; font-family: var(--ht-serif); font-size: clamp(64px, 8vw, 96px); line-height: 1; color: #fff; }
.ht-score > span { font-family: var(--wp--preset--font-family--body); font-size: 12px; line-height: 1.7; color: #C9D3DF; }
.ht-facts { border-block: 1px solid rgba(255, 255, 255, .12); padding-block: 2.4rem; margin-block: 3rem; }
.ht-fact { margin: 0; font-family: var(--ht-serif); font-size: 18px; color: #fff; }
.ht-fact strong { display: block; font-size: 40px; font-weight: 400; line-height: 1.1; }
.ht-fact small { display: block; font-family: var(--wp--preset--font-family--body); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: #9DB8D9; }
.ht-quotes { gap: 20px; }
.ht-quote { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); padding: 28px; }
.ht-quote__text { font-family: var(--ht-serif); font-style: italic; font-size: 19px; line-height: 1.45; color: #fff; }
.ht-quote__who { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9DB8D9; }
.ht-quote__who strong { display: block; letter-spacing: 0; text-transform: none; font-size: 14px; }

/* ---------- CTA + footer ---------- */
.ht-cta { background: #13324F; color: #C9D3DF; padding-block: clamp(56px, 7vw, 88px); }
.ht-cta h2 { color: #fff; }
.ht-cta h2 em { color: #9DB8D9; }
.ht-cta a:not(.wp-element-button) { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.ht-cta__buttons { justify-content: flex-end; }
.ht-cta .wp-block-button:first-child .wp-block-button__link { background: #fff; color: var(--ht-navy); border-color: #fff; }
.ht-cta .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .5); }
.ht-footer { background: var(--ht-navy); color: #A9B6C6; padding-block: 64px 28px; font-size: 13px; }
.ht-footer h4 { color: #fff; font-size: 18px; margin-top: 0; }
.ht-footer a { color: #C9D3DF; }
.ht-footer a:hover { color: #fff; }
.ht-footer__links { list-style: none; padding: 0; line-height: 2; }
.ht-brand--light a, .ht-brand--light strong { color: #fff; }
.ht-brand--light img { background: #fff; }
.ht-footer__bottom { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 11.5px; }
.ht-footer__bottom p { margin: 0; }

/* ---------- BSDimmo plugin pages: keep header/footer full-bleed ---------- */
.bsdimmo-main { padding-block: clamp(40px, 6vw, 80px); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.ht-topbar p.ht-topbar__row { grid-template-columns: 1fr 1fr 1fr; }
	.ht-topbar p.ht-topbar__row > span { display: none; }
	/* core switches to the burger below 600px only; 8 menu items need it up to here */
	.ht-nav .wp-block-navigation__responsive-container-open, .ht-nav .wp-block-navigation__responsive-container-close { display: flex !important; }
	.ht-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (max-width: 781px) {
	:root { --ht-topbar-h: 0px; }
	.ht-topbar { display: none; }
	.admin-bar header.wp-block-template-part { top: 0; }
	.ht-head > .wp-block-column:first-child { padding-top: 0; }
	.ht-head { margin-bottom: 28px; }
	.ht-photo-card__label { left: 12px; bottom: 24px; font-size: 20px; }
	.ht-tile { min-height: 240px; }
	.ht-stats .wp-block-columns { flex-wrap: wrap !important; }
	.ht-stats .wp-block-column { flex-basis: 33% !important; }
	.ht-wizard__options { grid-template-columns: 1fr; }
	.ht-steps { grid-template-columns: 1fr !important; gap: 2rem !important; }
	.ht-cta__buttons { justify-content: flex-start; }
	.ht-voices-head .has-text-align-right { text-align: left; }
	.ht-facts { flex-wrap: wrap !important; }
	.ht-facts .wp-block-column { flex-basis: 45% !important; }
	.ht-marquee img, .ht-marquee__track > .wp-block-image { width: 260px; }
	.ht-marquee img { height: 180px; }
}