/*
  Theme Name: J-Tech Roofing
  Description: John Bryan Roofing (J-Tech Roofing) — Grimsby, North East Lincolnshire
  Version: 3.0
*/

/* ═══════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════ */
:root {
  /* Brand colours */
  --navy:    #0B2D5B;
  --navy2:   #133E78;
  --orange:  #F58220;
  --orange2: #FF9B2F;
  --white:   #ffffff;
  --grey:    #F4F6F8;
  --dark:    #1F2937;
  --muted:   #6B7280;
  --border:  #E5E7EB;

  /* Derived */
  --orange-soft: #FFF7F0;
  --navy-light:  #1A3F7A;

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --section-gap: 80px;
  --card-radius: 12px;
  --radius:      8px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);

  /* Transitions */
  --t: .18s ease;
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden;
}

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

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--dark);
}

p { max-width: 70ch; }

/* ═══════════════════════════════════════
   UTILITIES
═══════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

.sec-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid #fde8cc;
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.sec-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.12;
  margin-bottom: 16px;
}
.sec-h2 b { color: var(--orange); font-weight: 900; }

.sec-p {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 8px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: var(--t);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.btn-orange {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-orange:hover {
  background: var(--orange2);
  border-color: var(--orange2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,130,32,.35);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline-navy:hover {
  background: var(--navy);
  color: #fff;
}

/* Fade-up animation — minimal, snappy */
.fu {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease-out, transform .22s ease-out;
  will-change: opacity, transform;
}
.fu.visible {
  opacity: 1;
  transform: none;
}

/* No stagger — all elements snap in together for smoothness */
.fu:nth-child(2),
.fu:nth-child(3),
.fu:nth-child(4),
.fu:nth-child(5),
.fu:nth-child(6) { transition-delay: 0s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1; transform: none; transition: none; }
  .hero-slide { animation: none !important; opacity: 0; }
  .hero-slide:first-child { opacity: 1; }
  .pf-card img,
  .team-img-card img { transition: none; }
  .pf-card:hover img,
  .team-img-card:hover img { transform: none; }
}

/* Image rendering — fade in once loaded */
img {
  background-color: var(--grey);
}
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .25s ease-out;
}
img[loading="lazy"].img-loaded,
img[loading="eager"] {
  opacity: 1;
}

/* ═══════════════════════════════════════
   TOP BAR
═══════════════════════════════════════ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy);
  color: rgba(255,255,255,.8);
  font-size: .78rem;
  font-weight: 500;
  padding: 7px 24px;
}
.top-bar a {
  color: var(--orange2);
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t);
}
.top-bar a:hover { color: #fff; }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy2);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: background var(--t);
}
#navbar.scrolled { background: var(--navy); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
  height: 66px;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  width: auto;
  height: 44px;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  padding: 8px 12px;
  border-radius: 6px;
  transition: var(--t);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; background: rgba(255,255,255,.1); }

.nav-phone {
  display: flex !important;
  align-items: center;
  gap: 7px;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: var(--radius) !important;
  margin-left: 8px;
}
.nav-phone:hover {
  background: var(--orange2) !important;
  transform: translateY(-1px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--t);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mob-menu {
  display: none;
  flex-direction: column;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.1);
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: var(--t);
}
.mob-menu a:hover,
.mob-menu a.active { color: #fff; background: rgba(255,255,255,.08); }
.mob-menu-cta {
  padding: 16px 24px;
  background: rgba(0,0,0,.2);
}
.mob-menu-cta a {
  display: inline-flex !important;
  background: var(--orange) !important;
  color: #fff !important;
  padding: 12px 22px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  font-size: .92rem !important;
}

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
}

/* Hero slideshow: 3 images fade across 30s */
.hero-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 30s infinite ease-in-out;
  will-change: opacity;
}
.hero-slide:nth-child(1) { animation-delay: -1s; opacity: 1; }
.hero-slide:nth-child(2) { animation-delay: 9s; }
.hero-slide:nth-child(3) { animation-delay: 19s; }
@keyframes heroFade {
  0%     { opacity: 0; }
  3.33%  { opacity: 1; }
  33.33% { opacity: 1; }
  36.66% { opacity: 0; }
  100%   { opacity: 0; }
}

.hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(11,45,91,.92) 0%,
    rgba(11,45,91,.78) 40%,
    rgba(11,45,91,.45) 75%,
    rgba(11,45,91,.20) 100%
  );
}

.hero-body {
  position: relative;
  z-index: 2;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 80px 24px;
}

.hero-inner {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: center;
}

.hero-tag {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange2);
  margin-bottom: 14px;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.0;
  margin-bottom: 20px;
}
.hero-h1 b { color: var(--orange2); font-weight: 900; display: block; }

.hero-desc {
  font-size: 1.12rem;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 28px;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.hs-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--orange2);
  line-height: 1;
}
.hs-lab {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}

/* Hero contact card */
.hero-card {
  background: rgba(255,255,255,.97);
  border-radius: var(--card-radius);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}
.hcard-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}
.hcard-sub {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.hcard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: var(--t);
  margin-bottom: 10px;
}
.hcard-btn.phone {
  background: var(--orange);
  color: #fff;
}
.hcard-btn.phone:hover {
  background: var(--orange2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245,130,32,.3);
}
.hcard-btn.email {
  background: var(--grey);
  color: var(--navy);
  border: 1px solid var(--border);
}
.hcard-btn.email:hover {
  background: var(--border);
}
.hcard-divider {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
  margin: 10px 0 12px;
  gap: 12px;
}
.hcard-divider::before,
.hcard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.hcard-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  justify-content: center;
}
.hcard-trust-badge {
  font-size: .72rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 10px;
}

/* ═══════════════════════════════════════
   TRUST STRIP
═══════════════════════════════════════ */
.trust-strip {
  background: var(--navy);
  padding: 16px 24px;
  overflow: hidden;
  border-top: 2px solid var(--orange);
}

.trust-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.ts-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  border-right: 1px solid rgba(255,255,255,.15);
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.ts-item:last-child { border-right: none; }

.ts-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ts-label { font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: #fff; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ts-sub { font-size: .7rem; color: rgba(255,255,255,.55); margin-top: 1px; white-space: nowrap; }

/* Mobile trust slider (autoplay) */
.trust-slider-wrap { display: none; overflow: hidden; }
.trust-slider-track {
  display: flex;
  gap: 0;
  animation: trustScroll 22s linear infinite;
  width: max-content;
}
.ts-slide {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
}
@keyframes trustScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════
   SECTION: WHAT WE DO
═══════════════════════════════════════ */
.what-we-do {
  padding: var(--section-gap) 24px;
  max-width: 1300px;
  margin: 0 auto;
}
.wwd-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.wwd-intro .sec-p { margin: 0 auto; }

.wwd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wwd-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.wwd-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--orange);
  text-decoration: none;
  color: inherit;
}
.wwd-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.wwd-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.wwd-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wwd-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.wwd-desc {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
}
.wwd-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
  transition: gap var(--t), color var(--t);
  align-self: flex-start;
}
.wwd-card:hover .wwd-link { gap: 9px; color: var(--orange-dark, #d9700d); }

/* ═══════════════════════════════════════
   SECTION: ABOUT INTRO (home page)
═══════════════════════════════════════ */
.about-intro {
  background: var(--grey);
  padding: var(--section-gap) 24px;
}
.ai-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ai-img-main {
  width: 100%;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  object-fit: cover;
}
.ai-img-sm {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 3/2;
  object-fit: cover;
}
.ai-check-list { display: grid; gap: 10px; margin-top: 20px; }
.ai-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--dark);
}
.ai-check-icon {
  width: 18px;
  height: 18px;
  background: var(--orange);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-check-icon svg { width: 10px; height: 10px; }

/* ═══════════════════════════════════════
   SECTION: GOOGLE REVIEWS (home)
═══════════════════════════════════════ */
.reviews-sec {
  padding: var(--section-gap) 0;
  overflow: hidden;
}
.reviews-sec .wrap { padding-bottom: 0; }

.rev-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.rev-score-block {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rev-big {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
.rev-stars-row { font-size: 1.5rem; color: #f5a623; letter-spacing: .04em; }
.rev-meta { font-size: .8rem; color: var(--muted); margin-top: 3px; }

.rev-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: var(--t);
  flex-shrink: 0;
  align-self: flex-start;
}
.rev-google-badge:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
}

/* Desktop grid */
.rev-grid-desktop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.rev-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: var(--t);
}
.rev-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.rev-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rev-stars-sm { font-size: 1rem; color: #f5a623; letter-spacing: .06em; }
.rev-source-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--grey);
  border-radius: 99px;
  padding: 2px 9px;
}
.rev-quote {
  font-size: .95rem;
  color: var(--dark);
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 16px;
}
.rev-author-row { display: flex; align-items: center; gap: 10px; }
.rev-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.rev-name { font-size: .9rem; font-weight: 700; color: var(--dark); }
.rev-loc { font-size: .78rem; color: var(--muted); }

/* Mobile slider */
.rev-slider-wrap { display: none; overflow: hidden; padding-bottom: 4px; }
.rev-track { display: flex; gap: 16px; transition: transform .3s ease; }
.rev-track .rev-card { flex: 0 0 calc(100vw - 64px); min-width: 0; }

.rev-nav {
  display: none;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 4px;
}
.rev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background var(--t);
}
.rev-dot.active { background: var(--orange); }

/* ═══════════════════════════════════════
   SECTION: PROCESS — circle steps
═══════════════════════════════════════ */
.process-sec {
  background: var(--grey);
  padding: var(--section-gap) 24px;
  text-align: center;
}
.process-sec .wrap { max-width: 1300px; }
.process-sec .sec-h2,
.process-sec .sec-p { margin-left: auto; margin-right: auto; }

.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  position: relative;
}
/* Connector line */
.proc-grid::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 8px, transparent 8px 14px);
  opacity: .35;
  z-index: 0;
}

.proc-step {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 8px;
}
.proc-num {
  width: 70px;
  height: 70px;
  background: #fff;
  border: 3px solid var(--orange);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--orange);
  margin: 0 auto 18px;
  position: relative;
  box-shadow: 0 4px 14px rgba(245,130,32,.18);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.proc-step:hover .proc-num {
  background: var(--orange);
  color: #fff;
  transform: translateY(-3px);
}
.proc-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.proc-desc { font-size: .9rem; color: var(--muted); line-height: 1.6; max-width: 100%; margin: 0 auto; }

/* ═══════════════════════════════════════
   SECTION: FAQ — centered with left-aligned content
═══════════════════════════════════════ */
.faq-sec {
  padding: var(--section-gap) 24px;
}
.faq-sec .wrap { max-width: 1300px; text-align: center; }
.faq-sec .sec-h2,
.faq-sec .sec-p { text-align: center; margin-left: auto; margin-right: auto; }

.faq-grid {
  max-width: 800px;
  margin: 36px auto 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover { border-color: #d0d8e0; }
.faq-item.open { box-shadow: 0 4px 18px rgba(11,45,91,.06); border-color: #c8d2dd; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
  transition: background var(--t);
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: left;
}
.faq-q:hover { background: var(--grey); }

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grey);
  color: var(--orange);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background var(--t), color var(--t), transform var(--t);
}
.faq-item.open .faq-icon {
  background: var(--orange);
  color: #fff;
  transform: rotate(45deg);
}

.faq-a {
  display: none;
  padding: 0 22px 18px;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.7;
  text-align: left;
}
.faq-item.open .faq-a { display: block; }

.faq-cta { margin-top: 32px; text-align: center; }

/* ═══════════════════════════════════════
   CTA STRIP
═══════════════════════════════════════ */
.cta-strip {
  background: var(--navy);
  padding: 64px 24px;
  text-align: center;
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}
.cta-strip h2 b { color: var(--orange2); font-weight: 900; }
.cta-strip p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  margin: 0 auto 28px;
  max-width: 560px;
}
.cta-strip-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background: #0A2247;
  padding: 64px 24px 0;
}
.foot-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot-logo { margin-bottom: 14px; }
.foot-logo img {
  width: auto;
  height: 48px;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
.foot-desc { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 16px; max-width: 100%; }
.foot-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: rgba(255,255,255,.9);
  margin-bottom: 8px;
}
.foot-contact-row a { color: #fff; transition: color var(--t); font-weight: 600; }
.foot-contact-row a:hover { color: var(--orange2); }
.foot-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 6px 12px;
  transition: var(--t);
}
.foot-social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.foot-col-h {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}
.foot-links { display: flex; flex-direction: column; gap: 10px; }
.foot-links a {
  font-size: .9rem;
  color: rgba(255,255,255,.85);
  transition: color var(--t), padding var(--t);
  display: flex;
  align-items: center;
  gap: 6px;
}
.foot-links a:hover { color: var(--orange2); padding-left: 4px; }
.foot-bottom {
  max-width: 1300px;
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.foot-copy { font-size: .82rem; color: rgba(255,255,255,.7); }
.foot-by { font-size: .82rem; color: rgba(255,255,255,.7); }
.foot-by a { color: #fff; transition: color var(--t); font-weight: 600; }
.foot-by a:hover { color: var(--orange2); }

/* ═══════════════════════════════════════
   PAGE HERO (inner pages) — blueprint paper feel
═══════════════════════════════════════ */
.ph {
  background: linear-gradient(180deg, #0a2750 0%, var(--navy) 100%);
  padding: 80px 24px 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Blueprint grid — minor grid */
.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
/* Blueprint grid — major grid every 5 cells */
.ph::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 200px 200px;
  pointer-events: none;
}
.ph-tag {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange2);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.ph h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.ph h1 b { color: var(--orange2); font-weight: 900; }
.ph p {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════ */
.about-story { padding: var(--section-gap) 24px; }
.ast-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.ast-photo-wrap { position: relative; }
.ast-photo {
  width: 100%;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  object-fit: cover;
}
.ast-name-card {
  position: absolute;
  bottom: -20px;
  left: 20px;
  right: 20px;
  background: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ast-name-avatar {
  width: 42px;
  height: 42px;
  background: var(--orange);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.ast-name { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--navy); text-transform: uppercase; }
.ast-role { font-size: .8rem; color: var(--muted); }
.ast-stars { color: #f5a623; font-size: .85rem; letter-spacing: .08em; }
.ast-check-list { display: grid; gap: 12px; margin-top: 22px; }
.ast-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .95rem;
  color: var(--dark);
  line-height: 1.5;
}
.ast-ck {
  width: 24px;
  height: 24px;
  background: var(--orange);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(245,130,32,.3);
}

/* About team images */
.about-team { padding: var(--section-gap) 24px; background: var(--grey); }
.team-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.team-img-card {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
  cursor: pointer;
}
.team-img-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.team-img-card:hover img { transform: scale(1.06); }
.team-img-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(11,45,91,.85));
  padding: 28px 16px 14px;
}
.team-cap-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; text-transform: uppercase; }
.team-cap-sub { font-size: .78rem; color: rgba(255,255,255,.7); }

/* Values */
.values-sec { padding: var(--section-gap) 24px; text-align: center; }
.values-sec .wrap { max-width: 1300px; }
.val-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}
.val-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px;
  transition: var(--t);
}
.val-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.val-icon { font-size: 1.8rem; margin-bottom: 12px; }
.val-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--navy); text-transform: uppercase; margin-bottom: 8px; }
.val-text { font-size: .9rem; color: var(--muted); line-height: 1.65; }

/* Accreditations */
.accred { background: var(--grey); padding: 28px 24px; }
.accred-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.accred-label {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 6px;
}
.accred-badge {
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 14px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════ */
.all-svcs { padding: var(--section-gap) 24px; }
.all-svcs .wrap { max-width: 1300px; text-align: center; }

.svcs-featured {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  text-align: left;
}
.svc-featured-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--t);
  display: flex;
  flex-direction: column;
}
.svc-featured-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.svc-featured-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.svc-featured-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.svc-featured-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.svc-featured-desc { font-size: .92rem; color: var(--muted); line-height: 1.65; margin-bottom: 18px; flex: 1; max-width: 100%; }

/* Info panels */
.svc-info-panels { background: var(--grey); padding: var(--section-gap) 24px; }
.svc-panels-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.svc-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 28px;
}
.svc-panel-h {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.svc-panel ul { display: grid; gap: 9px; }
.svc-panel li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .92rem;
  color: var(--dark);
}
.svc-panel li::before {
  content: '✓';
  color: var(--orange);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ═══════════════════════════════════════
   REVIEWS PAGE
═══════════════════════════════════════ */
.rev-page-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 60px 24px;
  text-align: center;
}
.rev-page-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rev-score-big {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.rev-score-stars { font-size: 2rem; color: #f5a623; letter-spacing: .08em; }
.rev-score-label { font-size: .88rem; color: rgba(255,255,255,.6); margin-top: 4px; }
.rev-score-count { font-size: .82rem; color: rgba(255,255,255,.45); }

.rev-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1300px;
  margin: 48px auto 0;
  padding: 0 24px;
}

/* Credibility strip */
.rev-cred-strip {
  background: var(--grey);
  padding: 48px 24px;
}
.rev-cred-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.rev-cred-item { padding: 24px 16px; }
.rev-cred-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 6px;
}
.rev-cred-label {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Coverage map */
.rev-map-sec {
  padding: var(--section-gap) 24px;
}
.rev-map-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.rev-map-embed {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.rev-map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.rev-coverage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.rev-coverage-tag {
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 14px;
}

/* ═══════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════ */
.contact-page { padding: var(--section-gap) 24px; }
.contact-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}
.contact-form-col { flex: 1; }
.contact-info-col { display: grid; gap: 20px; }
.contact-info-card {
  background: var(--grey);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px;
}
.contact-info-card-h {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .92rem;
  color: var(--dark);
}
.contact-detail a { color: var(--navy); font-weight: 600; }
.contact-detail a:hover { color: var(--orange); }
.contact-map {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: 8px;
  aspect-ratio: 4/3;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-hours { font-size: .88rem; color: var(--muted); line-height: 1.8; }
.contact-cta-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.coverage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.coverage-tag {
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 12px;
}

/* WPForms placeholder */
.wpforms-placeholder {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.wpforms-placeholder h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wpforms-placeholder p {
  font-size: .9rem;
  color: var(--muted);
  margin-bottom: 20px;
  max-width: 100%;
}

/* Fake WPForms fields for preview */
.wf-field { margin-bottom: 16px; }
.wf-label { display: block; font-size: .82rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.wf-label span { color: var(--orange); }
.wf-input, .wf-select, .wf-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--dark);
  background: var(--grey);
  transition: border-color var(--t);
  -webkit-appearance: none;
  appearance: none;
}
.wf-input:focus, .wf-select:focus, .wf-textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
}
.wf-textarea { min-height: 110px; resize: vertical; }
.wf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wf-submit {
  width: 100%;
  padding: 14px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--t);
}
.wf-submit:hover { background: var(--orange2); transform: translateY(-1px); }

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (max 1024px)
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; max-width: 680px; }
  .hero-card { max-width: 440px; }
  .ai-grid, .ast-grid { grid-template-columns: 1fr; gap: 40px; }
  .ast-photo-wrap { max-width: 500px; margin-bottom: 30px; }
  .wwd-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid::before { display: none; }
  .val-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .svcs-featured { grid-template-columns: repeat(2, 1fr) !important; }
  .rev-page-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-cred-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-map-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-col { order: -1; grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE (max 767px)
═══════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --section-gap: 52px; }

  .top-bar { font-size: .72rem; padding: 6px 16px; gap: 8px; }

  .nav-inner { padding: 0 16px; height: 58px; }
  .nav-logo img { width: 140px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }

  .hero { min-height: auto; }
  .hero-body { min-height: auto; padding: 56px 16px 48px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-card { display: none; }
  .hero-h1 { font-size: clamp(2.2rem, 12vw, 3.8rem); }
  .hero-stats { gap: 18px; }
  .hs-num { font-size: 1.5rem; }

  .trust-desktop { display: none; }
  .trust-slider-wrap { display: block; }
  .trust-strip { padding: 12px 0; }

  .what-we-do { padding: var(--section-gap) 16px; }
  .wwd-grid { grid-template-columns: 1fr; gap: 16px; }

  .about-intro { padding: var(--section-gap) 16px; }
  .ai-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Reviews mobile: hide grid, show slider */
  .reviews-sec .wrap { padding-left: 16px; padding-right: 16px; }
  .rev-grid-desktop { display: none; }
  .rev-slider-wrap { display: block; padding: 0 16px; }
  .rev-nav { display: flex; }
  .rev-top { flex-direction: column; gap: 14px; }

  .process-sec .wrap { padding: 0 16px; }
  .proc-grid { grid-template-columns: 1fr; gap: 14px; }

  .faq-sec { padding: var(--section-gap) 16px; }

  .cta-strip { padding: 48px 16px; }

  footer { padding: 40px 16px 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }

  .ph { padding: 52px 16px 44px; }

  .about-story { padding: var(--section-gap) 16px; }
  .ast-grid { grid-template-columns: 1fr; gap: 32px; }
  .ast-photo-wrap { max-width: 100%; }
  .ast-photo { aspect-ratio: 3/2; }
  .ast-name-card { bottom: -16px; }

  .about-team { padding: var(--section-gap) 16px; }
  .team-imgs { grid-template-columns: 1fr; }

  .values-sec { padding: var(--section-gap) 16px; }
  .val-grid { grid-template-columns: 1fr; }

  .all-svcs { padding: var(--section-gap) 16px; }
  .svcs-featured { grid-template-columns: 1fr !important; }
  .svc-info-panels { padding: var(--section-gap) 16px; }
  .svc-panels-grid { grid-template-columns: 1fr; }

  .rev-page-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .rev-cred-grid { grid-template-columns: repeat(2, 1fr); }
  .rev-map-sec { padding: var(--section-gap) 16px; }

  .contact-page { padding: var(--section-gap) 16px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-info-col { grid-template-columns: 1fr; order: unset; }

  .wf-row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { justify-content: center; }
  .rev-cred-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════
   ADDITIONS — top bar CTA, enquiry notice, portfolio, leave-review button
═══════════════════════════════════════ */

/* Top bar — CTA is now a button-style link */
.top-bar .topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: #fff;
  padding: 4px 14px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background var(--t), transform var(--t);
}
.top-bar .topbar-cta:hover { background: var(--orange2); color: #fff; transform: translateY(-1px); }

/* Site-wide enquiry inactive notice (synced from dashboard) */
.enq-notice {
  background: #7c2d12;
  color: #fff;
  padding: 12px 24px;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 2px solid #9a3412;
}
.enq-notice strong { font-weight: 800; }
.enq-notice a {
  color: var(--orange2);
  text-decoration: underline;
  font-weight: 800;
  margin: 0 4px;
}
.enq-notice a:hover { color: #fff; }

/* Disabled form state */
.form-disabled {
  opacity: .55;
  pointer-events: none;
  position: relative;
}
.form-disabled::after {
  content: 'Enquiries currently inactive. Please call instead.';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 99px;
  pointer-events: auto;
}

/* Leave-a-review button (reviews-sec on homepage) */
.rev-leave-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  transition: var(--t);
  box-shadow: var(--shadow-sm);
  margin-top: 14px;
}
.rev-leave-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════
   PORTFOLIO — asymmetric grid for About page
═══════════════════════════════════════ */
.portfolio-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  margin-top: 40px;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
.pf-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.pf-card--feature { grid-row: 1 / 3; }
.pf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
  display: block;
  will-change: transform;
}
.pf-card:hover img { transform: scale(1.06); }
.pf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,45,91,.95) 0%, rgba(11,45,91,.5) 45%, transparent 75%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #fff;
  transition: background .3s ease;
}
.pf-card:hover .pf-overlay {
  background: linear-gradient(to top, rgba(11,45,91,.96) 0%, rgba(11,45,91,.7) 60%, rgba(11,45,91,.2) 100%);
}
.pf-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 10px;
  text-align: left;
}
.pf-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 4px;
  text-align: left !important;
}
.pf-card--feature .pf-title { font-size: 1.7rem; }
.pf-loc {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 8px;
  text-align: left !important;
}
.pf-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
  max-width: 100%;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .3s ease, max-height .3s ease, margin-top .3s ease;
  text-align: left !important;
}
.pf-card:hover .pf-desc {
  opacity: 1;
  max-height: 100px;
  margin-top: 4px;
}

/* Stats strip under portfolio */
.pf-stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  background: var(--grey);
  border-radius: var(--card-radius);
  padding: 28px 24px;
}
.pf-stat { text-align: center; }
.pf-stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
}
.pf-stat-lab {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 6px;
}

@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
  .pf-card--feature { grid-row: 1; grid-column: 1 / 3; aspect-ratio: 2/1; }
}
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .pf-card { aspect-ratio: 4/3; }
  .pf-card--feature { grid-column: 1; aspect-ratio: 4/3; }
  .pf-desc { opacity: 1; max-height: 80px; }
  .pf-stats { grid-template-columns: 1fr 1fr; gap: 18px 12px; padding: 22px 16px; }
  .pf-stat-num { font-size: 2rem; }
}

/* ═══════════════════════════════════════
   MOBILE FIXES
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* On tablet, trust strip stays in row but smaller items */
  .ts-item { padding: 6px 10px; gap: 7px; }
  .ts-label { font-size: .76rem; }
  .ts-sub { display: none; }
}
@media (max-width: 767px) {
  /* Trust strip becomes the autoplay slider */
  .trust-desktop { display: none; }
  .trust-slider-wrap { display: block; }
  .trust-strip { padding: 12px 0; }
  /* Process — mobile vertical layout with bigger circles */
  .proc-grid::before { display: none; }
  .proc-num { width: 60px; height: 60px; font-size: 1.4rem; }
  /* Top bar mobile */
  .top-bar { font-size: .72rem; padding: 6px 12px; gap: 8px; }
  .top-bar span { display: none; }
  .top-bar .topbar-cta { font-size: .72rem; padding: 4px 12px; }
  /* Enquiry notice mobile */
  .enq-notice { padding: 10px 14px; font-size: .8rem; line-height: 1.5; }
}

/* ═══════════════════════════════════════
   GLOBAL BUTTON HOVER — text always white
═══════════════════════════════════════ */
.btn:hover,
.btn:hover *,
.btn:hover svg { color: #fff !important; }
.btn:hover svg path,
.btn:hover svg polyline { stroke: currentColor !important; }

/* Outline-navy: default navy text turns white on hover (already in spec — enforced here) */
.btn-outline-navy:hover { color: #fff !important; background: var(--navy); border-color: var(--navy); }

/* ═══════════════════════════════════════
   GLOBAL — section padding consistency
═══════════════════════════════════════ */
/* Every page section uses the same horizontal padding so left/right edges line up */
section.section,
.what-we-do,
.about-intro,
.process-sec,
.faq-sec,
.values-sec,
.about-story,
.about-team,
.all-svcs,
.svc-info-panels,
.rev-map-sec,
.contact-page,
.reviews-listing {
  padding-left: 24px;
  padding-right: 24px;
}

/* Inner wrap stays the same */
.wrap,
.ai-grid,
.ast-grid,
.svc-panels-grid,
.rev-map-grid,
.contact-grid,
.foot-grid {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero stats — 3 columns balanced */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 32px;
  align-items: center;
}

@media (max-width: 767px) {
  .what-we-do,
  .about-intro,
  .process-sec,
  .faq-sec,
  .values-sec,
  .about-story,
  .about-team,
  .all-svcs,
  .svc-info-panels,
  .rev-map-sec,
  .contact-page,
  .reviews-listing {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-stats { gap: 22px; grid-template-columns: repeat(3, 1fr); text-align: center; }
}

/* Reviews listing wrap (replaces the inline-styled section that broke consistency) */
.reviews-listing {
  padding-top: var(--section-gap);
  padding-bottom: 0;
}
.reviews-listing-intro {
  text-align: center;
  margin-bottom: 40px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════
   FINAL FIXES — logo bg, top-bar width, mobile hero badges, slider dots
═══════════════════════════════════════ */

/* Logo: kill any background, increase size, transparent PNG visible */
.nav-logo img,
.foot-logo img {
  background: transparent !important;
  background-color: transparent !important;
}
.nav-logo img { height: 52px; max-width: 220px; }
.foot-logo img { height: 60px; max-width: 220px; }

/* Loading background only on content images, not logos/icons */
img { background-color: transparent; }
.wwd-img,
.ai-img-main,
.ai-img-sm,
.pf-card img,
.team-img-card img,
.ast-photo,
.svc-featured-img {
  background-color: var(--grey);
}

/* Top utility bar: constrain content width to 1200px to match site */
.top-bar {
  background: var(--navy);
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  font-weight: 500;
  padding: 0;
  display: block;
}
.top-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* If no inner wrapper present, fallback the old flex on .top-bar */
.top-bar > span,
.top-bar > a { /* direct children fallback */ }

/* Mobile hero badges: force consistent 2-line label wrap */
@media (max-width: 767px) {
  .hs-lab {
    word-spacing: 100vw;       /* every space becomes a line break */
    line-height: 1.2;
    min-height: 2.4em;          /* reserve 2 lines so all align */
  }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    text-align: center;
    align-items: start;
  }
  .hero-stats > div { display: flex; flex-direction: column; align-items: center; }
}

/* Review slider dots: override any default button styling */
.rev-dot {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: rgba(11,45,91,.15) !important;
  border: none !important;
  border-radius: 999px !important;
  width: 9px !important;
  height: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
  box-shadow: none !important;
  outline: none !important;
}
.rev-dot:hover { background: var(--navy) !important; }
.rev-dot.active {
  background: var(--orange) !important;
  width: 26px !important;
}
.rev-dot:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 2px;
}

/* Faster image fade-in */
img[loading="lazy"] { transition: opacity .18s ease-out; }

/* Reduce fade-up further for snappiness */
.fu {
  transition: opacity .18s ease-out, transform .18s ease-out !important;
}

/* Hero slide: extra optimisation hints */
.hero-slide {
  background-color: var(--navy);
  contain: paint;
}

/* ═══════════════════════════════════════
   ANNOUNCEMENT BAR — autoplay 2-slide loop
═══════════════════════════════════════ */
.top-bar {
  background: var(--navy);
  color: rgba(255,255,255,.92);
  font-size: .82rem;
  font-weight: 500;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.top-bar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px 24px;
  display: block;
  text-align: center;
  overflow: hidden;
}
.annc-slider {
  position: relative;
  height: 22px;
  overflow: hidden;
}
.annc-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0;
  letter-spacing: .01em;
  animation: anncFade 10s infinite ease-in-out;
  will-change: opacity, transform;
  transform: translateY(8px);
}
.annc-slide:nth-child(1) { animation-delay: 0s; }
.annc-slide:nth-child(2) { animation-delay: 5s; }
@keyframes anncFade {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  46%  { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .annc-slide { animation: none; opacity: 0; transform: none; }
  .annc-slide:first-child { opacity: 1; }
}

/* ═══════════════════════════════════════
   HAMBURGER — override global button styles
═══════════════════════════════════════ */
.hamburger,
button.hamburger,
nav button.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,.08) !important;
  background-color: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  cursor: pointer !important;
  flex-shrink: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  font-family: inherit !important;
  transition: background .15s ease, border-color .15s ease;
}
.hamburger:hover,
button.hamburger:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.4) !important;
}
.hamburger:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 2px;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════
   NAV-INNER — 1400 max, keep right alignment
═══════════════════════════════════════ */
.nav-inner {
  max-width: 1340px;
  padding: 0 24px;
  height: 72px;
}

/* ═══════════════════════════════════════
   SECTION WIDTH CONSISTENCY (1300px)
═══════════════════════════════════════ */
.hero-inner,
.ai-grid,
.ast-grid,
.svc-panels-grid,
.rev-map-grid,
.contact-grid,
.foot-grid,
.rev-cred-grid,
.rev-page-grid,
.portfolio-grid,
.team-imgs,
.val-grid,
.proc-grid,
.wwd-grid,
.svcs-featured,
.accred-inner,
.trust-desktop,
.foot-bottom {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* What-we-do uses inline max-width — ensure */
.what-we-do { max-width: 1300px; margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════
   MOBILE OPTIMISATIONS (max 767px)
═══════════════════════════════════════ */
@media (max-width: 767px) {
  /* Announcement bar — smaller, still legible */
  .top-bar-inner { padding: 8px 14px; }
  .annc-slider { height: 20px; }
  .annc-slide { font-size: .74rem; padding: 0 4px; }

  /* Nav: tighter padding, logo doesn't crowd hamburger */
  .nav-inner { padding: 0 16px; height: 64px; gap: 12px; }
  .nav-logo img { height: 42px; max-width: 170px; }

  /* Hamburger always shows on mobile */
  .hamburger { display: flex !important; }
  .nav-links { display: none !important; }

  /* Mobile menu CTA — both buttons big, easy thumb targets */
  .mob-menu-cta {
    padding: 18px 16px;
    background: rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mob-menu-cta a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: var(--orange) !important;
    color: #fff !important;
    padding: 16px 22px !important;
    border-radius: 10px !important;
    border: none !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-align: center;
    min-height: 52px;
  }
  .mob-menu-cta a.mob-cta-secondary {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
  }

  /* Mobile menu links — larger tap targets */
  .mob-menu a {
    padding: 16px 20px;
    font-size: 1rem;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════
   FINAL — container alignment, sticky nav, about image size
═══════════════════════════════════════ */

/* Site container: every section + every inner grid hits the same 1300px box with 24px L/R */
:root { --container: 1300px; --gutter: 24px; }

.wrap,
.top-bar-inner,
.nav-inner,
.hero-inner,
.ai-grid,
.ast-grid,
.svc-panels-grid,
.rev-map-grid,
.contact-grid,
.foot-grid,
.foot-bottom,
.rev-cred-grid,
.rev-page-grid,
.portfolio-grid,
.team-imgs,
.val-grid,
.proc-grid,
.wwd-grid,
.svcs-featured,
.accred-inner,
.trust-desktop,
.what-we-do {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

/* Section wrappers (full-bleed background, padded inner) — these have their own padding */
.what-we-do,
.about-intro,
.process-sec,
.faq-sec,
.values-sec,
.about-story,
.about-team,
.all-svcs,
.svc-info-panels,
.rev-map-sec,
.contact-page,
.reviews-listing,
.accred,
.rev-cred-strip,
.reviews-sec {
  padding-left: 0;
  padding-right: 0;
}

/* The inside `.wrap` / grid handles padding */
.reviews-sec .wrap,
.process-sec .wrap,
.faq-sec .wrap,
.values-sec .wrap,
.about-team .wrap,
.all-svcs .wrap,
.rev-map-sec .rev-map-grid,
.svc-info-panels .svc-panels-grid,
.about-intro .ai-grid,
.about-story .ast-grid,
.contact-page .contact-grid,
.accred .accred-inner,
.rev-cred-strip .rev-cred-grid,
.what-we-do { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Trust strip + footer keep full-bleed background but inner content lines up */
.trust-strip { padding-left: 0; padding-right: 0; }
.trust-desktop { padding-left: var(--gutter); padding-right: var(--gutter); }
footer { padding-left: 0; padding-right: 0; padding-top: 64px; }
.foot-grid, .foot-bottom { padding-left: var(--gutter); padding-right: var(--gutter); }

/* CTA strip + page hero ph — full-bleed, content centered */
.cta-strip, .ph { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Section vertical rhythm consistent */
.what-we-do,
.about-intro,
.process-sec,
.faq-sec,
.values-sec,
.about-story,
.about-team,
.all-svcs,
.svc-info-panels,
.rev-map-sec,
.contact-page,
.reviews-listing {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* ═══════════════════════════════════════
   STICKY NAV — announcement bar stays in flow, nav sticks
═══════════════════════════════════════ */
.top-bar { position: relative; z-index: 1; }

#navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--navy2);
  transition: background .18s ease, box-shadow .18s ease, height .18s ease;
  backface-visibility: hidden;
}
#navbar.scrolled {
  background: var(--navy);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
}
#navbar.scrolled .nav-inner { height: 64px; }

/* Mob menu uses absolute position so it sits below sticky nav */
.mob-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════
   ABOUT IMAGE — reduce size
═══════════════════════════════════════ */
.ast-grid {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.ast-photo-wrap {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.ast-photo {
  aspect-ratio: 4/4.6;
}

/* Why-J-Tech main image (homepage about-intro) — tighten */
.ai-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.ai-img-main { max-width: 100%; aspect-ratio: 4/3; }

/* ═══════════════════════════════════════
   MOBILE — consistent gutter, sticky nav, easy touch
═══════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-gap: 56px; }

  .ast-grid, .ai-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ast-photo-wrap { max-width: 360px; }
  .ast-photo { aspect-ratio: 4/4; }

  /* Sticky nav visible on mobile during scroll */
  #navbar { position: sticky; top: 0; }
  #navbar.scrolled .nav-inner { height: 60px; }

  /* Mobile menu height accounts for shorter sticky nav */
  .mob-menu { max-height: calc(100vh - 60px); }
}

@media (max-width: 1024px) {
  .ast-grid, .ai-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ast-photo-wrap { max-width: 480px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════
   UNIFIED SECTION CONTAINER — single source of truth
   Every page's content sits in a 1300px max box with 16px L/R
   gutters. Section backgrounds remain full-bleed.
═══════════════════════════════════════════════════════════ */

/* The container itself */
.section-container,
.wrap,
.nav-inner,
.top-bar-inner,
.hero-inner,
.ai-grid,
.ast-grid,
.svc-panels-grid,
.rev-map-grid,
.contact-grid,
.foot-grid,
.foot-bottom,
.rev-cred-grid,
.rev-page-grid,
.portfolio-grid,
.team-imgs,
.val-grid,
.proc-grid,
.wwd-grid,
.svcs-featured,
.accred-inner {
  width: min(100% - 32px, 1300px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Trust strip: badges fill the full content row edge-to-edge with
   no leftover gap on wide viewports. Uses the same container width
   as every other section so it lines up with the hero/nav above it,
   and flex:1 on each .ts-item distributes the row evenly with zero
   dead space regardless of how many badges are present. */
.trust-desktop {
  display: flex !important;
  width: min(100% - 32px, 1300px) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
.trust-desktop .ts-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* `.wwd-intro` (homepage intro block) — center as a container too */
.wwd-intro {
  width: min(100% - 32px, 1300px);
  margin-inline: auto;
  text-align: center;
}

/* Section wrappers: vertical padding + bg only, NO horizontal padding.
   The inner container handles all left/right offset. */
.what-we-do,
.about-intro,
.process-sec,
.faq-sec,
.values-sec,
.about-story,
.about-team,
.all-svcs,
.svc-info-panels,
.rev-map-sec,
.contact-page,
.reviews-listing,
.accred,
.rev-cred-strip,
.reviews-sec,
.cta-strip,
.ph,
.rev-page-header,
.trust-strip,
footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Sections without an internal container wrapper:
   center their direct children to the container width */
.cta-strip,
.ph,
.rev-page-header {
  text-align: center;
}
.cta-strip > *,
.ph > *,
.rev-page-header > * {
  width: min(100% - 32px, 1300px);
  margin-inline: auto;
}

/* Footer keeps its own grid + bottom-row containers (already updated above) */

/* Ensure full-bleed elements don't override container — hero, trust, cta, ph, accred */
.hero,
.trust-strip,
.cta-strip,
.ph,
.rev-page-header,
.rev-cred-strip,
.accred,
footer {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* What-we-do section: it IS the container (no inner wrap div), so allow it */
section.what-we-do {
  width: 100%;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0;
  margin-right: 0;
}

/* But its children (intro + grid) use the container width — already set above */

/* Hero stays as-is (hero-inner is the container — already aliased above) */

/* Mobile: container automatically uses min() to give 16px gutters */
@media (max-width: 767px) {
  /* No additional rules needed — min(100% - 32px, 1300px) gives perfect 16px sides */
}

/* ═══════════════════════════════════════════════════════════
   ALIGNMENT, BACKGROUNDS, ABOUT LAYOUT, SERVICES CENTRING
═══════════════════════════════════════════════════════════ */

/* 1 — Trust strip: remove edge padding on first/last items so the
   visible content lines up with hero / section content above. */
.trust-desktop .ts-item:first-child { padding-left: 0; }
.trust-desktop .ts-item:last-child  { padding-right: 0; border-right: none; }
.trust-desktop .ts-item { padding: 6px 14px; }

/* Trust strip height/vertical rhythm consistent with sections */
.trust-strip { padding-top: 18px; padding-bottom: 18px; }

/* 2 — Services page intro: centered description + heading */
.all-svcs { text-align: center; }
.all-svcs .sec-h2,
.all-svcs .sec-p,
.all-svcs .sec-tag {
  margin-left: auto;
  margin-right: auto;
}
.all-svcs .sec-p {
  text-align: center;
  max-width: 720px;
}
.all-svcs .svcs-featured { text-align: left; }

/* Make sure every page's intro paragraph is centered when its parent is */
.process-sec .sec-p,
.values-sec .sec-p,
.about-team .sec-p,
.faq-sec .sec-p {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* 3 — About section: improved layout & spacing */
.about-story {
  padding-top: calc(var(--section-gap) + 8px);
  padding-bottom: calc(var(--section-gap) + 8px);
}
.ast-grid {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
  gap: 80px;
  align-items: center;
}
.ast-photo-wrap {
  max-width: 420px;
  margin-inline: auto;
}
.ast-photo {
  aspect-ratio: 4/4.7;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(11,45,91,.18);
}
.ast-name-card {
  bottom: -24px;
  left: 24px;
  right: 24px;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(11,45,91,.22);
}
.ast-name { font-size: 1rem; }
.ast-role { font-size: .82rem; margin-top: 1px; }

/* Content side */
.about-story .sec-h2 { margin-bottom: 18px; }
.about-story .sec-p { font-size: 1.02rem; line-height: 1.75; }
.about-story .sec-p + .sec-p { margin-top: 12px; }
.ast-check-list {
  margin-top: 26px;
  display: grid;
  gap: 11px;
}
.ast-check { font-size: .96rem; }

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .ast-grid {
    grid-template-columns: 1fr !important;
    gap: 48px;
  }
  .ast-photo-wrap { max-width: 460px; }
  .ast-photo { aspect-ratio: 4/4.2; }
  .ast-name-card { bottom: -20px; }

  /* Make sure hero + trust + every section share identical horizontal edges */
  .trust-desktop .ts-item { padding: 6px 12px; }
}

/* 4 — Alt section backgrounds: more visible, clearer division */
:root { --grey: #EBEFF4; }

.about-intro,
.process-sec,
.about-team,
.svc-info-panels,
.rev-cred-strip {
  background: var(--grey);
  position: relative;
}

/* Subtle top/bottom dividers on alt sections — only visible where adjacent sections share bg */
.about-intro,
.process-sec,
.about-team,
.svc-info-panels {
  border-top: 1px solid rgba(11,45,91,.06);
  border-bottom: 1px solid rgba(11,45,91,.06);
}

/* Tighten faded-section transition — slightly different grey tone */
.faq-sec { background: #fff; }
.values-sec { background: #fff; }

/* 5 — Vertical rhythm: identical top/bottom padding on every major section */
.what-we-do,
.about-intro,
.process-sec,
.faq-sec,
.values-sec,
.about-story,
.about-team,
.all-svcs,
.svc-info-panels,
.rev-map-sec,
.contact-page,
.reviews-listing {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* Trust strip extra airy on desktop */
@media (min-width: 768px) {
  .trust-strip { padding-top: 22px; padding-bottom: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   FINAL TWEAKS — logos +40%, footer top spacing, reviews hero
   blueprint, portfolio overlay, WPForms select, mobile sticky
   nav, announcement marquee with clickable phone
═══════════════════════════════════════════════════════════ */

/* 1 — Logos +40% */
.nav-logo img {
  height: 73px !important;
  max-width: 300px !important;
}
.foot-logo img {
  height: 90px !important;
  max-width: 300px !important;
}
/* Make sure nav height grows to fit larger logo */
.nav-inner { height: 92px; }
#navbar.scrolled .nav-inner { height: 82px; }

/* 2 — Footer top spacing reduced */
footer { padding-top: 40px !important; }
.foot-grid { padding-bottom: 36px; gap: 36px; }

/* 3 — Reviews page hero: blueprint grid (like .ph) */
.rev-page-header {
  background: linear-gradient(180deg, #0a2750 0%, var(--navy) 100%) !important;
  position: relative;
  overflow: hidden;
}
.rev-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.rev-page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 200px 200px;
  pointer-events: none;
}
.rev-page-header > * { position: relative; z-index: 1; }

/* 4 — Portfolio overlay reduced (about page) */
.pf-overlay {
  background: linear-gradient(to top,
    rgba(11,45,91,.82) 0%,
    rgba(11,45,91,.32) 55%,
    transparent 85%) !important;
}
.pf-card:hover .pf-overlay {
  background: linear-gradient(to top,
    rgba(11,45,91,.86) 0%,
    rgba(11,45,91,.50) 65%,
    rgba(11,45,91,.10) 100%) !important;
}

/* 5 — WPForms Service Required select: proper height + chevron arrow */
.wf-select,
.wpforms-placeholder select,
.wf-input,
.wf-textarea {
  min-height: 50px;
  padding: 13px 16px;
  font-size: 1rem;
}
.wf-select,
.wpforms-placeholder select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.wf-select:focus,
.wpforms-placeholder select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F58220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* 6 — Announcement marquee for mobile + clickable phone */
.annc-marquee { display: none; }
.annc-marquee-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: anncScroll 32s linear infinite;
  width: max-content;
  align-items: center;
}
.annc-marquee-track span {
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.annc-marquee-track a {
  color: var(--orange2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.annc-marquee-track a:hover { color: #fff; }
@keyframes anncScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Phone link in desktop slider — same styling */
.annc-slide a {
  color: var(--orange2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.annc-slide a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .annc-marquee-track { animation: none; }
}

/* Mobile: hide fade slider, show marquee, lock sticky nav */
@media (max-width: 767px) {
  .annc-slider { display: none !important; }
  .annc-marquee { display: block; overflow: hidden; }
  .top-bar-inner { padding: 9px 0; overflow: hidden; }

  /* Sticky nav on mobile — forced */
  #navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  /* Mobile logo: still bigger than before but fits */
  .nav-logo img {
    height: 58px !important;
    max-width: 220px !important;
  }
  .nav-inner { height: 76px; }
  #navbar.scrolled .nav-inner { height: 68px; }
  .mob-menu { max-height: calc(100vh - 68px); }
}

@media (max-width: 1024px) {
  .nav-logo img { height: 64px !important; }
  .foot-logo img { height: 78px !important; }
  .nav-inner { height: 84px; }
}

/* ═══════════════════════════════════════════════════════════
   FINAL POLISH
═══════════════════════════════════════════════════════════ */

/* 1 — Announcement bar: proper word/link spacing */
.annc-slide,
.annc-marquee-track span {
  word-spacing: .04em;
  letter-spacing: .015em;
}
.annc-slide a,
.annc-marquee-track span a {
  margin-left: .25em;
  margin-right: .15em;
  padding: 0 2px;
}
.annc-marquee-track { gap: 80px; }

/* 2 — Reviews hero badge: width-fit, smaller */
.rev-page-header .sec-tag {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 auto 18px !important;
  padding: 4px 14px !important;
  font-size: .7rem !important;
  letter-spacing: .12em;
}

/* 3 — Blueprint hero opacity reduced */
.ph::before,
.rev-page-header::before {
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
}
.ph::after,
.rev-page-header::after {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
}

/* 4 — WPForms select arrow: simpler, reliable SVG */
.wf-select,
.wpforms-placeholder select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 44px !important;
}
.wf-select::-ms-expand { display: none; }
/* ═══════════════════════════════════════════════════════════
   PORTRAIT GALLERY SLIDESHOW — About page
   (.portrait-show, .ps-*, .ps-lightbox, .ps-lb-*)
   All slideshow + lightbox styles live here so no <style>
   blocks are needed inside about.html.
═══════════════════════════════════════════════════════════ */

/* Section wrapper */
.portrait-show {
  background: #ebeff4;
  padding: var(--section-gap) 0;
  overflow: hidden;
  border-top: 1px solid rgba(11,45,91,.07);
  border-bottom: 1px solid rgba(11,45,91,.07);
}
.portrait-show-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header block — centred */
.portrait-show-header {
  text-align: center;
  margin-bottom: 40px;
}
.portrait-show-header .sec-tag {
  display: inline-block;
}
.portrait-show-header .sec-h2 {
  color: var(--navy);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.portrait-show-header .sec-p {
  color: var(--muted);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Track wrapper */
.ps-track-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.ps-track-wrap:active { cursor: grabbing; }

.ps-track {
  display: flex;
  gap: 20px;
  transition: transform .42s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* Individual slide */
.ps-slide {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 0;
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.ps-slide img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
  background-color: var(--grey);
  transition: transform .5s ease;
  cursor: zoom-in;
}
.ps-slide:hover img { transform: scale(1.04); }

/* Hover overlay — appears on hover, always visible on mobile */
.ps-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11,45,91,.88) 0%,
    rgba(11,45,91,.45) 50%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity .28s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  pointer-events: none;
}
.ps-slide:hover .ps-overlay { opacity: 1; }

/* Expand icon inside overlay */
.ps-overlay-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  color: #fff;
  align-self: flex-start;
  margin-bottom: auto;
  cursor: pointer;
  pointer-events: auto;
  transition: background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ps-overlay-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.ps-overlay-btn svg { pointer-events: none; }

/* Slide caption — always visible at bottom */
.ps-slide-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(11,45,91,.78));
  padding: 36px 14px 14px;
  color: #fff;
  pointer-events: none;
}
.ps-cap-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-display);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 5px;
}
.ps-cap-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}

/* ── Navigation bar ── */
.ps-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

/* Arrow buttons — explicit sizing, no flex stretch */
.ps-arrow {
  flex-shrink: 0;
  flex-grow: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .18s ease, border-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
}
.ps-arrow:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(245,130,32,.35);
}
.ps-arrow:active { transform: scale(.92); }
.ps-arrow:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
/* Keep icon strokes white on hover */
.ps-arrow:hover svg { color: #fff; }

/* Dots container */
.ps-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  /* No flex: 1 — never stretch */
}

/* Individual dot — locked dimensions, never stretches */
.ps-dot {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  flex-grow: 0;
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  background: rgba(11,45,91,.18);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: background .18s ease, transform .18s ease, width .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.ps-dot.active {
  background: var(--orange);
  transform: scale(1.35);
}
.ps-dot:hover:not(.active) { background: var(--navy); }
.ps-dot:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ── Lightbox ── */
.ps-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.93);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.ps-lightbox.open { display: flex; }

.ps-lightbox-img {
  max-width: min(480px, 100%);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--card-radius);
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  transition: opacity .15s ease;
  user-select: none;
  -webkit-user-select: none;
}

/* Close button */
.ps-lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.28);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10000;
  transition: background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ps-lightbox-close:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* Lightbox prev/next arrows */
.ps-lb-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10000;
  transition: background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.ps-lb-arrow:hover {
  background: var(--orange);
  border-color: var(--orange);
}
.ps-lb-prev { left: 14px; }
.ps-lb-next { right: 14px; }

/* Swipe hint */
.ps-lightbox-hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Responsive ── */

/* Tablet: 2 slides visible */
@media (max-width: 1024px) {
  .ps-slide { flex: 0 0 calc(50% - 10px); }
}

/* Mobile: single slide, full viewport width */
@media (max-width: 640px) {
  .portrait-show { padding: var(--section-gap) 0; }
  .portrait-show-inner { padding: 0; }
  .portrait-show-header { padding: 0 16px; }
  .ps-track-wrap { border-radius: 0; }
  .ps-slide { flex: 0 0 calc(100vw - 32px); }
  .ps-track { gap: 16px; }
  /* Always show overlay on mobile (touch users won't hover) */
  .ps-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(11,45,91,.72) 0%, transparent 55%);
  }
  .ps-overlay-btn { display: none; }
  /* Lightbox arrows tighter on small screens */
  .ps-lb-prev { left: 6px; }
  .ps-lb-next { right: 6px; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ps-track { transition: none; }
  .ps-slide img { transition: none; }
  .ps-overlay { transition: none; }
  .ps-lightbox-img { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — portfolio heading centred
═══════════════════════════════════════════════════════════ */
.about-team .sec-h2,
.about-team .sec-p,
.about-team .sec-tag {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   PORTRAIT SLIDESHOW — FINAL OVERRIDES
   These rules must come last to win specificity wars against
   the global unified-container block and global .btn rules.
═══════════════════════════════════════════════════════════ */

/* 1 — sec-tag inside about-team must be inline width-of-text only.
   The unified container forces width: min() on .accred-inner which
   can cascade down. Scope specifically to about-team + portrait header.
   NOTE: inline-block + margin:auto does NOT self-centre (that only
   works on display:block). Centring instead comes from text-align:
   center on the parent .wrap, matching how .sec-h2/.sec-p are centred. */
.about-team .sec-tag,
.portrait-show-header .sec-tag {
  display: inline-block !important;
  width: auto !important;
  max-width: max-content !important;
  padding: 4px 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.about-team .wrap {
  text-align: center !important;
}

/* 2 — ps-overlay-btn: small, minimal, top-right corner of slide.
   Not a .btn — must be completely isolated from global button rules. */
.ps-overlay-btn {
  /* position: sit in top-right corner of the overlay */
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  /* size */
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  /* shape */
  border-radius: 6px !important;
  /* colours */
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  /* layout */
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  /* no btn shadows or transforms */
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  /* interaction */
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background .15s ease, border-color .15s ease !important;
  -webkit-tap-highlight-color: transparent;
  /* ensure it sits above the overlay gradient */
  z-index: 2;
}
.ps-overlay-btn:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  transform: none !important;
}
.ps-overlay-btn svg {
  width: 14px !important;
  height: 14px !important;
  pointer-events: none;
  stroke: currentColor !important;
}

/* Overlay must have relative positioning so the absolute btn works */
.ps-overlay {
  position: absolute !important;
}

/* 3 — ps-arrow: small circular nav buttons, isolated from .btn globals */
.ps-arrow {
  /* Reset every .btn property that could bleed in */
  display: grid !important;
  place-items: center !important;
  /* Exact dimensions — never flex-stretched */
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  /* Shape */
  border-radius: 50% !important;
  /* Colours */
  background: #fff !important;
  border: 1.5px solid #d1d5db !important;
  color: var(--navy) !important;
  /* Typography reset */
  font-family: inherit !important;
  font-size: 0 !important;      /* hide any text fallback */
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
  /* Layout */
  padding: 0 !important;
  gap: 0 !important;
  /* Shadow + interaction */
  box-shadow: 0 1px 4px rgba(0,0,0,.10) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease !important;
}
.ps-arrow:hover {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(245,130,32,.32) !important;
  transform: scale(1.06) !important;
}
.ps-arrow:active {
  transform: scale(.94) !important;
}
.ps-arrow svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  stroke: currentColor !important;
  pointer-events: none;
}
.ps-arrow:hover svg {
  stroke: #fff !important;
}
.ps-arrow:focus-visible {
  outline: 2px solid var(--orange) !important;
  outline-offset: 2px !important;
}

/* 4 — ps-dot: small circles, locked, can't be touched by .btn or global rules */
.ps-dot {
  /* Full reset */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  all: unset !important;           /* nuclear reset — clears everything */
  /* Then explicitly set what we need */
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(11,45,91,.2) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  transition: background .15s ease, transform .15s ease !important;
  -webkit-tap-highlight-color: transparent;
}
.ps-dot.active {
  background: var(--orange) !important;
  transform: scale(1.5) !important;
}
.ps-dot:hover:not(.active) {
  background: var(--navy) !important;
}

/* 5 — ps-nav: tight, centred row, no stretching */
.ps-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* 6 — ps-dots container: inline-flex, never stretches */
.ps-dots {
  display: inline-flex !important;
  gap: 7px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Expand button: hidden by default, appears on slide hover.
   The button sits directly inside .ps-slide (sibling to img). */
.ps-slide { position: relative; }

.ps-overlay-btn {
  opacity: 0 !important;
  transition: opacity .2s ease, background .15s ease, border-color .15s ease !important;
}
.ps-slide:hover .ps-overlay-btn {
  opacity: 1 !important;
}
/* On mobile always show it since there's no hover */
@media (max-width: 640px) {
  .ps-overlay-btn {
    opacity: 1 !important;
  }
}


/* MOBILE LIGHTBOX ARROWS — clean fixed side buttons */
@media (max-width: 640px) {
  #psLightbox button.ps-lb-arrow {
    all: unset !important;
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(11,45,91,.72) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.28) !important;
    cursor: pointer !important;
    z-index: 10050 !important;
  }

  #psLightbox button.ps-lb-prev {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 12px 12px 0 !important;
  }

  #psLightbox button.ps-lb-next {
    right: 0 !important;
    left: auto !important;
    border-radius: 12px 0 0 12px !important;
  }

  #psLightbox button.ps-lb-arrow svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #fff !important;
  }

  #psLightbox button.ps-lb-arrow:hover,
  #psLightbox button.ps-lb-arrow:active,
  #psLightbox button.ps-lb-arrow:focus {
    background: rgba(11,45,91,.86) !important;
    color: #fff !important;
    outline: none !important;
  }

  #psLightbox .ps-lightbox-img {
    max-width: calc(100vw - 84px) !important;
    max-height: 86vh !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   HERO BADGE PILL — matches .sec-tag orange treatment exactly
   Applies to .hero-tag (home hero) and .ph-tag (inner page hero)
   Orange-tinted fill, orange border, orange text — identical to
   the .sec-tag badge used on the Reviews page hero, so no inline
   style overrides are needed on any page.
═══════════════════════════════════════════════════════════ */
.hero-tag,
.ph-tag {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  background: rgba(245,130,32,.18) !important;
  border: 1px solid rgba(245,130,32,.35) !important;
  color: #FF9B2F !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: .75rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 4px 14px !important;
  border-radius: 99px !important;
  margin: 0 auto 16px !important;
  position: relative;
  z-index: 1;
}

/* Inner-page badge sits in a centred hero */
.ph .ph-tag { margin-left: auto !important; margin-right: auto !important; }

/* Home hero badge sits in a left-aligned column — keep it left */
.hero-inner .hero-tag { margin-left: 0 !important; }

/* Long badge text on narrow screens: allow wrap */
@media (max-width: 480px) {
  .hero-tag,
  .ph-tag {
    white-space: normal !important;
    letter-spacing: .08em !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FORMINATOR FORM — J-Tech brand styles
   Targets the Forminator plugin's rendered form markup so the
   embedded shortcode [forminator_form id="2680"] matches the
   site's input, label, button and message styling exactly.
═══════════════════════════════════════════════════════════ */
.forminator-custom-form {
  font-family: var(--font-body) !important;
  color: var(--dark) !important;
}
.forminator-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 1.45rem !important;
  color: var(--navy) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  line-height: 1.15 !important;
}
.forminator-subtitle {
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}
.forminator-label {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.forminator-description {
  font-size: 0.78rem !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
}
.forminator-input,
.forminator-input-with-prefix,
.forminator-select,
.forminator-select-container select {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--dark) !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: auto !important;
}
.forminator-input:focus,
.forminator-input-with-prefix:focus,
.forminator-select:focus,
.forminator-select-container select:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(245,130,32,0.14) !important;
  outline: none !important;
}
.forminator-input::placeholder,
.forminator-textarea::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.forminator-textarea {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--dark) !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  min-height: 110px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.forminator-textarea:focus {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(245,130,32,0.14) !important;
  outline: none !important;
}
.forminator-row { margin-bottom: 16px !important; }
.forminator-required { color: var(--orange) !important; font-weight: 800 !important; }
.forminator-btn,
.forminator-btn-submit,
button.forminator-btn-submit,
input[type="submit"].forminator-btn-submit {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  background: var(--orange) !important;
  border: 2px solid var(--orange) !important;
  border-radius: 6px !important;
  padding: 13px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  display: block !important;
  text-align: center !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}
.forminator-btn:hover,
.forminator-btn-submit:hover,
button.forminator-btn-submit:hover,
input[type="submit"].forminator-btn-submit:hover {
  background: var(--orange2) !important;
  border-color: var(--orange2) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(245,130,32,0.35) !important;
}
.forminator-error-message,
.forminator-field--error .forminator-input,
.forminator-field--error .forminator-textarea { border-color: #b91c1c !important; }
.forminator-error-message {
  font-size: 0.78rem !important;
  color: #b91c1c !important;
  margin-top: 4px !important;
  display: block !important;
}
.forminator-response-output--success,
.forminator-success-notice {
  background: #eafaf0 !important;
  border: 1px solid #86efac !important;
  border-radius: 8px !important;
  color: #15803d !important;
  font-size: 0.92rem !important;
  padding: 14px 18px !important;
  margin-top: 12px !important;
  line-height: 1.6 !important;
}
.forminator-response-output--error,
.forminator-error-notice {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 8px !important;
  color: #b91c1c !important;
  font-size: 0.92rem !important;
  padding: 14px 18px !important;
  margin-top: 12px !important;
}

/* ── Enquiry form card — wraps the Forminator shortcode on Contact page ── */
.enquiry-form-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px 26px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.enquiry-form-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--navy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.enquiry-form-card-sub {
  font-size: 0.86rem;
  color: #64748b;
  margin-bottom: 20px;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON TEXT COLOUR — ALWAYS WHITE (default / hover / focus / active)
   Root cause: .btn-outline-navy had navy text by default (only
   turning white on :hover), and none of the three .btn variants
   had colour explicitly locked for :focus or :active, so text
   could revert to a non-white colour outside of mouse-hover —
   e.g. on tap (mobile has no real :hover), on keyboard focus,
   or in the brief :active window during a click.

   Fix: .btn-outline-navy now keeps a permanent navy fill instead
   of a transparent one, so white text always has contrast — and
   every .btn variant has colour locked to white in every state.
═══════════════════════════════════════════════════════════ */

/* btn-outline-navy: filled navy by default (was transparent with
   navy text). Hover now darkens the fill instead of inverting the
   text colour, so the text itself never has to change. */
.btn-outline-navy {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}
.btn-outline-navy:hover,
.btn-outline-navy:focus,
.btn-outline-navy:active {
  background: var(--navy2) !important;
  border-color: var(--navy2) !important;
  color: #fff !important;
}

/* Lock text + icon colour to white on every .btn, in every state */
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn *,
.btn:hover *,
.btn:focus *,
.btn:active * {
  color: #fff !important;
}
.btn svg,
.btn svg path,
.btn svg polyline,
.btn svg circle,
.btn svg line {
  stroke: currentColor !important;
}

/* Visible focus ring for keyboard users — doesn't touch text colour */
.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Safety net: lock the same white-always rule on the other solid-fill
   submit buttons site-wide (Forminator + WPForms preview) so hover/
   focus/active can never knock their text colour off white either. */
.wf-submit:hover,
.wf-submit:focus,
.wf-submit:active,
.forminator-btn-submit:hover,
.forminator-btn-submit:focus,
.forminator-btn-submit:active,
button.forminator-btn-submit:hover,
button.forminator-btn-submit:focus,
button.forminator-btn-submit:active,
input[type="submit"].forminator-btn-submit:hover,
input[type="submit"].forminator-btn-submit:focus,
input[type="submit"].forminator-btn-submit:active {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   IMAGE HOVER ZOOM — SUBTLE & SMOOTH (final pass)
   Previous zoom on portfolio + team photos was a 6% scale over
   900ms — felt heavy and slow, and didn't match the lighter 4%
   zoom already used on the portrait slideshow. Standardised all
   three to the same gentle 3.5% scale with a quicker, smoother
   ease-out curve so every hover-zoom on the site now feels and
   moves identically.
═══════════════════════════════════════════════════════════ */
.pf-card img,
.team-img-card img,
.ps-slide img {
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.pf-card:hover img,
.team-img-card:hover img,
.ps-slide:hover img {
  transform: scale(1.035);
}

/* Respect reduced-motion preference for the new shared zoom too
   (kept separate/last so it always wins regardless of source order
   of the rules above). */
@media (prefers-reduced-motion: reduce) {
  .pf-card img,
  .team-img-card img,
  .ps-slide img {
    transition: none;
  }
  .pf-card:hover img,
  .team-img-card:hover img,
  .ps-slide:hover img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE — missing desktop column count
   .svcs-featured had a tablet (2-col) and mobile (1-col) layout
   defined, but no grid-template-columns for the default desktop
   state, so it was silently collapsing to a single column on
   desktop — the opposite of what every sibling grid on the site
   does (compare .rev-page-grid, .wwd-grid, .val-grid, .proc-grid,
   which all define 3–4 columns by default and narrow down at
   each breakpoint). Restores the matching desktop default; the
   existing tablet/mobile !important overrides are untouched and
   continue to apply exactly as before.
═══════════════════════════════════════════════════════════ */
.svcs-featured {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .trust-desktop {
    display: none !important;
  }
  .trust-slider-wrap {
    display: block !important;
  }
}