/* ==========================================================================
   DYUTI DIGITAL SERVICES — DESIGN SYSTEM
   One file, organized in clearly labeled sections:
   1. Reset & base
   2. Design tokens (custom properties)
   3. Typography
   4. Layout / containers / section rhythm
   5. Buttons
   6. Badges / eyebrows / section headings
   7. Cards (service, USP, FAQ)
   8. Links
   9. Forms
   10. Breadcrumbs
   11. Navigation (header, desktop nav, dropdown, mobile nav, language switch)
   12. Sticky mobile CTA bar
   13. Hero
   14. CTA banners / bands
   15. Footer
   16. Process steps
   17. Utilities & animation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* Visible focus states everywhere — accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   Palette sampled directly from Dyuti's approved printed brand assets
   (visiting card + pamphlet) so on-screen brand matches on-paper brand.
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand colors --- */
  --color-navy-900:   #0D2B61; /* Deep Navy — headers, footer, dark bands */
  --color-navy-800:   #12356F;
  --color-blue-700:   #1E4FA3; /* Royal Blue — headings, primary links */
  --color-blue-500:   #2E8BF0; /* Bright Blue — accents, icon fills, focus */
  --color-blue-100:   #E7F1FD; /* pale blue tint for icon badges */
  --color-orange-600: #D9600F; /* Orange — primary CTA (Call Now) */
  --color-orange-500: #E36414;
  --color-orange-100: #FDECDF;
  --color-gold-500:   #E7A616; /* Gold — accents on dark backgrounds */
  --color-gold-300:   #F0C24B;
  --color-white:      #FFFFFF;
  --color-grey-50:    #F7F9FB;
  --color-grey-100:   #F1F4F8; /* Light Grey — alternating section bg */
  --color-grey-200:   #E4E9F0;
  --color-grey-400:   #9AA6B7;
  --color-grey-600:   #5B6472; /* secondary body text */
  --color-ink:        #16233D; /* primary body text, softer than pure navy */

  /* WhatsApp uses its universally recognized brand green so the CTA reads
     instantly — treated as a utility/recognition color, not a core brand color. */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1DA851;

  --color-success: #1E8A5B;
  --color-border:  var(--color-grey-200);

  /* --- Typography ---
     System-first stack: zero network requests, no flash-of-invisible-text,
     best possible performance on shared hosting. 'Poppins' / 'Noto Sans'
     are declared first so that if real font files are supplied and
     self-hosted in a later step, they take over automatically with no
     further CSS changes — see note at bottom of this file. */
  --font-display: 'Poppins', 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Noto Sans', 'Segoe UI', Roboto, system-ui, -apple-system, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-h1:      clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --fs-h2:      clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --fs-h3:      clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Layout --- */
  --container-width: 1200px;
  --container-pad: 1.25rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Shadow / elevation --- */
  --shadow-sm: 0 1px 2px rgba(13, 43, 97, 0.06), 0 1px 1px rgba(13, 43, 97, 0.04);
  --shadow-md: 0 8px 24px rgba(13, 43, 97, 0.10);
  --shadow-lg: 0 20px 45px rgba(13, 43, 97, 0.16);

  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(.4,0,.2,1);

  --header-height: 76px;
  --sticky-cta-height: 60px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, .h1-style { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-navy-900); }
h2, .h2-style { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.005em; color: var(--color-navy-900); }
h3, .h3-style { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--color-navy-900); }
.text-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.06; letter-spacing: -0.015em; color: var(--color-navy-900); }

p { color: var(--color-grey-600); }
.lead { font-size: var(--fs-body-lg); color: var(--color-grey-600); line-height: 1.7; }
small, .text-small { font-size: var(--fs-small); }
.text-micro { font-size: var(--fs-micro); letter-spacing: 0.04em; }

strong { font-weight: 700; color: var(--color-ink); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-8); }
.section--bg-grey { background: var(--color-grey-100); }
.section--bg-navy { background: var(--color-navy-900); color: var(--color-white); }
.section--bg-navy p { color: rgba(255,255,255,0.78); }
.section--bg-navy h2, .section--bg-navy h3 { color: var(--color-white); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .grid--12 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1079px) { .grid--12 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stack { display: flex; flex-direction: column; min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.5rem;
  min-height: 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--call {
  background: var(--color-orange-600);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--call:hover { background: #C3560D; box-shadow: var(--shadow-md); }

.btn--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--whatsapp:hover { background: var(--color-whatsapp-dark); box-shadow: var(--shadow-md); }

.btn--quote {
  background: var(--color-white);
  color: var(--color-navy-900);
  border-color: var(--color-white);
}
.btn--quote:hover { background: transparent; color: var(--color-white); }

.btn--outline {
  background: transparent;
  color: var(--color-navy-900);
  border-color: var(--color-navy-900);
}
.btn--outline:hover { background: var(--color-navy-900); color: var(--color-white); }

.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0.6rem 1.1rem; font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   6. BADGES / EYEBROWS / SECTION HEADINGS
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange-600);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-orange-600), var(--color-gold-500));
}
.section--bg-navy .eyebrow { color: var(--color-gold-300); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.section-head { max-width: 700px; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-3); }
.section-head p { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card iframe { display: block; width: 100%; max-width: 100%; box-sizing: border-box; }

/* Service card */
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: var(--space-2); }
.service-card p { flex-grow: 1; font-size: var(--fs-small); }
.service-card__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-blue-700);
}
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.service-card__link:hover svg { transform: translateX(3px); }

/* USP / value proposition card */
.usp-card { text-align: left; }
.usp-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1.5px solid var(--color-gold-500);
  color: var(--color-gold-300);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.usp-card__icon svg { width: 22px; height: 22px; }
.usp-card h3 { font-size: var(--fs-body-lg); }
.usp-card p { font-size: var(--fs-small); }

/* FAQ card */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: var(--space-4); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--space-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy-900);
  font-size: var(--fs-body);
}
.faq-item__q .icon-plus { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-orange-600); transition: transform var(--transition-base); }
.faq-item[open] .faq-item__q .icon-plus { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--space-5) var(--space-5); }
.faq-item__a p { font-size: var(--fs-small); }
.faq-item__q::-webkit-details-marker { display: none; }

/* --------------------------------------------------------------------------
   8. LINKS
   -------------------------------------------------------------------------- */
.link-inline {
  color: var(--color-blue-700);
  font-weight: 600;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--transition-fast);
}
.link-inline:hover { border-color: currentColor; }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.form-field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-navy-900);
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--fs-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 4px var(--color-blue-100);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.form-hint { font-size: var(--fs-micro); color: var(--color-grey-400); }
.form-success {
  display: none;
  background: #EAF7F0;
  border: 1.5px solid var(--color-success);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.form-success.is-visible { display: block; }
.form-success h3 { color: var(--color-success); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   10. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs { padding-block: var(--space-4); background: var(--color-grey-50); border-bottom: 1px solid var(--color-border); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-small); }
.breadcrumbs a { color: var(--color-grey-600); font-weight: 600; }
.breadcrumbs a:hover { color: var(--color-blue-700); }
.breadcrumbs li[aria-current="page"] { color: var(--color-navy-900); font-weight: 600; }
.breadcrumbs .sep { color: var(--color-grey-400); }

/* --------------------------------------------------------------------------
   11. NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex-shrink: 0; }
.brand__home-link { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: inherit; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--color-navy-900); white-space: nowrap; }
.brand__tagline { font-size: 0.7rem; color: var(--color-grey-600); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .brand__lang { display: none; }

/* NOTE: .container caps at 1200px (var(--container-width)), so the header's
   available width never actually grows beyond ~1160px content area no
   matter how wide the browser window is. The compact spacing below is
   therefore the permanent desktop-nav treatment from 1180px up, not a
   temporary "narrow screen" band — there is no wider breakpoint where
   the full nav + lang switch + 3 CTAs would fit more comfortably. */
@media (min-width: 1180px) {
  .brand__name { font-size: 0.95rem; }
  .brand__tagline { display: none; }
  .brand .brand__lang { display: flex; font-size: 0.65rem; gap: 0.3rem; margin-top: 1px; font-weight: 700; }
}

.main-nav { display: none; }
@media (min-width: 1180px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }
  /* The language switcher's /bn/ target doesn't exist until the Bengali
     build stage. It's fully available in the mobile menu meanwhile —
     omitting it from the desktop bar here is what makes the full nav +
     3 header CTAs fit within the 1200px container without crowding. */
  .main-nav .lang-switch { display: none; }
  .main-nav > ul { display: flex; align-items: center; gap: var(--space-3); flex-wrap: nowrap; }
  .main-nav a.nav-link {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-ink);
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }
  .main-nav a.nav-link:hover,
  .main-nav a.nav-link[aria-current="page"] { color: var(--color-blue-700); border-color: var(--color-orange-600); }
  .header-ctas { gap: var(--space-2); }
}
@media (min-width: 1440px) {
  .header-ctas { gap: var(--space-3); }
}

/* Services dropdown (desktop) */
.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  color: var(--color-ink); padding-block: var(--space-2);
}
.dropdown-toggle svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.dropdown-menu.is-open {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink);
}
.dropdown-menu a:hover { background: var(--color-grey-100); color: var(--color-blue-700); }

.header-ctas { display: none; }
@media (min-width: 1180px) {
  .header-ctas { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
}

.lang-switch { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); font-weight: 700; }
.lang-switch a { color: var(--color-grey-400); }
.lang-switch a[aria-current="true"] { color: var(--color-navy-900); }
.lang-switch span { color: var(--color-grey-200); }
.lang-switch__current { color: var(--color-navy-900) !important; }

/* Mobile nav toggle */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
}
@media (min-width: 1180px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; color: var(--color-navy-900); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--container-pad);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}
.mobile-nav__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: none; }
.mobile-nav__close svg { width: 20px; height: 20px; }
.mobile-nav__body { padding: var(--space-6) var(--container-pad); flex-grow: 1; }
.mobile-nav__body > ul > li { border-bottom: 1px solid var(--color-grey-100); }
.mobile-nav__body a.nav-link {
  display: block; padding: var(--space-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-navy-900);
}
.mobile-services-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: var(--space-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-navy-900);
}
.mobile-services-toggle svg { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.mobile-services-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-services-list { display: none; padding-bottom: var(--space-3); }
.mobile-services-list.is-open { display: block; }
.mobile-services-list a { display: block; padding: var(--space-2) 0 var(--space-2) var(--space-4); font-size: var(--fs-small); font-weight: 600; color: var(--color-grey-600); }
.mobile-nav__ctas { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.mobile-nav__lang { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   12. STICKY MOBILE CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--sticky-cta-height);
  box-shadow: 0 -4px 16px rgba(13,43,97,0.14);
}
@media (min-width: 1180px) { .sticky-cta { display: none; } }
.sticky-cta a {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  color: var(--color-white);
}
.sticky-cta a svg { width: 18px; height: 18px; }
.sticky-cta__call { background: var(--color-orange-600); }
.sticky-cta__whatsapp { background: var(--color-whatsapp); }
body.has-sticky-cta { padding-bottom: var(--sticky-cta-height); }
@media (min-width: 1180px) { body.has-sticky-cta { padding-bottom: 0; } }

/* --------------------------------------------------------------------------
   13. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, #123a7d 60%, var(--color-blue-700) 130%);
  color: var(--color-white);
  padding-block: var(--space-9) var(--space-8);
}
.hero__inner {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); }
}
.hero__eyebrow { color: var(--color-gold-300); }
.hero__eyebrow::before { background: linear-gradient(90deg, var(--color-gold-500), var(--color-orange-500)); }
.hero h1 { color: var(--color-white); margin-top: var(--space-4); }
.hero__lead { color: rgba(255,255,255,0.82); margin-top: var(--space-5); font-size: var(--fs-body-lg); max-width: 54ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__contact { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--fs-small); color: rgba(255,255,255,0.85); }
.hero__contact a { color: var(--color-white); font-weight: 700; }
.hero__contact-item { display: flex; align-items: center; gap: var(--space-2); }
.hero__contact-item svg { width: 18px; height: 18px; color: var(--color-gold-300); flex-shrink: 0; }

.hero__visual { position: relative; }
.hero__orbit { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   14. CTA BANNERS
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-navy-900), var(--color-blue-700));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(231,166,22,0.25), transparent 55%);
  pointer-events: none;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255,255,255,0.8); margin-top: var(--space-3); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); position: relative; }

.compliance-note {
  background: var(--color-grey-100);
  border-left: 4px solid var(--color-orange-600);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-ink);
  margin-top: var(--space-5);
}
.compliance-note strong { color: var(--color-navy-900); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--color-navy-900); color: rgba(255,255,255,0.75); }
.site-footer__top { padding-block: var(--space-8); display: grid; gap: var(--space-7); }
@media (min-width: 800px) { .site-footer__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h3 { color: var(--color-white); font-size: var(--fs-body); margin-bottom: var(--space-4); }
.site-footer .brand__name { color: var(--color-white); }
.site-footer .brand__tagline { color: var(--color-gold-300); }
.site-footer p { color: rgba(255,255,255,0.68); font-size: var(--fs-small); }
.site-footer ul li { margin-bottom: var(--space-2); }
.site-footer a { color: rgba(255,255,255,0.75); font-size: var(--fs-small); }
.site-footer a:hover { color: var(--color-gold-300); }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.footer-contact svg { width: 18px; height: 18px; color: var(--color-gold-300); flex-shrink: 0; margin-top: 2px; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:hover { border-color: var(--color-gold-300); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-micro);
  color: rgba(255,255,255,0.55);
}
.site-footer__bottom nav { display: flex; gap: var(--space-5); }
.site-footer__bottom a { color: rgba(255,255,255,0.55); }

/* --------------------------------------------------------------------------
   16. PROCESS STEPS ("How We Work" — a genuine sequence, so numbering earns its place)
   -------------------------------------------------------------------------- */
.process { position: relative; }
.process__list {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}
@media (min-width: 900px) { .process__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.process__item { position: relative; text-align: left; }
.process__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-navy-900);
  color: var(--color-gold-300);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-bottom: var(--space-4);
}
@media (min-width: 900px) {
  .process__list { position: relative; }
  .process__list::before {
    content: "";
    position: absolute;
    top: 22px; left: calc(10% + 22px); right: calc(10% + 22px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-grey-200) 0 8px, transparent 8px 14px);
    z-index: 0;
  }
}
.process__item h3 { font-size: var(--fs-body-lg); margin-bottom: var(--space-2); }
.process__item p { font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   17. UTILITIES & ANIMATION
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.divider-swoosh {
  width: 64px; height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-orange-600), var(--color-gold-500));
  margin-block: var(--space-4);
}

/* Speakable summary — a genuinely visible sentence used as the source for
   SpeakableSpecification on select pages (Home, FAQ). Not hidden text. */
.speakable-summary { color: var(--color-grey-600); font-size: var(--fs-body-lg); line-height: 1.7; }

.placeholder-panel {
  border: 1.5px dashed var(--color-grey-200);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
  background: var(--color-grey-50);
}
.placeholder-panel p { max-width: 42ch; margin-inline: auto; }

/* ==========================================================================
   STEP 2 ADDITIONS — Service Detail Page Components
   Purely additive: nothing above this block was changed. These components
   reuse existing tokens (colors, spacing, radius, shadow) so service pages
   stay visually identical in system to the homepage.
   ========================================================================== */

/* Service page hero — shorter than the homepage hero, same navy gradient
   language, room for a per-service icon graphic instead of the full orbit. */
.service-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, #123a7d 60%, var(--color-blue-700) 130%);
  color: var(--color-white);
  padding-block: var(--space-8) var(--space-8);
}
.service-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .service-hero__inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-7); }
}
.service-hero h1 { color: var(--color-white); margin-top: var(--space-4); }
.service-hero__lead { color: rgba(255,255,255,0.85); margin-top: var(--space-4); font-size: var(--fs-body-lg); max-width: 58ch; }
.service-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.service-hero__art {
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1.5px dashed rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-hero__art svg { width: 58%; height: 58%; }

/* Icon-check list — "What We Provide" style bullets */
.check-list { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .check-list--2col { grid-template-columns: 1fr 1fr; } }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-ink);
}
.check-list li svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--color-white);
  background: var(--color-orange-600);
  border-radius: 50%;
  padding: 4px;
  margin-top: 1px;
}

/* Simple bullet list (no icon) for lighter lists like "Who It's For" */
.dot-list { display: grid; gap: var(--space-2); }
.dot-list li {
  padding-left: 1.4rem;
  position: relative;
  font-size: var(--fs-small);
  color: var(--color-grey-600);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-blue-500);
}

/* Related services strip */
.related-services__grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .related-services__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.related-service-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-navy-900);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.related-service-link:hover { border-color: var(--color-blue-500); transform: translateY(-2px); }
.related-service-link svg { width: 18px; height: 18px; color: var(--color-blue-700); flex-shrink: 0; }

/* Local-area note strip (short, factual, non-repetitive locality mention) */
.locality-note {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-blue-700);
  background: var(--color-blue-100);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  max-width: 100%;
  box-sizing: border-box;
}
.locality-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15em; }

/* ==========================================================================
   FONT NOTE:
   --font-display / --font-body currently resolve to a system-font stack
   (no network request, no missing-font flash). If real 'Poppins' and
   'Noto Sans' font files are supplied later, add @font-face rules above
   this comment pointing at /assets/fonts/ and both variables will pick
   them up automatically — no other CSS needs to change. Noto Sans is
   specified for body text because it pairs cleanly with Noto Sans Bengali
   for the bn/ pages planned in a later build step.
   ========================================================================== */