html {
  background: var(--db-white);
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--db-black);
  line-height: 1.6;
  background: var(--db-white);
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--db-gold-light);
  color: var(--db-black);
}

a {
  text-underline-offset: 0.18em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 24px;
  background: var(--db-black);
  color: var(--db-white);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

.db-container {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) {
  .db-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.db-section {
  padding: 120px 0;
}

.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  min-height: 44px;
  border-radius: 4px;
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.db-card {
  border: 1px solid var(--line);
  padding: 40px;
  background: var(--db-white);
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(5, 5, 5, 0.04);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.db-card:hover {
  border-color: var(--db-gold);
  transform: translateY(-4px);
  box-shadow: 0 24px 65px rgba(5, 5, 5, 0.10);
}

/* DeccanBridge Utility */
.text-db-gold { color: var(--db-gold); }
.bg-db-gold { background-color: var(--db-gold); }
.border-db-gold { border-color: var(--db-gold); }
.bg-db-black { background-color: var(--db-black); }
.text-db-muted { color: var(--text-muted); }

/* ========================
   Institutional BlackRock-Inspired Theme
   ======================== */
#site-header,
header.sticky {
  background: linear-gradient(180deg, #111111 0%, #070707 100%) !important;
  color: var(--db-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 1px 0 rgba(196, 154, 26, 0.16);
  /* No backdrop-filter here: it would turn the header into the containing
     block for the fixed-position search modal and mobile drawer inside it,
     pinning them to the header strip instead of the viewport. */
}

#site-header::before,
header.sticky::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(196, 154, 26, 0.72) 78%, var(--db-gold) 100%);
}

#site-header a,
header.sticky a,
#site-header button,
header.sticky button {
  color: rgba(255, 255, 255, 0.78) !important;
}

#site-header a:hover,
header.sticky a:hover,
#site-header button:hover,
header.sticky button:hover {
  color: var(--db-white) !important;
}

#site-header .text-gold,
header.sticky .text-gold {
  color: var(--db-gold) !important;
}

#site-header [class*="border-gray"],
header.sticky [class*="border-gray"] {
  border-color: var(--line) !important;
}

#site-header [x-show],
header.sticky [x-show],
#site-header .absolute,
header.sticky .absolute {
  border-color: var(--line) !important;
}

#site-header .bg-white,
header.sticky .bg-white,
#site-header .absolute,
header.sticky .absolute {
  background: var(--db-white) !important;
  color: var(--db-black) !important;
}

/* Search modal sits inside the header but must keep its own look — the
   header-wide overrides above would otherwise paint its backdrop solid
   white and render its buttons/links white-on-white. */
#site-header #site-search-modal [data-search-overlay] {
  background: rgba(0, 0, 0, 0.7) !important;
}
#site-header #site-search-modal a,
#site-header #site-search-modal button {
  color: var(--db-charcoal) !important;
}
#site-header #site-search-modal a:hover,
#site-header #site-search-modal button:hover {
  color: var(--db-black) !important;
}
#site-header #site-search-modal .text-gold {
  color: var(--db-gold) !important;
}

/* Search modal polish: soft-blurred backdrop (safe here — the overlay has no
   fixed-position descendants), panel entrance, match highlighting, excerpts. */
#site-search-modal [data-search-overlay] {
  backdrop-filter: blur(3px);
}

/* Hide the browser's native clear (x) on the search input — the modal has
   its own close button, and on Windows the native one renders accent-blue. */
#site-search-input::-webkit-search-cancel-button,
#site-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
#site-search-input::-ms-clear,
#site-search-input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
.search-modal-panel {
  animation: search-panel-in 0.18s ease-out both;
}
@keyframes search-panel-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .search-modal-panel { animation: none; }
}
#site-search-results mark,
#search-results-list mark {
  background: rgba(196, 154, 26, 0.16);
  color: inherit;
  font-weight: 700;
}
.search-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#site-header .header-dropdown a,
#site-header .header-dropdown button,
#site-header .header-menu-panel a,
#site-header .header-menu-panel button {
  color: var(--db-charcoal) !important;
}

#site-header .header-dropdown a:hover,
#site-header .header-dropdown button:hover,
#site-header .header-menu-panel a:hover,
#site-header .header-menu-panel button:hover {
  color: var(--db-black) !important;
}

#site-header .header-menu-panel {
  background: var(--db-white) !important;
  color: var(--db-black) !important;
}

#site-header .hover\:bg-gold\/10:hover,
header.sticky .hover\:bg-gold\/10:hover {
  background: var(--db-porcelain) !important;
}

footer,
footer.bg-navy {
  background:
    linear-gradient(90deg, rgba(196, 154, 26, 0.16) 0 1px, transparent 1px 100%),
    var(--db-black) !important;
  background-size: 84px 100%;
  color: rgba(255, 255, 255, 0.72) !important;
  border-top: 1px solid var(--db-gold);
}

footer h3,
footer h4 {
  color: var(--db-white) !important;
}

footer a:hover {
  color: var(--db-gold-light) !important;
}

main > section {
  position: relative;
}

main > section:not(:last-child) {
  border-bottom: 1px solid rgba(216, 216, 210, 0.72);
}

.bg-gray-50,
.bg-gray-100,
.bg-slate-50 {
  background-color: var(--db-porcelain) !important;
}

.bg-white {
  background-color: var(--db-white) !important;
}

.bg-black,
.bg-gray-900,
.bg-slate-950,
.bg-navy,
.from-gray-900,
.from-slate-950 {
  background-color: var(--db-black) !important;
}

.text-charcoal,
.text-gray-900,
.text-slate-900 {
  color: var(--db-black) !important;
}

.text-gray-600,
.text-gray-500,
.text-slate-500,
.text-slate-600 {
  color: var(--text-muted) !important;
}

.text-gold,
.hover\:text-gold:hover {
  color: var(--db-gold) !important;
}

.bg-gold,
.hover\:bg-gold:hover {
  background-color: var(--db-gold) !important;
}

.hover\:bg-gold-dark:hover {
  background-color: var(--db-gold-dark) !important;
}

.border-gold,
.hover\:border-gold:hover {
  border-color: var(--db-gold) !important;
}

.border-gray-100,
.border-gray-200,
.border-slate-200,
.border-slate-900 {
  border-color: var(--line) !important;
}

.rounded-xl,
.rounded-lg {
  border-radius: 0 !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover,
.hover\:shadow-2xl:hover {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.12) !important;
}

section[class*="bg-gradient"],
div[class*="bg-gradient"] {
  background-image:
    linear-gradient(115deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.10) 100%),
    linear-gradient(135deg, #000000 0%, #191919 100%) !important;
}

a[class*="bg-gold"],
button[class*="bg-gold"] {
  background: var(--db-black) !important;
  color: var(--db-white) !important;
  box-shadow: none;
  border: 1px solid var(--db-black);
}

a[class*="bg-gold"]:hover,
button[class*="bg-gold"]:hover {
  transform: translateY(-1px);
  background: var(--db-charcoal) !important;
}

a[class*="border-2"],
button[class*="border-2"] {
  border-radius: 4px !important;
}

.group:hover .group-hover\:text-gold {
  color: var(--db-gold) !important;
}

.group:hover .group-hover\:bg-gold {
  background-color: var(--db-black) !important;
}

/* India "What we do here" service cards.
   The generic a[class*="bg-gold"] rule above turns their hover state
   charcoal, which makes the (now-dark) hover text unreadable. These cards
   should turn solid gold with black text on hover. */
.service-cards a:hover {
  background: var(--db-gold) !important;
  color: var(--db-black) !important;
  transform: translateY(-2px);
}
.service-cards a:hover h3,
.service-cards a:hover p,
.service-cards a:hover span {
  color: var(--db-black) !important;
}
.service-cards a:hover span[class*="border"] {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.prose,
article {
  color: var(--db-charcoal);
}

input,
select,
textarea {
  border-color: var(--line) !important;
  border-radius: 4px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--db-black) !important;
  box-shadow: 0 0 0 3px rgba(196, 154, 26, 0.18);
}

.homepage-hero {
  background: var(--db-white);
}

.homepage-hero h1,
.editorial-heading {
  letter-spacing: -0.045em;
}

.homepage-hero__image {
  min-height: 460px;
}

.homepage-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.30), transparent 38%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.homepage-kicker,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--db-black);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.homepage-kicker::before,
.section-kicker::before {
  content: "";
  width: 2.75rem;
  height: 2px;
  background: var(--db-gold);
}

.metric-band {
  background: var(--db-black);
  color: var(--db-white);
}

.metric-band .metric-item {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.editorial-card {
  position: relative;
  min-height: 245px;
  border: 1px solid var(--line);
  background: var(--db-white);
  padding: 2rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.editorial-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: var(--db-black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.editorial-card:hover {
  border-color: var(--db-black);
  transform: translateY(-5px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.10);
}

.editorial-card:hover::before {
  transform: scaleX(1);
}

.industry-tile {
  border-left: 3px solid var(--db-gold);
  background: var(--db-white);
}

.insight-card {
  background: var(--db-white);
  border: 1px solid var(--line);
  transition: border-color 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
}

.insight-card:hover {
  border-color: var(--db-black);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
}

.insight-visual {
  background:
    linear-gradient(135deg, rgba(196, 154, 26, 0.22), transparent 42%),
    linear-gradient(135deg, #000 0%, #1c1c1c 100%);
}

.cta-panel {
  background:
    linear-gradient(90deg, rgba(196, 154, 26, 0.18) 0 1px, transparent 1px 100%),
    var(--db-black);
  background-size: 72px 100%;
}

/* ========================
   Scroll Reveal Animations
   ======================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-100 { transition-delay: 0.1s; }
.reveal.delay-200 { transition-delay: 0.2s; }
.reveal.delay-300 { transition-delay: 0.3s; }

/* ============================================================
   PREMIUM LAYER — editorial professional-services typography, motion & media
   ============================================================ */

/* ---- Display typography ---- */
.editorial-heading,
.homepage-hero h1,
h1, h2, h3 {
  font-family: "Inter Tight", Inter, "Segoe UI", sans-serif;
}
.editorial-heading {
  letter-spacing: -0.03em;
}
h1 { letter-spacing: -0.035em; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Section kicker refinement ---- */
.section-kicker,
.homepage-kicker {
  color: var(--db-charcoal);
}

/* ---- Scroll reveal: variants + stagger ---- */
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(1.04); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left.active,
.reveal-right.active,
.reveal-scale.active { opacity: 1; transform: none; }
.reveal { transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }

/* Stagger children of a [data-stagger] container */
[data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
[data-stagger].active > * { opacity: 1; transform: none; }
[data-stagger].active > *:nth-child(1) { transition-delay: 0.00s; }
[data-stagger].active > *:nth-child(2) { transition-delay: 0.07s; }
[data-stagger].active > *:nth-child(3) { transition-delay: 0.14s; }
[data-stagger].active > *:nth-child(4) { transition-delay: 0.21s; }
[data-stagger].active > *:nth-child(5) { transition-delay: 0.28s; }
[data-stagger].active > *:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Media / photo treatments ---- */
.media { position: relative; overflow: hidden; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.media:hover img,
.group:hover .media img { transform: scale(1.06); }

/* Premium photo tile (industries) — image + gold duotone on hover */
.photo-tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 280px;
  background: var(--db-black);
  border: 0;
}
.photo-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: grayscale(0.35) contrast(1.02);
  transition: transform 0.9s var(--ease-out), opacity 0.5s ease, filter 0.5s ease;
}
.photo-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0.82) 100%);
  transition: background 0.5s ease;
}
.photo-tile:hover img { transform: scale(1.07); opacity: 0.62; filter: grayscale(0) contrast(1.05); }
.photo-tile:hover::after {
  background: linear-gradient(180deg, rgba(196,154,26,0.18) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.88) 100%);
}
.photo-tile__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; }
.photo-tile__body h3 { color: var(--db-white) !important; }
.photo-tile__body p { color: rgba(255,255,255,0.78); }
.photo-tile__bar { width: 2.5rem; height: 3px; background: var(--db-gold); margin-bottom: 1rem; transition: width 0.5s var(--ease-out); }
.photo-tile:hover .photo-tile__bar { width: 4.5rem; }

/* Insight card with real photo */
.insight-card .media { height: 14rem; }
.insight-card .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
}
.insight-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  backdrop-filter: blur(4px);
}

/* ---- Hero image: slow ken-burns ---- */
.homepage-hero__image img { animation: kenburns 18s var(--ease-in-out) infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .homepage-hero__image img { animation: none; } }

/* ---- Animated gold underline link ---- */
.link-underline { position: relative; }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: var(--db-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Buttons: lift + gold sweep ---- */
.btn-primary {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--db-black); color: #fff;
  font-weight: 700; letter-spacing: 0.02em;
  padding: 1rem 2rem;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: var(--db-gold);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:hover { color: var(--db-black); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; color: var(--db-black);
  border-bottom: 2px solid var(--db-black);
  padding: 0.6rem 0.2rem;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s var(--ease-out);
}
.btn-ghost:hover { color: var(--db-gold); border-color: var(--db-gold); gap: 0.85rem; }

/* ---- Metric band polish + count animation ---- */
.metric-band { background: var(--db-black); position: relative; overflow: hidden; }
.metric-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(196,154,26,0.14) 0 1px, transparent 1px 100%);
  background-size: 92px 100%;
  opacity: 0.5;
}
.metric-band .metric-item { position: relative; transition: background 0.4s ease; }
.metric-band .metric-item:hover { background: rgba(255,255,255,0.03); }

/* ---- Feature band (image + copy) ---- */
.feature-band { background: var(--db-porcelain); }
.feature-media { position: relative; overflow: hidden; min-height: 460px; }
.feature-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(0,0,0,0.30), transparent 55%);
}

/* ---- Header: scroll-shrink + hide top bar ---- */
#site-header { transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.topbar { transition: max-height 0.45s var(--ease-out), opacity 0.3s ease; max-height: 44px; overflow: hidden; }
#site-header.is-shrunk .topbar { max-height: 0; opacity: 0; }
#site-header.is-shrunk { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
#site-header .nav-row { transition: height 0.35s var(--ease-out); }

/* ---- Scroll progress bar ---- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--db-gold-dark), var(--db-gold), var(--db-gold-light));
  z-index: 60;
  transition: width 0.1s linear;
}

/* ---- Editorial card number accent ---- */
.editorial-card .card-index { color: var(--db-gold); }
.editorial-card:hover .card-index { color: var(--db-gold-dark); }

/* ---- Nav link hover underline (desktop) ---- */
#site-header nav > div > a { position: relative; }
#site-header nav > div > a::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.35rem;
  height: 2px; background: var(--db-gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
#site-header nav > div:hover > a::after { transform: scaleX(1); }

/* ============================================================
   LOW-POLY / FUTURISTIC LAYER — black · white · gold
   ============================================================ */

/* Subtle triangulated grid pattern for dark sections */
.lp-dark {
  background-color: #060606;
  background-image:
    linear-gradient(135deg, rgba(196,154,26,0.05) 0%, transparent 38%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'><path d='M30 0L60 17.3V34.6L30 52L0 34.6V17.3Z' fill='none' stroke='rgba(196,154,26,0.06)' stroke-width='1'/><path d='M30 0L30 52M0 17.3L60 34.6M60 17.3L0 34.6' stroke='rgba(255,255,255,0.025)' stroke-width='1'/></svg>");
  color: #fff;
  position: relative;
}

/* ---- Hero ---- */
.lp-hero {
  position: relative;
  background: #050505;
  overflow: hidden;
  isolation: isolate;
}
.lp-hero canvas.lp-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
}
.lp-hero::after {  /* vignette + readability */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 40%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 40%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,0.30), transparent 30%, rgba(0,0,0,0.55));
}
.lp-hero .lp-hero__content { position: relative; z-index: 2; }
.gold-glow { text-shadow: 0 0 36px rgba(196,154,26,0.35); }

/* ---- Wireframe crystal (decorative + tile icons) ---- */
.lp-crystal { display: block; }
.lp-crystal .facet { transition: opacity 0.5s var(--ease-out), fill 0.5s ease; transform-box: fill-box; transform-origin: center; }
.lp-crystal .edge { stroke: var(--db-gold); }

@keyframes lp-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes lp-spin  { to { transform: rotate(360deg); } }
@keyframes lp-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }
@keyframes lp-shimmer { 0%,100% { opacity: 0.15; } 50% { opacity: 0.55; } }

.lp-float { animation: lp-float 9s var(--ease-in-out) infinite; will-change: transform; }
.lp-spin-slow { animation: lp-spin 40s linear infinite; transform-origin: center; }

/* ---- Faceted crystal tile (industries) ---- */
.crystal-tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 300px;
  padding: 2rem;
  background:
    radial-gradient(140% 120% at 70% 0%, rgba(196,154,26,0.12), transparent 55%),
    linear-gradient(160deg, #141210 0%, #0a0a0a 70%);
  border: 1px solid rgba(196,154,26,0.16);
  transition: transform 0.5s var(--ease-out), border-color 0.5s ease, box-shadow 0.5s ease;
}
.crystal-tile::before { /* faceted grid wash */
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='70' viewBox='0 0 80 70'><path d='M40 0L80 23V47L40 70L0 47V23Z M40 0L40 70M0 23L80 47M80 23L0 47' fill='none' stroke='rgba(196,154,26,0.07)' stroke-width='1'/></svg>");
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out);
}
.crystal-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(196,154,26,0.55);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(196,154,26,0.12);
}
.crystal-tile:hover::before { opacity: 0.85; transform: scale(1.06); }
.crystal-tile .tile-icon { width: 64px; height: 64px; margin-bottom: auto; filter: drop-shadow(0 0 14px rgba(196,154,26,0.35)); transition: transform 0.7s var(--ease-out); }
.crystal-tile:hover .tile-icon { transform: rotate(18deg) scale(1.08); }
.crystal-tile .tile-body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; }
.crystal-tile h3 { color: #fff; }
.crystal-tile p { color: rgba(255,255,255,0.62); }
.crystal-tile .tile-bar { width: 2.4rem; height: 3px; background: var(--db-gold); margin: 1.1rem 0; transition: width 0.5s var(--ease-out); box-shadow: 0 0 12px rgba(196,154,26,0.6); }
.crystal-tile:hover .tile-bar { width: 4.5rem; }

/* ---- Low-poly insight visual ---- */
.lp-insight-visual {
  position: relative; height: 14rem; overflow: hidden;
  background: linear-gradient(150deg, #131210, #060606);
}
.lp-insight-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-insight-visual .facet { opacity: 0.0; animation: lp-shimmer 6s var(--ease-in-out) infinite; }
.insight-card:hover .lp-insight-visual .facet { animation-duration: 3s; }
.lp-insight-visual .tag-glyph {
  position: absolute; right: 1rem; bottom: 0.5rem; z-index: 2;
  font-weight: 900; font-size: 3.4rem; letter-spacing: -0.04em;
  color: rgba(255,255,255,0.10); font-family: "Inter Tight", sans-serif;
}

/* ---- Feature band → low-poly panel ---- */
.feature-band { background: var(--db-porcelain); }
.feature-media { position: relative; overflow: hidden; min-height: 460px; background: #060606; }
.feature-media canvas.lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 80% at 60% 50%, transparent 30%, rgba(0,0,0,0.45));
}
.feature-media .lp-badge {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 190px; height: 190px;
}

/* ---- Glass card (futuristic) ---- */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

/* ---- Section corner accent ---- */
.lp-corner { position: relative; }
.lp-corner::before, .lp-corner::after {
  content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none;
  border-color: var(--db-gold); opacity: 0.6;
}
.lp-corner::before { top: 18px; left: 18px; border-top: 2px solid; border-left: 2px solid; }
.lp-corner::after { bottom: 18px; right: 18px; border-bottom: 2px solid; border-right: 2px solid; }

/* ---- CTA low-poly ---- */
.cta-panel { position: relative; overflow: hidden; }
.cta-panel canvas.lp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.6; }
.cta-panel > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .lp-float, .lp-spin-slow, .lp-crystal .facet, .lp-insight-visual .facet { animation: none !important; }
}

/* ---- FAQ accordion (native <details>) ---- */
.faq-d { border: 1px solid var(--line); background: var(--db-white); transition: border-color 0.3s ease; }
.faq-d + .faq-d { margin-top: 0.5rem; }
.faq-d[open] { border-color: var(--db-gold); }
.faq-d > summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 1.75rem;
  font-weight: 800; font-size: 1.05rem; color: var(--db-black);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: color 0.25s ease;
}
.faq-d > summary::-webkit-details-marker { display: none; }
.faq-d > summary::after {
  content: "+"; color: var(--db-gold); font-weight: 800; font-size: 1.4rem; line-height: 1;
  flex-shrink: 0; transition: transform 0.3s var(--ease-out);
}
.faq-d[open] > summary::after { transform: rotate(45deg); }
.faq-d > summary:hover { color: var(--db-gold); }
.faq-d .faq-body { padding: 0 1.75rem 1.5rem; color: var(--text-muted); font-size: 0.92rem; line-height: 1.75; }

/* Forum quick-facts strip */
.forum-fact { border-left: 2px solid var(--db-gold); padding-left: 1rem; }

/* ---- Keyboard focus indicator ----
   gold-dark passes non-text contrast (3:1) on both white (5.1:1) and black
   (4.1:1), so one ring works on every surface. */
:focus-visible {
  outline: 2px solid var(--db-gold-dark);
  outline-offset: 2px;
}

/* ---- WCAG AA: small gold text ----
   Gold #C49A1A reads ~2.6:1 on white, below the 4.5:1 minimum for normal
   text. Kickers, category labels and "Read more" links set in text-xs /
   text-sm default to gold-dark (5.1:1 on white); true gold is restored on
   dark surfaces, where it reads 8.2:1. */
.text-gold.text-xs,
.text-gold.text-sm {
  color: var(--db-gold-dark) !important;
}

.bg-black .text-gold.text-xs,
.bg-black .text-gold.text-sm,
.lp-dark .text-gold.text-xs,
.lp-dark .text-gold.text-sm,
.lp-hero .text-gold.text-xs,
.lp-hero .text-gold.text-sm,
.metric-band .text-gold.text-xs,
.metric-band .text-gold.text-sm {
  color: var(--db-gold) !important;
}

/* Cards that sweep to a gold background hand the label to group-hover:text-black;
   keep that hover handoff winning over the two rules above. */
.group:hover .group-hover\:text-black.text-gold.text-xs,
.group:hover .group-hover\:text-black.text-gold.text-sm {
  color: var(--db-black) !important;
}

/* ============================================================
   MOBILE LAYER
   Everything below fires only under Tailwind's breakpoints
   (md = 768px, lg = 1024px), so md:/lg: desktop rendering is
   untouched. The site was authored desktop-first; this layer
   adapts the 779 generated pages for phones without editing
   them individually.
   ============================================================ */

/* Below lg the desktop nav is hidden and the compact header shows.
   Never let header chrome (or any stray wide element) force the page
   wider than the screen — that clipped every page at phone width. */
@media (max-width: 1023.98px) {
  html,
  body {
    overflow-x: clip;
  }
  #site-header .nav-row {
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  /* Heroes: no fixed viewport heights on a phone — the 80/88vh hero
     bands become content + padding. (min-h-screen on <body> keeps the
     sticky footer and is excluded.) */
  [class*="min-h-"]:not(.min-h-screen) {
    min-height: 0 !important;
  }

  /* Editorial type scale: desktop's display sizes wrap badly at 390px.
     Only font-size is overridden — unitless leading-* classes scale
     with it automatically. */
  .text-7xl {
    font-size: 2.75rem !important;
  }
  .text-6xl {
    font-size: 2.5rem !important;
  }
  .text-5xl {
    font-size: 2.125rem !important;
  }
  .text-4xl {
    font-size: 1.75rem !important;
  }

  /* Section rhythm: tighten the desktop's 6-8rem vertical bands */
  .py-32 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  .py-28 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .py-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-32 {
    padding-top: 4.5rem !important;
  }
  .pt-28 {
    padding-top: 4rem !important;
  }
  .pt-24 {
    padding-top: 3.5rem !important;
  }
  .pt-20 {
    padding-top: 3rem !important;
  }
  .pb-32 {
    padding-bottom: 4.5rem !important;
  }
  .pb-28 {
    padding-bottom: 4rem !important;
  }
  .pb-24 {
    padding-bottom: 3.5rem !important;
  }
  .pb-20 {
    padding-bottom: 3rem !important;
  }
  .db-section {
    padding: 64px 0;
  }

  /* Cards: deep desktop panels read as walls of padding on a phone */
  .p-12 {
    padding: 1.75rem !important;
  }
  .p-10 {
    padding: 1.5rem !important;
  }
  .px-12 {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
  .px-10 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Long unbreakable strings (email-address CTAs) may break rather
     than push past the viewport on narrow phones; nowrap CTAs may wrap */
  a.whitespace-nowrap {
    white-space: normal !important;
  }
  a[href^="mailto:"] {
    overflow-wrap: anywhere;
  }

  /* Stacked grids: a 5rem column gap becomes a 5rem vertical void
     once the grid collapses to one column */
  .gap-20 {
    gap: 2.5rem !important;
  }
  .gap-16 {
    gap: 2rem !important;
  }

  /* Ultra-wide kicker tracking pushes short labels onto two lines */
  [class*="tracking-[0.4em]"] {
    letter-spacing: 0.28em !important;
  }

  /* Decorative crystal/canvas tiles overdraw the viewport by a few px
     on the homepage — contain them */
  .feature-media,
  .lp-corner {
    max-width: 100%;
    overflow: hidden;
  }
}