/* ==========================================================================
   JCR Computers — main.css
   WordPress 6.3+ | WCAG 2.1 AA | Mobile-first
   ==========================================================================

   Table of Contents
   ------------------
   1.  Design Tokens (CSS Custom Properties)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Buttons
   6.  Badges & Tags
   7.  Skip Link & Accessibility
   8.  Site Header & Navigation
   9.  Hero Section
  10.  Services Grid Section
  11.  Phone & Internet Section
  12.  AI Services Section
  13.  About / Trust Pillars Section
  14.  Testimonials Section
  15.  CTA Banner Section
  16.  Site Footer
  17.  Page Templates (page.php, single.php, archive, 404)
  18.  Post Card
  19.  Pagination
  20.  Search Form
  21.  Animations & Scroll Reveals
  22.  Print
  23.  Contact & Gravity Forms Styling
  24–36. Page templates (repairs, services, contact, FAQ, testimonials, industries,
         about, how-we-work, service pages, switching)
  37.  Web Hosting Plans Template
  38.  Remote Support Template
  39.  Why JCR Computers Template
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* --- Colour palette --- */
  --color-navy-950:  #050d1a;
  --color-navy-900:  #0a1628;
  --color-navy-800:  #0f2040;
  --color-navy-700:  #152a54;
  --color-navy-600:  #1c3568;
  --color-navy-500:  #234080;

  --color-blue-600:  #1d4ed8;
  --color-blue-500:  #2563eb;
  --color-blue-400:  #3b82f6;
  --color-blue-300:  #60a5fa;
  --color-blue-100:  #dbeafe;

  --color-teal-700:  #0f766e;
  --color-teal-600:  #0d9488;
  --color-teal-500:  #14b8a6;
  --color-teal-400:  #2dd4bf;
  --color-teal-300:  #5eead4;
  --color-teal-100:  #ccfbf1;
  --color-teal-50:   #f0fdfa;

  --color-purple-600: #7c3aed;
  --color-purple-500: #8b5cf6;
  --color-purple-400: #a78bfa;
  --color-purple-100: #ede9fe;

  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50:  #f8fafc;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error:   #dc2626;

  /* --- Semantic colour aliases --- */
  --color-bg:           var(--color-white);
  --color-bg-alt:       var(--color-slate-50);
  --color-bg-dark:      var(--color-navy-900);
  --color-text:         var(--color-slate-900);
  --color-text-muted:   var(--color-slate-600);
  --color-text-light:   var(--color-slate-400);
  --color-border:       var(--color-slate-200);
  --color-accent:       var(--color-blue-500);
  --color-accent-hover: var(--color-blue-600);

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* Type scale (fluid via clamp) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  clamp(1.5rem, 3vw, 1.875rem);
  --text-4xl:  clamp(1.875rem, 4vw, 2.25rem);
  --text-5xl:  clamp(2.25rem, 5vw, 3rem);
  --text-6xl:  clamp(2.5rem, 6vw, 3.75rem);

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.25;
  --line-height-snug:   1.4;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.018em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.05em;

  /* --- Spacing scale (8px base) --- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* Section vertical rhythm */
  --section-py: clamp(var(--space-12), 8vw, var(--space-24));

  /* --- Borders & Radii --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;
  --border-width: 1px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-card: 0 2px 8px 0 rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-card-hover: 0 8px 24px 0 rgb(0 0 0 / 0.12), 0 2px 6px 0 rgb(0 0 0 / 0.06);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Layout --- */
  --container-max:   1280px;
  --container-px:    clamp(var(--space-4), 5vw, var(--space-8));
  --header-height:   72px;
  --nav-z:           100;
}


/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

a:focus-visible {
  outline: 3px solid var(--color-blue-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
}

p {
  line-height: var(--line-height-relaxed);
}

address {
  font-style: normal;
}

.not-italic {
  font-style: normal;
}

/* Respect reduced motion preference */
@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;
  }
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

h1 { font-size: var(--text-5xl); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--text-4xl); letter-spacing: var(--letter-spacing-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Prose — rich text from the editor */
.prose {
  max-width: 72ch;
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote {
  margin-bottom: var(--space-6);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose a {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}

.prose blockquote {
  border-left: 4px solid var(--color-blue-400);
  padding-left: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-slate-100);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

.prose strong {
  font-weight: var(--font-weight-semibold);
}

.prose img {
  border-radius: var(--radius-lg);
  margin-block: var(--space-8);
}


/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--section-py);
}

.section--alt-bg {
  background-color: var(--color-bg-alt);
}

.section--dark {
  background-color: var(--color-navy-900);
  color: var(--color-slate-300);
  position: relative;
  overflow: hidden;
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

/* Section header */
.section-header {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

@media (max-width: 599px) {
  .section-header {
    margin-bottom: var(--space-10);
  }
}

.section-header--light .section-header__title,
.section-header--light .section-header__subtitle {
  color: var(--color-white);
}

.section-header--light .section-header__subtitle {
  color: rgba(255, 255, 255, 0.7);
}

.section-header__eyebrow {
  margin-bottom: var(--space-4);
}

.section-header__title {
  margin-bottom: var(--space-4);
}

.section-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

/* Split layout — used for phone-internet section */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .split-layout {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .split-layout--reverse {
    direction: rtl;
  }

  .split-layout--reverse > * {
    direction: ltr;
  }
}

.split-layout__subtitle {
  font-size: var(--text-xl);
  margin-bottom: var(--space-6);
  color: var(--color-slate-800);
}

.split-layout__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Check list */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.check-list svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-teal-500);
}


/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 3px solid var(--color-blue-400);
  outline-offset: 3px;
}

.btn:active {
  transform: translateY(1px);
}

/* Sizes */
.btn--sm  { padding: 0.4rem 0.875rem; font-size: var(--text-sm); }
.btn--lg  { padding: 0.875rem 1.75rem; font-size: var(--text-lg); }

/* Variants */
.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
  box-shadow: 0 4px 14px 0 rgb(37 99 235 / 0.4);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-blue-100);
  color: var(--color-accent-hover);
}

/* White variant (on dark/blue backgrounds) */
.btn--white {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-accent);
}

.btn--white:hover {
  background-color: var(--color-slate-100);
  color: var(--color-accent-hover);
}

/* Ghost white (on dark backgrounds) */
.btn--ghost-white {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

.btn--ghost-white:hover {
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

/* Ghost (on light backgrounds) */
.btn--ghost {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}

.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}


/* ==========================================================================
   6. Badges & Tags
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.badge--blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  border-color: rgba(37, 99, 235, 0.15);
}

.badge--teal {
  background-color: var(--color-teal-100);
  color: var(--color-teal-500);
  border-color: rgba(13, 148, 136, 0.15);
}

.badge--purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-600);
  border-color: rgba(124, 58, 237, 0.15);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  text-decoration: none;
}

.tag--ai {
  background-color: rgba(139, 92, 246, 0.15);
  color: var(--color-purple-400);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

/* Dark-section badge overrides */
.section--dark .badge--blue {
  background-color: rgba(59, 130, 246, 0.15);
  color: var(--color-blue-300);
  border-color: rgba(59, 130, 246, 0.3);
}


/* ==========================================================================
   7. Skip Link & Accessibility
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy-900);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

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

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ==========================================================================
   8. Site Header & Navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--nav-z);
  height: var(--header-height);
  background-color: var(--color-navy-950);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header.is-scrolled {
  background-color: rgba(5, 13, 26, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px 0 rgb(0 0 0 / 0.4);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-6);
}

/* Logo / brand */
.site-header__brand {
  flex-shrink: 0;
}

.site-header__brand .custom-logo {
  height: 44px;
  width: auto;
}

.site-header__text-logo {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
}

.site-header__text-logo:hover {
  color: var(--color-blue-300);
}

/* Nav */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.site-nav__list a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-page-ancestor > a {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Header CTA / actions group */
.site-header__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Remote Support button — outlined blue, matches new theme */
.btn--remote-support {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-300);
  background-color: rgba(59, 130, 246, 0.08);
  border: 1.5px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn--remote-support:hover {
  background-color: rgba(59, 130, 246, 0.18);
  border-color: var(--color-blue-400);
  color: var(--color-white);
}

/* Client Portal link */
.site-header__portal-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-300);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.site-header__portal-link:hover {
  color: var(--color-white);
}

.site-header__portal-link svg {
  color: var(--color-neutral-400);
  flex-shrink: 0;
}

/* Phone number link */
.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
}

.site-header__phone:hover {
  color: var(--color-blue-300);
}

.site-header__phone svg {
  color: var(--color-blue-400);
  flex-shrink: 0;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--color-blue-400);
  outline-offset: 3px;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav */
@media (max-width: 899px) {
  .nav-toggle {
    display: flex;
  }

  /* Show CTA bar on mobile but hide Remote Support — only show call pill */
  .site-header__cta {
    display: flex !important;
    align-items: center;
    margin-left: auto;
    margin-right: var(--space-3);
    gap: 0;
  }

  .site-header__cta .btn--remote-support,
  .site-header__portal-link {
    display: none;
  }

  /* Phone number → blue call pill */
  .site-header__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.875rem;
    min-height: 44px;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background-color: var(--color-blue-500);
    border: 2px solid var(--color-blue-500);
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
  }

  .site-header__phone:hover,
  .site-header__phone:focus-visible {
    background-color: var(--color-blue-600);
    border-color: var(--color-blue-600);
    color: var(--color-white);
  }

  .site-header__phone svg {
    color: var(--color-white);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-navy-950);
    padding: var(--space-4) var(--space-4) var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-base),
                opacity var(--transition-base),
                visibility var(--transition-base);
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list a {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   8b. Dropdown / Submenu Styles
   ========================================================================== */

/* Parent items that have children get a dropdown indicator */
.site-nav__list li.menu-item-has-children > a {
  padding-right: var(--space-6);
  position: relative;
}

/* Desktop: small chevron triangle (original style) */
.site-nav__list li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.6);
  transition: transform var(--transition-fast);
  pointer-events: none;
}

/* Desktop — dropdown panel */
@media (min-width: 900px) {
  .site-nav__list li.menu-item-has-children {
    position: relative;
  }

  /* The submenu itself */
  .site-nav__list .sub-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 220px;
    background-color: var(--color-navy-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-2) 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast),
                transform var(--transition-fast),
                visibility var(--transition-fast);
    z-index: calc(var(--nav-z) + 1);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Show on hover OR when .is-open is toggled by JS */
  .site-nav__list li.menu-item-has-children:hover > .sub-menu,
  .site-nav__list li.menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Rotate triangle when open on desktop */
  .site-nav__list li.menu-item-has-children:hover > a::after,
  .site-nav__list li.menu-item-has-children.is-open > a::after {
    transform: translateY(-50%) rotate(180deg);
  }

  /* Submenu links */
  .site-nav__list .sub-menu a {
    display: block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 0;
    white-space: nowrap;
  }

  .site-nav__list .sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.07);
    color: var(--color-white);
  }

  /* Bridge gap between top-level item and dropdown so hover doesn't flicker */
  .site-nav__list li.menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
  }
}

/* Mobile — accordion style with + / × indicator */
@media (max-width: 899px) {
  .site-nav__list li.menu-item-has-children > a {
    padding-right: var(--space-10);
  }

  /* Override triangle with a + character on mobile */
  .site-nav__list li.menu-item-has-children > a::after {
    content: '+';
    width: auto;
    height: auto;
    border: none;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.6);
    right: 16px;
  }

  .site-nav__list li.menu-item-has-children.is-open > a::after {
    transform: translateY(-50%) rotate(45deg);
    color: rgba(255, 255, 255, 0.9);
  }

  .site-nav__list .sub-menu {
    display: none;
    flex-direction: column;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.04);
    border-left: 2px solid rgba(59, 130, 246, 0.4);
    margin-left: var(--space-4);
    list-style: none;
    gap: 0;
  }

  .site-nav__list li.menu-item-has-children.is-open > .sub-menu {
    display: flex;
  }

  .site-nav__list .sub-menu a {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
  }

  .site-nav__list .sub-menu a:hover {
    color: var(--color-white);
    background-color: transparent;
  }
}


/* Page header (used on inner pages) */
.page-hero {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* Network background — same treatment as home page hero */
.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-hero__bg-svg {
  width: 100%;
  height: 100%;
}

.page-hero--blog {
  padding-block: clamp(var(--space-10), 6vw, var(--space-16));
}

/* Default page hero — used by page.php for all untemplatted pages */
.page-hero--default {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 55%, #0d2a50 100%);
  padding-block: clamp(var(--space-20), 12vw, var(--space-32));
  min-height: 280px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Radial glow accents */
.page-hero--default::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}


.page-hero--default .page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-hero--default .page-hero__content {
  max-width: 72ch;
}

.page-hero--default .page-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.page-hero--default .page-hero__title {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: var(--font-weight-extrabold);
  line-height: 1.08;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-white);
  margin-bottom: 0;
}

.page-hero--default .page-hero__subtitle {
  margin-top: var(--space-5);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-xl);
  line-height: 1.6;
  max-width: 58ch;
}

@media (max-width: 767px) {
  .page-hero--default {
    min-height: 200px;
    padding-block: var(--space-16) var(--space-14);
  }

  .page-hero--default .page-hero__title {
    font-size: var(--text-3xl);
  }

  .page-hero--default .page-hero__subtitle {
    font-size: var(--text-base);
  }
}

.page-hero__title {
  color: var(--color-white);
  font-size: var(--text-4xl);
  max-width: 18ch;
}

.page-hero__description {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-lg);
  margin-top: var(--space-4);
  max-width: 60ch;
}


/* ==========================================================================
   9. Hero Section
   ========================================================================== */

.hero {
  position: relative;
  min-height: max(580px, 85vh);
  display: flex;
  align-items: center;
  background: linear-gradient(
    150deg,
    var(--color-navy-800) 0%,
    var(--color-navy-800) 55%,
    var(--color-navy-700) 100%
  );
  overflow: hidden;
  color: var(--color-white);
}

@media (max-width: 599px) {
  .hero {
    min-height: auto;
    padding-bottom: var(--space-12);
  }
}

/* Network background */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero__bg-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-20);
  display: flex;
  align-items: center;
}

@media (max-width: 599px) {
  .hero__inner {
    padding-block: var(--space-12) var(--space-8);
  }
}

.hero__content {
  max-width: 760px;
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__title {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-6);
}

.hero__title-highlight {
  display: block;
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-teal-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: clamp(var(--text-base), 2.5vw, var(--text-xl));
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
  max-width: 60ch;
  margin-bottom: var(--space-10);
}

@media (max-width: 599px) {
  .hero__title {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    margin-bottom: var(--space-4);
  }

  .hero__subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-8);
  }
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (max-width: 599px) {
  .hero__cta-group {
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__cta-group .btn--lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-base);
  }
}

/* Trust bar */
.hero__trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero__trust-number {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-blue-300);
  line-height: 1;
}

.hero__trust-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
}

.hero__trust-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .hero__trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-top: var(--space-6);
  }

  .hero__trust-divider {
    display: none;
  }

  .hero__trust-number {
    font-size: var(--text-xl);
  }

  .hero__scroll-indicator {
    display: none;
  }
}

/* Scroll indicator */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero__scroll-dot {
  width: 6px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}

.hero__scroll-dot::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background-color: var(--color-blue-400);
  border-radius: var(--radius-full);
  animation: scrollBounce 2s ease infinite;
}

@keyframes scrollBounce {
  0%   { top: 4px; opacity: 1; }
  80%  { top: 20px; opacity: 0.3; }
  100% { top: 4px; opacity: 1; }
}


/* ==========================================================================
   10. Services Grid Section
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

@media (max-width: 599px) {
  .service-card {
    padding: var(--space-6);
  }
}

.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-blue-300);
}

.service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-lg);
  color: var(--color-accent);
  flex-shrink: 0;
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.service-card__title {
  font-size: var(--text-xl);
  color: var(--color-slate-900);
  font-weight: var(--font-weight-bold);
}

.service-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

.service-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
}

.service-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.service-card__features svg {
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-card__link:hover {
  gap: var(--space-2);
  color: var(--color-accent-hover);
}


/* ==========================================================================
   11. Phone & Internet Section
   ========================================================================== */

/* Mini card — used in split layouts */
.mini-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.mini-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-blue-300);
}

.mini-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.05));
  border-radius: var(--radius-md);
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.mini-card__icon svg {
  width: 20px;
  height: 20px;
}

.mini-card__body {
  flex: 1;
  min-width: 0;
}

.mini-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-snug);
}

.mini-card__title a {
  color: var(--color-slate-900);
  text-decoration: none;
}

.mini-card__title a:hover {
  color: var(--color-accent);
}

.mini-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}


/* ==========================================================================
   12. AI Services Section
   ========================================================================== */

/* Decorative glow orbs */
.ai-glow {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
}

.ai-glow--1 {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
}

.ai-glow--2 {
  width: 400px;
  height: 400px;
  bottom: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
}

.section--dark .container {
  position: relative;
  z-index: 1;
}

.ai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ai-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ai-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              transform var(--transition-base);
}

.ai-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(139, 92, 246, 0.4);
  transform: translateY(-3px);
}

.ai-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.ai-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-lg);
  color: var(--color-purple-400);
  flex-shrink: 0;
}

.ai-card__icon svg {
  width: 22px;
  height: 22px;
}

.ai-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: var(--line-height-snug);
}

.ai-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.ai-card__title a:hover {
  color: var(--color-purple-400);
}

.ai-card__desc {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

.ai-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-purple-400);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.ai-card__link:hover {
  gap: var(--space-3);
  color: var(--color-purple-300);
}

/* AI CTA strip */
.ai-cta-strip {
  margin-top: var(--space-16);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.ai-cta-strip h3 {
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.ai-cta-strip p {
  color: var(--color-slate-400);
  max-width: 60ch;
  font-size: var(--text-sm);
}

.ai-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .ai-cta-strip {
    padding: var(--space-6);
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-cta-strip__actions {
    width: 100%;
  }

  .ai-cta-strip__actions .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}


/* ==========================================================================
   13. About / Trust Pillars Section
   ========================================================================== */

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pillars-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pillar-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.pillar-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.pillar-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-xl);
  color: var(--color-accent);
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.pillar-card__icon svg {
  width: 26px;
  height: 26px;
}

.pillar-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.pillar-card__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-accent);
  line-height: 1;
}

.pillar-card__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.pillar-card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--color-slate-900);
}

.pillar-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Partners bar */
.partners-bar {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.partners-bar__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.partners-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-8);
}

.partners-bar__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-400);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.partners-bar__item:hover .partners-bar__name {
  color: var(--color-accent);
}


/* ==========================================================================
   14. Testimonials Section
   ========================================================================== */

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-card-hover);
}

.testimonial-card__stars {
  display: flex;
  gap: 3px;
  color: #f59e0b;
}

.testimonial-card__open-quote {
  display: inline-block;
  margin-right: var(--space-1);
  vertical-align: -0.5em;
  color: var(--color-blue-200, #bfdbfe);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.testimonial-card__quote {
  font-size: var(--text-base);
  color: var(--color-slate-700);
  line-height: var(--line-height-relaxed);
  flex: 1;
  font-style: italic;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__attribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.testimonial-card__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  font-style: normal;
}

.testimonial-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Review badges */
.review-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.review-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-badge__stars {
  display: flex;
  gap: 2px;
  color: #f59e0b;
}

.review-badge__source {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.review-badge__score {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-900);
}


/* ==========================================================================
   15. CTA Banner Section
   ========================================================================== */

.section--cta-banner {
  background: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-navy-700) 60%, var(--color-purple-600) 100%);
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
  position: relative;
  overflow: hidden;
}

.cta-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.cta-banner__content {
  max-width: 680px;
}

.cta-banner__title {
  font-size: var(--text-5xl);
  color: var(--color-white);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

@media (max-width: 599px) {
  .cta-banner__title {
    font-size: var(--text-3xl);
  }

  .cta-banner__subtitle {
    font-size: var(--text-base);
  }

  .cta-banner__inner {
    flex-direction: column;
  }
}

.cta-banner__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.8);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  max-width: 60ch;
}

.cta-banner__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-8);
}

.cta-banner__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.85);
}

.cta-banner__features svg {
  color: var(--color-teal-400);
  flex-shrink: 0;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Decorative shapes */
.cta-banner__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.cta-banner__shape {
  position: absolute;
  border-radius: var(--radius-full);
  opacity: 0.1;
  background: var(--color-white);
}

.cta-banner__shape--1 {
  width: 400px;
  height: 400px;
  top: -150px;
  right: -100px;
}

.cta-banner__shape--2 {
  width: 250px;
  height: 250px;
  bottom: -100px;
  right: 200px;
}

.cta-banner__shape--3 {
  width: 150px;
  height: 150px;
  top: 20px;
  right: 350px;
  opacity: 0.06;
}


/* ==========================================================================
   16. Site Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy-950);
  color: var(--color-slate-400);
}

.site-footer__main {
  padding-block: var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-12);
  }
}

.site-footer__logo .custom-logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--space-4);
}

.site-footer__text-logo {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-4);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  max-width: 34ch;
}

.site-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__contact-list li a,
.site-footer__contact-list li span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-400);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__contact-list li a:hover {
  color: var(--color-blue-300);
}

.site-footer__heading {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-5);
}

.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__nav-list li a {
  font-size: var(--text-sm);
  color: var(--color-slate-400);
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__nav-list li a:hover {
  color: var(--color-blue-300);
}

.site-footer__col--cta p {
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-relaxed);
}

.site-footer__col--cta .btn {
  margin-bottom: var(--space-6);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--color-slate-400);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-footer__social a:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* Footer bottom bar */
.site-footer__bottom {
  padding-block: var(--space-5);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.site-footer__copyright a {
  color: var(--color-slate-400);
  text-decoration: none;
}

.site-footer__copyright a:hover {
  color: var(--color-white);
}

.site-footer__legal-links {
  display: flex;
  gap: var(--space-4);
}

.site-footer__legal-links li a {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer__legal-links li a:hover {
  color: var(--color-slate-300);
}


/* ==========================================================================
   17. Page Templates
   ========================================================================== */

.page-content {
  padding-block: var(--space-16);
}

.page-header {
  margin-bottom: var(--space-12);
}

.page-header__title {
  font-size: var(--text-4xl);
  color: var(--color-slate-900);
}

/* 404 page */
.error-404 {
  padding-block: var(--space-24);
  text-align: center;
}

.error-404__code {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-100);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: var(--space-2);
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-block: var(--space-8);
}

.error-404__search {
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.error-404__links {
  max-width: 320px;
  margin-inline: auto;
  text-align: left;
}

.error-404__links h2 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.error-404__links li {
  margin-bottom: var(--space-2);
}

.error-404__links a {
  font-weight: var(--font-weight-medium);
}

/* Single article */
.single-article__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.single-article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.single-article__layout {
  padding-block: var(--space-16);
}

.single-article__footer .container {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.single-article__tags a {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (max-width: 599px) {
  .post-navigation {
    grid-template-columns: 1fr;
  }

  .post-navigation .nav-next {
    text-align: left;
  }
}

.post-navigation .nav-links {
  display: contents;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.post-navigation .nav-next {
  text-align: right;
}

.post-navigation .nav-subtitle {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.post-navigation .nav-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
}

.post-navigation a {
  text-decoration: none;
  display: block;
}


/* ==========================================================================
   18. Post Card
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .post-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.post-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.post-card__image-link {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card__image {
  transform: scale(1.04);
}

.post-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-3);
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.post-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.post-card__title a {
  color: var(--color-slate-900);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.post-card__title a:hover {
  color: var(--color-accent);
}

.post-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

/* No results */
.no-results {
  text-align: center;
  padding-block: var(--space-16);
}

.no-results h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.no-results p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}


/* ==========================================================================
   19. Pagination
   ========================================================================== */

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-12);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.page-numbers:hover {
  background-color: var(--color-blue-100);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-numbers.current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.page-numbers.prev,
.page-numbers.next {
  width: auto;
  padding-inline: var(--space-4);
}

.page-numbers.dots {
  border: none;
  background: transparent;
  cursor: default;
}


/* ==========================================================================
   20. Search Form
   ========================================================================== */

.search-form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
}

.search-field {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.search-submit {
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  white-space: nowrap;
}

.search-submit:hover {
  background-color: var(--color-accent-hover);
}


/* ==========================================================================
   21. Animations & Scroll Reveals
   ========================================================================== */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: 0ms;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-delay="100"] { transition-delay: 100ms; }
[data-animate-delay="200"] { transition-delay: 200ms; }
[data-animate-delay="300"] { transition-delay: 300ms; }
[data-animate-delay="400"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   22. Print
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  .hero__scroll-indicator,
  .cta-banner__decor,
  .ai-glow {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .container {
    max-width: 100%;
    padding-inline: 0;
  }

  .section {
    padding-block: 1.5rem;
  }

  h1, h2, h3 {
    color: #000;
    page-break-after: avoid;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }
}


/* ==========================================================================
   23. Contact & Gravity Forms Styling
   ========================================================================== */

/* ---- Shared field base — Gravity Forms + WPForms + generic ---- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select,
.wpforms-form textarea,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content select,
.entry-content textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-slate-900);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-slate-300);
  border-radius: var(--radius-md);
  line-height: var(--line-height-normal);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* ---- Focus state ---- */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus,
.entry-content input:focus,
.entry-content select:focus,
.entry-content textarea:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---- Textarea ---- */
.gform_wrapper textarea,
.wpcf7-form textarea,
.wpforms-form textarea,
.entry-content textarea {
  height: 100px;
  min-height: 72px;
  resize: vertical;
}

/* ---- Select chevron ---- */
.gform_wrapper select,
.wpcf7-form select,
.wpforms-form select,
.entry-content select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ---- Placeholders ---- */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.entry-content input::placeholder,
.entry-content textarea::placeholder {
  color: var(--color-slate-400);
  opacity: 1;
}

/* ---- Labels ---- */
.gform_wrapper label,
.gform_wrapper .gfield_label,
.wpcf7-form label,
.wpforms-form label,
.entry-content label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-700);
  line-height: var(--line-height-snug);
}

/* ---- Gravity Forms specific layout ---- */
.gform_wrapper .gform_body {
  margin-bottom: var(--space-2);
}

.gform_wrapper .gfield {
  margin-bottom: var(--space-5);
}

/* Remove default browser fieldset border on GF Name / Address compound fields */
.gform_wrapper fieldset,
.gform_wrapper fieldset.gfield {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  min-width: 0;
}

.gform_wrapper fieldset legend,
.gform_wrapper .ginput_complex .ginput_container {
  padding: 0;
}

/* Phone field — render legend like a normal label, no float tricks */
.gform_wrapper fieldset legend.gfield_label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-700);
  line-height: var(--line-height-snug);
  padding: 0;
}

/* Hide GF phone format instruction hint ("(###) ###-####" etc.) */
.gform_wrapper .instruction,
.gform_wrapper .gfield--type-phone .gfield_description {
  display: none;
}

/* Ensure compound name sub-inputs get full width */
.gform_wrapper .ginput_container_name span,
.gform_wrapper .ginput_container_address span {
  display: block;
  width: 100%;
}

.gform_wrapper .gfield_required {
  color: var(--color-error);
  margin-left: 2px;
}

/* Remove the GF-rendered double-quotes around the required asterisk  */
.gform_required_legend,
.gform-body__required-legend {
  visibility: hidden;
  font-size: var(--text-sm);
  color: var(--color-slate-500);
}

.gform_required_legend::after,
.gform-body__required-legend::after {
  content: '* indicates required fields';
  visibility: visible;
}

/* GF 2-column row */
.gform_wrapper .gf_left_half,
.gform_wrapper .gf_right_half {
  width: calc(50% - var(--space-3));
  display: inline-block;
  vertical-align: top;
}

.gform_wrapper .gf_left_half {
  margin-right: var(--space-3);
}

.gform_wrapper .gf_right_half {
  margin-left: var(--space-3);
}

@media (max-width: 599px) {
  .gform_wrapper .gf_left_half,
  .gform_wrapper .gf_right_half {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Remove default GF list bullets/spacing */
.gform_wrapper ul.gform_fields {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gform_wrapper .gform_fields > li {
  margin-bottom: var(--space-5);
}

/* ---- Submit buttons (all form plugins) ---- */
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button,
.wpcf7-submit,
.wpforms-submit,
.entry-content input[type="submit"],
.entry-content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  color: var(--color-white);
  background-color: var(--color-blue-500);
  border: 2px solid var(--color-blue-500);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.wpcf7-submit:hover,
.wpforms-submit:hover,
.entry-content input[type="submit"]:hover {
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-600);
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.gform_wrapper input[type="submit"]:active,
.gform_wrapper .gform_button:active,
.wpcf7-submit:active,
.entry-content input[type="submit"]:active {
  transform: translateY(1px);
}

@media (max-width: 599px) {
  .gform_wrapper input[type="submit"],
  .gform_wrapper .gform_button,
  .wpcf7-submit,
  .wpforms-submit,
  .entry-content input[type="submit"] {
    width: 100%;
  }
}

/* ---- Gravity Forms validation ---- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

.gform_wrapper .validation_message,
.gform_wrapper .gfield_description.validation_message {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
  background-color: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.gform_wrapper .gform_confirmation_message {
  background-color: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

/* ---- Contact page layout ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-12);
  }
}

.contact-form-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-10);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 767px) {
  .contact-form-wrapper {
    padding: var(--space-6);
    order: -1; /* Show form above the sidebar (address/map) on mobile */
  }
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-md);
  color: var(--color-blue-500);
  flex-shrink: 0;
}

.contact-info__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.contact-info__value {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-900);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-info__value:hover {
  color: var(--color-blue-500);
}

.contact-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--radius-xl);
  display: block;
  margin-top: var(--space-6);
}

@media (max-width: 599px) {
  .contact-map iframe {
    height: 220px;
  }
}


/* ==========================================================================
   24. Repairs Strip (homepage + services page)
   ========================================================================== */

.section--repairs-strip {
  background-color: var(--color-slate-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.repairs-strip__header {
  margin-bottom: var(--space-10);
}

.repairs-strip__eyebrow {
  margin-bottom: var(--space-4);
}

.repairs-strip__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.repairs-strip__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.repairs-strip__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 55ch;
}

.repairs-strip__cta-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  flex-shrink: 0;
}

.repairs-strip__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-500);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.repairs-strip__view-all:hover {
  color: var(--color-blue-600);
  gap: var(--space-2);
}

@media (max-width: 699px) {
  .repairs-strip__title-row {
    flex-direction: column;
    gap: var(--space-5);
  }

  .repairs-strip__cta-inline {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* Repair cards grid */
.repairs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 600px) {
  .repairs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .repairs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.repair-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.repair-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-teal-300);
}

.repair-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(13, 148, 136, 0.04));
  border-radius: var(--radius-md);
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.repair-card__icon svg {
  width: 22px;
  height: 22px;
}

.repair-card__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-snug);
}

.repair-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Partner badges bar */
.repairs-strip__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.repairs-strip__badge-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-600);
}

.repairs-strip__badge-item svg {
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.repairs-strip__badge-divider {
  width: 1px;
  height: 20px;
  background-color: var(--color-border);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .repairs-strip__badge-divider {
    display: none;
  }
}


/* ==========================================================================
   25. Page Hero (Repairs & Services templates)
   ========================================================================== */

.page-hero--repairs,
.page-hero--services {
  background: linear-gradient(
    150deg,
    var(--color-navy-800) 0%,
    var(--color-navy-800) 55%,
    var(--color-navy-700) 100%
  );
  color: var(--color-white);
  padding-block: var(--space-20) var(--space-16);
  position: relative;
  overflow: hidden;
}

.page-hero--repairs::before,
.page-hero--services::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__eyebrow {
  margin-bottom: var(--space-5);
}

.page-hero__title {
  font-size: clamp(1.875rem, 4.5vw, 3.25rem);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--space-5);
  color: var(--color-white);
  max-width: 18ch;
}

.page-hero__title-highlight {
  display: block;
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-teal-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero__subtitle {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-relaxed);
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.page-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

@media (max-width: 599px) {
  .page-hero--repairs,
  .page-hero--services {
    padding-block: var(--space-12) var(--space-10);
  }

  .page-hero__cta-group {
    flex-direction: column;
    gap: var(--space-3);
  }

  .page-hero__cta-group .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Trust bar on page heroes — matches home page hero__trust-bar style */
.page-hero__trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-hero__trust-number {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-blue-300);
  line-height: 1;
}

.page-hero__trust-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
}

.page-hero__trust-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .page-hero__trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
  }

  .page-hero__trust-divider {
    display: none;
  }

  .page-hero__trust-number {
    font-size: var(--text-xl);
  }
}


/* ==========================================================================
   26. Repairs Services Grid (template-repairs.php)
   ========================================================================== */

.repairs-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .repairs-services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .repairs-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.repair-service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.repair-service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-teal-300);
}

.repair-service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.06));
  border-radius: var(--radius-lg);
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.repair-service-card__icon svg {
  width: 24px;
  height: 24px;
}

.repair-service-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
}

.repair-service-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.repair-service-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.repair-service-card__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-600);
}

.repair-service-card__features svg {
  color: var(--color-teal-500);
  flex-shrink: 0;
}


/* ==========================================================================
   27. Repairs Why Section
   ========================================================================== */

.section--repairs-why {
  background-color: var(--color-slate-50);
  border-top: 1px solid var(--color-border);
}

.repairs-why__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 900px) {
  .repairs-why__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

.repairs-why__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

.repairs-why__title-break {
  display: block;
}

.repairs-why__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
  max-width: 56ch;
}

.repairs-why__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.repairs-why__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
}

.repairs-why__list svg {
  color: var(--color-teal-500);
  flex-shrink: 0;
}

/* Stats grid */
.repairs-why__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-self: start;
}

.repairs-why__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.repairs-why__stat:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.repairs-why__stat-number {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-teal-500);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.repairs-why__stat-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
}


/* ==========================================================================
   28. Services Template — Group Cards
   ========================================================================== */

.services-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .services-group-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .services-group-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.services-group-grid--3 {
  /* Already 3-col above 1024px — no change needed */
}

@media (min-width: 1024px) {
  .services-group-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .services-group-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-group-grid:not(.services-group-grid--3):not(.services-group-grid--4) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-group-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.service-group-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-blue-300);
}

.service-group-card--teal:hover {
  border-color: var(--color-teal-300);
}

.service-group-card--purple:hover {
  border-color: var(--color-purple-400);
}

.service-group-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-lg);
  color: var(--color-blue-500);
  flex-shrink: 0;
}

.service-group-card--teal .service-group-card__icon {
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.06));
  color: var(--color-teal-500);
}

.service-group-card--purple .service-group-card__icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
  color: var(--color-purple-500);
}

.service-group-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-group-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
}

.section--services-dark .service-group-card__title {
  color: var(--color-white);
}

.service-group-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}

.section--services-dark .service-group-card__excerpt {
  color: rgba(255, 255, 255, 0.65);
}

.service-group-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-500);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-4);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-group-card__link--teal {
  color: var(--color-teal-500);
}

.service-group-card__link--purple {
  color: var(--color-purple-400);
}

.service-group-card__link:hover {
  gap: var(--space-2);
  color: var(--color-blue-600);
}

.service-group-card__link--teal:hover {
  color: var(--color-teal-500);
}

.service-group-card__link--purple:hover {
  color: var(--color-purple-600);
}

/* Dark services section */
.section--services-dark {
  background: linear-gradient(
    160deg,
    var(--color-navy-950) 0%,
    var(--color-navy-800) 100%
  );
}

.section--services-dark .service-group-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.section--services-dark .service-group-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-purple-600);
}

/* Light alt services section */
.section--services-alt {
  background-color: var(--color-slate-50);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Smooth white → slate-50 → dark navy transitions */
.section--services-group + .section--services-alt {
  border-top: none;
}

.section--services-alt + .section--services-dark {
  border-top: none;
}

/* 3-col grid from 900px */
@media (min-width: 900px) {
  .services-group-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   29. Contact Page Template
   ========================================================================== */

.page-hero--contact {
  background: linear-gradient(
    150deg,
    var(--color-navy-800) 0%,
    var(--color-navy-800) 55%,
    var(--color-navy-700) 100%
  );
  color: var(--color-white);
  padding-block: var(--space-20) var(--space-16);
  position: relative;
  overflow: hidden;
}

.page-hero--contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='rgba(59,130,246,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

@media (max-width: 599px) {
  .page-hero--contact {
    padding-block: var(--space-12) var(--space-10);
  }
}

/* ---- Contact section ---- */
.section--contact {
  background-color: var(--color-white);
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
}

/* ---- Quick action buttons ---- */
.contact-quick-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

.contact-quick-action--call {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}

.contact-quick-action--call:hover {
  background-color: var(--color-blue-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  color: var(--color-white);
}

.contact-quick-action--remote {
  background-color: var(--color-white);
  border-color: var(--color-border);
  color: var(--color-slate-700);
}

.contact-quick-action--remote:hover {
  border-color: var(--color-blue-300);
  background-color: var(--color-slate-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.contact-quick-action__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.contact-quick-action--remote .contact-quick-action__icon {
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  color: var(--color-blue-500);
}

.contact-quick-action__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-grow: 1;
}

.contact-quick-action__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  opacity: 0.75;
}

.contact-quick-action--remote .contact-quick-action__label {
  color: var(--color-text-muted);
}

.contact-quick-action__value {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.contact-quick-action__arrow {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.contact-quick-action:hover .contact-quick-action__arrow {
  transform: translateX(3px);
  opacity: 1;
}

/* ---- Contact hours grid ---- */
.contact-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.contact-hours__day {
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-700);
}

.contact-hours__time {
  color: var(--color-text-muted);
}

/* ---- Contact form heading ---- */
.contact-form-wrapper__heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.contact-form-wrapper__subheading {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-relaxed);
}

/* ---- Contact CTA strip ---- */
.section--contact-cta {
  background-color: var(--color-slate-50);
  border-top: 1px solid var(--color-border);
}

.contact-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .contact-cta-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-cta-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.contact-cta-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.contact-cta-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-lg);
  color: var(--color-blue-500);
  flex-shrink: 0;
}

.contact-cta-card__icon--teal {
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.06));
  color: var(--color-teal-500);
}

.contact-cta-card__icon--purple {
  background: linear-gradient(135deg, var(--color-purple-100), rgba(124, 58, 237, 0.06));
  color: var(--color-purple-500);
}

.contact-cta-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
}

.contact-cta-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}

.contact-cta-card .btn {
  margin-top: var(--space-2);
  align-self: flex-start;
}

@media (max-width: 599px) {
  .contact-cta-card .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Hours disclaimer note ---- */
.contact-hours__note {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  margin-top: var(--space-3);
  line-height: var(--line-height-relaxed);
  max-width: 36ch;
}


/* ==========================================================================
   30. Footer Google Reviews badge
   ========================================================================== */

.site-footer__google-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: var(--space-4);
}

.site-footer__google-badge:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.site-footer__google-rating {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.2;
}

.site-footer__google-stars {
  color: #FBBC05;
  letter-spacing: 1px;
  font-size: 11px;
}

/* ==========================================================================
   31. FAQ Template (template-faq.php)
   ========================================================================== */

/* --- Page hero: FAQ variant --- */
.page-hero--faq {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, var(--color-navy-700) 100%);
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-hero--faq::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(37, 99, 235, 0.12), transparent 70%);
  pointer-events: none;
}

.page-hero--faq .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero--faq .page-hero__eyebrow {
  margin-bottom: var(--space-4);
}

.page-hero--faq .page-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.page-hero--faq .page-hero__title-highlight {
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-teal-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero--faq .page-hero__description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  line-height: var(--line-height-relaxed);
}

/* --- FAQ search bar (decorative) --- */
.faq-search {
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.faq-search__form {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--color-slate-400);
  pointer-events: none;
  flex-shrink: 0;
}

.faq-search__input {
  width: 100%;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 20px + var(--space-3));
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-slate-900);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
}

.faq-search__input::placeholder {
  color: var(--color-slate-400);
}

.faq-search__input:focus {
  outline: none;
  border-color: var(--color-blue-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* --- Category tabs --- */
.faq-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-10);
}

.faq-categories__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-600);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-slate-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  user-select: none;
}

.faq-categories__tab:hover {
  color: var(--color-blue-600);
  border-color: var(--color-blue-300);
  background-color: var(--color-blue-100);
}

.faq-categories__tab--active,
.faq-categories__tab[aria-selected="true"] {
  color: var(--color-white);
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-500);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.faq-categories__tab--active:hover,
.faq-categories__tab[aria-selected="true"]:hover {
  color: var(--color-white);
  background-color: var(--color-blue-600);
  border-color: var(--color-blue-600);
}

/* --- FAQ category group --- */
.faq-group {
  margin-bottom: var(--space-12);
}

.faq-group:last-of-type {
  margin-bottom: 0;
}

.faq-group__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-blue-100);
  max-width: 860px;
  margin-inline: auto;
}

/* --- Accordion (card style) --- */
.faq-accordion {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
  border-color: var(--color-blue-200);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.06);
}

.faq-item--open {
  border-color: var(--color-blue-300);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.10);
  border-left: 3px solid var(--color-blue-500);
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
  transition: color var(--transition-fast);
}

.faq-item__trigger:hover {
  color: var(--color-blue-600);
}

.faq-item__trigger:focus-visible {
  outline: 3px solid var(--color-blue-400);
  outline-offset: -3px;
  border-radius: var(--radius-xl);
}

.faq-item__question {
  flex: 1;
}

.faq-item__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-slate-400);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.faq-item--open .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--color-blue-500);
}

.faq-item--open .faq-item__trigger {
  color: var(--color-blue-600);
}

.faq-item__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition-slow) ease,
              opacity var(--transition-base);
}

.faq-item--open .faq-item__body {
  max-height: 1000px;
  opacity: 1;
}

.faq-item__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  max-width: 72ch;
}

.faq-item__answer p + p {
  margin-top: var(--space-3);
}

.faq-item__answer a {
  color: var(--color-blue-500);
  font-weight: var(--font-weight-medium);
}

/* Phone number nowrap utility used in FAQ hero */
.nowrap {
  white-space: nowrap;
}

.page-hero__phone-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

.page-hero__phone-link:hover {
  text-decoration-color: currentColor;
}

/* --- FAQ CTA strip ("Still have questions?") --- */
.faq-cta-strip {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-16);
  position: relative;
  overflow: hidden;
}

.faq-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(59, 130, 246, 0.1), transparent 70%);
  pointer-events: none;
}

.faq-cta-strip__content {
  position: relative;
  z-index: 1;
}

.faq-cta-strip__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.faq-cta-strip__subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 50ch;
}

.faq-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Responsive — FAQ */
@media (max-width: 899px) {
  .page-hero--faq .page-hero__title {
    font-size: var(--text-4xl);
  }

  .faq-item__trigger {
    font-size: var(--text-base);
    padding: var(--space-5) 0;
  }

  .faq-cta-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-cta-strip__actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .page-hero--faq .page-hero__title {
    font-size: var(--text-3xl);
  }

  .faq-categories {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .faq-categories::-webkit-scrollbar {
    display: none;
  }

  .faq-categories__tab {
    flex-shrink: 0;
  }

  .faq-item__trigger {
    font-size: var(--text-sm);
    padding: var(--space-4) 0;
  }

  .faq-cta-strip {
    padding: var(--space-8);
  }

  .faq-cta-strip__title {
    font-size: var(--text-2xl);
  }

  .faq-cta-strip__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   32. Testimonials Template (template-testimonials.php)
   ========================================================================== */

/* --- Page hero: Testimonials variant --- */
.page-hero--testimonials {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, var(--color-navy-700) 100%);
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-hero--testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 85% 40%, rgba(13, 148, 136, 0.1), transparent 65%);
  pointer-events: none;
}

.page-hero--testimonials .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero--testimonials .page-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.page-hero--testimonials .page-hero__title-highlight {
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-teal-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero--testimonials .page-hero__description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  line-height: var(--line-height-relaxed);
}

/* --- Stats bar --- */
.testimonials-stats {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-slate-200);
  box-shadow: var(--shadow-md);
}

.testimonials-stats__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  padding-block: var(--space-6);
}

.testimonials-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-10);
  text-align: center;
  flex: 1;
  min-width: 160px;
  position: relative;
}

.testimonials-stats__item + .testimonials-stats__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background-color: var(--color-slate-200);
}

.testimonials-stats__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-blue-500);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
}

.testimonials-stats__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

/* --- Testimonials grid (template-level, 3-col desktop) ---
   Note: base .testimonials-grid and .testimonial-card defined in §14.
   .testimonials-grid here uses the same class; §14 already sets 3-col
   at 1024px+. The template adds hover-lift and service badge. */

.testimonial-card--template {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.testimonial-card--template:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* --- Service badge on testimonial card --- */
.testimonial-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  border: 1px solid rgba(37, 99, 235, 0.15);
  margin-top: auto;
  align-self: flex-start;
}

.testimonial-card__badge--teal {
  background-color: var(--color-teal-100);
  color: var(--color-teal-500);
  border-color: rgba(13, 148, 136, 0.15);
}

.testimonial-card__badge--purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-600);
  border-color: rgba(124, 58, 237, 0.15);
}

/* --- Featured testimonial --- */
.testimonial-featured {
  background-color: var(--color-navy-950);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  position: relative;
  overflow: hidden;
  margin-block: var(--space-16);
}

.testimonial-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 70% at 10% 50%, rgba(37, 99, 235, 0.12), transparent 65%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .testimonial-featured {
    grid-template-columns: 1fr 340px;
    align-items: center;
  }
}

.testimonial-featured__quote-side {
  position: relative;
  z-index: 1;
}

.testimonial-featured__quote-icon {
  width: 52px;
  height: 52px;
  color: rgba(59, 130, 246, 0.35);
  margin-bottom: var(--space-6);
}

.testimonial-featured__quote-text {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--font-weight-medium);
  font-style: italic;
  color: var(--color-white);
  line-height: var(--line-height-relaxed);
  max-width: 65ch;
}

.testimonial-featured__author-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .testimonial-featured__author-side {
    padding-top: 0;
    border-top: none;
    padding-left: var(--space-10);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    align-self: stretch;
    justify-content: center;
  }
}

.testimonial-featured__avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-blue-600), var(--color-teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testimonial-featured__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-featured__avatar-placeholder {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1;
}

.testimonial-featured__stars {
  display: flex;
  gap: 3px;
  color: #f59e0b;
}

.testimonial-featured__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.testimonial-featured__role {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
}

.testimonial-featured__service-badge {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: rgba(59, 130, 246, 0.15);
  color: var(--color-blue-300);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* --- Google Reviews strip --- */
.google-reviews-strip {
  background-color: var(--color-blue-50);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-block: var(--space-12);
}

.google-reviews-strip__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: 1;
  min-width: 0;
}

.google-reviews-strip__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-700);
  flex-shrink: 0;
  white-space: nowrap;
}

.google-reviews-strip__logo svg {
  flex-shrink: 0;
}

.google-reviews-strip__divider {
  width: 1px;
  height: 32px;
  background: rgba(37, 99, 235, 0.2);
  flex-shrink: 0;
}

.google-reviews-strip__rating-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.google-reviews-strip__score {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-900);
  line-height: 1;
}

.google-reviews-strip__stars {
  color: #f59e0b;
  font-size: var(--text-lg);
  letter-spacing: 1px;
  line-height: 1;
}

.google-reviews-strip__count {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
}

.google-reviews-strip__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-600);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid var(--color-blue-400);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.google-reviews-strip__link:hover {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-500);
  color: var(--color-white);
}

/* --- Testimonials CTA strip ("Ready to join them?") --- */
.testimonials-cta-strip {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  position: relative;
  overflow: hidden;
}

.testimonials-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 80% at 90% 50%, rgba(13, 148, 136, 0.1), transparent 65%);
  pointer-events: none;
}

.testimonials-cta-strip__content {
  position: relative;
  z-index: 1;
}

.testimonials-cta-strip__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.testimonials-cta-strip__subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 50ch;
}

.testimonials-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Responsive — Testimonials */
@media (max-width: 899px) {
  .page-hero--testimonials .page-hero__title {
    font-size: var(--text-4xl);
  }

  .testimonials-stats__item {
    padding-inline: var(--space-6);
    min-width: 120px;
  }

  .testimonial-featured {
    padding: var(--space-8);
  }

  .testimonials-cta-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonials-cta-strip__actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .page-hero--testimonials .page-hero__title {
    font-size: var(--text-3xl);
  }

  .testimonials-stats__item {
    min-width: 33%;
    padding: var(--space-4);
  }

  .testimonial-featured {
    padding: var(--space-6);
  }

  .testimonial-featured__quote-text {
    font-size: var(--text-lg);
  }

  .google-reviews-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
  }

  .google-reviews-strip__link {
    width: 100%;
    justify-content: center;
  }

  .testimonials-cta-strip {
    padding: var(--space-8);
  }

  .testimonials-cta-strip__title {
    font-size: var(--text-2xl);
  }

  .testimonials-cta-strip__actions .btn {
    flex: 1;
    justify-content: center;
  }
}


/* ==========================================================================
   33. Industries Template (template-industries.php)
   ========================================================================== */

/* --- Page hero: Industries variant --- */
.page-hero--industries {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, var(--color-navy-700) 100%);
  padding-block: clamp(var(--space-12), 8vw, var(--space-20));
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.page-hero--industries::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 60% at 85% 60%, rgba(139, 92, 246, 0.1), transparent 65%);
  pointer-events: none;
}

.page-hero--industries .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero--industries .page-hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  max-width: 22ch;
  margin-bottom: var(--space-5);
}

.page-hero--industries .page-hero__title-highlight {
  background: linear-gradient(90deg, var(--color-blue-400), var(--color-teal-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-hero--industries .page-hero__description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  line-height: var(--line-height-relaxed);
}

/* --- Industries intro paragraph --- */
.industries-intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.industries-intro p {
  font-size: var(--text-lg);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
}

/* --- Industries grid --- */
.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Industry card --- */
.industry-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-left: 4px solid transparent;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base),
              transform var(--transition-base),
              border-left-color var(--transition-base);
}

.industry-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-left-color: var(--color-blue-500);
}

.industry-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-100), rgba(59, 130, 246, 0.05));
  border-radius: var(--radius-lg);
  color: var(--color-blue-500);
  flex-shrink: 0;
}

.industry-card__icon--teal {
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.05));
  color: var(--color-teal-500);
}

.industry-card__icon--purple {
  background: linear-gradient(135deg, var(--color-purple-100), rgba(124, 58, 237, 0.05));
  color: var(--color-purple-600);
}

.industry-card__icon svg {
  width: 24px;
  height: 24px;
}

.industry-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
}

.industry-card__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
}

.industry-card__needs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.industry-card__needs li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-normal);
}

.industry-card__needs li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-blue-400);
  flex-shrink: 0;
  margin-top: 0.45em;
}

.industry-card:hover .industry-card__needs li::before {
  background-color: var(--color-blue-500);
}

.industry-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-slate-100);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.industry-card__compliance {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  border-radius: var(--radius-full);
  background-color: var(--color-teal-100);
  color: var(--color-teal-500);
  border: 1px solid rgba(13, 148, 136, 0.2);
}

.industry-card__compliance--blue {
  background-color: var(--color-blue-100);
  color: var(--color-blue-600);
  border-color: rgba(37, 99, 235, 0.15);
}

.industry-card__compliance--purple {
  background-color: var(--color-purple-100);
  color: var(--color-purple-600);
  border-color: rgba(124, 58, 237, 0.15);
}

.industry-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blue-500);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.industry-card__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-fast);
}

.industry-card__link:hover {
  gap: var(--space-2);
  color: var(--color-blue-600);
}

.industry-card__link:hover svg {
  transform: translateX(2px);
}

/* --- SMB1001 / Cyber Security Framework callout --- */
.framework-callout {
  background-color: var(--color-teal-100);
  border-left: 4px solid var(--color-teal-500);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: clamp(var(--space-8), 5vw, var(--space-12));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  margin-block: var(--space-16);
}

.framework-callout::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(13, 148, 136, 0.12), transparent 70%);
  pointer-events: none;
}

.framework-callout__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.25), rgba(13, 148, 136, 0.1));
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  border-radius: var(--radius-xl);
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.framework-callout__icon svg {
  width: 28px;
  height: 28px;
}

.framework-callout__body {
  flex: 1;
  min-width: 0;
}

.framework-callout__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: rgba(13, 148, 136, 0.15);
  color: var(--color-teal-500);
  border: 1px solid rgba(13, 148, 136, 0.25);
  margin-bottom: var(--space-4);
}

.framework-callout__heading {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-snug);
}

.framework-callout__text {
  font-size: var(--text-base);
  color: var(--color-slate-700);
  line-height: var(--line-height-relaxed);
  max-width: 68ch;
  margin-bottom: var(--space-6);
}

.framework-callout__text p + p {
  margin-top: var(--space-3);
}

.framework-callout__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
}

.framework-callout__highlights li,
.framework-callout__highlight-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-teal-700);
}

.framework-callout__highlight-item svg {
  width: 14px;
  height: 14px;
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.framework-callout__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  background-color: var(--color-teal-500);
  border: 2px solid var(--color-teal-500);
  border-radius: var(--radius-lg);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.framework-callout__cta:hover {
  background-color: var(--color-teal-400);
  border-color: var(--color-teal-400);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
}

.framework-callout__cta:focus-visible {
  outline: 3px solid var(--color-teal-400);
  outline-offset: 3px;
}

/* --- Industries CTA strip --- */
.industries-cta-strip {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  position: relative;
  overflow: hidden;
}

.industries-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(139, 92, 246, 0.1), transparent 65%);
  pointer-events: none;
}

.industries-cta-strip__content {
  position: relative;
  z-index: 1;
}

.industries-cta-strip__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.industries-cta-strip__subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  max-width: 50ch;
}

.industries-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Responsive — Industries */
@media (max-width: 899px) {
  .page-hero--industries .page-hero__title {
    font-size: var(--text-4xl);
  }

  .framework-callout {
    flex-direction: column;
    gap: var(--space-6);
  }

  .industries-cta-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .industries-cta-strip__actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .page-hero--industries .page-hero__title {
    font-size: var(--text-3xl);
  }

  .industry-card {
    padding: var(--space-6);
    border-left-width: 3px;
  }

  .framework-callout {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-6);
  }

  .framework-callout__heading {
    font-size: var(--text-xl);
  }

  .industries-cta-strip {
    padding: var(--space-8);
  }

  .industries-cta-strip__title {
    font-size: var(--text-2xl);
  }

  .industries-cta-strip__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   34. About Us Template
   ========================================================================== */

/* Hero */
.page-hero--about {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, #0d2a50 100%);
}

.page-hero--about::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Stats bar */
.about-stats {
  background: var(--color-navy-900, #0a1628);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-8) 0;
}

.about-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}

.about-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  position: relative;
}

.about-stats__item + .about-stats__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.about-stats__number {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-blue-400, #60a5fa);
  line-height: 1;
}

.about-stats__label {
  font-size: var(--text-sm);
  color: var(--color-navy-300, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Story section */
.about-story {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-16);
  align-items: start;
}

.section-header--left {
  text-align: left;
}

.section-header--left .section-header__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.about-story__text {
  color: var(--color-navy-300, #94a3b8);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.about-story__text:last-of-type {
  margin-bottom: var(--space-8);
}

.about-story__certs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.about-story__cert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: var(--radius-full);
  color: var(--color-blue-400, #60a5fa);
  font-size: var(--text-sm);
  font-weight: 500;
}

.about-story__cert-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--color-blue-400, #60a5fa);
}

/* Story visual */
.about-story__milestones {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-8);
}

.about-story__milestone {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.about-story__milestone:hover {
  border-color: var(--color-blue-200);
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.07);
}

.about-story__milestone svg {
  flex-shrink: 0;
  color: var(--color-blue-500);
  margin-top: 2px;
}

.about-story__milestone-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
}

.about-story__milestone-sub {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  line-height: var(--line-height-snug);
}

/* Values grid */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.about-value-card {
  background: var(--color-navy-800, #0f2040);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: border-color 0.2s, transform 0.2s;
}

.about-value-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-2px);
}

.about-value-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(37, 99, 235, 0.12);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.about-value-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-blue-400, #60a5fa);
}

.about-value-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.about-value-card__desc {
  color: var(--color-navy-300, #94a3b8);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* Team grid */
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

.about-team-card {
  display: flex;
  gap: var(--space-6);
  background: var(--color-navy-800, #0f2040);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  align-items: flex-start;
  transition: border-color 0.2s;
}

.about-team-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.about-team-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue-600, #2563eb), var(--color-teal-600, #0d9488));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-white);
  flex-shrink: 0;
}

.about-team-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.about-team-card__role {
  font-size: var(--text-sm);
  color: var(--color-blue-400, #60a5fa);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.about-team-card__bio {
  font-size: var(--text-sm);
  color: var(--color-navy-300, #94a3b8);
  line-height: 1.65;
}

/* About CTA strip */
.about-cta-strip {
  background: linear-gradient(135deg, var(--color-navy-800, #0f2040) 0%, #0d2a50 100%);
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  position: relative;
  overflow: hidden;
}

.about-cta-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.about-cta-strip__content {
  position: relative;
  z-index: 1;
}

.about-cta-strip__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.about-cta-strip__subtitle {
  color: var(--color-navy-300, #94a3b8);
  font-size: var(--text-lg);
}

.about-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Alt background section */
.section--alt {
  background: var(--color-navy-900, #0a1628);
}

.section--alt .section-header__title,
.section--alt .section-header__subtitle {
  color: var(--color-white);
}

.section--alt .section-header__subtitle {
  color: rgba(255,255,255,0.65);
}

/* Responsive — About */
@media (max-width: 1024px) {
  .about-story {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about-story__milestones {
    position: static;
  }

  .about-team-grid {
    max-width: 100%;
  }
}

@media (max-width: 899px) {
  .about-stats__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-stats__item:nth-child(3)::before {
    display: none;
  }

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

  .about-cta-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-cta-strip__actions {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .about-stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .about-stats__item + .about-stats__item::before {
    display: none;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-team-grid {
    grid-template-columns: 1fr;
  }

  .about-team-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-cta-strip {
    padding: var(--space-8);
  }

  .about-cta-strip__title {
    font-size: var(--text-2xl);
  }

  .about-cta-strip__actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ==========================================================================
   35. How We Work / Onboarding Section (Services Template)
   ========================================================================== */

.section--how-we-work {
  background: var(--color-navy-900, #0a1628);
  position: relative;
  overflow: hidden;
}

.section--how-we-work::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.how-we-work-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.how-we-work-step {
  position: relative;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Connector line between steps */
.how-we-work-step__connector {
  position: absolute;
  top: calc(var(--space-8) + 28px); /* align with centre of icon */
  right: 0;
  transform: translateX(50%);
  width: calc(100% - 80px);
  height: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.5), rgba(37, 99, 235, 0.15));
  z-index: 0;
}

.how-we-work-step__number {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-blue-500, #2563eb);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  opacity: 0.7;
}

.how-we-work-step__icon {
  width: 56px;
  height: 56px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}

.how-we-work-step:hover .how-we-work-step__icon {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(37, 99, 235, 0.6);
}

.how-we-work-step__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-blue-400, #60a5fa);
}

.how-we-work-step__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.how-we-work-step__desc {
  font-size: var(--text-sm);
  color: var(--color-navy-300, #94a3b8);
  line-height: 1.65;
}

/* Responsive — How We Work */
@media (max-width: 1024px) {
  .how-we-work-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .how-we-work-step__connector {
    display: none;
  }
}

@media (max-width: 767px) {
  .how-we-work-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .how-we-work-step {
    text-align: left;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-6) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .how-we-work-step:last-child {
    border-bottom: none;
  }

  .how-we-work-step__number {
    display: none;
  }

  .how-we-work-step__icon {
    flex-shrink: 0;
    margin-bottom: 0;
    margin-top: var(--space-1);
  }

  /* Title and desc wrap in a flex column — fills remaining width */
  .how-we-work-step__title,
  .how-we-work-step__desc {
    flex: none;
    width: 100%;
  }

  /* Wrap title+desc in the implicit remaining space next to the icon */
  .how-we-work-step__content {
    flex: 1;
    min-width: 0;
  }

  .how-we-work-step__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
  }

  .how-we-work-step__desc {
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   36. Service Pages & Switching IT Providers
   ========================================================================== */

/* --- Shared service page hero variants --- */
.page-hero--service {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, #0d2a50 100%);
  position: relative;
  overflow: hidden;
}

.page-hero--service::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

/* Teal accent variant (Cloud, Networking) */
.page-hero--cloud::before,
.page-hero--networking::before {
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(13, 148, 136, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(37, 99, 235, 0.07) 0%, transparent 60%);
}

/* --- Service intro strip --- */
.service-intro {
  background: var(--color-navy-900, #0a1628);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-12) 0;
}

.service-intro__inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-12);
  align-items: center;
}

.service-intro__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.service-intro__text {
  color: var(--color-navy-300, #94a3b8);
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: var(--space-5);
}

.service-intro__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-intro__list li {
  color: var(--color-navy-200, #cbd5e1);
  font-size: var(--text-sm);
  padding-left: var(--space-6);
  position: relative;
}

.service-intro__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Stats card */
.service-intro__stats {
  background: var(--color-navy-800, #0f2040);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.service-intro__stats--teal {
  border-color: rgba(13, 148, 136, 0.25);
}

.service-intro__stat {
  text-align: center;
  padding: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.service-intro__stat:last-child {
  border-bottom: none;
}

.service-intro__stat-number {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-blue-400, #60a5fa);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.service-intro__stats--teal .service-intro__stat-number {
  color: var(--color-teal-400, #2dd4bf);
}

.service-intro__stat-label {
  font-size: var(--text-xs);
  color: var(--color-navy-400, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Teal icon tint for cloud/networking cards */
.service-group-card__icon--teal svg {
  stroke: var(--color-teal-400, #2dd4bf);
}

/* --- Switching IT Providers --- */

/* Guarantee cards grid */
.switching-guarantees-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.switching-guarantee-card {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  background: var(--color-navy-800, #0f2040);
  border: 1px solid rgba(13, 148, 136, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  transition: border-color 0.2s, transform 0.2s;
}

.switching-guarantee-card:hover {
  border-color: rgba(13, 148, 136, 0.45);
  transform: translateY(-2px);
}

.switching-guarantee-card__icon {
  width: 48px;
  height: 48px;
  background: rgba(13, 148, 136, 0.12);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.switching-guarantee-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-teal-400, #2dd4bf);
}

.switching-guarantee-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.switching-guarantee-card__desc {
  font-size: var(--text-sm);
  color: var(--color-navy-300, #94a3b8);
  line-height: 1.65;
}

/* Testimonial highlight */
.switching-testimonial {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-10);
  background: var(--color-navy-800, #0f2040);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-2xl);
  position: relative;
}

.switching-testimonial__quote-icon {
  width: 36px;
  height: 36px;
  color: var(--color-blue-500, #2563eb);
  opacity: 0.5;
  margin: 0 auto var(--space-6);
}

.switching-testimonial__quote {
  font-size: var(--text-xl);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.switching-testimonial__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: left;
}

.switching-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue-600, #2563eb), var(--color-teal-600, #0d9488));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-white);
  flex-shrink: 0;
}

.switching-testimonial__name {
  font-weight: 700;
  color: var(--color-white);
  font-size: var(--text-sm);
}

.switching-testimonial__role {
  color: var(--color-navy-400, #94a3b8);
  font-size: var(--text-xs);
}

/* Responsive — Service pages */
@media (max-width: 1024px) {
  .service-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .service-intro__stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .service-intro__stat {
    flex: 1;
    min-width: 120px;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .service-intro__stat:last-child {
    border-right: none;
  }
}

@media (max-width: 899px) {
  .switching-guarantees-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .service-intro__stats {
    flex-direction: row;
  }

  .service-intro__stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .service-intro__stat:last-child {
    border-bottom: none;
  }

  .switching-testimonial {
    padding: var(--space-7) var(--space-5);
  }

  .switching-testimonial__quote {
    font-size: var(--text-lg);
  }
}


/* ==========================================================================
   37. Web Hosting Plans Template
   ========================================================================== */

/* ---- Hero modifier ---- */
.page-hero--hosting {
  background: linear-gradient(
    150deg,
    var(--color-navy-800) 0%,
    var(--color-navy-700) 55%,
    var(--color-teal-500) 100%
  );
}

.page-hero--hosting::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(13, 148, 136, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(37, 99, 235, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Trust bar ---- */
.hosting-trust-bar {
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-5);
}

.hosting-trust-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
}

.hosting-trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hosting-trust-bar__icon {
  width: 18px;
  height: 18px;
  color: var(--color-teal-500);
  flex-shrink: 0;
}

.hosting-trust-bar__icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--color-teal-500);
}

.hosting-trust-bar__text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
}

/* ---- Plans section ---- */
.section--hosting-plans {
  background: var(--color-slate-50);
}

/* ---- Plans grid ---- */
.hosting-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 900px) {
  .hosting-plans-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .hosting-plans-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 599px) {
  .hosting-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Plan card ---- */
.hosting-plan-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}

.hosting-plan-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.hosting-plan-card--featured {
  border-color: var(--color-teal-400);
  box-shadow: 0 0 0 2px var(--color-teal-400), var(--shadow-card);
}

.hosting-plan-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.hosting-plan-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hosting-plan-card__name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
}

.hosting-plan-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ---- Pricing block ---- */
.hosting-plan-card__pricing {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-border);
}

.hosting-plan-card__price {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}

.hosting-plan-card__currency {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-700);
  align-self: flex-start;
  padding-top: 4px;
}

.hosting-plan-card__amount {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-900);
  line-height: 1;
}

.hosting-plan-card__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-bottom: 4px;
}

.hosting-plan-card__period em {
  font-style: normal;
  font-weight: var(--font-weight-medium);
}

.hosting-plan-card__monthly {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Features list ---- */
.hosting-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.hosting-plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  line-height: var(--line-height-snug);
}

.hosting-plan-card__feature--disabled {
  opacity: 0.45;
}

.hosting-plan-card__check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--color-teal-500);
  margin-top: 1px;
}

.hosting-plan-card__check--muted {
  stroke: var(--color-slate-400);
}

.hosting-plan-card__cross {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--color-slate-300);
  margin-top: 1px;
}

.hosting-plan-card__feature strong {
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
}

/* ---- CTA button ---- */
.hosting-plan-card__cta {
  margin-top: auto;
  text-align: center;
  display: block;
  width: 100%;
}

/* ---- Footnote ---- */
.hosting-plans-footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-10);
  max-width: 600px;
  margin-inline: auto;
}

/* ---- Comparison table section ---- */
.section--hosting-compare {
  background: var(--color-white);
  overflow: hidden;
}

.hosting-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

.hosting-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 800px;
}

.hosting-compare-table thead tr {
  background: var(--color-slate-900);
}

.hosting-compare-table thead th {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.hosting-compare-table thead th:last-child {
  border-right: none;
}

.hosting-compare-table__label-col {
  text-align: left !important;
  color: var(--color-slate-300) !important;
  width: 180px;
}

.hosting-compare-table__th--featured {
  background: var(--color-teal-500) !important;
  color: var(--color-white) !important;
}

.hosting-compare-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.hosting-compare-table tbody tr:last-child {
  border-bottom: none;
}

.hosting-compare-table tbody tr:nth-child(even) {
  background: var(--color-slate-50);
}

.hosting-compare-table tbody td {
  padding: var(--space-4) var(--space-5);
  text-align: center;
  color: var(--color-slate-700);
  border-right: 1px solid var(--color-border);
  vertical-align: middle;
}

.hosting-compare-table tbody td:last-child {
  border-right: none;
}

.hosting-compare-table__feature-label {
  text-align: left !important;
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-800) !important;
}

.hosting-compare-table__td--featured {
  background: var(--color-teal-100) !important;
}

.hosting-compare-table tbody tr:nth-child(even) .hosting-compare-table__td--featured {
  background: rgba(13, 148, 136, 0.12) !important;
}

.hosting-compare-table__price-row td {
  font-size: var(--text-base);
  padding-block: var(--space-5);
}

.hosting-compare-table__price-row td strong {
  color: var(--color-slate-900);
  font-weight: var(--font-weight-bold);
}

.hosting-compare-table__cta-row td {
  padding-block: var(--space-5);
}

.hosting-compare-table__tick {
  width: 18px;
  height: 18px;
  stroke: var(--color-teal-500);
  display: inline-block;
  vertical-align: middle;
}

.hosting-compare-table__cross {
  width: 18px;
  height: 18px;
  stroke: var(--color-slate-300);
  display: inline-block;
  vertical-align: middle;
}

/* ---- Add-ons section ---- */
.section--hosting-addons {
  background: var(--color-slate-50);
}


/* ==========================================================================
   38. Remote Support Template
   ========================================================================== */

/* ---- Hero modifier ---- */
.page-hero--remote-support {
  background: linear-gradient(
    150deg,
    var(--color-navy-950) 0%,
    var(--color-navy-800) 45%,
    var(--color-navy-700) 100%
  );
}

.page-hero--remote-support::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Two-column layout: content left, graphic right ---- */
@media (min-width: 900px) {
  .page-hero--remote-support .page-hero__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
  }

  .page-hero--remote-support .page-hero__content {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ---- Hero graphic ---- */
.page-hero__graphic--remote {
  display: none;
}

@media (min-width: 900px) {
  .page-hero__graphic--remote {
    display: flex;
    flex: 0 0 340px;
    align-items: flex-end;   /* sits at the bottom of the row — "slightly lower" */
    justify-content: center;
    padding-bottom: var(--space-4); /* small lift off absolute bottom */
    align-self: flex-end;
  }
}

.remote-hero-visual {
  position: relative;
  width: 280px;
  height: 200px;
}

.remote-hero-visual__screen {
  width: 100%;
  height: 100%;
  background: var(--color-navy-800);
  border: 2px solid rgba(37, 99, 235, 0.4);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(37, 99, 235, 0.2);
}

.remote-hero-visual__bar {
  height: 28px;
  background: var(--color-navy-700);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.remote-hero-visual__bar::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 14px 0 0 #f59e0b, 28px 0 0 #22c55e;
}

.remote-hero-visual__content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.remote-hero-visual__content::before {
  content: '';
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.25);
  width: 75%;
}

.remote-hero-visual__content::after {
  content: '';
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.12);
  width: 55%;
}

.remote-hero-visual__cursor {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-4);
  width: 18px;
  height: 18px;
  background: var(--color-blue-400);
  clip-path: polygon(0 0, 0 100%, 30% 75%, 50% 100%, 62% 95%, 40% 68%, 70% 68%);
  animation: cursor-blink 1.4s ease-in-out infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.remote-hero-visual__badge {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--color-teal-500);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.4);
}

.remote-hero-visual__badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-white);
  flex-shrink: 0;
}

/* ---- How-it-works 3-step variant ---- */
.how-we-work-steps--3 {
  grid-template-columns: repeat(3, 1fr);
}

.how-we-work-steps--3 .how-we-work-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 36px;
  right: calc(-1 * var(--space-6));
  width: calc(var(--space-6) * 2);
  height: 2px;
  background: linear-gradient(90deg, var(--color-blue-300), var(--color-teal-400));
  opacity: 0.35;
}

@media (max-width: 767px) {
  .how-we-work-steps--3 {
    grid-template-columns: 1fr;
  }

  .how-we-work-steps--3 .how-we-work-step::after {
    display: none;
  }
}

/* ---- Session CTA block ---- */
.remote-session-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  text-align: center;
}

.btn--xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-lg);
  gap: var(--space-3);
  display: inline-flex;
  align-items: center;
}

.remote-session-cta__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 400px;
}

/* ---- What we fix section ---- */
.section--remote-what {
  background: var(--color-slate-50);
}

/* ---- Security block ---- */
.section--remote-security {
  background: var(--color-navy-900, #0a1628);
}

.remote-security-block {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
  align-items: start;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 599px) {
  .remote-security-block {
    grid-template-columns: 1fr;
  }
}

.remote-security-block__icon {
  width: 64px;
  height: 64px;
  background: rgba(13, 148, 136, 0.15);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.remote-security-block__icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-teal-400);
}

.remote-security-block__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-snug);
}

.remote-security-block__body p {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
}

.remote-security-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding: 0;
  list-style: none;
}

.remote-security-block__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--line-height-relaxed);
}

.remote-security-block__list li::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- FAQ ---- */
.section--remote-faq {
  background: var(--color-white);
}

.remote-faq-list {
  max-width: 720px;
  margin: var(--space-10) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.remote-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.remote-faq-item[open] {
  border-color: var(--color-blue-300);
}

.remote-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  list-style: none;
  user-select: none;
  background: var(--color-white);
  transition: background-color var(--transition-fast);
}

.remote-faq-item__question::-webkit-details-marker {
  display: none;
}

.remote-faq-item__question:hover {
  background: var(--color-slate-50);
}

.remote-faq-item__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.remote-faq-item[open] .remote-faq-item__chevron {
  transform: rotate(180deg);
}

.remote-faq-item__answer {
  padding: 0 var(--space-6) var(--space-5);
  background: var(--color-white);
}

.remote-faq-item__answer p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
}


/* ==========================================================================
   39. Why JCR Computers Template
   ========================================================================== */

/* ---- Hero modifier ---- */
.page-hero--why-jcr {
  background: linear-gradient(
    135deg,
    var(--color-navy-950) 0%,
    var(--color-navy-800) 50%,
    var(--color-navy-700) 100%
  );
}

.page-hero--why-jcr::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Hero stats strip ---- */
.why-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-10);
  /* sits below the CTA buttons as a full-width row */
  width: 100%;
}

.why-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-7);
  min-width: 130px;
  text-align: center;
  flex: 1;  /* all 4 share the row equally */
}

.why-hero-stat__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
}

.why-hero-stat__label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-1);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

@media (max-width: 599px) {
  .why-hero-stats {
    gap: var(--space-2);
  }

  .why-hero-stat {
    flex: 1 1 calc(50% - var(--space-2)); /* 2-up grid on small screens */
    min-width: 0;
    padding: var(--space-4) var(--space-3);
  }

  .why-hero-stat__number {
    font-size: var(--text-2xl);
  }
}

/* ---- Reasons list ---- */
.why-reasons-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .why-reasons-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-reason {
  display: grid;
  grid-template-columns: 48px 48px 1fr;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
}

.why-reason:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: var(--color-blue-300);
}

.why-reason__number {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-200);
  line-height: 1;
  align-self: center;
  letter-spacing: var(--letter-spacing-tight);
}

.why-reason__icon {
  width: 48px;
  height: 48px;
  background: var(--color-blue-100);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

.why-reason__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-blue-600);
}

.why-reason__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-2);
  line-height: var(--line-height-snug);
}

.why-reason__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.why-reason__proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-teal-500);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.why-reason__proof svg {
  stroke: var(--color-teal-500);
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .why-reason {
    grid-template-columns: 36px 40px 1fr;
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .why-reason__number {
    font-size: var(--text-xl);
  }

  .why-reason__icon {
    width: 40px;
    height: 40px;
  }
}

/* ---- Comparison table section ---- */
.section--why-compare {
  background: var(--color-slate-50);
}

.why-compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  margin-top: var(--space-10);
}

.why-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 560px;
}

.why-compare-table thead tr {
  background: var(--color-slate-900);
}

.why-compare-table thead th {
  padding: var(--space-5) var(--space-6);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  border-right: 1px solid rgba(255,255,255,0.08);
}

.why-compare-table thead th:last-child {
  border-right: none;
}

.why-compare-table__label-col {
  width: 240px;
  color: var(--color-slate-400) !important;
}

.why-compare-table__jcr-col {
  background: var(--color-blue-600) !important;
}

.why-compare-table__jcr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.why-compare-table__other-col {
  color: var(--color-slate-400) !important;
}

.why-compare-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.why-compare-table tbody tr:last-child {
  border-bottom: none;
}

.why-compare-table tbody td {
  padding: var(--space-4) var(--space-6);
  color: var(--color-slate-700);
  border-right: 1px solid var(--color-border);
  vertical-align: middle;
}

.why-compare-table tbody td:last-child {
  border-right: none;
}

.why-compare-table__feature {
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-800) !important;
}

.why-compare-table__jcr-val {
  background: rgba(37, 99, 235, 0.05) !important;
  color: var(--color-slate-800) !important;
  font-weight: var(--font-weight-medium);
  /* No display:flex — flex on <td> collapses the table column structure */
}

.why-compare-table tbody tr:nth-child(even) .why-compare-table__jcr-val {
  background: rgba(37, 99, 235, 0.08) !important;
}

.why-compare-table__other-val {
  color: var(--color-slate-400) !important;
}

/* Icon alignment inside cells — inline, not flex */
.why-compare-table__tick,
.why-compare-table__cross {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-2);
  position: relative;
  top: -1px;
}

.why-compare-table__tick {
  width: 16px;
  height: 16px;
  stroke: var(--color-teal-500);
  flex-shrink: 0;
}

.why-compare-table__cross {
  width: 16px;
  height: 16px;
  stroke: var(--color-slate-300);
  flex-shrink: 0;
}

/* ---- Testimonials grid ---- */
.why-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (min-width: 768px) {
  .why-testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why-testimonial-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-card);
  margin: 0;
}

.why-testimonial-card__stars {
  color: #f59e0b;
  font-size: var(--text-base);
  letter-spacing: 1px;
}

.why-testimonial-card__quote {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-slate-700);
  line-height: var(--line-height-relaxed);
  flex: 1;
}

.why-testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.why-testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue-600), var(--color-teal-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  flex-shrink: 0;
  font-style: normal;
}

.why-testimonial-card__cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
}

.why-testimonial-card__cite strong {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
}

.why-testimonial-card__cite span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ---- Reviews CTA ---- */
.why-reviews-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* ---- Final CTA block ---- */
.why-cta-block {
  background: linear-gradient(135deg, var(--color-navy-900), var(--color-navy-800));
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-10);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: center;
}

@media (max-width: 899px) {
  .why-cta-block {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-6);
  }
}

.why-cta-block__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-snug);
}

.why-cta-block__subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.68);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.why-cta-block__list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: var(--space-2) var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.why-cta-block__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
}

.why-cta-block__list li::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dd4bf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

.why-cta-block__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  min-width: 220px;
}

.why-cta-block__switching-link {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  text-align: center;
  transition: color var(--transition-fast);
}

.why-cta-block__switching-link:hover {
  color: var(--color-teal-400);
}

@media (max-width: 599px) {
  .why-cta-block__list {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Section 40 — Custom & Gaming Computers (template-custom-computers.php)
   ============================================================================= */

/* ---- Hero modifier ---- */
/* .page-hero--custom-pc inherits the dark gradient from .page-hero--service */

/* ---- Gaming vs Workstation cards ---- */
.custom-pc-types__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (max-width: 767px) {
  .custom-pc-types__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.custom-pc-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.custom-pc-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.custom-pc-card--gaming {
  border-top: 3px solid var(--color-blue-500);
}

.custom-pc-card--workstation {
  border-top: 3px solid var(--color-teal-500);
}

.custom-pc-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.custom-pc-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-blue-50);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-600);
}

.custom-pc-card__icon svg {
  width: 24px;
  height: 24px;
}

.custom-pc-card--workstation .custom-pc-card__icon {
  background: var(--color-teal-50);
  color: var(--color-teal-600);
}

.custom-pc-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin: 0;
}

.custom-pc-card__tagline {
  font-size: var(--text-base);
  color: var(--color-slate-500);
  margin: 0;
}

.custom-pc-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.custom-pc-card__list li {
  font-size: var(--text-base);
  color: var(--color-slate-700);
  padding-left: var(--space-6);
  position: relative;
}

.custom-pc-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: var(--color-blue-500);
  border-radius: 50%;
}

.custom-pc-card--workstation .custom-pc-card__list li::before {
  background: var(--color-teal-500);
}

/* ---- Build Process steps ---- */
.custom-pc-process {
  background: var(--color-slate-50);
}

.custom-pc-process__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (max-width: 767px) {
  .custom-pc-process__steps {
    grid-template-columns: 1fr;
  }
}

.custom-pc-step {
  display: flex;
  gap: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
}

.custom-pc-step__num {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-black);
  color: var(--color-blue-100);
  line-height: 1;
  flex-shrink: 0;
  min-width: 52px;
  letter-spacing: -0.02em;
}

.custom-pc-step__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.custom-pc-step__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin: 0;
}

.custom-pc-step__desc {
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ---- Why JCR section uses shared .services-group-grid / .service-group-card ---- */
.custom-pc-why {
  /* inherits .section--alt background */
}

/* ---- Cloud page: website hosting plans callout ---- */
.cloud-hosting-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--color-teal-50, #f0fdfa);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-7);
  margin-block: var(--space-10);
}

.cloud-hosting-callout__content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-teal-700, #0f766e);
}

.cloud-hosting-callout__content svg {
  flex-shrink: 0;
  color: var(--color-teal-500, #14b8a6);
}

.cloud-hosting-callout__content strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
}

.cloud-hosting-callout__content span {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
}

/* =============================================================================
   Section 41 — Submit a Ticket (template-submit-ticket.php)
   ============================================================================= */

/* ---- Two-path cards grid ---- */
.ticket-paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

@media (max-width: 767px) {
  .ticket-paths__grid {
    grid-template-columns: 1fr;
  }
}

.ticket-path-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition-base), border-color var(--transition-fast);
}

.ticket-path-card:hover {
  border-color: var(--color-blue-200);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.08);
}

.ticket-path-card--primary {
  border-color: var(--color-blue-300);
  border-top: 3px solid var(--color-blue-500);
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
}

.ticket-path-card__icon {
  width: 52px;
  height: 52px;
  background: var(--color-blue-50);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue-600);
  flex-shrink: 0;
}

.ticket-path-card__icon svg {
  width: 26px;
  height: 26px;
}

.ticket-path-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue-500);
}

.ticket-path-card__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin: 0;
}

.ticket-path-card__desc {
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
  flex: 1;
}

.ticket-path-card__email-btn {
  font-size: var(--text-sm);
  word-break: break-all;
}

/* ---- After-hours strip ---- */
.ticket-afterhours {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-7);
  margin-block: var(--space-10);
  color: var(--color-slate-700);
}

.ticket-afterhours svg {
  flex-shrink: 0;
  color: var(--color-blue-500);
}

.ticket-afterhours > div {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
}

.ticket-afterhours strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
}

/* =============================================================================
   Section 42 — AI Services page (template-ai-services.php)
   ============================================================================= */

/* ---- Quick-jump nav ---- */
.ai-jump-nav {
  background: var(--color-navy-950);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 40;
}

.ai-jump-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--space-3);
}

.ai-jump-nav__inner::-webkit-scrollbar { display: none; }

.ai-jump-nav__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ai-jump-nav__item:hover {
  background: rgba(255,255,255,0.08);
  color: var(--color-white);
}

/* ---- Service section layout ---- */
.ai-service-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.ai-service-section__inner--reverse {
  direction: rtl;
}

.ai-service-section__inner--reverse > * {
  direction: ltr;
}

@media (max-width: 900px) {
  .ai-service-section__inner,
  .ai-service-section__inner--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: var(--space-10);
  }
}

.ai-service-section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ai-service-section__num {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-black);
  color: var(--color-blue-100);
  line-height: 1;
  letter-spacing: -0.04em;
}

.section--alt .ai-service-section__num {
  color: rgba(255,255,255,0.1);
}

.ai-service-section__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin: 0 0 var(--space-5);
  line-height: 1.2;
}

.section--alt .ai-service-section__title {
  color: var(--color-white);
}

.ai-service-section__lead {
  font-size: var(--text-lg);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.section--alt .ai-service-section__lead {
  color: rgba(255,255,255,0.75);
}

.ai-service-section__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-service-section__list li {
  font-size: var(--text-base);
  color: var(--color-slate-700);
  padding-left: var(--space-6);
  position: relative;
  line-height: var(--line-height-snug);
}

.ai-service-section__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--color-blue-500);
  border-radius: 50%;
}

.section--alt .ai-service-section__list li {
  color: rgba(255,255,255,0.8);
}

.section--alt .ai-service-section__list li::before {
  background: var(--color-teal-400);
}

/* ---- Visual panels ---- */
.ai-service-section__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai-visual__card {
  background: var(--color-navy-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Automation flow */
.ai-visual__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ai-visual__step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-5);
  width: 100%;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
}

.ai-visual__step svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ai-visual__step--active { border-color: rgba(37,99,235,0.4); color: var(--color-blue-300); }
.ai-visual__step--ai     { border-color: rgba(139,92,246,0.4); color: #c4b5fd; }
.ai-visual__step--done   { border-color: rgba(20,184,166,0.4); color: var(--color-teal-300); }

.ai-visual__arrow {
  color: rgba(255,255,255,0.2);
  font-size: var(--text-lg);
  line-height: 1;
}

/* Chatbot bubbles */
.ai-visual__chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-visual__chat-bubble {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  font-size: var(--text-sm);
  line-height: var(--line-height-snug);
}

.ai-visual__chat-bubble--user {
  background: var(--color-blue-600);
  color: var(--color-white);
  align-self: flex-end;
  border-bottom-right-radius: var(--radius-sm);
}

.ai-visual__chat-bubble--bot {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  align-self: flex-start;
  border-bottom-left-radius: var(--radius-sm);
}

.ai-visual__chat-typing {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-visual__chat-typing span {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  animation: ai-typing 1.2s infinite;
}

.ai-visual__chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-visual__chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* BI dashboard */
.ai-visual__dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ai-visual__dash-row {
  display: flex;
  gap: var(--space-4);
}

.ai-visual__kpi {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-visual__kpi-val {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-teal-400);
}

.ai-visual__kpi-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ai-visual__bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  height: 80px;
  padding: var(--space-3);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-lg);
}

.ai-visual__bar {
  flex: 1;
  background: rgba(37,99,235,0.5);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 8px;
}

.ai-visual__bar--accent {
  background: var(--color-teal-500);
}

/* Custom AI visual */
.ai-visual__copilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4);
}

.ai-visual__copilot svg {
  width: 72px;
  height: 72px;
  color: #c4b5fd;
}

.ai-visual__copilot-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.ai-visual__copilot-lines span {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  animation: ai-pulse 2s ease-in-out infinite;
}

.ai-visual__copilot-lines span:nth-child(1) { width: 80%; }
.ai-visual__copilot-lines span:nth-child(2) { width: 60%; animation-delay: 0.3s; }
.ai-visual__copilot-lines span:nth-child(3) { width: 70%; animation-delay: 0.6s; }

@keyframes ai-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ---- Readiness CTA ---- */
.ai-readiness-cta__inner {
  background: linear-gradient(135deg, var(--color-navy-900) 0%, #1a0a3c 100%);
  border-radius: var(--radius-2xl);
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: center;
  justify-content: space-between;
}

.ai-readiness-cta__content {
  flex: 1;
  min-width: 280px;
}

.ai-readiness-cta__title {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin: 0 0 var(--space-4);
}

.ai-readiness-cta__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.7);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-6);
}

.ai-readiness-cta__checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ai-readiness-cta__checklist li {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  padding-left: var(--space-6);
  position: relative;
}

.ai-readiness-cta__checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-teal-400);
  font-weight: 700;
}

.ai-readiness-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 220px;
}

/* =============================================================================
   Section 43 — Phone & Internet page (template-phone-internet.php)
   ============================================================================= */

/* ---- Speed tier grid ---- */
.pi-speed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}

@media (max-width: 900px) {
  .pi-speed-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .pi-speed-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}

.pi-speed-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.pi-speed-card:hover {
  border-color: var(--color-teal-300);
  box-shadow: 0 4px 16px rgba(13,148,136,0.1);
}

.pi-speed-card--featured {
  border-color: var(--color-teal-400);
  border-top: 3px solid var(--color-teal-500);
  box-shadow: 0 4px 20px rgba(13,148,136,0.12);
}

.pi-speed-card__badge {
  margin-bottom: var(--space-1);
}

.pi-speed-card__label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-slate-500);
}

.pi-speed-card__speeds {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pi-speed-card__speed {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.pi-speed-card__val {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-slate-900);
  line-height: 1;
}

.pi-speed-card__unit {
  font-size: var(--text-xs);
  color: var(--color-slate-500);
}

.pi-speed-card__divider {
  color: var(--color-slate-300);
  font-size: var(--text-lg);
}

.pi-speed-card__note {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  margin: 0;
  line-height: var(--line-height-snug);
}

.pi-speed-footnote {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  text-align: center;
  margin-top: var(--space-6);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---- 4G Failover callout ---- */
.pi-failover-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--color-teal-50, #f0fdfa);
  border: 1px solid rgba(13,148,136,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-7);
  margin-top: var(--space-10);
}

.pi-failover-callout__icon {
  width: 44px;
  height: 44px;
  background: var(--color-teal-100);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-600);
  flex-shrink: 0;
}

.pi-failover-callout__icon svg { width: 22px; height: 22px; }

.pi-failover-callout__content {
  flex: 1;
  min-width: 200px;
}

.pi-failover-callout__content strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
}

.pi-failover-callout__content p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* ---- Phone section layout ---- */
.pi-phones-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-12);
  align-items: start;
  margin-top: var(--space-12);
}

@media (max-width: 900px) {
  .pi-phones-layout { grid-template-columns: 1fr; }
}

.pi-phones-features__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin: 0 0 var(--space-6);
}

.pi-phones-feature {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: var(--space-5);
}

.pi-phones-feature:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pi-phones-feature__check {
  width: 24px;
  height: 24px;
  background: var(--color-teal-500);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.pi-phones-feature__check svg {
  width: 12px;
  height: 12px;
  color: var(--color-white);
}

.pi-phones-feature strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

.pi-phones-feature p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* ---- Pricing card ---- */
.pi-pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  position: sticky;
  top: var(--space-10);
}

.pi-pricing-card__header {
  background: linear-gradient(135deg, var(--color-teal-600), var(--color-teal-500));
  padding: var(--space-8) var(--space-7);
  text-align: center;
}

.pi-pricing-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-2);
}

.pi-pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  color: var(--color-white);
}

.pi-pricing-card__currency {
  font-size: var(--text-2xl);
  font-weight: 700;
}

.pi-pricing-card__amount {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-black);
  line-height: 1;
}

.pi-pricing-card__period {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
}

.pi-pricing-card__gst {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-2);
}

.pi-pricing-card__list {
  list-style: none;
  padding: var(--space-6) var(--space-7);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pi-pricing-card__list li {
  font-size: var(--text-sm);
  color: var(--color-slate-700);
  padding-left: var(--space-6);
  position: relative;
}

.pi-pricing-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-teal-500);
  font-weight: 700;
}

.pi-pricing-card .btn {
  display: block;
  margin: 0 var(--space-7) var(--space-4);
  text-align: center;
}

.pi-pricing-card__note {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  margin: 0;
  padding: 0 var(--space-7) var(--space-6);
  line-height: var(--line-height-relaxed);
  text-align: center;
}

/* ==========================================================================
   37. Custom Software Development Page
   ========================================================================== */

/* Purple/indigo accent for hero */
.page-hero--custom-software::before {
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(124, 58, 237, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(99, 38, 186, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 30% 50% at 50% 10%, rgba(79, 70, 229, 0.10) 0%, transparent 60%);
}

/* Purple service intro variant */
.service-intro--purple {
  background: var(--color-navy-900, #0a1628);
}

.service-intro__stats--purple .service-intro__stat-number {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark variant for cards on section--alt */
.service-group-card--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.service-group-card--dark .service-group-card__title {
  color: var(--color-white);
}

.service-group-card--dark .service-group-card__excerpt {
  color: rgba(255, 255, 255, 0.7);
}

.service-group-card--dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.15);
}

/* Emoji display in step cards */
.service-group-card__emoji {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Why JCR reason cards */
.custom-software-reason-card__contrast {
  font-size: var(--text-xs);
  color: var(--color-slate-400);
  font-style: italic;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   38. Contact Sutherland Shire Page
   ========================================================================== */

.page-hero--contact-sutherland::before {
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(37, 99, 235, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(13, 148, 136, 0.08) 0%, transparent 60%);
}

/* ==========================================================================
   39. IT Tools Page
   ========================================================================== */

/* Hero */
.page-hero--tools {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 60%, #0d2a50 100%);
  position: relative;
  overflow: hidden;
}

.page-hero--tools::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(13, 148, 136, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 15% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Section wrapper */
.tools-section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.tools-section--alt {
  background: var(--color-navy-900, #0a1628);
}

/* Tool card */
.tools-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-card);
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.tools-card--dark {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.tools-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.tools-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tools-card__icon svg {
  width: 28px;
  height: 28px;
}

.tools-card__icon--blue {
  background: linear-gradient(135deg, var(--color-blue-100), rgba(37, 99, 235, 0.06));
  color: var(--color-blue-600);
}

.tools-card__icon--purple {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(124, 58, 237, 0.05));
  color: #a78bfa;
}

.tools-card__icon--teal {
  background: linear-gradient(135deg, var(--color-teal-100), rgba(13, 148, 136, 0.06));
  color: var(--color-teal-600);
}

.tools-card__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
  line-height: var(--line-height-snug);
}

.tools-card__title--light {
  color: var(--color-white);
}

.tools-card__subtitle {
  font-size: var(--text-base);
  color: var(--color-slate-500);
  margin: 0;
}

.tools-card__subtitle--light {
  color: rgba(255, 255, 255, 0.65);
}

.tools-card__description {
  font-size: var(--text-base);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.tools-card__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  background: var(--color-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.tools-card__note--light {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.tools-card__note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.tools-card__promo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.tools-card__promo svg {
  flex-shrink: 0;
  color: var(--color-blue-500);
  margin-top: 2px;
}

.tools-card__promo a {
  color: var(--color-blue-600);
  font-weight: var(--font-weight-medium);
}

.tools-card__promo a:hover {
  color: var(--color-blue-700);
}

/* Tool forms */
.tools-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tools-form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
}

.tools-form__input-group {
  display: flex;
  gap: var(--space-3);
}

.tools-form__input {
  flex: 1;
  height: 48px;
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-mono, monospace);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-slate-900);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.tools-form__input:focus {
  border-color: var(--color-blue-400);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.tools-form__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Password display */
.password-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  min-height: 64px;
}

.password-display__text {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white);
  word-break: break-all;
  flex: 1;
  user-select: all;
}

.password-display__copy {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.password-display__copy:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--copied {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

/* Password options */
.password-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.password-options__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.password-options__format-hint {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin: var(--space-2) 0 var(--space-1);
}

.password-options__format-example {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.password-options__format-example code {
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.95em;
}

.password-options__slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.password-options__slider-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  gap: var(--space-2);
}

.password-options__slider-label span {
  font-weight: var(--font-weight-bold);
  color: #a78bfa;
  min-width: 2ch;
}

.password-options__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.password-options__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  transition: box-shadow var(--transition-base);
}

.password-options__range::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.35);
}

.password-options__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7c3aed;
  cursor: pointer;
  border: none;
}

.password-options__slider-range {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

.password-options__checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.password-options__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  user-select: none;
}

.password-options__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  accent-color: #7c3aed;
  cursor: pointer;
  flex-shrink: 0;
}

.password-options__checkbox:hover {
  color: var(--color-white);
}

/* Email security check grid */
.tools-email-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tools-email-checks__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-600);
  margin: 0;
}

.tools-email-checks__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tools-email-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-slate-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.tools-email-check__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 28px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.tools-email-check__badge--blue {
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-blue-700);
}

.tools-email-check__badge--purple {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
}

.tools-email-check__badge--teal {
  background: rgba(13, 148, 136, 0.12);
  color: var(--color-teal-700);
}

.tools-email-check strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-800);
  margin-bottom: var(--space-1);
}

.tools-email-check p {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  margin: 0 0 var(--space-2);
  line-height: var(--line-height-relaxed);
}

.tools-email-check__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-blue-600);
  text-decoration: none;
}

.tools-email-check__link:hover {
  color: var(--color-blue-700);
  text-decoration: underline;
}

/* Responsive — IT Tools */
@media (max-width: 768px) {
  .tools-card {
    padding: var(--space-7);
  }

  .tools-card__header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .tools-form__input-group {
    flex-direction: column;
  }

  .tools-form__input-group .btn {
    width: 100%;
  }

  .password-display {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .password-display__text {
    font-size: var(--text-base);
    letter-spacing: 0.04em;
  }

  .password-display__copy {
    width: 100%;
    justify-content: center;
  }

  .password-options__checkboxes {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   Domain Names section (template-cloud.php)
   ============================================================================= */

.cloud-domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}

@media (max-width: 900px) {
  .cloud-domain-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .cloud-domain-grid { grid-template-columns: 1fr; }
}

.cloud-domain-card {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.cloud-domain-card:hover {
  border-color: var(--color-teal-300);
  box-shadow: 0 4px 20px rgba(13,148,136,0.08);
}

.cloud-domain-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-slate-500);
}

.cloud-domain-card__icon svg { width: 20px; height: 20px; }

.cloud-domain-card__icon--teal {
  background: rgba(13,148,136,0.1);
  color: var(--color-teal-600);
}

.cloud-domain-card__icon--blue {
  background: rgba(37,99,235,0.1);
  color: var(--color-blue-600);
}

.cloud-domain-card__price {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-teal-600);
  line-height: 1;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.cloud-domain-card__price span {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cloud-domain-card__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin: 0 0 var(--space-2);
}

.cloud-domain-card__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.cloud-domain-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-7);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-xl);
}

.cloud-domain-cta p {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
  margin: 0;
}

.cloud-domain-cta__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* =============================================================================
   Custom Software homepage strip (template-parts/custom-software.php)
   ============================================================================= */

.section--custom-software {
  background: linear-gradient(135deg, var(--color-navy-950) 0%, #1a0a3c 100%);
}

.custom-software-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .custom-software-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.custom-software-strip__eyebrow {
  margin-bottom: var(--space-4);
}

.custom-software-strip__title {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
  line-height: 1.2;
  margin: 0 0 var(--space-5);
}

.custom-software-strip__highlight {
  display: block;
  background: linear-gradient(90deg, #a78bfa, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.custom-software-strip__desc {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.72);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-8);
  max-width: 54ch;
}

.custom-software-strip__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.custom-software-strip__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.custom-software-strip__card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: rgba(255,255,255,0.8);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.custom-software-strip__card:hover {
  background: rgba(167,139,250,0.1);
  border-color: rgba(167,139,250,0.35);
}

.custom-software-strip__card svg {
  width: 20px;
  height: 20px;
  color: #a78bfa;
  flex-shrink: 0;
}

/* Badge purple variant */
.badge--purple {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}


/* ==========================================================================
   Multi-page content additions (2026-04-04)
   — VPS/VDS acronym note, framework highlight boxes, cloud-domain on hosting
   ========================================================================== */

/* Hero acronym note — small clarification text below hero subtitle */
.page-hero__acronym-note {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.42);
  margin-top: var(--space-3);
  letter-spacing: 0.01em;
}

/* ---- SMB1001 framework callout — 3 highlight boxes ---- */
.framework-callout__highlights-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.framework-callout__box {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(13, 148, 136, 0.18);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.framework-callout__box:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(13, 148, 136, 0.35);
}

.framework-callout__box svg {
  width: 20px;
  height: 20px;
  color: var(--color-teal-600);
  flex-shrink: 0;
}

.framework-callout__box-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  line-height: var(--line-height-snug);
  margin: 0;
}

.framework-callout__box-desc {
  font-size: var(--text-xs);
  color: var(--color-slate-600);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

@media (max-width: 699px) {
  .framework-callout__highlights-boxes {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---- cloud-domain-cta inside .section--alt (dark) — invert text ---- */
.section--alt .cloud-domain-cta p {
  color: rgba(255, 255, 255, 0.75);
}

.section--alt .cloud-domain-cta .btn--outline {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.section--alt .cloud-domain-cta .btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white);
}


/* ==========================================================================
   Blog index & archive (index.php, archive.php) — 2026-04-06
   ========================================================================== */

/* Blog index hero — slightly taller padding than base service hero */
.page-hero--blog-index {
  padding-block: clamp(var(--space-16), 10vw, var(--space-24));
}

/* Featured post card — horizontal image + content layout */
.post-card--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
  margin-bottom: var(--space-10);
}

/* Override the 16:9 aspect-ratio constraint so the image fills the card height */
.post-card--featured .post-card__image-link {
  aspect-ratio: unset;
  align-self: stretch;
}

.post-card--featured .post-card__image {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* Richer padding and vertically centred content for featured */
.post-card--featured .post-card__body {
  padding: var(--space-10) var(--space-10);
  justify-content: center;
}

/* Larger title in the featured card */
.post-card__title--featured {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
  font-weight: var(--font-weight-extrabold);
  line-height: 1.22;
}

/* Category pill displayed inside post card meta */
.post-card__cat {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background: rgba(37, 99, 235, 0.08);
  color: var(--color-blue-600);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.post-card__cat:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(37, 99, 235, 0.3);
}

/* Image placeholder for posts that have no featured image */
.post-card__image-placeholder {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-slate-50) 0%, var(--color-slate-100) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-300);
}

/* Featured-card placeholder fills the column height instead of keeping ratio */
.post-card--featured .post-card__image-placeholder {
  aspect-ratio: unset;
  min-height: 280px;
  align-self: stretch;
}

/* Post grid that follows the featured card — top margin separates them */
.post-grid--below-featured {
  margin-top: var(--space-10);
}

/* ---- Responsive: stack featured card below 768 px ---- */
@media (max-width: 767px) {
  .post-card--featured {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .post-card--featured .post-card__image-link {
    aspect-ratio: 16 / 9;
  }

  .post-card--featured .post-card__image {
    min-height: unset;
  }

  .post-card--featured .post-card__image-placeholder {
    aspect-ratio: 16 / 9;
    min-height: unset;
    align-self: auto;
  }

  .post-card--featured .post-card__body {
    padding: var(--space-6);
  }
}

/* ---- Consistent card heights in grid (equalise cards without images) ---- */
.post-grid .post-card {
  display: flex;
  flex-direction: column;
}

.post-grid .post-card .post-card__image-placeholder {
  flex-shrink: 0;
}


/* ==========================================================================
   Single post page (single.php) — 2026-04-06
   ========================================================================== */

/* Hero — generous padding so the category tag doesn't sit against the nav */
.page-hero--single-post {
  padding-block-start: clamp(var(--space-20), 10vw, var(--space-32));
  padding-block-end:   clamp(var(--space-16), 8vw,  var(--space-24));
}

/* Post title — wider than the default 18ch so headlines don't over-wrap */
.page-hero__title--post {
  max-width: 28ch;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}

/* Category/tag pill shown in the hero (white on dark background) */
.tag--article {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: var(--space-5);
}

.tag--article:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Make prose full-width inside single articles (override the 72ch cap) */
.single-article__prose {
  max-width: none;
}

/* Slightly larger body text for comfortable reading */
.single-article__prose p,
.single-article__prose li {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-slate-700);
}

/* Better heading spacing in article content */
.single-article__prose h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.single-article__prose h3 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

/* Featured image — gap above, rounded inside the container */
.single-article__featured-image {
  padding-block: var(--space-10) 0;
  background: var(--color-white);
}

.single-article__featured-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  display: block;
  margin: 0;
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   Service Area Block — repairs page
   ========================================================================== */

.section--service-area {
  background: var(--color-slate-50);
}

.service-area-block {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.service-area-block__title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-4);
}

.service-area-block__lead {
  font-size: var(--text-lg);
  color: var(--color-slate-600);
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.service-area-block__lead a {
  color: var(--color-blue-600);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.service-area-block__lead a:hover {
  text-decoration: underline;
}

.service-area-block__suburbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-area-block__suburbs li {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-full);
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-700);
  white-space: nowrap;
}

/* ==========================================================================
   Areas We Service — template-areas.php
   ========================================================================== */

/* ---- Intro split layout ---- */
.section--areas-intro {
  background: var(--color-white);
}

.areas-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.areas-intro__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.areas-intro__text p {
  color: var(--color-slate-600);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.areas-intro__text p:last-child {
  margin-bottom: 0;
}

.areas-intro__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.areas-mode-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.areas-mode-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.areas-mode-card__icon--blue   { background: var(--color-blue-50);   color: var(--color-blue-600); }
.areas-mode-card__icon--teal   { background: #f0fdfa;                 color: #0d9488; }
.areas-mode-card__icon--purple { background: #faf5ff;                 color: #7c3aed; }

.areas-mode-card h3 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-1);
}

.areas-mode-card p {
  font-size: var(--text-sm);
  color: var(--color-slate-600);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 899px) {
  .areas-intro {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

/* ---- Suburb clusters ---- */
.section--suburb-clusters {
  background: var(--color-slate-50);
}

.suburb-clusters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.suburb-cluster {
  background: var(--color-white);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
}

/* Featured cluster — Hills District spans full width and gets blue accent */
.suburb-cluster--featured {
  grid-column: 1 / -1;
  border-color: var(--color-blue-200);
  background: linear-gradient(135deg, #eff6ff 0%, var(--color-white) 60%);
  position: relative;
  overflow: hidden;
}

.suburb-cluster--featured::before {
  content: '★ Our Home Turf';
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-blue-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
}

.suburb-cluster--featured .suburb-cluster__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 var(--space-6);
}

.suburb-cluster--featured .suburb-cluster__title {
  color: var(--color-blue-700);
}

.suburb-cluster__header {
  margin-bottom: var(--space-5);
}

.suburb-cluster__header .badge {
  margin-bottom: var(--space-3);
  display: inline-flex;
}

.suburb-cluster__title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-slate-900);
  margin-bottom: var(--space-2);
}

.suburb-cluster__desc {
  font-size: var(--text-sm);
  color: var(--color-slate-500);
  line-height: 1.6;
  margin: 0;
}

.suburb-cluster__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-slate-100);
  padding-top: var(--space-4);
}

.suburb-cluster__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-slate-50);
}

.suburb-cluster__item:last-child {
  border-bottom: none;
}

.suburb-cluster__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-800);
}

.suburb-cluster__postcode {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-400);
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-100);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
  .suburb-clusters {
    grid-template-columns: 1fr;
  }
}

/* ---- "Not listed" banner ---- */
.section--areas-not-listed {
  background: var(--color-blue-600);
  color: var(--color-white);
}

.areas-not-listed {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.areas-not-listed__icon {
  flex-shrink: 0;
  color: rgba(255,255,255,0.7);
}

.areas-not-listed__text {
  flex: 1;
  min-width: 240px;
}

.areas-not-listed__text h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.areas-not-listed__text p {
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin: 0;
}

.areas-not-listed__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.areas-not-listed__cta .btn--outline {
  border-color: rgba(255,255,255,0.5);
  color: var(--color-white);
}

.areas-not-listed__cta .btn--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--color-white);
}

/* badge colours used in clusters */
.badge--green  { background: #dcfce7; color: #15803d; }
.badge--purple { background: #f3e8ff; color: #7c3aed; }
.badge--orange { background: #fff7ed; color: #c2410c; }
.badge--slate  { background: var(--color-slate-100); color: var(--color-slate-600); }