/*
Theme Name: JacRox
Theme URI: https://jacrox.co
Author: Jack Ross Limited
Author URI: https://jackross.com
Description: Custom WordPress theme for JacRox - Xero cloud accounting specialists. Built for performance (90+ PageSpeed), SEO (Rank Math Pro), and conversion. No page builder dependencies.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jacrox
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   JACROX V10 DESIGN SYSTEM
   Architecture: Custom WordPress theme (no page builder)
   Layout: front-page.php + template parts
   Content: Hardcoded in templates, edited via Claude Code
   SEO: Rank Math
   Forms: Fluent Forms Pro
   ============================================================ */

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

:root {
  --blue-900: #0A2E3F;
  --blue-800: #0C3D54;
  --blue-700: #0F4F6D;
  --blue-600: #147092;
  --blue-500: #1B8DB8;
  --blue-400: #2DA8D8;
  --blue-300: #5DC4E8;
  --blue-200: #9DDCF0;
  --blue-100: #D4F0FA;
  --blue-50:  #EEF8FD;
  --accent: #14B8A6;
  --accent-hover: #0D9488;
  --gray-950: #0B1120;
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white:    #FFFFFF;
  --gold:     #F59E0B;

  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Outfit', -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--gray-900); letter-spacing: -0.01em; }
h4, h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; color: var(--gray-900); }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); }
h4 { font-size: 1.125rem; }
p { font-size: 1.0625rem; line-height: 1.7; color: var(--gray-600); }
strong { font-weight: 600; color: var(--gray-800); }
a { color: var(--blue-600); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--blue-800); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1320px; }
.section { padding: 5rem 0; }
.section--lg { padding: 6.5rem 0; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: var(--blue-900);
  color: var(--blue-200);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  font-weight: 500;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; }
.topbar__item { display: flex; align-items: center; gap: 0.5rem; color: var(--blue-200); }
.topbar__item a { color: var(--white); font-weight: 600; }
.topbar__right { display: flex; gap: 1.5rem; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 0.75rem 0;
  transition: box-shadow 0.3s;
}
.nav.scrolled { box-shadow: var(--shadow-md); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.nav__logo img { height: 44px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; flex: 1; justify-content: center; }
.nav__links a { font-size: 0.875rem; font-weight: 500; color: var(--gray-600); letter-spacing: 0.01em; transition: color 0.2s; white-space: nowrap; }
.nav__links a:hover { color: var(--blue-600); }

.nav__right { display: flex; align-items: center; gap: 1rem; }
.nav__phone { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--gray-800) !important; white-space: nowrap; }
.nav__phone svg { color: var(--blue-500); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem;
  border: none; cursor: pointer; transition: all 0.3s var(--ease-out);
  text-decoration: none; line-height: 1; border-radius: var(--radius-full);
}
.btn--primary {
  padding: 0.875rem 1.75rem; background: var(--blue-600); color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(20,112,146,0.25);
}
.btn--primary:hover { background: var(--blue-700); color: var(--white) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(20,112,146,0.3); }
.btn--outline { padding: 0.875rem 1.75rem; background: transparent; color: var(--gray-700); border: 1.5px solid var(--gray-300); }
.btn--outline:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); }
.btn--sm { padding: 0.625rem 1.25rem; font-size: 0.8125rem; }
.btn--arrow::after { content: ' \2192'; transition: transform 0.2s; }
.btn--arrow:hover::after { transform: translateX(3px); }
.btn--white { padding: 0.75rem 1.5rem; background: var(--white); color: var(--blue-800) !important; font-weight: 700; }
.btn--white:hover { background: var(--blue-50); transform: translateY(-1px); }
.btn--white-outline { padding: 0.75rem 1.5rem; background: transparent; color: var(--white) !important; border: 1.5px solid rgba(255,255,255,0.3); }
.btn--white-outline:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.08); }

/* Hamburger */
.nav__hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--gray-800); margin: 5px 0; transition: 0.3s; border-radius: 1px; }
.nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile Menu */
.mobile-nav {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 99; padding: 5rem 1.5rem 2rem;
  flex-direction: column; gap: 0;
  transform: translateX(100%); transition: transform 0.4s var(--ease-out);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav__link {
  display: block; padding: 1rem 0; font-size: 1.125rem; font-weight: 500;
  color: var(--gray-700); border-bottom: 1px solid var(--gray-100); text-decoration: none;
}
.mobile-nav__link:hover { color: var(--blue-600); }
.mobile-nav__cta { margin-top: 1.5rem; width: 100%; text-align: center; padding: 1rem; }

/* ============================================================
   HERO -- SIMPLIFIED (5 elements, not 9)
   ============================================================ */
.hero {
  padding: 4.5rem 0 5.5rem;
  background: linear-gradient(170deg, var(--blue-50) 0%, var(--white) 60%);
  position: relative; overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; }

.hero__title { margin-bottom: 1.25rem; }
.hero__desc { font-size: 1.125rem; color: var(--gray-500); margin-bottom: 2rem; max-width: 50ch; line-height: 1.75; }

.hero__actions { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.hero__phone-link { font-size: 0.9375rem; color: var(--gray-500); text-decoration: none; }
.hero__phone-link strong { color: var(--blue-600); }
.hero__phone-link:hover strong { text-decoration: underline; }

.hero__proof { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hero__proof-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--gray-500); }
.hero__proof-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.hero__image { position: relative; }
.hero__image img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08); border: 1px solid var(--gray-200); }
.hero__image-badge {
  position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: var(--radius-full); padding: 0.5rem 1.25rem;
  box-shadow: var(--shadow-lg); font-size: 0.8125rem; font-weight: 600; color: var(--gray-700);
  display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; border: 1px solid var(--gray-100);
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust { padding: 2rem 0; border-bottom: 1px solid var(--gray-100); background: var(--white); }
.trust__inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.trust__label { font-size: 0.75rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; }
.trust__logos { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.trust__logo { height: 40px; width: auto; opacity: 0.85; transition: all 0.3s; }
.trust__logo:hover { opacity: 1; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section__header { text-align: center; margin-bottom: 3.5rem; }
.section__eyebrow {
  font-size: 0.75rem; font-weight: 700; color: var(--blue-600);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem;
}
.section__title { margin-bottom: 1rem; }
.section__desc { font-size: 1.0625rem; color: var(--gray-500); max-width: 60ch; margin: 0 auto; }

/* ============================================================
   SERVICES
   ============================================================ */
.services { background: var(--white); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.service-card {
  padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  background: var(--white); transition: all 0.35s var(--ease-out); position: relative;
}
.service-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.service-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--blue-50);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
  color: var(--blue-500); transition: all 0.3s;
}
.service-card:hover .service-card__icon { background: var(--blue-500); color: var(--white); }
.service-card__title { font-size: 1.125rem; margin-bottom: 0.625rem; }
.service-card__desc { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 1rem; }
.service-card__link { font-size: 0.875rem; font-weight: 600; color: var(--blue-600); display: inline-flex; align-items: center; gap: 0.25rem; }
.service-card__link::after { content: '\2192'; transition: transform 0.2s; }
.service-card__link:hover::after { transform: translateX(3px); }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { background: linear-gradient(135deg, var(--blue-700), var(--blue-900)); padding: 1.75rem 0; }
.cta-strip__inner { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.cta-strip__text { font-family: var(--font-display); font-size: 1.25rem; color: var(--white); }

/* ============================================================
   SECTORS
   ============================================================ */
.sectors { background: var(--gray-50); padding: 3.5rem 0; }
.sectors__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.sector-item { text-align: center; padding: 1.25rem 0.75rem; border-radius: var(--radius-md); transition: all 0.3s var(--ease-out); cursor: default; }
.sector-item:hover { background: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sector-item__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.625rem; color: var(--blue-500); transition: all 0.3s;
}
.sector-item:hover .sector-item__icon { background: var(--blue-500); color: var(--white); }
.sector-item__name { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); }

/* ============================================================
   WHY JACROX (dark section)
   ============================================================ */
.why {
  background: var(--blue-900);
  color: var(--white);
  position: relative;
}
.why__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: start; }

.why__eyebrow { font-size: 0.75rem; font-weight: 700; color: var(--blue-300); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem; }
.why__title { color: var(--white); margin-bottom: 1rem; }
.why__desc { color: var(--blue-200); margin-bottom: 2rem; max-width: 55ch; }

.why__features { display: flex; flex-direction: column; gap: 1.5rem; }
.why__feature { display: flex; gap: 1rem; align-items: flex-start; }
.why__feature-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(27,141,184,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--blue-300);
}
.why__feature-title { font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 0.25rem; }
.why__feature-desc { font-size: 0.875rem; color: var(--blue-200); line-height: 1.5; }

/* Micro-testimonial moved here from hero */
.why__testimonial {
  margin-top: 2rem; padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.05); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.why__testimonial p { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--blue-100); line-height: 1.5; margin: 0 0 0.375rem; }
.why__testimonial span { font-size: 0.75rem; font-weight: 600; color: var(--blue-300); }

.why__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.why__stat {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg); padding: 1.75rem 1.5rem; text-align: center;
}
.why__stat-number { font-family: var(--font-display); font-size: 2.25rem; color: var(--accent); margin-bottom: 0.25rem; }
.why__stat-label { font-size: 0.8125rem; font-weight: 500; color: var(--blue-200); }

/* ============================================================
   VIDEO TESTIMONIALS
   ============================================================ */
.videos { background: var(--gray-50); }
.videos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.video-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); transition: all 0.35s var(--ease-out); }
.video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

.video-card__thumb { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: var(--gray-800); cursor: pointer; }
.video-card__thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.video-card:hover .video-card__thumb img { transform: scale(1.05); }
.video-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 56px; height: 56px; background: rgba(255,0,0,0.9); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease-out); box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.video-card:hover .video-card__play { background: #FF0000; transform: translate(-50%, -50%) scale(1.08); }
.video-card__play-icon { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 16px; border-color: transparent transparent transparent white; margin-left: 2px; }

.video-card__body { padding: 1.5rem; }
.video-card__company { font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.25rem; }
.video-card__person { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 0.75rem; }
.video-card__quote { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--blue-700); line-height: 1.5; }

/* PACKAGES: CSS removed -- pricing not shown on public homepage */

/* ============================================================
   GOOGLE REVIEWS
   ============================================================ */
.reviews { background: var(--white); }
.reviews__header-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 1rem; background: var(--white); border: 1px solid var(--gold);
  border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 600;
  color: var(--gray-700); margin-bottom: 1.5rem;
}
.reviews__header-stars { color: var(--gold); font-size: 0.875rem; letter-spacing: 1px; }

.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review-card {
  padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--gray-200);
  background: var(--white); transition: box-shadow 0.3s;
}
.review-card:hover { box-shadow: var(--shadow-md); }
.review-card__stars { color: var(--gold); font-size: 0.875rem; letter-spacing: 1px; margin-bottom: 0.75rem; }
.review-card__text { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.6; margin-bottom: 1.25rem; }
.review-card__author { display: flex; align-items: center; gap: 0.75rem; }
.review-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; color: var(--blue-500);
}
.review-card__name { font-size: 0.875rem; font-weight: 600; color: var(--gray-800); }
.review-card__date { font-size: 0.75rem; color: var(--gray-500); }
.review-card__source { display: flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--gray-500); margin-top: 0.125rem; }

/* ============================================================
   ARTICLES (WordPress loop)
   ============================================================ */
.articles { background: var(--gray-50); }
.articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.article-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); transition: all 0.35s var(--ease-out); text-decoration: none; display: block; }
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.article-card__thumb { height: 180px; overflow: hidden; position: relative; }
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.article-card:hover .article-card__thumb img { transform: scale(1.05); }
.article-card__cat {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--blue-600); color: var(--white); font-size: 0.6875rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-sm);
}
.article-card__body { padding: 1.5rem; }
.article-card__title { font-size: 1.0625rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; line-height: 1.4; }
.article-card__excerpt { font-size: 0.875rem; color: var(--gray-500); line-height: 1.6; margin-bottom: 1rem; }
.article-card__meta { font-size: 0.75rem; color: var(--gray-500); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--white); }
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
.faq__content { position: sticky; top: 6rem; }
.faq__list { display: flex; flex-direction: column; gap: 0; }

.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__question {
  width: 100%; padding: 1.25rem 0; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--gray-800);
  transition: color 0.2s;
}
.faq__question:hover { color: var(--blue-600); }
.faq__icon { width: 20px; height: 20px; color: var(--gray-500); transition: transform 0.3s var(--ease-out); flex-shrink: 0; margin-left: 1rem; }
.faq__item.active .faq__icon { transform: rotate(45deg); color: var(--blue-500); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); }
.faq__answer-inner { padding: 0 0 1.25rem; }
.faq__answer-inner p { font-size: 0.9375rem; color: var(--gray-500); line-height: 1.7; }
.faq__item.active .faq__answer { max-height: 300px; }

/* ============================================================
   AREAS SERVED (local SEO)
   ============================================================ */
.areas { background: var(--gray-50); padding: 3rem 0; }
.areas__inner { text-align: center; }
.areas__label { font-size: 0.75rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
.areas__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.areas__link {
  font-size: 0.8125rem; font-weight: 500; color: var(--gray-500); padding: 0.375rem 0.875rem;
  border: 1px solid var(--gray-200); border-radius: var(--radius-full); transition: all 0.2s;
  text-decoration: none;
}
.areas__link:hover { color: var(--blue-600); border-color: var(--blue-300); background: var(--blue-50); }

/* ============================================================
   CONTACT / CTA SECTION
   ============================================================ */
.cta-section { background: var(--blue-900); color: var(--white); }
.cta-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cta-section__title { color: var(--white); margin-bottom: 1rem; }
.cta-section__desc { color: var(--blue-200); margin-bottom: 2rem; }
.cta-section__proof { display: flex; flex-direction: column; gap: 0.75rem; }
.cta-section__proof-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--blue-200); }
.cta-section__proof-icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.form-container {
  background: var(--white); border-radius: var(--radius-xl); padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.form-container__title { font-family: var(--font-display); font-size: 1.5rem; color: var(--gray-900); margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group--full { grid-column: 1 / -1; }
.form-label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.375rem; }
.form-input, .form-textarea {
  padding: 0.75rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.9375rem; color: var(--gray-800);
  outline: none; transition: border-color 0.2s; width: 100%;
}
.form-input:focus, .form-textarea:focus { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(27,141,184,0.08); }
.form-textarea { resize: vertical; min-height: 90px; }
.form-submit {
  width: 100%; padding: 0.875rem; background: var(--blue-600); color: var(--white);
  border: none; border-radius: var(--radius-md); font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-top: 0.5rem;
}
.form-submit:hover { background: var(--blue-700); }
.form-note { font-size: 0.75rem; color: var(--gray-500); text-align: center; margin-top: 0.75rem; }

/* Fluent Forms overrides inside .form-container */
.form-container .fluentform {
  font-family: var(--font-body);
}
.form-container .fluentform .ff-el-input--label label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.375rem;
}
.form-container .fluentform input[type="text"],
.form-container .fluentform input[type="email"],
.form-container .fluentform input[type="tel"],
.form-container .fluentform textarea,
.form-container .fluentform select {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--gray-800);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  background: var(--gray-50);
  box-shadow: none;
}
.form-container .fluentform input:focus,
.form-container .fluentform textarea:focus,
.form-container .fluentform select:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(27,141,184,0.08);
}
.form-container .fluentform textarea {
  resize: vertical;
  min-height: 90px;
}
.form-container .fluentform .ff-btn-submit {
  width: 100%;
  padding: 0.875rem;
  background: var(--blue-600);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}
.form-container .fluentform .ff-btn-submit:hover {
  background: var(--blue-700);
}
.form-container .fluentform .ff-el-group {
  margin-bottom: 1rem;
}
.form-container .fluentform .ff-t-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-container .fluentform .ff-el-input--content input::placeholder,
.form-container .fluentform .ff-el-input--content textarea::placeholder {
  color: var(--gray-500);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--gray-950); color: var(--gray-400); padding: 4rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
.footer__brand-logo { height: 44px; width: auto; margin-bottom: 1rem; opacity: 0.9; }
.footer__brand p { font-size: 0.8125rem; color: var(--gray-400); max-width: 30ch; line-height: 1.6; }
.footer__heading { font-size: 0.75rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.25rem; }
.footer__links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; }
.footer__links a { font-size: 0.875rem; color: var(--gray-400); }
.footer__links a:hover { color: var(--white); }
.footer__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.footer__contact-icon { color: var(--blue-400); flex-shrink: 0; margin-top: 2px; }
.footer__contact-text { font-size: 0.8125rem; color: var(--gray-400); line-height: 1.6; }
.footer__contact-text a { color: var(--gray-400); }
.footer__contact-text a:hover { color: var(--white); }
.footer__socials { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.footer__social { width: 34px; height: 34px; border-radius: 6px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: var(--gray-400); transition: all 0.3s; }
.footer__social:hover { background: var(--blue-500); color: var(--white); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer__copyright { font-size: 0.8125rem; color: var(--gray-400); }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { font-size: 0.8125rem; color: var(--gray-400); }
.footer__legal a:hover { color: var(--gray-400); }

/* ============================================================
   MOBILE STICKY CTA BAR
   ============================================================ */
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; background: var(--white); border-top: 1px solid var(--gray-200); padding: 0.75rem 1rem; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); }
.mobile-cta__inner { display: flex; gap: 0.75rem; }
.mobile-cta__call, .mobile-cta__enquire { flex: 1; padding: 0.75rem; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.875rem; font-weight: 700; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; cursor: pointer; }
.mobile-cta__call { background: var(--white); color: var(--blue-600); border: 2px solid var(--blue-500); }
.mobile-cta__enquire { background: var(--blue-600); color: var(--white); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ============================================================
   SINGLE POST / BLOG
   ============================================================ */
.post-header { padding: 3.5rem 0 2.5rem; background: linear-gradient(170deg, var(--blue-50) 0%, var(--white) 60%); border-bottom: 1px solid var(--gray-200); }
.post-header__inner { max-width: 800px; }
.post-header__cat { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: var(--blue-600); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; padding: 0.25rem 0.75rem; background: rgba(35,153,213,0.08); border-radius: 100px; }
.post-header__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--blue-900); line-height: 1.2; margin-bottom: 1.25rem; letter-spacing: -0.02em; }
.post-header__meta { font-size: 0.8125rem; color: var(--gray-500); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.post-header__meta-sep { color: var(--gray-300); }

.post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; padding: 3rem 0; }

/* Blog post content - inherits rich content styling */
.post-content h2 {
  font-size: 1.375rem; font-weight: 700; color: var(--blue-900);
  margin: 2.75rem 0 1rem; padding: 0.75rem 0 0.75rem 1rem;
  border-left: 4px solid var(--blue-500); border-bottom: none;
  line-height: 1.3; background: linear-gradient(90deg, rgba(35,153,213,0.04) 0%, transparent 60%);
}
.post-content h2:first-child { margin-top: 0; }
.post-content h3 {
  font-size: 1.0625rem; font-weight: 700; color: var(--gray-900);
  margin: 2rem 0 0.75rem; line-height: 1.4;
  padding-left: 0.75rem; border-left: 3px solid var(--blue-200);
}
.post-content p {
  margin-bottom: 1.125rem; line-height: 1.85; color: var(--gray-600);
  font-size: 0.9375rem;
}
.post-content ul, .post-content ol {
  margin-bottom: 1.5rem; padding-left: 0; list-style: none;
}
.post-content li {
  margin-bottom: 0.625rem; line-height: 1.7; color: var(--gray-600);
  padding-left: 1.75rem; position: relative; font-size: 0.9375rem;
}
.post-content ul > li::before {
  content: '';
  position: absolute; left: 0; top: 0.45em;
  width: 14px; height: 14px;
  background: var(--blue-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
}
.post-content ol { counter-reset: ol-counter; }
.post-content ol > li { counter-increment: ol-counter; }
.post-content ol > li::before {
  content: counter(ol-counter);
  position: absolute; left: 0; top: 0.15em;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--blue-500); color: var(--white);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.post-content li strong { color: var(--gray-900); font-weight: 600; }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1.5rem 0; }
.post-content blockquote { border-left: 4px solid var(--blue-500); padding: 1rem 1.5rem; margin: 1.5rem 0; background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.post-content blockquote p { color: var(--blue-800); font-style: italic; margin-bottom: 0; }
.post-content a { color: var(--blue-600); text-decoration: underline; text-decoration-color: var(--blue-200); text-underline-offset: 2px; }
.post-content a:hover { text-decoration-color: var(--blue-600); }

/* Tables */
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.post-content thead { background: var(--blue-900); color: var(--white); }
.post-content th { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
.post-content td { padding: 0.75rem 1rem; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); }
.post-content tbody tr:nth-child(even) { background: var(--gray-50); }
.post-content tbody tr:hover { background: var(--blue-50); }
.post-content td:first-child { font-weight: 600; color: var(--gray-900); }

/* Blog post sidebar: use service-sidebar styles (shared template part) */
.post-layout .service-sidebar { position: sticky; top: 5rem; align-self: start; }

.post-featured-image { margin-bottom: 2.5rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(10,46,63,0.08); }
.post-featured-image img { width: 100%; height: auto; display: block; }

/* Intro paragraph: slightly larger first paragraph after featured image */
.post-content > p:first-child { font-size: 1.0625rem; line-height: 1.8; color: var(--gray-700); }

.post-author { display: flex; gap: 1.25rem; padding: 1.5rem 2rem; background: var(--gray-50); border-radius: var(--radius-lg); margin-top: 3rem; border: 1px solid var(--gray-200); }
.post-author__avatar, .post-author .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.post-author__name { font-weight: 700; color: var(--gray-900); margin-bottom: 0.125rem; font-size: 0.9375rem; }
.post-author__bio { font-size: 0.8125rem; color: var(--gray-500); line-height: 1.6; }

.post-related { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--gray-200); }
.post-related__title { font-size: 1.25rem; font-weight: 700; color: var(--blue-900); margin-bottom: 1.5rem; }

/* Sidebar */
.sidebar { position: sticky; top: 6rem; }
.sidebar__widget { margin-bottom: 2rem; padding: 1.5rem; background: var(--gray-50); border-radius: var(--radius-lg); }
.sidebar__widget-title { font-size: 0.875rem; font-weight: 700; color: var(--gray-900); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--blue-500); }
.sidebar__widget ul { list-style: none; }
.sidebar__widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--gray-200); }
.sidebar__widget li:last-child { border-bottom: none; }
.sidebar__widget a { font-size: 0.875rem; color: var(--gray-600); }
.sidebar__widget a:hover { color: var(--blue-600); }

/* ============================================================
   ARCHIVE / BLOG LISTING
   ============================================================ */
.archive-header { padding: 3rem 0 2rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.archive-header__title { margin-bottom: 0.5rem; }
.archive-header__desc { color: var(--gray-500); }

.archive-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding: 3rem 0; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; color: var(--gray-600); border: 1px solid var(--gray-200); transition: all 0.2s; text-decoration: none; }
.pagination a:hover { border-color: var(--blue-400); color: var(--blue-600); background: var(--blue-50); }
.pagination .current { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); }

/* ============================================================
   PAGE TEMPLATES
   ============================================================ */
.page-header { padding: 4rem 0 3rem; background: linear-gradient(170deg, var(--blue-50) 0%, var(--white) 60%); }
.page-header__title { margin-bottom: 1rem; }
.page-header__desc { font-size: 1.125rem; color: var(--gray-500); max-width: 60ch; }

.page-content { padding: 3rem 0 4rem; max-width: 760px; }
.page-content p { margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.75; color: var(--gray-600); }
.page-content h2 { margin: 2.5rem 0 1rem; font-size: 1.5rem; color: var(--gray-900); padding-bottom: 0.5rem; border-bottom: 1px solid var(--gray-200); }
.page-content h3 { margin: 2rem 0 0.75rem; font-size: 1.25rem; color: var(--gray-800); }
.page-content a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.page-content a:hover { color: var(--blue-800); }
.page-content ul, .page-content ol { margin: 1rem 0 1.5rem 1.5rem; color: var(--gray-600); }
.page-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.page-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.page-content thead { background: var(--blue-900); color: var(--white); }
.page-content th { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
.page-content td { padding: 0.75rem 1rem; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); }
.page-content tbody tr:nth-child(even) { background: var(--gray-50); }
.page-content tbody tr:hover { background: var(--blue-50); }
.page-content td:first-child { font-weight: 600; color: var(--gray-900); }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--blue-50); display: flex; align-items: center; justify-content: center; color: var(--blue-500); flex-shrink: 0; }
.contact-info__label { font-size: 0.8125rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.contact-info__text { font-size: 0.9375rem; color: var(--gray-700); line-height: 1.6; }
.contact-info__text a { color: var(--blue-600); }
.contact-map { border-radius: var(--radius-lg); overflow: hidden; margin-top: 2rem; }
.contact-map iframe { width: 100%; height: 300px; border: 0; }

/* About page */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.about-grid .post-content h2:first-child { margin-top: 0; }
.about-grid__image img { border-radius: var(--radius-xl); width: 100%; height: auto; }
.about-grid__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.about-grid__stat { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.75rem 1.25rem; text-align: center; }
.about-grid__stat-number { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--blue-500); line-height: 1; margin-bottom: 0.25rem; }
.about-grid__stat-label { font-size: 0.8125rem; color: var(--gray-500); line-height: 1.4; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.team-card { text-align: center; padding: 1.5rem; background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
.team-card__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 3px solid var(--blue-50); }
.team-card__avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--blue-500); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; margin: 0 auto 1rem; letter-spacing: 0.02em; }
.team-card__name { font-weight: 600; color: var(--gray-900); margin-bottom: 0.25rem; }
.team-card__role { font-size: 0.875rem; color: var(--blue-500); margin-bottom: 0.75rem; }
.team-card__bio { font-size: 0.8125rem; color: var(--gray-500); line-height: 1.6; }

/* About services */
.about-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.about-services__item { background: var(--white); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
.about-services__item h3 { font-size: 1rem; color: var(--gray-900); margin-bottom: 0.5rem; }
.about-services__item p { font-size: 0.875rem; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* About testimonials */
.about-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.about-testimonial { background: var(--white); padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--gray-200); }
.about-testimonial__quote { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.7; font-style: italic; margin: 0 0 1.25rem; border: 0; padding: 0; }
.about-testimonial__author { display: flex; flex-direction: column; gap: 0.125rem; }
.about-testimonial__author strong { font-size: 0.875rem; color: var(--gray-900); }
.about-testimonial__author span { font-size: 0.8125rem; color: var(--gray-500); }

/* Case studies page */
.case-study-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.case-study-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gray-200); transition: all 0.35s var(--ease-out); text-decoration: none; display: block; }
.case-study-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.case-study-card__thumb { height: 200px; overflow: hidden; }
.case-study-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.case-study-card__body { padding: 1.5rem; }
.case-study-card__industry { font-size: 0.6875rem; font-weight: 700; color: var(--blue-500); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.case-study-card__title { font-size: 1.125rem; font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; }
.case-study-card__excerpt { font-size: 0.875rem; color: var(--gray-500); line-height: 1.6; }

/* Service single page */
.service-single__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; }
.service-single__feature { padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--gray-200); }
.service-single__feature-title { font-weight: 600; color: var(--gray-900); margin-bottom: 0.5rem; }
.service-single__feature-desc { font-size: 0.875rem; color: var(--gray-500); }

/* Service page hero */
.service-hero { padding: 3rem 0 2rem; background: linear-gradient(135deg, var(--blue-900) 0%, #1a5276 100%); color: var(--white); }
.service-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.service-hero__content .rank-math-breadcrumb { font-size: 0.8125rem; opacity: 0.7; margin-bottom: 1rem; }
.service-hero__content .rank-math-breadcrumb a { color: var(--white); }
.service-hero__title { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--white); margin-bottom: 1rem; line-height: 1.2; }
.service-hero__desc { font-size: 1.0625rem; color: rgba(255,255,255,0.85); line-height: 1.7; margin-bottom: 1.5rem; }
.service-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.service-hero__actions .btn--outline { color: var(--white); border-color: rgba(255,255,255,0.4); }
.service-hero__actions .btn--outline:hover { border-color: var(--white); background: rgba(255,255,255,0.1); color: var(--white); }
.service-hero__image { border-radius: var(--radius-xl); overflow: hidden; }
.service-hero__image img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); }
.service-hero__placeholder { width: 100%; aspect-ratio: 4/3; background: rgba(255,255,255,0.08); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); }

/* Service hero figure/caption */
.service-hero__figure { margin: 0; }
.service-hero__figure img { border-radius: var(--radius-xl); }
.service-hero__caption { font-size: 0.75rem; color: rgba(255,255,255,0.5); text-align: center; margin-top: 0.5rem; font-style: italic; }

/* Service page layout */
.service-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; }

/* Service content typography - strong visual hierarchy */
.service-content h2 {
  font-size: 1.375rem; font-weight: 700; color: var(--blue-900);
  margin: 2.75rem 0 1rem; padding: 0.75rem 0 0.75rem 1rem;
  border-left: 4px solid var(--blue-500); border-bottom: none;
  line-height: 1.3; background: linear-gradient(90deg, rgba(35,153,213,0.04) 0%, transparent 60%);
}
.service-content h2:first-child { margin-top: 0; }
.service-content h3 {
  font-size: 1.0625rem; font-weight: 700; color: var(--gray-900);
  margin: 2rem 0 0.75rem; line-height: 1.4;
  padding-left: 0.75rem; border-left: 3px solid var(--blue-200);
}
.service-content p {
  margin-bottom: 1.125rem; line-height: 1.85; color: var(--gray-600);
  font-size: 0.9375rem; max-width: 65ch;
}
.service-content ul, .service-content ol {
  margin-bottom: 1.5rem; padding-left: 0; list-style: none;
}
.service-content li {
  margin-bottom: 0.625rem; line-height: 1.7; color: var(--gray-600);
  padding-left: 1.75rem; position: relative; font-size: 0.9375rem;
}
.service-content ul > li::before {
  content: '';
  position: absolute; left: 0; top: 0.45em;
  width: 14px; height: 14px;
  background: var(--blue-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center;
}
.service-content ol { counter-reset: ol-counter; }
.service-content ol > li { counter-increment: ol-counter; }
.service-content ol > li::before {
  content: counter(ol-counter);
  position: absolute; left: 0; top: 0.15em;
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--blue-500); color: var(--white);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.service-content li strong { color: var(--gray-900); font-weight: 600; }

/* Service content: style the TOC as a navigation card */
.service-content > h2:first-child,
.service-content > h2:first-of-type {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--blue-500); border-left: none; border-bottom: none;
  margin-bottom: 0.5rem; padding: 0; background: none; font-weight: 700;
}
.service-content > h2:first-child + ul,
.service-content > h2:first-of-type + ul {
  background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%);
  border: 1px solid var(--blue-100); border-left: 4px solid var(--blue-500);
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem; counter-reset: toc-counter;
}
.service-content > h2:first-child + ul li,
.service-content > h2:first-of-type + ul li {
  counter-increment: toc-counter; margin-bottom: 0.5rem;
  padding-left: 2rem; font-size: 0.875rem;
}
.service-content > h2:first-child + ul li::before,
.service-content > h2:first-of-type + ul li::before {
  content: counter(toc-counter); background: var(--blue-500);
  -webkit-mask: none; mask: none;
  color: var(--white); font-size: 0.6875rem; font-weight: 700;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  top: 0.2em;
}
.service-content > h2:first-child + ul li a,
.service-content > h2:first-of-type + ul li a { color: var(--blue-600); text-decoration: none; }
.service-content > h2:first-child + ul li a:hover,
.service-content > h2:first-of-type + ul li a:hover { color: var(--blue-800); text-decoration: underline; }

/* Summary / key takeaways card (last section) */
.service-content > h2:last-of-type { color: #166534; border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34,197,94,0.04) 0%, transparent 60%); }
.service-content > h2:last-of-type + ul {
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fdf8 100%);
  border: 1px solid #bbf7d0; border-left: 4px solid #22c55e;
  border-radius: var(--radius-lg); padding: 1.25rem 1.5rem;
}
.service-content > h2:last-of-type + ul li::before { background: #22c55e; }
.service-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.service-content thead { background: var(--blue-900); color: var(--white); }
.service-content th { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
.service-content td { padding: 0.75rem 1rem; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); }
.service-content tbody tr:nth-child(even) { background: var(--gray-50); }
.service-content tbody tr:hover { background: var(--blue-50); }
.service-content td:first-child { font-weight: 600; color: var(--gray-900); }

/* Mid-page CTA strip (between content and reviews) */
.service-cta-strip {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-900));
  padding: 2rem 0; text-align: center;
}
.service-cta-strip__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap;
}
.service-cta-strip__text {
  font-family: var(--font-display); font-size: 1.25rem;
  color: var(--white); font-weight: 600;
}
.service-cta-strip .btn--white {
  background: var(--white); color: var(--blue-900); font-weight: 600;
}
.service-cta-strip .btn--white:hover { background: var(--gray-100); }
.service-cta-strip .btn--ghost {
  color: var(--white); border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent;
}
.service-cta-strip .btn--ghost:hover {
  border-color: var(--white); background: rgba(255,255,255,0.1);
}

/* Service sidebar */
.service-sidebar { position: sticky; top: 5rem; align-self: start; display: flex; flex-direction: column; gap: 1.5rem; }
.service-sidebar__card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; }
.service-sidebar__card h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--gray-900); font-weight: 700; }
.service-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.service-sidebar__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--gray-600); }
.service-sidebar__list svg { flex-shrink: 0; }
.service-sidebar__articles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.service-sidebar__articles li { padding-bottom: 0.5rem; border-bottom: 1px solid var(--gray-100); }
.service-sidebar__articles li:last-child { border-bottom: none; padding-bottom: 0; }
.service-sidebar__articles a { font-size: 0.8125rem; color: var(--blue-600); line-height: 1.5; display: block; }
.service-sidebar__articles a:hover { color: var(--blue-800); }
.service-sidebar__cta { background: var(--blue-900); color: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; }
.service-sidebar__cta h3 { color: var(--white); font-size: 1rem; margin-bottom: 0.5rem; }
.service-sidebar__cta p { color: var(--blue-200); font-size: 0.875rem; margin-bottom: 1rem; }
.service-sidebar__phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--blue-200); font-size: 0.875rem; margin-top: 0.75rem; }
.service-sidebar__phone:hover { color: var(--white); }
.service-sidebar__phone svg { fill: currentColor; }

/* Related service cards (legacy, kept for backward compat) */
.related-service-card { display: flex; align-items: center; justify-content: space-between; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; text-decoration: none; transition: all 0.25s var(--ease-out); }
.related-service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blue-200); }
.related-service-card__title { font-weight: 600; color: var(--gray-900); font-size: 0.9375rem; }
.related-service-card svg { color: var(--blue-500); flex-shrink: 0; }

/* 3-column service grid for related services */
.services__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Google rating in sidebar */
.service-sidebar__google-rating { font-weight: 600; color: var(--gray-800); }
.service-sidebar__stars { color: #FBBC05; font-size: 0.9375rem; letter-spacing: 1px; }

.related-services { margin-top: 3rem; }
.related-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }

/* Case study single */
.case-study-single__sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 3rem 0; }
.case-study-single__section { padding: 2rem; background: var(--gray-50); border-radius: var(--radius-lg); }
.case-study-single__section-title { font-size: 0.75rem; font-weight: 700; color: var(--blue-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.case-study-single__quote { padding: 2rem; background: var(--blue-50); border-left: 3px solid var(--blue-500); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 2rem 0; }
.case-study-single__quote p { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--blue-800); margin-bottom: 0.5rem; }
.case-study-single__quote cite { font-size: 0.875rem; font-weight: 600; color: var(--gray-600); font-style: normal; }

/* 404 page */
.error-404 { text-align: center; padding: 6rem 0; }
.error-404__code { font-family: var(--font-display); font-size: clamp(6rem, 15vw, 10rem); color: var(--gray-200); line-height: 1; margin-bottom: 1rem; }
.error-404__title { margin-bottom: 1rem; }
.error-404__desc { color: var(--gray-500); margin-bottom: 2rem; max-width: 50ch; margin-left: auto; margin-right: auto; }
.error-404__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Search form */
.search-form { display: flex; gap: 0.75rem; max-width: 480px; }
.search-form__input { flex: 1; padding: 0.75rem 1rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.9375rem; color: var(--gray-800); outline: none; transition: border-color 0.2s; }
.search-form__input:focus { border-color: var(--blue-400); }
.search-form__submit { padding: 0.75rem 1.5rem; background: var(--blue-600); color: var(--white); border: none; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; cursor: pointer; transition: background 0.2s; }
.search-form__submit:hover { background: var(--blue-700); }

/* ============================================================
   COOKIE CONSENT
   ============================================================ */
.cookie-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--gray-900); color: var(--gray-300); padding: 1.25rem 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.cookie-consent__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cookie-consent__text { font-size: 0.875rem; line-height: 1.6; flex: 1; min-width: 300px; }
.cookie-consent__text a { color: var(--blue-300); text-decoration: underline; }
.cookie-consent__buttons { display: flex; gap: 0.75rem; flex-shrink: 0; }
.cookie-consent__btn { padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.cookie-consent__btn--accept { background: #0B7D74; color: var(--white); }
.cookie-consent__btn--accept:hover { background: #0A7269; }
.cookie-consent__btn--reject { background: transparent; color: var(--gray-400); border: 1px solid var(--gray-600); }
.cookie-consent__btn--reject:hover { border-color: var(--gray-400); color: var(--gray-300); }

/* ============================================================
   GOOGLE REVIEWS CAROUSEL
   Replaces WP Social Ninja plugin. Pure CSS + vanilla JS.
   ============================================================ */

/* Carousel wrapper */
.reviews__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Track holds the visible cards in a 3-column grid */
.reviews__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

/* Arrows */
.reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-sm);
}
.reviews__arrow:hover {
  border-color: var(--blue-300);
  color: var(--blue-600);
  box-shadow: var(--shadow-md);
}
.reviews__arrow--prev { left: -20px; }
.reviews__arrow--next { right: -20px; }

/* Pagination dots */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--gray-300);
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.reviews__dot.active {
  background: var(--blue-500);
  transform: scale(1.25);
}
.reviews__dot:hover {
  background: var(--blue-400);
}

/* "Read all reviews" link */
.reviews__footer {
  text-align: center;
  margin-top: 1.5rem;
}
.reviews__read-all {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-600);
}
.reviews__read-all:hover {
  color: var(--blue-800);
}

/* Avatar image (Google profile photo) */
.review-card__avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__grid, .why__grid, .cta-section__grid, .faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__image { max-width: 550px; margin: 0 auto; }
  .faq__content { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .post-layout, .archive-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .case-study-single__sections { grid-template-columns: 1fr; }
  .reviews__arrow--prev { left: -12px; }
  .reviews__arrow--next { right: -12px; }
}
@media (max-width: 768px) {
  .topbar { display: none; }
  .nav__links { display: none; }
  .nav__phone { display: none; }
  .nav__hamburger { display: block; }
  .mobile-nav { display: flex; }
  .mobile-cta { display: block; }
  body { padding-bottom: 72px; }
  .hero { padding: 2rem 0 2.5rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__phone-link { text-align: center; }
  .services__grid, .videos__grid, .reviews__grid, .articles__grid { grid-template-columns: 1fr; }
  .sectors__grid { grid-template-columns: repeat(3, 1fr); }
  .why__stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .cta-strip__inner { flex-direction: column; gap: 1rem; }
  .section { padding: 2.5rem 0; }
  .section--lg { padding: 3rem 0; }
  .trust { padding: 1.25rem 0; }
  .trust__logos { gap: 1rem; }
  .trust__logo { height: 28px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .about-services__grid { grid-template-columns: repeat(2, 1fr); }
  .about-testimonials { grid-template-columns: 1fr; }
  .case-study-grid { grid-template-columns: 1fr; }
  .service-single__features { grid-template-columns: 1fr; }
  .service-hero__inner { grid-template-columns: 1fr; }
  .service-hero__image { display: none; }
  .service-layout { grid-template-columns: 1fr; }
  .service-sidebar { position: static; }
  .service-sidebar__cta { display: none; } /* Full-width CTA strip handles this on mobile */
  .service-content p { max-width: none; }
  .service-cta-strip__inner { flex-direction: column; gap: 1rem; }
  .post-content table, .page-content table, .service-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-content th, .page-content th, .service-content th { white-space: nowrap; }
  .post-content td, .page-content td, .service-content td { min-width: 120px; }
  .related-services__grid { grid-template-columns: 1fr; }
  .services__grid--3 { grid-template-columns: 1fr; }
  .reviews__track {
    grid-template-columns: 1fr;
  }
  .reviews__arrow {
    display: none; /* dots are sufficient on mobile */
  }
}
@media (max-width: 480px) {
  .why__stats { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero__proof { flex-direction: column; gap: 0.5rem; }
  .sectors__grid { grid-template-columns: repeat(2, 1fr); }
  .areas__links { gap: 0.375rem; }
  .team-grid { grid-template-columns: 1fr; }
  .about-services__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   DARK-ON-DARK CONTRAST SAFETY NET
   Forces readable text colours on ALL dark-background sections.
   Global headings (h1-h3: color: var(--gray-900)) and paragraph
   (p: color: var(--gray-600)) rules cause dark-on-dark contrast
   issues inside dark-bg sections. This block overrides them.

   Dark-bg sections covered:
   - .topbar              background: var(--blue-900)
   - .why                 background: var(--blue-900)
   - .cta-strip           background: linear-gradient(blue-700, blue-900)
   - .cta-section         background: var(--blue-900)
   - .service-hero        background: linear-gradient(blue-900, #1a5276)
   - .service-cta-strip   background: linear-gradient(blue-700, blue-900)
   - .service-sidebar__cta background: var(--blue-900)
   - .footer              background: var(--gray-950)
   - .cookie-consent      background: var(--gray-900)

   Any new dark-bg component MUST be added here.
   ============================================================ */

/* --- Headings: white on dark --- */
.topbar h1, .topbar h2, .topbar h3, .topbar h4, .topbar h5, .topbar h6,
.why h1, .why h2, .why h3, .why h4, .why h5, .why h6,
.cta-strip h1, .cta-strip h2, .cta-strip h3, .cta-strip h4, .cta-strip h5, .cta-strip h6,
.cta-section h1, .cta-section h2, .cta-section h3, .cta-section h4, .cta-section h5, .cta-section h6,
.service-hero h1, .service-hero h2, .service-hero h3, .service-hero h4, .service-hero h5, .service-hero h6,
.service-cta-strip h1, .service-cta-strip h2, .service-cta-strip h3, .service-cta-strip h4, .service-cta-strip h5, .service-cta-strip h6,
.service-sidebar__cta h1, .service-sidebar__cta h2, .service-sidebar__cta h3, .service-sidebar__cta h4, .service-sidebar__cta h5, .service-sidebar__cta h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.cookie-consent h1, .cookie-consent h2, .cookie-consent h3, .cookie-consent h4, .cookie-consent h5, .cookie-consent h6 {
  color: var(--white) !important;
}

/* --- Body text (p, li, span, cite, blockquote, label, dd, dt, figcaption): light on dark --- */
.topbar p, .topbar li, .topbar span, .topbar label, .topbar cite, .topbar blockquote, .topbar dd, .topbar dt, .topbar figcaption,
.why p, .why li, .why span, .why label, .why cite, .why blockquote, .why dd, .why dt, .why figcaption,
.cta-strip p, .cta-strip li, .cta-strip span, .cta-strip label, .cta-strip cite, .cta-strip blockquote,
.cta-section p, .cta-section li, .cta-section span, .cta-section label, .cta-section cite, .cta-section blockquote,
.service-hero p, .service-hero li, .service-hero span, .service-hero label, .service-hero cite, .service-hero blockquote, .service-hero figcaption,
.service-cta-strip p, .service-cta-strip li, .service-cta-strip span, .service-cta-strip label, .service-cta-strip cite,
.service-sidebar__cta p, .service-sidebar__cta li, .service-sidebar__cta span, .service-sidebar__cta label,
.footer p, .footer li, .footer span, .footer label, .footer cite, .footer blockquote, .footer dd, .footer dt,
.cookie-consent p, .cookie-consent li, .cookie-consent span, .cookie-consent label {
  color: rgba(255,255,255,0.75) !important;
}

/* --- Strong/bold: slightly brighter than body text --- */
.topbar strong, .topbar b,
.why strong, .why b,
.cta-strip strong, .cta-strip b,
.cta-section strong, .cta-section b,
.service-hero strong, .service-hero b,
.service-cta-strip strong, .service-cta-strip b,
.service-sidebar__cta strong, .service-sidebar__cta b,
.footer strong, .footer b,
.cookie-consent strong, .cookie-consent b {
  color: var(--white) !important;
}

/* --- Links: visible accent colour on dark, white on hover --- */
.topbar a, .why a, .cta-strip a, .cta-section a,
.service-hero a, .service-cta-strip a, .service-sidebar__cta a,
.footer a, .cookie-consent a {
  color: var(--blue-200) !important;
}
.topbar a:hover, .why a:hover, .cta-strip a:hover, .cta-section a:hover,
.service-hero a:hover, .service-cta-strip a:hover, .service-sidebar__cta a:hover,
.footer a:hover, .cookie-consent a:hover {
  color: var(--white) !important;
}

/* --- Buttons: override link colour for buttons inside dark sections --- */
.cta-strip .btn--white, .service-cta-strip .btn--white {
  color: var(--blue-900) !important;
}
.cta-strip .btn--white-outline, .service-cta-strip .btn--ghost {
  color: var(--white) !important;
}
.service-hero .btn--primary {
  color: var(--white) !important;
}
.service-hero .btn--outline {
  color: var(--white) !important;
}
.service-sidebar__cta .btn--primary,
.service-sidebar__cta .btn--white {
  color: var(--white) !important;
}
.cta-section .btn--primary {
  color: var(--white) !important;
}

/* --- Input placeholders inside dark sections --- */
.cta-section input::placeholder, .cta-section textarea::placeholder,
.service-sidebar__cta input::placeholder {
  color: var(--gray-400) !important;
}

/* --- Breadcrumbs on service hero --- */
.service-hero .rank-math-breadcrumb,
.service-hero .rank-math-breadcrumb p,
.service-hero .rank-math-breadcrumb span,
.service-hero .rank-math-breadcrumb a {
  color: var(--white) !important;
  opacity: 0.7;
}
.service-hero .rank-math-breadcrumb a:hover {
  opacity: 1;
}
.service-hero .rank-math-breadcrumb .separator {
  color: rgba(255,255,255,0.5) !important;
}

/* --- Preserve existing specific colours that are already correct --- */
/* .why section already has specific selectors (lines 287-316) */
.why__eyebrow { color: var(--blue-300) !important; }
.why__title { color: var(--white) !important; }
.why__desc { color: var(--blue-200) !important; }
.why__feature-title { color: var(--white) !important; }
.why__feature-desc { color: var(--blue-200) !important; }
.why__testimonial p { color: var(--blue-100) !important; }
.why__testimonial span { color: var(--blue-300) !important; }
.why__stat-number { color: var(--accent) !important; }
.why__stat-label { color: var(--blue-200) !important; }

/* .cta-section already has specific selectors */
.cta-section__title { color: var(--white) !important; }
.cta-section__desc { color: var(--blue-200) !important; }
.cta-section__proof-item { color: var(--blue-200) !important; }

/* .cta-strip / .service-cta-strip already have white text */
.cta-strip__text { color: var(--white) !important; }
.service-cta-strip__text { color: var(--white) !important; }

/* .service-hero already has specific selectors */
.service-hero__title { color: var(--white) !important; }
.service-hero__desc { color: rgba(255,255,255,0.85) !important; }
.service-hero__caption { color: rgba(255,255,255,0.5) !important; }

/* .service-sidebar__cta already has specific selectors */
.service-sidebar__cta h3 { color: var(--white) !important; }
.service-sidebar__cta p { color: var(--blue-200) !important; }
.service-sidebar__phone { color: var(--blue-200) !important; }
.service-sidebar__phone:hover { color: var(--white) !important; }

/* .footer already has specific selectors for most elements */
.footer__heading { color: var(--white) !important; }
.footer__brand p { color: var(--gray-400) !important; }
.footer__links a { color: var(--gray-400) !important; }
.footer__links a:hover { color: var(--white) !important; }
.footer__contact-text { color: var(--gray-400) !important; }
.footer__contact-text a { color: var(--gray-400) !important; }
.footer__contact-text a:hover { color: var(--white) !important; }
.footer__copyright { color: var(--gray-400) !important; }
.footer__legal a { color: var(--gray-400) !important; }
.footer__legal a:hover { color: var(--white) !important; }

/* .cookie-consent already has some styling */
.cookie-consent__text { color: var(--gray-300) !important; }
.cookie-consent__text a { color: var(--blue-300) !important; }

/* .topbar already has specific selectors */
.topbar__item { color: var(--blue-200) !important; }
.topbar__item a { color: var(--white) !important; }

/* --- Form container inside dark section (white card) --- */
/* The .form-container is a white card inside .cta-section - undo dark overrides */
.cta-section .form-container,
.cta-section .form-container h1, .cta-section .form-container h2,
.cta-section .form-container h3, .cta-section .form-container h4 {
  color: var(--gray-900) !important;
}
.cta-section .form-container p,
.cta-section .form-container li,
.cta-section .form-container span,
.cta-section .form-container label {
  color: var(--gray-700) !important;
}
.cta-section .form-container a {
  color: var(--blue-600) !important;
}
.cta-section .form-container a:hover {
  color: var(--blue-800) !important;
}
.cta-section .form-container strong {
  color: var(--gray-800) !important;
}
.cta-section .form-container input,
.cta-section .form-container textarea,
.cta-section .form-container select {
  color: var(--gray-800) !important;
}
.cta-section .form-container .ff-btn-submit,
.cta-section .form-container .form-submit {
  color: var(--white) !important;
}
.form-container__title {
  color: var(--gray-900) !important;
}

/* ============================================================
   FLUENT FORMS SUCCESS MESSAGE
   Default FF styling has no text colour, causing the message
   to inherit light grey that is hard to read. Force dark text
   and a clear green success appearance.
   ============================================================ */
.fluentform .ff-message-success,
.form-container .ff-message-success,
.ff-message-success {
  color: #15803d !important;
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  border-radius: 8px !important;
  padding: 1.25rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}
.fluentform .ff-message-success p,
.form-container .ff-message-success p,
.ff-message-success p {
  color: #15803d !important;
  margin: 0 !important;
  font-size: 1rem !important;
}