/* ==========================================================================
   Digital Realtors — Base layer
   Reset, typography, layout primitives, motion utilities.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dr-nav-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--dr-bg);
  color: var(--dr-text);
  font-family: var(--dr-font-body);
  font-size: var(--dr-t-base);
  line-height: var(--dr-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--dr-dur-base) var(--dr-ease), color var(--dr-dur-base) var(--dr-ease);
}

/* Bengali content keeps its own face */
:lang(bn), .dr-bn { font-family: var(--dr-font-bn); }

h1, h2, h3, h4, h5 {
  font-family: var(--dr-font-display);
  font-weight: 700;
  line-height: var(--dr-lh-tight);
  letter-spacing: var(--dr-track-tight);
  color: var(--dr-text);
  margin: 0 0 var(--dr-s-4);
  text-wrap: balance;
}
h1 { font-size: var(--dr-t-4xl); font-weight: 800; }
h2 { font-size: var(--dr-t-3xl); font-weight: 800; }
h3 { font-size: var(--dr-t-xl); }
h4 { font-size: var(--dr-t-lg); }

p { margin: 0 0 var(--dr-s-4); color: var(--dr-text-soft); text-wrap: pretty; }
a { color: var(--dr-primary); text-decoration: none; transition: color var(--dr-dur-fast) var(--dr-ease); }
a:hover { color: var(--dr-accent); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--dr-border); margin: var(--dr-s-10) 0; }

::selection { background: var(--dr-accent); color: #fff; }

/* --- Focus: always visible, never ugly ---------------------------------- */
:focus-visible {
  outline: 3px solid var(--dr-accent);
  outline-offset: 3px;
  border-radius: var(--dr-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* --- Skip link ---------------------------------------------------------- */
.dr-skip {
  position: absolute;
  left: var(--dr-s-4);
  top: -100px;
  z-index: var(--dr-z-toast);
  background: var(--dr-primary);
  color: #fff;
  padding: var(--dr-s-3) var(--dr-s-5);
  border-radius: var(--dr-r-sm);
  font-weight: 600;
  transition: top var(--dr-dur-fast) var(--dr-ease);
}
.dr-skip:focus { top: var(--dr-s-4); color: #fff; }

.dr-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.dr-container {
  width: 100%;
  max-width: var(--dr-container);
  margin-inline: auto;
  padding-inline: var(--dr-gutter);
}
.dr-container--wide { max-width: var(--dr-container-wide); }

.dr-section {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7.5rem);
  /* Clips the decorative orbs without creating a scroll container,
     so position:sticky inside a section keeps working (overflow:hidden would break it). */
  overflow-x: clip;
}
/* Below-the-fold sections skip layout/paint until near viewport */
.dr-section--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.dr-section--alt { background: var(--dr-bg-alt); }
.dr-section--invert {
  background: var(--dr-grad-night);
  color: var(--dr-text-invert);
}
.dr-section--invert h1, .dr-section--invert h2, .dr-section--invert h3 { color: #fff; }
.dr-section--invert p { color: rgba(233, 239, 249, .76); }

.dr-grid { display: grid; gap: var(--dr-s-6); }
/* A true 50/50 split — auto-fit would collapse this into thirds on wide screens. */
.dr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .dr-grid--2 { grid-template-columns: 1fr; } }
.dr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.dr-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dr-stack > * + * { margin-top: var(--dr-s-4); }
.dr-center { text-align: center; }
.dr-measure { max-width: 62ch; }
.dr-measure-narrow { max-width: 48ch; }
.dr-mx-auto { margin-inline: auto; }

/* ==========================================================================
   Section heading block — swoosh underline from the logo
   ========================================================================== */
.dr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--dr-s-2);
  font-family: var(--dr-font-display);
  font-size: var(--dr-t-xs);
  font-weight: 700;
  letter-spacing: var(--dr-track-wide);
  text-transform: uppercase;
  color: var(--dr-module);
  background: var(--dr-module-soft);
  padding: 7px var(--dr-s-4);
  border-radius: var(--dr-r-pill);
  margin-bottom: var(--dr-s-4);
}
.dr-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dr-section--invert .dr-eyebrow {
  color: var(--dr-orange-400);
  background: rgba(242, 107, 33, .14);
}

/* Swoosh: the ellipse sweeping under the towers in the logo */
.dr-swoosh { position: relative; display: inline-block; }
.dr-swoosh::after {
  content: "";
  position: absolute;
  left: 2%; right: 2%;
  bottom: -.22em;
  height: .38em;
  border-radius: 50%;
  background: var(--dr-grad-accent);
  opacity: .9;
  transform: scaleX(var(--dr-swoosh-x, 1));
  transform-origin: left center;
}

.dr-lede {
  font-size: var(--dr-t-lg);
  color: var(--dr-text-soft);
  line-height: 1.6;
}

/* ==========================================================================
   Ambient backdrops — blueprint grid, glow orbs
   ========================================================================== */
.dr-blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--dr-blueprint) 1px, transparent 1px),
    linear-gradient(90deg, var(--dr-blueprint) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 35%, transparent 78%);
}
.dr-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  will-change: transform;
}
.dr-orb--blue   { background: radial-gradient(circle, var(--dr-blue-400), transparent 68%); }
.dr-orb--orange { background: radial-gradient(circle, var(--dr-orange-500), transparent 68%); }

/* ==========================================================================
   Motion utilities — driven by dr-motion.js (IntersectionObserver)
   Elements start hidden ONLY when JS is active (html.dr-js), so a
   no-JS visitor still sees everything.
   ========================================================================== */
.dr-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--dr-rv-y, 26px), 0) scale(var(--dr-rv-s, 1));
  transition:
    opacity var(--dr-dur-slow) var(--dr-ease-out),
    transform var(--dr-dur-slow) var(--dr-ease-out);
  transition-delay: var(--dr-rv-delay, 0ms);
  will-change: transform, opacity;
}
.dr-js [data-reveal="left"]  { --dr-rv-y: 0; transform: translate3d(-34px, 0, 0); }
.dr-js [data-reveal="right"] { --dr-rv-y: 0; transform: translate3d(34px, 0, 0); }
.dr-js [data-reveal="scale"] { --dr-rv-y: 14px; --dr-rv-s: .94; }
.dr-js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}
/* Fallback state: shown immediately, independent of transitions running.
   Used when the observer can't report (suspended tab, no IO support,
   reduced motion) so content can never be left invisible. */
.dr-js [data-reveal].dr-shown {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .dr-js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Scroll progress — a crane cable filling as you descend */
.dr-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--dr-grad-accent);
  z-index: var(--dr-z-toast);
  pointer-events: none;
}

/* Utilities */
.dr-hide { display: none !important; }
@media (max-width: 860px)  { .dr-hide\@md { display: none !important; } }
@media (min-width: 861px)  { .dr-show\@md { display: none !important; } }