/* Fonts (Inter, Outfit) enqueued via wp_enqueue_style with preconnect - see inc/enqueue.php. */

:root {
  /* Brand Colors */
  --color-primary-peach: #FFE5D9;
  --color-primary-purple: #5A3A7E;
  --color-secondary-lavender: #F4F0F7;
  --color-secondary-gray: #F9FAFB;
  --color-white: #FFFFFF;

  /* Text Colors */
  --text-dark: #1F2937;
  --text-muted: #4B5563;
  --text-light: #9CA3AF;

  /* Accents */
  --accent-peach: #FFD1C1;
  --accent-purple-light: #7E5DA2;

  /* UI Elements */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --transition: all 0.3s ease-in-out;

  /* Fixed-navbar height: logo height + its 1rem vertical padding, plus the 1px
     bottom border. The hero is the only full-bleed section that starts beneath
     the navbar, so it derives its top padding from this instead of hard-coding
     a value that silently stops clearing the bar when the logo size changes. */
  --navbar-logo-height: 100px;
  --navbar-height: calc(var(--navbar-logo-height) + 2rem + 1px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background-color: var(--color-secondary-gray);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--color-primary-purple);
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.py-4 {
  padding: 4rem 0;
}

.py-6 {
  padding: 4rem 0;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 3rem auto;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
  border: none;
  font-family: 'Inter', sans-serif;
}

.btn-primary,
.nav-links a.btn-primary {
  background-color: var(--color-primary-purple);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background-color: var(--accent-purple-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background-color: var(--color-primary-peach);
  color: var(--color-primary-purple);
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--accent-peach);
  transform: translateY(-2px);
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-purple);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-primary-purple);
}

/* Dropdown Menu */
.nav-dropdown {
  position: relative;
}

/* Label + arrow sit on one line; the label links, the arrow toggles. */
.nav-dropdown-head {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  /* padding: 0.25rem; */
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0;
  transition: var(--transition);
}

.nav-dropdown-arrow:hover,
.nav-dropdown.open .nav-dropdown-arrow {
  color: var(--color-primary-purple);
}

.nav-dropdown-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 0;
  text-decoration: none;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active {
  color: var(--color-primary-purple);
}

.nav-dropdown.open .nav-dropdown-arrow svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-arrow svg {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  min-width: 280px;
  padding: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 999;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Class-driven state: used by tap-to-toggle on touch devices. */
.nav-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Hover-to-open only where hover really exists. On a touch tablet the tap
   emits a one-shot synthetic hover, which would open the panel and then let
   the next tap clear it — the menu appearing and immediately vanishing. */
@media (hover: hover) {
  .nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background: var(--color-secondary-lavender);
  color: var(--color-primary-purple);
}

.dropdown-menu a .dd-icon {
  width: 32px;
  height: 32px;
  background: var(--color-secondary-lavender);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-purple);
  flex-shrink: 0;
}

.dropdown-divider {
  height: 1px;
  background: var(--color-secondary-gray);
  margin: 0.5rem 0;
}

.dropdown-footer-link {
  display: block;
  text-align: center;
  padding: 0.6rem;
  color: var(--color-primary-purple) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border-radius: var(--radius-md);
}

.dropdown-footer-link:hover {
  background: var(--color-primary-peach) !important;
  color: var(--color-primary-purple) !important;
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-primary-purple);
  cursor: pointer;
}

/* The button holds both icons; only one is shown, driven by .active. */
.mobile-menu-btn-open,
.mobile-menu-btn-close {
  display: flex;
  align-items: center;
}

.mobile-menu-btn-close,
.mobile-menu-btn.active .mobile-menu-btn-open {
  display: none;
}

.mobile-menu-btn.active .mobile-menu-btn-close {
  display: flex;
}

/* Mobile dropdown - hidden on desktop (the whole label+arrow row) */
.mobile-dropdown-head {
  display: none;
}

.mobile-dropdown-toggle {
  display: none;
}

.mobile-dropdown-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 0;
}

.mobile-dropdown-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.mobile-dropdown-arrow.active svg {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  display: none;
  flex-direction: column;
  padding-left: 1rem;
  gap: 0.25rem;
}

.mobile-dropdown-menu.open {
  display: flex;
}

.mobile-dropdown-menu a {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  padding: 0.3rem 0 !important;
}

.mobile-dropdown-footer-link {
  margin-top: 0.4rem !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid var(--color-secondary-gray);
  font-weight: 600;
  color: var(--color-primary-purple) !important;
}

/* Hero Section */
.hero {
  padding: calc(var(--navbar-height) + 3rem) 0 6rem;
  background: linear-gradient(135deg, var(--color-secondary-lavender) 0%, var(--color-primary-peach) 100%);
  position: relative;
  overflow: hidden;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-primary-purple);
}

.hero-content p {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.hero-btns {
  display: flex;
  gap: 1rem;
}

.hero-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Services Grid */
.services-section {
  background-color: var(--color-white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--color-white);
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  text-align: left;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-peach);
}

.service-icon {
  width: 50px;
  height: 50px;
  background: var(--color-secondary-lavender);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--color-primary-purple);
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* About Preview */
.about-preview {
  background-color: var(--color-secondary-gray);
}

.about-preview .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-image {
  /* Match .hero-image so both framed portraits share the same corner radius. */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* Stats/Why Choose Us */
.stats-section {
  background-color: var(--color-primary-purple);
  color: var(--color-white);
}

.stats-section h2 {
  color: var(--color-white);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2rem;
  text-align: center;
}

.stat-item h3 {
  font-size: 3rem;
  color: var(--color-primary-peach);
  margin-bottom: 0.5rem;
}

/* Testimonials */
.testimonials {
  background-color: var(--color-secondary-lavender);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

.testimonial-card {
  background: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.testimonial-content {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-info h4 {
  font-size: 1rem;
  margin: 0;
}

.author-info p {
  font-size: 0.875rem;
  color: var(--text-light);
  margin: 0;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, var(--color-primary-peach) 0%, #FFD1C1 100%);
  text-align: center;
  border-radius: var(--radius-xl);
  margin: 2rem auto;
  max-width: 1000px;
  padding: 4rem 2rem;
}

.cta-section h2 {
  color: var(--color-primary-purple);
}

/* ============================================================
   Footer — all breakpoints live in this one block.
   Column definitions were previously spread across five separate
   media queries elsewhere in the file; because a later
   `max-width: 1200px` rule also set grid-template-columns, it won
   the cascade on phones and forced a 4-column layout. Keeping every
   footer column rule together (and in ascending-specificity order)
   is what prevents that class of bug from recurring.
   ============================================================ */
.footer {
  background-color: var(--text-dark);
  color: var(--color-white);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 20px;
}

.footer-col {
  min-width: 0;
  /* grid items default to min-content floor; this lets them shrink */
}

.footer-col h4 {
  color: var(--color-white);
  margin-bottom: 1.5rem;
  font-family: 'Outfit', sans-serif;
}

.footer-col p {
  color: var(--text-light);
  overflow-wrap: break-word;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: var(--text-light);
  transition: var(--transition);
  overflow-wrap: break-word;
}

.footer-links a:hover {
  color: var(--color-primary-peach);
}

.footer-inquire-btn {
  margin-top: 0.25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.875rem;
}

.footer-bottom p {
  overflow-wrap: break-word;
}

/* The global `a` rule is colour:inherit / no-underline, so without this the
   brand link would be indistinguishable from the text around it. */
.footer-brand-link {
  color: var(--color-white);
  font-weight: 500;
  /* Underline is drawn at rest but transparent, so it fades in on hover
     without the text reflowing or shifting. */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
}

.footer-brand-link:hover {
  color: var(--color-primary-peach);
  text-decoration-color: var(--color-primary-peach);
}

/* Keyboard focus gets a visible ring, not just the hover colour. */
.footer-brand-link:focus-visible {
  color: var(--color-primary-peach);
  text-decoration-color: var(--color-primary-peach);
  outline: 2px solid var(--color-primary-peach);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Small desktop / large tablet ---- */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2rem;
  }
}

/* ---- Tablet: 2x2. Four columns are too narrow to read below ~992px. ---- */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    margin-bottom: 2.5rem;
  }

  .footer {
    padding: 3rem 0 1.5rem;
  }
}

/* ---- Mobile: single column, centred. ---- */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  .footer {
    padding: 2.5rem 0 1.5rem;
    text-align: center;
  }

  /* Inner pages add .mt-3 (3rem) to the footer; that gap is too large on
     phones. Overridden here rather than by editing the .mt-3 utility, which
     is shared with pagination and other templates. */
  .footer.mt-3 {
    margin-top: 1rem;
  }

  .footer .logo {
    justify-content: center;
  }

  .footer-col h4 {
    margin-bottom: 1rem;
  }

  /* The inquire button is the footer's only CTA — make it a full-width,
     comfortably tappable target rather than a small inline block. */
  .footer-inquire-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-bottom {
    padding-top: 1.5rem;
    font-size: 0.8125rem;
  }
}

/* ---- Small phones (≤420px) ----
   The footer CTA is full-width up to 320px at 767px, which is oversized on a
   narrow phone. Shrink it to a self-sized pill instead. Must come after the
   767px block: same specificity, so source order decides. */
@media (max-width: 420px) {
  .footer-inquire-btn {
    width: auto;
    max-width: none;
    padding: 0.5rem 1.15rem;
    font-size: 0.875rem;
  }
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px) {

  .hero .container,
  .about-preview .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-btns {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--color-white);
    flex-direction: column;
    padding: 2rem;
    box-shadow: var(--shadow-md);
  }

  .nav-links.active {
    display: flex;
  }

  /* A long services list can exceed the screen height; scroll the panel
     instead of letting it run off the bottom with no way to reach the rest. */
  .nav-links {
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
  }

  .mobile-menu-btn {
    display: flex;
  }

  /* On mobile: hide the desktop label+arrow row, show the mobile one. */
  .nav-dropdown-head {
    display: none;
  }

  .mobile-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 44px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
  }

  /* Hide hover-based dropdown panel on mobile */
  .dropdown-menu {
    display: none !important;
  }
}

/* ---- Accessibility: skip link ---- */
.screen-reader-shortcut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  background: var(--color-primary-purple);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
}

.screen-reader-shortcut:focus {
  left: 0;
}

/* Account for fixed navbar when jumping to #main / anchors */
#main {
  scroll-margin-top: 120px;
}

:target {
  scroll-margin-top: 120px;
}

/* ---- Logo sizing (constrains custom-logo + fallback img to original 100px) ---- */
.navbar .logo img,
.navbar .custom-logo,
.navbar .custom-logo-link img,
.footer .logo img {
  height: var(--navbar-logo-height);
  width: auto;
  max-width: 100%;
}

.navbar .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

@media (max-width: 768px) {

  /* Rebinding the variable keeps --navbar-height (and the hero clearance that
     depends on it) in step with the smaller logo automatically. */
  :root {
    --navbar-logo-height: 64px;
  }

  .navbar .logo img,
  .navbar .custom-logo,
  .navbar .custom-logo-link img {
    height: var(--navbar-logo-height);
  }
}

/* ---- Form status messages + honeypot (global: forms appear on contact AND service pages) ---- */
.bc-form-status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-weight: 500;
  font-size: 0.95rem;
}

.bc-form-status.is-success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.bc-form-status.is-pending {
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #E5E7EB;
}

/* AJAX status banner sits under the submit button. */
.bc-form-status[data-bc-live] {
  margin-bottom: 0;
  margin-top: 1rem;
}

.bc-form-status[data-bc-live]:empty {
  display: none;
}

.bc-form-status.is-error {
  background: #FEF2F2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* --- Real-time field validation (assets/js/form-validation.js) --- */
.bc-field-error {
  display: block;
  min-height: 0;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 500;
  color: #B91C1C;
}

.bc-field-error:empty {
  margin-top: 0;
}

.form-control.is-invalid {
  border-color: #DC2626;
  background: #FFF8F8;
}

.form-control.is-invalid:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-control.is-valid {
  border-color: #10B981;
}

.form-control.is-valid:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

button[type="submit"]:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Honeypot: hidden from humans (bots still fill it and get rejected).
   Uses display:none rather than off-screen positioning — an off-screen field is
   still a live form control, so Chrome autofill and password managers filled it
   and real visitors were silently rejected as bots. */
.bc-hp-wrap {
  display: none !important;
}

.page-id-7 .container.py-4 {
  padding: 0rem 0;
}

.page-id-7 .cta-section {
  margin: 1rem auto 2rem auto;
  padding: 0rem 2rem 4rem 2rem;
}

.page-header {
  padding: 10rem 0 4rem;
}

/* Services archive spacing. Previously chained .logged-in.admin-bar.customize-support,
   so it only applied to logged-in admins and logged-out visitors saw different
   spacing. Keyed to the archive body class alone now. */
.post-type-archive-service .container.py-4 {
  padding: 10px 0;
}

.post-type-archive-service .py-6 {
  padding: 6rem 0 0 0;
}

.page-id-7 .py-6 {
  padding: 5rem 0;
}

.service-content-section.py-6 .sidebar-cta .btn.btn-primary {
  background-color: #49276e;
}

/* ---- Keep primary button text white on hover/active in the nav ----
   (overrides .nav-links a:hover which would otherwise turn it purple) */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary:focus,
.nav-links a.btn-primary.active {
  color: var(--color-white);
}

/* Current page: darken the button instead of recoloring the text. */
.nav-links a.btn-primary.active {
  background-color: #49276e;
}

.about-preview .about-content p {
  margin-bottom: 12px;
}

.about-preview .about-content .btn.btn-secondary {
  margin-top: 20px;
}


@media (max-width: 992px) {
  .page-id-7 .cta-section {
    margin: 0rem auto;
    padding: 1rem 2rem;
  }

  .page-id-7 .container.py-4 {
    padding: 1rem 0;
  }

  .page-id-7 .py-6 {
    padding: 1rem 0;
    padding-top: 50px;
  }

  .page-header {
    padding: 7rem 0 1rem;
  }

  .page-id-4 .testimonials.py-6 {
    padding: 3rem 0;
  }

  .page-id-4 .container.py-4 {
    padding: 0rem 0;
  }

  .page-id-4 .stats-section.py-6 {
    padding: 3rem 0;
  }

  .page-id-4 .services-section.py-6 {
    padding: 2rem 0 3rem 0;
  }

  .page-id-4 .about-preview.py-6 {
    padding: 3rem 0;
  }

  /* The logo is still full-height at this breakpoint, so a flat 6rem here put
     the navbar on top of the hero heading. Clear the bar, then add spacing. */
  .page-id-4 .hero {
    padding: calc(var(--navbar-height) + 1.5rem) 0 3rem;
  }

  .cta-section.fade-in-up.visible {
    border-radius: 0;
  }

  .page-id-5 .py-6 {
    padding: 3rem 0 0rem 0;
  }

  .mission-vision {
    padding: 3rem;
  }

  .page-id-5 .container.py-4 {
    padding: 3rem 0 0 0;
  }

  .page-id-7 .page-header {
    padding: 6rem 0 2rem;
  }

  .container {
    margin: 0 auto;
    padding: 0 15px;
  }

  .mission-vision {
    padding: 2rem;
  }

  .contact-header {
    padding: 7rem 0 1rem;
  }
}


/* ---- Home page (page-id-4): hero + about images full-width on ≤991px ----
   Lives here (not pages.css) because pages.css is not enqueued on the home
   template. Stretch the container too so the image has full width to fill.
   Certificates carousel images are excluded to preserve the slider sizing. */
/* Home hero + about images go full-width once the two-column grid collapses.
   Height is proportional (aspect-ratio, clamped) rather than a fixed 600/800px:
   a fixed height letterboxes badly across the tablet→phone range, since the
   same pixel height is a different proportion of every viewport. */
@media (max-width: 991px) {

  .page-id-4 .hero-image,
  .page-id-4 .about-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 600px;
  }

  /* Portrait subjects in a landscape box: `cover` crops top+bottom evenly and
     takes the head off. Anchor the crop near the top so the face stays framed
     across the whole 320–991px range. */
  .page-id-4 .hero-image img,
  .page-id-4 .about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
  }

  /* `start` matches the desktop .bio-section: the bio keeps its two-column
     layout on tablets now, and centring would misalign the copy against the
     top of the image. */
  .page-id-5 .py-6 .bio-section.fade-in-up.visible {
    align-items: start;
  }
}

@media (max-width: 678px) {

  /* Narrower viewport → taller box. A 3/2 box on a phone crops a portrait so
     hard that only a sliver of the subject survives; 4/5 keeps the figure. */
  .page-id-4 .hero-image,
  .page-id-4 .about-image {
    aspect-ratio: 4 / 5;
    max-height: 560px;
  }
}

/* ---- Very small screens (≤360px): prevent horizontal overflow ----
   At ~320px the container content area is ~290px, but several grids use
   minmax(300px,…)/(350px) tracks and cards use large fixed padding, which
   push content past the container. Force single columns and trim padding. */
@media (max-width: 360px) {

  /* Grids whose minimum track (300px / 200px) exceeds the content width */
  .services-grid,
  .testimonial-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }


  /* Reduce oversized card padding so inner content fits */
  .service-card {
    padding: 2rem 1.25rem;
  }

  .cta-section {
    padding: 3rem 1.25rem;
  }
}

/* ============================================================
   Cross-device responsive layer
   Covers what the per-page breakpoints above don't: fluid type,
   overflow safety, touch targets, and the 768–992px tablet band.
   ============================================================ */

/* ---- Overflow safety ----
   Long unbroken strings (emails, URLs, service names) are the most common
   cause of horizontal scroll on phones. */
body {
  overflow-x: hidden;
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a,
td,
label,
.testimonial-content,
.enquiry-details li,
.contact-item {
  overflow-wrap: break-word;
}

/* Media and embeds never exceed their container. */
img,
video,
iframe,
embed,
object,
table {
  max-width: 100%;
}

iframe,
video {
  height: auto;
}

/* Tables scroll inside themselves rather than widening the page. */
.entry-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
}

/* ---- Fluid typography ----
   clamp() scales headings continuously between phone and desktop, so sizes are
   correct at every width instead of only at the widths a breakpoint targets. */
.section-title {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}

.section-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.hero-content h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.hero-content p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.stat-item h3 {
  font-size: clamp(2.25rem, 5vw, 3rem);
}

/* ---- Tablet band (768–992px) ----
   Grids that use minmax(300px, 1fr) fit exactly two columns here but were
   never explicitly handled; the intermediate sizing below keeps them balanced. */
@media (min-width: 768px) and (max-width: 992px) {

  .services-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .py-6 {
    padding: 4rem 0;
  }

  .py-4 {
    padding: 3rem 0;
  }
}

/* ---- Phones (≤767px) ---- */
@media (max-width: 767px) {

  .services-grid,
  .testimonial-grid,
  .stats-grid,
  .gallery-grid,
  .process-grid,
  .service-benefits {
    grid-template-columns: 1fr;
  }

  .py-6 {
    padding: 3rem 0;
  }

  .py-4 {
    padding: 2rem 0;
  }

  .hero {
    padding: calc(var(--navbar-height) + 1.5rem) 0 3rem;
  }

  /* Full-bleed CTA reads better than a floating card on a narrow screen. */
  .cta-section {
    margin: 2rem auto;
    padding: 2.5rem 1.5rem;
    border-radius: var(--radius-lg);
  }

  /* Stacked CTA buttons go full-width so they are easy to hit. */
  .hero-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btns .btn {
    width: 100%;
  }

  .contact-item,
  .enquiry-details li {
    text-align: left;
  }
}

/* ---- Touch targets ----
   Interactive elements get a ~44px minimum hit area on touch devices, per
   WCAG 2.5.8. Scoped to coarse pointers so desktop density is unchanged. */
@media (pointer: coarse) {

  .btn,
  .mobile-menu-btn,
  .bc-carousel__nav,
  .nav-links a {
    min-height: 44px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu-btn,
  .bc-carousel__nav {
    min-width: 44px;
  }

  /* Exclude the breakpoint-toggled Services links: they are shown/hidden by
     the 768px media query, and a blanket `display: flex` here would override
     that and render both the desktop and mobile Services items at once. */
  .nav-links a:not(.nav-dropdown-toggle):not(.mobile-dropdown-toggle) {
    display: flex;
    align-items: center;
  }

  .footer-links a {
    display: inline-block;
    padding: 0.35rem 0;
  }

  /* Hover-reveal overlays can't be hovered on touch — show them by default. */
  .gallery-overlay {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- iOS: prevent zoom-on-focus ----
   Mobile Safari zooms the viewport when a focused input's font-size is under
   16px, which leaves the page zoomed after the field is dismissed. */
@media (max-width: 767px) {

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .bc-carousel__track {
    transition: none;
  }

  .fade-in-up {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Reusable carousel/slider (.bc-carousel)
   JS-driven (see assets/js/main.js): infinite loop, autoplay,
   responsive items-per-view. Used by the home services slider
   and the About-page certificates carousel.
   ============================================================ */
.bc-carousel {
  position: relative;
  --bc-per: 3;
  --bc-gap: 2rem;
}

.bc-carousel__viewport {
  overflow: hidden;
  width: 100%;
  /* vertical room so card shadows / hover lift are not clipped */
  padding: 14px 0;
}

.bc-carousel__track {
  display: flex;
  gap: var(--bc-gap);
  transition: transform 0.45s ease-in-out;
  will-change: transform;
}

.bc-carousel__slide {
  flex: 0 0 calc((100% - (var(--bc-per) - 1) * var(--bc-gap)) / var(--bc-per));
  min-width: 0;
}

/* slide children stretch to fill the slide */
.bc-carousel__slide>* {
  height: 100%;
}

.bc-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: var(--color-primary-purple);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.3s, transform 0.3s;
}

.bc-carousel__nav:hover {
  background: var(--accent-purple-light);
}

/* Non-looping carousels disable the nav at the first/last slide. */
.bc-carousel__nav:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.bc-carousel__prev {
  left: -0.5rem;
}

.bc-carousel__next {
  right: -0.5rem;
}

@media (max-width: 1100px) {
  .bc-carousel__prev {
    left: 0.5rem;
  }

  .bc-carousel__next {
    right: 0.5rem;
  }
}

/* Too few slides to loop: show them statically, centered, no controls. */
.bc-carousel--static .bc-carousel__nav {
  display: none;
}

.bc-carousel--static .bc-carousel__track {
  justify-content: center;
}

/* Certificates carousel: square image tiles */
.bc-carousel--certificates .bc-carousel__slide {
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f8f8f8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bc-carousel--certificates .bc-carousel__slide img {
  width: 100%;
  height: 100%;
  display: block;
}


.service-card:hover {
  transform: translateY(-5px);
  box-shadow: none;
  border-color: transparent;
}

.service-card {
  background: transparent;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0);
  transition: var(--transition);
  text-align: left;
}

.services-section .bc-carousel__next {
  right: -2.7rem;
}

.services-section .bc-carousel__prev {
  left: -2.7rem;
}

.bc-carousel__nav {
  width: 37px;
  height: 37px;
  /* A perfect circle needs equal box sides: padding/border would make the
     37px content box non-square and flatten it into an oval. */
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  flex: 0 0 auto;
  line-height: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Lucide renders <i data-lucide> into an inline <svg>. An SVG is centred by
   its own geometry, unlike the &lsaquo;/&rsaquo; glyphs used before, which
   carried font side-bearings and sat off-centre inside the circle. */
.bc-carousel__nav svg,
.bc-carousel__nav i {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 2.5;
}
/* NOTE: footer grid columns live in the consolidated footer block above (see
   "Footer — all breakpoints live in this one block"). Do not set
   grid-template-columns here: this query sits later in source order than the
   992px/767px rules, so it would win the cascade on phones and force a
   multi-column layout. Only non-column footer properties belong here. */
@media (max-width: 1200px) {
  .footer {
    font-size: 14px;
  }
}

.bc-carousel__prev {
  left: -1.5rem;
}

.bc-carousel__next {
  right: -1.5rem;
}

/* ---- Carousel arrows below ~1024px ----
   On desktop the arrows sit outside the viewport edges. Below 1024px there is
   no room outside the container, so they move BELOW the slider and are centred
   as a pair using the flow layout instead of hardcoded per-breakpoint offsets
   (the previous approach pinned them to fixed rem values that only lined up at
   the exact widths they were tuned for, and drifted everywhere in between). */
@media (max-width: 1024px) {
  /* The arrows are in normal flow now (see the flex rules below), so they
     occupy their own height; the old 4.25rem reservation would double it. */
  .bc-carousel {
    padding-bottom: 0;
  }

  /* Lay the pair out as a centred flex row rather than absolutely positioning
     each button off the midpoint. The old approach offset prev by a hardcoded
     37px, but the touch-target rule grows the buttons to 44px on coarse
     pointers, so the offset was 7px short: prev drifted right, the two
     overlapped, and the gap read as far too wide. Flex derives the position
     from the real rendered width, so `gap` is the only number that matters. */
  .bc-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
  }

  .bc-carousel__viewport {
    /* Full-width row of its own so the arrows wrap onto the line below.
       min-width:0 keeps the flex item from refusing to shrink below its
       content width, which would overflow the container. */
    flex: 0 0 100%;
    min-width: 0;
  }

  .bc-carousel__nav,
  .services-section .bc-carousel__prev,
  .services-section .bc-carousel__next {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
    margin-left: 0;
    margin-right: 0;
    /* Source order is prev then next, which is also the visual order here. */
    order: 0;
  }
}

@media (max-width: 991px) {
  .page-id-5 .certificates-section.py-6 {
    padding-bottom: 60px;
    padding-top: 0px;
  }
}

/* Testimonials archive: track floor must stay under the smallest content width
   (~290px at 320px viewport), otherwise the grid overflows the container. */
.page-id-95 .testimonial-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(375px, 100%), 1fr));
}
@media (max-width: 991px) {
    .post-type-archive-service .py-6 {
        padding: 3rem 0 0 0 !important;
    }
    .post-type-archive-service .container.py-4 {
        padding: 0px !important;
    }
}

/* ---- Primary buttons below 992px ----
   Trim the desktop 0.75rem/1.5rem padding so the CTA sits comfortably on
   tablets. Placed last: same specificity as the base .btn-primary rule, so
   source order is what lets it win. */
@media (max-width: 991px) {
  /* :not() excludes the footer CTA, which has its own ≤420px sizing earlier in
     this file; without it this later rule would override that padding. */
  .btn-primary:not(.footer-inquire-btn) {
    padding: 0.6rem 1.25rem;
    font-size: 0.9375rem;
  }
}

/* ---- Hero CTAs on small phones (≤480px) ----
   They stack full-width from 767px down, which is oversized here. Shrink them
   to self-sized, centred pills. Placed after the 991px .btn-primary rule above
   so it cannot re-inflate the padding. */
@media (max-width: 480px) {
  .hero-btns {
    gap: 0.65rem;
    align-items: center;
  }

  .hero-btns .btn {
    width: auto;
    padding: 0.5rem 1.15rem;
    font-size: 0.875rem;
  }
}