/* ============================================================
   Dovetail — Custom Styles (v3)
   Injected once per page; also safe in Appearance → Customize → Additional CSS
   ============================================================ */

/* Guard against any element a few px wider than the viewport producing a
   horizontal scrollbar (common on mobile). No intended horizontal scrolling. */
html, body { overflow-x:hidden; max-width:100%; }

/* Reinforce native Elementor widgets so the theme can't override the look */
.dt-uc .elementor-heading-title {
  text-transform:uppercase !important; font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif !important;
}
.dt-btn-el .elementor-button {
  font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif !important; border-radius:0 !important;
  background-color:transparent !important;
}
.dt-btn-el .elementor-button:hover { background-color:#c2a95e !important; }

/* ---------- Header over hero ---------- */
.dt-hdr {
  position:absolute; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; padding:30px 60px;
}
.dt-hdr .dt-logo img { height:46px; width:auto; display:block; }
.dt-burger { background:none; border:none; cursor:pointer; padding:6px;
  display:flex; flex-direction:column; gap:6px; }
.dt-burger span { display:block; width:30px; height:2px; background:#ffffff; }
.dt-burger--dark span { background:#1e1e1e; }

/* ---------- Overlay menu (children open horizontally to the right) ---------- */
.dt-menu { position:fixed; inset:0; z-index:9999; background:rgba(39,35,35,.95);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease; overflow-y:auto; }
.dt-menu.open { opacity:1; visibility:visible; pointer-events:auto; }
/* Overlay content box mirrors the header grid: 1160 content + 2x60 gutter = 1280,
   so the overlay logo lands on the exact same plane as the header logo. */
.dt-menu-inner { max-width:1280px; margin:0 auto; padding:90px 60px 56px; min-height:100vh;
  display:flex; flex-direction:column; box-sizing:border-box; }
.dt-menu-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
/* Overlay logo: size it the SAME way as the header logo (width 170, not a fixed
   height) so the two are identical in size on every screen; the !important beats the
   inline height the enhancer JS sets. */
.dt-menu-top img { width:170px !important; height:auto !important; }
.dt-close { background:none !important; border:none !important; box-shadow:none !important;
  outline:none !important; color:#ffffff; font-size:34px; line-height:1; cursor:pointer; padding:4px; }
.dt-menu-nav { flex:1; display:flex; flex-direction:column; align-items:flex-start; }
/* Items fill the height (spread top→bottom); the contact block then sits a fixed
   36px below the last item (Contact) instead of being spread out with it. */
.dt-menu-list { flex:1; width:100%; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:space-between; }
.dt-menu-grp { display:flex; align-items:center; width:100%; }
.dt-menu-row { display:flex; align-items:center; gap:14px; background:none !important;
  border:none !important; box-shadow:none !important; outline:none !important;
  cursor:pointer; padding:10px 0; text-align:left; flex:0 0 auto; }
.dt-menu-tgl { color:#c2a95e; font-size:22px; width:18px; flex:0 0 auto; text-align:center; }
.dt-menu-label { color:#FFEFBE; font-size:25px; font-weight:300; letter-spacing:.03em;
  text-transform:none !important; font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif; transition:color .2s; }
.dt-menu-link { padding-left:32px; }
.dt-menu-row:hover .dt-menu-label { color:#ffffff; }
/* Active (current page) item: bold */
.dt-menu-active .dt-menu-label { font-weight:600 !important; }
.dt-menu-sub { display:none; align-items:center; flex:1; min-width:0; }
.dt-menu-grp.open .dt-menu-sub { display:flex; }
.dt-menu-connector { flex:0 0 auto; width:120px; height:1px; background:#c2a95e; margin:0 26px 0 14px; }
.dt-menu-sub-links { display:flex; flex-wrap:wrap; gap:10px 30px; }
.dt-menu-sub-link { color:#ffffff; font-size:15px; font-weight:300; letter-spacing:.03em;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:all .2s; }
.dt-menu-sub-link:hover { color:#c2a95e; border-bottom-color:#c2a95e; }
.dt-menu-contact { margin-top:36px; padding-left:28px; display:flex; flex-direction:column; gap:3px; }
.dt-menu-contact a { color:rgba(255,255,255,.85); font-size:15px; font-weight:300; }
.dt-menu-contact a:hover { color:#c2a95e; }

/* ---------- Content grid ----------
   Align the header (logo + hamburger) and the home hero content to the same
   1160px centered grid the footer uses, so nothing runs edge-to-edge. */
.dt-header > .elementor-container,
.dt-hero > .elementor-container { max-width:1160px; margin-left:auto; margin-right:auto; }

/* ---------- Layout fixes for native sections ---------- */
/* Kill the 1px white sliver above the first section (sub-pixel gap between the
   Elementor content wrapper and its first top-level section). */
.elementor > .elementor-section.elementor-top-section:first-child { margin-top:-1px !important; }
/* Intro: remove Elementor's default 20px inter-widget spacing so the spacers
   alone set the (tighter) gaps between heading / divider / text / button. */
.dt-intro .elementor-widget:not(:last-child) { margin-bottom:0 !important; }
/* Hero: bottom-align the column within the tall section */
.dt-hero > .elementor-container { align-items:flex-end !important; }
/* Interior hero: vertically center the title instead */
.dt-hero-mid > .elementor-container { align-items:center !important; }

/* ---------- Ken Burns: subtle, single-play zoom on hero images ----------
   A ::before inherits the section's background image and scales once. The ink
   overlay and content are layered above it so they stay still & readable. */
.dt-hero, .dt-hero-mid { overflow:hidden !important; }
.dt-hero::before, .dt-hero-mid::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
  background-image:inherit; background-size:cover; background-position:center;
  transform-origin:center; animation:dtKenBurns 16s ease-out 1 both; }
.dt-hero > .elementor-background-overlay,
.dt-hero-mid > .elementor-background-overlay { z-index:1; }
.dt-hero > .elementor-container,
.dt-hero-mid > .elementor-container { position:relative; z-index:2; }
@keyframes dtKenBurns { from { transform:scale(1); } to { transform:scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .dt-hero::before, .dt-hero-mid::before { animation:none; } }
/* CTA: vertically center the text column's content */
.dt-cta-body .elementor-widget-wrap { align-content:center !important; }
/* Footer: the site logo is white — darken it so it shows on the light footer */
.dt-foot-logo img { filter:brightness(0) !important; opacity:.85; }

/* ---------- Header overlay (no white gap; sits over the hero) ---------- */
.dt-header { position:absolute !important; top:0; left:0; right:0; z-index:99; }

/* ---------- Native Nav Menu — custom hamburger lines ---------- */
.dt-nav { position:relative; }
.dt-nav .elementor-menu-toggle { margin-left:auto; display:flex !important; flex-direction:column;
  justify-content:center; gap:6px; width:34px; height:26px; background:none !important;
  border:none !important; padding:0 !important; }
.dt-nav .elementor-menu-toggle svg { display:none !important; }
.dt-nav .elementor-menu-toggle .dt-burg-l { display:block; width:32px; height:2px; background:#ffffff; transition:background .2s; }
.dt-nav .elementor-menu-toggle:hover .dt-burg-l { background:#c2a95e; }
/* Hide Elementor's own dropdown panel — we build a full-screen overlay from its data */
.dt-nav .elementor-nav-menu--dropdown { display:none !important; }

/* ---------- Decorative gold divider (exact SVG) ---------- */
/* Divider rendered as a CSS background (Elementor strips data-URIs from the
   image widget's src, leaving a broken <img>), so we draw it on the widget box. */
.dt-rule { margin:0; line-height:0; height:8px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22161%22%20height%3D%228%22%20viewBox%3D%220%200%20161%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M0%207.5H64.3333L61.5%200.5H102.559L100%207.5H160.5%22%20stroke%3D%22%23C3AA5F%22/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:161px 8px; }
.dt-rule img { display:none !important; }
.dt-rule--center { background-position:center; }
.dt-rule--left { background-position:left center; }

/* ---------- Testimonial: gold quote graphic sits BEHIND the text ---------- */
.dt-quote-col { position:relative; max-width:1000px; margin:0 auto; }
/* Quote graphic sits partially BEHIND the text: the text keeps its indent, the
   gold mark is shifted right so its right edge tucks under the first line. */
.dt-quote-mark { position:absolute; top:80px; left:110px; z-index:0; line-height:0; }
.dt-quote-mark img { width:100px; height:auto; }
.dt-quote-p { position:relative; z-index:1; max-width:640px; margin:0 auto !important; }
.dt-quote-p p { line-height:1.85; }
.dt-quote-by { position:relative; z-index:1; max-width:640px; margin:0 auto; text-align:right; }

/* ---------- CTA ---------- */
.dt-cta-img { min-height:430px; }

/* ---------- Cabinetry category carousel ---------- */
.dt-cab { background:#ffffff; position:relative; font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif; }
.dt-cab-bar { display:flex; align-items:center; justify-content:center; gap:34px; padding:66px 24px 14px; }
.dt-cab-bar h3 { font-size:24px; font-weight:400; color:#1e1e1e; letter-spacing:.34em;
  text-transform:uppercase; min-width:180px; text-align:center; margin:0; }
/* Chevrons drawn with CSS borders so they scale to ~the title's cap height
   (the &lsaquo;/&rsaquo; glyphs render tiny even at a large font-size). */
.dt-cab-arrow { background:none !important; border:none !important; box-shadow:none !important;
  outline:none !important; cursor:pointer; position:relative;
  font-size:0 !important; color:transparent !important; line-height:0 !important;
  width:26px; height:24px; padding:0 6px; transition:opacity .2s; }
.dt-cab-arrow::before { content:""; position:absolute; top:50%; left:50%;
  width:14px; height:14px; border:solid #1e1e1e; border-width:0 0 1.5px 1.5px; }
.dt-cab-bar .dt-cab-arrow:first-child::before { transform:translate(-35%,-50%) rotate(45deg); }
.dt-cab-bar .dt-cab-arrow:last-child::before { transform:translate(-65%,-50%) rotate(-135deg); }
.dt-cab-arrow:hover::before { border-color:#c2a95e; }

/* ---------- Accessibility: visible keyboard focus ----------
   Several controls set outline:none for mouse use; restore a clear focus ring
   for keyboard users (:focus-visible only fires on keyboard navigation). */
a:focus-visible, button:focus-visible,
.dt-cab-arrow:focus-visible, .dt-close:focus-visible, .dt-tab:focus-visible,
.dt-menu-label:focus-visible, .dt-menu-tgl:focus-visible,
.elementor-button:focus-visible, .elementor-field:focus-visible,
.elementor-nav-menu a:focus-visible {
  outline:2px solid #c2a95e !important; outline-offset:3px; border-radius:1px; }

/* CTA body text — left aligned, constrained width */
.dt-cta-text { max-width:440px; }
.dt-cab-tabs { position:relative; z-index:20; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:flex-start; gap:0 30px; padding:12px 24px 22px; }
/* Uniform padding on every tab (matching the active box) so neighbours don't
   shift when a tab becomes the bordered active box. */
.dt-tab { font-size:15px; font-weight:400; color:#918989; letter-spacing:.34em;
  text-transform:uppercase; cursor:pointer; padding:12px 26px; margin-bottom:0;
  white-space:nowrap; transition:color .2s; border:1px solid transparent; }
.dt-tab:hover { color:#1e1e1e; }
/* Active tab = compact folder-tab: borders connect to the card's inner box top,
   bottom is white so it reads as continuous with the box interior. */
.dt-tab.active { color:#1e1e1e; background:#ffffff; border:1px solid #c2a95e;
  border-bottom-color:#ffffff; position:relative; z-index:62; margin-bottom:0;
  padding:12px 26px; }
#dtCab { position:relative; z-index:30; }
.dt-slides { position:relative; z-index:1; margin-bottom:0 !important; }
.dt-cab > .elementor-container { padding-bottom:0; }
/* Native (editable) dropdown card — a white panel (padding) wrapping a bordered
   inner box, so the border has breathing room. JS shows + positions it. */
.dt-cab .dt-drop { position:absolute; z-index:60; width:600px; display:none !important;
  background:#ffffff; padding:0 16px 16px 16px; box-shadow:0 16px 44px rgba(0,0,0,.10); }
.dt-cab .dt-drop > .elementor-container { border:1px solid #c2a95e; }
.dt-cab .dt-drop.dt-show { display:block !important; }
/* In the Elementor editor, reveal all dropdowns (stacked) so they're editable */
.elementor-editor-active .dt-cab .dt-drop { display:block !important; position:static !important;
  width:auto !important; margin:10px 0; box-shadow:none; }
.dt-cab .dt-drop p { font-size:13px; font-weight:300; color:#333333; line-height:1.8; margin:0 0 20px; }
/* Editable category + tab labels: read by the carousel JS, hidden on the live site */
.dt-drop-cat, .dt-drop-tab { display:none !important; }
/* In the Elementor editor, reveal them (with a hint) so the editor can change them */
.elementor-editor-active .dt-drop-cat,
.elementor-editor-active .dt-drop-tab { display:block !important; }
.elementor-editor-active .dt-drop-cat { position:relative; opacity:.75;
  border-top:1px dashed #d9d9d9; padding-top:8px; margin-top:4px; }
.elementor-editor-active .dt-drop-cat::before { content:"Category label \2193"; display:block;
  font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#c2a95e; margin-bottom:2px; }
.elementor-editor-active .dt-drop-tab::before { content:"Tab label \2193"; display:block;
  font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#c2a95e; margin-bottom:2px; }
.dt-drop-cat p, .dt-drop-tab p { margin:0 0 6px !important; }
/* dropdown image framed by the hand-drawn notched border SVG.
   NB: on the frontend the image widget renders <img> directly under
   .elementor-widget-image (no .elementor-widget-container), so the frame box
   lives on .elementor-widget-image and we center for either DOM shape. */
.dt-drop-imgwrap { position:relative; }
.dt-drop-imgwrap .elementor-widget-image {
  width:150px; height:175px; margin:0 0 0 auto;
  background:url("data:image/svg+xml,%3Csvg width='121' height='141' viewBox='0 0 121 141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.70245 140.841L5.53772 80.7682L0.152344 85.37V57.7717L5.53772 62.3736L5.70245 0.159424H120.842V140.841C120.842 140.841 5.70245 139.018 5.70245 140.841Z' stroke='%23c2a95e' stroke-width='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A") no-repeat center; background-size:contain;
  display:flex; align-items:center; justify-content:center; }
.dt-drop-imgwrap .elementor-widget-image > .elementor-widget-container {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.dt-drop-imgwrap .elementor-widget-image img { display:block; width:auto; height:auto;
  max-width:70%; max-height:76%; margin:0 0 0 8%; border:none !important; }
.dt-drop-imgwrap .elementor-widget-image figure { margin:0; }
/* Hide the lightbox caption (it shows the raw filename / media title) */
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__description { display:none !important; }
/* ---------- Contact: native Pro Form + native Google Map ---------- */
.dt-map iframe, .dt-map .elementor-custom-embed { height:340px !important; border:0; display:block; }
.dt-form-el .elementor-field-group { margin-bottom:18px; }
.dt-form-el .elementor-field-label { font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif !important; font-size:13px !important;
  color:#1e1e1e !important; font-weight:400 !important; margin-bottom:6px !important; }
.dt-form-el .elementor-field-group .elementor-field { font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif !important;
  width:100%; padding:11px 14px !important; border:1px solid #cbb784 !important;
  background:#fff !important; font-size:14px !important; color:#1e1e1e !important;
  border-radius:0 !important; box-shadow:none !important; height:auto; }
.dt-form-el textarea.elementor-field { min-height:120px; }
/* Select: the gold-bordered .elementor-field is the WRAPPER; strip the native inner
   box on the <select> so only one border shows, and draw a clean custom chevron. */
.dt-form-el .elementor-select-wrapper { position:relative; }
.dt-form-el .elementor-select-wrapper select {
  border:none !important; border-radius:0 !important; background:transparent !important;
  box-shadow:none !important; height:auto !important; padding:0 26px 0 0 !important;
  width:100% !important; color:#1e1e1e !important; }
/* Elementor draws its own dropdown caret, and WHICH form it uses varies by version /
   re-save: sometimes a ::before, sometimes a real .select-caret-down-wrapper element.
   Hide both so only our chevron ever shows (otherwise you get a doubled arrow). */
.dt-form-el .elementor-select-wrapper::before { display:none !important; }
.dt-form-el .elementor-select-wrapper .select-caret-down-wrapper { display:none !important; }
.dt-form-el .elementor-select-wrapper::after {
  content:""; position:absolute; right:4px; top:50%; width:8px; height:8px;
  border:solid #1e1e1e; border-width:0 0 2px 2px;
  transform:translateY(-70%) rotate(-45deg); pointer-events:none; }
.dt-form-el .elementor-field:focus { border-color:#c2a95e !important; }
.dt-form-el .elementor-field::placeholder { color:#b9b3a6; }
.dt-form-el .elementor-button { background-color:#c2a95e !important; color:#fff !important;
  border:none !important; border-radius:0 !important; padding:14px 40px !important;
  font-family:'Nunito Sans', 'Kohinoor Gujarati', -apple-system, system-ui, sans-serif !important; font-size:13px !important; letter-spacing:.22em !important;
  text-transform:uppercase !important; font-weight:400 !important; transition:opacity .2s; }
.dt-form-el .elementor-button:hover { opacity:.88; background-color:#c2a95e !important; }
.dt-form-el .elementor-mark-required .elementor-field-label:after,
.dt-form-el .elementor-field-required .elementor-field-label:after { color:#c2a95e; }
.dt-form-note { margin-top:14px; }
/* black Gallery button */
.dt-gal-btn .elementor-button { background-color:#1e1e1e !important; color:#ffffff !important;
  border:none !important; border-radius:0 !important; }
.dt-gal-btn .elementor-button:hover { background-color:#c2a95e !important; }

/* ---------- Gallery page grid ---------- */
.dt-gallery { max-width:1040px; margin:0 auto; }
.dt-gallery .gallery-item, .dt-gallery figure { position:relative; overflow:hidden; }
/* Equal-size thumbnails (object-fit cover) */
.dt-gallery .gallery-icon { aspect-ratio:1.12/1; overflow:hidden; }
.dt-gallery .gallery-icon a { display:block; width:100%; height:100%; }
.dt-gallery img { display:block; width:100% !important; height:100% !important; object-fit:cover;
  transition:transform .45s ease, opacity .25s; }
.dt-gallery .gallery-item:hover img, .dt-gallery figure:hover img { transform:scale(1.05); opacity:.92; }
.dt-gallery .gallery-item::after, .dt-gallery figure::after { content:""; position:absolute; top:10px; left:10px;
  width:20px; height:20px; z-index:3; pointer-events:none; opacity:.9;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/></svg>") no-repeat center/contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* ---------- Category landing grid (STANDARD Image Gallery → project pages) ----------
   The client just manages the gallery's image list; JS routes a click to the
   project page. Style the gallery's grid 3-up, ~1040 wide. */
.dt-cat-gallery { max-width:1040px; margin:0 auto; }
.dt-cat-gallery .gallery { display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:36px !important; margin:0 !important; align-content:start; }
.dt-cat-gallery .gallery-item { width:auto !important; max-width:none !important; display:block !important;
  margin:0 !important; padding:0 !important; float:none !important; text-align:left !important; }
.dt-cat-gallery .gallery-icon { margin:0 !important; padding:0 !important; overflow:hidden; }
.dt-cat-gallery .gallery-icon img { display:block; width:100%; height:auto; aspect-ratio:1.12/1; object-fit:cover;
  border:none !important; cursor:pointer; transition:transform .45s ease, opacity .25s; }
.dt-cat-gallery .gallery-item:hover img { transform:scale(1.05); opacity:.92; }
.dt-cat-gallery .gallery-caption { display:none !important; }
@media (max-width:900px) { .dt-cat-gallery .gallery { grid-template-columns:repeat(2,1fr) !important; gap:18px !important; } }

/* ---------- Category landing grid (individual linked images → project pages) ----------
   Each image is its own widget with its own editable link. 3-up, spanning the full
   1160 content grid so the outer images line up with the logo / menu edges. */
.elementor-top-section:has(.dt-grid) > .elementor-container { max-width:1160px !important;
  margin-left:auto; margin-right:auto; }
/* !important is REQUIRED here: Elementor's own
   `.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap { display:flex }`
   is more specific than a plain class rule. It only loses while the page wrapper still
   carries the legacy `elementor-bc-flex-widget` class — which Elementor DROPS the first
   time the client saves the page in the editor. Without !important the grid silently
   collapses to flex the moment someone edits the page. */
.dt-grid > .elementor-widget-wrap { display:grid !important;
  grid-template-columns:repeat(3,1fr) !important; gap:36px !important;
  align-content:start; max-width:none; margin:0;
  padding-left:0 !important; padding-right:0 !important; }
.dt-grid > .elementor-widget-wrap > .elementor-widget { margin:0 !important; width:auto; }
.dt-grid .dt-grid-img a { display:block; overflow:hidden; }
.dt-grid .dt-grid-img img { display:block; width:100%; aspect-ratio:1.12/1; object-fit:cover;
  transition:transform .45s ease, opacity .25s; }
.dt-grid .dt-grid-img:hover img { transform:scale(1.05); opacity:.92; }
@media (max-width:900px) { .dt-grid > .elementor-widget-wrap { grid-template-columns:repeat(2,1fr) !important; gap:18px !important; } }

/* ---------- Project gallery: main carousel image + arrows + thumbnails ---------- */
/* Carousel + thumbnails span the global 1160 grid (align with logo/menu/footer).
   Constrain the inner sections' containers so they centre to the grid. */
.dt-pg-stage-row > .elementor-container,
.dt-pg-thumbs > .elementor-container { max-width:1160px !important; margin-left:auto; margin-right:auto; }
.dt-pg-stage { position:relative; }
/* Main viewer + arrows live in one HTML widget; the img sets the stage height and
   the arrows are positioned absolutely against the (relative) stage column. */
.dt-pg-main { line-height:0; }
.dt-pg-main img { display:block; width:100%; aspect-ratio:1160/640; object-fit:cover; }
.dt-pg-arrow { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px;
  background:none !important; border:none !important; box-shadow:none !important; outline:none !important;
  cursor:pointer; z-index:6; padding:0; pointer-events:auto; }
.dt-pg-arrow::before { content:""; position:absolute; top:50%; left:50%; width:30px; height:30px;
  border:solid #fff; border-width:0 0 3px 3px; filter:drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.dt-pg-prev { left:22px; } .dt-pg-prev::before { transform:translate(-30%,-50%) rotate(45deg); }
.dt-pg-next { right:22px; } .dt-pg-next::before { transform:translate(-70%,-50%) rotate(-135deg); }
.dt-pg-thumbs { margin-top:18px; }
/* Thumbnails are a STANDARD Image Gallery widget — style its grid to sit flush to
   the 1160 grid (4-up). The carousel JS reads these images to drive the viewer. */
.dt-pg-gallery .gallery { display:grid !important; grid-template-columns:repeat(4,1fr) !important;
  gap:16px !important; margin:0 !important; }
.dt-pg-gallery .gallery-item { width:auto !important; max-width:none !important; display:block !important;
  margin:0 !important; padding:0 !important; float:none !important; text-align:left !important; }
.dt-pg-gallery .gallery-icon { margin:0 !important; padding:0 !important; }
.dt-pg-gallery .gallery-icon img { display:block; width:100%; height:auto; aspect-ratio:243/204; object-fit:cover;
  border:none !important; outline:2px solid transparent; outline-offset:-2px; transition:opacity .2s; }
.dt-pg-gallery .gallery-item:hover img { opacity:.9; }
.dt-pg-gallery .gallery-item.dt-active img { outline-color:#c2a95e; }
.dt-pg-gallery .gallery-caption { display:none !important; }
/* Project spec bullets — two groups, space-around within the 1160 grid */
.dt-pg-specs > .elementor-widget-wrap { max-width:1160px; margin:0 auto; display:flex !important;
  flex-wrap:wrap !important; justify-content:space-around !important; gap:20px 40px !important; }
.dt-pg-specs > .elementor-widget-wrap > .elementor-widget { margin:0 !important; width:auto; flex:0 1 auto; }
.dt-pg-bullets ul { list-style:none; padding:0; margin:0; }
.dt-pg-bullets li { position:relative; padding-left:18px; margin-bottom:8px; }
.dt-pg-bullets li::before { content:"\2022"; color:#333333; position:absolute; left:0; }

/* ---------- Footer (native widgets) ---------- */
.dt-foot-row { max-width:1160px; margin:0 auto !important; }
.dt-foot-logo img { height:46px; width:auto; }
.dt-foot-nav p { margin:0; }
.dt-foot-nav a { font-size:14px; font-weight:400; color:#1e1e1e; letter-spacing:.04em;
  text-decoration:none; margin:0 11px; transition:color .2s; }
.dt-foot-nav a:hover { color:#c2a95e; }

@media (max-width:900px) {
  .dt-hdr { padding:22px 26px; }
  /* Overlay inner padding-top matches the header padding-top (34) and uses the same
     26px gutter, so the overlay logo lands exactly on the header logo. */
  .dt-menu-inner { padding:34px 26px 60px !important; }
  /* Keep header, hero and the overlay on the same (tighter) mobile gutter so the
     logo / heading / overlay-logo all stay aligned on small screens. */
  /* ===== Uniform mobile gutter ===== Every top-level section's content lines up to
     a 26px left/right bound — the same plane as the header logo and the menu button.
     The gutter lives on each column's inner wrap; section + container side padding is
     zeroed so nothing doubles up, and non-header columns stack to full width. This is
     what keeps EVERY container aligned on mobile regardless of how it was authored. */
  .elementor > .elementor-section.elementor-top-section,
  .elementor > .elementor-section.elementor-top-section > .elementor-container { padding-left:0 !important; padding-right:0 !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container { max-width:100% !important; }
  .elementor > .elementor-section.elementor-top-section:not(.dt-header) > .elementor-container > .elementor-column { width:100% !important; }
  .elementor > .elementor-section.elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left:26px !important; padding-right:26px !important; }
  /* Let constrained text blocks fill the gutter instead of their desktop max-widths */
  .dt-cta-text, .dt-quote-p, .dt-quote-by, .dt-quote-col { max-width:100% !important; }
  .dt-header { padding-top:34px !important; padding-bottom:22px !important; }
  /* Header: keep the logo + hamburger on ONE centered row (Elementor otherwise
     stacks the two columns at mobile, dropping the burger to a second row). */
  .dt-header > .elementor-container { flex-wrap:nowrap !important; align-items:center !important; }
  .dt-header > .elementor-container > .elementor-column { width:auto !important; }
  .dt-header .dt-nav-col { flex:1 1 auto !important; }
  .dt-header .dt-logo-col { flex:0 0 auto !important; }
  /* Nudge the hamburger down ~5px on mobile */
  .dt-nav .elementor-menu-toggle { transform:translateY(5px); }
  /* Pack menu items together: the desktop layout spreads them across the full
     height (space-between); on a tall phone that becomes huge gaps. */
  .dt-menu-nav { flex:0 0 auto !important; }
  .dt-menu-list { flex:0 0 auto !important; justify-content:flex-start !important; }
  .dt-menu-row { padding:11px 0 !important; }
  .dt-menu-contact { margin-top:28px !important; }
  .dt-menu-grp { flex-wrap:wrap; }
  .dt-menu-label { font-size:23px; }
  .dt-menu-sub { flex-basis:100%; padding:0 0 12px 28px; }
  .dt-menu-connector { display:none; }
  /* Carousel: tighter title row + tab grid on mobile */
  .dt-cab-bar { padding:46px 16px 10px !important; gap:18px !important; }
  .dt-cab-bar h3 { min-width:0 !important; font-size:20px !important; letter-spacing:.22em !important; }
  .dt-cab-tabs { gap:0 14px !important; padding:6px 12px 16px !important; }
  .dt-tab, .dt-tab.active { padding:6px 14px !important; letter-spacing:.22em !important; }
  /* Carousel main image: break out of the 26px gutter to sit edge-to-edge */
  .dt-cab .dt-slides { width:calc(100% + 52px) !important; max-width:none !important;
    margin-left:-26px !important; margin-right:-26px !important; }
  /* Carousel dropdown: keep within the viewport on small screens */
  .dt-cab .dt-drop { width:calc(100vw - 32px) !important; left:16px !important; }
  .dt-cab .dt-drop .elementor-container { flex-wrap:wrap; }
  /* CTA: trim the tall vertical padding on mobile (horizontal handled by the
     uniform gutter rule above). */
  .dt-cta-body > .elementor-element-populated { padding-top:36px !important; padding-bottom:36px !important; }
  /* Footer: stack centered, with breathing room under the logo */
  .dt-foot-logo, .dt-foot-logo .elementor-widget-container { text-align:center !important; }
  .dt-foot-logo img { margin-left:auto !important; margin-right:auto !important; margin-bottom:18px !important; }
  .dt-foot-nav { text-align:center !important; }
  .dt-foot-social, .dt-foot-social .elementor-widget-container { text-align:center !important; }
  .dt-foot-social .elementor-social-icons-wrapper { justify-content:center !important; }
  /* Quote: hide the decorative quote SVG entirely on mobile */
  .dt-quote-mark { display:none !important; }
  /* Contact: center the intro block (heading, divider, copy) and tighten the gap
     between the map (end of the left column) and the form (start of the right). */
  .dt-contact-left .elementor-heading-title,
  .dt-contact-left .elementor-widget-text-editor { text-align:center !important; }
  .dt-contact-left .dt-rule { width:161px !important; max-width:161px !important;
    margin-left:auto !important; margin-right:auto !important; }
  .dt-contact-left > .elementor-element-populated { padding-bottom:20px !important; }
  .dt-contact-right > .elementor-element-populated { padding-top:20px !important; }
  /* Project specs: stack the two bullet groups full-width and left-align them to the
     gutter (the desktop space-around centers each group differently when they wrap). */
  .dt-pg-specs > .elementor-widget-wrap { flex-direction:column !important; flex-wrap:nowrap !important;
    justify-content:flex-start !important; }
  .dt-pg-specs > .elementor-widget-wrap > .elementor-widget { width:100% !important; }
}