/* -------------------- FONTS -------------------- */
@font-face { font-family:'DiamondFont'; src:url('../fonts/datalegreya-thin-webfont.woff2') format('woff2'), url('../fonts/datalegreya-thin-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }
@font-face { font-family:'CaviarDreams'; src:url('../fonts/Caviar_Dreams_Bold-webfont.woff') format('woff'); font-weight:normal; font-style:normal; }

/* -------------------- BASE -------------------- */
:root { --dbb-bg:#000; --dbb-fg:#fff; --dbb-muted:rgba(255,255,255,.72); --dbb-muted2:rgba(255,255,255,.48); --dbb-panel:rgba(255,255,255,.06); --dbb-border:rgba(255,255,255,.14); --dbb-gold:#d6b66a; }
html,body { height:100%; }
body { margin:0; background:var(--dbb-bg); color:var(--dbb-fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

/* -------------------- LAYOUT WRAPPER -------------------- */
.dbb-section { background:var(--dbb-bg); color:var(--dbb-fg); }
.dbb-container { max-width:1200px; margin-left:auto; margin-right:auto; padding:18px; }

/* Center groups that don't perfectly fill 14 columns */
.dbb-row-center { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.dbb-row-center .columns { float:none !important; margin-left:0 !important; }

/* -------------------- HERO -------------------- */
.dbb-hero-row { margin-top:6px; }
.dbb-hero-left, .dbb-hero-right { padding:10px; }

.dbb-logo { display:block; width:min(560px, 100%); height:auto; margin:0 auto 6px; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
.dbb-tagline { font-family:DiamondFont; text-align:center; font-size:2.0rem; letter-spacing:1px; margin-top:6px; }
.dbb-hero-sub { text-align:center; font-family:CaviarDreams; color:var(--dbb-muted); margin-top:6px; line-height:1.35; }
.dbb-muted { color:var(--dbb-muted); }

.dbb-cta-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
.dbb-btn { display:inline-block; padding:9px 12px; border-radius:12px; border:1px solid var(--dbb-border); background:rgba(255,255,255,.04); color:#fff; text-decoration:none; font-family:CaviarDreams; letter-spacing:.5px; }
.dbb-btn:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); }
.dbb-btn-primary { border-color:rgba(214,182,106,.55); box-shadow:0 10px 30px rgba(0,0,0,.35); }

.dbb-mini { display:grid; gap:8px; margin-top:10px; max-width:620px; margin-left:auto; margin-right:auto; }
.dbb-mini-item { background:var(--dbb-panel); border:1px solid var(--dbb-border); border-radius:14px; padding:10px 12px; }
.dbb-mini-label { display:block; font-family:CaviarDreams; color:var(--dbb-muted2); font-size:.95rem; margin-bottom:3px; }
.dbb-mini-value { display:block; font-family:CaviarDreams; color:var(--dbb-fg); font-size:1.05rem; }

/* Carousel (responsive) */
.dbb-carousel-wrap { background:rgba(255,255,255,.03); border:1px solid var(--dbb-border); border-radius:16px; overflow:hidden; box-shadow:0 16px 45px rgba(0,0,0,.45); }
.dbb-carousel { position:relative; aspect-ratio:16/9; width:100%; }
.dbb-carousel img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity 900ms ease-in-out; transform:scale(1.02); }
.dbb-carousel img.active { opacity:1; }
.dbb-carousel-caption { text-align:center; font-family:CaviarDreams; color:var(--dbb-muted2); margin-top:6px; font-size:.95rem; }

/* Mini gallery in hero */
.dbb-mini-gallery { margin-top:10px; display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.dbb-mini-gallery img { width:100%; height:72px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.10); }

/* -------------------- SECTIONS -------------------- */
.dbb-row-gap { margin-top:12px; }
.dbb-section-title { font-family:DiamondFont; font-size:2.0rem; letter-spacing:1px; margin-bottom:2px; }
.dbb-section-sub { font-family:CaviarDreams; color:var(--dbb-muted); margin-bottom:8px; }

/* -------------------- CARDS (kiosk-style header band flush to edges) -------------------- */
.dbb-card { background:var(--dbb-panel); border:1px solid var(--dbb-border); border-radius:18px; overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.28); }
.dbb-card-body { padding:12px 14px; }

.sectionHeader {
  font-family:DiamondFont;
  font-size:1.35rem;
  font-weight:900;
  color:#fff;
  margin:0;
  padding:10px 14px;
  background:url(../images/sectionHeader.png) no-repeat center/cover;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  paint-order:stroke fill;
}

.dbb-list { margin:8px 0 0; padding-left:18px; font-family:CaviarDreams; color:var(--dbb-muted); }
.dbb-list li { margin:5px 0; }

.dbb-note { padding:12px 14px; border-radius:16px; border:1px dashed rgba(214,182,106,.45); background:rgba(214,182,106,.08); font-family:CaviarDreams; color:rgba(255,255,255,.82); }
.dbb-note a { color:#fff; text-decoration:underline; text-decoration-color:rgba(214,182,106,.7); }

/* -------------------- CONTACT -------------------- */
.dbb-contact-line { font-family:CaviarDreams; color:var(--dbb-muted); margin:10px 0; }
.dbb-contact-label { display:inline-block; min-width:90px; color:var(--dbb-muted2); }
.dbb-contact-line a { color:#fff; text-decoration:none; border-bottom:1px solid rgba(214,182,106,.45); }
.dbb-contact-line a:hover { border-bottom-color:rgba(214,182,106,.85); }

.dbb-map { background:radial-gradient(circle at 20% 10%, rgba(214,182,106,.16), rgba(255,255,255,0) 45%), var(--dbb-panel); border:1px solid var(--dbb-border); border-radius:18px; min-height:220px; padding:14px; display:flex; align-items:center; justify-content:center; text-align:center; }
.dbb-map-inner { max-width:420px; }
.dbb-map-title { font-family:DiamondFont; font-size:1.9rem; margin-bottom:6px; }
.dbb-map-sub { font-family:CaviarDreams; color:var(--dbb-muted); margin-bottom:14px; }
.dbb-fineprint { margin-top:10px; font-family:CaviarDreams; color:var(--dbb-muted2); font-size:.95rem; }

/* -------------------- FOOTER -------------------- */
.dbb-footer { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10); }
.dbb-footer-line { text-align:center; font-family:CaviarDreams; }

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 900px) {
  .dbb-mini-gallery { grid-template-columns:repeat(3, 1fr); }
  .dbb-mini-gallery img { height:88px; }
  .dbb-row-center { gap:12px; }
}
@media (max-width: 550px) {
  .dbb-tagline { font-size:1.75rem; }
  .dbb-section-title { font-size:1.85rem; }
  .dbb-mini-gallery img { height:78px; }
}
/* nd.com 15-col centering guard */
.dbb-section .container.dbb-container { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; }

/* Safety: don’t allow any old rules to “pin” rows left */
.dbb-site { margin-left: auto; margin-right: auto; }

/* Kiosk-like header edge-to-edge */
.dbb-card { padding: 0; overflow: hidden; }
.dbb-card-body { padding: 12px 14px; }
.sectionHeader { display:block; margin: 0; padding: 12px 14px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.10); }
/* -------------------- DBB: MOBILE RESPONSIVE PATCH -------------------- */
/* Paste at END of web.css */

/* Ensure the site never “shrinks” tiny on phones — force real responsive width */
html, body { width: 100%; overflow-x: hidden; }

/* Container padding on small screens (Skeleton sometimes feels tight/odd) */
@media (max-width: 900px) {
  .dbb-container { padding-left: 14px; padding-right: 14px; }
}

/* -------------------- HERO: STACK + RESPONSIVE IMAGES -------------------- */
@media (max-width: 900px) {
  /* Stack hero columns */
  .dbb-hero-row .six.columns,
  .dbb-hero-row .nine.columns { width: 100% !important; margin-left: 0 !important; }

  /* Tighten vertical spacing */
  .dbb-hero { margin-top: 0; margin-bottom: 10px; }
  .dbb-hero-left, .dbb-hero-right { padding: 10px 0; }

  /* Logo/title sizing */
  .dbb-logo { width: min(520px, 92%); margin: 0 auto 8px; }
  .dbb-tagline { font-size: 1.8rem; }
  .dbb-hero-sub { font-size: 1.0rem; }

  /* Buttons: wrap cleanly */
  .dbb-cta-row { gap: 8px; }
  .dbb-btn { padding: 10px 12px; border-radius: 12px; }
}

/* Carousel should be fluid; never absolute-positioned kiosk sizing */
#carousel { position: relative; width: 100%; height: auto; overflow: hidden; top: auto; left: auto; }
#carousel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Maintain aspect ratio on all screens */
.dbb-carousel { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.dbb-carousel-wrap { width: 100%; }

/* Mini gallery thumbnails: readable on mobile */
@media (max-width: 900px) {
  .dbb-mini-gallery { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .dbb-mini-gallery img { height: 70px; border-radius: 12px; }
}
@media (max-width: 550px) {
  .dbb-mini-gallery { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .dbb-mini-gallery img { height: 62px; border-radius: 12px; }
}

/* -------------------- SERVICES: 1 COL -> 2 COL -> 3 COL -------------------- */
/* Phone: 1 column cards */
@media (max-width: 550px) {
  #services + .row .five.columns,
  #services + .row + .row .five.columns,
  .dbb-services-row .five.columns { width: 100% !important; margin-left: 0 !important; }
}

/* Tablet: 2 columns */
@media (min-width: 551px) and (max-width: 900px) {
  #services + .row .five.columns,
  #services + .row + .row .five.columns,
  .dbb-services-row .five.columns { width: 48.5% !important; }

  /* Skeleton gutter is margin-left: 3% typically — so every second card should clear */
  #services + .row .five.columns:nth-child(2n+1),
  #services + .row + .row .five.columns:nth-child(2n+1) { margin-left: 0 !important; clear: left; }
}

/* Section headers spacing */
@media (max-width: 900px) {
  .dbb-section-title { font-size: 1.9rem; }
  .dbb-section-sub { font-size: 1.0rem; }
  .dbb-row-gap { margin-top: 14px; }
}

/* -------------------- CONTACT: STACK ON MOBILE -------------------- */
@media (max-width: 900px) {
  #contact .seven.columns,
  #contact .eight.columns { width: 100% !important; margin-left: 0 !important; }

  .dbb-map { min-height: 220px; }
}

/* -------------------- GENERAL: CARDS + NOTE TIGHTEN -------------------- */
@media (max-width: 900px) {
  .dbb-card { border-radius: 16px; }
  .dbb-card-body { padding: 12px 12px; }
  .dbb-note { padding: 12px 12px; border-radius: 14px; }
}

/* Make lists more compact on small screens */
@media (max-width: 550px) {
  .dbb-list { margin-top: 6px; padding-left: 16px; }
  .dbb-list li { margin: 5px 0; }
}

/* Footer spacing */
@media (max-width: 900px) {
  .dbb-footer { margin-top: 18px; padding-top: 14px; }
}
/* -------------------- END DBB: MOBILE RESPONSIVE PATCH -------------------- */
.dbb-thumb { cursor: pointer; }
.dbb-thumb.is-active { outline: 2px solid rgba(214,182,106,.65); outline-offset: 2px; }