@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;600&display=swap');

:root {
  color-scheme: light;
  --color-navy: #12143d;
  --color-navy-deep: #0b0d28;
  --color-blue: #25287e;
  --color-blue-dark: #1b1e66;
  --color-blue-light: #383caa;
  --color-red: #bd1e2c;
  --color-red-dark: #9e1521;
  --color-red-hover: #d92536;
  --color-teal: #25287e;
  --color-teal-dark: #1b1e66;
  --color-gold: #bd1e2c;
  --color-gold-hover: #9e1521;
  --color-ink: #1c2033;
  --color-muted: #545b72;
  --color-paper: #ffffff;
  --color-surface: #f7f9fd;
  --color-surface-warm: #edf1fa;
  --color-surface-peach: #fdf2f3;
  --color-surface-blue: #e8edf8;
  --color-surface-pink: #faecee;
  --color-border: #dbe1f0;
  --color-error: #bd1e2c;
  --color-success: #1b8744;
  --color-orange-hover: #1b1e66;
  --color-hero-cool: #edf1fa;
  --color-hero-warm: #f7f9fd;
  --color-tint-teal: #e8edf8;
  --color-tint-gold: #fdf2f3;
  --color-border-hover: #25287e;
  --color-text-on-dark: #f0f3fa;
  --color-field-border: #c6cee0;
  --color-field-placeholder: #828ca1;
  --color-map-border: #a4b0c9;
  --color-map-cool: #e8edf8;
  --color-map-warm: #fdf2f3;
  --color-footer-text: #e1e5f2;
  --color-footer-muted: #9aa2bc;
  --color-footer-about: #b8c0d8;
  --color-footer-link: #cbd3ea;
  --color-draft-text: #78171f;
  --color-draft-background: #fbebee;
  --color-whatsapp: #25d366;
  --color-shadow-card: rgb(21 24 61 / 9%);
  --color-shadow-card-subtle: rgb(21 24 61 / 5%);
  --color-shadow-floating: rgb(18 20 61 / 18%);
  --color-header-glass: rgb(255 255 255 / 98%);
  --color-header-border: rgb(219 225 240 / 80%);
  --color-footer-outline: rgb(255 255 255 / 24%);
  --color-footer-rule: rgb(255 255 255 / 12%);
  --color-white-outline: rgb(255 255 255 / 45%);
  --color-white-wash: rgb(255 255 255 / 10%);
  --color-modal-backdrop: rgb(11 13 40 / 68%);
  --font-body: 'Inter', sans-serif;
  --font-arabic: 'Noto Naskh Arabic', serif;
  --container-width: 1180px;
  --space-1: .35rem;
  --space-2: .65rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --radius-sm: .55rem;
  --radius-md: 1rem;
  --radius-lg: 1.4rem;
  --radius-xl: 1.8rem;
  --radius-pill: 999px;
  --radius-icon: .8rem;
  --radius-circle: 50%;
  --shadow-card: 0 14px 36px var(--color-shadow-card);
  --shadow-card-subtle: 0 6px 20px var(--color-shadow-card-subtle);
  --shadow-floating: 0 12px 32px var(--color-shadow-floating);
  --transition: 200ms ease;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body:has(.site-header__nav.is-open),
body:has(.site-modal[open]) { overflow: hidden; }

img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--color-teal-dark); text-underline-offset: .2em; }
a:hover { color: var(--color-navy); }
button, input, select, textarea { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   PAGE LOADING SCREEN (PRELOADER)
   ========================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, #ffffff 0%, #edf1fa 100%);
  transition: opacity 420ms ease, visibility 420ms ease;
}
html:not(.js-enabled) .page-loader {
  display: none;
}
.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader__brand {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.page-loader__mark {
  position: relative;
  display: grid;
  width: 5.25rem;
  height: 5.25rem;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 28px rgb(37 40 126 / 18%);
  animation: loaderPulse 1.4s ease-in-out infinite;
}
.page-loader__mark::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2.5px dashed var(--color-blue);
  animation: loaderSpin 6s linear infinite;
}
.page-loader__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
.page-loader__mark svg {
  width: 1.9rem;
  height: 1.9rem;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  fill: none;
}
.page-loader__text {
  display: flex;
  flex-direction: column;
}
.page-loader__title {
  color: var(--color-red);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.page-loader__subtitle {
  color: var(--color-blue);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.page-loader__bar {
  width: 190px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(37 40 126 / 14%);
}
.page-loader__fill {
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-blue), var(--color-red));
  animation: loaderSlide 1s ease-in-out infinite alternate;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes loaderSlide {
  0% { transform: translateX(-15%); width: 35%; }
  100% { transform: translateX(135%); width: 55%; }
}

/* ==========================================================================
   BASE UTILITIES & TYPOGRAPHY
   ========================================================================== */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1rem;
  color: var(--color-paper);
  background: var(--color-navy);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 2rem), var(--container-width));
  margin-inline: auto;
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-5); }
.section--muted { background: var(--color-surface); }
.section--warm { background: var(--color-surface-warm); }
.section--peach { background: #fdf3ea; }
.section--orange { background: var(--color-teal); color: var(--color-paper); }
.section__head { max-width: 760px; margin-bottom: var(--space-5); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__eyebrow, .eyebrow {
  margin: 0 0 .55rem;
  color: var(--color-teal);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  color: var(--color-navy);
  line-height: 1.18;
  letter-spacing: -.025em;
}
h1 { margin-bottom: 1.1rem; font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { margin-bottom: .9rem; font-size: clamp(1.65rem, 3.6vw, 2.45rem); font-weight: 800; }
h3 { margin-bottom: .6rem; font-size: 1.18rem; font-weight: 700; }
p:last-child { margin-bottom: 0; }
.text-orange { color: var(--color-teal) !important; }
.text-dark { color: var(--color-navy) !important; }
.lead { color: var(--color-muted); font-size: clamp(.98rem, 1.5vw, 1.08rem); line-height: 1.7; }
.muted { color: var(--color-muted); }
.text-link { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; text-decoration: none; color: var(--color-teal); }
.text-link:hover { color: var(--color-teal-dark); }
.text-link svg { width: 1rem; height: 1rem; }

.icon { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.icon--large { width: 1.6rem; height: 1.6rem; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.button {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: .65rem;
  color: var(--color-paper);
  background: var(--color-teal);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.button:hover { color: var(--color-paper); background: var(--color-red-dark); box-shadow: var(--shadow-card-subtle); transform: translateY(-1px); }
.button--primary { color: var(--color-paper); background: var(--color-red); border-color: var(--color-red); }
.button--primary:hover { color: var(--color-paper); background: var(--color-red-dark); border-color: var(--color-red-dark); }
.button--bordered { color: var(--color-paper); background: var(--color-blue); border: 1.5px solid var(--color-blue-dark); }
.button--bordered:hover { color: var(--color-paper); background: var(--color-blue-dark); }
.button--gold { color: var(--color-paper); background: var(--color-blue); border-color: var(--color-blue); }
.button--gold:hover { color: var(--color-paper); background: var(--color-blue-dark); border-color: var(--color-blue-dark); }
.button--outline { color: var(--color-blue); background: transparent; border: 1.5px solid var(--color-blue); }
.button--outline:hover { color: var(--color-paper); background: var(--color-blue); border-color: var(--color-blue); }
.button--dark { color: var(--color-paper); background: var(--color-navy); border-color: var(--color-navy); border-radius: .55rem; }
.button--dark:hover { color: var(--color-paper); background: var(--color-navy-deep); }
.button--small { min-height: 2.55rem; padding: .55rem 1.15rem; font-size: .86rem; border-radius: .55rem; }

/* ==========================================================================
   HEADER & BRAND (QSM-STYLE)
   ========================================================================== */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: var(--color-header-glass);
  border-bottom: 1px solid var(--color-header-border);
  backdrop-filter: blur(14px);
}
.site-header__inner { display: flex; min-height: 4.8rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--color-navy); text-decoration: none; }
.brand:hover { color: var(--color-navy); }
.brand__logo {
  width: 3.15rem;
  height: 3.15rem;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 2px 8px rgb(37 40 126 / 15%);
}
.brand__mark {
  position: relative;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: var(--color-blue);
  background: #edf1fa;
  border: 2.5px solid var(--color-blue);
  box-shadow: inset 0 0 0 2px #ffffff, 0 2px 8px rgb(37 40 126 / 16%);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.brand__mark::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 9px;
  height: 4px;
  background: var(--color-red);
  border-radius: 2px;
  transform: rotate(42deg);
}
.brand__text { display: grid; line-height: 1.05; }
.brand__name { color: var(--color-red); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.brand__descriptor { margin-top: .15rem; color: var(--color-blue); font-size: .58rem; font-weight: 700; letter-spacing: .03em; }
.site-header__actions { display: flex; align-items: center; gap: .55rem; }
.site-header__request { display: none; }
.site-header__toggle {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circle);
  color: var(--color-navy);
  background: var(--color-paper);
}
.site-header__toggle .icon { width: 1.3rem; height: 1.3rem; }
.site-header__nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  max-height: calc(100dvh - 4.8rem);
  overflow: auto;
  padding: 1rem;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}
.site-header__nav.is-open { display: block; }
.site-header__menu, .site-header__submenu { margin: 0; padding: 0; list-style: none; }
.site-header__menu { display: grid; gap: .2rem; }
.site-header__menu a, .site-header__dropdown-toggle {
  display: flex;
  width: 100%;
  min-height: 2.7rem;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  padding: .6rem .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  background: transparent;
  font-size: .88rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
.site-header__menu a:hover,
.site-header__dropdown-toggle:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current-menu-item > .site-header__dropdown-toggle {
  color: var(--color-teal);
  background: transparent;
}
.site-header__dropdown-toggle .icon { width: .9rem; height: .9rem; transition: transform var(--transition); }
.menu-item-has-children.is-expanded > .site-header__dropdown-toggle .icon { transform: rotate(180deg); }
.site-header__submenu { display: none; padding: .2rem 0 .45rem .8rem; }
.menu-item-has-children.is-expanded > .site-header__submenu { display: block; }
.site-header__submenu a { min-height: 2.4rem; color: var(--color-ink); font-size: .84rem; }
.site-header__submenu a:hover { color: var(--color-teal); background: #fff5ec; }

/* ==========================================================================
   HERO SECTIONS (ARCH PHOTO + GOOGLE RATING)
   ========================================================================== */
.hero, .page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--color-surface-warm);
}
.hero__grid, .page-hero__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  max-width: 1040px;
  margin-inline: auto;
}
.page-hero__inner {
  position: relative;
  isolation: isolate;
  max-width: var(--container-width);
  min-height: 12rem;
  margin-inline: auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}
.page-hero__inner > :not(.page-hero__art) { position: relative; z-index: 1; }
.page-hero__art {
  display: none;
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(1.25rem, 4vw, 3rem);
  width: clamp(190px, 26vw, 290px);
  transform: translateY(-50%);
  pointer-events: none;
}
.page-hero__art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 24px rgb(61 37 22 / 12%));
  animation: heroFloat 6s ease-in-out infinite;
}
.page-hero__image--photo {
  max-width: 320px !important;
  max-height: 240px !important;
  object-fit: cover !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 36px rgb(21 24 61 / 14%);
  border: 3px solid #ffffff;
}
.article-featured-media {
  margin-bottom: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-subtle);
}
.article-featured-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.split__panel-img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card-subtle);
  border: 2px solid #ffffff;
  display: block;
}
.not-found__image {
  margin: 1.5rem auto;
  max-width: 320px;
  height: auto;
  display: block;
}
.hero__copy { position: relative; z-index: 1; }
.hero__title, .page-hero__title {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.15;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.hero__actions--center { justify-content: center; }
.hero__trust { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: 1.6rem; }
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--color-navy);
  font-size: .82rem;
  font-weight: 600;
}
.hero__trust-item .icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--color-teal-dark); }

/* Google 10,000+ Trusted Reviews Badge */
.google-trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: 1.25rem;
  font-size: .84rem;
  color: var(--color-navy);
}
.google-trust__g {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}
.google-trust__stars {
  color: #fbbf24;
  font-size: .95rem;
  letter-spacing: .08em;
}

/* Arch-shaped Hero Image on Right */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__arch-img {
  width: 100%;
  max-width: 390px;
  height: 360px;
  object-fit: cover;
  object-position: center top;
  border-radius: 165px 0 0 0;
  box-shadow: 0 18px 40px rgb(20 24 29 / 12%);
}
.hero__cutout-img {
  width: 100%;
  max-width: 440px;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  object-position: bottom center;
}
.hero__image {
  width: min(100%, 560px);
  height: auto;
  filter: drop-shadow(0 18px 26px rgb(61 37 22 / 10%));
  animation: heroFloat 6s ease-in-out infinite;
}
.hero__image--photo {
  width: min(100%, 540px);
  height: 380px;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px rgb(15 30 45 / 16%);
  border: 4px solid #ffffff;
}
@media (max-width: 768px) {
  .hero__image--photo {
    height: 280px;
  }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* ==========================================================================
   MISSION & VISION CARDS (ABOUT / HOME)
   ========================================================================== */
.mv-grid {
  display: grid;
  gap: 2rem;
  max-width: 900px;
  margin-inline: auto;
}
.mv-col {
  text-align: center;
}
.mv-col__heading {
  margin-bottom: 1.25rem;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-weight: 800;
}
.mv-card {
  padding: 1.6rem 1.6rem 1.8rem;
  border-radius: 1.35rem;
  text-align: center;
  height: calc(100% - 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mv-card--blue { background: var(--color-surface-blue); }
.mv-card--pink { background: var(--color-surface-pink); }
.mv-card__img {
  width: 100%;
  max-width: 280px;
  height: 185px;
  object-fit: cover;
  object-position: center top;
  border-radius: 1rem;
  margin-bottom: 1.15rem;
  background: #ffffff;
}
.mv-card__copy {
  max-width: 340px;
  color: var(--color-navy);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.55;
}

/* ==========================================================================
   PHOTO SERVICE CARDS (3-COLUMN SKY BLUE CARDS WITH LARGE IMAGES)
   ========================================================================== */
.photo-card-grid {
  display: grid;
  gap: 1.4rem;
  max-width: 1020px;
  margin-inline: auto;
}
.photo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.35rem 1.25rem 1.6rem;
  border-radius: 1.25rem;
  background: var(--color-surface-blue);
  text-align: center;
  text-decoration: none;
  color: var(--color-navy);
  transition: transform var(--transition), box-shadow var(--transition);
}
.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  color: var(--color-navy);
}
.photo-card__media {
  width: 100%;
  height: 190px;
  margin-bottom: 1.1rem;
  overflow: hidden;
  border-radius: 1.1rem;
  background: #ffffff;
}
.photo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}
.photo-card:hover .photo-card__img {
  transform: scale(1.04);
}
.photo-card__title {
  margin-bottom: .5rem;
  color: var(--color-navy);
  font-size: 1.05rem;
  font-weight: 800;
}
.photo-card__copy {
  color: #3a434c;
  font-size: .78rem;
  line-height: 1.55;
}

/* ==========================================================================
   TABLE OF CONTENT + OVERLAPPING VISUAL CARD (SERVICE PAGES)
   ========================================================================== */
.toc-showcase {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: 1020px;
  margin-inline: auto;
}
.toc-card {
  border: 1px solid #ece6e0;
  border-radius: 1.25rem;
  background: var(--color-paper);
  overflow: hidden;
  box-shadow: var(--shadow-card-subtle);
}
.toc-card__head {
  padding: 1.25rem 1.5rem;
  background: var(--color-surface-peach);
  border-radius: 0 0 2rem 0;
  text-align: center;
}
.toc-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy);
}
.toc-card__list {
  margin: 0;
  padding: 1.35rem 1.5rem 1.6rem;
  list-style: none;
  display: grid;
  gap: .95rem;
}
.toc-card__list a {
  color: var(--color-navy);
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}
.toc-card__list a:hover {
  color: var(--color-teal);
}

.toc-visual {
  position: relative;
  padding-bottom: 1.5rem;
}
.toc-visual__img {
  width: 88%;
  height: 360px;
  object-fit: cover;
  border-radius: .9rem;
  box-shadow: var(--shadow-card-subtle);
}
.toc-visual__float {
  position: relative;
  margin-top: -120px;
  margin-left: auto;
  width: min(100%, 420px);
  padding: 1.6rem 1.75rem;
  border-radius: .9rem;
  background: var(--color-paper);
  box-shadow: 0 14px 38px rgb(16 32 48 / 12%);
}
.toc-visual__float h2,
.toc-visual__float h3 {
  margin-bottom: .55rem;
  font-size: 1.35rem;
  font-weight: 800;
}
.toc-visual__float p {
  color: var(--color-muted);
  font-size: .82rem;
  line-height: 1.6;
}

/* ==========================================================================
   PROCESS BREAKDOWN + VISUAL CHECKLIST GRAPHIC CARD
   ========================================================================== */
.process-breakdown {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: 1020px;
  margin-inline: auto;
}
.breakdown-col__label {
  margin-bottom: .9rem;
  font-size: .92rem;
  font-weight: 800;
  color: var(--color-navy);
}
.breakdown-list {
  display: grid;
  gap: .65rem;
}
.breakdown-item {
  border: 1px solid #e7b58d;
  border-radius: .5rem;
  background: var(--color-paper);
  overflow: hidden;
}
.breakdown-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.1rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}
.breakdown-item summary::-webkit-details-marker { display: none; }
.breakdown-item summary::after {
  content: '↗';
  font-size: .95rem;
  color: var(--color-navy);
  transition: transform var(--transition);
}
.breakdown-item[open] summary::after {
  transform: rotate(90deg);
  color: var(--color-teal);
}
.breakdown-item__body {
  padding: 0 1.1rem 1rem;
  font-size: .81rem;
  color: var(--color-muted);
}

/* Visual Checklist Card on Right */
.checklist-graphic {
  padding: .9rem;
  border: 1.5px solid #9bd1e8;
  border-radius: .85rem;
  background: var(--color-paper);
}
.checklist-graphic__inner {
  padding: 1.5rem 1.6rem;
  border-radius: .65rem;
  background: #fdecdb;
}
.checklist-graphic__header {
  padding: .85rem 1.1rem;
  margin-bottom: 1.35rem;
  border-radius: .6rem;
  background: #fbd6b7;
  color: #2b1d12;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.checklist-graphic__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}
.checklist-graphic__items li {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: #2b1d12;
  font-size: .95rem;
  font-weight: 500;
}
.checklist-graphic__box {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border: 2px solid #c59b79;
  border-radius: .28rem;
  background: #fff5ec;
  display: grid;
  place-items: center;
  color: var(--color-teal);
  font-size: .8rem;
  font-weight: 800;
}
.checklist-graphic__brand {
  margin-top: 1.35rem;
  text-align: center;
}
.checklist-graphic__brand strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  color: #2b1d12;
  letter-spacing: -.03em;
}
.checklist-graphic__brand span {
  font-size: .62rem;
  font-weight: 600;
  color: #5a4638;
}

/* ==========================================================================
   COLLAGE IMAGE + GREEN CHECKLIST ALTERNATING SECTIONS
   ========================================================================== */
.collage-row {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
.collage-row + .collage-row {
  margin-top: 3.5rem;
}
.collage-media {
  position: relative;
  max-width: 390px;
  margin-inline: auto;
  padding: .5rem 1.5rem 1.5rem 1.5rem;
}
.collage-media__main {
  width: 265px;
  height: 310px;
  object-fit: cover;
  border-radius: 1.35rem;
  box-shadow: var(--shadow-card);
  margin-inline: auto;
}
.collage-media__inset {
  position: absolute;
  bottom: .5rem;
  left: 0;
  width: 155px;
  height: 100px;
  object-fit: cover;
  border-radius: .85rem;
  border: 3px solid var(--color-paper);
  box-shadow: var(--shadow-floating);
  background: var(--color-paper);
}
.collage-media__badge {
  position: absolute;
  top: 2rem;
  right: -.5rem;
  width: 170px;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: var(--color-paper);
  box-shadow: 0 10px 28px rgb(16 32 48 / 12%);
}
.collage-media__badge-title {
  display: block;
  margin-bottom: .45rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--color-navy);
}
.collage-media__skeleton {
  height: 6px;
  border-radius: 99px;
  background: #eff2f5;
  margin-bottom: .35rem;
}
.collage-media__skeleton--short {
  width: 70%;
  margin-bottom: 0;
}

.green-check-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}
.green-check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.green-check-icon {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  place-items: center;
  margin-top: .12rem;
  border-radius: 50%;
  background: #2eb85c;
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
}

/* ==========================================================================
   "WHY CHOOSE" 3 UI MOCKUP CARDS
   ========================================================================== */
.why-ui-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 980px;
  margin-inline: auto;
}
.why-ui-card {
  border-radius: 1rem;
  background: var(--color-paper);
  box-shadow: 0 10px 30px rgb(16 32 48 / 7%);
  overflow: hidden;
  border: 1px solid #f1ece7;
}
.why-ui-card__graphic {
  height: 135px;
  padding: 1.1rem;
  background: #fdecdb;
  display: flex;
   flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}
.ui-mock-bubble {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  max-width: 215px;
  padding: .45rem .75rem;
  border-radius: .55rem;
  background: #ffffff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-navy);
}
.ui-mock-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .62rem;
  font-weight: 800;
}
.ui-mock-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  max-width: 225px;
  padding: .55rem .8rem;
  border-radius: .5rem;
  background: #ffffff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 6%);
  font-size: .7rem;
  font-weight: 700;
}
.ui-mock-pill span:last-child {
  padding: .25rem .55rem;
  border: 1px solid #d0b299;
  border-radius: .35rem;
  font-size: .64rem;
}
.why-ui-card__body {
  padding: 1.35rem 1.4rem 1.6rem;
}
.why-ui-card__title {
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 800;
}
.why-ui-card__copy {
  color: var(--color-muted);
  font-size: .8rem;
  line-height: 1.55;
}

/* ==========================================================================
   ORANGE PILL LINKS BAR (CANCELLATION / SERVICE PILLS)
   ========================================================================== */
.pill-links-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  max-width: 780px;
  margin-inline: auto;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.25rem;
  border-radius: .6rem;
  background: var(--color-teal);
  color: #ffffff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.pill-link:hover {
  background: var(--color-teal-dark);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================================================
   VIBRANT ORANGE "GET IN TOUCH" + SKY-BLUE FORM CARD SECTION
   ========================================================================== */
.qsm-contact-band {
  padding-block: 3.5rem;
  background: var(--color-teal);
  color: #ffffff;
}
.qsm-contact-band__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
}
.qsm-contact-band__title {
  color: #ffffff;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  margin-bottom: .5rem;
}
.qsm-contact-band__pill {
  display: inline-block;
  padding: .6rem 1.6rem;
  margin-bottom: 1.25rem;
  border-radius: .65rem;
  background: #ffffff;
  color: var(--color-teal);
  font-size: 1.15rem;
  font-weight: 800;
}
.qsm-contact-band__copy {
  color: rgb(255 255 255 / 92%);
  font-size: .86rem;
  max-width: 430px;
  margin-bottom: 1.2rem;
}
.qsm-contact-band__info {
  display: grid;
  gap: .65rem;
  margin-bottom: 1.25rem;
  font-size: .88rem;
  font-weight: 600;
}
.qsm-contact-band__info-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #ffffff;
  text-decoration: none;
}
.qsm-contact-band__info-item:hover {
  color: #fff5ec;
}
.qsm-contact-band__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.qsm-contact-band__rating {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
}
.qsm-contact-band__socials {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-left: 1rem;
  border-left: 1px solid rgb(255 255 255 / 40%);
}
.qsm-contact-band__socials a {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgb(255 255 255 / 16%);
  text-decoration: none;
  transition: background var(--transition);
}
.qsm-contact-band__socials a:hover {
  background: rgb(255 255 255 / 30%);
}

/* Sky-Blue Rounded Lead Form Panel */
.qsm-form-card {
  padding: 1.75rem;
  border-radius: 1.35rem;
  background: #d7eff6;
  color: var(--color-navy);
  box-shadow: 0 16px 36px rgb(0 0 0 / 12%);
}
.qsm-form-card .field__label {
  font-size: .78rem;
  margin-bottom: .25rem;
}
.qsm-form-card .field__control {
  min-height: 2.65rem;
  padding: .55rem .75rem;
  border: 1px solid #bddae3;
  border-radius: .45rem;
  background: #ffffff;
  font-size: .84rem;
}
.qsm-form-card .field__control--message {
  min-height: 4.8rem;
}
.qsm-form-card .lead-form__submit {
  min-height: 2.65rem;
  border-radius: .45rem;
  background: var(--color-teal);
  color: #ffffff;
  font-weight: 700;
}
.qsm-form-card .lead-form__submit:hover {
  background: var(--color-teal-dark);
}

/* ==========================================================================
   2-COLUMN FAQ SECTION (QSM STYLE)
   ========================================================================== */
.faq-split {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: 1020px;
  margin-inline: auto;
}
.faq-split__intro h2 {
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: 800;
}
.faq-split__intro p {
  margin-bottom: 1.25rem;
  color: var(--color-muted);
  font-size: .92rem;
}
.faq-list { display: grid; gap: .65rem; }
.faq-item {
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  background: #fbeee2;
}
.faq-item[open] {
  border-color: #f0a365;
  background: var(--color-paper);
}
.faq-item summary {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-navy);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--color-navy);
  font-size: 1.2rem;
  font-weight: 600;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item__answer {
  padding: 0 0 1rem;
  color: var(--color-muted);
  font-size: .84rem;
  line-height: 1.6;
}

/* ==========================================================================
   TESTIMONIALS ("OVER 20,000 HAPPY CLIENTS") + MAP & TABLET DRIVER
   ========================================================================== */
.reviews-grid {
  display: grid;
  gap: 1rem;
}
.review-card {
  padding: 1.15rem;
  border: 1px solid #eeeae6;
  border-radius: .85rem;
  background: var(--color-paper);
  box-shadow: 0 6px 20px rgb(16 32 48 / 6%);
}
.review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}
.review-card__user {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.review-card__avatar {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: .82rem;
  font-weight: 700;
}
.review-card__name {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-navy);
}
.review-card__date {
  display: block;
  font-size: .68rem;
  color: var(--color-muted);
}
.review-card__stars {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: .5rem;
  color: #fbbf24;
  font-size: .85rem;
}
.review-card__verified {
  display: inline-grid;
  width: .85rem;
  height: .85rem;
  place-items: center;
  border-radius: 50%;
  background: #1d9bf0;
  color: #fff;
  font-size: .55rem;
}
.review-card__copy {
  color: var(--color-ink);
  font-size: .76rem;
  line-height: 1.5;
}

/* Map + Tablet Driver Showcase + Sky-Blue About Us Banner */
.map-driver-grid {
  display: grid;
  gap: 1.75rem;
  align-items: stretch;
  max-width: 980px;
  margin-inline: auto;
}
.map-embed-card {
  position: relative;
  min-height: 290px;
  padding: .75rem;
  border-radius: 1.25rem;
  background: #fdecdb;
  overflow: hidden;
  display: flex;
}
.map-embed-card iframe {
  width: 100%;
  height: 100%;
  min-height: 270px;
  border: 0;
  border-radius: .9rem;
}
.driver-visual-card {
  border-radius: 1.25rem;
  overflow: hidden;
  max-height: 310px;
}
.driver-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-sky-banner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
  padding: 1.5rem 2rem 0;
  border-radius: 1.25rem;
  background: var(--color-surface-blue);
  overflow: hidden;
}
.about-sky-banner__img {
  max-height: 310px;
  margin-inline: auto;
  object-fit: contain;
}
.about-sky-banner__copy {
  padding-bottom: 1.5rem;
  text-align: center;
}
.about-sky-banner__copy h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  margin-bottom: .65rem;
}
.about-sky-banner__copy p {
  color: var(--color-ink);
  font-size: .85rem;
  max-width: 440px;
  margin: 0 auto 1.15rem;
}

/* ==========================================================================
   BLOG DARK SKYLINE HERO & PHOTO BLOG CARDS
   ========================================================================== */
.blog-hero {
  position: relative;
  padding-block: 4.5rem;
  background: #14181d url('../images/blog-banner.webp') center/cover no-repeat;
  color: #ffffff;
  text-align: center;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(12 16 20 / 58%);
}
.blog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
}
.blog-hero__pill {
  display: inline-block;
  padding: .35rem 1rem;
  margin-bottom: .9rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 22%);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 700;
}
.blog-hero__title {
  color: #ffffff;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: .5rem;
}
.blog-hero__sub {
  color: rgb(255 255 255 / 88%);
  font-size: .92rem;
  margin-bottom: 1.5rem;
}
.blog-search {
  position: relative;
  max-width: 390px;
  margin-inline: auto;
}
.blog-search__input {
  width: 100%;
  height: 2.85rem;
  padding: .5rem 2.6rem .5rem 1.1rem;
  border: 0;
  border-radius: .55rem;
  background: #ffffff;
  color: var(--color-navy);
  font-size: .86rem;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}
.blog-search__icon {
  position: absolute;
  top: 50%;
  right: .85rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-muted);
}

.blog-photo-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border: 1px solid #ece7e2;
  border-radius: 1.1rem;
  background: var(--color-paper);
  box-shadow: var(--shadow-card-subtle);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.blog-photo-card__media {
  position: relative;
  height: 195px;
  margin-bottom: .95rem;
  border-radius: .8rem;
  overflow: hidden;
  background: #1b2025;
}
.blog-photo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-photo-card__overlay {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
}
.blog-photo-card__overlay span {
  padding: .18rem .5rem;
  border-radius: .25rem;
  background: var(--color-teal);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.3;
}
.blog-photo-card__tag {
  margin-bottom: .35rem;
  color: var(--color-teal);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.blog-photo-card__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .98rem;
  font-weight: 800;
  color: var(--color-navy);
}
.blog-photo-card__copy {
  color: var(--color-muted);
  font-size: .78rem;
  line-height: 1.55;
}

/* ==========================================================================
   EXISTING CARDS, FORMS, FOOTER & MODAL COMPATIBILITY
   ========================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; color: var(--color-muted); font-size: .8rem; }
.breadcrumb a { color: var(--color-teal-dark); text-decoration: none; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.card {
  height: 100%;
  padding: 1.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: var(--shadow-card-subtle);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.card__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  color: var(--color-teal-dark);
  background: var(--color-tint-teal);
}
.card__icon .icon { width: 1.4rem; height: 1.4rem; }
.service-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.72;
  margin-bottom: 1rem;
  border-radius: calc(var(--radius-md) - .15rem);
  object-fit: cover;
  background: var(--color-surface-warm);
  transition: transform 450ms cubic-bezier(.2, .75, .25, 1);
}
a.card:hover .service-card__image { transform: scale(1.025); }
.card__title { color: var(--color-navy); }
.card__copy { color: var(--color-muted); font-size: .88rem; }
.card__link { margin-top: auto; padding-top: .6rem; font-size: .85rem; font-weight: 700; color: var(--color-teal); display: inline-flex; align-items: center; gap: .35rem; }
.service-card { min-height: 210px; }
.feature-grid, .steps-grid { display: grid; gap: 1rem; }
.feature { padding: 1.15rem; border-radius: var(--radius-md); background: var(--color-paper); border: 1px solid var(--color-border); border-left: 4px solid var(--color-teal); }
.feature__title { margin-bottom: .4rem; font-size: 1rem; }
.feature__copy { color: var(--color-muted); font-size: .86rem; }
.process-step { display: flex; align-items: flex-start; gap: .95rem; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); }
.process-step__number { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; place-items: center; border-radius: var(--radius-circle); color: var(--color-paper); background: var(--color-teal); font-size: .84rem; font-weight: 800; }
.process-step__title { margin: .1rem 0 .35rem; font-size: .96rem; }
.process-step__copy { margin: 0; color: var(--color-muted); font-size: .85rem; }

.split { display: grid; align-items: center; gap: var(--space-5); }
.split__panel { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--color-surface); }
.about-story__image {
  width: min(100%, 430px);
  margin-top: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-warm);
  box-shadow: var(--shadow-card-subtle);
}
.split--features {
  align-items: center;
}
.split--features .feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .split--features .feature-grid {
    grid-template-columns: 1fr;
  }
}
.split__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.split__image {
  width: 100%;
  max-width: 480px;
  height: 100%;
  min-height: 260px;
  max-height: 360px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px rgb(15 23 42 / 10%);
  border: 3px solid #ffffff;
}
.home-center-banner {
  max-width: 1140px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-subtle);
  border: 1px solid var(--color-border);
}
.home-center-banner__img {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  object-fit: cover;
}
.section--tight {
  padding-block: 1rem 3rem;
}
.contact-visual-card {
  margin-top: 1.4rem;
  max-width: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-subtle);
  border: 1px solid var(--color-border);
  background: #ffffff;
}
.contact-visual-card__img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.split__list, .check-list, .document-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.check-list li, .document-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; }
.check-list .icon, .document-list .icon { margin-top: .17rem; color: #2eb85c; }
.notice {
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--color-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-muted);
  background: #fff6ee;
  font-size: .84rem;
}
.notice--spaced { margin-top: 1.2rem; }

.contact-band { display: grid; gap: 1.5rem; padding: 1.75rem; border-radius: var(--radius-lg); color: #ffffff; background: var(--color-blue); }
.contact-band h2, .contact-band h3, .contact-band__copy { color: #ffffff; }
.contact-band__actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.form-panel { padding: 1.5rem; border: 1px solid var(--color-border); border-radius: 1.35rem; background: var(--color-surface-warm); box-shadow: var(--shadow-card); }
.form-panel__head { margin-bottom: 1rem; }
.lead-form { display: grid; gap: .75rem; }
.lead-form__grid { display: grid; gap: .75rem; }
.field { min-width: 0; }
.field__label { display: block; margin-bottom: .3rem; color: var(--color-navy); font-size: .8rem; font-weight: 700; }
.field__control {
  display: block;
  width: 100%;
  min-height: 2.7rem;
  padding: .55rem .75rem;
  border: 1px solid var(--color-field-border);
  border-radius: .45rem;
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: .86rem;
}
.field__control::placeholder { color: var(--color-field-placeholder); }
.field__control[aria-invalid="true"] { border-color: var(--color-error); }
.field__control--message { min-height: 5rem; resize: vertical; }
.field__phone { display: grid; grid-template-columns: minmax(5.5rem, .38fr) 1fr; gap: .45rem; }
.field__error { display: block; min-height: .9rem; margin-top: .15rem; color: var(--color-error); font-size: .74rem; }
.field__choice { display: flex; min-height: 2.5rem; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; padding: .35rem .75rem; background: #ffffff; border-radius: .45rem; border: 1px solid var(--color-field-border); }
.field__radio { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-ink); font-size: .85rem; }
.field__radio input { width: 1rem; height: 1rem; accent-color: var(--color-blue); }
.lead-form__status { min-height: 1.2rem; margin: 0; color: var(--color-success); font-size: .84rem; font-weight: 600; }
.lead-form__status--error { color: var(--color-error); }
.lead-form__submit { width: 100%; }
.lead-form__submit[aria-busy="true"] { opacity: .7; cursor: wait; }
.form-disclaimer { color: #495863; font-size: .72rem; }
.contact-layout { display: grid; gap: var(--space-5); align-items: center; }
.contact-details { display: grid; gap: .9rem; }
.contact-detail { display: flex; align-items: flex-start; gap: .85rem; }
.contact-detail__icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: var(--radius-icon); color: var(--color-blue); background: #fff; }
.contact-detail__title { margin: .1rem 0 .2rem; font-size: .92rem; }
.contact-detail__copy { color: var(--color-muted); font-size: .88rem; }

/* Dark QSM-style Footer */
.site-footer { padding-block: 3.5rem 5rem; color: var(--color-footer-text); background: #0c0e29; }
.site-footer__top { display: grid; gap: 2rem; align-items: start; }
.site-footer .brand { color: var(--color-paper); }
.site-footer .brand__name { color: #ff5260; }
.site-footer .brand__descriptor { color: #9da9e6; }
.site-footer__about { max-width: 340px; margin-top: .75rem; color: var(--color-footer-about); font-size: .82rem; line-height: 1.55; }
.site-footer__grid { display: grid; gap: 1.5rem; }
.site-footer__heading { margin-bottom: .8rem; color: var(--color-paper); font-size: .86rem; font-weight: 700; }
.site-footer__links { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--color-footer-link); font-size: .82rem; text-decoration: none; }
.site-footer__links a:hover { color: #ff5260; }
.site-footer__social { display: flex; gap: .55rem; margin-top: 1rem; }
.site-footer__social-link { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid var(--color-footer-outline); border-radius: var(--radius-circle); color: var(--color-paper); text-decoration: none; }
.site-footer__social-link:hover { color: var(--color-paper); background: var(--color-red); border-color: var(--color-red); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--color-footer-rule); color: var(--color-footer-muted); font-size: .76rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__legal a { color: var(--color-footer-link); text-decoration: none; }
.site-footer__license { margin-top: .7rem; color: var(--color-footer-muted); font-size: .74rem; }

.site-modal {
  width: min(calc(100% - 1.25rem), 650px);
  max-height: min(94dvh, 880px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 1.35rem;
  background: var(--color-surface-warm);
  box-shadow: var(--shadow-floating);
}
.site-modal::backdrop { background: var(--color-modal-backdrop); backdrop-filter: blur(4px); }
.site-modal__inner { position: relative; padding: 1.5rem; }
.site-modal__close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-circle); color: var(--color-navy); background: var(--color-paper); }
.site-modal__head { padding-right: 2.7rem; margin-bottom: 1rem; }

.whatsapp-float {
  position: fixed;
  z-index: 90;
  right: 1.25rem;
  bottom: 4.8rem;
  display: grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  border-radius: var(--radius-circle);
  color: var(--color-paper);
  background: #25d366;
  box-shadow: var(--shadow-floating);
  text-decoration: none;
  transition: transform var(--transition);
}
.whatsapp-float:hover { color: var(--color-paper); transform: scale(1.07); }
.whatsapp-float .icon { width: 1.7rem; height: 1.7rem; }
.mobile-call-bar { position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; display: flex; min-height: 3.5rem; align-items: center; justify-content: center; gap: .55rem; color: var(--color-paper); background: var(--color-navy); font-weight: 700; text-decoration: none; }

.blog-card__meta { margin-bottom: .5rem; color: var(--color-teal); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.blog-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1.72;
  margin-bottom: 1rem;
  border-radius: calc(var(--radius-md) - .15rem);
  object-fit: cover;
  background: var(--color-surface-warm);
}
.blog-card[hidden], [data-blog-card][hidden] { display: none; }
.load-more { display: flex; justify-content: center; margin-top: var(--space-4); }
.draft-label { display: inline-flex; margin-bottom: .8rem; padding: .3rem .6rem; border-radius: var(--radius-pill); color: var(--color-draft-text); background: var(--color-draft-background); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.legal-copy { max-width: 850px; }
.not-found { min-height: 55vh; display: grid; place-items: center; text-align: center; }
.not-found__code { margin-bottom: .3rem; color: var(--color-teal); font-size: clamp(4rem, 16vw, 8rem); font-weight: 800; line-height: 1; }
.reveal { opacity: 1; transform: none; }
.js-enabled .reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 420ms ease; }
.js-enabled .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-enabled .card-grid > .reveal:nth-child(3n + 2) { transition-delay: 70ms; }
.js-enabled .card-grid > .reveal:nth-child(3n) { transition-delay: 130ms; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (min-width: 640px) {
  .container { width: min(calc(100% - 3rem), var(--container-width)); }
  .hero__grid, .page-hero__grid { grid-template-columns: 1.15fr .85fr; }
  .page-hero__art { display: block; }
  .page-hero__inner { padding-right: clamp(15rem, 36vw, 26rem); }
  .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-ui-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-driver-grid { grid-template-columns: 1.15fr .85fr; }
  .about-sky-banner { grid-template-columns: .9fr 1.1fr; padding: 1.5rem 2.5rem 0; }
  .about-sky-banner__copy { text-align: center; }
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid, .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .split { grid-template-columns: 1fr 1fr; }
  .contact-band { grid-template-columns: 1fr auto; align-items: center; }
  .contact-layout, .qsm-contact-band__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-form__grid--single { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { padding-bottom: 3rem; }
  .whatsapp-float { right: 1.5rem; bottom: 1.5rem; }
  .mobile-call-bar { display: none; }
}

@media (min-width: 900px) {
  .site-header__inner { min-height: 5rem; }
  .site-header__toggle { display: none; }
  .site-header__actions { order: 3; }
  .site-header__request { display: inline-flex; }
  .site-header__nav { position: static; display: block; max-height: none; overflow: visible; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .site-header__menu { display: flex; align-items: center; gap: .25rem; }
  .site-header__menu > li { position: relative; }
  .site-header__menu a, .site-header__dropdown-toggle { width: auto; min-height: 2.5rem; padding: .5rem .7rem; font-size: .85rem; white-space: nowrap; }
  .site-header__submenu { position: absolute; top: calc(100% + .25rem); left: 0; width: 250px; padding: .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-card); }
  .menu-item-has-children:hover > .site-header__submenu, .menu-item-has-children:focus-within > .site-header__submenu { display: block; }
  .site-header__submenu a { white-space: normal; }
  .photo-card-grid, .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .toc-showcase { grid-template-columns: 330px 1fr; }
  .process-breakdown { grid-template-columns: 1fr 1fr; }
  .collage-row { grid-template-columns: 1fr 1.15fr; }
  .collage-row--reverse { grid-template-columns: 1.15fr 1fr; }
  .faq-split { grid-template-columns: 270px 1fr; }
  .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid, .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__top { grid-template-columns: 1fr 2.2fr; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .js-enabled .reveal { opacity: 1; transform: none; }
}