:root {
  --blue: #0b6fe8;
  --blue-dark: #064799;
  --navy: #071a36;
  --ink: #142033;
  --muted: #65758b;
  --line: #dbe6f3;
  --soft: #f5f8fc;
  --white: #ffffff;
  --shadow: 0 16px 36px rgba(7, 26, 54, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Fallback font sized to match Inter's metrics so swapping in the
   real webfont doesn't reflow the page (fixes CLS). */
@font-face {
  font-family: "Inter Fallback";
  src: local(Arial), local(Helvetica), local(sans-serif);
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  margin: 0;
  font-family: "Inter", "Inter Fallback", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(18px, 5vw, 72px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(219, 230, 243, 0.9);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 700;
  color: var(--navy);
}
.brand img, .site-footer img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}
.brand span { white-space: nowrap; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.nav-cta {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 8px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 8px 18px rgba(11,111,232,.18);
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--navy);
}

.hero {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/banners/Back.avif");
  background-position: center;
  background-size: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.26) 68%, rgba(7,26,54,.28) 100%);
}
.hero-content {
  width: min(620px, calc(100% - 36px));
  margin-left: clamp(18px, 7vw, 100px);
  padding: 72px 0;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 720;
}
h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 700;
}
h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
}
.hero-copy, .page-hero p, .intro-grid > p, .contact-copy > p {
  color: #30405a;
  font-size: 17px;
  line-height: 1.72;
}
.hero-copy { max-width: 540px; margin: 20px 0 0; }
.hero-actions, .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.btn, .quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}
.btn.primary { color: var(--white); background: var(--blue); box-shadow: 0 12px 26px rgba(11,111,232,.24); }
.btn.secondary, .quick-link { color: var(--navy); background: var(--white); border-color: var(--line); }
.section, .page-hero {
  padding: clamp(58px, 7vw, 96px) clamp(18px, 5vw, 72px);
}
.page-hero.compact {
  min-height: 340px;
  display: grid;
  align-content: center;
  background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}
.page-hero h1 { max-width: 960px; }
.page-hero p { max-width: 760px; }
.page-hero.compact h1 {
  max-width: 820px;
  font-size: clamp(32px, 3.7vw, 46px);
  font-weight: 700;
}
.service-page-hero {
  min-height: 320px;
}
.section-heading { max-width: 820px; margin-bottom: 32px; }
.intro-grid, .why-content, .contact-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
  gap: 38px;
  align-items: start;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stats div, .service-card, .faq-list article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 24px rgba(7, 26, 54, 0.05);
}
.stats strong { display: block; color: var(--blue); font-size: 24px; font-weight: 750; }
.stats span { display: block; margin-top: 8px; color: var(--muted); font-weight: 600; }
.services-section { background: var(--soft); }
.service-grid, .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.service-card {
  position: relative;
  min-height: 215px;
  overflow: hidden;
}
.service-card p, .why-list span, .form-note, .faq-list p { color: var(--muted); line-height: 1.7; }
.service-card a { color: var(--blue); font-weight: 700; }
.service-card::after {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 3px;
  content: "";
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.service-card:hover::after {
  transform: scaleX(1);
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 8px;
  color: var(--white);
  background: var(--blue);
  font-size: 13px;
  font-weight: 700;
}
.why-section { color: var(--white); background: var(--navy); }
.why-section .eyebrow, .why-section h2 { color: var(--white); }
.why-list { display: grid; gap: 16px; }
.why-list div {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.why-list strong { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.why-list span { color: #c5d2e4; }
.contact-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--soft);
}
.contact-section { background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%); }
.contact-panel { max-width: 1180px; margin: 0 auto; }
.contact-form {
  display: grid;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.contact-form label {
  color: var(--navy);
  font-size: 14px;
  font-weight: 650;
}
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 15px;
  color: var(--ink);
  font: inherit;
  outline: none;
}
textarea { resize: vertical; }
input:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11,111,232,.12); }
.field-validation-error { color: #b42318; font-size: 13px; }
.success-message {
  padding: 14px;
  border-radius: 8px;
  color: #075e2b;
  background: #e8f8ef;
}
.faq-list { display: grid; gap: 16px; }
.featured { border-color: var(--blue); }
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease, box-shadow .2s ease;
}
.reveal.slide-down {
  transform: translateY(-20px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.site-footer {
  background: linear-gradient(135deg, #071a36, #050e1f);
  color: #ffffff;
  padding: 60px 20px 25px;
}

/* GRID */
.footer-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  text-align: left;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* BRAND */
.footer-column.brand p {
  color: #c5d2e4;
  font-size: 14px;
  line-height: 1.7;
}

.footer-column h3 {
  color: #0b6fe8;
  font-size: 20px;
  margin-bottom: 12px;
}

/* HEADINGS */
.footer-column h4 {
  font-size: 15px;
  margin-bottom: 14px;
  color: #ffffff;
}

.footer-column h4::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: #0b6fe8;
  margin-top: 6px;
}

/* LIST */
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* FIXED ALIGNMENT */
.footer-column ul li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #c5d2e4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
}

/* CONTACT SPECIAL FIX */
.footer-column.contact ul li {
  flex-direction: row;
  align-items: flex-start;
}

/* ICON */
.icon {
  width: 20px;
  display: inline-block;
}

/* LINKS */
.footer-column ul li a {
  color: #c5d2e4;
  transition: 0.3s;
  text-decoration: none;
}

.footer-column ul li a:hover {
  color: #0b6fe8;
  padding-left: 6px;
}

/* BOTTOM */
.footer-bottom {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 22px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: white;
  padding: 4px;
  object-fit: contain;
}

.footer-logo span {
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  line-height: 1.3;
  max-width: 150px;
}

/* FOLLOW US */
.footer-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.follow-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0;
}

.follow-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.follow-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.15s ease, box-shadow 0.2s ease;
}

.follow-icon-btn:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);
}

/* TAGLINE */
.footer-tagline {
  font-size: 13px;
  color: #94a3b8;
  text-align: right;
  line-height: 1.6;
  max-width: 200px;
}

.footer-tagline strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

/* COPYRIGHT */
.copyright {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: #a9b4c2;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .footer-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-wrapper {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .footer-tagline {
    text-align: center;
    max-width: 100%;
  }

  .footer-logo span {
    max-width: 200px;
  }
}
.feedback-slider {
    position: relative;
    max-width: 720px;
    margin: 40px auto 0;
    text-align: center;
    padding: 50px 60px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.feedback-slider .quote-icon {
    position: absolute;
    top: 10px;
    left: 28px;
    font-size: 80px;
    color: rgba(11,111,232,.08);
    font-family: serif;
    line-height: 1;
}

.feedback-slides {
    position: relative;
    overflow: hidden;
    /* CLS FIX: this min-height is now mostly a safety floor. The real
       fix is below: only the active slide is in normal flow, so the
       container's actual height tracks that one slide instead of
       jumping between slides of very different lengths as the
       autoplay rotates (e.g. the long James Carter quote vs the much
       shorter David Reyes one). */
    min-height: 220px;
}

.feedback-slides-track {
    position: relative;
    /* No longer a flex row sliding via translateX — see .feedback-slide
       below for the stacking approach that prevents layout shift. */
}

.feedback-slide {
    /* CLS FIX: every slide is stacked exactly on top of the others
       and hidden by default. Only .feedback-slide.active takes part
       in layout, so the track's height always matches the slide
       that's actually visible — there's no in-between state where a
       short slide and a long slide both occupy space, and no jump
       when autoplay switches between them. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.feedback-slide.active {
    position: relative; /* takes the slide back into normal flow,
                            so it (and only it) sets the container height */
    opacity: 1;
    visibility: visible;
}

.feedback-slide p {
    color: #4d5d74;
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 24px;
    text-align: center;
}

.feedback-person {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.feedback-person .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feedback-person h4 {
    margin: 0;
    font-size: 15px;
    color: var(--navy);
    text-align: left;
}

.feedback-person span {
    font-size: 13px;
    color: var(--muted);
}

.feedback-slide .stars {
    color: #f5b301;
    font-size: 18px;
    letter-spacing: 2px;
    margin: 0;
    text-align: center;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    z-index: 5;
}

.slider-arrow:hover {
    background: var(--blue);
    color: #fff;
}

.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }

.slider-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.dot.active {
    background: var(--blue);
    transform: scale(1.3);
}

@media (max-width: 600px) {
    .feedback-slider {
        padding: 36px 24px;
    }
    .slider-arrow.prev { left: 6px; }
    .slider-arrow.next { right: 6px; }
}
.testimonials-section {
padding-top: 20px;
}

.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
gap: 30px;
}

.testimonial-card {
background: #fff;
border-radius: 20px;
padding: 32px;
position: relative;
box-shadow: 0 15px 40px rgba(0,0,0,.08);
transition: all .3s ease;
}

.testimonial-card:hover {
transform: translateY(-8px);
}

.quote-icon {
font-size: 60px;
line-height: 1;
color: rgba(11,111,232,.12);
margin-bottom: 10px;
}

.stars {
color: #f5b301;
letter-spacing: 2px;
margin-bottom: 18px;
}

.testimonial-text {
line-height: 1.8;
color: #4b5b73;
margin-bottom: 24px;
}

.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}

.testimonial-avatar {
width: 55px;
height: 55px;
border-radius: 50%;
background: linear-gradient(135deg,#0b6fe8,#064799);
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}

.testimonial-author h3 {
margin: 0;
font-size: 18px;
}

.testimonial-author span {
color: #6c7c93;
font-size: 14px;
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

/* --- Header / Nav: collapse to hamburger menu --- */
@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px clamp(18px, 5vw, 72px);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-cta {
    margin-top: 10px;
    justify-content: center;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .brand span {
    font-size: 14px;
  }
}

/* --- Two-column content blocks: stack on mobile --- */
@media (max-width: 760px) {
  .intro-grid,
  .why-content,
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --- Stats row: 2 columns on tablet, 1 on small phones --- */
@media (max-width: 760px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* --- Service / pricing cards: stack below tablet width --- */
@media (max-width: 900px) {
  .service-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .service-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Hero: don't let fixed widths fight the viewport --- */
@media (max-width: 560px) {
  .hero-content {
    width: 100%;
    margin-left: 0;
    padding: 48px 18px;
  }
  .hero-copy {
    max-width: 100%;
  }
}

/* --- Testimonial grid: tighten spacing on small phones --- */
@media (max-width: 480px) {
  .testimonial-grid {
    gap: 18px;
  }
  .testimonial-card {
    padding: 22px;
  }
}
/* ── Service Detail Page ── */
.service-detail {
    max-width: 860px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 60px 24px 80px;
}

.service-body {
    text-align: left;
}

.service-body p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--color-text-secondary, #4a4a4a);
    margin: 0 0 1.6rem 0;
    text-indent: 0;
}

.service-body p:first-child {
    font-size: 1.15rem;
    color: var(--color-text-primary, #111);
    font-weight: 500;
    line-height: 1.75;
}

.service-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .service-detail {
        padding: 36px 16px 60px;
    }
    .service-body p {
        font-size: 1rem;
    }
    .service-body p:first-child {
        font-size: 1.0625rem;
    }
}