/* Dhriti Interiors design system.
   Styles the Bricks elements on the homepage and in the header/footer templates. Every dh- class is also a
   Bricks global class (category "Dhriti"), so it can be picked and extended in the builder. Motion Kit elements
   are themed through their --mkit-* variables. */

:root {
	--dh-bg: #f6f1e9; --dh-bg2: #eee5d7; --dh-card: #fffaf3; --dh-text: #1c1712; --dh-mute: #6f6458; --dh-dim: #9a8e80;
	--dh-line: rgba(28,23,18,.1); --dh-line2: rgba(28,23,18,.18); --dh-tint: rgba(28,23,18,.04);
	--dh-gold: #b8883e; --dh-gold2: #d9b16a; --dh-gold3: #8f6a2c;
	--dh-sage: #7f8f72; --dh-clay: #c27050; --dh-ink: #1c1712;
	--dh-display: 'Syne', system-ui, sans-serif; --dh-serif: 'Instrument Serif', Georgia, serif; --dh-sans: 'Inter', system-ui, sans-serif;
	--dh-ease: cubic-bezier(.2,.8,.2,1); --dh-r: 22px;
	--dh-header: 92px;
	--dh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.11' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	--dh-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	--dh-surface: #f6f1e9; /* the section background, handed to Motion Kit */
}

.dh-dark {
	--dh-bg: #14110e; --dh-bg2: #1c1814; --dh-card: #211c17; --dh-text: #f4efe6; --dh-mute: #a39a8c; --dh-dim: #6d655b;
	--dh-line: rgba(255,255,255,.08); --dh-line2: rgba(255,255,255,.15); --dh-tint: rgba(255,255,255,.04);
	--dh-gold: #d4a85a; --dh-gold2: #f3d79b; --dh-gold3: #9c7433;
	--dh-surface: #14110e;
	background: var(--dh-bg);
	color: var(--dh-text);
}
.dh-alt { background: var(--dh-bg2); --dh-surface: #eee5d7; }

/* Motion Kit sets its own palette on each .mkit root, so the Dhriti tokens are mapped there */
body .mkit { --mkit-accent: var(--dh-gold); --mkit-font-word: var(--dh-display); --mkit-sticky-top: var(--dh-header); --mkit-card-radius: 22px; --mkit-surface: var(--dh-surface); --mkit-text: var(--dh-text); --mkit-muted: var(--dh-mute); --mkit-line: var(--dh-line2); --mkit-chip-bg: var(--dh-card); --mkit-chip-border: var(--dh-line); --mkit-panel: var(--dh-card); }
body .mkit--light { --mkit-accent-soft: var(--dh-clay); }
body .mkit--dark { --mkit-accent-soft: var(--dh-gold2); }
body .mkit :is(h2, h3, h4) { font-family: var(--dh-display); letter-spacing: -.03em; }

/* ---------- base ---------- */
html { font-size: 100%; scroll-behavior: smooth; }
body { background: var(--dh-bg); color: var(--dh-text); font-family: var(--dh-sans); font-size: 1rem; line-height: 1.6; overflow-x: clip; }
body::after { content: ""; position: fixed; inset: 0; background: var(--dh-noise); opacity: .05; pointer-events: none; z-index: 200; mix-blend-mode: multiply; }
/* :where() keeps these resets at zero specificity, so every class below wins over them */
:where(#brx-header, #brx-content, #brx-footer) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote) { margin: 0; }
:where(#brx-header, #brx-content, #brx-footer) a { color: inherit; text-decoration: none; }
:where(#brx-content, #brx-footer) :where(h1, h2, h3) { font-family: var(--dh-display); font-weight: 700; letter-spacing: -.03em; line-height: .98; color: inherit; }
:where(#brx-content) h2 { font-size: clamp(2.3rem, 5.2vw, 4.6rem); }
button { font: inherit; color: inherit; }

.brxe-section.dh-sec { position: relative; display: block; padding: clamp(80px, 10vw, 140px) 0; }
.brxe-container.dh-wrap { display: block; width: min(1280px, 100% - 32px); max-width: none; margin-inline: auto; }

.dh-kicker { display: inline-flex; align-items: center; gap: .7rem; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dh-gold); font-weight: 600; font-family: var(--dh-sans); line-height: 1.4; }
.dh-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.dh-it, .dh-dark .dh-it { font-family: var(--dh-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--dh-gold); }
.dh-dark .dh-it { color: var(--dh-gold2); }
.dh-mute { color: var(--dh-mute); }

.dh-sec-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: end; margin-bottom: clamp(40px, 5.5vw, 68px); }
.dh-sec-head h2 { margin-top: 1rem; }
.dh-sec-head > p, .dh-sec-head > .brxe-text-basic { color: var(--dh-mute); max-width: 46ch; }

/* ---------- buttons (Bricks Button element + widget links) ---------- */
.dh-btn, .bricks-button.dh-btn { position: relative; display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-radius: 999px; border: 0; font-family: var(--dh-sans); font-weight: 500; font-size: .92rem; line-height: 1.2; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: transform .4s var(--dh-ease), translate .25s ease-out, background .3s, color .3s, box-shadow .4s, border-color .3s; }
.dh-btn--ink, .bricks-button.dh-btn--ink { background: var(--dh-ink); color: #f6f1e9; }
.dh-btn--ink:hover, .bricks-button.dh-btn--ink:hover { background: #3a2f26; color: #f6f1e9; }
.dh-btn--gold, .bricks-button.dh-btn--gold { background: linear-gradient(135deg, #f3d79b, #d4a85a); color: var(--dh-ink); box-shadow: 0 10px 30px -12px rgba(184,136,62,.7); }
.dh-btn--line, .bricks-button.dh-btn--line { border: 1px solid var(--dh-line2); background: var(--dh-tint); color: var(--dh-text); }
.dh-btn--line:hover, .bricks-button.dh-btn--line:hover { border-color: var(--dh-gold); color: var(--dh-gold); }
.dh-btn--block, .bricks-button.dh-btn--block { width: 100%; justify-content: center; }
.dh-btn .dh-ic, .bricks-button.dh-btn > i, .bricks-button.dh-btn > svg { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .8rem; background: rgba(255,255,255,.14); transition: transform .4s var(--dh-ease); }
.bricks-button.dh-btn > svg { padding: 7px; fill: currentColor; }
.dh-btn--gold .dh-ic, .dh-btn--line .dh-ic, .bricks-button.dh-btn--gold > i, .bricks-button.dh-btn--line > i { background: rgba(0,0,0,.07); }
.dh-btn:hover .dh-ic, .bricks-button.dh-btn:hover > i { transform: rotate(-45deg); }
.bricks-button.dh-btn--ext > i { rotate: -45deg; } /* the design's ↗ */

/* ---------- reveal (Bricks interaction "Enter viewport" adds .is-in) ---------- */
.bricks-is-frontend .dh-rv { transition: opacity 1s var(--dh-ease), transform 1s var(--dh-ease), filter 1s var(--dh-ease); }
.bricks-is-frontend .dh-rv:not(.is-in) { opacity: 0; transform: translateY(40px); filter: blur(6px); }
.dh-d1 { transition-delay: .08s !important; } .dh-d2 { transition-delay: .16s !important; } .dh-d3 { transition-delay: .24s !important; }

/* ---------- intro, progress, cursor (footer template + dhriti.js) ---------- */
.dh-loader { position: fixed; inset: 0; z-index: 1004; background: #f6f1e9; display: grid; place-items: center; transform: translateY(-100%); visibility: hidden; transition: transform 1s var(--dh-ease) .1s, visibility 0s 1.2s; }
.dh-loading .dh-loader { transform: none; visibility: visible; transition: none; }
.dh-loading body::before { content: ""; position: fixed; inset: 0; background: #f6f1e9; z-index: 1003; }
.dh-loader__yr { font-family: var(--dh-display); font-size: clamp(4rem, 14vw, 11rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; text-align: center; color: #1c1712; }
.dh-loader__yr span { color: #b8883e; }
.dh-loader__bar { width: min(320px, 70vw); height: 1px; background: rgba(28,23,18,.18); margin: 1rem auto 0; position: relative; overflow: hidden; }
.dh-loader__fill { position: absolute; inset: 0; background: #b8883e; transform-origin: left; transform: scaleX(0); }
.dh-loader__sub { display: block; text-align: center; margin-top: 1rem; letter-spacing: .4em; font-size: .7rem; color: #6f6458; }
/* Hold the hero heading until the intro has gone, so its Motion Kit reveal is seen */
.dh-loading .mkit-reveal .mkit-reveal__inner { translate: 0 112% !important; rotate: 0deg !important; transition: none !important; }
.dh-loading .dh-hero-title em::after { clip-path: inset(0 100% 0 0) !important; transition: none !important; }

.dh-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--dh-clay), var(--dh-gold2)); z-index: 1000; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.dh-cur { position: fixed; left: 0; top: 0; width: 38px; height: 38px; border: 1px solid var(--dh-gold); border-radius: 50%; pointer-events: none; z-index: 1001; transition: width .35s var(--dh-ease), height .35s var(--dh-ease), background .3s, border-color .3s; opacity: 0; mix-blend-mode: multiply; }
.dh-cur.is-on { width: 74px; height: 74px; background: rgba(217,177,106,.25); border-color: transparent; }
.dh-cur-dot { position: fixed; left: 0; top: 0; width: 5px; height: 5px; background: var(--dh-gold); border-radius: 50%; pointer-events: none; z-index: 1002; opacity: 0; }

/* ---------- header template ---------- */
#brx-header { background: none; }
#brx-header.brx-sticky { background: none; }
.brxe-section.dh-header { display: block; padding: 14px 0 0; background: none; }
.brxe-container.dh-nav-in { position: relative; isolation: isolate; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; width: min(1280px, 100% - 32px); max-width: none; margin-inline: auto; padding: .5rem .55rem .5rem 1.2rem; border-radius: 999px; }
/* The glass sits on a pseudo-element: a backdrop-filter on the pill itself would trap Bricks' fixed mobile menu inside it */
.brxe-container.dh-nav-in::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,250,243,.72); border: 1px solid var(--dh-line); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 40px -20px rgba(28,23,18,.25); }
/* Brand logo (Bricks Logo element): gold mark in the header, full lock-up in the footer */
.brxe-logo.dh-logo { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.dh-logo .bricks-site-logo { display: block; width: auto; height: 42px; max-width: none; }
/* The bright gold is made for dark grounds; on the cream header pill it gets a deeper tone so it reads */
.dh-header .dh-logo .bricks-site-logo { filter: brightness(.78) saturate(1.25) contrast(1.15) drop-shadow(0 1px 0 rgba(28,23,18,.18)); }
.dh-logo--footer .bricks-site-logo { height: 84px; }
.dh-links .bricks-nav-menu { gap: .15rem; font-size: .86rem; }
.dh-links .bricks-nav-menu > li { margin: 0; }
.dh-links .bricks-nav-menu > li > a { padding: .55rem .85rem; border-radius: 999px; color: var(--dh-mute); line-height: 1.2; transition: color .3s, background .3s; }
.dh-links .bricks-nav-menu > li > a:hover { color: var(--dh-text); background: var(--dh-tint); }
/* Bricks shows the toggle at the mobile breakpoint; this only draws the round pad behind its bars */
.dh-links .bricks-mobile-menu-toggle { margin: 0 12px; color: var(--dh-text); }
.dh-links .bricks-mobile-menu-toggle::after { content: ""; position: absolute; inset: -14px -12px; border-radius: 50%; background: var(--dh-tint); z-index: -1; }
#brx-header .dh-links .bricks-mobile-menu-wrapper { background: var(--dh-bg); width: 100%; justify-content: center; padding: 32px; }
#brx-header .dh-links .bricks-mobile-menu-wrapper::before { background: var(--dh-bg); }
#brx-header .dh-links .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a { font-family: var(--dh-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; color: var(--dh-text); padding: .2rem 0; line-height: 1.25; }
.dh-links .bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a:hover { color: var(--dh-gold); }
.dh-links .bricks-mobile-menu-overlay { background: transparent; }
.dh-nav-r { display: flex; gap: .5rem; align-items: center; }
.dh-nav-r .bricks-button.dh-btn { padding: .7rem 1.1rem; font-size: .85rem; }

/* ---------- hero ---------- */
.brxe-section.dh-hero { padding: calc(var(--dh-header) + 38px) 0 0; overflow: hidden; }
.dh-hero-blob { position: absolute; width: 640px; height: 640px; border-radius: 50%; filter: blur(100px); opacity: .45; pointer-events: none; }
.dh-hero-blob--a { background: #e9c99a; top: -200px; right: -120px; }
.dh-hero-blob--b { background: #c8d1bd; bottom: 0; left: -260px; }
.dh-hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.dh-hero-title.mkit-reveal { font-family: var(--dh-display); font-size: clamp(2.6rem, 5.6vw, 5.4rem); font-weight: 700; letter-spacing: -.03em; line-height: .98; margin: 1.4rem 0 1.6rem; color: var(--dh-text); }
.dh-hero-title strong { font-family: var(--dh-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--dh-gold); }
.dh-hero-title.mkit-reveal em { position: relative; color: inherit; white-space: nowrap; }
/* Lines rise straight up, as in the design (Motion Kit tilts them by default) */
.mkit-js .dh-hero-title.mkit-reveal:not(.is-in) .mkit-reveal__inner { rotate: 0deg; }
/* The hand-drawn clay stroke under "wood workshop.", drawn left to right after the lines are in */
.dh-hero-title em::after { content: ""; position: absolute; left: -4%; bottom: -.1em; width: 108%; height: .32em; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 80 4, 200 4, 296 12' fill='none' stroke='%23c27050' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--dh-ease) 1.2s; }
.dh-hero-title.is-in em::after { clip-path: inset(0 0 0 0); }
.dh-hero-sub { color: var(--dh-mute); font-size: 1.08rem; max-width: 48ch; }
.dh-hero-sub b { color: var(--dh-text); font-weight: 600; }
.dh-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }
.dh-trust { display: flex; align-items: center; gap: 1rem; margin-top: 2.4rem; font-size: .84rem; color: var(--dh-mute); }
.dh-stars { color: var(--dh-gold); letter-spacing: .15em; }
.dh-trust b { color: var(--dh-text); }

.dh-arch-wrap { position: relative; justify-self: center; width: min(470px, 100%); }
.dh-arch-outline { position: absolute; inset: -16px 16px 16px -16px; border: 1px solid var(--dh-gold); border-radius: 400px 400px 30px 30px; opacity: .6; }
.brxe-slider-nested.dh-arch { position: relative; aspect-ratio: 4/5; height: auto; border-radius: 400px 400px 30px 30px; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(60,40,20,.55); transition: translate .3s ease-out; }
.dh-arch .splide__track, .dh-arch .splide__list, .dh-arch .splide__slide { height: 100% !important; }
.dh-arch .splide__slide { position: relative; display: block; padding: 0; }
.dh-arch .splide__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(28,23,18,.55)); pointer-events: none; }
.dh-slide-img, img.dh-slide-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transform: scale(1.12); transition: transform 8s linear; }
.dh-arch .splide__slide.is-active .dh-slide-img { transform: scale(1); }
.dh-arch-cap { position: absolute; left: 24px; right: 130px; bottom: 22px; z-index: 2; color: #fff; font-size: .82rem; line-height: 1.4; }
.dh-arch-cap b { font-family: var(--dh-display); font-size: 1.1rem; display: block; }
.brxe-slider-nested.dh-arch .splide__pagination { position: absolute; left: auto; right: 24px; bottom: 30px; transform: none; padding: 0; margin: 0; gap: .4rem; z-index: 3; width: auto; }
.brxe-slider-nested.dh-arch .splide__pagination li { line-height: 0; margin: 0; }
.brxe-slider-nested.dh-arch .splide__pagination__page { width: 26px; height: 2px; margin: 0; border: 0; border-radius: 0; background: rgba(255,255,255,.4); opacity: 1; transform: none; position: relative; overflow: hidden; }
.brxe-slider-nested.dh-arch .splide__pagination__page.is-active { background: rgba(255,255,255,.4); transform: none; }
.brxe-slider-nested.dh-arch .splide__pagination__page.is-active::after { content: ""; position: absolute; inset: 0; background: #fff; animation: dh-fill 6s linear forwards; }
@keyframes dh-fill { from { transform: translateX(-100%); } to { transform: none; } }

.dh-badge { position: absolute; left: -58px; top: 16%; width: 132px; height: 132px; z-index: 3; }
.dh-badge svg { width: 100%; height: 100%; animation: dh-spin 18s linear infinite; }
.dh-badge text { font-family: var(--dh-display); font-size: 9.6px; letter-spacing: 2.1px; font-weight: 600; fill: #1c1712; text-transform: uppercase; } /* sized so "Since 1951 · Dhriti Interiors · Bengaluru ·" fills the ring once */
.dh-badge-core { position: absolute; inset: 30px; border-radius: 50%; background: var(--dh-ink); color: var(--dh-gold2); display: grid; place-items: center; font-family: var(--dh-serif); font-style: italic; font-size: 1.5rem; line-height: 1; }
@keyframes dh-spin { to { transform: rotate(360deg); } }
.dh-fchip { position: absolute; z-index: 3; display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; background: rgba(255,250,243,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--dh-line); font-size: .78rem; font-weight: 500; line-height: 1.3; box-shadow: 0 14px 30px -14px rgba(28,23,18,.35); animation: dh-bob 6s ease-in-out infinite; transition: translate .3s ease-out; }
.dh-fchip small { display: block; color: var(--dh-mute); font-size: .66rem; font-weight: 400; line-height: 1.1; }
.dh-fchip--1 { right: -34px; top: 12%; }
.dh-fchip--2 { right: -50px; top: 52%; animation-delay: -2s; }
.dh-fchip--3 { left: -40px; top: 46%; animation-delay: -4s; }
@keyframes dh-bob { 50% { transform: translateY(-12px); } }
.dh-sw { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); flex: none; }
.dh-sw--walnut { background: var(--dh-grain) 0 0/200px 200px, linear-gradient(90deg, #5b3a26, #6e472e); }
.dh-sw--marble { background: linear-gradient(100deg, transparent 40%, rgba(140,140,140,.4) 41%, transparent 44%), #f3f1ec; }
.dh-sw--sage { background: linear-gradient(135deg, #9aa892, #7f8f72); }
.dh-tracker { position: absolute; z-index: 3; left: -70px; bottom: 17%; padding: .9rem 1.1rem; border-radius: 18px; background: var(--dh-ink); color: #f6f1e9; font-size: .74rem; width: 210px; line-height: 1.5; box-shadow: 0 20px 40px -18px rgba(0,0,0,.5); }
.dh-tracker b { display: block; font-family: var(--dh-display); font-size: 1rem; }
.dh-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5bd68a; margin-right: .4rem; animation: dh-pls 2s infinite; }
@keyframes dh-pls { 0% { box-shadow: 0 0 0 0 rgba(91,214,138,.6); } 70% { box-shadow: 0 0 0 9px rgba(91,214,138,0); } 100% { box-shadow: 0 0 0 0 rgba(91,214,138,0); } }
.dh-trk { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); margin-top: .5rem; overflow: hidden; }
.dh-trk-fill { height: 100%; width: 72%; background: linear-gradient(90deg, var(--dh-clay), #f3d79b); animation: dh-grow 2.4s var(--dh-ease) both 2s; }
@keyframes dh-grow { from { width: 0; } }

/* Quick consult bar: a label beside a Bricks Form laid out in one row */
.dh-qbar { position: relative; z-index: 4; margin-top: clamp(50px, 6vw, 80px); display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; padding: .6rem; border-radius: 26px; background: var(--dh-card); border: 1px solid var(--dh-line); box-shadow: 0 30px 60px -36px rgba(28,23,18,.4); }
.dh-qbar-lbl { padding: 0 1rem 0 .9rem; font-family: var(--dh-display); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.dh-qbar-lbl small { display: block; font-family: var(--dh-sans); font-weight: 400; font-size: .72rem; color: var(--dh-mute); margin-top: .2rem; }
.brxe-form.dh-qbar-form { display: grid; grid-template-columns: 1fr 1fr .8fr auto; gap: .6rem; align-items: center; }
.brxe-form.dh-qbar-form > .message { grid-column: 1 / -1; }

/* Bricks Form, shared look */
.brxe-form.dh-form { font-size: .95rem; }
.brxe-form.dh-form .form-group { padding: 0; margin: 0; width: 100%; }
.brxe-form.dh-form .form-group > label:not(.form-group-checkbox label) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brxe-form.dh-form input:not([type=checkbox]):not([type=radio]), .brxe-form.dh-form select, .brxe-form.dh-form textarea { width: 100%; height: auto; min-height: 54px; padding: .95rem 1rem; border-radius: 16px; background: var(--dh-bg); border: 1px solid var(--dh-line); outline: none; color: var(--dh-text); font: inherit; line-height: 1.3; transition: border .3s, background .3s; }
.brxe-form.dh-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dh-mute) 50%), linear-gradient(135deg, var(--dh-mute) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.brxe-form.dh-form input::placeholder { color: var(--dh-mute); opacity: 1; }
.brxe-form.dh-form :is(input, select, textarea):focus { border-color: var(--dh-gold); }
.brxe-form.dh-form .submit-button-wrapper { width: auto; }
.brxe-form.dh-form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 1.05rem 1.4rem; border-radius: 999px; background: var(--dh-ink); color: #f6f1e9; border: 0; font-family: var(--dh-sans); font-weight: 500; font-size: .92rem; line-height: 1.2; white-space: nowrap; transition: background .3s, translate .25s ease-out; }
.brxe-form.dh-form button[type=submit]:hover { background: #3a2f26; }
.brxe-form.dh-form button[type=submit]::after { content: "→"; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); transition: transform .4s var(--dh-ease); }
.brxe-form.dh-form button[type=submit]:hover::after { transform: rotate(-45deg); }
.brxe-form.dh-form .message { border-radius: 16px; padding: 1rem; font-weight: 500; text-align: center; }
.brxe-form.dh-form .message.success { background: #e9eee4; color: #3d4a33; }

/* Motion Kit odometer under the hero, drawn as the design's four stat cards */
.dh-stats.mkit { margin-top: 48px; }
.dh-stats .mkit-odo__list { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dh-stats .mkit-odo__item { gap: 0; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--dh-line); background: var(--dh-card); }
.dh-stats .mkit-odo__value { font-family: var(--dh-display); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--dh-text); }
.dh-stats .mkit-odo__affix { font-size: 1em; color: var(--dh-clay); padding-top: 0; margin-inline: 0; letter-spacing: -.04em; white-space: pre; }
.dh-stats .mkit-odo__label { font-size: .8rem; color: var(--dh-mute); line-height: 1.6; }

/* Ink band carrying the Motion Kit marquee: Instrument Serif gold and Syne words, clay ✳ between */
.dh-mq { margin-top: clamp(60px, 8vw, 100px); padding: 1.4rem 0; overflow: hidden; background: var(--dh-ink); transform: rotate(-1.2deg) scale(1.02); }
.dh-mq .mkit { --mkit-surface: #1c1712; --mkit-text: #f6f1e9; --mkit-accent: #d9b16a; --mkit-accent-soft: #f3d79b; --mkit-marquee-size: clamp(1.8rem, 4vw, 3.2rem); }
.dh-mq .mkit-marquee { -webkit-mask-image: none; mask-image: none; }
.dh-mq .mkit-marquee__word { padding-inline: 0; font-family: var(--dh-serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; color: #f3d79b; }
.dh-mq .mkit-marquee--alternate .mkit-marquee__word.is-outline { font-family: var(--dh-display); font-style: normal; font-weight: 700; color: #f6f1e9; -webkit-text-stroke: 0; }
.dh-mq .mkit-marquee__sep { margin-inline: 3.6rem; color: var(--dh-clay); font-family: var(--dh-sans); font-size: calc(var(--size) * .55); }

/* ---------- services bento ---------- */
.dh-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 14px; }
.dh-card { position: relative; border-radius: var(--dh-r); overflow: hidden; isolation: isolate; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
#brx-content .dh-card { color: #fff; }
.dh-card-img, img.dh-card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.4s var(--dh-ease); }
.dh-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,23,18,0) 25%, rgba(28,23,18,.35) 50%, rgba(28,23,18,.88)); }
.dh-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(243,215,155,.28), transparent 45%); opacity: 0; transition: opacity .4s; }
.dh-card:hover::before { opacity: 1; }
.dh-card:hover .dh-card-img { transform: scale(1.07); }
.dh-card > :not(.dh-card-img) { position: relative; z-index: 1; }
.dh-card .dh-card-no { position: absolute; top: 1.3rem; left: 1.5rem; font-family: var(--dh-display); font-size: .8rem; letter-spacing: .1em; padding: .25rem .6rem; border-radius: 999px; background: rgba(255,250,243,.85); color: var(--dh-ink); line-height: 1.4; }
.dh-card .dh-card-go { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,250,243,.9); color: var(--dh-ink); transition: all .45s var(--dh-ease); }
.dh-card:hover .dh-card-go { background: var(--dh-clay); color: #fff; transform: rotate(-45deg); }
.dh-card h3 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.1; }
.dh-card .dh-card-text { font-size: .84rem; color: rgba(255,255,255,.8); margin-top: .4rem; max-height: 0; opacity: 0; overflow: hidden; transition: all .5s var(--dh-ease); }
.dh-card:hover .dh-card-text, .dh-card:focus-within .dh-card-text { max-height: 90px; opacity: 1; }
.dh-card .dh-card-from { font-size: .75rem; color: #f3d79b; margin-top: .5rem; }
.dh-card--w2 { grid-column: span 2; } .dh-card--h2 { grid-row: span 2; } .dh-card--w4 { grid-column: span 4; }
.dh-card--h2 h3 { font-size: 2.3rem; }
.dh-card--h2 .dh-card-text { max-height: 90px; opacity: 1; }
.dh-card--arch { border-radius: 200px 200px var(--dh-r) var(--dh-r); }
.dh-card--arch .dh-card-go { display: none; }
.dh-card--arch .dh-card-no { left: 50%; transform: translateX(-50%); top: 1.6rem; }

/* ---------- style quiz widget ---------- */
.dh-quiz { display: grid; grid-template-columns: .75fr 1.25fr; gap: 24px; align-items: stretch; }
.dh-quiz-side { border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); background: var(--dh-ink); color: #f6f1e9; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 460px; }
.dh-quiz-side::before { content: ""; position: absolute; width: 300px; height: 380px; border-radius: 200px 200px 0 0; border: 1px solid rgba(243,215,155,.25); right: -80px; bottom: -60px; }
.dh-quiz-side::after { content: ""; position: absolute; width: 220px; height: 300px; border-radius: 200px 200px 0 0; background: var(--dh-clay); opacity: .18; right: -20px; bottom: -60px; }
.dh-quiz-side__copy { position: relative; z-index: 1; }
.dh-quiz-side .dh-kicker { color: #f3d79b; }
#brx-content .dh-quiz-side__title { font-family: var(--dh-display); font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 1rem 0; line-height: 1; }
.dh-quiz-side__text { color: #c9bfb1; font-size: .92rem; }
.dh-qsteps { display: flex; gap: 6px; margin-top: 2rem; position: relative; z-index: 1; }
.dh-qsteps i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.dh-qsteps i::after { content: ""; display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--dh-clay), #f3d79b); transition: width .6s var(--dh-ease); }
.dh-qsteps i.is-done::after { width: 100%; }
.dh-quiz-main { border-radius: 28px; padding: clamp(22px, 3vw, 36px); background: var(--dh-card); border: 1px solid var(--dh-line); min-height: 460px; display: flex; flex-direction: column; }
.dh-quiz-q { display: flex; flex-direction: column; flex: 1; }
.dh-quiz-main h4 { font-family: var(--dh-display); font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.dh-quiz-main h4 small { font-family: var(--dh-sans); font-size: .78rem; color: var(--dh-mute); font-weight: 400; white-space: nowrap; }
.dh-qopts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; }
.dh-qopt { position: relative; border: 0; border-radius: 18px; overflow: hidden; min-height: 220px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding: .9rem; color: #fff; isolation: isolate; cursor: pointer; background: none; transition: transform .4s var(--dh-ease), box-shadow .4s; }
.dh-qopt:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(28,23,18,.6); }
.dh-qopt__bg { position: absolute; inset: 0; z-index: -2; }
.dh-qopt__bg img { width: 100%; height: 100%; object-fit: cover; }
.dh-qopt::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(28,23,18,.75)); }
.dh-qopt b { font-family: var(--dh-display); font-size: 1rem; line-height: 1.1; }
.dh-qopt small { font-size: .72rem; opacity: .85; }
.dh-qopt--pal { color: var(--dh-ink); padding: 0; justify-content: stretch; border: 1px solid var(--dh-line); }
.dh-qopt--pal::after { display: none; }
.dh-qopt__strip { flex: 1; display: flex; flex-direction: column; }
.dh-qopt__strip i { flex: 1; }
.dh-qopt--pal b { display: block; padding: .8rem .9rem; background: var(--dh-card); font-size: .9rem; }
.dh-quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; font-size: .82rem; color: var(--dh-mute); }
.dh-quiz-nav button { color: var(--dh-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.dh-result { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; animation: dh-swap .7s var(--dh-ease); }
.dh-result__img { border-radius: 200px 200px 20px 20px; min-height: 320px; overflow: hidden; }
.dh-result__img img { width: 100%; height: 100%; object-fit: cover; }
.dh-result__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.dh-result h5 { font-family: var(--dh-display); font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.03em; line-height: 1; margin: .6rem 0 1rem; }
.dh-result p { color: var(--dh-mute); font-size: .92rem; }
.dh-palette { display: flex; gap: 8px; margin: 1.3rem 0; }
.dh-palette i { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.dh-result p.dh-result__mats { font-size: .84rem; margin-bottom: 1.4rem; color: var(--dh-text); }
.dh-result__mats b { color: var(--dh-gold); }
.dh-swap { animation: dh-swap .6s var(--dh-ease); }
@keyframes dh-swap { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.dh-quiz-fallback { color: var(--dh-mute); }

/* ---------- shop the look (Bricks Tabs Nested) ---------- */
.brxe-tabs-nested.dh-look-tabs { display: block; }
.dh-look-tabs > .tab-menu { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; border: 0; }
.dh-look-tabs > .tab-menu > .tab-title { padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid var(--dh-line2); font-size: .88rem; line-height: 1.2; background: var(--dh-card); cursor: pointer; transition: all .35s; }
.dh-look-tabs > .tab-menu > .tab-title:hover { border-color: var(--dh-gold); }
.dh-look-tabs > .tab-menu > .tab-title.brx-open { background: var(--dh-ink); color: #f6f1e9; border-color: var(--dh-ink); }
.dh-look-tabs > .tab-content { border: 0; padding: 0; }
.dh-look-tabs > .tab-content > .tab-pane { padding: 0; }
.dh-look-tabs > .tab-content > .tab-pane.brx-open { animation: dh-swap .6s var(--dh-ease); }
.dh-look { display: grid; grid-template-columns: 1.45fr .55fr; gap: 14px; width: 100%; }
.dh-look-img { position: relative; border-radius: 28px; aspect-ratio: 16/11; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
.dh-look-photo, img.dh-look-photo { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; border-radius: 28px; }
.brxe-div.dh-hs { position: absolute; z-index: 2; transform: translate(-50%, -50%); outline: none; }
.dh-hs-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,250,243,.92); display: grid; place-items: center; font-size: 1rem; font-weight: 600; line-height: 1; color: var(--dh-ink); cursor: pointer; box-shadow: 0 0 0 0 rgba(255,250,243,.6); animation: dh-hsp 2.2s infinite; transition: transform .3s, background .3s, color .3s; }
@keyframes dh-hsp { 70% { box-shadow: 0 0 0 14px rgba(255,250,243,0); } 100% { box-shadow: 0 0 0 0 rgba(255,250,243,0); } }
.dh-tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 8px); width: 220px; max-width: none;padding: .9rem 1rem; border-radius: 16px; background: var(--dh-card); color: var(--dh-text); box-shadow: 0 20px 40px -18px rgba(28,23,18,.5); font-size: .78rem; line-height: 1.45; opacity: 0; pointer-events: none; transition: all .35s var(--dh-ease); }
.dh-tip b { display: block; font-family: var(--dh-display); font-size: 1rem; }
.dh-tip em { font-style: normal; color: var(--dh-clay); font-weight: 600; }
.dh-hs--flip .dh-tip { bottom: auto; top: calc(100% + 12px); }
/* One hotspot is "on" at a time: the hovered or focused one, the one matching the hovered list row, or the first */
.dh-look .dh-hs:is(:hover, :focus-within),
.dh-look:has(.dh-li--1:hover) .dh-hs--1, .dh-look:has(.dh-li--2:hover) .dh-hs--2, .dh-look:has(.dh-li--3:hover) .dh-hs--3,
.dh-look:not(:has(.dh-hs:hover, .dh-hs:focus-within, .dh-li:hover)) .dh-hs--1 { z-index: 3; }
.dh-look .dh-hs:is(:hover, :focus-within) .dh-hs-btn,
.dh-look:has(.dh-li--1:hover) .dh-hs--1 .dh-hs-btn, .dh-look:has(.dh-li--2:hover) .dh-hs--2 .dh-hs-btn, .dh-look:has(.dh-li--3:hover) .dh-hs--3 .dh-hs-btn,
.dh-look:not(:has(.dh-hs:hover, .dh-hs:focus-within, .dh-li:hover)) .dh-hs--1 .dh-hs-btn { background: var(--dh-clay); color: #fff; transform: scale(1.15) rotate(45deg); }
.dh-look .dh-hs:is(:hover, :focus-within) .dh-tip,
.dh-look:has(.dh-li--1:hover) .dh-hs--1 .dh-tip, .dh-look:has(.dh-li--2:hover) .dh-hs--2 .dh-tip, .dh-look:has(.dh-li--3:hover) .dh-hs--3 .dh-tip,
.dh-look:not(:has(.dh-hs:hover, .dh-hs:focus-within, .dh-li:hover)) .dh-hs--1 .dh-tip { opacity: 1; transform: translate(-50%, 0); }
.dh-look-list { border-radius: 28px; background: var(--dh-card); border: 1px solid var(--dh-line); padding: 1.6rem; display: flex; flex-direction: column; }
#brx-content .dh-look-list h3 { font-size: 1.8rem; margin: .6rem 0 .4rem; }
.dh-look-list > p { color: var(--dh-mute); font-size: .86rem; margin-bottom: 1rem; }
.dh-li { display: flex; gap: .8rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--dh-line); cursor: default; transition: padding .3s; line-height: 1.3; }
.dh-li-n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .78rem; font-weight: 600; background: var(--dh-bg2); transition: background .3s, color .3s; }
.dh-li b { font-size: .9rem; font-weight: 600; display: block; line-height: 1.2; }
.dh-li small { color: var(--dh-mute); font-size: .76rem; }
.dh-look .dh-li:hover,
.dh-look:has(.dh-hs--1:is(:hover, :focus-within)) .dh-li--1, .dh-look:has(.dh-hs--2:is(:hover, :focus-within)) .dh-li--2, .dh-look:has(.dh-hs--3:is(:hover, :focus-within)) .dh-li--3,
.dh-look:not(:has(.dh-hs:hover, .dh-hs:focus-within, .dh-li:hover)) .dh-li--1 { padding-left: .4rem; }
.dh-look .dh-li:hover .dh-li-n,
.dh-look:has(.dh-hs--1:is(:hover, :focus-within)) .dh-li--1 .dh-li-n, .dh-look:has(.dh-hs--2:is(:hover, :focus-within)) .dh-li--2 .dh-li-n, .dh-look:has(.dh-hs--3:is(:hover, :focus-within)) .dh-li--3 .dh-li-n,
.dh-look:not(:has(.dh-hs:hover, .dh-hs:focus-within, .dh-li:hover)) .dh-li--1 .dh-li-n { background: var(--dh-clay); color: #fff; }
.dh-price { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--dh-line); display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; line-height: 1.2; }
.dh-price b { font-family: var(--dh-display); font-size: 1.6rem; letter-spacing: -.03em; display: block; }
.dh-price small { display: block; color: var(--dh-mute); font-size: .72rem; }

/* ---------- kitchen studio widget ---------- */
.dh-studio { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
.dh-scene { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 16/11; background: #e9e1d4; }
.dh-scene__wall { position: absolute; inset: 0 0 18% 0; background: var(--wall, #e7dfd2); transition: background .8s, filter .8s; }
.dh-scene__wall::after { content: ""; position: absolute; inset: 0; background: var(--dh-noise); opacity: .18; mix-blend-mode: multiply; }
.dh-scene__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, #b9a68e, #a18c72); transition: filter .8s; }
.dh-scene__floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 110px, rgba(0,0,0,.08) 110px 111px); }
.dh-k-up, .dh-k-lo { position: absolute; left: 7%; right: 7%; display: grid; grid-template-columns: 1fr 1fr 1.15fr 1fr 1fr; gap: 5px; }
.dh-k-up { top: 9%; height: 27%; } .dh-k-lo { top: 56%; height: 23%; }
.dh-sh { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.35); transition: background .7s var(--dh-ease), filter .8s; }
.dh-sh::after { content: ""; position: absolute; width: 30%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #b28a4a, #e8c98a, #b28a4a); left: 35%; }
.dh-k-up .dh-sh::after { bottom: 9%; } .dh-k-lo .dh-sh::after { top: 9%; }
.dh-sh--drw { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 4px; background: none !important; box-shadow: none; }
.dh-sh--drw::after { display: none; }
.dh-sh--drw i { position: relative; border-radius: 3px; background: var(--lo-bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.35); transition: background .7s, filter .8s; }
.dh-sh--drw i::after { content: ""; position: absolute; width: 30%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #b28a4a, #e8c98a, #b28a4a); left: 35%; top: 30%; }
.dh-hood { position: relative; }
.dh-hood::before { content: ""; position: absolute; left: 28%; right: 28%; top: 0; height: 55%; background: linear-gradient(90deg, #9ea3a6, #e3e6e8 45%, #a7acaf); }
.dh-hood::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 45%; background: linear-gradient(180deg, #d7dadc, #9aa0a3); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.dh-sh--oven { background: linear-gradient(180deg, #1d1d1f, #2c2c2f) !important; }
.dh-sh--oven::after { width: 70%; left: 15%; top: 12% !important; background: #666; }
.dh-sh--oven::before { content: ""; position: absolute; left: 12%; right: 12%; top: 28%; bottom: 14%; border-radius: 4px; background: linear-gradient(135deg, #0d0d0f, #26262a); box-shadow: inset 0 0 0 1px #3a3a3e; }
.dh-scene__splash { position: absolute; left: 7%; right: 7%; top: 36%; height: 17.5%; background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(0,0,0,.06) 22px 23px), repeating-linear-gradient(90deg, var(--splash, #f3efe8) 0 44px, rgba(0,0,0,.06) 44px 45px); transition: background .6s, filter .8s; }
.dh-scene__glow { position: absolute; left: 7%; right: 7%; top: 36%; height: 18%; background: radial-gradient(60% 100% at 50% 0%, rgba(255,196,110,.75), transparent 70%); opacity: 0; transition: opacity .8s; mix-blend-mode: screen; }
.dh-scene__counter { position: absolute; left: 6%; right: 6%; top: 53%; height: 3.2%; border-radius: 2px; background: var(--ctop); box-shadow: 0 4px 8px -2px rgba(0,0,0,.35); transition: background .6s; }
.dh-scene__plinth { position: absolute; left: 7%; right: 7%; top: 79%; height: 3%; background: #1d1a17; }
.dh-scene.is-night .dh-scene__wall { filter: brightness(.42); } .dh-scene.is-night .dh-scene__floor { filter: brightness(.45); }
.dh-scene.is-night :is(.dh-sh, .dh-sh--drw i, .dh-scene__splash) { filter: brightness(.72); }
.dh-scene.is-night .dh-scene__glow { opacity: 1; }
.dh-scene__plant { position: absolute; right: 8.5%; top: 46%; width: 5%; height: 7%; }
.dh-scene__plant::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 45%; background: #efe9df; border-radius: 2px 2px 5px 5px; }
.dh-scene__plant::after { content: ""; position: absolute; left: 0; right: 0; bottom: 40%; height: 90%; background: radial-gradient(circle at 30% 60%, #4f6b45 0 30%, transparent 31%), radial-gradient(circle at 65% 40%, #5d7c51 0 32%, transparent 33%), radial-gradient(circle at 50% 75%, #3f5a37 0 30%, transparent 31%); }
.dh-scene__hud { position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; justify-content: space-between; align-items: end; gap: 1rem; z-index: 2; }
.dh-hud-card { background: rgba(255,255,255,.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 16px; padding: .8rem 1rem; font-size: .78rem; line-height: 1.4; color: #544b42; }
.dh-hud-card b { display: block; color: #1c1712; font-family: var(--dh-display); font-size: 1rem; }
.dh-toggle { display: flex; background: rgba(21,18,15,.8); border-radius: 999px; padding: 4px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dh-toggle button { padding: .5rem .9rem; border-radius: 999px; border: 0; background: none; cursor: pointer; font-size: .78rem; color: #cfc6b9; transition: all .3s; }
.dh-toggle button.is-on { background: #f3d79b; color: #1c1712; }
.dh-panel { background: var(--dh-card); border: 1px solid var(--dh-line); border-radius: 28px; padding: 1.6rem; display: flex; flex-direction: column; gap: 1.4rem; }
.dh-panel h4 { font-family: var(--dh-display); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dh-mute); font-weight: 600; line-height: 1.4; margin-bottom: .7rem; display: flex; justify-content: space-between; gap: .5rem; }
.dh-panel h4 em { font-style: normal; color: var(--dh-text); letter-spacing: 0; text-transform: none; font-family: var(--dh-sans); font-weight: 500; text-align: right; }
.dh-seg { display: flex; background: var(--dh-tint); border-radius: 999px; padding: 4px; }
.dh-seg button { flex: 1; padding: .55rem; border-radius: 999px; border: 0; background: none; cursor: pointer; font-size: .82rem; color: var(--dh-mute); transition: all .3s; }
.dh-seg button.is-on { background: var(--dh-gold2); color: #1c1712; }
.dh-sws { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dh-sws button { aspect-ratio: 1; border-radius: 12px; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .3s var(--dh-ease); }
.dh-sws button:hover { transform: translateY(-3px) scale(1.04); }
.dh-sws button.is-on { box-shadow: 0 0 0 2px var(--dh-card), 0 0 0 4px var(--dh-gold2); }
.dh-sws--sm { grid-template-columns: repeat(4, 1fr); }
.dh-sws--sm button { aspect-ratio: 2/1; }
.dh-panel .dh-btn { justify-content: center; }
.dh-note { font-size: .75rem; color: var(--dh-dim); text-align: center; }

/* ---------- before / after (Motion Kit) ---------- */
.dh-ba-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.dh-ba-wrap h2 { margin-top: 1rem; }
.dh-ba-wrap .dh-ba-copy { margin-top: 1.2rem; max-width: 46ch; color: var(--dh-mute); }
.dh-checks { margin-top: 2rem; display: grid; gap: .8rem; }
.dh-check { display: flex; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--dh-line); background: var(--dh-card); line-height: 1.45; }
.dh-check-i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #e9eee4; color: var(--dh-sage); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.dh-check b { font-weight: 600; }
.dh-check span { display: block; color: var(--dh-mute); font-size: .86rem; }
.dh-ba.mkit { --mkit-card-radius: 28px; }
.dh-ba .mkit-ba__frame { box-shadow: 0 40px 80px -45px rgba(28,23,18,.6); }
.dh-ba .mkit-ba__handle { box-shadow: none; }
.dh-ba .mkit-ba__knob { width: 56px; height: 56px; color: var(--dh-ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.dh-ba .mkit-ba__label { top: 16px; padding: .4rem .85rem; font-family: var(--dh-sans); font-size: .7rem; font-weight: 400; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; border-radius: 999px; background: rgba(255,250,243,.9); color: var(--dh-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dh-ba .mkit-ba__label--before { left: 16px; }
.dh-ba .mkit-ba__label--after { right: 16px; }
.dh-ba .mkit-ba__layer--before img { filter: grayscale(1) contrast(.8) brightness(1.2) sepia(.2); }
.dh-ba .mkit-ba__layer--before::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(60,120,200,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(60,120,200,.2) 1px, transparent 1px); background-size: 40px 40px; }

/* ---------- cost estimator widget ---------- */
.dh-est { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.dh-est-form, .dh-est-out { border-radius: 28px; padding: clamp(24px, 3.5vw, 44px); }
.dh-est-form { background: var(--dh-card); border: 1px solid var(--dh-line); }
.dh-est-q { margin-bottom: 2rem; }
.dh-est-q:last-child { margin-bottom: 0; }
.dh-est-q__label { font-weight: 600; margin-bottom: .9rem !important; font-size: .95rem; }
.dh-est-q__label span { color: var(--dh-dim); font-size: .82rem; margin-left: .4rem; font-weight: 400; }
.dh-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.dh-opt { padding: .75rem 1.15rem; border: 1px solid var(--dh-line2); border-radius: 14px; font-size: .88rem; line-height: 1.3; cursor: pointer; color: var(--dh-text); transition: all .3s; background: var(--dh-bg); }
.dh-opt:hover { border-color: var(--dh-gold); }
.dh-opt.is-sel { background: var(--dh-ink); color: #f6f1e9; border-color: var(--dh-ink); }
.dh-opts--pkg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.dh-opts--pkg .dh-opt { text-align: left; padding: 1rem; }
.dh-opts--pkg .dh-opt b { display: block; font-family: var(--dh-display); font-size: 1.15rem; font-weight: 600; }
.dh-opts--pkg .dh-opt small { opacity: .7; font-size: .74rem; }
.dh-est-out { background: radial-gradient(120% 80% at 100% 0%, rgba(194,112,80,.35), transparent 60%), #1c1712; color: #f6f1e9; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; }
.dh-est-out::before { content: ""; position: absolute; width: 300px; height: 380px; border-radius: 200px 200px 0 0; border: 1px solid rgba(243,215,155,.18); right: -110px; top: -60px; }
.dh-est-out > * { position: relative; }
.dh-est-out .dh-kicker { color: #f3d79b; }
.dh-est-amt { font-family: var(--dh-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 1.2rem 0 .3rem; }
.dh-est-amt small { display: block; font-family: var(--dh-sans); font-size: .78rem; font-weight: 400; letter-spacing: 0; color: #f3d79b; margin-top: .8rem; }
.dh-est-break { list-style: none; margin: 1.8rem 0 0 !important; padding: 0; display: grid; gap: .65rem; font-size: .86rem; }
.dh-est-break li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; color: #c9bfb1; }
.dh-est-break li b { color: #fff; font-weight: 500; }
.dh-est-break li i { grid-column: span 2; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.dh-est-break li i::after { content: ""; display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--dh-clay), #f3d79b); transition: width .6s var(--dh-ease); }
.dh-est-note { font-size: .72rem; color: #8a8073; margin-top: 1rem; }

/* ---------- process steps (dhriti.js lights them in turn, then follows hover) ---------- */
.dh-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.dh-step { position: relative; padding: 1.6rem 1.4rem; border-radius: 22px; border: 1px solid var(--dh-line); background: var(--dh-card); cursor: pointer; transition: all .5s var(--dh-ease); overflow: hidden; }
.dh-step::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--dh-clay), var(--dh-gold2)); transition: width .8s var(--dh-ease); }
.dh-step.is-on::before { width: 100%; }
.dh-step.is-on { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(28,23,18,.45); }
.dh-step-n { font-family: var(--dh-display); font-size: 3.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; -webkit-text-stroke: 1px var(--dh-line2); color: transparent; transition: all .5s; }
.dh-step.is-on .dh-step-n { color: var(--dh-clay); -webkit-text-stroke: 0; }
#brx-content .dh-step h4 { font-family: var(--dh-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 1.3rem 0 .4rem; }
.dh-step > p { font-size: .84rem; color: var(--dh-mute); }
.dh-step-tag { display: inline-block; margin-top: 1rem; font-size: .68rem; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: var(--dh-sage); padding: .3rem .65rem; border: 1px solid rgba(127,143,114,.4); border-radius: 999px; font-weight: 600; }

/* ---------- workshop (dark) ---------- */
.brxe-section.dh-legacy { overflow: hidden; }
.dh-yr-stack { display: grid; margin-top: 1rem; }
.dh-yr-stack > * { grid-area: 1 / 1; }
#brx-content .dh-yr-big { font-family: var(--dh-display); font-weight: 800; font-size: clamp(7rem, 26vw, 24rem); letter-spacing: -.07em; line-height: .8; -webkit-text-stroke: 1.5px rgba(212,168,90,.5); color: transparent; white-space: nowrap; user-select: none; }
.dh-yr-fill span { background: linear-gradient(180deg, #f3d79b, #9c7433); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; display: inline-block; clip-path: inset(100% 0 0 0); }
.dh-ws { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 3rem; }
.dh-ws-copy { border-radius: 28px; border: 1px solid var(--dh-line); background: var(--dh-bg2); padding: clamp(24px, 3.5vw, 44px); }
#brx-content .dh-ws-copy h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 1rem 0; }
.dh-ws-copy > p { color: var(--dh-mute); }
.dh-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.8rem 0; }
.dh-pillar { padding: 1.1rem; border-radius: 16px; border: 1px solid var(--dh-line); background: var(--dh-tint); line-height: 1.6; }
.dh-pillar b { font-family: var(--dh-display); color: var(--dh-gold2); font-weight: 600; display: block; }
.dh-pillar span { font-size: .8rem; color: var(--dh-mute); }

/* Anatomy of a cabinet: 3D stack of six layers. Hovering (or focusing) a legend button lifts its layer and dims the rest;
   the Bricks "Enter viewport" interaction adds .is-open, which spreads the layers apart; dhriti.js tilts the stack with the mouse. */
.dh-stage { position: relative; border-radius: 28px; border: 1px solid var(--dh-line); background: radial-gradient(circle at 50% 45%, rgba(212,168,90,.18), transparent 55%), var(--dh-bg2); perspective: 1800px; display: grid; place-items: center; min-height: 560px; overflow: hidden; }
.dh-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--dh-line) 1px, transparent 1px), linear-gradient(90deg, var(--dh-line) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
.dh-stack { --gap: 12px; position: relative; width: min(320px, 60vw); aspect-ratio: 3/2; transform-style: preserve-3d; transform: rotateX(var(--rx, 58deg)) rotateZ(var(--rz, -36deg)); transition: transform .25s ease-out; margin-bottom: 60px; }
.dh-stage.is-open .dh-stack { --gap: 40px; }
.dh-stack-shadow { position: absolute; inset: 8%; background: rgba(0,0,0,.7); filter: blur(30px); transform: translateZ(-40px); }
.dh-layer { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap))); transition: transform .8s var(--dh-ease), filter .4s; border-radius: 4px; }
.dh-face { position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.dh-e1, .dh-e2 { position: absolute; background: var(--edge, #c9a272); }
.dh-e1 { left: 0; bottom: 0; width: 100%; height: var(--t, 10px); transform-origin: bottom; transform: rotateX(90deg); }
.dh-e2 { right: 0; top: 0; width: var(--t, 10px); height: 100%; transform-origin: right; transform: rotateY(-90deg); }
.dh-layer--1 { --i: 5; --t: 3px; --edge: #0f1718; }
.dh-layer--2 { --i: 4; --t: 2px; --edge: #4d311f; }
.dh-layer--3 { --i: 3; --t: 16px; --edge: repeating-linear-gradient(0deg, #e2c597 0 2px, #9b7145 2px 3px); }
.dh-layer--4 { --i: 2; --t: 16px; --edge: repeating-linear-gradient(90deg, #c39a66 0 8px, #94693d 8px 9px); }
.dh-layer--5 { --i: 1; --t: 8px; --edge: #6e4f31; }
.dh-layer--6 { --i: 0; --t: 4px; --edge: #7d8284; }
.dh-layer--1 .dh-face { background: linear-gradient(125deg, rgba(255,255,255,.2), transparent 35%, transparent 60%, rgba(255,255,255,.08)), linear-gradient(135deg, #1e2a2c, #0f1718); }
.dh-layer--2 .dh-face { background: var(--dh-grain) 0 0/420px 420px, linear-gradient(90deg, #5b3a26, #6b452d 40%, #4d311f); }
.dh-layer--3 .dh-face { background: var(--dh-grain) 0 0/420px 420px, linear-gradient(90deg, #e3c79a, #d4b07d 50%, #e0c08f); }
.dh-layer--4 .dh-face { background: var(--dh-grain) 0 0/420px 420px, repeating-linear-gradient(90deg, #c39a66 0 30px, #9d7446 30px 32px, #b78d58 32px 60px, #94693d 60px 62px); }
.dh-layer--5 .dh-face { background: var(--dh-noise), linear-gradient(135deg, #8c6846, #755535); }
.dh-layer--6 .dh-face { background: linear-gradient(135deg, #d8dadb, #8f9496); }
.dh-stage:has(.dh-leg:is(:hover, :focus)) .dh-layer { filter: brightness(.45) saturate(.6); }
.dh-stage:has(.dh-leg--1:is(:hover, :focus)) .dh-layer--1, .dh-stage:has(.dh-leg--2:is(:hover, :focus)) .dh-layer--2, .dh-stage:has(.dh-leg--3:is(:hover, :focus)) .dh-layer--3,
.dh-stage:has(.dh-leg--4:is(:hover, :focus)) .dh-layer--4, .dh-stage:has(.dh-leg--5:is(:hover, :focus)) .dh-layer--5, .dh-stage:has(.dh-leg--6:is(:hover, :focus)) .dh-layer--6 { transform: translateZ(calc(var(--i) * var(--gap) + 46px)); filter: brightness(1.15); }
.dh-stage:has(.dh-leg--1:is(:hover, :focus)) .dh-layer--1 .dh-face, .dh-stage:has(.dh-leg--2:is(:hover, :focus)) .dh-layer--2 .dh-face, .dh-stage:has(.dh-leg--3:is(:hover, :focus)) .dh-layer--3 .dh-face,
.dh-stage:has(.dh-leg--4:is(:hover, :focus)) .dh-layer--4 .dh-face, .dh-stage:has(.dh-leg--5:is(:hover, :focus)) .dh-layer--5 .dh-face, .dh-stage:has(.dh-leg--6:is(:hover, :focus)) .dh-layer--6 .dh-face { box-shadow: 0 0 0 2px #f3d79b, 0 0 60px rgba(243,215,155,.35); }
.dh-stage-tag { position: absolute; left: 22px; top: 22px; font-size: .72rem; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--dh-mute); z-index: 3; }
.dh-stage-tag b { color: var(--dh-gold2); font-weight: 500; }
.dh-legend { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; font-size: .76rem; z-index: 3; }
.dh-leg { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; background: rgba(20,17,14,.7); border: 1px solid var(--dh-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--dh-text); font: inherit; line-height: 1.4; text-align: left; cursor: pointer; transition: all .3s; outline: none; }
.dh-leg:is(:hover, :focus) { border-color: var(--dh-gold); color: var(--dh-gold2); }
.dh-leg-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.dh-leg-size { color: var(--dh-dim); margin-left: auto; padding-left: .5rem; }
.dh-leg--1 .dh-leg-dot { background: linear-gradient(135deg, #2c3c3f, #0f1718); }
.dh-leg--2 .dh-leg-dot { background: #5b3a26; }
.dh-leg--3 .dh-leg-dot { background: #d9b88a; }
.dh-leg--4 .dh-leg-dot { background: #b78d58; }
.dh-leg--5 .dh-leg-dot { background: #80603f; }
.dh-leg--6 .dh-leg-dot { background: #b9bdbf; }

/* ---------- projects: filters, masonry gallery, Bricks lightbox ---------- */
.dh-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.dh-filter { padding: .55rem 1.1rem; border-radius: 999px; font-size: .84rem; line-height: 1.4; border: 1px solid var(--dh-line2); transition: all .3s; background: var(--dh-card); color: var(--dh-text); cursor: pointer; }
.dh-filter.is-on, .dh-filter:hover { background: var(--dh-ink); color: #f6f1e9; border-color: var(--dh-ink); }
.dh-gallery { columns: 3; column-gap: 14px; }
.dh-g-item { break-inside: avoid; margin-bottom: 14px; border-radius: 22px; overflow: hidden; position: relative; cursor: zoom-in; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
.dh-g-item.is-hide { display: none; }
.dh-g-item a { display: block; cursor: zoom-in; }
.dh-g-item img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 1.4s var(--dh-ease); }
.dh-g-item:nth-child(3n+1) img { aspect-ratio: 4/5; }
.dh-g-item:nth-child(3n+2) img { aspect-ratio: 4/3; }
.dh-g-item:nth-child(3n) img { aspect-ratio: 1; }
.dh-g-item:nth-child(4n+1) { border-radius: 220px 220px 22px 22px; }
.dh-g-item:hover img { transform: scale(1.06); }
.dh-g-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,250,243,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); line-height: 1.45; transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .45s var(--dh-ease); }
.dh-g-item:hover .dh-g-cap { transform: none; opacity: 1; }
.dh-g-cap b { font-family: var(--dh-display); font-size: 1.05rem; display: block; }
.dh-g-cap span { font-size: .76rem; color: var(--dh-clay); font-weight: 500; }
/* Bricks lightbox (PhotoSwipe) in the design's colours */
.pswp { --pswp-bg: #14110e; --pswp-placeholder-bg: #14110e; --pswp-icon-color: #f3d79b; }
.pswp__dynamic-caption { font-family: var(--dh-display); font-size: 1.2rem; color: #f6f1e9; text-align: center; }

/* ---------- client stories ---------- */
.dh-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dh-voice { border-radius: var(--dh-r); background: var(--dh-card); border: 1px solid var(--dh-line); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: 300px; transition: transform .5s var(--dh-ease), box-shadow .5s, opacity 1s var(--dh-ease), filter 1s var(--dh-ease); }
.dh-voice:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(28,23,18,.5); }
.dh-voice--sage { background: var(--dh-sage); color: #fff; border-color: transparent; }
.dh-voice .dh-stars { letter-spacing: .2em; font-size: .85rem; }
.dh-voice--sage .dh-stars, .dh-voice--sage .dh-who span { color: #eef1ea; }
.dh-voice-q { font-family: var(--dh-serif); font-size: 1.55rem; line-height: 1.25; margin-top: .8rem; }
.dh-who { display: flex; gap: .8rem; align-items: center; font-size: .85rem; line-height: 1.35; }
.dh-who-i { width: 44px; height: 44px; border-radius: 22px 22px 8px 8px; flex: none; display: grid; place-items: center; font-family: var(--dh-display); font-weight: 700; color: var(--dh-ink); background: linear-gradient(135deg, #f3d79b, #d4a85a); }
.dh-who span { color: var(--dh-mute); display: block; font-size: .78rem; }

/* ---------- FAQ (Bricks Accordion Nested) ---------- */
.dh-faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; }
.dh-faq-wrap h2 { margin-top: 1rem; }
.dh-faq-wrap .dh-faq-intro { margin-top: 1.2rem; color: var(--dh-mute); }
.dh-faq > .brxe-block { border-bottom: 1px solid var(--dh-line); }
.dh-faq .accordion-title-wrapper { padding: 1.5rem 0; gap: 1rem; cursor: pointer; }
#brx-content .dh-faq .accordion-title-wrapper h3 { font-family: var(--dh-display); font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.dh-faq .accordion-title-wrapper .brxe-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--dh-line2); display: grid; place-items: center; font-size: .9rem; transition: transform .4s var(--dh-ease), background .3s, color .3s, border-color .3s; }
.dh-faq .brx-open > .accordion-title-wrapper .brxe-icon { transform: rotate(45deg); background: var(--dh-clay); color: #fff; border-color: var(--dh-clay); }
.dh-faq .accordion-content-wrapper { padding: 0 0 1.5rem; }
.dh-faq .accordion-content-wrapper p { color: var(--dh-mute); max-width: 62ch; }

/* ---------- consultation ---------- */
.brxe-section.dh-consult { padding-top: 0; }
.dh-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dh-cta-img { position: relative; border-radius: 240px 240px 28px 28px; overflow: hidden; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: clamp(24px, 3.5vw, 40px); color: #fff; isolation: isolate; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
.dh-cta-photo, img.dh-cta-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100% !important; object-fit: cover; }
.dh-cta-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,23,18,.1), rgba(28,23,18,.25) 40%, rgba(28,23,18,.9)); }
#brx-content .dh-cta-img h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 1rem 0 1.4rem; max-width: 14ch; color: #fff; }
.dh-cta-img .dh-it, .dh-cta-img .dh-kicker { color: #f3d79b; }
.dh-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.dh-info > * { padding: .9rem 1rem; border-radius: 16px; font-size: .8rem; line-height: 1.45; color: #e7dccb; background: rgba(28,23,18,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); }
.dh-info b { display: block; color: #fff; font-weight: 500; margin-bottom: .15rem; }
.dh-quote { border-radius: 28px; background: var(--dh-card); border: 1px solid var(--dh-line); padding: clamp(24px, 3.5vw, 42px); }
#brx-content .dh-quote h3 { font-size: 2rem; letter-spacing: -.03em; margin-top: .8rem; }
.dh-quote > p { color: var(--dh-mute); font-size: .9rem; margin: .4rem 0 1.6rem; }
.brxe-form.dh-quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.brxe-form.dh-quote-form > .form-group:is(:has(input[type=checkbox]), :has(input[name$="dhnote"])), .brxe-form.dh-quote-form > .submit-button-wrapper, .brxe-form.dh-quote-form > .message { grid-column: 1 / -1; }
.brxe-form.dh-quote-form .submit-button-wrapper button { width: 100%; }
.brxe-form.dh-quote-form .form-group:has(input[type=checkbox]) > label { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: .8rem; color: var(--dh-mute); margin: .5rem 0 .6rem; display: block; }
.brxe-form.dh-quote-form ul.options-wrapper { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.brxe-form.dh-quote-form ul.options-wrapper li { margin: 0; }
.brxe-form.dh-quote-form ul.options-wrapper input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brxe-form.dh-quote-form ul.options-wrapper label { display: inline-block; padding: .45rem .9rem; border-radius: 999px; font-size: .8rem; line-height: 1.3; border: 1px solid var(--dh-line2); cursor: pointer; transition: all .3s; margin: 0; }
.brxe-form.dh-quote-form ul.options-wrapper input:checked + label { background: var(--dh-ink); color: #f6f1e9; border-color: var(--dh-ink); }
.brxe-form.dh-quote-form ul.options-wrapper input:focus-visible + label { outline: 2px solid var(--dh-gold); outline-offset: 2px; }

/* ---------- footer template (dark) ---------- */
.brxe-section.dh-footer { display: block; padding: 80px 0 28px; overflow: hidden; }
.dh-f-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.dh-f-about { margin-top: 1.2rem; font-size: .9rem; max-width: 36ch; color: var(--dh-mute); }
.dh-sister { margin-top: 1.3rem; padding: 1rem 1.1rem; border: 1px solid rgba(212,168,90,.25); border-radius: 16px; font-size: .84rem; color: var(--dh-mute); }
.dh-sister b { color: var(--dh-gold2); }
.dh-sister a { text-decoration: underline !important; }
#brx-footer .dh-f-col h5 { font-family: var(--dh-sans); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dh-gold); margin-bottom: 1.1rem; font-weight: 500; }
#brx-footer .dh-f-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .9rem; color: var(--dh-mute); }
#brx-footer .dh-f-col li { margin: 0; }
#brx-footer .dh-f-col a:hover { color: var(--dh-text); }
.dh-f-word.mkit { margin: 60px 0 20px; --mkit-accent: #f3d79b; --mkit-accent-soft: #d4a85a; --mkit-text: rgba(243,215,155,.4); }
.dh-f-word .mkit-wordmark__word { font-family: var(--dh-display); font-weight: 800; letter-spacing: -.06em; }
/* The design's soft gold that fades out downwards, instead of Motion Kit's sideways gradient */
.dh-f-word .mkit-wordmark__letters > span { background: linear-gradient(180deg, rgba(243,215,155,.35), rgba(243,215,155,0)) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }
.dh-f-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--dh-dim); border-top: 1px solid var(--dh-line); padding-top: 24px; }

.dh-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.dh-fab > a { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(0,0,0,.4); transition: transform .3s; color: #fff; }
.dh-fab > a > i { font-size: 1.4rem; line-height: 1; }
.dh-fab-wa > i { font-size: 1.75rem !important; }
.dh-fab > a:hover { transform: scale(1.08); }
.dh-fab-wa { background: #25d366; }
.dh-fab-cl { background: var(--dh-ink); font-size: 1.3rem; line-height: 1;box-shadow: 0 0 0 1px rgba(243,215,155,.3), 0 12px 30px -8px rgba(0,0,0,.4) !important; }
#brx-footer .dh-fab-cl { color: #f3d79b; }

/* ---------- inner pages ---------- */
.brxe-section.dh-sec--tight { padding-top: 0; }
.brxe-section.dh-sec--flush { padding-top: 0; padding-bottom: clamp(50px, 6vw, 80px); }

/* Page hero: the homepage hero's type and blobs, with a single arch photo */
.brxe-section.dh-page-hero { padding: calc(var(--dh-header) + 48px) 0 clamp(70px, 9vw, 120px); overflow: hidden; }
.dh-page-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.dh-page-arch-wrap { position: relative; justify-self: center; width: min(420px, 100%); }
.dh-page-arch-img, img.dh-page-arch-img { position: relative; display: block; width: 100%; height: auto !important; aspect-ratio: 4/5; object-fit: cover; border-radius: 400px 400px 30px 30px; box-shadow: 0 50px 90px -40px rgba(60,40,20,.55); background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
.brxe-breadcrumbs.dh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; font-size: .78rem; line-height: 1.4; color: var(--dh-mute); }
.dh-crumbs a { color: var(--dh-mute); transition: color .3s; }
.dh-crumbs a:hover { color: var(--dh-gold); }
.dh-crumbs .separator { opacity: .5; }
.dh-crumbs [aria-current] { color: var(--dh-text); }

/* About: story */
.dh-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
#brx-content .dh-story h2 { margin-top: 1rem; font-size: clamp(2.2rem, 4vw, 3.6rem); }
.dh-story-copy { display: grid; gap: 1.1rem; font-size: 1.05rem; color: var(--dh-mute); max-width: 60ch; }
.dh-story-copy .dh-story-sign { font-family: var(--dh-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--dh-text); }
.dh-story-sec .dh-stats.mkit { margin-top: clamp(50px, 6vw, 80px); }

/* Services: one row per service, photo and copy alternating */
.dh-svc-list { display: grid; gap: clamp(60px, 8vw, 110px); }
.dh-svc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; scroll-margin-top: calc(var(--dh-header) + 20px); }
.dh-svc--flip > .dh-svc-media { order: 2; }
.dh-svc-media { position: relative; border-radius: 28px; overflow: hidden; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); box-shadow: 0 40px 80px -45px rgba(28,23,18,.6); }
.dh-svc-media--arch { border-radius: 260px 260px 28px 28px; width: min(460px, 100%); justify-self: center; }
.dh-svc-img, img.dh-svc-img { display: block; width: 100%; height: auto !important; aspect-ratio: 5/4; object-fit: cover; transition: transform 1.4s var(--dh-ease); }
.dh-svc-media--arch .dh-svc-img { aspect-ratio: 4/5; }
.dh-svc-media:hover .dh-svc-img { transform: scale(1.04); }
#brx-content .dh-svc-copy h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); margin: 1rem 0 .9rem; }
.dh-svc-copy > p { color: var(--dh-mute); max-width: 52ch; }
.dh-svc-points ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .55rem; }
.dh-svc-points li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.dh-svc-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--dh-gold); box-shadow: 0 0 0 4px rgba(184,136,62,.15); }
.dh-svc-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.dh-svc-from { padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--dh-line2); font-size: .82rem; font-weight: 600; line-height: 1.3; color: var(--dh-clay); background: var(--dh-card); }

/* Services: finish packages */
.dh-pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dh-pkg { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 36px); border-radius: 28px; border: 1px solid var(--dh-line); background: var(--dh-card); }
.dh-pkg--dark { --dh-mute: #c9bfb1; background: radial-gradient(120% 80% at 100% 0%, rgba(194,112,80,.35), transparent 60%), #1c1712; color: #f6f1e9; border-color: transparent; }
.dh-pkg-sw { width: 100%; height: 120px; border-radius: 18px; margin-bottom: 1.6rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.dh-pkg-sw--essential { background: linear-gradient(135deg, #9aa892, #84937c); }
.dh-pkg-sw--premium { background: linear-gradient(125deg, rgba(255,255,255,.9), transparent 40%), linear-gradient(135deg, #f4f3ef, #d9d6cf); }
.dh-pkg-sw--luxe { background: var(--dh-grain) 0 0/420px 420px, linear-gradient(90deg, #5b3a26, #6e472e 50%, #4a2f1e); }
#brx-content .dh-pkg h3 { font-size: 2rem; letter-spacing: -.03em; }
.dh-pkg-sub { margin: .4rem 0 1rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dh-gold); font-weight: 600; }
.dh-pkg--dark .dh-pkg-sub { color: #f3d79b; }
.dh-pkg > p { color: var(--dh-mute); margin-bottom: 1.8rem; }
.dh-pkg .dh-btn { margin-top: auto; }

/* Contact: details row */
.dh-contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dh-contact-card { display: flex; gap: .9rem; align-items: flex-start; padding: 1.4rem 1.5rem; border-radius: 20px; border: 1px solid var(--dh-line); background: var(--dh-card); font-size: .9rem; line-height: 1.5; color: var(--dh-mute); transition: border-color .3s, transform .4s var(--dh-ease); }
a.dh-contact-card:hover { border-color: var(--dh-gold); transform: translateY(-3px); }
.dh-contact-card b { display: block; font-family: var(--dh-display); font-size: 1.05rem; font-weight: 600; color: var(--dh-text); margin-bottom: .2rem; }
.dh-contact-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--dh-bg2); color: var(--dh-gold); font-size: 1.05rem; line-height: 1; }

/* ---------- blog ---------- */
.dh-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dh-post-card { display: flex; flex-direction: column; border-radius: var(--dh-r); overflow: hidden; border: 1px solid var(--dh-line); background: var(--dh-card); transition: transform .5s var(--dh-ease), box-shadow .5s, opacity 1s var(--dh-ease), filter 1s var(--dh-ease); }
.dh-post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(28,23,18,.5); }
.dh-post-media { display: block; overflow: hidden; background: var(--dh-grain) 0 0/420px 420px, linear-gradient(135deg, #a07a58, #5a4130 55%, #b88a5e); }
.dh-post-img, img.dh-post-img { display: block; width: 100%; height: auto !important; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.4s var(--dh-ease); }
.dh-post-card:hover .dh-post-img { transform: scale(1.05); }

.dh-post-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.4rem; }
.dh-post-cat { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dh-gold); font-weight: 600; margin-bottom: .7rem; }
#brx-content .dh-post-card h3 { font-size: 1.35rem; line-height: 1.15; letter-spacing: -.02em; }
.dh-post-card h3 a:hover { color: var(--dh-clay); }
.dh-post-excerpt { margin-top: .7rem !important; font-size: .88rem; color: var(--dh-mute); }
.dh-post-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.2rem; font-size: .78rem; color: var(--dh-dim); }
.dh-post-more { display: inline-flex; align-items: center; gap: .45rem; color: var(--dh-text); font-weight: 600; font-size: .8rem; }
.dh-post-more i { font-size: .7rem; transition: transform .4s var(--dh-ease); }
.dh-post-more:hover { color: var(--dh-clay); }
.dh-post-more:hover i { transform: translateX(3px); }

/* Single article */
.brxe-section.dh-post-hero { padding: calc(var(--dh-header) + 48px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.dh-post-head { position: relative; max-width: 860px; }
#brx-content .dh-post-title { font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1.02; margin: 1.2rem 0 1.2rem; }
.dh-post-meta { margin-top: 1.4rem; font-size: .8rem; letter-spacing: .08em; color: var(--dh-dim); }
.dh-post-cover, img.dh-post-cover { display: block; width: 100%; height: auto !important; aspect-ratio: 21/9; object-fit: cover; margin-top: clamp(30px, 4vw, 50px); border-radius: 28px; box-shadow: 0 40px 80px -45px rgba(28,23,18,.6); }
.dh-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 6vw, 90px); align-items: start; }
.dh-prose { max-width: 68ch; font-size: 1.06rem; line-height: 1.75; color: #3a3129; }
.dh-prose > * + * { margin-top: 1.1em !important; }
.dh-prose h2 { font-family: var(--dh-display); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -.02em; color: var(--dh-text); margin-top: 2em !important; }
.dh-prose h3 { font-family: var(--dh-display); font-size: 1.25rem; color: var(--dh-text); margin-top: 1.6em !important; }
.dh-prose a { color: var(--dh-clay); text-decoration: underline; text-underline-offset: 3px; }
.dh-prose strong { color: var(--dh-text); }
.dh-prose ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.dh-prose li { position: relative; padding-left: 1.6rem; }
.dh-prose li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--dh-gold); box-shadow: 0 0 0 4px rgba(184,136,62,.15); }
.dh-post-aside { position: sticky; top: calc(var(--dh-header) + 20px); }
.dh-aside-card { display: grid; gap: .8rem; padding: 1.8rem; border-radius: 24px; background: var(--dh-ink); color: #f6f1e9; }
.dh-aside-card .dh-kicker { color: #f3d79b; }
#brx-content .dh-aside-card h3 { font-size: 1.7rem; color: #f6f1e9; }
.dh-aside-card .dh-it { color: #f3d79b; }
.dh-aside-card > p { color: #c9bfb1; font-size: .9rem; margin-bottom: .4rem !important; }
.dh-aside-card .bricks-button.dh-btn--line { color: #f6f1e9; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.dh-aside-card .bricks-button.dh-btn--line:hover { color: #f3d79b; border-color: #f3d79b; }

/* ---------- responsive ---------- */
@media (max-width: 1320px) and (min-width: 992px) {
	.dh-links .bricks-nav-menu > li > a { padding: .55rem .6rem; }
}
@media (max-width: 1100px) {
	.dh-nav-r .dh-btn--line { display: none; }
	.dh-hero-grid, .dh-page-hero-grid, .dh-studio, .dh-ba-wrap, .dh-ws, .dh-visit, .dh-sec-head, .dh-story, .dh-svc, .dh-look, .dh-est, .dh-faq-wrap, .dh-quiz { grid-template-columns: 1fr; }
	.dh-page-arch-wrap { width: min(380px, 78%); margin-top: 10px; }
	.dh-svc--flip > .dh-svc-media { order: 0; }
	.dh-contact-cards, .dh-post-grid { grid-template-columns: 1fr 1fr; }
	.dh-post-layout { grid-template-columns: 1fr; }
	.dh-post-aside { position: static; max-width: 520px; }
	.dh-arch-wrap { width: min(420px, 78%); margin-top: 30px; }
	.dh-qbar { grid-template-columns: 1fr; }
	.dh-qbar-lbl { padding: .4rem .4rem .2rem; }
	.brxe-form.dh-qbar-form { grid-template-columns: 1fr 1fr; }
	.dh-bento { grid-template-columns: repeat(2, 1fr); }
	.dh-card--w4 { grid-column: span 2; }
	.dh-steps { grid-template-columns: repeat(3, 1fr); }
	.dh-voices { grid-template-columns: 1fr; }
	.dh-gallery { columns: 2; }
	.dh-f-top { grid-template-columns: 1fr 1fr; }
	.dh-qopts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
	.dh-links { order: 3; }
}
@media (max-width: 680px) {
	.dh-nav-r .dh-btn--ink { display: none; }
	.dh-logo .bricks-site-logo { height: 36px; }
	.dh-logo--footer .bricks-site-logo { height: 72px; }
	.brxe-section.dh-hero { padding-top: calc(var(--dh-header) + 18px); }
	.dh-arch-wrap { width: 82%; }
	.dh-badge { left: -34px; width: 104px; height: 104px; }
	.dh-badge-core { inset: 24px; font-size: 1.2rem; }
	.dh-fchip--1 { right: -22px; } .dh-fchip--2, .dh-tracker { display: none; } .dh-fchip--3 { left: -18px; top: auto; bottom: 22%; }
	.brxe-form.dh-qbar-form, .brxe-form.dh-quote-form { grid-template-columns: 1fr; }
	.dh-stats .mkit-odo__list { grid-template-columns: 1fr 1fr; }
	.dh-bento { grid-template-columns: 1fr; grid-auto-rows: 260px; }
	.dh-steps { grid-template-columns: 1fr; }
	.dh-card--w2, .dh-card--w4 { grid-column: span 1; } .dh-card--h2 { grid-row: span 1; }
	.dh-card--h2 h3 { font-size: 1.8rem; }
	.dh-card .dh-card-text { max-height: 90px; opacity: 1; }
	.dh-opts--pkg, .dh-pillars, .dh-info, .dh-legend, .dh-result { grid-template-columns: 1fr; }
	.dh-result__img { min-height: 240px; }
	.dh-qopt { min-height: 170px; }
	.dh-sws { grid-template-columns: repeat(4, 1fr); }
	.dh-scene { aspect-ratio: 1; }
	.dh-scene__hud { flex-direction: column; align-items: stretch; }
	.dh-look-img { aspect-ratio: 4/5; }
	.dh-tip { width: 180px; }
	.dh-gallery { columns: 1; }
	.dh-pkgs, .dh-contact-cards, .dh-post-grid { grid-template-columns: 1fr; }
	.dh-post-cover, img.dh-post-cover { aspect-ratio: 4/3; }
	.dh-g-cap { opacity: 1; transform: none; }
	.dh-stage { min-height: 620px; place-items: start center; padding-top: 110px; }
	.dh-f-top { grid-template-columns: 1fr; }
	.dh-cta-img { min-height: 560px; border-radius: 180px 180px 28px 28px; }
}
@media (hover: none) { .dh-cur, .dh-cur-dot { display: none; } }
@media (prefers-reduced-motion: reduce) {
	.dh-badge svg, .dh-fchip, .dh-pulse, .dh-hs-btn, .dh-trk-fill { animation: none !important; }
	.bricks-is-frontend .dh-rv:not(.is-in) { opacity: 1; transform: none; filter: none; }
	.dh-slide-img, img.dh-slide-img { transform: none !important; transition: none !important; }
	.dh-hero-title em::after { clip-path: none; transition: none; }
}