/* S.P.S Security & Protection Systems — Design System v3.0 */
/* Dark Authority Theme — inspired by editorial/premium web design */

/* ═══════════════════════════════════════════
   1. CSS Variables
═══════════════════════════════════════════ */
:root {
  /* Canvas */
  --c-bg:       #0A0A0A;
  --c-bg-2:     #111111;
  --c-bg-3:     #181818;

  /* Surfaces (light sections) */
  --c-surface:  #F7F6F2;
  --c-surface-2:#EDEAE4;
  --c-white:    #ffffff;

  /* Text */
  --c-text:         #EDEAE4;
  --c-text-muted:   #888884;
  --c-text-dark:    #0D0D0D;
  --c-text-dark-muted: #6B6867;

  /* Borders */
  --c-border:       rgba(237,234,228,0.1);
  --c-border-light: rgba(13,13,13,0.1);

  /* Service-specific category accents (soft, muted — inner pages) */
  --c-fire:         #C2502E;
  --c-solar:        #C98A2E;
  --c-security:     #3E6FB0;
  --c-maintenance:  #4C8C7D;

  /* Primary brand accent — soft, calm blue (easy on the eye) */
  --c-accent:       #3E6FB0;
  --c-accent-hover: #2E588F;
  --c-accent-rgb:   62, 111, 176;

  /* Soft blue tint system (jasminadenner-style warmth) */
  --c-ink:          #0E2A47;   /* deep slate-blue — dark sections (not black) */
  --c-ink-2:        #14365A;
  --c-sky:          #DCE7F2;   /* soft blue surface */
  --c-sky-2:        #EAF0F7;   /* softer blue surface */
  --c-paper:        #F4F2EC;   /* warm paper canvas */
  --c-paper-2:      #FBFAF6;   /* near-white warm */
  --c-text-soft:    #1C2B3A;   /* near-black w/ blue undertone */
  --c-text-soft-mut:#6E7C8C;

  /* Legacy aliases */
  --c-primary:  #3E6FB0;
  --c-dark:     #0E2A47;
  --c-ember:    #C2502E;
  --c-green:    #4C8C7D;
  --c-muted:    #6E7C8C;

  /* Typography — Classic Elegant (Playfair + Inter) + Space Grotesk labels */
  --f-serif:   'Playfair Display', Georgia, serif;
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-head:    'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;

  /* Bootstrap override — soft brand blue */
  --bs-primary:     #3E6FB0;
  --bs-primary-rgb: 62, 111, 176;
  --bs-link-color:  #3E6FB0;

  /* Spacing */
  --section-py: 110px;
  --nav-h:      64px;
  --sps-py:     clamp(72px, 9vw, 120px);

  /* Transitions */
  --tr:         all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tr-fast:    all 0.2s ease;
  --tr-slow:    all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 100px;

  /* Shadows */
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.15);
  --shadow-md:  0 8px 40px rgba(0,0,0,0.25);
  --shadow-lg:  0 24px 80px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════
   2. Base & Reset
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; }
/* clip instead of hidden: prevents horizontal overflow without creating a scroll container.
   overflow-x:hidden forces overflow-y to compute as auto (CSS spec), making html/body
   scroll containers — this breaks position:sticky and native page scroll. clip avoids this. */
html, body { overflow-x: clip; overscroll-behavior: none; }

body {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text-dark);
  line-height: 1.65;
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-text-dark);
  margin: 0;
}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a { color: inherit; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { text-decoration: none; transition: var(--tr); color: inherit; }
body a { text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; }
audio, canvas, iframe, svg, video { vertical-align: middle; }
button:focus, a:focus, input:focus, textarea:focus, .btn:focus {
  outline: none; box-shadow: none;
}
span, a { display: inline-block; }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container { width: 450px; }
}

/* ═══════════════════════════════════════════
   3. Custom Cursor
═══════════════════════════════════════════ */
@media (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], .gallery-item, .service-panel, label { cursor: none; }
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity 0.3s ease;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--c-accent);
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(232,64,32,0.5);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
}
.cursor-ring.hovered {
  width: 56px; height: 56px;
  border-color: rgba(232,64,32,0.85);
}
.cursor-ring.clicking {
  width: 28px; height: 28px;
  border-color: var(--c-accent);
}

/* scroll-progress removed by user request */

/* ═══════════════════════════════════════════
   5. Preloader
═══════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0;
  z-index: 9999997;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 24px;
}
.preloader-logo {
  width: 120px;
  opacity: 0;
  animation: preloader-logo-in 0.6s 0.1s forwards ease;
}
@keyframes preloader-logo-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preloader-bar {
  width: 120px; height: 1px;
  background: rgba(237,234,228,0.1);
  position: relative; overflow: hidden;
}
.preloader-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--c-accent);
  animation: preloader-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes preloader-fill {
  to { transform: scaleX(1); }
}

/* Legacy preloader-inner/icon (for old JS that still runs) */
.preloader-inner { display: none; }

/* ═══════════════════════════════════════════
   6. Scroll to Top
═══════════════════════════════════════════ */
.scroll-top {
  width: 44px; height: 44px;
  background: var(--c-bg-3);
  border: 1px solid var(--c-border);
  color: var(--c-text) !important;
  border-radius: 50%;
  position: fixed;
  bottom: 90px; right: 22px;
  z-index: 901;
  display: none;
  align-items: center; justify-content: center;
  transition: var(--tr);
}
.scroll-top i, .scroll-top svg { fill: var(--c-text); }
.scroll-top:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  transform: translateY(-4px);
}
.scroll-top:hover svg { fill: #fff; }

/* ═══════════════════════════════════════════
   7. Header & Navigation
═══════════════════════════════════════════ */
.header { position: relative; }

.navbar-area {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9990;
  padding: 20px 0;
  transition: padding 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}
.navbar-area.scrolled {
  padding: 12px 0;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(237,234,228,0.06);
}

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

/* Logo */
.navbar-brand { padding: 0; display: flex; align-items: center; }
.navbar-brand .logo1 {
  width: 110px;
  height: auto;
  filter: brightness(10);
  transition: var(--tr);
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: none;
  z-index: 9992;
  position: relative;
}
.ham-line {
  width: 28px; height: 1.5px;
  background: rgba(237,234,228,0.9);
  display: block;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.3s ease,
              width 0.3s ease;
}
.ham-line:nth-child(2) { width: 20px; }

.nav-hamburger.open .ham-line:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 28px; }
.nav-hamburger.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open .ham-line:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Desktop nav links (shown alongside hamburger on large) */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-desktop-link {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(237,234,228,0.55);
  transition: color 0.3s ease;
  position: relative;
}
.nav-desktop-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--c-accent);
  transition: width 0.3s ease;
}
.nav-desktop-link:hover,
.nav-desktop-link.active { color: rgba(237,234,228,0.95); }
.nav-desktop-link:hover::after,
.nav-desktop-link.active::after { width: 100%; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 22px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(237,234,228,0.25);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.85);
  transition: var(--tr);
}
.nav-cta:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

@media (max-width: 991px) {
  .nav-desktop { display: none; }
  .nav-cta { display: none; }
}

/* ═══════════════════════════════════════════
   8. Nav Overlay (Full-Screen Menu)
═══════════════════════════════════════════ */
.nav-overlay {
  position: fixed; inset: 0;
  z-index: 9991;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.nav-overlay.open {
  clip-path: inset(0 0 0% 0);
  pointer-events: all;
}
/* Grain overlay — breaks 8-bit banding on the flat navy fill */
.nav-overlay::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
}

.nav-overlay-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.nav-overlay-links { list-style: none; padding: 0; margin: 0; }
.nav-overlay-links li {
  overflow: hidden;
  padding: 4px 0;
}
.nav-overlay-links li a {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 300;
  color: rgba(237,234,228,0.28);
  line-height: 1.1;
  display: block;
  transform: translateY(100%);
  transition: color 0.3s ease;
  letter-spacing: -0.02em;
}
.nav-overlay.open .nav-overlay-links li a {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), color 0.3s ease;
}
.nav-overlay-links li:nth-child(1) a { transition-delay: 0.05s; }
.nav-overlay-links li:nth-child(2) a { transition-delay: 0.1s; }
.nav-overlay-links li:nth-child(3) a { transition-delay: 0.15s; }
.nav-overlay-links li:nth-child(4) a { transition-delay: 0.2s; }
.nav-overlay-links li:nth-child(5) a { transition-delay: 0.25s; }
.nav-overlay-links li a:hover { color: rgba(237,234,228,0.95); }
.nav-overlay-links li.active a { color: var(--c-accent); }

.nav-overlay-sub {
  border-left: 1px solid var(--c-border);
  padding-left: 40px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}
.nav-overlay.open .nav-overlay-sub {
  opacity: 1;
  transform: translateX(0);
}
.nav-overlay-sub-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 24px;
  display: block;
}
.nav-overlay-sub-links { list-style: none; padding: 0; margin: 0; }
.nav-overlay-sub-links li { margin-bottom: 14px; }
.nav-overlay-sub-links li a {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(237,234,228,0.4);
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-overlay-sub-links li a:hover { color: rgba(237,234,228,0.9); }
.nav-overlay-sub-links li a svg { fill: currentColor; opacity: 0.6; }
.nav-overlay-contact {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--c-border);
}
.nav-overlay-contact a {
  display: block;
  font-size: 13px;
  color: rgba(237,234,228,0.35);
  margin-bottom: 6px;
  transition: color 0.3s ease;
}
.nav-overlay-contact a:hover { color: rgba(237,234,228,0.8); }

@media (max-width: 767px) {
  .nav-overlay-inner { grid-template-columns: 1fr; }
  .nav-overlay-sub { display: none; }
  .nav-overlay-links li a { font-size: clamp(28px, 8vw, 48px); }
}

/* ═══════════════════════════════════════════
   9. Section & Layout Utilities
═══════════════════════════════════════════ */
.section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  position: relative;
}
.section-dark   { background: var(--c-bg); }
.section-dark-2 { background: var(--c-bg-2); }
.section-light  { background: var(--c-surface); }
.section-white  { background: var(--c-white); }
.whitebg  { background: var(--c-white); }
.surfacebg { background: var(--c-surface); }

.section-label {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 16px;
}
.section-label-light { color: rgba(237,234,228,0.45); }

.section-title { text-align: center; margin-bottom: 64px; }
.section-title .label,
.section-title span:not(.stat-number):not(.dot):not(.toggler-icon):not(.ham-line) {
  display: block;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 14px;
}
.section-title h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: 18px;
  letter-spacing: -0.025em;
}
.section-title p {
  font-size: 15px;
  color: var(--c-text-dark-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}
.section-title.align-left  { text-align: left; }
.section-title.align-left p { margin: 0; }
.section-title.white-text span,
.section-title.white-text h2,
.section-title.white-text p {
  color: var(--c-text);
}
.section-title.white-text h2 { color: var(--c-text); }
.section-title.white-text p  { color: rgba(237,234,228,0.55); }
.section-title.white-text .label,
.section-title.white-text > span:first-child { color: rgba(237,234,228,0.45); }

.section-h2 {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 600;
  color: var(--c-text-dark);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════
   10. Buttons
═══════════════════════════════════════════ */
.btn-sps,
.button .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  cursor: none;
  transition: var(--tr);
  position: relative;
  overflow: hidden;
}
.btn-sps::before,
.button .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateX(-101%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
}
.btn-sps:hover::before,
.button .btn:hover::before { transform: translateX(0); }
.btn-sps:hover,
.button .btn:hover { color: var(--c-text-dark); }
.btn-sps > *, .button .btn > * { position: relative; z-index: 1; }

.btn-sps-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(237,234,228,0.3);
  background: transparent;
  color: rgba(237,234,228,0.85);
  cursor: none;
  transition: var(--tr);
}
.btn-sps-outline:hover {
  border-color: rgba(237,234,228,0.9);
  color: #fff;
  background: rgba(237,234,228,0.08);
}

.btn-white-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  transition: var(--tr);
}
.btn-white-outline:hover {
  background: #fff;
  color: var(--c-text-dark);
  border-color: #fff;
}

.btn-whatsapp-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.9);
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  transition: var(--tr);
}
.btn-whatsapp-outline:hover { background: #25D366; color: #fff; border-color: #25D366; }

.btn.btn-primary,
a.btn.btn-primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  padding: 12px 28px;
  transition: var(--tr);
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: #fff;
  transform: translateY(-2px);
}

.btn-cta-submit {
  width: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  border: none;
  border-radius: var(--r-full);
  padding: 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--f-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: none;
  transition: var(--tr);
}
.btn-cta-submit:hover {
  background: rgba(10,10,10,0.7);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   11. Hero Section
═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--c-bg);
  overflow: hidden;
  padding-bottom: 80px;
}

.hero-bg {
  position: absolute; inset: 0;
  background-image: url(../images/hero/hero2_s.webp);
  background-size: cover;
  background-position: center 30%;
  opacity: 0.18;
  will-change: transform;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.3) 0%,
    rgba(10,10,10,0.1) 40%,
    rgba(10,10,10,0.85) 100%
  );
}

.hero-noise {
  position: absolute; inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.45);
  margin-bottom: 32px;
}
.hero-label-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: pulse-dot 2.5s ease infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.6); }
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(72px, 12vw, 165px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  overflow: hidden;
}
.hero-title em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-accent);
}

/* SplitType word/char wrappers */
.hero-title .word { overflow: hidden; display: inline-block; }
.hero-title .char { display: inline-block; }

.hero-sub {
  font-size: 16px;
  color: rgba(237,234,228,0.5);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 44px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-border);
  transform-origin: left;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 28px; right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(237,234,228,0.3);
  font-family: var(--f-display);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-lr;
}
.hero-scroll-hint::before {
  content: '';
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(237,234,228,0.3));
}

@media (max-width: 767px) {
  .hero { min-height: 92svh; padding-bottom: 60px; }
  .hero-scroll-hint { display: none; }
  .hero-title { font-size: clamp(56px, 16vw, 100px); }
  .hero-sub { font-size: 14px; }
}

/* Backward-compatible aliases */
.sps-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; background: var(--c-bg); overflow: hidden; padding-bottom: 80px; }
.sps-hero-bg { position: absolute; inset: 0; background-image: url(../images/hero/hero2_s.webp); background-size: cover; background-position: center; opacity: 0.18; }
.sps-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.85) 100%); }
.sps-hero-content { position: relative; z-index: 5; width: 100%; padding-top: calc(var(--nav-h) + 80px); padding-bottom: 60px; }
.sps-hero-badge { display: none; }
.sps-hero h1 { font-family: var(--f-display); font-size: clamp(40px, 7vw, 100px); font-weight: 300; color: var(--c-text); line-height: 0.93; letter-spacing: -0.03em; margin-bottom: 28px; }
.sps-hero h1 em { font-style: normal; color: rgba(237,234,228,0.25); }
.sps-hero-sub { font-size: 16px; color: rgba(237,234,228,0.5); line-height: 1.75; max-width: 480px; margin-bottom: 40px; }
.sps-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-scroll-hint-old { display: none; }

/* ═══════════════════════════════════════════
   12. Marquee Ticker
═══════════════════════════════════════════ */
.marquee-section {
  background: var(--c-bg);
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  font-family: var(--f-display);
  font-size: clamp(13px, 1.8vw, 18px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.14);
  white-space: nowrap;
  user-select: none;
  transition: color 0.3s ease;
}
.marquee-item:hover { color: rgba(237,234,228,0.35); }

.marquee-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-accent);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   13. Stats Section
═══════════════════════════════════════════ */
.stats-section {
  background: var(--c-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  padding: 40px 32px;
  position: relative;
  text-align: left;
  border-right: 1px solid var(--c-border-light);
}
.stat-item:last-child { border-right: none; }

.stat-item::before {
  content: '';
  position: absolute;
  top: 0; left: 32px;
  width: 28px; height: 2px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}
.stat-item.counted::before { transform: scaleX(1); }

.stat-number {
  font-family: var(--f-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  color: var(--c-text-dark);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 8px;
}
.stat-number em {
  font-style: normal;
  color: var(--c-accent);
  font-size: 0.6em;
}

.stat-label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dark-muted);
}

/* Legacy trust-bar mapping */
.trust-bar {
  background: var(--c-surface);
  padding: var(--section-py) 0;
}
.trust-stat {
  padding: 40px 32px;
  position: relative;
}
.trust-stat .stat-number {
  font-family: var(--f-display);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 800;
  color: var(--c-text-dark);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 8px;
}
.trust-stat .stat-number em {
  font-style: normal;
  color: var(--c-accent);
  font-size: 0.6em;
}
.trust-stat .stat-label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dark-muted);
}

@media (max-width: 991px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--c-border-light); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--c-border-light); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .stat-item { padding: 32px 24px; }
}
@media (max-width: 575px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-number { font-size: clamp(36px, 10vw, 56px); }
}

/* ═══════════════════════════════════════════
   14. Services Horizontal Scroll Panels
═══════════════════════════════════════════ */
.services-track-section {
  /* 100svh hold + 3 panels × 100vw scroll travel */
  height: calc(100svh + 300vw);
  position: relative;
  background: var(--c-bg);
}

.services-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

.services-panels {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  will-change: transform;
}

.service-panel {
  width: 100vw;
  min-width: 100vw;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 8vw 80px;
}

/* Panel background images */
.service-panel-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 0.6s ease;
}
.service-panel:hover .service-panel-bg { transform: scale(1.03); }

.service-panel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.9) 0%,
    rgba(10,10,10,0.4) 50%,
    rgba(10,10,10,0.1) 100%
  );
}

/* Panel backgrounds via inline bg color for now */
.sp-fire        { background: #0D0806; }
.sp-solar       { background: #0A0900; }
.sp-security    { background: #060810; }
.sp-maintenance { background: #060A06; }

.sp-fire .service-panel-bg {
  background-image: url(https://images.unsplash.com/photo-1485846234645-a62644f84728?w=1920&q=80&auto=format&fit=crop);
  opacity: 0.5;
}
.sp-solar .service-panel-bg {
  background-image: url(https://images.unsplash.com/photo-1509391366360-2e959784a276?w=1920&q=80&auto=format&fit=crop);
  opacity: 0.5;
}
.sp-security .service-panel-bg {
  background-image: url(https://images.unsplash.com/photo-1557597774-9d273605dfa9?w=1920&q=80&auto=format&fit=crop);
  opacity: 0.5;
}
.sp-maintenance .service-panel-bg {
  background-image: url(https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1920&q=80&auto=format&fit=crop);
  opacity: 0.5;
}

.service-panel-content {
  position: relative;
  z-index: 5;
  max-width: 560px;
}

.sp-counter {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(237,234,228,0.3);
  margin-bottom: 20px;
  display: block;
}

.sp-accent-line {
  width: 40px; height: 2px;
  margin-bottom: 24px;
}
.sp-fire .sp-accent-line        { background: var(--c-fire); }
.sp-solar .sp-accent-line       { background: var(--c-solar); }
.sp-security .sp-accent-line    { background: var(--c-security); }
.sp-maintenance .sp-accent-line { background: var(--c-maintenance); }

/* Ghost numbers behind panel content */
.sp-fire::before,
.sp-solar::before,
.sp-security::before,
.sp-maintenance::before {
  position: absolute;
  top: -10%;
  right: -2%;
  font-family: var(--f-display);
  font-size: min(48vw, 560px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.1em;
  color: rgba(237,234,228,0.04);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.sp-fire::before        { content: '01'; }
.sp-solar::before       { content: '02'; }
.sp-security::before    { content: '03'; }
.sp-maintenance::before { content: '04'; }

.sp-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.97;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.sp-desc {
  font-size: 15px;
  color: rgba(237,234,228,0.5);
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 32px;
}

.sp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.6);
  transition: color 0.3s ease, gap 0.3s ease;
}
.sp-link svg { transition: transform 0.3s ease; fill: currentColor; }
.sp-link:hover { color: rgba(237,234,228,0.95); gap: 16px; }
.sp-link:hover svg { transform: translateX(4px); }

/* Panel indicator dots */
.services-indicators {
  position: absolute;
  bottom: 32px; right: 8vw;
  z-index: 10;
  display: flex;
  gap: 8px;
}
.services-indicator-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(237,234,228,0.2);
  transition: background 0.3s ease, width 0.3s ease;
}
.services-indicator-dot.active {
  width: 20px;
  border-radius: 3px;
  background: var(--c-text);
}

/* Mobile: stack panels vertically */
@media (max-width: 991px) {
  .services-track-section { height: auto; }
  .services-sticky { position: static; height: auto; }
  .services-panels { flex-direction: column; width: 100%; height: auto; }
  .service-panel {
    width: 100%;
    min-width: 0;
    height: 80vh;
    padding: 0 6vw 60px;
  }
  .sp-title { font-size: clamp(32px, 7vw, 52px); }
}
@media (max-width: 575px) {
  .service-panel { height: 70vh; }
  .sp-title { font-size: clamp(28px, 9vw, 44px); }
}

/* Fallback — old services-overview cards */
.services-overview { background: var(--c-surface); display: none; }

/* ═══════════════════════════════════════════
   15. Project Gallery
═══════════════════════════════════════════ */
.gallery-section {
  background: var(--c-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 32px;
}
.gallery-header-right {
  flex-shrink: 0;
}
.gallery-header h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 600;
  color: var(--c-text-dark);
  letter-spacing: -0.025em;
  line-height: 1;
}

.gallery-grid-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery-grid-new .wide { grid-column: span 2; }
.gallery-grid-new .tall { grid-row: span 2; }

@media (min-width: 992px) {
  .gallery-grid-new {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.gallery-item-new {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.gallery-item-new.tall { aspect-ratio: auto; }
.gallery-item-new:not(.tall) { aspect-ratio: 4/3; }

.gallery-img-wrap {
  width: 100%; height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.gallery-item-new:hover .gallery-img-wrap img { transform: scale(1.0); }

.gallery-caption-new {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 20px 18px;
  background: linear-gradient(transparent, rgba(10,10,10,0.75));
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.gallery-item-new:hover .gallery-caption-new {
  transform: translateY(0);
  opacity: 1;
}
.gallery-caption-new h4 {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.gallery-caption-new span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Legacy gallery (used in old markup) */
.project-gallery { background: var(--c-surface); }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; justify-content: center; }
.gallery-filter-btn {
  padding: 8px 20px; border-radius: var(--r-full);
  border: 1px solid var(--c-border-light); background: var(--c-white);
  font-family: var(--f-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-text-dark-muted); cursor: pointer; transition: var(--tr);
}
.gallery-filter-btn:hover, .gallery-filter-btn.active {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.gallery-item {
  position: relative; border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 4/3; cursor: pointer;
  background: var(--c-surface-2);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px 16px 14px;
  background: linear-gradient(transparent, rgba(10,10,10,0.8));
  color: #fff;
  transform: translateY(100%); transition: var(--tr);
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }
.gallery-caption h4 { font-family: var(--f-display); font-size: 14px; color: #fff; margin-bottom: 3px; font-weight: 700; }
.gallery-caption span { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 767px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px)  { .gallery-grid { grid-template-columns: 1fr; } }

@media (max-width: 767px) {
  .gallery-header { flex-direction: column; align-items: flex-start; }
  .gallery-grid-new { grid-template-columns: 1fr; }
  .gallery-grid-new .wide,
  .gallery-grid-new .tall { grid-column: span 1; grid-row: span 1; }
}

/* ═══════════════════════════════════════════
   16. Why SPS — Numbered List
═══════════════════════════════════════════ */
.why-section {
  background: var(--c-bg);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.why-section-header {
  margin-bottom: 64px;
}
.why-section-header h2 {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 300;
  color: var(--c-text);
  letter-spacing: -0.03em;
  line-height: 0.97;
  max-width: 500px;
}

.why-list {
  list-style: none;
  padding: 0; margin: 0;
}

.why-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(237,234,228,0.07);
  align-items: start;
  position: relative;
  overflow: hidden;
}
.why-item:first-child { border-top: 1px solid rgba(237,234,228,0.07); }

.why-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.why-number {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(237,234,228,0.18);
  padding-top: 6px;
}

.why-item-body {}
.why-item-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: rgba(237,234,228,0.85);
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color 0.3s ease;
}
.why-item:hover .why-item-title { color: var(--c-text); }
.why-item-desc {
  font-size: 14px;
  color: rgba(237,234,228,0.4);
  line-height: 1.75;
}

/* Legacy why-sps support */
.why-sps { background: var(--c-bg); padding: var(--section-py) 0; }
.why-card { text-align: left; padding: 36px 0; border-bottom: 1px solid rgba(237,234,228,0.07); }
.why-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: rgba(75,142,241,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.why-icon svg { fill: var(--c-accent); width: 24px; height: 24px; }
.why-card h3 {
  font-family: var(--f-display); font-size: 18px; font-weight: 700;
  color: rgba(237,234,228,0.85); margin-bottom: 10px;
}
.why-card p { font-size: 14px; color: rgba(237,234,228,0.4); line-height: 1.75; }

/* ═══════════════════════════════════════════
   17. About Detail Sections (service tabs on homepage)
═══════════════════════════════════════════ */
.about-us { background: var(--c-surface); }
.about-us.whitebg { background: var(--c-white); }
.about-left { padding-right: 40px; }
.about-right img {
  width: 100%; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.width100-20 { width: calc(100% - 20px); }
.width100Imp { width: 100% !important; }
.about-tab { margin-top: 12px; }
.about-tab .nav-tabs {
  border-bottom: 1px solid var(--c-border-light);
  gap: 0; flex-wrap: wrap; margin-bottom: 22px;
}
.about-tab .nav-tabs .nav-item { margin: 0; }
.about-tab .nav-tabs .nav-link {
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-text-dark-muted);
  border: none; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 10px 14px;
  background: none; transition: var(--tr);
}
.about-tab .nav-tabs .nav-link:hover { color: var(--c-accent); }
.about-tab .nav-tabs .nav-link.active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  background: none;
}
.about-tab .tab-content > .tab-pane p {
  font-size: 14px; color: var(--c-text-dark-muted);
  margin-bottom: 14px; line-height: 1.75;
}
.about-tab .tab-content > .tab-pane ul li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--c-text-dark);
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border-light);
}
.about-tab .tab-content > .tab-pane ul li:last-child { border-bottom: none; }
.about-tab .tab-content > .tab-pane ul li i svg { fill: var(--c-accent); }
.mgtop8 { margin-top: 8px; }
@media (max-width: 991px) {
  .about-left { padding-right: 0; margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════
   18. CTA Section
═══════════════════════════════════════════ */
.cta-section {
  position: relative;
  background: var(--c-bg);
  padding: var(--section-py) 0;
  overflow: hidden;
  text-align: center;
}

.cta-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: clamp(80px, 18vw, 220px);
  font-weight: 800;
  color: rgba(237,234,228,0.022);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cta-inner {
  position: relative;
  z-index: 5;
}

.cta-pre {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.35);
  display: block;
  margin-bottom: 20px;
}

.cta-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5.5vw, 76px);
  font-weight: 300;
  color: var(--c-text);
  letter-spacing: -0.03em;
  line-height: 0.97;
  margin-bottom: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cta-contacts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.cta-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: rgba(237,234,228,0.5);
  transition: color 0.3s ease;
}
.cta-contact-link svg { fill: rgba(237,234,228,0.35); width: 16px; height: 16px; flex-shrink: 0; }
.cta-contact-link:hover { color: rgba(237,234,228,0.9); }

.cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Legacy CTA split */
.cta-split { background: var(--c-bg); overflow: hidden; }
.cta-split-inner { display: grid; grid-template-columns: 1fr 1fr; }
.cta-left {
  padding: 64px 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.cta-left .cta-label {
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(237,234,228,0.35); margin-bottom: 14px; display: block;
}
.cta-left h2 {
  font-family: var(--f-display); font-size: clamp(24px, 3vw, 36px);
  color: var(--c-text); margin-bottom: 30px; line-height: 1.1;
  font-weight: 600;
}
.cta-contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cta-contact-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(237,234,228,0.06);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cta-contact-icon svg { fill: var(--c-accent); }
.cta-contact-text a { font-size: 15px; color: rgba(237,234,228,0.7); font-weight: 500; }
.cta-contact-text a:hover { color: rgba(237,234,228,0.95); }
.cta-right {
  background: var(--c-accent); padding: 64px 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.cta-right h3 { font-family: var(--f-display); font-size: 22px; color: #fff; margin-bottom: 22px; }
@media (max-width: 991px) {
  .cta-split-inner { grid-template-columns: 1fr; }
  .cta-left, .cta-right { padding: 48px 32px; }
}

/* ═══════════════════════════════════════════
   19. Service Cards (legacy — homepage tabs)
═══════════════════════════════════════════ */
.service-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  height: 100%; border: 1px solid var(--c-border-light);
  transition: var(--tr-slow);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  transform: scaleX(0); transform-origin: left; transition: var(--tr);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service-card:hover::before { transform: scaleX(1); }
.service-card.fire::before        { background: var(--c-fire); }
.service-card.solar::before       { background: var(--c-solar); }
.service-card.security::before    { background: var(--c-security); }
.service-card.maintenance::before { background: var(--c-maintenance); }
.sc-icon {
  width: 52px; height: 52px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; flex-shrink: 0;
}
.service-card.fire .sc-icon        { background: rgba(232,64,32,0.1); }
.service-card.solar .sc-icon       { background: rgba(245,162,0,0.1); }
.service-card.security .sc-icon    { background: rgba(75,142,241,0.1); }
.service-card.maintenance .sc-icon { background: rgba(22,163,74,0.1); }
.service-card.fire .sc-icon svg        { fill: var(--c-fire); }
.service-card.solar .sc-icon svg       { fill: var(--c-solar); }
.service-card.security .sc-icon svg    { fill: var(--c-security); }
.service-card.maintenance .sc-icon svg { fill: var(--c-maintenance); }
.service-card h3 {
  font-family: var(--f-display); font-size: 17px; font-weight: 700;
  margin-bottom: 10px; color: var(--c-text-dark);
}
.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--c-accent); }
.service-card p { font-size: 14px; color: var(--c-text-dark-muted); line-height: 1.65; flex: 1; margin-bottom: 20px; }
.sc-link {
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-accent); transition: var(--tr);
}
.sc-link:hover { gap: 9px; }

/* ═══════════════════════════════════════════
   20. Products
═══════════════════════════════════════════ */
.latest-products-area { background: var(--c-surface); }
.products-header {
  background: var(--c-bg);
  padding: 160px 0 80px;
  position: relative; overflow: hidden;
}
.products-header::before {
  content: '';
  position: absolute; inset: 0;
  background: url(../images/hero/hero2_s.webp) center/cover no-repeat;
  opacity: 0.08;
}
.products-header > * { position: relative; z-index: 2; }
.products-header .container { position: relative; z-index: 2; }
.products-header h1 {
  font-family: var(--f-display); color: var(--c-text);
  font-size: clamp(32px, 5vw, 60px); font-weight: 300;
  letter-spacing: -0.03em;
}
.products-header p { color: rgba(237,234,228,0.5); margin-top: 12px; font-size: 15px; }
.category-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.category-pill {
  padding: 8px 20px; border-radius: var(--r-full);
  border: 1px solid var(--c-border-light); background: var(--c-white);
  font-family: var(--f-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-text-dark-muted); cursor: pointer; transition: var(--tr);
}
.category-pill:hover, .category-pill.active {
  background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.no-products-message { padding: 60px 0; text-align: center; color: var(--c-text-dark-muted); }
#btnLoadMore .btn { margin-top: 36px; }

/* ═══════════════════════════════════════════
   21. Footer
═══════════════════════════════════════════ */
.footer {
  background: var(--c-bg);
  border-top: 1px solid rgba(237,234,228,0.06);
}
.footer-main {
  padding: 80px 0 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
}
.footer-brand .footer-logo {
  width: 100px; 
  margin-bottom: 20px;
  display: block;
}
.footer-brand p {
  font-size: 13px;
  color: rgba(237,234,228,0.35);
  line-height: 1.75;
  max-width: 220px;
}
.footer-col-title {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.35);
  margin-bottom: 22px;
  display: block;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links li a {
  font-size: 13px;
  color: rgba(237,234,228,0.45);
  transition: color 0.3s ease;
  position: relative;
  padding-left: 0;
}
.footer-links li a:hover { color: rgba(237,234,228,0.9); }

.footer-bottom-bar {
  border-top: 1px solid rgba(237,234,228,0.06);
  padding: 20px 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-copy {
  font-size: 12px;
  color: rgba(237,234,228,0.25);
  font-family: var(--f-display);
  letter-spacing: 0.02em;
}
.footer-copy a { color: rgba(237,234,228,0.4); }
.footer-copy a:hover { color: rgba(237,234,228,0.8); }

/* Legacy footer */
.footer-middle { padding: 70px 0 48px; }
.single-footer .logo a { display: inline-block; margin-bottom: 18px; }
.single-footer .logo img { width: 100px; filter: brightness(10); }
.f-about p { font-size: 13px; color: rgba(237,234,228,0.35); line-height: 1.75; margin-bottom: 18px; }
.footer-social ul { display: flex; gap: 10px; }
.footer-social li a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(237,234,228,0.04); border: 1px solid rgba(237,234,228,0.1);
  display: flex; align-items: center; justify-content: center; transition: var(--tr);
}
.footer-social li a:hover { background: var(--c-accent); border-color: var(--c-accent); transform: translateY(-3px); }
.footer-social li a svg { fill: rgba(237,234,228,0.45); }
.footer-social li a:hover svg { fill: #fff; }
.f-link h3 {
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(237,234,228,0.35); margin-bottom: 22px;
}
.f-link ul li { margin-bottom: 10px; }
.f-link ul li a { font-size: 13px; color: rgba(237,234,228,0.4); transition: color 0.3s ease; }
.f-link ul li a:hover { color: rgba(237,234,228,0.9); }
.footer-bottom { background: rgba(0,0,0,0.2); padding: 18px 0; }
.footer-bottom p { font-size: 12px; color: rgba(237,234,234,0.25); text-align: center; margin: 0; }

@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: span 2; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 575px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: span 1; }
  .footer-main { padding: 56px 0 40px; }
}

/* ═══════════════════════════════════════════
   22. Service Hub & Detail Hero
═══════════════════════════════════════════ */
.services-hero {
  background: var(--c-bg);
  padding: 170px 0 100px;
  position: relative;
  overflow: hidden;
}
.services-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url(../images/hero/hero2_s.webp) center/cover no-repeat;
  opacity: 0.1;
}
.services-hero .container { position: relative; z-index: 2; }
.services-hero h1 {
  font-family: var(--f-display);
  color: var(--c-text);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 300;
  line-height: 0.97;
  letter-spacing: -0.03em;
  max-width: 640px;
}
.services-hero h1 em { font-style: normal; color: rgba(237,234,228,0.25); }
.services-hero p { color: rgba(237,234,228,0.5); font-size: 16px; margin-top: 16px; max-width: 520px; line-height: 1.7; }
.services-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(232,64,32,0.12); border: 1px solid rgba(232,64,32,0.25);
  padding: 6px 16px; border-radius: var(--r-full);
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(237,234,228,0.7); margin-bottom: 22px;
}
.services-hub-hero { background: var(--c-bg); }

/* Service badge variants */
.service-page-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: var(--r-full);
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: 20px;
  background: rgba(237,234,228,0.06);
  color: rgba(237,234,228,0.5);
}
.fire-badge        { background: rgba(232,64,32,0.12); color: #ff6b4a; }
.solar-badge       { background: rgba(245,162,0,0.12); color: var(--c-solar); }
.security-badge    { background: rgba(75,142,241,0.15); color: #7faaff; }
.maintenance-badge { background: rgba(22,163,74,0.12); color: var(--c-maintenance); }

.fire-hero        { border-top: 3px solid var(--c-fire); }
.solar-hero       { border-top: 3px solid var(--c-solar); }
.security-hero    { border-top: 3px solid var(--c-security); }
.maintenance-hero { border-top: 3px solid var(--c-maintenance); }

.service-page-icon {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.service-page-icon svg { width: 38px; height: 38px; }
.fire-icon        { background: rgba(232,64,32,0.1); }
.fire-icon svg    { fill: var(--c-fire); }
.solar-icon       { background: rgba(245,162,0,0.1); }
.solar-icon svg   { fill: var(--c-solar); }
.security-icon    { background: rgba(75,142,241,0.1); }
.security-icon svg { fill: var(--c-security); }
.maintenance-icon  { background: rgba(22,163,74,0.1); }
.maintenance-icon svg { fill: var(--c-maintenance); }

/* ═══════════════════════════════════════════
   23. FAQ
═══════════════════════════════════════════ */
.faq-section { background: var(--c-surface); }
.faq-section .section-title { margin-bottom: 36px; }
.faq-item {
  border: 1px solid var(--c-border-light); border-radius: var(--r-md);
  margin-bottom: 10px; background: var(--c-white); overflow: hidden;
}
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  color: var(--c-text-dark); transition: var(--tr); gap: 14px;
}
.faq-question:hover, .faq-question.open { color: var(--c-accent); }
.faq-question::after {
  content: '+'; flex-shrink: 0; font-size: 22px; font-weight: 300;
  color: var(--c-text-dark-muted); transition: transform .3s ease, color .3s ease; line-height: 1; margin-left: auto;
}
.faq-question.open::after { content: '−'; color: var(--c-accent); }
.faq-answer { padding: 0 22px; max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .3s ease; }
.faq-answer.open { max-height: 400px; padding: 0 22px 18px; }
.faq-answer p { font-size: 14px; color: var(--c-text-dark-muted); line-height: 1.75; }

/* ═══════════════════════════════════════════
   24. Breadcrumbs / Page Heroes
═══════════════════════════════════════════ */
.breadcrumbs {
  background: var(--c-bg);
  padding: 160px 0 80px;
  position: relative;
}
.breadcrumbs-content { text-align: center; position: relative; z-index: 2; }
.breadcrumbs-content .page-title {
  font-family: var(--f-display); font-size: clamp(28px, 4vw, 52px);
  color: var(--c-text); font-weight: 300; letter-spacing: -0.025em;
  padding-bottom: 20px; position: relative; margin-bottom: 0;
}
.breadcrumbs-content .page-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 2px; background: var(--c-accent); border-radius: 2px;
}
.breadcrumbs-content p {
  font-size: 15px; color: rgba(237,234,228,0.45);
  margin-top: 18px; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.7;
}
.breadcrumb-nav {
  display: flex; justify-content: center; gap: 0;
  margin-top: 28px; position: relative; z-index: 2;
}
.breadcrumb-nav li {
  display: flex; align-items: center;
  font-size: 12px; font-weight: 600; color: rgba(237,234,228,0.35);
  letter-spacing: 0.04em;
}
.breadcrumb-nav li + li::before { content: '›'; margin: 0 8px; color: rgba(237,234,228,0.15); }
.breadcrumb-nav li a { color: rgba(237,234,228,0.55); }
.breadcrumb-nav li a:hover { color: rgba(237,234,228,0.9); }

.hero-breadcrumb { margin-bottom: 30px; }
.breadcrumb-list { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.breadcrumb-list li { font-size: 12px; color: rgba(237,234,228,0.35); }
.breadcrumb-list li + li::before { content: '›'; margin: 0 8px; color: rgba(237,234,228,0.15); }
.breadcrumb-list li a { color: rgba(237,234,228,0.55); }
.breadcrumb-list li a:hover { color: rgba(237,234,228,0.9); }

/* ═══════════════════════════════════════════
   25. Contact Page
═══════════════════════════════════════════ */
.contact-us { background: var(--c-white); }
.contact-info-card {
  background: var(--c-surface); border-radius: var(--r-lg);
  padding: 40px 32px; height: 100%;
}
.contact-info-card h4 {
  font-family: var(--f-display); font-size: 20px; font-weight: 600;
  margin-bottom: 8px; color: var(--c-text-dark); letter-spacing: -0.02em;
}
.contact-info-card > p { font-size: 14px; color: var(--c-text-dark-muted); margin-bottom: 28px; line-height: 1.75; }
.single-info { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.single-info i {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm);
  background: rgba(232,64,32,0.08); display: flex; align-items: center; justify-content: center;
}
.single-info i svg { fill: var(--c-accent); }
.single-info ul li { font-size: 14px; color: var(--c-text-dark); line-height: 1.6; }
.single-info ul li a { color: var(--c-text-dark); }
.single-info ul li a:hover { color: var(--c-accent); }
.contant-inner-title { margin-bottom: 28px; }
.contant-inner-title h4 { font-family: var(--f-display); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.contant-inner-title p { font-size: 14px; color: var(--c-text-dark-muted); line-height: 1.75; }
.whatsapp-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 12px 22px; border-radius: var(--r-full);
  font-family: var(--f-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: var(--tr); margin-top: 10px;
}
.whatsapp-cta:hover { background: #1fbc5a; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,211,102,0.3); }
.whatsapp-cta svg { fill: #fff; }
.contact-form-wrap {
  background: var(--c-white); border-radius: var(--r-lg);
  padding: 40px 32px; border: 1px solid var(--c-border-light);
}
.contact-form-wrap h4 { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-bottom: 22px; }
.form-group { margin-bottom: 18px; }
.form-group label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-dark-muted); margin-bottom: 8px; display: block; }
.txtbox, .form-control {
  width: 100%; border: 1px solid var(--c-border-light); border-radius: var(--r-sm);
  padding: 13px 16px; font-size: 14px; color: var(--c-text-dark);
  background: var(--c-white); transition: var(--tr); font-family: var(--f-body);
}
.txtarea {
  width: 100%; border: 1px solid var(--c-border-light); border-radius: var(--r-sm);
  padding: 13px 16px; font-size: 14px; color: var(--c-text-dark); background: var(--c-white);
  transition: var(--tr); font-family: var(--f-body); resize: vertical;
}
.txtbox:focus, .txtarea:focus, .form-control:focus {
  border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(232,64,32,0.08); outline: none;
}
.map-section { padding: 0 0 60px; }
.map-container { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.gmap_canvas iframe { display: block; }

/* ═══════════════════════════════════════════
   26. Service Detail Page Components
═══════════════════════════════════════════ */
.service-hub-card {
  display: flex; gap: 24px; padding: 32px;
  background: var(--c-white); border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  transition: var(--tr); height: 100%;
}
.service-hub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
.shc-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.shc-icon svg { width: 28px; height: 28px; }
.fire-card .shc-icon  { background: rgba(232,64,32,0.08); }
.fire-card .shc-icon svg { fill: var(--c-fire); }
.solar-card .shc-icon { background: rgba(245,162,0,0.08); }
.solar-card .shc-icon svg { fill: var(--c-solar); }
.security-card .shc-icon { background: rgba(75,142,241,0.08); }
.security-card .shc-icon svg { fill: var(--c-security); }
.maintenance-card .shc-icon { background: rgba(22,163,74,0.08); }
.maintenance-card .shc-icon svg { fill: var(--c-maintenance); }
.shc-body { display: flex; flex-direction: column; gap: 6px; }
.shc-badge { font-family: var(--f-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-text-dark-muted); }
.shc-body h3 { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin: 0; color: var(--c-text-dark); }
.shc-body p { font-size: 14px; color: var(--c-text-dark-muted); margin: 0; line-height: 1.65; }
.shc-cta { font-family: var(--f-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); margin-top: 8px; }
.service-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  background: var(--c-surface); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--c-text-dark);
}
.sf-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--c-accent); }
.application-chip {
  background: var(--c-surface); border: 1px solid var(--c-border-light);
  border-radius: 100px; padding: 10px 14px; text-align: center;
  font-size: 13px; font-weight: 500; color: var(--c-text-dark); transition: var(--tr);
}
.application-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.system-type-card {
  background: var(--c-white); border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); padding: 28px; height: 100%; transition: var(--tr);
}
.system-type-card h4 { font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--c-text-dark); margin-bottom: 10px; }
.system-type-card p { font-size: 14px; color: var(--c-text-dark-muted); line-height: 1.65; margin-bottom: 16px; }
.featured-type { border-color: var(--c-solar); box-shadow: 0 0 0 3px rgba(245,162,0,0.1); }
.type-recommended { display: inline-block; background: var(--c-solar); color: #0A0A0A; font-family: var(--f-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; margin-bottom: 12px; }
.system-badge { display: inline-block; font-family: var(--f-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 100px; background: var(--c-surface); color: var(--c-text-dark-muted); border: 1px solid var(--c-border-light); }
.amc-card { background: var(--c-white); border: 1px solid var(--c-border-light); border-radius: var(--r-lg); padding: 28px; height: 100%; transition: var(--tr); }
.amc-card:hover { box-shadow: var(--shadow-md); }
.fire-amc   { border-top: 2px solid var(--c-fire); }
.solar-amc  { border-top: 2px solid var(--c-solar); }
.security-amc { border-top: 2px solid var(--c-security); }
.amc-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.amc-icon svg { width: 24px; height: 24px; }
.fire-amc .amc-icon   { background: rgba(232,64,32,0.08); }
.fire-amc .amc-icon svg { fill: var(--c-fire); }
.solar-amc .amc-icon  { background: rgba(245,162,0,0.08); }
.solar-amc .amc-icon svg { fill: var(--c-solar); }
.security-amc .amc-icon { background: rgba(75,142,241,0.08); }
.security-amc .amc-icon svg { fill: var(--c-security); }
.amc-card h4 { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--c-text-dark); margin-bottom: 14px; }
.amc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.amc-list li { font-size: 13px; color: var(--c-text-dark); padding-left: 20px; position: relative; }
.amc-list li::before { content: '✓'; position: absolute; left: 0; color: var(--c-maintenance); font-weight: 700; font-size: 12px; }
.bg-primary-cta { background: linear-gradient(135deg, var(--c-accent) 0%, #A02510 100%); padding: var(--section-py) 0; }
.text-white { color: #fff !important; }
.text-white-70 { color: rgba(255,255,255,0.75) !important; }
.section-wrap { padding: var(--section-py) 0; }
.bg-surface { background: var(--c-surface); }

@media (max-width: 991px) {
  .service-hub-card { flex-direction: column; gap: 16px; }
  .service-features-grid { grid-template-columns: 1fr; }
  .contact-info-card, .contact-form-wrap { padding: 30px 24px; }
}
@media (max-width: 767px) {
  .service-hub-card { padding: 22px; }
  .shc-body h3 { font-size: 18px; }
  .system-type-card, .amc-card { padding: 22px; }
}

/* ═══════════════════════════════════════════
   27. Overlay & Pagination utilities
═══════════════════════════════════════════ */
.overlay { position: relative; }
.overlay::before { content: ''; position: absolute; inset: 0; background: rgba(10,10,10,0.4); z-index: 2; }
.overlay > * { position: relative; z-index: 3; }

.pagination { text-align: center; margin: 48px 0 0; display: block; }
.pagination-list { display: inline-flex; gap: 4px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border-light); }
.pagination-list li a { display: block; background: var(--c-white); color: var(--c-text-dark); padding: 0 18px; line-height: 42px; font-weight: 600; font-size: 13px; transition: var(--tr); }
.pagination-list li.active a, .pagination-list li:hover a { background: var(--c-accent); color: #fff; }

/* ═══════════════════════════════════════════
   28. Misc / Utilities
═══════════════════════════════════════════ */
.mb60    { margin-bottom: 60px; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.section-patern { display: none; }
.single-head { position: relative; }

/* Icon checkbox partial */
.icon-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(232,64,32,0.1); flex-shrink: 0; }
.icon-checkbox svg { fill: var(--c-accent); width: 12px; height: 12px; }

/* ═══════════════════════════════════════════
   404 Page
═══════════════════════════════════════════ */
.pnf-section {
  min-height: 100svh;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 60px) 0 80px;
}
.pnf-noise {
  position: absolute; inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  pointer-events: none;
}
.pnf-inner {
  position: relative;
  z-index: 2;
}
.pnf-code {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(120px, 22vw, 320px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(237,234,228,0.04);
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.pnf-content {
  position: relative;
  z-index: 3;
  max-width: 560px;
}
.pnf-title {
  font-family: var(--f-display);
  font-size: clamp(38px, 6vw, 80px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.97;
  letter-spacing: -0.03em;
  margin: 12px 0 20px;
}
.pnf-desc {
  font-size: 16px;
  color: rgba(237,234,228,0.45);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 400px;
}
.pnf-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ═══════════════════════════════════════════
   29. Responsive
═══════════════════════════════════════════ */
@media (max-width: 1199px) {
  :root { --section-py: 100px; }
}
@media (max-width: 991px) {
  :root { --section-py: 80px; }
  .section-title h2 { font-size: clamp(24px, 4vw, 36px); }
  .section-title { margin-bottom: 48px; }
  .breadcrumbs { padding: 130px 0 60px; }
  .services-hero { padding: 140px 0 80px; }
  .products-header { padding: 130px 0 60px; }
  .cta-title { font-size: clamp(28px, 5vw, 52px); }
}
@media (max-width: 767px) {
  :root { --section-py: 64px; }
  .section-title h2 { font-size: clamp(22px, 6vw, 30px); }
  .section-title { margin-bottom: 36px; }
  .breadcrumbs { padding: 110px 0 50px; }
  .breadcrumbs-content .page-title { font-size: clamp(24px, 6vw, 32px); }
  .services-hero { padding: 120px 0 60px; }
  .services-hero h1 { font-size: clamp(28px, 7vw, 44px); }
  .products-header { padding: 110px 0 48px; }
  .footer-middle { padding: 52px 0 32px; }
  .single-footer { margin-bottom: 28px; }
  .nav-overlay { padding: 0 6vw; }
}

/* ═══════════════════════════════════════════
   30. V5 Design System — "Authority in Protection"
   Cormorant Garamond serif + Space Grotesk sans
═══════════════════════════════════════════ */

/* ----- Shared v5 utilities ----- */
.v5-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.35);
}
.v5-eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: pulse-dot 2.5s ease infinite;
  flex-shrink: 0;
}
.v5-tag {
  display: block;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: 20px;
}
.v5-tag--muted { color: rgba(237,234,228,0.35); }
.v5-tag--dark  { color: var(--c-text-dark-muted); }
.v5-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap 0.3s ease;
}
.v5-text-link:hover { gap: 14px; }
.v5-outline-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid rgba(237,234,228,0.25);
  border-radius: 100px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.7);
  flex-shrink: 0;
  transition: all 0.4s ease;
}
.v5-outline-btn:hover {
  border-color: var(--c-text);
  color: var(--c-text);
  background: rgba(237,234,228,0.06);
}

/* ----- V5 Hero ----- */
.v5-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  background: var(--c-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.v5-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.v5-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
  will-change: transform;
}
.v5-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0) 35%, rgba(10,10,10,0.92) 100%),
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(10,10,10,0.3) 100%);
}
.v5-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 80px;
}
.v5-hero__top {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 16px;
}
.v5-hero__title {
  display: block;
  margin-bottom: 44px;
  overflow: visible;
}
.v5-hero__title-serif {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(76px, 13vw, 188px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.v5-hero__title-sans {
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(56px, 9.5vw, 138px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: rgba(237,234,228,0.55);
}
.v5-hero__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(237,234,228,0.1);
  flex-wrap: wrap;
}
.v5-hero__sub {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(237,234,228,0.38);
}
.v5-hero__scroll {
  position: absolute;
  bottom: 36px;
  right: 52px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237,234,228,0.22);
}
.v5-hero__scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(237,234,228,0.1);
  position: relative;
  overflow: hidden;
}
.v5-hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--c-accent);
  animation: v5-scroll 2s ease-in-out infinite;
}
@keyframes v5-scroll {
  0%   { top: -50%; }
  100% { top: 110%; }
}

@media (max-width: 767px) {
  .v5-hero__title-serif { font-size: clamp(60px, 16vw, 100px); }
  .v5-hero__title-sans  { font-size: clamp(46px, 12vw, 78px); }
  .v5-hero__scroll      { display: none; }
  .v5-hero__footer      { flex-direction: column; align-items: flex-start; gap: 20px; }
  .v5-hero__inner       { padding-bottom: 52px; }
}

/* ----- V5 Company Intro (light section) ----- */
.v5-about {
  background: var(--c-surface);
  padding: 100px 0 80px;
}
.v5-about__divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
  color: rgba(13,13,13,0.25);
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.v5-about__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(13,13,13,0.1);
}
.v5-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.v5-about__heading {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-text-dark);
  margin-bottom: 20px;
}
.v5-about__heading strong {
  font-style: normal;
  font-weight: 600;
  color: var(--c-accent);
}
.v5-about__body {
  font-size: 15px;
  color: var(--c-text-dark-muted);
  line-height: 1.8;
  max-width: 460px;
  margin-bottom: 28px;
}
/* Stats 2x2 */
.v5-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(13,13,13,0.08);
  border: 1px solid rgba(13,13,13,0.08);
}
.v5-stat {
  background: var(--c-surface);
  padding: 40px 32px;
}
.v5-stat__n {
  font-family: var(--f-serif);
  font-size: clamp(52px, 6.5vw, 84px);
  font-weight: 400;
  color: var(--c-text-dark);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 10px;
}
.v5-stat__n sup {
  font-size: 0.45em;
  color: var(--c-accent);
  vertical-align: super;
}
.v5-stat__l {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-dark-muted);
  line-height: 1.4;
}

@media (max-width: 991px) {
  .v5-about__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 575px) {
  .v5-stat { padding: 28px 20px; }
  .v5-stat__n { font-size: clamp(44px, 11vw, 64px); }
}

/* ----- V5 Work / Gallery (dark) ----- */
.v5-work {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding: 100px 0;
}
.v5-work__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 44px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-border);
}
.v5-work__heading {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.v5-work__heading strong {
  font-style: normal;
  font-weight: 600;
}
/* 1 large left + 2 stacked right */
.v5-work__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
}
.v5-work__col-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v5-work__item {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-3);
}
.v5-work__img {
  width: 100%;
  overflow: hidden;
}
.v5-work__item--lg .v5-work__img {
  height: 100%;
  min-height: 520px;
}
.v5-work__col-right .v5-work__item .v5-work__img {
  aspect-ratio: 4/3;
}
.v5-work__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.v5-work__item:hover .v5-work__img img { transform: scale(1.01); }
.v5-work__info {
  padding: 14px 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.v5-work__cat {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  flex-shrink: 0;
}
.v5-work__name {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: rgba(237,234,228,0.55);
  line-height: 1.3;
  margin: 0;
  text-align: right;
}

.v5-work__item--lg {
  display: flex;
  flex-direction: column;
}
.v5-work__item--lg .v5-work__img {
  flex: 1;
  min-height: 480px;
  height: auto;
}

@media (max-width: 767px) {
  .v5-work__grid { grid-template-columns: 1fr; }
  .v5-work__item--lg { display: block; }
  .v5-work__item--lg .v5-work__img { flex: none; height: auto; min-height: 280px; aspect-ratio: 4/3; }
  .v5-work__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ----- V5 Services Hero (services main page) ----- */
.v5-shero {
  background: var(--c-bg);
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  overflow: hidden;
}
.v5-shero__ghost {
  position: absolute;
  top: -5%;
  right: -4%;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: min(50vw, 560px);
  font-weight: 300;
  color: rgba(237,234,228,0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}
.v5-shero__content { position: relative; z-index: 2; }
.v5-shero h1 {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(52px, 9vw, 120px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.93;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  max-width: 900px;
}
.v5-shero h1 em {
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 0.7em;
  color: rgba(237,234,228,0.4);
  display: block;
  letter-spacing: -0.04em;
}
.v5-shero p {
  font-size: 15px;
  color: rgba(237,234,228,0.42);
  line-height: 1.8;
  max-width: 580px;
}

/* ----- V5 Service Tiles (light section) ----- */
.v5-service-tiles {
  background: var(--c-surface);
  padding: 80px 0;
}
.v5-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(13,13,13,0.07);
  border: 1px solid rgba(13,13,13,0.07);
  margin-top: 48px;
}
.v5-tile {
  background: var(--c-surface);
  padding: 52px 48px 44px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}
.v5-tile:hover { background: var(--c-white); }
.v5-tile__stripe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.v5-tile:hover .v5-tile__stripe { transform: scaleX(1); }
.v5-tile--fire .v5-tile__stripe       { background: var(--c-fire); }
.v5-tile--solar .v5-tile__stripe      { background: var(--c-solar); }
.v5-tile--security .v5-tile__stripe   { background: var(--c-security); }
.v5-tile--maintenance .v5-tile__stripe { background: var(--c-maintenance); }

.v5-tile__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 80px;
  font-weight: 300;
  color: rgba(13,13,13,0.05);
  line-height: 1;
  letter-spacing: -0.05em;
  position: absolute;
  top: 20px;
  right: 28px;
  pointer-events: none;
  user-select: none;
}
.v5-tile__cat {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.v5-tile--fire .v5-tile__cat       { color: var(--c-fire); }
.v5-tile--solar .v5-tile__cat      { color: var(--c-solar); }
.v5-tile--security .v5-tile__cat   { color: var(--c-security); }
.v5-tile--maintenance .v5-tile__cat { color: var(--c-maintenance); }

.v5-tile h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 300;
  color: var(--c-text-dark);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 16px;
  flex: 1;
}
.v5-tile p {
  font-size: 14px;
  color: var(--c-text-dark-muted);
  line-height: 1.75;
  margin-bottom: 28px;
}
.v5-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-dark-muted);
  transition: gap 0.3s ease, color 0.3s ease;
  margin-top: auto;
}
.v5-tile:hover .v5-tile__more {
  gap: 14px;
  color: var(--c-text-dark);
}

@media (max-width: 767px) {
  .v5-tiles-grid { grid-template-columns: 1fr; }
  .v5-tile { padding: 36px 28px 32px; }
  .v5-tile__num { font-size: 56px; }
}

/* ----- V5 Services Reasons (dark) ----- */
.v5-reasons {
  background: var(--c-bg);
  padding: 100px 0;
  border-top: 1px solid var(--c-border);
}
.v5-reasons__head {
  margin-bottom: 64px;
}
.v5-reasons__title {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.95;
  letter-spacing: -0.025em;
  max-width: 480px;
  margin-top: 12px;
}
.v5-reason-list {
  list-style: none;
  padding: 0; margin: 0;
}
.v5-reason {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(237,234,228,0.07);
  align-items: start;
  position: relative;
}
.v5-reason:first-child { border-top: 1px solid rgba(237,234,228,0.07); }
.v5-reason__num {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(237,234,228,0.2);
  padding-top: 5px;
}
.v5-reason h3 {
  font-family: var(--f-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: rgba(237,234,228,0.8);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}
.v5-reason:hover h3 { color: var(--c-text); }
.v5-reason p {
  font-size: 14px;
  color: rgba(237,234,228,0.38);
  line-height: 1.75;
  margin: 0;
}

/* ----- V5 Services CTA ----- */
.v5-services-cta {
  background: var(--c-bg);
  padding: 100px 0;
  text-align: center;
}
.v5-services-cta h2 {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 300;
  color: var(--c-text);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.v5-services-cta p {
  font-size: 15px;
  color: rgba(237,234,228,0.38);
  margin-bottom: 40px;
}
.v5-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ----- V5 Individual Service Page Hero ----- */
.services-hero {
  background: var(--c-bg);
  padding: calc(var(--nav-h) + 100px) 0 90px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
}
.services-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  z-index: 0;
}
.services-hero .container { position: relative; z-index: 2; }
.hero-breadcrumb { margin-bottom: 32px; }
.breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0; margin: 0;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.breadcrumb-list li { color: rgba(237,234,228,0.3); }
.breadcrumb-list li:not(:last-child)::after { content: none; }
.breadcrumb-list a { color: rgba(237,234,228,0.5); transition: color 0.3s ease; }
.breadcrumb-list a:hover { color: var(--c-text); }
.service-page-badge {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.fire-badge       { background: rgba(232,64,32,0.12);  color: var(--c-fire); }
.solar-badge      { background: rgba(245,162,0,0.12);  color: var(--c-solar); }
.security-badge   { background: rgba(75,142,241,0.12); color: var(--c-security); }
.maintenance-badge { background: rgba(22,163,74,0.12); color: var(--c-maintenance); }
.contact-badge    { background: rgba(232,64,32,0.12);  color: var(--c-accent); }

.services-hero h1 {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 300;
  color: var(--c-text);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  max-width: 760px;
}
.services-hero h1 em {
  font-style: normal;
  font-family: var(--f-display);
  font-weight: 300;
  color: var(--c-accent);
}
.services-hero p {
  font-size: 16px;
  color: rgba(237,234,228,0.42);
  line-height: 1.8;
  max-width: 560px;
}
.service-page-icon {
  display: none;
}

@media (max-width: 767px) {
  .services-hero { padding: calc(var(--nav-h) + 64px) 0 64px; }
  .services-hero h1 { font-size: clamp(36px, 10vw, 60px); }
}

/* ----- Also fix why-icon blue on services page ----- */
.why-icon {
  background: rgba(232,64,32,0.08) !important;
}
.why-icon svg { fill: var(--c-accent) !important; }

/* ═══════════════════════════════════════════
   31. Gallery Dark Override
═══════════════════════════════════════════ */
.gallery-section--dark {
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}
.gallery-section--dark .gallery-item-new {
  background: var(--c-bg-3);
  border-radius: var(--r-sm);
}
.gallery-section--dark .gallery-img-wrap {
  clip-path: inset(100% 0 0 0);
}

/* ═══════════════════════════════════════════
   31. Company Intro Section (editorial)
═══════════════════════════════════════════ */
.co-intro {
  background: var(--c-surface);
  padding: 100px 0 80px;
}
.co-intro__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 56px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-border-light);
}
.co-intro__tag {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.co-intro__rule {
  flex: 1;
  height: 1px;
  background: var(--c-border-light);
}
.co-intro__year {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--c-text-dark-muted);
}
.co-intro__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.co-intro__statement {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--c-text-dark);
}
.co-intro__statement strong { font-weight: 700; }
.co-intro__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  transition: gap 0.3s ease;
}
.co-intro__link:hover { gap: 16px; }
.co-intro__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border-light);
  border: 1px solid var(--c-border-light);
}
.co-stat {
  background: var(--c-surface);
  padding: 40px 36px;
}
.co-stat__num {
  font-family: var(--f-display);
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 300;
  color: var(--c-text-dark);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.co-stat__num sup {
  font-size: 0.45em;
  color: var(--c-accent);
  vertical-align: super;
}
.co-stat__label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-dark-muted);
  line-height: 1.4;
}

@media (max-width: 991px) {
  .co-intro__body { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 575px) {
  .co-stat { padding: 28px 24px; }
  .co-stat__num { font-size: clamp(44px, 10vw, 64px); }
}

/* ═══════════════════════════════════════════════════════════════
   SPS DESIGN SYSTEM v6 — "Precision and Trust"
   Blue #1252D6 | Dark #0B0B0D | Light #F6F5F1
   Strictly alternating sections, no gimmicks.
═══════════════════════════════════════════════════════════════ */

/* -- btn-sps override — consistent blue -- */
.btn-sps { background: #1252D6 !important; color: #fff !important; border-color: #1252D6 !important; }
.btn-sps:hover { background: #0D3FB0 !important; border-color: #0D3FB0 !important; }
.why-icon { background: rgba(18,82,214,0.08) !important; }
.why-icon svg { stroke: #1252D6 !important; }
.cta-section { background: #0B0B0D; border-top: 1px solid rgba(235,235,234,0.07); }
.cta-ghost { font-family: var(--f-serif) !important; font-style: italic; color: rgba(235,235,234,0.025) !important; }

/* -- sps-hero -- */
.sps-hero { min-height: 100svh; background: #0B0B0D; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.sps-hero__inner { flex: 1; display: flex; flex-direction: column; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 44px; }
.sps-hero__topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 28px; border-bottom: 1px solid rgba(235,235,234,0.08); flex-wrap: wrap; gap: 12px; }
.sps-hero__eyebrow { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(235,235,234,0.25); }
.sps-hero__loc { font-family: var(--f-display); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(235,235,234,0.15); }
.sps-hero__title-wrap { flex: 1; display: flex; align-items: center; }
.sps-hero__title { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(68px, 13vw, 196px); line-height: 0.91; letter-spacing: -0.025em; color: #EBEBEA; margin: 0; }
.sps-hero__t-line { display: block; }
.sps-hero__t-thin { display: block; font-family: var(--f-display); font-style: normal; font-weight: 200; font-size: 0.58em; color: rgba(235,235,234,0.27); letter-spacing: -0.04em; line-height: 1.1; margin-top: 0.08em; }
.sps-hero__bottombar { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(235,235,234,0.08); gap: 24px; flex-wrap: wrap; }
.sps-hero__sub { font-family: var(--f-display); font-size: 13px; color: rgba(235,235,234,0.3); max-width: 420px; line-height: 1.65; font-weight: 400; }
.sps-hero__ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sps-hero__tel { font-family: var(--f-display); font-size: 13px; font-weight: 600; color: rgba(235,235,234,0.4); letter-spacing: 0.04em; transition: color 0.3s ease; }
.sps-hero__tel:hover { color: #EBEBEA; }
@media (max-width: 767px) {
  .sps-hero__title { font-size: clamp(56px, 16vw, 90px); }
  .sps-hero__title-wrap { padding: 36px 0 28px; }
  .sps-hero__bottombar { flex-direction: column; align-items: flex-start; }
}

/* -- sps-services (light) -- */
.sps-services { background: #F6F5F1; padding: var(--sps-py) 0; }
.sps-svcs-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; padding-bottom: 28px; border-bottom: 1px solid rgba(13,13,13,0.08); }
.sps-svcs-title { font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 40px); font-weight: 300; color: #0D0D0D; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.sps-svcs-title strong { font-weight: 700; }
.sps-svcs-desc { font-family: var(--f-display); font-size: 14px; color: rgba(13,13,13,0.42); line-height: 1.7; }
.sps-svc-list { list-style: none; margin: 0; padding: 0; }
.sps-svc-item { display: grid; grid-template-columns: 52px 1fr 32px; align-items: center; gap: 24px; padding: 30px 0; border-top: 1px solid rgba(13,13,13,0.09); text-decoration: none; position: relative; transition: padding-left 0.45s cubic-bezier(0.76,0,0.24,1), background 0.3s; cursor: pointer; }
.sps-svc-item:last-child { border-bottom: 1px solid rgba(13,13,13,0.09); }
.sps-svc-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #1252D6; transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s cubic-bezier(0.76,0,0.24,1); }
.sps-svc-item:hover { padding-left: 16px; background: rgba(18,82,214,0.028); }
.sps-svc-item:hover::before { transform: scaleY(1); }
.sps-svc-num { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: rgba(13,13,13,0.17); transition: color 0.35s; align-self: start; padding-top: 5px; }
.sps-svc-item:hover .sps-svc-num { color: #1252D6; }
.sps-svc-body h3 { font-family: var(--f-display); font-size: clamp(20px, 2.8vw, 31px); font-weight: 300; color: #0D0D0D; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 7px; transition: color 0.35s; }
.sps-svc-item:hover .sps-svc-body h3 { color: #1252D6; }
.sps-svc-tags { font-family: var(--f-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(13,13,13,0.28); }
.sps-svc-arrow { color: rgba(13,13,13,0.18); transition: transform 0.35s, color 0.35s; display: flex; align-items: center; justify-content: center; }
.sps-svc-item:hover .sps-svc-arrow { transform: translateX(6px); color: #1252D6; }
.sps-svc-arrow svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 767px) {
  .sps-svcs-header { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .sps-svc-item { grid-template-columns: 38px 1fr 24px; gap: 14px; padding: 22px 0; }
  .sps-svc-item:hover { padding-left: 10px; }
}

/* -- sps-stmt (dark) -- */
.sps-stmt { background: #0B0B0D; padding: var(--sps-py) 0; }
.sps-stmt__label { display: block; font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(235,235,234,0.18); margin-bottom: 36px; }
.sps-stmt__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(30px, 4.8vw, 70px); font-weight: 300; color: #EBEBEA; line-height: 1.1; letter-spacing: -0.02em; max-width: 980px; margin-bottom: 68px; }
.sps-stmt__quote em { font-style: normal; color: #1252D6; }
.sps-stmt__stats { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(235,235,234,0.07); }
.sps-stmt-stat { padding: 36px 28px; border-right: 1px solid rgba(235,235,234,0.07); }
.sps-stmt-stat:last-child { border-right: none; }
.sps-stmt-stat__n { display: block; font-family: var(--f-serif); font-size: clamp(42px, 5vw, 72px); font-weight: 300; color: #EBEBEA; line-height: 1; letter-spacing: -0.04em; margin-bottom: 10px; }
.sps-stmt-stat__n sup { font-size: 0.38em; vertical-align: top; color: #1252D6; margin-top: 8px; display: inline-block; }
.sps-stmt-stat__l { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(235,235,234,0.2); }
@media (max-width: 991px) { .sps-stmt__stats { grid-template-columns: repeat(2,1fr); } .sps-stmt-stat:nth-child(2) { border-right: none; } .sps-stmt-stat:nth-child(3) { border-top: 1px solid rgba(235,235,234,0.07); } .sps-stmt-stat:nth-child(4) { border-top: 1px solid rgba(235,235,234,0.07); border-right: none; } }
@media (max-width: 575px) { .sps-stmt-stat { padding: 24px 18px; } }

/* -- sps-projs (light) -- */
.sps-projs { background: #F6F5F1; padding: var(--sps-py) 0; }
.sps-projs__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid rgba(13,13,13,0.09); }
.sps-projs__title { font-family: var(--f-display); font-size: clamp(24px, 3.2vw, 42px); font-weight: 300; color: #0D0D0D; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
.sps-projs__title strong { font-weight: 700; }
.sps-projs__grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; align-items: stretch; }
.sps-projs__right { display: flex; flex-direction: column; gap: 10px; }
.sps-proj { position: relative; overflow: hidden; background: #E8E7E3; display: flex; flex-direction: column; }
.sps-proj__img { overflow: hidden; }
.sps-proj--lg { flex: 1; }
.sps-proj--lg .sps-proj__img { min-height: 460px; height: 100%; }
.sps-projs__right .sps-proj .sps-proj__img { aspect-ratio: 16/10; }
.sps-proj__img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform; }
.sps-proj:hover .sps-proj__img img { transform: scale(1.0); }
.sps-proj__cap { padding: 12px 2px 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sps-proj__cat { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #1252D6; }
.sps-proj__name { font-family: var(--f-display); font-size: 12px; font-weight: 400; color: rgba(13,13,13,0.38); text-align: right; }
@media (max-width: 767px) {
  .sps-projs__grid { grid-template-columns: 1fr; }
  .sps-proj--lg .sps-proj__img { min-height: 260px; height: auto; aspect-ratio: 4/3; }
  .sps-projs__right .sps-proj .sps-proj__img { aspect-ratio: 4/3; }
  .sps-projs__head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* -- sps-page-hero (services hub page) -- */
.sps-page-hero { background: #0B0B0D; min-height: 56vh; display: flex; align-items: flex-end; padding-top: calc(var(--nav-h) + 80px); padding-bottom: 68px; border-bottom: 1px solid rgba(235,235,234,0.07); position: relative; overflow: hidden; }
.sps-page-hero__ghost { position: absolute; right: -3%; top: -5%; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: min(46vw, 520px); line-height: 1; letter-spacing: -0.05em; color: rgba(235,235,234,0.022); pointer-events: none; user-select: none; z-index: 0; }
.sps-page-hero__inner { position: relative; z-index: 1; }
.sps-page-hero .hero-breadcrumb { margin-bottom: 24px; }
.sps-page-hero h1 { font-family: var(--f-serif); font-style: italic; font-size: clamp(46px, 8vw, 108px); font-weight: 300; color: #EBEBEA; line-height: 0.95; letter-spacing: -0.025em; max-width: 860px; margin-bottom: 24px; }
.sps-page-hero h1 em { font-style: normal; font-family: var(--f-display); font-weight: 200; font-size: 0.68em; color: rgba(235,235,234,0.27); display: block; letter-spacing: -0.04em; }
.sps-page-hero p { font-size: 15px; color: rgba(235,235,234,0.36); line-height: 1.8; max-width: 560px; }

/* -- sps-whyus (dark, services page) -- */
.sps-whyus { background: #0B0B0D; padding: var(--sps-py) 0; border-top: 1px solid rgba(235,235,234,0.07); }
.sps-whyus__title { font-family: var(--f-serif); font-style: italic; font-size: clamp(32px, 4.2vw, 58px); font-weight: 300; color: #EBEBEA; letter-spacing: -0.025em; line-height: 0.97; margin-top: 14px; margin-bottom: 56px; max-width: 440px; }
.sps-why-list { list-style: none; margin: 0; padding: 0; }
.sps-why-item { display: grid; grid-template-columns: 48px 1fr; gap: 28px; padding: 34px 0; border-top: 1px solid rgba(235,235,234,0.07); transition: padding-left 0.4s ease; }
.sps-why-item:last-child { border-bottom: 1px solid rgba(235,235,234,0.07); }
.sps-why-item:hover { padding-left: 10px; }
.sps-why-num { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: rgba(235,235,234,0.14); padding-top: 6px; }
.sps-why-item h3 { font-family: var(--f-display); font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: rgba(235,235,234,0.62); margin-bottom: 9px; transition: color 0.3s; }
.sps-why-item:hover h3 { color: #EBEBEA; }
.sps-why-item p { font-size: 14px; color: rgba(235,235,234,0.28); line-height: 1.75; margin: 0; }

/* -- sps-svc-cta (dark, services page bottom) -- */
.sps-svc-cta { background: #0B0B0D; padding: var(--sps-py) 0; text-align: center; border-top: 1px solid rgba(235,235,234,0.07); }
.sps-svc-cta h2 { font-family: var(--f-serif); font-style: italic; font-size: clamp(32px, 5vw, 66px); font-weight: 300; color: #EBEBEA; letter-spacing: -0.025em; line-height: 1.05; max-width: 600px; margin: 16px auto 18px; }
.sps-svc-cta p { font-size: 15px; color: rgba(235,235,234,0.3); margin-bottom: 36px; }
.sps-svc-cta-btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════
   CINEMATIC HERO — v7
   Full-bleed photography · Cormorant italic 13.5vw
   Content anchored to bottom · Gradient overlay
═══════════════════════════════════════════════════════ */
.c-hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  background: #08080C;
  overflow: hidden;
}
.c-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.c-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(28%) contrast(1.14) brightness(0.82);
  transform: scale(1.06);
  will-change: transform;
  transition: none;
}
.c-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(8,8,12,0.94)  0%,
    rgba(8,8,12,0.38)  30%,
    rgba(8,8,12,0.55)  52%,
    rgba(8,8,12,0.93)  78%,
    #08080C           100%
  );
}
.c-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 28px);
  padding-bottom: 56px;
}
/* top bar — stays at top, auto margin pushes rest to bottom */
.c-hero__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: auto;
  padding-bottom: 0;
}
.c-hero__eyebrow,
.c-hero__loc {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(230,227,218,0.22);
  display: inline-block;
}
/* headline — Cormorant italic, fills width */
.c-hero__title {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 13.5vw, 212px);
  line-height: 0.87;
  letter-spacing: -0.025em;
  color: #E6E3DC;
  margin: 0 0 28px;
}
.c-hero__title span { display: block; }
/* bottom bar — service tags + CTA */
.c-hero__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(230,227,218,0.1);
  gap: 20px;
  flex-wrap: wrap;
}
.c-hero__tags {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230,227,218,0.3);
}

@media (max-width: 767px) {
  .c-hero__title { font-size: clamp(60px, 15.5vw, 96px); }
  .c-hero__bar   { flex-direction: column; align-items: flex-start; }
  .c-hero__inner { padding-bottom: 40px; }
}

/* force all sps- sections to use the finalised palette */
.sps-services,
.sps-projs { background: #F4F3EF; }
.sps-stmt,
.sps-whyus,
.sps-svc-cta,
.cta-section { background: #08080C; }

/* ═══════════════════════════════════════════════════════════════════
   SPS DESIGN SYSTEM v8 — "Soft Blue Editorial"
   Source: ui-ux-pro-max (Insurance/Protection #41 + Classic Elegant #1
   + Scroll-Triggered Storytelling #10)
   Palette: warm paper #F4F2EC · deep slate-blue #0E2A47 · soft blue #3E6FB0
   Fonts: Playfair Display (serif) · Inter (body) · Space Grotesk (labels)
═══════════════════════════════════════════════════════════════════ */

/* base canvas → warm paper, soft text */
body { background: #F4F2EC; color: #1C2B3A; }

/* ── shared eyebrow / label ── */
.v8-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.v8-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.4;
}
.v8-eyebrow--light { color: rgba(244,242,236,0.55); }
.v8-eyebrow--ink   { color: var(--c-accent); }

/* ── soft pill button ── */
.v8-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  border: none; cursor: pointer;
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  background: #3E6FB0; color: #fff;
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), background 0.4s, box-shadow 0.4s;
  box-shadow: 0 8px 24px rgba(62,111,176,0.22);
}
.v8-btn:hover { background: #2E588F; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(62,111,176,0.32); color:#fff; }
.v8-btn svg { width: 16px; height: 16px; transition: transform 0.4s; }
.v8-btn:hover svg { transform: translateX(4px); }

.v8-btn--ghost {
  background: transparent; color: #1C2B3A;
  border: 1px solid rgba(28,43,58,0.2); box-shadow: none;
}
.v8-btn--ghost:hover { background: rgba(28,43,58,0.04); border-color: rgba(28,43,58,0.4); color:#1C2B3A; transform: translateY(-2px); box-shadow:none; }
.v8-btn--light-ghost {
  background: transparent; color: #F4F2EC;
  border: 1px solid rgba(244,242,236,0.22); box-shadow: none;
}
.v8-btn--light-ghost:hover { background: rgba(244,242,236,0.06); border-color: rgba(244,242,236,0.5); color:#F4F2EC; transform: translateY(-2px); box-shadow:none; }

.v8-textlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  color: var(--c-accent); transition: gap 0.35s;
}
.v8-textlink:hover { gap: 15px; color: var(--c-accent); }
.v8-textlink svg { width: 15px; height: 15px; }

/* ═══════════════════════════════
   HERO — warm paper, editorial
═══════════════════════════════ */
.v8-hero {
  position: relative; min-height: 100svh;
  background: #F4F2EC;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.v8-hero__soft-glow {
  position: absolute; z-index: 0;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  right: -15%; top: -20%;
  background: radial-gradient(circle, rgba(62,111,176,0.10) 0%, rgba(62,111,176,0) 65%);
  pointer-events: none;
}
.v8-hero__inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + 40px); padding-bottom: 48px;
}
.v8-hero__top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px; margin-bottom: auto;
}
.v8-hero__top .v8-eyebrow { color: #6E7C8C; }
.v8-hero__loc {
  font-family: var(--f-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: #9AA5B1;
}
.v8-hero__headline {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(42px, 6.5vw, 96px);
  line-height: 0.98; letter-spacing: -0.018em;
  color: #14365A; margin: 0 0 34px; max-width: 14ch;
}
.v8-hero__headline em {
  font-style: italic; font-weight: 500; color: #3E6FB0;
  position: relative;
}
.v8-hero__headline .v8-thin {
  display: block; font-family: var(--f-display); font-weight: 300;
  font-size: 0.42em; letter-spacing: -0.01em; color: #6E7C8C;
  margin-top: 0.35em; line-height: 1.2; max-width: 30ch;
}
.v8-hero__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
  padding-top: 30px; border-top: 1px solid rgba(28,43,58,0.12);
}
.v8-hero__sub {
  font-family: var(--f-body); font-size: 15px; line-height: 1.7;
  color: #5A6675; max-width: 380px;
}
.v8-hero__ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.v8-hero__scrollcue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--f-display); font-size: 9px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: #9AA5B1;
}
.v8-hero__scrollcue span.line {
  width: 1px; height: 44px; background: rgba(28,43,58,0.15); position: relative; overflow: hidden;
}
.v8-hero__scrollcue span.line::after {
  content:''; position:absolute; top:-50%; left:0; width:100%; height:45%;
  background: #3E6FB0; animation: v8scroll 2.2s ease-in-out infinite;
}
@keyframes v8scroll { 0%{top:-50%} 100%{top:110%} }

@media (max-width: 767px) {
  .v8-hero__headline { font-size: clamp(46px, 12vw, 76px); }
  .v8-hero__foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .v8-hero__scrollcue { display: none; }
}

/* ═══════════════════════════════
   INTRO — soft two column
═══════════════════════════════ */
.v8-intro { background: #FBFAF6; padding: var(--sps-py) 0; }
.v8-intro__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 7vw, 110px);
  align-items: start;
}
.v8-intro__left .v8-eyebrow { color: var(--c-accent); margin-bottom: 22px; }
.v8-intro__kicker {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px); color: #14365A; line-height: 1.3;
}
.v8-intro__body p {
  font-family: var(--f-body); font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.5; color: #2A3A4B; font-weight: 300; letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.v8-intro__body p strong { font-weight: 600; color: #14365A; }
@media (max-width: 900px){ .v8-intro__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ═══════════════════════════════
   SERVICES — soft interactive list
═══════════════════════════════ */
.v8-services { background: #F4F2EC; padding: var(--sps-py) 0; }
.v8-sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap; margin-bottom: 16px;
}
.v8-sec-title {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em;
  color: #14365A; margin: 14px 0 0;
}
.v8-sec-title em { font-style: italic; color: #3E6FB0; }
.v8-svc-list { list-style: none; margin: 44px 0 0; padding: 0; }
.v8-svc {
  position: relative; display: grid;
  grid-template-columns: 64px 1fr auto; align-items: center; gap: 28px;
  padding: 34px 28px; border-radius: 18px;
  text-decoration: none; overflow: hidden;
  transition: background 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  border-bottom: 1px solid rgba(28,43,58,0.1);
}
.v8-svc:last-child { border-bottom: none; }
.v8-svc::before {
  content:''; position:absolute; inset:0; border-radius:18px;
  background: linear-gradient(100deg, #DCE7F2 0%, #EAF0F7 100%);
  opacity: 0; transition: opacity 0.5s; z-index: 0;
}
.v8-svc:hover::before { opacity: 1; }
.v8-svc > * { position: relative; z-index: 1; }
.v8-svc__num {
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  color: #9AA5B1; transition: color 0.4s; align-self: start; padding-top: 8px;
}
.v8-svc:hover .v8-svc__num { color: #3E6FB0; }
.v8-svc__name {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.05;
  color: #14365A; margin-bottom: 8px; transition: color 0.4s;
}
.v8-svc:hover .v8-svc__name { color: #2E588F; }
.v8-svc__tags {
  font-family: var(--f-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: #6E7C8C;
}
.v8-svc__arrow {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(28,43,58,0.18); color: #14365A;
  transition: all 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
}
.v8-svc:hover .v8-svc__arrow { background: #3E6FB0; border-color: #3E6FB0; color: #fff; }
/* SVG glyph is drawn as ↗ — keep it tilted by default (reads as "open this page");
   on hover it nudges diagonally outward as the circle fills with the accent. */
.v8-svc__arrow svg { width: 20px; height: 20px; transform: rotate(0deg); transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.v8-svc:hover .v8-svc__arrow svg { transform: translate(3px, -3px); }
@media (max-width: 767px){
  .v8-svc { grid-template-columns: 40px 1fr; gap: 16px; padding: 26px 16px; }
  .v8-svc__arrow { display: none; }
}

/* ═══════════════════════════════
   APPROACH — process chapters (ink/dark)
═══════════════════════════════ */
.v8-approach { background: #0E2A47; padding: var(--sps-py) 0; color: #E7EDF4; }
.v8-approach .v8-sec-title { color: #F4F2EC; }
.v8-approach .v8-sec-title em { color: #7FA8D8; }
.v8-approach__intro {
  font-family: var(--f-body); font-size: 16px; line-height: 1.7;
  color: rgba(231,237,244,0.6); max-width: 440px; margin-top: 18px;
}
.v8-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: rgba(231,237,244,0.1); border: 1px solid rgba(231,237,244,0.1); border-radius: 18px; overflow:hidden; }
.v8-step { background: #0E2A47; padding: 40px 30px; transition: background 0.5s; }
.v8-step:hover { background: #14365A; }
.v8-step__n {
  font-family: var(--f-serif); font-style: italic; font-size: 44px; font-weight: 500;
  color: #7FA8D8; line-height: 1; margin-bottom: 26px;
}
.v8-step h3 {
  font-family: var(--f-display); font-size: 18px; font-weight: 600;
  color: #F4F2EC; margin-bottom: 12px; letter-spacing: -0.01em;
}
.v8-step p { font-family: var(--f-body); font-size: 14px; line-height: 1.65; color: rgba(231,237,244,0.55); }
@media (max-width: 900px){ .v8-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .v8-steps { grid-template-columns: 1fr; } }

/* ═══════════════════════════════
   PROJECTS — editorial grid
═══════════════════════════════ */
.v8-projects { background: #FBFAF6; padding: var(--sps-py) 0; }
.v8-proj-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 48px; }
.v8-proj-col { display: flex; flex-direction: column; gap: 14px; }
.v8-proj { position: relative; overflow: hidden; border-radius: 18px; background: #DCE7F2; display:flex; flex-direction:column; }
.v8-proj__img { overflow: hidden; }
.v8-proj--lg { flex: 1; }
.v8-proj--lg .v8-proj__img { min-height: 480px; height: 100%; }
.v8-proj-col .v8-proj .v8-proj__img { aspect-ratio: 16/11; }
.v8-proj__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.05); transition: transform 1s cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform;
}
.v8-proj:hover .v8-proj__img img { transform: scale(1.0); }
.v8-proj__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 26px 22px; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
  background: linear-gradient(to top, rgba(14,42,71,0.78) 0%, rgba(14,42,71,0) 100%);
}
.v8-proj__cat { font-family: var(--f-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #BFD3EA; }
.v8-proj__name { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: #fff; text-align: right; }
@media (max-width: 767px){
  .v8-proj-grid { grid-template-columns: 1fr; }
  .v8-proj--lg .v8-proj__img { min-height: 280px; height:auto; aspect-ratio: 4/3; }
  .v8-proj-col .v8-proj .v8-proj__img { aspect-ratio: 4/3; }
}

/* ═══════════════════════════════
   STATS / TRUST — soft sky band
═══════════════════════════════ */
.v8-stats { background: #DCE7F2; padding: clamp(56px,7vw,90px) 0; }
.v8-stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.v8-stat { text-align: left; }
.v8-stat__n {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(48px, 6vw, 92px); line-height: 1; letter-spacing: -0.03em;
  color: #14365A; margin-bottom: 12px;
}
.v8-stat__n sup { font-size: 0.4em; color: #3E6FB0; vertical-align: super; }
.v8-stat__l { font-family: var(--f-display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5A6675; }
@media (max-width: 767px){ .v8-stats__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }

/* ═══════════════════════════════
   CTA — warm friendly close
═══════════════════════════════ */
.v8-cta { background: #0E2A47; padding: clamp(80px,11vw,150px) 0; text-align: center; position: relative; overflow: hidden; }
.v8-cta__glow {
  position: absolute; z-index:0; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  left: 50%; top: 30%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(127,168,216,0.14) 0%, rgba(127,168,216,0) 65%); pointer-events: none;
}
.v8-cta__inner { position: relative; z-index: 2; }
.v8-cta .v8-eyebrow { color: #7FA8D8; justify-content: center; margin-bottom: 26px; }
.v8-cta h2 {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(38px, 6vw, 86px); line-height: 1.02; letter-spacing: -0.02em;
  color: #F4F2EC; margin: 0 auto 22px; max-width: 16ch;
}
.v8-cta h2 em { font-style: italic; color: #7FA8D8; }
.v8-cta__sub { font-family: var(--f-body); font-size: 16px; line-height: 1.7; color: rgba(231,237,244,0.6); max-width: 520px; margin: 0 auto 40px; }
.v8-cta__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.v8-cta__contacts { display: flex; justify-content: center; gap: 14px 40px; flex-wrap: wrap; padding-top: 36px; border-top: 1px solid rgba(231,237,244,0.12); }
.v8-cta__contact { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 14px; font-weight: 500; color: rgba(231,237,244,0.7); transition: color 0.3s; }
.v8-cta__contact:hover { color: #F4F2EC; }
.v8-cta__contact svg { width: 16px; height: 16px; fill: #7FA8D8; }

/* ═══════════════════════════════
   SERVICES PAGE — soft hero
═══════════════════════════════ */
.v8-page-hero {
  background: #0E2A47; color: #F4F2EC; position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + 96px); padding-bottom: clamp(72px,9vw,120px);
}
.v8-page-hero__glow {
  position: absolute; z-index:0; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  right: -12%; top: -20%;
  background: radial-gradient(circle, rgba(127,168,216,0.13) 0%, rgba(127,168,216,0) 65%); pointer-events: none;
}
.v8-page-hero__inner { position: relative; z-index: 2; }
.v8-page-hero .hero-breadcrumb { margin-bottom: 26px; }
.v8-page-hero .breadcrumb-list li { color: rgba(231,237,244,0.4); }
.v8-page-hero .breadcrumb-list a { color: rgba(231,237,244,0.65); }
.v8-page-hero .breadcrumb-list a:hover { color: #F4F2EC; }
.v8-page-hero h1 {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(46px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.02em;
  color: #F4F2EC; max-width: 16ch; margin-bottom: 26px;
}
.v8-page-hero h1 em { font-style: italic; color: #7FA8D8; }
.v8-page-hero p { font-family: var(--f-body); font-size: 16px; line-height: 1.75; color: rgba(231,237,244,0.6); max-width: 560px; }

/* services page reuses .v8-services + .v8-svc on paper bg */

/* ── why us (services page, paper) ── */
.v8-why { background: #F4F2EC; padding: var(--sps-py) 0; }
.v8-why__title { font-family: var(--f-serif); font-weight: 500; font-size: clamp(32px,4.4vw,58px); line-height: 1.02; letter-spacing:-0.02em; color: #14365A; margin: 14px 0 52px; max-width: 14ch; }
.v8-why__title em { font-style: italic; color: #3E6FB0; }
.v8-why-list { list-style: none; margin: 0; padding: 0; }
.v8-why-item { display: grid; grid-template-columns: 56px 1fr; gap: 28px; padding: 34px 0; border-top: 1px solid rgba(28,43,58,0.12); }
.v8-why-item:last-child { border-bottom: 1px solid rgba(28,43,58,0.12); }
.v8-why-num { font-family: var(--f-serif); font-style: italic; font-size: 30px; font-weight: 500; color: #3E6FB0; }
.v8-why-item h3 { font-family: var(--f-display); font-size: clamp(18px,2vw,22px); font-weight: 600; color: #14365A; margin-bottom: 10px; }
.v8-why-item p { font-family: var(--f-body); font-size: 15px; line-height: 1.7; color: #5A6675; }
@media (max-width: 600px){ .v8-why-item { grid-template-columns: 36px 1fr; gap: 16px; } }

/* ═══════════════════════════════════════════════════════════════════
   v8 CONSISTENCY LAYER — nav, footer, overlay, preloader
   Adapt chrome to the soft-blue light theme
═══════════════════════════════════════════════════════════════════ */

/* ── Navbar over light paper hero ── */
.navbar-area.scrolled {
  background: rgba(244,242,236,0.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(28,43,58,0.08);
}
/* logo: show natural colors (was forced white for old dark theme) */
.navbar-brand .logo1 { filter: none; }
/* hamburger lines → dark ink */
.ham-line { background: #14365A; }
/* desktop links → soft ink */
.nav-desktop-link { color: rgba(20,54,90,0.6); }
.nav-desktop-link:hover,
.nav-desktop-link.active { color: #14365A; }
.nav-desktop-link::after { background: var(--c-accent); }
/* CTA pill → soft ink outline */
.nav-cta {
  border: 1.5px solid rgba(20,54,90,0.22);
  color: #14365A;
  text-transform: none; letter-spacing: 0.02em; font-weight: 600; font-size: 13px;
  padding: 9px 22px;
}
.nav-cta:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── Full-screen nav overlay → ink blue ── */
.nav-overlay { background: #0E2A47; }
.nav-overlay-links a { color: #F4F2EC; }
.nav-overlay-links a:hover { color: #7FA8D8; }
.nav-overlay-sub-label { color: rgba(244,242,236,0.4); }
.nav-overlay-sub-links a { color: rgba(244,242,236,0.7); }
.nav-overlay-sub-links a:hover { color: #7FA8D8; }
.nav-overlay-sub-links a svg { fill: #7FA8D8; }
.nav-overlay-contact a { color: rgba(244,242,236,0.6); }
.nav-overlay-contact a:hover { color: #F4F2EC; }
/* hamburger lines stay light while overlay open */
.nav-hamburger.open .ham-line { background: #F4F2EC; }

/* ── Preloader → paper ── */
.preloader { background: #F4F2EC; }
.preloader-logo { filter: none; }
.preloader-bar { background: rgba(20,54,90,0.12); }
.preloader-bar::after, .preloader-bar > span { background: var(--c-accent); }

/* ── Footer → ink blue (matches CTA, continuous dark zone) ── */
.footer { background: #0B2138; color: #E7EDF4; }
.footer-main { border-bottom: 1px solid rgba(231,237,244,0.08); }
.footer-logo { filter: brightness(0) invert(1); opacity: 0.92; }
.footer-brand p { color: rgba(231,237,244,0.55); }
.footer-col-title { color: #7FA8D8; }
.footer-links a { color: rgba(231,237,244,0.6); }
.footer-links a:hover { color: #F4F2EC; }
.footer-copy { color: rgba(231,237,244,0.4); }

/* ── Scroll-to-top → soft blue ── */
.scroll-top { background: var(--c-accent); color: #fff; }
.scroll-top:hover { background: var(--c-accent-hover); }

/* ── Custom cursor → soft blue ring ── */
.cursor-ring { border-color: rgba(62,111,176,0.6); }
.cursor-dot  { background: var(--c-accent); }

/* ── Marquee (if present) → soft ── */
.marquee-section { background: #DCE7F2; border-top: 1px solid rgba(28,43,58,0.08); border-bottom: 1px solid rgba(28,43,58,0.08); }
.marquee-item { color: #14365A; }
.marquee-sep { background: var(--c-accent); }

/* ── Generic legacy section bgs that might appear (products) → paper ── */
.section-light { background: #FBFAF6; }
.section-light .section-title h2 { color: #14365A; font-family: var(--f-serif); font-weight: 500; }
.section-light .section-title span { color: var(--c-accent); }
.section-light .section-title p { color: #5A6675; }

/* ═══════════════════════════════════════════════════════════════════
   v8 INNER PAGES — legacy class → soft-blue editorial mapping
   Covers: service detail (×4), contact, products, product details, 404
═══════════════════════════════════════════════════════════════════ */

/* ── Inner page hero (services detail + contact) → ink editorial ── */
.services-hero,
.contact-hero {
  background: #0E2A47 !important;
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 96px) 0 clamp(72px,9vw,120px) !important;
  border-top: none !important;
}
.services-hero::before,
.contact-hero::before {
  content: ''; position: absolute; z-index: 0;
  width: 60vw; height: 60vw; max-width: 760px; max-height: 760px;
  right: -12%; top: -20%;
  background: radial-gradient(circle, rgba(127,168,216,0.13) 0%, rgba(127,168,216,0) 65%) !important;
  opacity: 1 !important; filter: none !important;
}
.services-hero .container { position: relative; z-index: 2; }
.services-hero .breadcrumb-list li { color: rgba(231,237,244,0.4); }
.services-hero .breadcrumb-list a { color: rgba(231,237,244,0.65); }
.services-hero .breadcrumb-list a:hover { color: #F4F2EC; }
.services-hero h1,
.contact-hero h1 {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(44px, 6.6vw, 96px) !important; line-height: 0.98 !important;
  letter-spacing: -0.02em; color: #F4F2EC !important; max-width: 15ch; margin-bottom: 24px;
}
.services-hero h1 em,
.contact-hero h1 em { font-style: italic !important; color: #7FA8D8 !important; }
.services-hero p,
.contact-hero p { font-family: var(--f-body); color: rgba(231,237,244,0.6) !important; font-size: 16px; line-height: 1.75; max-width: 560px; }

/* hide old service page icon + colored top borders (cleaner editorial) */
.service-page-icon { display: none !important; }
.fire-hero, .solar-hero, .security-hero, .maintenance-hero { border-top: none !important; }

/* service category badge → soft pill */
.service-page-badge {
  background: rgba(127,168,216,0.14) !important; color: #9FC1E4 !important;
  font-family: var(--f-display); font-weight: 600; letter-spacing: 0.14em;
  border-radius: 100px; padding: 7px 16px;
}

/* ── Section scaffolding ── */
.section-wrap { padding: var(--sps-py) 0; }
.bg-surface { background: #FBFAF6 !important; }
.section-label, .section-title span {
  font-family: var(--f-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent) !important;
}
.section-h2, .section-title h2 {
  font-family: var(--f-serif) !important; font-weight: 500 !important;
  font-size: clamp(30px, 4.2vw, 56px) !important; line-height: 1.05 !important;
  letter-spacing: -0.02em; color: #14365A !important; margin-top: 12px;
}
.section-wrap p, .section-title p { color: #5A6675; }

/* ── Service feature grid ── */
.service-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-item {
  display: flex; align-items: center; gap: 14px;
  background: #F4F2EC; border: 1px solid rgba(28,43,58,0.08);
  border-radius: 14px; padding: 18px 20px;
  font-family: var(--f-display); font-size: 14px; font-weight: 500; color: #14365A;
  transition: transform 0.4s, background 0.4s, border-color 0.4s;
}
.sf-item:hover { transform: translateY(-3px); background: #EAF0F7; border-color: rgba(62,111,176,0.3); }
.sf-item svg { width: 20px; height: 20px; color: var(--c-accent); stroke: var(--c-accent); flex-shrink: 0; }
@media (max-width: 600px){ .service-features-grid { grid-template-columns: 1fr; } }

/* ── Application chips ── */
.application-chip {
  background: #DCE7F2; color: #14365A; border: none;
  border-radius: 100px; padding: 12px 8px; text-align: center;
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  transition: background 0.35s, transform 0.35s;
}
.application-chip:hover { background: var(--c-accent); color: #fff; transform: translateY(-2px); }

/* ── FAQ accordion ── */
.faq-list { max-width: 820px; margin: 44px auto 0; }
.faq-item { border-bottom: 1px solid rgba(28,43,58,0.12); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  padding: 26px 44px 26px 0; position: relative; cursor: pointer;
  font-family: var(--f-serif); font-weight: 500; font-size: clamp(18px,2.1vw,24px);
  color: #14365A; letter-spacing: -0.01em; transition: color 0.3s;
}
.faq-question:hover { color: var(--c-accent); }
.faq-question::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-display); font-size: 26px; font-weight: 300; color: var(--c-accent);
  transition: transform 0.4s;
}
.faq-question.open::after { content: '−'; transform: translateY(-50%); color: var(--c-accent); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
.faq-answer.open { max-height: 500px; }
.faq-answer p { font-family: var(--f-body); font-size: 15px; line-height: 1.75; color: #5A6675; padding-bottom: 26px; }

/* ── Primary CTA band → ink ── */
.bg-primary-cta {
  background: #0E2A47 !important; padding: clamp(72px,10vw,130px) 0 !important;
  position: relative; overflow: hidden;
}
.bg-primary-cta::before {
  content:''; position:absolute; z-index:0; width:60vw; height:60vw; max-width:760px; max-height:760px;
  left:50%; top:20%; transform:translateX(-50%);
  background: radial-gradient(circle, rgba(127,168,216,0.14) 0%, rgba(127,168,216,0) 65%);
}
.bg-primary-cta .container { position: relative; z-index: 2; }
.bg-primary-cta h2 {
  font-family: var(--f-serif) !important; font-weight: 500 !important;
  font-size: clamp(34px,5vw,64px) !important; letter-spacing: -0.02em; line-height: 1.04;
  color: #F4F2EC !important;
}
.bg-primary-cta .text-white-70, .bg-primary-cta p { color: rgba(231,237,244,0.6) !important; }

/* ── Buttons → v8 ── */
.btn-primary, .btn.btn-primary {
  background: var(--c-accent) !important; border: 1px solid var(--c-accent) !important;
  color: #fff !important; border-radius: 100px !important;
  font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em;
  padding: 14px 30px !important; box-shadow: 0 8px 24px rgba(62,111,176,0.22);
  transition: transform 0.4s, background 0.4s, box-shadow 0.4s;
}
.btn-primary:hover { background: var(--c-accent-hover) !important; border-color: var(--c-accent-hover) !important; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(62,111,176,0.3); }
/* primary buttons keep their accent fill on hover — suppress the white slide-in overlay (meant for outline buttons) so white text stays readable */
.button .btn.btn-primary::before { display: none !important; }
.button .btn.btn-primary:hover { color: #fff !important; }
.btn-white-outline {
  background: transparent !important; border: 1px solid rgba(244,242,236,0.3) !important;
  color: #F4F2EC !important; border-radius: 100px !important;
  font-family: var(--f-display); font-weight: 600; font-size: 13px; padding: 14px 30px !important;
  transition: all 0.4s;
}
.btn-white-outline:hover { background: rgba(244,242,236,0.08) !important; border-color: #F4F2EC !important; transform: translateY(-2px); }
.btn-whatsapp-outline {
  background: #25D366 !important; border: 1px solid #25D366 !important; color: #fff !important;
  border-radius: 100px !important; font-family: var(--f-display); font-weight: 600; font-size: 13px;
  padding: 14px 26px !important; display: inline-flex; align-items: center; transition: all 0.4s;
}
.btn-whatsapp-outline:hover { background: #1EBE5A !important; transform: translateY(-2px); }
.btn-sps {
  background: var(--c-accent) !important; color: #fff !important; border-radius: 100px;
  font-family: var(--f-display); font-weight: 600; font-size: 13px; padding: 14px 30px;
  display: inline-flex; align-items: center; gap: 8px; transition: transform 0.4s, background 0.4s;
}
.btn-sps:hover { background: var(--c-accent-hover) !important; transform: translateY(-2px); color:#fff; }
.btn-sps-outline {
  background: transparent; border: 1px solid rgba(28,43,58,0.2); color: #14365A;
  border-radius: 100px; font-family: var(--f-display); font-weight: 600; font-size: 13px;
  padding: 14px 30px; display: inline-flex; align-items: center; transition: all 0.4s;
}
.btn-sps-outline:hover { background: rgba(28,43,58,0.04); border-color: rgba(28,43,58,0.4); color:#14365A; transform: translateY(-2px); }

/* ═══════════════════════════════
   PRODUCTS LISTING
═══════════════════════════════ */
.products-header {
  background: #0E2A47 !important; position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 96px) 0 clamp(64px,8vw,100px) !important;
}
.products-header::before {
  content:''; position:absolute; z-index:0; width:60vw; height:60vw; max-width:720px; max-height:720px;
  right:-12%; top:-20%;
  background: radial-gradient(circle, rgba(127,168,216,0.13) 0%, rgba(127,168,216,0) 65%) !important;
  opacity:1 !important;
}
.products-header .container { position: relative; z-index: 2; }
.products-header .breadcrumb-list li { color: rgba(231,237,244,0.4); }
.products-header .breadcrumb-list a { color: rgba(231,237,244,0.65); }
.products-header .breadcrumb-list a:hover { color: #F4F2EC; }
.products-header h1 {
  font-family: var(--f-serif) !important; font-weight: 500;
  font-size: clamp(40px,6vw,80px) !important; letter-spacing: -0.02em; color: #F4F2EC !important;
}
.products-header p { color: rgba(231,237,244,0.6) !important; font-family: var(--f-body); margin-top: 14px; }

.latest-products-area { background: #F4F2EC; padding: var(--sps-py) 0; }

/* category tabs */
.latest-products-area .nav-tabs { border: none; gap: 8px; flex-wrap: wrap; }
.latest-products-area .nav-tabs .nav-link {
  border: 1px solid rgba(28,43,58,0.14) !important; border-radius: 100px !important;
  color: #5A6675 !important; background: transparent !important;
  font-family: var(--f-display); font-weight: 500; font-size: 13px; padding: 9px 20px !important;
  transition: all 0.35s;
}
.latest-products-area .nav-tabs .nav-link:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }
.latest-products-area .nav-tabs .nav-link.active {
  background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important;
}
.latest-products-area .dropdown-menu {
  border: 1px solid rgba(28,43,58,0.1); border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 50px rgba(14,42,71,0.12);
}
.latest-products-area .dropdown-item { border-radius: 8px; font-family: var(--f-display); font-size: 13px; color: #14365A; padding: 9px 14px; }
.latest-products-area .dropdown-item:hover { background: #EAF0F7; color: var(--c-accent); }

/* search */
.latest-products-area .input-group .form-control {
  border: 1px solid rgba(28,43,58,0.14); border-radius: 100px 0 0 100px;
  background: #FBFAF6; font-family: var(--f-body); padding: 12px 20px; color: #14365A;
}
.latest-products-area .input-group .btn {
  border-radius: 0 100px 100px 0; background: var(--c-accent); border-color: var(--c-accent); color: #fff;
}
.latest-products-area .input-group .btn svg { fill: #fff; }

/* product card */
.single-products-link { display: flex; width: 100%; text-decoration: none; }
.latest-products-area .single-products,
.single-products {
  background: #FBFAF6 !important; border: 1px solid rgba(28,43,58,0.08) !important;
  border-radius: 18px !important; overflow: hidden; padding: 0 !important;
  width: 100%; transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.45s, border-color 0.45s;
}
.single-products:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(14,42,71,0.12); border-color: rgba(62,111,176,0.3) !important; }
.single-products .image {
  background: #fff; padding: 28px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(28,43,58,0.06);
}
.single-products .image .thumb { max-height: 180px; width: auto; object-fit: contain; transition: transform 0.5s; }
.single-products:hover .image .thumb { transform: scale(1.05); }
.single-products .content-body { padding: 22px 24px 26px; }
.single-products .content-body .title {
  font-family: var(--f-serif) !important; font-weight: 500; font-size: 20px !important;
  color: #14365A !important; letter-spacing: -0.01em; margin-bottom: 8px; line-height: 1.2;
}
.single-products .content-body p { font-family: var(--f-body); font-size: 14px; color: #5A6675; line-height: 1.6; }
.single-products .content-body .icon { display: none; }
.single-products .price { font-family: var(--f-display); font-weight: 600; color: var(--c-accent); margin-top: 12px; }
.loadmore-icon span { background: var(--c-accent); }

/* ═══════════════════════════════
   PRODUCT DETAILS
═══════════════════════════════ */
.product-details { background: #F4F2EC; }
.product-details .breadcrumbs-content { padding-top: calc(var(--nav-h) + 40px); }
.product-details .page-title {
  font-family: var(--f-serif) !important; font-weight: 500;
  font-size: clamp(32px,4.6vw,58px) !important; letter-spacing: -0.02em; color: #14365A !important; line-height: 1.05;
}
.product-details-swiper { background: #FBFAF6; border: 1px solid rgba(28,43,58,0.08); border-radius: 18px; padding: 24px; }
.product-details-image { border-radius: 12px; }
.product-details .single-head .contant-inner-title h4 {
  font-family: var(--f-serif) !important; font-weight: 500; font-size: clamp(22px,2.6vw,30px) !important;
  color: #14365A !important; line-height: 1.3; margin-bottom: 20px;
}
.product-details .info-list li, .product-details .single-info li {
  display: flex; align-items: flex-start; gap: 12px; font-family: var(--f-body);
  font-size: 15px; color: #2A3A4B; padding: 9px 0;
}
.product-details .single-info i svg, .product-details .info-list i svg { fill: var(--c-accent); flex-shrink: 0; }
.product-details .single-info a { color: var(--c-accent); font-family: var(--f-display); font-weight: 600; }
.product-details h4 { font-family: var(--f-serif); font-weight: 500; color: #14365A; }
.product-details .swiper-button-next, .product-details .swiper-button-prev { color: var(--c-accent); }
.product-details .swiper-pagination-bullet-active { background: var(--c-accent); }

/* ═══════════════════════════════
   CONTACT PAGE
═══════════════════════════════ */
.contact-us.section { background: #F4F2EC; padding: var(--sps-py) 0; }
.contact-info-card {
  background: #0E2A47; border-radius: 20px; padding: 40px 34px; height: 100%;
}
.contact-info-card .contant-inner-title h4 { font-family: var(--f-serif); font-weight: 500; font-size: 26px; color: #F4F2EC; margin-bottom: 10px; }
.contact-info-card .contant-inner-title p { font-family: var(--f-body); font-size: 14px; color: rgba(231,237,244,0.55); line-height: 1.65; margin-bottom: 28px; }
.contact-info-card .single-info { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(231,237,244,0.1); }
.contact-info-card .single-info i {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(127,168,216,0.14);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-card .single-info i svg { fill: #9FC1E4; }
.contact-info-card .single-info ul, .contact-info-card .single-info li { margin: 0; }
.contact-info-card .single-info a, .contact-info-card .single-info li {
  font-family: var(--f-display); font-size: 14px; font-weight: 500; color: rgba(231,237,244,0.8);
}
.contact-info-card .single-info a:hover { color: #F4F2EC; }
.contact-info-card .whatsapp-cta {
  margin-top: 26px; display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff; border-radius: 100px; padding: 13px 24px;
  font-family: var(--f-display); font-weight: 600; font-size: 13px; transition: background 0.3s, transform 0.3s;
}
.contact-info-card .whatsapp-cta:hover { background: #1EBE5A; transform: translateY(-2px); }
.contact-info-card .whatsapp-cta svg { fill: #fff; }

.contact-form-wrap { background: #FBFAF6; border: 1px solid rgba(28,43,58,0.08); border-radius: 20px; padding: 40px 36px; }
.contact-form-wrap h4 { font-family: var(--f-serif); font-weight: 500; font-size: 28px; color: #14365A; margin-bottom: 26px; }
.contact-form-wrap .control-label { font-family: var(--f-display); font-size: 13px; font-weight: 600; color: #14365A; margin-bottom: 8px; display: block; }
.contact-form-wrap .form-control, .txtbox, .txtarea {
  border: 1px solid rgba(28,43,58,0.16) !important; border-radius: 12px !important;
  background: #fff !important; font-family: var(--f-body); font-size: 15px; color: #14365A;
  padding: 13px 16px !important; transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form-wrap .form-control:focus, .txtbox:focus, .txtarea:focus {
  border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px rgba(62,111,176,0.12) !important; outline: none;
}
.contact-form-wrap .form-group { margin-bottom: 20px; }
.contact-form-wrap .btn-primary { width: auto; }

/* map */
.map-section { background: #F4F2EC; padding-bottom: var(--sps-py); }
.map-container { border-radius: 20px; overflow: hidden; border: 1px solid rgba(28,43,58,0.08); }
.map-section iframe { display: block; filter: grayscale(0.2) contrast(1.05); }

/* ═══════════════════════════════
   404 PAGE
═══════════════════════════════ */
.pnf-section {
  background: #0E2A47 !important; min-height: 100svh; display: flex; align-items: center;
  position: relative; overflow: hidden;
}
.pnf-section::after {
  content:''; position:absolute; z-index:0; width:70vw; height:70vw; max-width:880px; max-height:880px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(127,168,216,0.12) 0%, rgba(127,168,216,0) 62%);
}
.pnf-noise { display: none; }
.pnf-inner { position: relative; z-index: 2; text-align: left; }
.pnf-code {
  font-family: var(--f-serif) !important; font-style: italic; font-weight: 500;
  font-size: clamp(120px, 24vw, 320px) !important; line-height: 0.9;
  color: rgba(127,168,216,0.16) !important; display: block; margin-bottom: -0.1em;
}
.pnf-content { position: relative; }
.pnf-section .section-label, .pnf-section .section-label-light { color: #9FC1E4 !important; justify-content: flex-start; }
.pnf-title {
  font-family: var(--f-serif) !important; font-weight: 500;
  font-size: clamp(36px,6vw,72px) !important; letter-spacing: -0.02em; color: #F4F2EC !important; margin: 14px 0 18px;
}
.pnf-desc { font-family: var(--f-body); font-size: 16px; color: rgba(231,237,244,0.6) !important; max-width: 480px; margin: 0 0 36px; line-height: 1.7; }
.pnf-actions { display: flex; justify-content: flex-start; gap: 14px; flex-wrap: wrap; }
/* Button hover fixes for the error page.
   .btn-sps slides a white ::before fill in on hover, but a later override forces
   white text → white-on-white. Force dark text so it reads on the light fill.
   .btn-white-outline likewise needs a solid light fill + dark text on this dark hero. */
.pnf-actions .btn-sps:hover { color: var(--c-text-dark) !important; }
.pnf-actions .btn-white-outline:hover {
  background: #F4F2EC !important; border-color: #F4F2EC !important; color: var(--c-text-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   v8.2 FIXES — nav contrast, burger overlay, FAQ padding, product tuning
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Nav adapts to dark hero pages ──
   Homepage = light paper hero (dark nav, default).
   All other pages open on dark ink hero → light nav until scrolled. */
.nav-on-dark .nav-desktop-link { color: rgba(244,242,236,0.7); }
.nav-on-dark .nav-desktop-link:hover,
.nav-on-dark .nav-desktop-link.active { color: #FFFFFF; }
.nav-on-dark .ham-line { background: #F4F2EC; }
.nav-on-dark .navbar-brand .logo1 { filter: brightness(0) invert(1); }
.nav-on-dark .nav-cta { border-color: rgba(244,242,236,0.3); color: #F4F2EC; }
.nav-on-dark .nav-cta:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Once scrolled, navbar gets the paper blur bg → force DARK chrome on every page */
.navbar-area.scrolled .nav-desktop-link { color: rgba(20,54,90,0.62); }
.navbar-area.scrolled .nav-desktop-link:hover,
.navbar-area.scrolled .nav-desktop-link.active { color: #14365A; }
.navbar-area.scrolled .ham-line { background: #14365A; }
.navbar-area.scrolled .navbar-brand .logo1 { filter: none; }
.navbar-area.scrolled .nav-cta { border-color: rgba(20,54,90,0.22); color: #14365A; }
.navbar-area.scrolled .nav-cta:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* ── 2. Burger → X must sit ABOVE the overlay ──
   .navbar-area created a stacking context below the overlay; lift it above. */
.navbar-area { z-index: 9995 !important; }
.nav-overlay { z-index: 9991; }
/* hamburger lines turn light while menu open (overlay is ink) */
.nav-open .ham-line,
.nav-hamburger.open .ham-line { background: #F4F2EC !important; }
/* hide desktop links + CTA while the overlay is open so they don't overlap it */
.nav-open .nav-desktop,
.nav-open .nav-cta { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
/* keep the logo readable over the ink overlay */
.nav-open .navbar-brand .logo1 { filter: brightness(0) invert(1) !important; }

/* ── 3. FAQ items: horizontal padding + soft card framing ── */
.faq-list { padding: 0; }
.faq-item {
  border-bottom: none;
  margin-bottom: 12px;
  background: #FBFAF6;
  border: 1px solid rgba(28,43,58,0.09);
  border-radius: 14px;
  padding: 4px 28px;
  transition: border-color 0.35s, background 0.35s, box-shadow 0.35s;
}
.faq-item:hover { border-color: rgba(62,111,176,0.3); box-shadow: 0 8px 26px rgba(14,42,71,0.06); }
.faq-item:has(.faq-question.open) { background: #EAF0F7; border-color: rgba(62,111,176,0.35); }
.faq-question { padding: 24px 36px 24px 0 !important; }
.faq-answer p { padding: 0 0 24px 0; }
@media (max-width: 600px){
  .faq-item { padding: 2px 18px; }
  .faq-question { padding: 20px 30px 20px 0 !important; }
}

/* ── 6. Products listing — tighter, calmer grid ── */
.latest-products-area .nav-tabs { margin-bottom: 8px; }
.latest-products-area .row.mt-5 { margin-top: 8px !important; }
.single-products .image { padding: 32px; aspect-ratio: 1/1; }
.single-products .image .thumb { max-height: 200px; }
.single-products .content-body { padding: 24px 26px 28px; }
.single-products .content-body .title { margin-bottom: 10px; }
/* nicer load-more button spacing */
#btnLoadMore .btn { padding: 14px 38px !important; }

/* ── 6. Product DETAILS — full redesign polish ── */
.product-details .container.mt-5 { margin-top: 0 !important; }
.product-details .breadcrumbs-content {
  padding-top: calc(var(--nav-h) + 70px); padding-bottom: 8px;
}
.product-details-swiper {
  background: #FBFAF6; border: 1px solid rgba(28,43,58,0.08); border-radius: 20px;
  padding: 32px; position: sticky; top: calc(var(--nav-h) + 24px);
}
.product-details-swiper .product-details-image {
  border-radius: 12px; max-height: 460px; width: auto; margin: 0 auto; object-fit: contain;
}
.product-details .swiper-slide { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.product-details .single-head {
  background: #fff; border: 1px solid rgba(28,43,58,0.08); border-radius: 20px; padding: 36px 34px;
}
.product-details .single-head .contant-inner-title h4 {
  font-size: clamp(20px,2.4vw,27px) !important; padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(28,43,58,0.1);
}
.product-details .info-list { margin: 0; padding: 0; }
.product-details .info-list li, .product-details .single-info li {
  padding: 11px 0; border-bottom: 1px solid rgba(28,43,58,0.06);
}
.product-details .single-info a {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 11px 20px; border-radius: 100px;
  background: rgba(62,111,176,0.1); transition: background 0.3s, transform 0.3s;
}
.product-details .single-info a:hover { background: rgba(62,111,176,0.18); transform: translateY(-2px); }
.product-details .additional-info, .product-details > .container:last-of-type {
  background: transparent;
}
.product-details h4 { font-family: var(--f-serif); font-weight: 500; font-size: 24px; color: #14365A; }
/* related products heading rhythm */
.latest-products-area h4 {
  font-family: var(--f-serif) !important; font-weight: 500; font-size: clamp(24px,3vw,36px) !important;
  color: #14365A !important; margin-bottom: 8px;
}
@media (max-width: 991px){
  .product-details-swiper { position: relative; }
}

/* ═══════════════════════════════════════════════════════════════════
   v8.3 FIXES — whatsapp/fonts/nav-tabs/product-details/mobile
═══════════════════════════════════════════════════════════════════ */

/* ── 2. WhatsApp buttons → subtle ghost (match homepage, drop loud green) ── */
/* On dark sections (service CTA, contact card): light ghost */
.btn-whatsapp-outline, .whatsapp-cta {
  background: transparent !important;
  border: 1px solid rgba(244,242,236,0.28) !important;
  color: #F4F2EC !important;
  box-shadow: none !important;
  border-radius: 100px !important;
  font-family: var(--f-display) !important; font-weight: 600 !important; font-size: 13px !important;
  padding: 14px 26px !important;
  display: inline-flex !important; align-items: center; gap: 10px;
  transition: all 0.4s !important;
}
.btn-whatsapp-outline:hover, .whatsapp-cta:hover {
  background: rgba(244,242,236,0.08) !important; border-color: #F4F2EC !important;
  color: #F4F2EC !important; transform: translateY(-2px); box-shadow: none !important;
}
.btn-whatsapp-outline svg, .whatsapp-cta svg { fill: #F4F2EC !important; }
/* product-details WhatsApp on light bg → soft ink ghost */
.v8-btn--wa {
  background: transparent; color: #14365A;
  border: 1px solid rgba(28,43,58,0.22); box-shadow: none;
}
.v8-btn--wa:hover { background: rgba(28,43,58,0.05); border-color: rgba(28,43,58,0.45); color: #14365A; transform: translateY(-2px); }
.v8-btn--wa svg { fill: #14365A; }

/* ── FONT ENFORCEMENT — kill old/system fonts on form controls ──
   Inputs/selects/textareas/buttons don't inherit font by default → caused the
   "mix of old fonts". Force the new Inter body stack everywhere they appear. */
input, select, textarea, button,
.form-control, .form-select, .txtbox, .txtarea {
  font-family: var(--f-body) !important;
}
.contact-form-wrap .control-label { font-family: var(--f-display) !important; }
.latest-products-area .form-control, .latest-products-area .nav-link { font-family: var(--f-display) !important; }

/* ── 4. Products listing tabs → no underline, gap, mobile scroll ── */
.latest-products-area .nav-tabs {
  border-bottom: none !important; border: none !important;
  gap: 10px; row-gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.latest-products-area .nav-tabs .nav-item { margin: 0 !important; }
.latest-products-area .nav-tabs .nav-link { margin: 0 !important; border-bottom-width: 1px !important; }
.latest-products-area .nav-tabs .nav-link:focus { outline: none; }
@media (max-width: 767px) {
  .latest-products-area .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .latest-products-area .nav-tabs::-webkit-scrollbar { display: none; }
  .latest-products-area .nav-tabs .nav-link { white-space: nowrap; flex: 0 0 auto; }
}

/* ── 3. PRODUCT DETAILS — clean professional 2-col ── */
.pd { background: #F4F2EC; padding-top: calc(var(--nav-h) + 40px); padding-bottom: var(--sps-py); }
.pd__crumb { margin-bottom: 26px; }
.pd .breadcrumb-list li { color: rgba(20,54,90,0.45); }
.pd .breadcrumb-list a { color: rgba(20,54,90,0.62); }
.pd .breadcrumb-list a:hover { color: #14365A; }
.pd .breadcrumb-list li + li::before { color: rgba(20,54,90,0.3); }

.pd__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 60px); align-items: start;
}
.pd__gallery { min-width: 0; }
.pd .product-details-swiper {
  background: #FBFAF6; border: 1px solid rgba(28,43,58,0.08);
  border-radius: 20px; padding: 0 28px 28px; position: relative;
  width: 100%; max-width: 100%; overflow: hidden;
}
.pd .product-details-swiper .swiper { width: 100%; overflow: hidden; }
.pd .product-details-swiper .swiper-wrapper { box-sizing: border-box; }
.pd .product-details-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; min-height: 340px; width: 100%; flex-shrink: 0; }
.pd__media { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; }
.pd .product-details-image { max-height: 440px; width: auto; max-width: 100%; object-fit: contain; border-radius: 10px; margin: 0 auto; }

.pd__info { padding-top: 4px; min-width: 0; }
.pd__title {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  color: #14365A; margin-bottom: 16px;
}
.pd__lead { font-family: var(--f-body); font-size: 16px; line-height: 1.7; color: #5A6675; margin-bottom: 22px; }
.pd__price { font-family: var(--f-serif); font-weight: 600; font-size: 34px; color: var(--c-accent); margin-bottom: 24px; }
.pd__specs { list-style: none; margin: 0 0 26px; padding: 22px 0; border-top: 1px solid rgba(28,43,58,0.1); border-bottom: 1px solid rgba(28,43,58,0.1); }
.pd__specs li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-family: var(--f-body); font-size: 15px; color: #2A3A4B; }
.pd__specs li svg { fill: var(--c-accent); margin-top: 3px; flex-shrink: 0; }
.pd__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pd__links { display: flex; gap: 14px 22px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(28,43,58,0.08); }
.pd__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 13px; font-weight: 600; color: #5A6675; transition: color 0.3s; }
.pd__link:hover { color: var(--c-accent); }
.pd__link svg { width: 16px; height: 16px; flex-shrink: 0; }

.pd__desc { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(38px, 5vw, 56px); border-top: 1px solid rgba(28,43,58,0.1); max-width: 860px; }
.pd__desc h2 { font-family: var(--f-serif); font-weight: 600; font-size: clamp(24px, 3vw, 36px); color: #14365A; margin-bottom: 18px; }
.pd__prose { font-family: var(--f-body); font-size: 16px; line-height: 1.8; color: #3A4A5B; }
.pd__prose p { margin-bottom: 14px; }
.pd__prose img { max-width: 100%; border-radius: 10px; }
/* rich-text from DB description — restore indentation the global reset strips */
.pd__prose h2, .pd__prose h3, .pd__prose h4 { font-family: var(--f-serif); font-weight: 600; color: #14365A; line-height: 1.25; margin: 28px 0 12px; }
.pd__prose h2:first-child, .pd__prose h3:first-child, .pd__prose h4:first-child { margin-top: 0; }
.pd__prose h2 { font-size: 22px; }
.pd__prose h3 { font-size: 19px; }
.pd__prose h4 { font-size: 16px; letter-spacing: 0.01em; }
.pd__prose ul, .pd__prose ol { margin: 0 0 16px; padding-left: 1.4em; }
.pd__prose ul { list-style: disc; }
.pd__prose ol { list-style: decimal; }
.pd__prose li { display: list-item; margin-bottom: 8px; padding-left: 4px; line-height: 1.7; }
.pd__prose li::marker { color: var(--c-accent); }
.pd__prose strong, .pd__prose b { color: #1f2d3d; font-weight: 600; }
.pd__prose a { display: inline; color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.pd__prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.pd__prose th, .pd__prose td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(28,43,58,0.1); vertical-align: top; }
.pd__prose th { font-family: var(--f-display); font-weight: 600; color: #14365A; }
.pd__prose tr:hover td { background: rgba(28,43,58,0.02); }

.pd__related { background: #FBFAF6; padding: var(--sps-py) 0; }
.pd__related-title { font-family: var(--f-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); color: #14365A; margin-bottom: 8px; }
.pd .swiper-button-next, .pd .swiper-button-prev { color: var(--c-accent); }
.pd .swiper-pagination-bullet-active { background: var(--c-accent); }

@media (max-width: 991px) {
  .pd__grid { grid-template-columns: 1fr; }
  .pd__gallery { position: static; }
}

/* ── 5. MOBILE RESPONSIVENESS — global hardening ── */
/* The old fixed .container width:450px (480–767px) made content too narrow — go fluid */
@media (max-width: 767px) {
  .container { width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; }
}
/* never allow sideways scroll from glows/decоr */
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 767px) {
  /* hero — clear the fixed header lockup (logo + sub-line ≈ 75px tall) with
     comfortable breathing room above the eyebrow. */
  .v8-hero__inner { padding-top: calc(var(--nav-h) + 52px); padding-bottom: 36px; }
  .v8-hero__top { gap: 6px; }
  .v8-hero__top .v8-hero__loc { font-size: 10px; }
  /* sec heads stack */
  .v8-sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .v8-approach__intro { margin-top: 4px; }
  /* intro */
  .v8-intro__body p { font-size: 18px; }
  /* services list rows */
  .v8-svc__name { font-size: clamp(20px, 6.4vw, 26px); }
  .v8-svc__tags { font-size: 11px; line-height: 1.5; }
  /* CTA */
  .v8-cta__contacts { gap: 12px 24px; }
  .v8-cta__actions { flex-direction: column; align-items: stretch; }
  .v8-cta__actions .v8-btn { justify-content: center; }
  /* product details actions full width */
  .pd__actions { flex-direction: column; align-items: stretch; }
  .pd__actions .v8-btn { justify-content: center; }
  /* contact: stack + spacing */
  .contact-info-card { padding: 32px 24px; }
  .contact-form-wrap { padding: 30px 22px; }
  /* service feature grid single col already handled; tighten faq */
  .faq-question { font-size: 17px; }
  /* nav: hide desktop loc text cramping handled; ensure CTA hidden <=991 already */
}

/* tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .v8-steps { grid-template-columns: 1fr 1fr; }
  .pd__grid { grid-template-columns: 1fr; }
}

/* very small phones */
@media (max-width: 380px) {
  .v8-hero__headline { font-size: clamp(40px, 13vw, 60px); }
  .v8-btn, .v8-btn--ghost { padding: 13px 22px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v8.4 FIXES — product-details dark head, filter toolbar, burger header
═══════════════════════════════════════════════════════════════════ */

/* ── 1. Product details: dark ink header band (nav stays readable) ── */
.pd { padding-top: 0 !important; padding-bottom: var(--sps-py); background: #FBFAF6; }
.pd__head {
  background: #0E2A47; position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + 64px) 0 46px;
}
.pd__head-glow {
  position: absolute; z-index: 0; width: 55vw; height: 55vw; max-width: 680px; max-height: 680px;
  right: -10%; top: -25%;
  background: radial-gradient(circle, rgba(127,168,216,0.13) 0%, rgba(127,168,216,0) 65%);
  pointer-events: none;
}
.pd__head .container { position: relative; z-index: 1; }
.pd__crumb { margin-bottom: 18px; }
/* breadcrumb on dark head → light */
.pd .breadcrumb-list li { color: rgba(231,237,244,0.4); }
.pd .breadcrumb-list a { color: rgba(231,237,244,0.62); }
.pd .breadcrumb-list a:hover { color: #F4F2EC; }
.pd .breadcrumb-list li + li::before { color: rgba(231,237,244,0.28); }
.pd__title { color: #F4F2EC !important; margin-bottom: 0 !important; }
/* light body */
.pd__body { padding-top: clamp(40px, 5vw, 64px); }

/* ── 2. Products filter toolbar — consistent pills + search, real gaps ── */
.latest-products-area .row.mt-5 { align-items: center; row-gap: 16px; }
.latest-products-area .nav-tabs { gap: 8px 8px; align-items: center; }
.latest-products-area .nav-tabs .nav-item { margin: 0 !important; }
.latest-products-area .nav-tabs .nav-link {
  padding: 10px 20px !important; line-height: 1.2; display: inline-flex; align-items: center;
}
/* search group styled as ONE pill, matching the filter pills */
.latest-products-area .input-group {
  border: 1px solid rgba(28,43,58,0.14); border-radius: 100px; overflow: hidden;
  background: #FBFAF6; flex-wrap: nowrap;
}
.latest-products-area .input-group .form-control {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  padding: 10px 18px !important; font-size: 13px !important; box-shadow: none !important; color: #14365A;
}
.latest-products-area .input-group .form-control::placeholder { color: #9AA5B1; }
.latest-products-area .input-group .btn,
.latest-products-area .input-group .btn-outline-success {
  border: none !important; border-radius: 0 !important;
  background: var(--c-accent) !important; color: #fff !important;
  padding: 0 18px !important; display: flex; align-items: center; justify-content: center;
}
.latest-products-area .input-group .btn svg,
.latest-products-area .input-group .btn-outline-success svg { fill: #fff !important; width: 16px; height: 16px; }
.latest-products-area .input-group .btn:hover { background: var(--c-accent-hover) !important; }

/* ── 3. Burger open while header is scrolled → kill the paper bar over the ink overlay ── */
.nav-open .navbar-area,
.nav-open .navbar-area.scrolled {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
/* force light chrome regardless of scrolled state while menu is open */
.nav-open .navbar-area.scrolled .ham-line { background: #F4F2EC !important; }
.nav-open .navbar-area.scrolled .navbar-brand .logo1 { filter: brightness(0) invert(1) !important; }

/* ═══════════════════════════════════════════════════════════════════
   v8.5 — Products filter toolbar (aligned pills + search, mobile)
═══════════════════════════════════════════════════════════════════ */
.products-filterbar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px 20px; flex-wrap: wrap;
  margin: 44px 0 28px;
}
.products-filterbar .nav-tabs {
  flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 !important; border: none !important;
}
.products-filterbar .nav-tabs .nav-item { margin: 0 !important; display: flex; }
.products-filterbar .nav-tabs .nav-link {
  height: 44px; display: inline-flex; align-items: center;
  padding: 0 20px !important; border-radius: 100px !important;
  border: 1px solid rgba(28,43,58,0.14) !important; background: transparent !important;
  color: #5A6675 !important; font-family: var(--f-display) !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 1 !important;
  transition: all 0.3s !important;
}
.products-filterbar .nav-tabs .nav-link:hover { border-color: var(--c-accent) !important; color: var(--c-accent) !important; }
.products-filterbar .nav-tabs .nav-link.active { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important; }
/* dropdown caret spacing */
.products-filterbar .nav-tabs .dropdown-toggle::after { margin-left: 8px; }

/* search — same height + pill, aligned with the row */
.products-filterbar .products-search {
  flex: 0 0 300px; max-width: 320px; height: 44px; margin: 0;
  border: 1px solid rgba(28,43,58,0.14); border-radius: 100px; overflow: hidden;
  background: #FBFAF6;
}
.products-filterbar .products-search .form-control {
  height: 100%; border: none !important; border-radius: 0 !important; background: transparent !important;
  padding: 0 18px !important; font-size: 13px !important; box-shadow: none !important; color: #14365A;
}
.products-filterbar .products-search .form-control::placeholder { color: #9AA5B1; }
.products-filterbar .products-search .btn {
  height: 100%; border: none !important; border-radius: 0 !important;
  background: var(--c-accent) !important; color: #fff !important;
  padding: 0 18px !important; display: flex; align-items: center; justify-content: center;
}
.products-filterbar .products-search .btn svg { fill: #fff !important; width: 16px; height: 16px; }
.products-filterbar .products-search .btn:hover { background: var(--c-accent-hover) !important; }

/* mobile: stack, search full width, pills become a horizontal scroll strip */
@media (max-width: 991px) {
  .products-filterbar { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 32px; }
  .products-filterbar .products-search { flex-basis: auto; max-width: none; width: 100%; }
  .products-filterbar .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .products-filterbar .nav-tabs::-webkit-scrollbar { display: none; }
  .products-filterbar .nav-tabs .nav-link { white-space: nowrap; flex: 0 0 auto; }
}

/* ── Divider between product details and related products (only renders when related exists) ── */
.pd__related { border-top: 1px solid rgba(28,43,58,0.1); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE REFINEMENT LAYER                         (added 2026-06-11)
   One consolidated pass for cross-device polish. Lives at the END of the file
   so it wins by source order; `!important` is used only where the original
   rule it must beat already used `!important`.

   Goals: predictable fluid type that doesn't balloon when zoomed, zero
   horizontal overflow/clipping on any width, ≥16px inputs (no iOS focus-zoom),
   comfortable touch targets, honoured reduced-motion, and a no-JS safety net.
═══════════════════════════════════════════════════════════════════════════ */

/* 1 ─ Spacing token: make section rhythm fluid (was a fixed 110px that was
       far too tall on phones and inconsistent with the fluid --sps-py). */
:root {
  --section-py: clamp(56px, 8vw, 110px);
}

/* 2 ─ Display type: gentler vw slopes + lower caps/floors. Keeps the editorial
       impact on large screens while preventing the oversized, line-breaking
       headlines users saw in the ~900–1300px / zoomed-laptop band.
       (Only classes that are actually rendered by live pages are touched.) */
.v8-hero__headline { font-size: clamp(40px, 7vw, 112px); }
@media (max-width: 767px) { .v8-hero__headline { font-size: clamp(34px, 8.5vw, 58px); } }
/* Zoomed-laptop / short-desktop band: a 1366px laptop at 125% browser zoom
   reports an effective viewport of ~1093×614, so the one-viewport hero clips
   its CTAs. The headline's 14ch max-width keeps the same line breaks at any
   size, so a gentler 6vw slope shrinks each line's height and clears the
   overflow without disturbing the accepted full-size design above 1366px. */
@media (min-width: 768px) and (max-width: 1366px) {
  .v8-hero__headline { font-size: clamp(40px, 6vw, 92px); }
}

.v8-page-hero h1   { font-size: clamp(36px, 5.6vw, 88px); }
.v8-sec-title      { font-size: clamp(28px, 3.9vw, 56px); }
.section-title h2  { font-size: clamp(26px, 3.6vw, 48px); }

.products-header h1 { font-size: clamp(32px, 4.6vw, 66px) !important; }

/* services-hero / contact-hero h1 — the live rule is a later `!important`
   declaration, so its mobile size was being ignored. Re-assert both here. */
.services-hero h1,
.contact-hero h1   { font-size: clamp(32px, 4.8vw, 76px) !important; }
@media (max-width: 575px) {
  .services-hero h1,
  .contact-hero h1 { font-size: clamp(28px, 7.5vw, 42px) !important; }
}

.pd__title         { font-size: clamp(26px, 3.4vw, 44px); }

/* 3 ─ Horizontal overflow: Bootstrap g-5 (3rem) gutters use negative row
       margins larger than the mobile container padding, clipping content on
       the contact + service pages. Tame the horizontal gutter on phones
       (vertical gutter / g-5 row spacing is preserved). */
@media (max-width: 575px) {
  /* !important is required: Bootstrap's CDN sheet (with .g-5 { --bs-gutter-x:3rem })
     loads AFTER main.css, so a plain .row rule would lose the cascade. */
  .row { --bs-gutter-x: 1.25rem !important; }
}

/* Decorative radial glows must never widen the page or leak out of their hero. */
.v8-hero, .v8-page-hero, .products-header, .pd__head, .services-hero { overflow: hidden; }
.v8-hero__soft-glow,
.v8-page-hero__glow,
.pd__head-glow,
.products-header::before { max-width: 80vw !important; max-height: 80vw !important; }

/* Belt-and-braces: never let a stray wide child force a scrollbar. */
img, video, iframe, svg, canvas { max-width: 100%; }

/* 4 ─ Forms: 16px on mobile stops iOS from auto-zooming on focus; inputs keep
       a comfortable ≥44px tap height. Desktop stays at the tighter 15px. */
.txtbox, .txtarea, .form-control, .form-select { font-size: 16px; min-height: 46px; }
.txtarea { min-height: 120px; }
@media (min-width: 768px) {
  .txtbox, .txtarea, .form-control, .form-select { font-size: 15px; }
}

/* 5 ─ Touch targets ≥44px on touch devices. */
@media (pointer: coarse) {
  .nav-hamburger { min-width: 44px; min-height: 44px; }
  .scroll-top    { width: 46px; height: 46px; }
  .v8-svc        { min-height: 64px; }
}

/* 6 ─ Restore the native cursor when the custom-cursor JS is NOT active
       (script failed / disabled) so the pointer is never invisible. */
@media (pointer: fine) {
  body:not(.has-custom-cursor),
  body:not(.has-custom-cursor) a,
  body:not(.has-custom-cursor) button,
  body:not(.has-custom-cursor) [role="button"],
  body:not(.has-custom-cursor) label,
  body:not(.has-custom-cursor) .service-panel,
  body:not(.has-custom-cursor) .gallery-item { cursor: auto; }
}

/* 7 ─ Reduced-motion: kill CSS motion and surface content immediately. The JS
       guard (gsap-animations.js) handles the scroll-reveal layer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .v8-hero__scrollcue, .preloader { display: none !important; }
  html.reduced-motion body { cursor: auto !important; }
}

/* 8 ─ No-JS / failed-CDN safety net: the preloader is a fixed full-screen
       overlay removed only by JS. If GSAP never loads it would trap the user
       on a blank screen — this pure-CSS failsafe fades it out after 5s. */
@keyframes sps-preloader-failsafe { to { opacity: 0; visibility: hidden; } }
.preloader { animation: sps-preloader-failsafe 0.5s 5s forwards; }


/* ═══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — Terms & Conditions / Privacy Policy   (added 2026-06-12, v2)
   Editorial reading layout for the v8 Soft Blue system: hairline rules,
   leading-zero accent numerals, Playfair section heads, sharp 3–4px corners
   (no chunky AI-card borders). Reuses .v8-page-hero (ink) above.
═══════════════════════════════════════════════════════════════════════════ */
.v8-legal {
  background: var(--c-paper);
  padding: clamp(44px, 6vw, 88px) 0 clamp(56px, 8vw, 104px);
}
.v8-legal__wrap { max-width: 820px; margin-inline: 0; }

/* ── Standfirst (plain-English summary) ── */
.v8-legal__summary {
  position: relative;
  padding: clamp(26px, 3.4vw, 38px) clamp(24px, 3vw, 40px);
  margin-bottom: clamp(40px, 5vw, 60px);
  background: var(--c-paper-2);
  border: 1px solid rgba(14, 42, 71, 0.09);
  border-radius: 3px;
}
.v8-legal__summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 3vw, 40px);
  width: 46px;
  height: 3px;
  background: var(--c-accent);
}
.v8-legal__summary .v8-eyebrow {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.v8-legal__summary h2 {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--c-ink);
  line-height: 1.18;
  margin: 10px 0 16px;
}
.v8-legal__summary p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--c-text-soft);
  margin: 0 0 12px;
}
.v8-legal__summary p:last-of-type { margin-bottom: 0; }
.v8-legal__updated {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(14, 42, 71, 0.09);
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ── Contents index ── */
.v8-legal__toc { margin: 0 0 clamp(40px, 5vw, 60px); }
.v8-legal__toc h2 {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(14, 42, 71, 0.12);
}
.v8-legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 40px;
}
@media (max-width: 575px) { .v8-legal__toc ol { columns: 1; } }
.v8-legal__toc li {
  counter-increment: toc;
  margin: 0 0 11px;
  break-inside: avoid;
}
.v8-legal__toc a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  color: var(--c-text-soft);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.4;
  transition: color .2s ease;
}
.v8-legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent);
  flex: none;
}
.v8-legal__toc a:hover { color: var(--c-accent); }

/* ── Body sections ── */
.v8-legal__body { counter-reset: sec; }
.v8-legal__sec { padding-top: clamp(32px, 4vw, 48px); scroll-margin-top: 96px; }
.v8-legal__sec + .v8-legal__sec { border-top: 1px solid rgba(14, 42, 71, 0.10); }
.v8-legal__sec h2 {
  counter-increment: sec;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(23px, 2.8vw, 33px);
  color: var(--c-ink);
  line-height: 1.18;
  margin: 0 0 18px;
}
.v8-legal__sec h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--c-accent);
  flex: none;
}
.v8-legal__sec h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--c-ink);
  margin: 24px 0 8px;
}
.v8-legal__body p,
.v8-legal__body li {
  font-size: 16.5px;
  line-height: 1.74;
  color: var(--c-text-soft);
}
.v8-legal__body p { margin: 0 0 16px; }
.v8-legal__body ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.v8-legal__body ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.v8-legal__body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: .55;
}
.v8-legal__body strong { color: var(--c-ink); font-weight: 600; }
.v8-legal__body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.v8-legal__body a:hover { color: var(--c-accent-hover); }

/* ── Emphasis note (liability / no-guarantee) ── */
.v8-legal__note {
  position: relative;
  margin: 12px 0 20px;
  padding: clamp(24px, 3.2vw, 34px) clamp(24px, 3.2vw, 36px);
  background: var(--c-ink);
  border-radius: 4px;
  overflow: hidden;
}
.v8-legal__note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--c-accent);
}
.v8-legal__note .v8-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8FB2DD;
}
.v8-legal__note p,
.v8-legal__note li { color: #CDD9E8; font-size: 15.5px; line-height: 1.74; }
.v8-legal__note p:last-child { margin-bottom: 0; }
.v8-legal__note strong { color: #FFFFFF; }
.v8-legal__note ul { margin: 0; padding-left: 0; list-style: none; }
.v8-legal__note ul li { position: relative; padding-left: 22px; margin-bottom: 12px; }
.v8-legal__note ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8FB2DD;
}
.v8-legal__note ul li:last-child { margin-bottom: 0; }

/* ── Contact form consent line ── */
.form-consent {
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
  margin: 14px 0 0;
}
.form-consent a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.form-consent a:hover { color: var(--c-accent-hover); }

/* ── Footer legal links (dark footer bottom bar) ── */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.footer-legal-links a {
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(231, 237, 244, 0.45);
  white-space: nowrap;
  transition: color .2s ease;
}
.footer-legal-links a:hover { color: #F4F2EC; }
@media (max-width: 991px) { .footer-legal-links { justify-content: center; } }

/* ── Burger / nav-overlay legal links ── */
.nav-overlay-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(244, 242, 236, 0.10);
}
.nav-overlay-legal a {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: rgba(244, 242, 236, 0.45);
  transition: color .25s ease;
}
.nav-overlay-legal a:hover { color: #F4F2EC; }

/* ═══════════════════════════════════════════════════════════════════
   v8.6 — QUOTE CART (FAB + drawer + toast), product-card actions,
   product-details buy panel, and the /quote checkout page.
═══════════════════════════════════════════════════════════════════ */

/* ── Shared quantity stepper ── */
.qcart-stepper { display:inline-flex; align-items:center; height:44px; border:1px solid rgba(28,43,58,0.16); border-radius:100px; background:var(--c-paper-2); overflow:hidden; }
.qcart-stepper__btn { width:40px; height:100%; border:none; background:transparent; color:var(--c-ink-2); font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s; }
.qcart-stepper__btn:hover { background:rgba(var(--c-accent-rgb),0.10); color:var(--c-accent); }
.qcart-stepper__val { width:42px; height:100%; border:none; background:transparent; text-align:center; font-family:var(--f-display); font-size:14px; font-weight:600; color:var(--c-ink-2); padding:0; }
.qcart-stepper__val:focus { outline:none; }

/* ── Floating cart button ── */
.qcart-fab { position:fixed; right:22px; bottom:22px; z-index:900; width:58px; height:58px; border-radius:50%; border:none; background:var(--c-accent); color:#fff; box-shadow:0 10px 30px rgba(var(--c-accent-rgb),0.42); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .25s, box-shadow .25s, background .25s; }
.qcart-fab svg { width:24px; height:24px; }
.qcart-fab:hover { background:var(--c-accent-hover); transform:translateY(-3px); box-shadow:0 16px 38px rgba(var(--c-accent-rgb),0.5); }
.qcart-fab__badge { position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:100px; background:var(--c-ink-2); color:#fff; font-family:var(--f-display); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--c-paper-2); }
.qcart-fab.is-empty .qcart-fab__badge { display:none; }
.qcart-fab.is-pulse { animation:qcartPulse .45s ease; }
@keyframes qcartPulse { 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
/* the /quote page already shows the cart inline — hide the FAB there */
body:has(.qpage) .qcart-fab { display:none; }

/* ── Slide-over drawer (above the fixed navbar, which is z-index 9990) ── */
.qcart-drawer { position:fixed; inset:0; z-index:9999990; }
.qcart-drawer[hidden] { display:none; }
.qcart-drawer__scrim { position:absolute; inset:0; background:rgba(14,42,71,0.5); opacity:0; transition:opacity .32s ease; }
.qcart-drawer.is-open .qcart-drawer__scrim { opacity:1; }
.qcart-drawer__panel { position:absolute; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--c-paper-2); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 50px rgba(14,42,71,0.18); }
.qcart-drawer.is-open .qcart-drawer__panel { transform:translateX(0); }
.qcart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid rgba(28,43,58,0.1); flex-shrink:0; }
.qcart-drawer__title { font-family:var(--f-serif); font-weight:600; font-size:22px; color:var(--c-ink-2); margin:0; }
.qcart-drawer__count { color:var(--c-accent); font-size:16px; }
.qcart-drawer__close { width:38px; height:38px; border:none; background:transparent; color:var(--c-ink-2); cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.qcart-drawer__close svg { width:20px; height:20px; }
.qcart-drawer__close:hover { background:rgba(28,43,58,0.07); }
.qcart-drawer__list { flex:1; overflow-y:auto; padding:8px 16px; }

.qcart-row { display:flex; gap:14px; padding:14px 8px; border-bottom:1px solid rgba(28,43,58,0.08); align-items:center; transition:opacity .18s, transform .18s; }
.qcart-row.is-leaving { opacity:0; transform:translateX(12px); }
.qcart-row__img { width:64px; height:64px; flex-shrink:0; border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(28,43,58,0.08); display:flex; align-items:center; justify-content:center; }
.qcart-row__img img { width:100%; height:100%; object-fit:contain; padding:6px; }
.qcart-row__main { flex:1; min-width:0; }
.qcart-row__name { display:block; font-family:var(--f-body); font-weight:600; font-size:14px; color:var(--c-ink-2); line-height:1.35; margin-bottom:8px; text-decoration:none; }
.qcart-row__name:hover { color:var(--c-accent); }
.qcart-row__controls { display:flex; align-items:center; gap:10px; }
.qcart-row__controls .qcart-stepper { height:36px; }
.qcart-row__controls .qcart-stepper__btn { width:32px; font-size:18px; }
.qcart-row__controls .qcart-stepper__val { width:32px; font-size:13px; }
.qcart-row__rm { width:34px; height:34px; border:none; background:transparent; color:#9AA5B1; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:color .2s, background .2s; }
.qcart-row__rm svg { width:17px; height:17px; }
.qcart-row__rm:hover { color:#c0392b; background:rgba(192,57,43,0.08); }

.qcart-drawer__foot { padding:18px 22px 24px; border-top:1px solid rgba(28,43,58,0.1); display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.qcart-drawer__foot.is-hidden { display:none; }
.qcart-drawer__sum { font-family:var(--f-display); font-size:13px; font-weight:600; color:#5A6675; text-transform:uppercase; letter-spacing:0.04em; }
.qcart-drawer__clear { border:none; background:transparent; color:#9AA5B1; font-family:var(--f-display); font-size:12px; font-weight:600; cursor:pointer; text-decoration:underline; align-self:center; transition:color .2s; }
.qcart-drawer__clear:hover { color:#c0392b; }

.qcart-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 24px; border-radius:100px; font-family:var(--f-display); font-size:14px; font-weight:600; cursor:pointer; border:none; text-decoration:none; transition:background .25s, color .25s, border-color .25s; }
.qcart-btn svg { width:18px; height:18px; }
.qcart-btn--primary { background:var(--c-accent); color:#fff; }
.qcart-btn--primary:hover { background:var(--c-accent-hover); color:#fff; }
.qcart-btn--ghost { background:transparent; color:var(--c-ink-2); border:1px solid rgba(28,43,58,0.18); }
.qcart-btn--ghost:hover { border-color:var(--c-accent); color:var(--c-accent); }

.qcart-empty { text-align:center; padding:48px 20px; }
.qcart-empty__ico { width:64px; height:64px; margin:0 auto 18px; color:rgba(28,43,58,0.25); }
.qcart-empty__ico svg { width:100%; height:100%; }
.qcart-empty__t { font-family:var(--f-serif); font-size:20px; color:var(--c-ink-2); margin:0 0 6px; }
.qcart-empty__s { font-family:var(--f-body); font-size:14px; color:#7A8694; margin:0 0 20px; line-height:1.6; }

body.qcart-lock { overflow:hidden; }

/* ── Add-to-quote toast ── */
.qcart-toast { position:fixed; left:50%; bottom:96px; transform:translate(-50%,16px); z-index:950; display:flex; align-items:center; gap:10px; background:var(--c-ink); color:#fff; padding:12px 16px; border-radius:100px; box-shadow:0 12px 30px rgba(14,42,71,0.32); font-family:var(--f-body); font-size:14px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .28s, transform .28s; max-width:88vw; }
.qcart-toast svg { width:18px; height:18px; flex-shrink:0; }
.qcart-toast.is-show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.qcart-toast__link { background:transparent; border:none; color:#9FC0EA; font-family:var(--f-display); font-weight:700; font-size:13px; cursor:pointer; padding:0 2px; text-decoration:underline; }
@media (max-width:600px){ .qcart-toast { bottom:90px; } .qcart-fab { right:16px; bottom:16px; } }

/* ── Product card: add-to-quote action row ── */
.single-products { display:flex; flex-direction:column; }
.single-products-link { flex:1 1 auto; }
.single-products .content-body .desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card-actions { display:flex; align-items:stretch; gap:8px; padding:0 18px 18px; margin-top:auto; }
.add-to-quote-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; border-radius:100px; border:1px solid var(--c-accent); background:transparent; color:var(--c-accent); font-family:var(--f-display); font-size:13px; font-weight:600; cursor:pointer; transition:background .22s,color .22s,border-color .22s; }
.add-to-quote-btn svg { width:17px; height:17px; }
.add-to-quote-btn .ic-check { display:none; }
.add-to-quote-btn .add-to-quote-btn__label-added { display:none; }
.add-to-quote-btn:hover { background:var(--c-accent); color:#fff; }
.add-to-quote-btn.is-added { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
.add-to-quote-btn.is-added .ic-add { display:none; }
.add-to-quote-btn.is-added .ic-check { display:inline; }
.add-to-quote-btn.is-added .add-to-quote-btn__label { display:none; }
.add-to-quote-btn.is-added .add-to-quote-btn__label-added { display:inline; }
.product-card-details { flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(28,43,58,0.14); display:flex; align-items:center; justify-content:center; color:var(--c-ink-2); transition:background .22s,color .22s,border-color .22s; }
.product-card-details svg { width:18px; height:18px; }
.product-card-details:hover { background:var(--c-ink-2); border-color:var(--c-ink-2); color:#fff; }

/* ── Product details: buy panel ── */
.pd__buy { margin-bottom:26px; }
.pd__buy-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pd__qty { flex:0 0 auto; }
.pd__add { flex:1 1 auto; min-width:210px; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
.pd__add .ic-check { display:none; }
.pd__add .pd__add-label-added { display:none; }
.pd__add.is-added { background:var(--c-ink-2); border-color:var(--c-ink-2); }
.pd__add.is-added .ic-add { display:none; }
.pd__add.is-added .ic-check { display:inline; }
.pd__add.is-added .pd__add-label { display:none; }
.pd__add.is-added .pd__add-label-added { display:inline; }
.pd__buy-sub { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:16px; }
.pd__buy-quote { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer; font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--c-accent); }
.pd__buy-quote:hover { text-decoration:underline; }
.pd__buy-wa { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-size:13px; font-weight:600; color:#1f9d57; text-decoration:none; }
.pd__buy-wa:hover { text-decoration:underline; }
@media (max-width:520px){ .pd__add { width:100%; flex-basis:100%; } }

/* ── /quote checkout page ── */
.qpage__grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(28px,4vw,56px); align-items:start; }
.qpage__items-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.qpage__items-head h2 { font-family:var(--f-serif); font-weight:600; font-size:clamp(22px,2.6vw,30px); color:var(--c-ink-2); margin:0; }
.qpage__items-head h2 span { color:var(--c-accent); font-size:18px; }
.qpage__clear { border:none; background:transparent; color:#9AA5B1; font-family:var(--f-display); font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; }
.qpage__clear:hover { color:#c0392b; }
.qpage__row { display:flex; align-items:center; gap:16px; padding:18px; background:var(--c-paper-2); border:1px solid rgba(28,43,58,0.08); border-radius:16px; margin-bottom:12px; transition:opacity .18s, transform .18s; }
.qpage__row.is-leaving { opacity:0; transform:translateX(12px); }
.qpage__row-img { width:84px; height:84px; flex-shrink:0; border-radius:12px; overflow:hidden; background:#fff; border:1px solid rgba(28,43,58,0.08); display:flex; align-items:center; justify-content:center; }
.qpage__row-img img { width:100%; height:100%; object-fit:contain; padding:8px; }
.qpage__row-main { flex:1; min-width:0; }
.qpage__row-name { display:block; font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--c-ink-2); text-decoration:none; line-height:1.4; }
.qpage__row-name:hover { color:var(--c-accent); }
.qpage__row-id { font-family:var(--f-display); font-size:12px; color:#9AA5B1; }
.qpage__row-actions { display:flex; align-items:center; gap:12px; }
.qpage__row-rm { width:38px; height:38px; border:none; background:transparent; color:#9AA5B1; cursor:pointer; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:color .2s,background .2s; }
.qpage__row-rm svg { width:18px; height:18px; }
.qpage__row-rm:hover { color:#c0392b; background:rgba(192,57,43,0.08); }

.qpage__form-wrap { position:sticky; top:calc(var(--nav-h) + 24px); }
.qpage__form-wrap.is-disabled { opacity:0.5; pointer-events:none; }
.qpage__form-card { background:var(--c-paper-2); border:1px solid rgba(28,43,58,0.1); border-radius:20px; padding:30px 28px; }
.qpage__form-card h2 { font-family:var(--f-serif); font-weight:600; font-size:24px; color:var(--c-ink-2); margin:0 0 6px; }
.qpage__form-lead { font-family:var(--f-body); font-size:14px; color:#5A6675; line-height:1.6; margin:0 0 22px; }
.qpage__field { margin-bottom:16px; }
.qpage__field label { display:block; font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--c-ink-2); margin-bottom:7px; }
.qpage__field .req { color:#c0392b; }
.qpage__field .opt { color:#9AA5B1; font-weight:400; }
.qpage__field .form-control { width:100%; border:1px solid rgba(28,43,58,0.16); border-radius:12px; padding:12px 14px; font-family:var(--f-body); font-size:15px; color:var(--c-ink-2); background:#fff; transition:border-color .2s, box-shadow .2s; }
.qpage__field .form-control:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 3px rgba(var(--c-accent-rgb),0.14); }
.qpage__submit { width:100%; justify-content:center; margin-top:6px; }
.qpage__submit:disabled { opacity:0.5; cursor:not-allowed; }
.qpage .form-consent { font-size:12px; color:#9AA5B1; margin-top:12px; text-align:center; }
.qpage .form-consent a { color:var(--c-accent); }

.qpage__empty { text-align:center; padding:60px 20px; background:var(--c-paper-2); border:1px dashed rgba(28,43,58,0.18); border-radius:18px; }
.qpage__empty-ico { width:60px; height:60px; margin:0 auto 18px; color:rgba(28,43,58,0.25); }
.qpage__empty-ico svg { width:100%; height:100%; }
.qpage__empty h3 { font-family:var(--f-serif); font-size:22px; color:var(--c-ink-2); margin:0 0 8px; }
.qpage__empty p { font-family:var(--f-body); font-size:15px; color:#7A8694; margin:0 0 22px; }

.qpage__done { grid-column:1 / -1; text-align:center; padding:60px 20px; }
.qpage__done-ico { width:72px; height:72px; margin:0 auto 22px; border-radius:50%; background:rgba(var(--c-accent-rgb),0.12); color:var(--c-accent); display:flex; align-items:center; justify-content:center; }
.qpage__done-ico svg { width:34px; height:34px; }
.qpage__done h2 { font-family:var(--f-serif); font-weight:600; font-size:clamp(26px,3vw,36px); color:var(--c-ink-2); margin:0 0 12px; }
.qpage__done p { font-family:var(--f-body); font-size:16px; color:#5A6675; max-width:520px; margin:0 auto 26px; line-height:1.7; }

@media (max-width:991px){
  .qpage__grid { grid-template-columns:1fr; }
  .qpage__form-wrap { position:static; }
}
@media (max-width:520px){
  .qpage__row { flex-wrap:wrap; }
  .qpage__row-actions { width:100%; justify-content:space-between; }
}

/* ═══════════════════════════════════════════════════════════════════
   v8.7 — products toolbar header, tighter filter bar, details assurance
═══════════════════════════════════════════════════════════════════ */

/* pull the listing up under the dark hero (kills the dead cream band) */
.products-header + .latest-products-area { padding-top: clamp(20px, 3vw, 36px); }

.products-toolbar-head { margin: 0 0 16px; }
.products-toolbar-eyebrow { display:inline-block; font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--c-accent); margin-bottom:10px; }
.products-toolbar-title { font-family:var(--f-serif); font-weight:600; font-size:clamp(24px,3vw,34px); color:var(--c-ink-2); margin:0 0 6px; line-height:1.1; }
.products-toolbar-sub { font-family:var(--f-body); font-size:15px; color:#5A6675; margin:0; max-width:560px; }

/* tighten the filter bar now that a header sits above it; smaller pills */
.products-filterbar { margin: 0 0 30px !important; padding-top:18px; border-top:1px solid rgba(28,43,58,0.08); }
.products-filterbar .nav-tabs .nav-link { height:40px !important; padding:0 16px !important; font-size:12.5px !important; }

/* details: assurance block fills the otherwise-empty right column */
.pd__assure { list-style:none; margin:24px 0 0; padding:22px 0 0; border-top:1px solid rgba(28,43,58,0.1); display:flex; flex-direction:column; gap:14px; }
.pd__assure li { display:flex; align-items:center; gap:12px; font-family:var(--f-body); font-size:14.5px; color:#2A3A4B; }
.pd__assure li svg { width:22px; height:22px; flex-shrink:0; color:var(--c-accent); }

/* ── Product details: brand identity touches (v8.9) ── */
/* eyebrow + spec-header meta on the dark header band */
.pd__eyebrow { display:inline-block; font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#7FA8D8; margin-bottom:12px; }
.pd__head-meta { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:18px; }
.pd__ref { font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.12em; color:rgba(231,237,244,0.55); }
.pd__head-tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.04em; color:#A9C5E6; padding:5px 12px; border:1px solid rgba(127,168,216,0.3); border-radius:100px; }
.pd__head-tag svg { color:#7FA8D8; }

/* signature accent on the lead paragraph */
.pd__info .pd__lead { position:relative; padding-left:18px; }
.pd__info .pd__lead::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:var(--c-accent); }

/* editorial section head for "Product Details" */
.pd__sec-eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-accent); margin-bottom:14px; }
.pd__sec-eyebrow::before { content:""; width:28px; height:2px; background:var(--c-accent); border-radius:2px; }

/* elevate + index the gallery frame */
.pd .product-details-swiper { box-shadow:0 18px 48px rgba(14,42,71,0.08); }
.pd__gallery-index { position:absolute; top:12px; right:18px; z-index:6; display:inline-flex; align-items:baseline; gap:4px; font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:0.06em; color:#14365A; background:rgba(255,255,255,0.85); backdrop-filter:blur(6px); border:1px solid rgba(28,43,58,0.08); padding:5px 11px; border-radius:100px; pointer-events:none; }
.pd__gallery-index .pd__gi-cur { color:var(--c-accent); }
.pd__gallery-index .pd__gi-sep { color:rgba(28,43,58,0.3); }
.pd__gallery-index .pd__gi-total { color:rgba(28,43,58,0.45); }

/* ═══════════════════════════════════════════════════════════════════
   v8.8 — product card balance, details swiper controls, footer end-gap
═══════════════════════════════════════════════════════════════════ */

/* ── Product card: shorter, balanced, uniform action row ── */
/* shorter image box (was square → made cards too tall) */
.single-products .image { aspect-ratio:auto !important; height:180px; padding:22px !important; display:flex; align-items:center; justify-content:center; }
.single-products .image .thumb { max-height:140px !important; }
/* reserve a consistent 2-line description height so the bottom-pinned action
   row lands at a similar spot on every card (kills the lopsided top gap) */
.single-products .content-body { padding:20px 22px 18px !important; }
.single-products .content-body .title { font-size:17px; margin-bottom:8px !important; }
.single-products .content-body .desc { min-height:40px; margin-bottom:0; }
.single-products .price { margin-top:10px; }
.product-card-actions { padding:0 22px 20px; margin-top:18px; }

/* ── Details swiper: tighter gallery + real, visible controls ── */
.pd .product-details-swiper { padding:0 20px 20px; top:0; }
.pd .product-details-swiper .swiper-slide { min-height:300px; align-items:flex-start; }
.pd .product-details-image { max-height:360px; }
@media (min-width:992px){ .pd .product-details-swiper { min-height:450px; } }

/* arrows → circular buttons that read on the light gallery
   (high specificity + !important to beat the swiper theme css) */
.pd .product-details-swiper .swiper-button-next,
.pd .product-details-swiper .swiper-button-prev {
  width:42px !important; height:42px !important; margin-top:-21px; border-radius:50% !important;
  background:#fff !important; border:1px solid rgba(28,43,58,0.10) !important;
  box-shadow:0 6px 18px rgba(14,42,71,0.12) !important; color:var(--c-accent) !important;
  transition:background .2s, color .2s, box-shadow .2s, transform .2s; cursor:pointer !important;
}
.pd .product-details-swiper .swiper-button-next { right:14px !important; }
.pd .product-details-swiper .swiper-button-prev { left:14px !important; }
.pd .product-details-swiper .swiper-button-next::after,
.pd .product-details-swiper .swiper-button-prev::after { font-size:15px !important; font-weight:700; }
.pd .product-details-swiper .swiper-button-next:hover,
.pd .product-details-swiper .swiper-button-prev:hover {
  background:var(--c-accent) !important; color:#fff !important; box-shadow:0 10px 24px rgba(62,111,176,0.4) !important; transform:scale(1.05);
}
.pd .product-details-swiper .swiper-button-disabled { opacity:0 !important; pointer-events:none; }

/* dots → centred, on-brand */
.pd .product-details-pagination { position:absolute; bottom:10px; left:0; right:0; text-align:center; }
.pd .product-details-pagination .swiper-pagination-bullet { width:8px; height:8px; margin:0 6px; background:rgba(28,43,58,0.25); opacity:1; transition:width .25s, background .25s; }
.pd .product-details-pagination .swiper-pagination-bullet-active { width:22px; border-radius:5px; background:var(--c-accent); }

/* ── Footer: close the trailing gap so Contact meets the legal bar ── */
@media (max-width: 991px) {
  .footer-main { padding: 64px 0 32px; }
  .footer-bottom-bar { padding: 18px 0; }
}
@media (max-width: 575px) {
  .footer-main { padding: 48px 0 24px; }
}

/* ── Notification Modal (v8) ── */
.notif-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,22,36,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.notif-backdrop.d-none { display: none !important; }
.notif-card {
  background: #FBFAF6;
  border: 1px solid rgba(28,43,58,0.10);
  border-radius: 20px;
  padding: 40px 36px 32px;
  max-width: 420px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 24px 64px rgba(14,42,71,0.18);
  animation: notifIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes notifIn {
  from { opacity:0; transform:scale(.92) translateY(12px); }
  to   { opacity:1; transform:scale(1)   translateY(0); }
}
.notif-icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-size: 24px;
}
.notif-icon-wrap svg { width: 26px; height: 26px; stroke-width: 2.5; }
[data-type="success"] .notif-icon-wrap { background: #E6F4EA; color: #2E7D32; }
[data-type="error"]   .notif-icon-wrap { background: #FDECEA; color: #C62828; }
[data-type="info"]    .notif-icon-wrap { background: #E8EEF8; color: var(--c-accent); }
.notif-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 600; color: var(--c-ink);
  margin: 0 0 10px; letter-spacing: -0.01em;
}
.notif-msg {
  font-family: var(--f-body);
  font-size: 15px; line-height: 1.6;
  color: var(--c-muted); margin: 0 0 28px;
}
.notif-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: max-content; align-self: center;
  background: var(--c-accent); color: #fff;
  border: none; border-radius: 100px;
  padding: 11px 32px; font-family: var(--f-ui);
  font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; transition: background .2s, transform .15s;
}
.notif-close:hover { background: #2d58a0; transform: translateY(-1px); }

/* ── Out of Stock ── */
.out-of-stock-badge {
  display: inline-flex; align-items: center;
  background: #FFF3E0; color: #E65100;
  border: 1px solid rgba(230,81,0,0.25);
  border-radius: 100px; padding: 6px 16px;
  font-family: var(--f-ui); font-size: 12px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.pd__oos {
  display: flex; flex-direction: column; gap: 12px; padding: 8px 0;
}
.pd__oos-badge {
  display: inline-flex; align-items: center;
  background: #FFF3E0; color: #E65100;
  border: 1px solid rgba(230,81,0,0.25);
  border-radius: 100px; padding: 8px 20px;
  font-family: var(--f-ui); font-size: 13px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  width: fit-content;
}
.pd__oos-msg {
  font-family: var(--f-body); font-size: 14px; line-height: 1.6;
  color: var(--c-muted); margin: 0;
}

/* ═══════════════════════════════
   GLOBAL INTERACTION RULES
═══════════════════════════════ */
/* Any enabled button shows the hand cursor (catches custom non-<a> controls). */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), label[for] { cursor: pointer; }

/* Disable text selection site-wide; keep it on real input surfaces. */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}