/* Burhan Services redesign - core design system and components */
:root {
  --brand-navy: #254678;
  --brand-navy-dark: #10233f;
  --brand-blue: #3b6fa8;
  --brand-gold: #d8a13b;
  --ink: #172033;
  --muted: #657184;
  --line: rgba(23, 32, 51, 0.12);
  --surface: #ffffff;
  --soft: #f5f7fb;
  --mist: #eef3f7;
  --success: #1f8a70;
  --shadow: 0 24px 70px rgba(16, 35, 63, 0.14);
  --radius: 8px;
  --radius-lg: 18px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  background: var(--surface);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Lightweight local Bootstrap-grid fallback for offline/CDN-safe rendering. */
.container {
  width: min(100% - 32px, 1140px);
  margin-inline: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.row > * {
  width: 100%;
  max-width: 100%;
  padding-inline: 12px;
}
.g-3 { row-gap: 1rem; }
.g-4 { row-gap: 1.5rem; }
.g-5 { row-gap: 3rem; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-center { justify-content: center; }
.text-center { text-align: center; }
.text-lg-end { text-align: inherit; }
.mx-auto { margin-inline: auto; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1.5rem; }
.pt-0 { padding-top: 0 !important; }
.m-0 { margin: 0 !important; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }

@media (min-width: 576px) {
  .col-sm-4 { width: 33.333333%; }
  .col-sm-6 { width: 50%; }
  .flex-sm-row { flex-direction: row; }
  .align-items-sm-center { align-items: center; }
}

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; width: auto; }
  .col-md-4 { width: 33.333333%; }
  .col-md-6 { width: 50%; }
  .flex-md-row { flex-direction: row; }
}

@media (min-width: 992px) {
  .col-lg-2 { width: 16.666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333333%; }
  .col-lg-5 { width: 41.666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.333333%; }
  .col-lg-8 { width: 66.666667%; }
  .text-lg-end { text-align: right; }
}

@media (min-width: 1200px) {
  .col-xl-4 { width: 33.333333%; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; color: var(--muted); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  line-height: 1.08;
  margin: 0 0 1rem;
  letter-spacing: 0;
}

h1, h2, .display-title { font-family: var(--font-display); }
h1 { font-size: clamp(2.45rem, 4.8vw, 4.35rem); }
h2 { font-size: clamp(1.9rem, 3vw, 3.05rem); }
h3 { font-size: 1.5rem; }

.text-gold { color: var(--brand-gold); }
.text-navy { color: var(--brand-navy); }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  color: var(--brand-navy);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero .eyebrow,
.section-dark .eyebrow {
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
}
.hero .eyebrow::before,
.section-dark .eyebrow::before {
  background: var(--brand-gold);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--brand-gold);
}

.section { padding: 110px 0; position: relative; }
.section-soft { background: var(--soft); }
.section-dark {
  background:
    linear-gradient(135deg, rgba(16, 35, 63, .96), rgba(37, 70, 120, .94)),
    url("https://images.unsplash.com/photo-1518709268805-4e9042af2176?auto=format&fit=crop&w=1800&q=80") center/cover;
  color: #fff;
}
.section-dark h2, .section-dark h3, .section-dark p { color: #fff; }
.section-dark p { opacity: .82; }

.container-wide { width: min(100% - 32px, 1360px); margin-inline: auto; }
.lead-copy {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #dce8f6;
  max-width: 760px;
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand-gold);
  color: #111827;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(216, 161, 59, .28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-premium:hover { transform: translateY(-2px); background: #e5b65b; box-shadow: 0 20px 50px rgba(216, 161, 59, .36); }
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: 0 1.2rem;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.08);
  transition: background .25s ease, transform .25s ease;
}
.btn-outline-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--brand-navy);
  font-weight: 800;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.site-header.is-scrolled {
  padding: 10px 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 38px rgba(16, 35, 63, .1);
}
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-weight: 900;
  color: #fff;
}
.is-scrolled .brand, .site-header.header-light .brand { color: var(--brand-navy-dark); }
.brand-logo {
  width: 118px;
  max-height: 54px;
  object-fit: contain;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 30px rgba(16, 35, 63, .16);
}
.brand span { display: block; line-height: 1.1; }
.brand small {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}
.brand-logo + span { display: none; }
.mobile-call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #111827;
  box-shadow: 0 10px 28px rgba(216, 161, 59, .28);
}
.phone-glyph {
  font-size: 1.2rem;
  line-height: 1;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu a {
  color: rgba(255,255,255,.88);
  font-size: .92rem;
  font-weight: 800;
  transition: color .2s ease;
}
.is-scrolled .nav-menu a, .header-light .nav-menu a { color: var(--ink); }
.nav-menu a:hover, .nav-menu a.active { color: var(--brand-gold); }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.nav-toggle-lines {
  display: grid;
  gap: 4px;
  width: 18px;
}
.nav-toggle-lines span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.is-scrolled .nav-toggle, .header-light .nav-toggle { color: var(--brand-navy); border-color: var(--line); }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 72px;
  background:
    linear-gradient(90deg, rgba(9, 21, 39, .96) 0%, rgba(12, 25, 46, .82) 48%, rgba(12, 25, 46, .52) 100%),
    url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=2200&q=80") center/cover;
  color: #fff;
  overflow: hidden;
  animation: heroPhoto 18s ease-in-out infinite alternate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 16% 24%, rgba(216, 161, 59, .32), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(59, 111, 168, .34), transparent 28%),
    radial-gradient(circle at 64% 82%, rgba(255, 255, 255, .18), transparent 24%);
  filter: blur(6px);
  animation: heroAura 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.7), transparent 78%);
  animation: heroGrid 24s linear infinite;
  pointer-events: none;
}
.hero .container-wide { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 820px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0 2.4rem; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1px;
  max-width: 980px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.stat {
  padding: 1.2rem;
  background: rgba(255,255,255,.06);
}
.stat strong {
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}
.stat span { display: block; color: rgba(255,255,255,.72); font-size: .88rem; margin-top: .45rem; }

.image-stack { position: relative; min-height: 560px; }
.image-stack .image-main,
.image-stack .image-float {
  position: absolute;
  border-radius: var(--radius-lg);
  object-fit: cover;
  box-shadow: var(--shadow);
}
.image-main { inset: 0 10% 80px 0; width: 82%; height: calc(100% - 80px); }
.image-float { right: 0; bottom: 0; width: 48%; height: 260px; border: 10px solid #fff; }
.glass-note {
  position: absolute;
  left: 26px;
  bottom: 34px;
  max-width: 260px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(16, 35, 63, .16);
}
.glass-note strong { display: block; color: var(--brand-navy-dark); }
.glass-note span { color: var(--muted); font-size: .9rem; }

.feature-list { display: grid; gap: .85rem; margin-top: 1.5rem; }
.feature-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  color: var(--muted);
}
.feature-list i { color: var(--brand-gold); margin-top: .25rem; }

.service-card,
.choice-card,
.testimonial-card,
.faq-item,
.contact-card,
.product-card,
.process-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 18px 50px rgba(16, 35, 63, .07);
}
.service-card {
  height: 100%;
  padding: 1.45rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-6px); border-color: rgba(216, 161, 59, .45); box-shadow: var(--shadow); }
.icon-box {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-blue));
  margin-bottom: 1.2rem;
}
.service-card p { min-height: 82px; }

.split-band {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(16, 35, 63, .96), rgba(37, 70, 120, .88)),
    url("https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?auto=format&fit=crop&w=1800&q=80") center/cover;
  color: #fff;
}
.split-band h2, .split-band p { color: #fff; }
.split-band-inner { padding: clamp(2rem, 6vw, 5rem); }

.choice-card { padding: 1.35rem; height: 100%; }
.choice-card i { color: var(--brand-gold); font-size: 1.7rem; margin-bottom: .9rem; }

.gallery-toolbar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 2rem;
}
.filter-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: .65rem 1rem;
  font-weight: 800;
  color: var(--muted);
}
.filter-btn.active, .filter-btn:hover { color: #fff; background: var(--brand-navy); border-color: var(--brand-navy); }
.gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  height: 360px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.interlock-visual-col {
  align-self: stretch;
}
.interlock-visual {
  height: 100%;
  min-height: 520px;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-caption {
  position: absolute;
  inset: auto 16px 16px 16px;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(16, 35, 63, .82);
  color: #fff;
  backdrop-filter: blur(12px);
}
.gallery-caption strong { display: block; }
.gallery-caption span { color: rgba(255,255,255,.72); font-size: .86rem; }

.process-card { padding: 1.35rem; position: relative; height: 100%; }
.process-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  margin-bottom: 1rem;
  background: var(--brand-gold);
  color: #111827;
  font-weight: 900;
}

.testimonial-card { padding: 1.7rem; min-height: 270px; }
.google-review-card {
  position: relative;
  overflow: hidden;
}
.google-review-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #4285f4 0 25%, #db4437 25% 50%, #f4b400 50% 75%, #0f9d58 75%);
}
.review-source {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
  color: var(--muted);
  font-weight: 800;
}
.review-source i { color: #4285f4; }
.stars { color: var(--brand-gold); margin-bottom: 1rem; }
.quote { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); line-height: 1.35; }
.author { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem; }
.author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

.faq-item { overflow: hidden; margin-bottom: .85rem; }
.faq-question {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 1.2rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}
.faq-answer { display: none; padding: 0 1.35rem 1.25rem; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-question i { transform: rotate(45deg); }
.faq-question i { transition: transform .2s ease; }

.cta-banner {
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(16,35,63,.96), rgba(37,70,120,.9)),
    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80") center/cover;
  color: #fff;
  box-shadow: var(--shadow);
}
.cta-banner h2, .cta-banner p { color: #fff; }
.cta-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: center;
}

.page-hero {
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 70px;
  background:
    linear-gradient(90deg, rgba(16, 35, 63, .94), rgba(16, 35, 63, .58)),
    var(--hero-image, url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80")) center/cover;
  color: #fff;
}
.page-hero h1, .page-hero p { color: #fff; }
.breadcrumb-lite { color: rgba(255,255,255,.76); font-weight: 800; margin-bottom: .8rem; }

.product-card { padding: 1.15rem; height: 100%; }
.product-card h3 { font-size: 1.5rem; }
.product-card ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }

.contact-card { padding: 1.5rem; height: 100%; }
.contact-form-card {
  padding: clamp(1.25rem, 3vw, 2rem);
}
.contact-form-card label {
  display: block;
  margin-bottom: .45rem;
  color: var(--ink);
  font-weight: 800;
  font-size: .92rem;
}
.contact-form-card .btn-premium {
  min-width: 190px;
}
.contact-line { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; }
.contact-line i { color: var(--brand-gold); margin-top: .25rem; }
.form-control, .form-select {
  width: 100%;
  min-height: 52px;
  border-radius: var(--radius);
  border-color: var(--line);
}
textarea.form-control { min-height: 150px; }
.form-control:focus, .form-select:focus { border-color: var(--brand-navy); box-shadow: 0 0 0 .2rem rgba(37,70,120,.12); }

.map-frame {
  width: 100%;
  min-height: 330px;
  border: 0;
  border-radius: var(--radius-lg);
  filter: saturate(.9);
}

.site-footer {
  background: #0f1f36;
  color: rgba(255,255,255,.72);
  padding-top: 78px;
}
.site-footer h3, .site-footer h4 { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-links a:hover { color: var(--brand-gold); }
.sub-footer {
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0;
  font-size: .9rem;
}
.socials { display: flex; gap: .65rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
}
.socials a:hover { background: var(--brand-gold); color: #111827; }
.footer-quote {
  min-height: 46px;
  padding-inline: 1rem;
  margin-top: .35rem;
}
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 18px 44px rgba(37, 211, 102, .36);
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 22px 54px rgba(37, 211, 102, .44);
}

.not-found {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 0 60px;
  background:
    linear-gradient(135deg, rgba(16,35,63,.96), rgba(37,70,120,.88)),
    url("https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?auto=format&fit=crop&w=1800&q=80") center/cover;
  color: #fff;
}
.not-found h1 { color: #fff; font-size: clamp(4rem, 12vw, 9rem); line-height: .85; }
.not-found p { color: rgba(255,255,255,.78); }

.swiper-pagination-bullet-active { background: var(--brand-navy); }
.glightbox-clean .gslide-description { background: #fff; }

@keyframes heroAura {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .78; }
  50% { transform: translate3d(3%, 2%, 0) scale(1.04); opacity: .94; }
  100% { transform: translate3d(1%, -3%, 0) scale(1.08); opacity: .82; }
}

@keyframes heroGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 74px 74px, 74px 74px; }
}

@keyframes heroPhoto {
  from { background-position: 0 0, center center; background-size: auto, 108%; }
  to { background-position: 0 0, center 44%; background-size: auto, 116%; }
}