:root {
      --navy: #0F2438;
      /* Classic Professional Trade Navy */
      --navy-deep: #081622;
      /* Midnight Navy */
      --navy-light: #1A3A5A;
      /* Accent Navy */
      --slate-dark: #1E293B;
      /* Slate 800 */
      --slate-mid: #475569;
      /* Slate 600 - Clean, readable body text */
      --slate-muted: #64748B;
      /* Slate 500 */
      --gold: #F59E0B;
      /* Australian Safety Gold / Amber */
      --gold-hover: #D97706;
      /* Rich Amber */
      --gold-soft: #FEF3C7;
      /* Soft Gold Tint */
      --emerald: #059669;
      /* Eco-Safe / Pet-Safe Accent Badge Only */
      --emerald-soft: #ECFDF5;
      --danger: #DC2626;
      /* Emergency Red */
      --danger-hover: #B91C1C;
      --ink: #0F172A;
      /* Deep Crisp Text */
      --paper: #FFFFFF;
      /* Clean Pure White */
      --paper-dim: #F8FAFC;
      /* Slate 50 Soft Surface */
      --line: rgba(15, 23, 42, .08);
      /* Clean Subtle Hairline */
      --card-shadow: 0 12px 32px -8px rgba(15, 23, 42, .08);
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 84px;
    }

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

    /* Lock default colors so dark mode and light mode view identically */
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
      color-scheme: light;
    }

    h1,
    h2,
    h3 {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    p {
      color: var(--slate-mid);
      font-size: 15.5px;
      max-width: 56ch;
    }

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

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

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    /* SITE HEADER & MAIN NAVIGATION BAR */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      transition: padding-top 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: none;
      pointer-events: none;
    }

    /* Collapses smoothly and adds generous floating top space when hero is scrolled or header scrolled */
    .site-header.has-floating-nav {
      padding-top: 12px;
    }

    /* MAIN NAVIGATION BAR - GLASSY TRANSLUCENT AESTHETIC */
    nav {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      width: 100%;
      max-width: 100%;
      z-index: 1051;
      padding: 7px 0;
      background: rgba(8, 20, 32, 0.92);
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.20);
      transition: background 0.28s ease, padding 0.28s ease, border-radius 0.28s ease, box-shadow 0.28s ease, width 0.28s ease;
      pointer-events: auto;
      overflow: visible;
    }

    .site-header.scrolled-header nav,
    nav.scrolled {
      padding: 7px 0;
      background: rgba(8, 20, 32, 0.94);
      backdrop-filter: blur(18px) saturate(190%);
      -webkit-backdrop-filter: blur(18px) saturate(190%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

    /* POP-OUT FLOATING NAV BAR WHEN HERO SECTION IS SCROLLED + TOP PADDING */
    nav.nav-floating {
      position: relative;
      width: min(calc(100% - 36px), 1380px);
      margin: 0 auto;
      border-radius: 16px;
      padding: 7px 0;
      background: rgba(8, 20, 32, 0.94) !important;
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      box-shadow: 
        0 20px 48px rgba(0, 0, 0, 0.55),
        0 0 1px 1px rgba(255, 255, 255, 0.15),
        0 0 25px rgba(245, 158, 11, 0.12) !important;
      animation: navPopOut 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
      transform-origin: center top;
      overflow: visible;
    }

    @keyframes navPopOut {
      0% {
        transform: translateY(-8px) scale(0.985);
        opacity: 0.85;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }

    }

    nav .navlinks a,
    nav:not(.nav-floating) .navlinks a,
    nav.nav-floating .navlinks a {
      color: #FFFFFF !important;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      font-weight: 600;
      font-family: 'Outfit', sans-serif;
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color 150ms ease, transform 150ms ease;
    }

    nav .navlinks a:hover,
    nav:not(.nav-floating) .navlinks a:hover,
    nav.nav-floating .navlinks a:hover {
      color: var(--gold) !important;
    }

    .navlinks a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 2px;
      border-radius: 2px;
      background: var(--gold);
    }

    /* COMPACT NAV WRAP: Expanded max-width and fluid padding to ensure zero clipping */
    nav .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(6px, 1.1vw, 16px);
      max-width: 1420px;
      width: 100%;
      margin: 0 auto;
      padding: 0 clamp(10px, 1.8vw, 24px);
      box-sizing: border-box;
      overflow: visible;
    }

    .nav-brand-cluster {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 70;
      flex-shrink: 0;
      overflow: visible;
    }

    .logo {
      display: flex;
      align-items: center;
      position: relative;
      z-index: 75;
      text-decoration: none;
      overflow: visible;
    }

    /* PROMINENT OVERHANGING BRAND LOGO */
    .brand-logo-img {
      height: 64px;
      width: auto;
      max-width: 155px;
      object-fit: contain;
      display: block;
      position: relative;
      z-index: 80;
      margin-top: -6px;
      margin-bottom: -18px;
      filter:
        drop-shadow(0 6px 16px rgba(0, 0, 0, 0.65))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
      transform: rotate(-1deg);
      transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), filter .25s ease;
      will-change: transform;
    }

    nav.nav-floating .brand-logo-img {
      height: 66px;
      max-width: 160px;
      margin-top: -8px;
      margin-bottom: -18px;
      transform: rotate(-0.8deg);
    }

    .logo:hover .brand-logo-img {
      transform: scale(1.06) rotate(0deg);
      filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.75))
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
    }

    nav.nav-floating .logo:hover .brand-logo-img {
      transform: scale(1.06) rotate(0deg);
    }

    /* Center Navigation Links (Compact & Non-Clipping) */
    .navlinks-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-width: 0;
    }

    .navlinks {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 2vw, 28px);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      position: relative;
    }

    /* MOUSE-FOLLOWING SPOTLIGHT HIGHLIGHT EFFECT */
    .nav-cursor-spotlight {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 38px;
      border-radius: 999px;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      background: radial-gradient(circle at center, rgba(245, 158, 11, 0.35) 0%, rgba(217, 119, 6, 0.16) 45%, rgba(245, 158, 11, 0.03) 72%, transparent 85%);
      box-shadow: 0 0 24px 3px rgba(245, 158, 11, 0.22);
      filter: blur(5px);
      transform: translate3d(-9999px, -9999px, 0);
      transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform, opacity;
    }

    .nav-cursor-spotlight::before {
      content: "";
      position: absolute;
      inset: -6px -12px;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.22) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 75%);
      filter: blur(8px);
      pointer-events: none;
    }

    .navlinks a {
      color: #FFFFFF !important;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      transition: color 150ms ease, transform 150ms ease;
      padding: 5px 6px;
      position: relative;
      z-index: 2 !important;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      letter-spacing: 0.01em;
      border-radius: 6px;
      cursor: pointer;
    }

    .navlinks a:hover {
      color: var(--gold) !important;
    }

    .navlinks a.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 2px;
      border-radius: 2px;
      background: var(--gold);
      z-index: 3 !important;
    }

    /* Dropdown Items Stack */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 14.5px;
      transition: all .25s ease;
      cursor: pointer;
      border: none;
    }

    .btn-gold {
      background: var(--gold);
      color: var(--navy-deep);
      box-shadow: 0 6px 20px -6px rgba(245, 158, 11, .5);
    }

    .btn-gold:hover {
      background: var(--gold-hover);
      color: #FFFFFF;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -8px rgba(245, 158, 11, .65);
    }

    .btn-line {
      border: 1.5px solid var(--line);
      color: var(--navy);
      background: #FFFFFF;
    }

    .btn-line:hover {
      border-color: var(--navy);
      background: var(--paper-dim);
    }

    @media (max-width: 860px) {
      .navlinks-container {
        display: none !important;
      }
      .nav-mobile-toggle {
        display: flex !important;
      }
      nav.nav-floating .brand-logo-img {
        height: 58px;
        margin: -8px 0;
      }
      .brand-logo-img {
        height: 46px;
      }

    }
    @media (prefers-reduced-motion: reduce) {
      nav,
      nav.nav-floating,
      .navlinks,
      .navlinks a {
        transition: none !important;
        animation: none !important;
      }

    }
    /* HERO SECTION: CINEMATIC ERADICATION VIDEO BACKGROUND & PREMIUM LEFT-SIDE COMPOSITION */
    .hero {
      position: relative;
      color: #FFFFFF;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 74px 0 0;
      box-sizing: border-box;
      overflow-x: hidden;
      background-color: #081420;
    }

    .hero-video-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    .hero-bg-video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      filter: brightness(1.05) contrast(1.05) saturate(1.05);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .hero-bg-video.is-active {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-bg-video { transition: none; }
    }

    /* No dark overlay on the hero video: text stays legible through its own shadows */
    .hero-video-overlay {
      display: none;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(245, 158, 11, .05) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .28;
      pointer-events: none;
      z-index: 3;
    }

    /* ================================================================
       ORIGINAL CINEMATIC HERO SPIDER & CORNER WEB (RIGHT-SIDE UPPER CORNER)
       Natural, proportional scale with gossamer silk line, idle drift,
       and articulated leg micro-movement.
       ================================================================ */
    .spider-hero-rig {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 6;
      overflow: hidden;
    }

    /* 1. Delicate Corner Spider Web - Tucked right into Upper-Right Corner */
    .spider-web-rig {
      position: absolute;
      top: -10px;
      right: 0;
      width: clamp(160px, 15vw, 220px);
      height: clamp(110px, 11vw, 155px);
      pointer-events: none;
      z-index: 6;
      opacity: 0.82;
      animation: webFadeIn 1s ease both;
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
    }

    @keyframes webFadeIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 0.82; transform: scale(1); }
    }

    .spider-web-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* 2. Spider Unit - Suspended in the upper-right corner zone in natural size */
    .spider-unit {
      position: absolute;
      width: clamp(74px, 6vw, 88px);
      height: clamp(84px, 6.8vw, 100px);
      right: clamp(28px, 5.5vw, 85px);
      top: clamp(78px, 11vh, 120px);
      transform-origin: 55px 48px;
      opacity: 0;
      pointer-events: auto;
      cursor: pointer;
      transform: translate3d(0, -320px, 0);
      filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.75));
      transition: filter 0.3s ease;
    }

    .spider-unit:hover {
      filter: drop-shadow(0 10px 22px rgba(245, 158, 11, 0.6));
    }

    .spider-hero-rig.active .spider-unit {
      will-change: transform, opacity;
      animation: spiderCinematicSequence 3.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes spiderCinematicSequence {
      0% {
        opacity: 0;
        transform: translate3d(0, -320px, 0);
      }
      12% {
        opacity: 1;
      }
      42% {
        transform: translate3d(0, 7px, 0);
      }
      56% {
        transform: translate3d(0, -4px, 0);
      }
      70% {
        transform: translate3d(0, 2px, 0);
      }
      84% {
        transform: translate3d(0, -1px, 0);
      }
      100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    /* Settle into natural lifelike idle drift and leg movement */
    .spider-hero-rig.settled .spider-unit {
      opacity: 1 !important;
      animation: spiderIdleDrift 4.5s infinite ease-in-out alternate;
    }

    @keyframes spiderIdleDrift {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      50%  { transform: translate3d(0, 5px, 0) rotate(0.8deg); }
      100% { transform: translate3d(0, -3px, 0) rotate(-0.6deg); }
    }

    @keyframes spiderStartleJump {
      0%   { transform: translate3d(0, 0, 0); }
      30%  { transform: translate3d(0, -30px, 0) scale(1.05); }
      60%  { transform: translate3d(0, 5px, 0); }
      80%  { transform: translate3d(0, -2px, 0); }
      100% { transform: translate3d(0, 0, 0); }
    }

    /* Subtle relaxed idle leg micro-movements */
    .spider-hero-rig.settled .leg-l1 { animation: idleLegL1 2.4s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-l2 { animation: idleLegL2 2.8s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-l3 { animation: idleLegL3 2.2s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-l4 { animation: idleLegL4 3.0s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-r1 { animation: idleLegR1 2.5s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-r2 { animation: idleLegR2 2.9s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-r3 { animation: idleLegR3 2.3s infinite alternate ease-in-out; }
    .spider-hero-rig.settled .leg-r4 { animation: idleLegR4 3.1s infinite alternate ease-in-out; }

    @keyframes idleLegL1 { 0% { transform: rotate(-2.5deg); } 100% { transform: rotate(2.5deg); } }
    @keyframes idleLegL2 { 0% { transform: rotate(2deg); } 100% { transform: rotate(-2deg); } }
    @keyframes idleLegL3 { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }
    @keyframes idleLegL4 { 0% { transform: rotate(1.8deg); } 100% { transform: rotate(-1.8deg); } }
    @keyframes idleLegR1 { 0% { transform: rotate(2deg); } 100% { transform: rotate(-2.5deg); } }
    @keyframes idleLegR2 { 0% { transform: rotate(-2deg); } 100% { transform: rotate(1.8deg); } }
    @keyframes idleLegR3 { 0% { transform: rotate(1.8deg); } 100% { transform: rotate(-2deg); } }
    @keyframes idleLegR4 { 0% { transform: rotate(-1.8deg); } 100% { transform: rotate(1.8deg); } }

    /* Tablet & Mobile: Scale naturally and maintain upper-right corner placement */
    @media (max-width: 960px) {
      .spider-unit {
        width: 72px;
        height: 82px;
        right: 22px;
        top: 86px;
      }
      .spider-web-rig {
        right: 0;
        width: 160px;
        height: 110px;
        top: -10px;
      }
    }

    @media (max-width: 600px) {
      .spider-unit {
        width: 56px;
        height: 64px;
        right: 14px;
        top: 72px;
      }
      .spider-web-rig {
        right: 0;
        width: 125px;
        height: 85px;
        top: -8px;
        opacity: 0.75;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .spider-hero-rig {
        display: none !important;
      }
    }

    /* ================================================================
       SUBTLE PREMIUM FLOATING INFORMATION CARD (LOWER-RIGHT HERO AREA)
       ================================================================ */
    .hero-floating-card {
      position: absolute;
      right: clamp(24px, 4.5vw, 64px);
      bottom: clamp(75px, 11vh, 120px);
      z-index: 20;
      background: rgba(8, 20, 32, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 14px;
      padding: 13px 18px 14px;
      box-shadow: 
        0 18px 40px -8px rgba(0, 0, 0, 0.65),
        0 4px 12px rgba(0, 0, 0, 0.35),
        0 0 20px -2px rgba(245, 158, 11, 0.12);
      pointer-events: auto;
      min-width: 175px;
      max-width: 215px;
      transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
    }

    .hero-floating-card:hover {
      transform: translateY(-2px);
      border-color: rgba(245, 158, 11, 0.65);
      box-shadow: 
        0 22px 46px -8px rgba(0, 0, 0, 0.75),
        0 0 28px -2px rgba(245, 158, 11, 0.22);
    }

    .hfc-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
      padding-bottom: 7px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .hfc-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #F59E0B;
      line-height: 1;
      filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.45));
    }

    .hfc-title {
      font-family: 'Outfit', sans-serif;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #FFFFFF;
    }

    .hfc-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .hfc-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.25;
    }

    .hfc-check {
      color: #F59E0B;
      flex-shrink: 0;
      line-height: 1;
    }

    @media (max-width: 960px) {
      .hero-floating-card {
        right: 20px;
        bottom: 68px;
        padding: 10px 14px 11px;
        border-radius: 12px;
      }
      .hfc-title {
        font-size: 10.5px;
      }
      .hfc-item {
        font-size: 12px;
      }
    }

    @media (max-width: 640px) {
      .hero-floating-card {
        display: none;
      }
    }

    .hero .wrap {
      position: relative;
      z-index: 10;
      width: 100%;
      max-width: 1420px; /* same as nav .wrap so the hero text lines up under the logo */
      margin: auto auto;
      padding: 16px clamp(10px, 1.8vw, 24px);
      box-sizing: border-box;
    }

    .hero-layout {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }

    .hero-content {
      max-width: 760px;
      margin: 0;
      position: relative;
      text-align: left;
    }

    /* Subtle Amber Ambient Glow behind left content */
    .hero-content::before {
      content: "";
      position: absolute;
      top: -10%;
      left: -12%;
      width: 115%;
      height: 115%;
      background: none;
      pointer-events: none;
      z-index: -1;
      filter: blur(48px);
    }

    /* Small Eyebrow Badge */
    .hero-eyebrow {
      display: flex;
      margin-bottom: 12px;
    }

    .hero-eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 13px;
      border-radius: 999px;
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
      color: #F59E0B;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #F59E0B;
      box-shadow: 0 0 8px #F59E0B;
      animation: pulseDot 2.2s infinite ease-in-out;
    }

    @keyframes pulseDot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.35); opacity: 0.7; }
    }

    /* Main Headline */
    .hero-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(44px, 6vw, 80px);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      color: #FFFFFF;
      margin: 0 0 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .hero-title-white {
      display: block;
      color: #FFFFFF !important;
      text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 4px 24px rgba(0, 0, 0, 0.8);
    }

    .hero-title-accent {
      display: block;
      color: #F59E0B;
      background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 55%, #D97706 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 2px 18px rgba(245, 158, 11, 0.5));
    }

    /* Supporting Description */
    .hero-desc {
      font-family: 'Inter', sans-serif;
      font-size: 15.5px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.88);
      max-width: 530px;
      margin: 0 0 18px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.85);
    }

    /* CTA Buttons */
    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 18px;
    }

    .hero-content .hero-ctas {
      margin-bottom: 0;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
      height: 48px;
      box-sizing: border-box;
      padding: 0 22px !important;
      font-family: 'Outfit', sans-serif !important;
      font-weight: 700 !important;
      font-size: 15px !important;
      letter-spacing: 0.01em;
      border-radius: 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 9px !important;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .btn-hero-primary {
      background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
      color: #081622 !important;
      box-shadow: 0 6px 20px -3px rgba(245, 158, 11, 0.45) !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    .btn-hero-primary:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 10px 28px -3px rgba(245, 158, 11, 0.6) !important;
      color: #000000 !important;
    }

    .btn-hero-primary .btn-arrow {
      transition: transform 0.25s ease;
    }

    .btn-hero-primary:hover .btn-arrow {
      transform: translateX(3px);
    }

    .btn-hero-secondary {
      background: rgba(15, 23, 42, 0.68) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
      color: #FFFFFF !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    }

    .btn-hero-secondary:hover {
      border-color: rgba(245, 158, 11, 0.75) !important;
      background: rgba(15, 23, 42, 0.88) !important;
      color: #F59E0B !important;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(245, 158, 11, 0.2) !important;
    }

    /* Service Highlights Horizontal Bar */
    .hero-services-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: nowrap;
      padding: 10px 0;
      margin-bottom: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      max-width: fit-content;
    }

    .hero-service-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.90);
      white-space: nowrap;
    }

    .hero-service-icon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      background: rgba(245, 158, 11, 0.14) !important;
      border: 1px solid rgba(245, 158, 11, 0.35) !important;
      border-radius: 6px !important;
      color: #F59E0B !important;
      flex-shrink: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .hero-service-icon svg {
      width: 13px !important;
      height: 13px !important;
      display: block !important;
      stroke: #F59E0B !important;
      fill: none !important;
    }

    .service-sep {
      color: rgba(245, 158, 11, 0.45);
      font-size: 11px;
      flex-shrink: 0;
    }

    /* Trust Strip */
    .hero-trust-strip {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .trust-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.58);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      font-size: 12.5px;
      font-weight: 600;
      color: #FFFFFF;
      transition: all 0.25s ease;
    }

    .trust-badge-pill:hover {
      border-color: rgba(245, 158, 11, 0.4);
      background: rgba(15, 23, 42, 0.8);
    }

    .trust-pill-icon {
      color: #F59E0B;
      flex-shrink: 0;
    }

    /* Responsive Adjustments */
    @media (max-width: 960px) {
      .hero {
        padding: 78px 0 0;
      }
      .hero-content {
        max-width: 100%;
      }
      .hero-title {
        font-size: clamp(40px, 7.4vw, 64px);
      }
      .hero-services-bar {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 8px 16px;
        max-width: 100%;
      }
      .service-sep {
        display: none;
      }
    }

    @media (max-width: 600px) {
      .hero {
        padding: 70px 0 0;
      }
      .hero-title {
        font-size: clamp(34px, 10.5vw, 46px);
      }
      .hero-ctas {
        flex-direction: column;
        align-items: stretch;
      }
      .btn-hero-primary,
      .btn-hero-secondary {
        justify-content: center;
        width: 100%;
      }
      .hero-services-bar {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
      }
      .hero-service-item {
        font-size: 12px;
      }
      .hero-service-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
      }
      .hero-service-icon svg {
        width: 12px !important;
        height: 12px !important;
      }
    }

    /* 2. CONTINUOUS HORIZONTAL TRUST MARQUEE (LEFT-TO-RIGHT MOVEMENT) */
    .trust-black-band {
      background: rgba(8, 20, 32, 0.94);
      backdrop-filter: blur(14px) saturate(180%);
      -webkit-backdrop-filter: blur(14px) saturate(180%);
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 2px solid rgba(245, 158, 11, 0.45);
      padding: 10px 0;
      box-shadow: 0 4px 25px rgba(0, 0, 0, 0.35);
      position: relative;
      z-index: 25;
      overflow: hidden;
      width: 100%;
      margin-top: 0; /* Let the hero wrapper's equal auto margins center the content. */
      flex-shrink: 0;
    }

    .trust-marquee-container {
      width: 100%;
      overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    }

    .trust-marquee-track {
      display: flex;
      width: max-content;
      animation: tickerLeftToRight 38s linear infinite;
      will-change: transform;
    }

    .trust-marquee-track:hover {
      animation-play-state: paused;
    }

    @keyframes tickerLeftToRight {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0%);
      }
    }

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

    .trust-marquee-content {
      display: flex;
      align-items: center;
      gap: 28px;
      padding-right: 28px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .trust-band-item {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #FFFFFF;
      font-size: 13.5px;
      font-weight: 700;
      font-family: 'Outfit', sans-serif;
      letter-spacing: 0.02em;
      white-space: nowrap;
      transition: color 0.2s ease;
    }

    .trust-band-item:hover {
      color: #F59E0B;
    }

    .trust-band-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      flex-shrink: 0;
      background: rgba(245, 158, 11, 0.16);
      color: #F59E0B;
      border: 1px solid rgba(245, 158, 11, 0.40);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.18);
    }

    .trust-band-text {
      color: #FFFFFF;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }

    .trust-marquee-dot {
      color: rgba(245, 158, 11, 0.5);
      font-size: 14px;
      line-height: 1;
      user-select: none;
    }
    /* SECTION HEAD */
    .section {
      padding: 92px 0;
    }

    .head {
      max-width: 640px;
      margin-bottom: 48px;
    }

    .head h2 {
      font-size: clamp(28px, 3.4vw, 40px);
      margin-top: 8px;
      color: var(--navy);
    }

    .head p {
      margin-top: 14px;
      font-size: 16px;
      color: var(--slate-mid);
    }

    /* TECHNOLOGY PARTNER SECTION */
    .partner-photo {
      position: relative;
    }

    /* CTA: background with inspection checklist technician image */
    .cta {
      position: relative;
      color: #fff;
      padding: 88px 24px;
      text-align: center;
      margin: 0;
      overflow: hidden;
      background-image: linear-gradient(135deg, rgba(15, 23, 42, .88) 0%, rgba(15, 23, 42, .82) 100%), url('guarantee.jpg');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
    }

    .cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(234, 179, 8, .12) 0%, transparent 70%);
      pointer-events: none;
    }

    .cta h2 {
      position: relative;
      z-index: 2;
      color: #fff;
      font-size: clamp(28px, 3.8vw, 42px);
      max-width: 22ch;
      margin: 0 auto 16px;
      line-height: 1.2;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    }

    .cta p {
      position: relative;
      z-index: 2;
      color: rgba(255, 255, 255, .88);
      margin: 0 auto;
      font-size: 16.5px;
      max-width: 48ch;
      text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    }

    .cta .hero-ctas {
      position: relative;
      z-index: 2;
      justify-content: center;
      margin-top: 32px;
    }

    .cta .btn-cta-secondary {
      background: rgba(255, 255, 255, .14);
      border: 1.5px solid rgba(255, 255, 255, .45);
      color: #fff;
      backdrop-filter: blur(8px);
      font-weight: 600;
      transition: all .25s ease;
    }

    .cta .btn-cta-secondary:hover {
      background: #fff;
      color: var(--navy);
      border-color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .3);
    }

    /* ========================================================
       LIVE FLEET AVAILABILITY & SUBURB DISPATCH SECTION (SEPARATE SECTION)
       ======================================================== */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, .4);
      }

      70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }

    }

    /* INTERACTIVE PEST DIAGNOSIS HUB */
    .diag-tab {
      padding: 12px 22px;
      border-radius: 100px;
      font-weight: 600;
      font-size: 14.5px;
      border: 1.5px solid var(--line);
      background: #fff;
      color: var(--slate-mid);
      cursor: pointer;
      white-space: nowrap;
      transition: all .2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .diag-tab:hover {
      border-color: var(--slate-mid);
      color: var(--navy);
    }

    .diag-tab.active {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      box-shadow: 0 4px 14px rgba(15, 23, 42, .15);
    }

    /* FAQ: dark photographic section with tactile dark cards */
    .home-section.faq-section {
      position: relative;
      background-color: #0B1624;
      background-image:
        linear-gradient(180deg, rgba(8, 17, 28, 0.55) 0%, rgba(10, 22, 36, 0.68) 100%),
        url('faq-bg.png');
      background-size: cover;
      background-position: center;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .home-section.faq-section .home-head h2 {
      color: #FFFFFF;
    }

    .faq-section .home-eyebrow {
      color: var(--gold);
    }

    .faq-wrap {
      max-width: 780px;
      margin: 0 auto;
    }

    .faq-accordion {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .faq-item {
      background: linear-gradient(145deg, #13243A 0%, #0D1726 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.14);
      border-radius: 20px;
      overflow: hidden;
      box-shadow:
        12px 16px 36px rgba(0, 0, 0, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.10),
        inset -3px -3px 8px rgba(0, 0, 0, 0.5);
      transition: border-color .3s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease;
    }

    .faq-item:hover {
      border-color: rgba(245, 158, 11, 0.5);
      transform: translateY(-2px);
    }

    .faq-item.open {
      border-color: var(--gold);
      transform: none;
      box-shadow:
        16px 22px 44px rgba(0, 0, 0, 0.6),
        inset 2px 2px 5px rgba(255, 255, 255, 0.14),
        0 0 24px rgba(245, 158, 11, 0.22);
    }

    .faq-question {
      padding: 20px 24px;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 16.5px;
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      user-select: none;
    }

    .faq-chevron {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
      border-right: 2px solid var(--gold);
      border-bottom: 2px solid var(--gold);
      transform: rotate(45deg) translate(-2px, -2px);
      transition: transform .3s ease;
    }

    .faq-item.open .faq-chevron {
      transform: rotate(-135deg) translate(-2px, -2px);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s cubic-bezier(.4, 0, .2, 1), padding .35s ease;
      padding: 0 24px;
      font-size: 15px;
      color: #CBD5E1;
      line-height: 1.7;
    }

    .faq-item.open .faq-answer {
      padding: 0 24px 22px;
      max-height: 320px;
    }

    @media (max-width:768px) {
      .faq-question {
        padding: 18px 20px;
        font-size: 15.5px;
      }
      .faq-answer,
      .faq-item.open .faq-answer {
        padding-left: 20px;
        padding-right: 20px;
      }

    }
    /* STICKY MOBILE EMERGENCY CONVERSION BAR */
    .mobile-bottom-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background: #fff;
      border-top: 1px solid var(--line);
      padding: 10px 16px;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
    }

    .mobile-bar-flex {
      display: flex;
      gap: 10px;
    }

    .mobile-bar-btn {
      flex: 1;
      padding: 12px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 13.5px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
      cursor: pointer;
      text-decoration: none;
    }

    @media (max-width:768px) {
      .mobile-bottom-bar {
        display: block;
      }
      body {
        padding-bottom: 72px;
      }

    }

    /* Hero text entrance */
    .spray-reveal-text {
        opacity: 0;
        transform: translate3d(0, 16px, 0) scale(0.97);
        filter: blur(14px);
        animation: heroSmokeReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.15s;
        will-change: transform, opacity, filter;
      }

    @keyframes heroSmokeReveal {
        0% {
          opacity: 0;
          transform: translate3d(0, 16px, 0) scale(0.97);
          filter: blur(14px);
        }
        45% {
          opacity: 0.70;
          filter: blur(5px);
        }
        100% {
          opacity: 1;
          transform: translate3d(0, 0, 0) scale(1);
          filter: blur(0);
        }
      }

    /* Nav Actions: Search + Mobile Hamburger */
    .nav-actions-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

    /* Mobile Hamburger Toggle Button */
    .nav-mobile-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  width: 36px;
  height: 36px;
  padding: 8px 6px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

    .nav-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

    .nav-mobile-toggle .ham-line {
  display: block;
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

    /* MOBILE NAVIGATION DRAWER & BACKDROP */
    .mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 28, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

    .mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

    .mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -340px;
  width: 310px;
  max-width: 86vw;
  height: 100vh;
  height: 100dvh;
  background: #0B1928;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2200;
  box-shadow: -10px 0 36px rgba(0, 0, 0, 0.65);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

    .mobile-nav-drawer.active {
  right: 0;
}

    .mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  margin-bottom: 18px;
}

    .mobile-drawer-logo {
  height: 44px;
  width: auto;
}

    .mobile-drawer-close {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
  transition: background 0.2s;
}

    .mobile-drawer-close:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #EF4444;
}

    nav.mobile-nav-links {
      background: none;
      border: 0;
      padding: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 22px;
}

    .mobile-nav-links a {
  color: #FFFFFF;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 9px;
  transition: background 0.2s, color 0.2s;
}

    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
  background: rgba(245, 158, 11, 0.14);
  color: #F59E0B;
}

    /* Mobile Nav Accordion Groups */
    .mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

    /* Nav call button */
    .nav-call-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 14px;
      border-radius: 100px;
      background: var(--gold);
      color: var(--navy-deep);
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      white-space: nowrap;
      transition: background .2s ease, color .2s ease, transform .2s ease;
    }

    .nav-call-btn:hover {
      background: var(--gold-hover);
      color: #FFFFFF;
    }

    @media (max-width: 480px) {
      .nav-call-btn span {
        display: none;
      }
      .nav-call-btn {
        padding: 10px;
      }

    }
    .mobile-nav-actions .btn {
      width: 100%;
    }

    .mobile-nav-actions .btn-line {
      background: transparent;
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, .3);
    }

    /* Homepage sections */
    .home-section {
      padding: 88px 0;
      background: #FFFFFF;
    }

    .home-section.home-section-soft {
      background: #EDF1F6;
      border-top: 1px solid #DCE3EC;
      border-bottom: 1px solid #DCE3EC;
    }

    .home-section.home-section-dark {
      background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    }

    .home-section.home-section-dark h2 {
      color: #FFFFFF;
    }

    .home-section-dark .home-eyebrow {
      color: var(--gold);
    }

    .home-section-dark .step {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .12);
    }

    .home-section-dark .step h3 {
      color: #FFFFFF;
    }

    .home-section-dark .step p {
      color: #CBD5E1;
    }

    .home-section-dark .step-num {
      color: var(--gold);
    }

    .home-head {
      max-width: 640px;
      margin: 0 auto 44px;
      text-align: center;
    }

    .home-eyebrow {
      display: inline-block;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold-hover);
    }

    .home-section h2 {
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.15;
      color: var(--navy);
      margin-top: 8px;
    }

    .home-head p {
      margin-top: 14px;
      font-size: 16.5px;
      color: var(--slate-mid);
    }

    /* What we treat */
    .pest-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .pest-card {
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 28px;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .pest-card:hover {
      transform: translateY(-4px);
      border-color: rgba(245, 158, 11, .6);
      box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .22);
    }

    .pest-card-icon {
      display: grid;
      place-items: center;
      width: 60px;
      height: 60px;
      border-radius: 16px;
      background: var(--gold-soft);
      color: var(--gold-hover);
      margin-bottom: 18px;
    }

    .pest-card-icon svg {
      width: 40px;
      height: 40px;
    }

    .pest-card h3 {
      font-size: 19px;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .pest-card p {
      font-size: 15px;
      color: var(--slate-mid);
      margin-bottom: 18px;
    }

    .pest-card-link {
      margin-top: auto;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--gold-hover);
    }

    /* ================================================================
       WHY CHOOSE US - SOPHISTICATED EDITORIAL LIGHT SECTION
       ================================================================ */
    .why-section-light {
      background-color: #F8FAFC !important;
      border-top: 1px solid rgba(226, 232, 240, 0.9);
      border-bottom: 1px solid rgba(226, 232, 240, 0.9);
      padding: clamp(64px, 8vw, 92px) 0;
      position: relative;
    }

    .why-section-grid {
      display: grid;
      grid-template-columns: 46% 54%;
      gap: clamp(36px, 5vw, 64px);
      align-items: center;
    }

    /* LEFT COLUMN: Large editorial photograph with rounded corners & amber accent offset */
    .why-media-card {
      position: relative;
      width: 100%;
    }

    .why-media-card::before {
      content: "";
      position: absolute;
      inset: -8px -8px 8px 8px;
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(217, 119, 6, 0.08) 100%);
      border-radius: 26px;
      z-index: 1;
      pointer-events: none;
    }

    .why-media-frame {
      position: relative;
      z-index: 2;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 
        0 24px 48px -12px rgba(8, 20, 32, 0.16),
        0 4px 16px rgba(8, 20, 32, 0.06);
      border: 1.5px solid rgba(245, 158, 11, 0.35);
      aspect-ratio: 4 / 3;
      background: #E2E8F0;
    }

    .why-media-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .why-media-card:hover .why-media-frame img {
      transform: scale(1.025);
    }

    /* Floating Badge over image */
    .why-image-badge {
      position: absolute;
      bottom: 16px;
      left: 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 15px;
      border-radius: 999px;
      background: rgba(8, 20, 32, 0.86);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.22);
      color: #FFFFFF;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
      z-index: 3;
      pointer-events: none;
    }

    .why-image-badge .badge-icon {
      color: #F59E0B;
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    /* RIGHT COLUMN: Content & Benefit Cards */
    .why-content {
      display: flex;
      flex-direction: column;
    }

    .why-title {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(28px, 3.4vw, 40px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #081420;
      margin: 0 0 14px;
    }

    .why-intro {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #475569;
      margin: 0 0 24px;
      max-width: 580px;
    }

    /* 4 Benefits Stack */
    .why-benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .why-benefit-card {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 14px 18px;
      border-radius: 12px;
      background: #FFFFFF;
      border: 1px solid rgba(226, 232, 240, 0.95);
      box-shadow: 0 2px 8px rgba(8, 20, 32, 0.035);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    }

    .why-benefit-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -6px rgba(8, 20, 32, 0.08), 0 0 1px 1px rgba(245, 158, 11, 0.3);
      border-color: rgba(245, 158, 11, 0.45);
    }

    .why-benefit-icon {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(245, 158, 11, 0.12);
      color: #D97706;
      border: 1px solid rgba(245, 158, 11, 0.25);
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }

    .why-benefit-card:hover .why-benefit-icon {
      background: #F59E0B;
      color: #081420;
      transform: scale(1.05);
    }

    .why-benefit-body h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: #081420;
      margin: 0 0 3px;
      letter-spacing: 0.01em;
    }

    .why-benefit-body p {
      font-family: 'Inter', sans-serif;
      font-size: 13.8px;
      line-height: 1.5;
      color: #475569;
      margin: 0;
    }

    /* Responsive adjustments */
    @media (max-width: 960px) {
      .why-section-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .why-media-card {
        max-width: 580px;
        margin: 0 auto;
      }
    }

    @media (max-width: 600px) {
      .why-benefit-card {
        padding: 12px 14px;
        gap: 12px;
      }
      .why-benefit-icon {
        width: 36px;
        height: 36px;
      }
      .why-benefit-icon svg {
        width: 17px;
        height: 17px;
      }
      .why-benefit-body h3 {
        font-size: 15px;
      }
      .why-benefit-body p {
        font-size: 13px;
      }
      .why-image-badge {
        bottom: 12px;
        left: 12px;
        font-size: 12px;
        padding: 6px 12px;
      }
    }

    /* How it works */
    .steps {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .step {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 30px 28px;
    }

    .step-num {
      display: inline-block;
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      color: var(--gold-hover);
      padding-bottom: 10px;
      margin-bottom: 16px;
      border-bottom: 2px solid var(--gold);
    }

    .step h3 {
      font-size: 19px;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .step p {
      font-size: 15px;
      color: var(--slate-mid);
    }

    /* Reviews */
    .review-card {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 0;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 28px;
    }

    .review-stars {
      color: var(--gold);
      font-size: 17px;
      letter-spacing: 3px;
    }

    .review-card blockquote {
      flex: 1;
      font-size: 15.5px;
      line-height: 1.7;
      color: var(--slate-dark);
    }

    .review-card figcaption {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid #F1F5F9;
    }

    .review-avatar {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--navy);
      color: #FFFFFF;
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
    }

    .review-card strong {
      display: block;
      font-size: 15px;
      color: var(--navy);
    }

    .review-card small {
      display: block;
      font-size: 13px;
      color: var(--slate-muted);
    }

    /* Reviews carousel: three cards in view, slides one card at a time */
    /* Side gutters hold the arrow buttons so they never cover a card */
    .review-carousel {
      position: relative;
      padding: 0 72px;
    }

    .review-track {
      position: relative;
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      /* Padding (less than the 20px card gap) leaves room for the card shadows without showing the next card */
      padding: 16px 16px 36px;
      margin: -16px -16px 0;
      scroll-padding-inline: 16px;
    }

    .review-track::-webkit-scrollbar {
      display: none;
    }

    .review-track:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 4px;
      border-radius: 20px;
    }

    .review-track .review-card {
      flex: 0 0 calc((100% - 40px) / 3);
      scroll-snap-align: start;
    }

    .review-who {
      flex: 1;
      min-width: 0;
    }

    .review-google {
      flex-shrink: 0;
    }

    .review-arrow {
      position: absolute;
      top: calc(50% - 22px);
      transform: translateY(-50%);
      z-index: 2;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid #E2E8F0;
      background: #FFFFFF;
      color: var(--navy);
      cursor: pointer;
      box-shadow: 0 8px 22px -6px rgba(15, 23, 42, 0.25);
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

    .review-arrow:hover,
    .review-arrow:focus-visible {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--navy-deep);
    }

    .review-arrow-prev {
      left: 0;
    }

    .review-arrow-next {
      right: 0;
    }

    @media (max-width: 600px) {
      .review-carousel {
        padding: 0;
      }

      .review-dots {
        min-height: 40px;
        align-items: center;
      }

      .review-arrow {
        top: auto;
        bottom: 0;
        transform: none;
        width: 40px;
        height: 40px;
      }

      .review-carousel .review-arrow-prev {
        left: 4px;
      }

      .review-carousel .review-arrow-next {
        right: 4px;
      }
    }

    .review-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
    }

    .review-dots button {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 100px;
      background: #CBD5E1;
      cursor: pointer;
      transition: width .25s ease, background .25s ease;
    }

    .review-dots button[aria-current="true"] {
      width: 26px;
      background: var(--gold);
    }

    @media (max-width: 960px) {
      .review-track .review-card {
        flex-basis: calc((100% - 20px) / 2);
      }

    }
    @media (max-width: 600px) {
      .review-track .review-card {
        flex-basis: 100%;
      }

    }
    /* Service areas */
    .areas-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 56px;
      align-items: center;
    }

    .areas-map {
      margin: 0 0 24px;
    }

    .areas-map iframe {
      display: block;
      width: 100%;
      height: 260px;
      border: 0;
      border-radius: 14px;
    }

    .areas-intro p {
      margin: 16px 0 28px;
      font-size: 16.5px;
      color: var(--slate-mid);
    }

    .areas-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .areas-list li {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 12px;
      padding: 16px 18px;
    }

    .areas-list strong {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      color: var(--navy);
      margin-bottom: 2px;
    }

    .areas-list span {
      font-size: 13.5px;
      color: var(--slate-mid);
      line-height: 1.5;
    }

    /* About page */
    .about-copy {
      margin-bottom: 28px;
      font-size: 16px;
      color: var(--slate-mid);
    }

    .about-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .stat-row {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      text-align: center;
    }

    .stat-row strong {
      display: block;
      font-family: 'Outfit', sans-serif;
      font-size: clamp(32px, 3.6vw, 44px);
      font-weight: 800;
      color: var(--gold);
      line-height: 1.1;
    }

    .stat-row span {
      display: block;
      margin-top: 6px;
      font-size: 15px;
      color: #CBD5E1;
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .value-card {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 28px;
    }

    .value-card h3 {
      font-size: 19px;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .value-card p {
      font-size: 15px;
      color: var(--slate-mid);
    }

    @media (max-width: 960px) {
      .stat-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 32px;
      }
      .value-grid {
        grid-template-columns: 1fr;
      }

    }
    /* Services page */
    .pest-tabs {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 28px;
    }

    .pest-tabs .diag-tab {
      font-family: 'Outfit', sans-serif;
    }

    .pest-guide {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 36px;
      background: #FFFFFF;
      border: 1px solid #DCE3EC;
      border-radius: 20px;
      padding: 36px;
    }

    /* Fixed landscape frame (centred beside the text) so wide subjects like the rat aren't cropped to a square */
    .pest-guide-photo {
      align-self: center;
      aspect-ratio: 4 / 3;
      border-radius: 16px;
      overflow: hidden;
      background: #0F172A;
    }

    .pest-guide-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pest-guide-body {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .pest-guide .pest-guide-treat h4 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 0;
    }

    .pest-guide-treat h4 svg {
      color: var(--gold-hover);
    }

    .pest-guide h3 {
      font-size: 26px;
      color: var(--navy);
      margin-bottom: 10px;
    }

    .pest-guide h4 {
      font-family: 'Outfit', sans-serif;
      font-size: 17px;
      color: var(--navy);
      margin: 22px 0 12px;
    }

    .pest-guide-info > p {
      font-size: 16px;
      color: var(--slate-mid);
    }

    .pest-signs {
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .pest-signs li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      color: var(--slate-dark);
    }

    .pest-signs svg {
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--gold-hover);
    }

    .pest-guide-treat {
      background: var(--paper-dim);
      border: 1px solid #E2E8F0;
      border-radius: 16px;
      padding: 22px 24px;
    }

    .pest-guide-treat p {
      font-size: 15px;
      color: var(--slate-mid);
      margin-bottom: 18px;
    }

    .service-grid {
      display: grid;
      gap: 20px;
    }

    .service-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .service-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .service-card {
      background: #FFFFFF;
      border: 1px solid #DCE3EC;
      border-radius: 16px;
      padding: 28px;
    }

    .service-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--gold-soft);
      color: var(--gold-hover);
      margin-bottom: 18px;
    }

    .service-card h3 {
      font-size: 18px;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .service-card p {
      font-size: 15px;
      color: var(--slate-mid);
    }

    .home-section-dark .service-card {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(255, 255, 255, .12);
    }

    .home-section-dark .service-card h3 {
      color: #FFFFFF;
    }

    .home-section-dark .service-card p,
    .home-section-dark .home-head p {
      color: #CBD5E1;
    }

    .home-section-dark .service-icon {
      background: rgba(245, 158, 11, .14);
      color: var(--gold);
    }

    .section-cta {
      margin-top: 36px;
      text-align: center;
    }

    @media (max-width: 960px) {
      .service-grid-3,
      .service-grid-4 {
        grid-template-columns: 1fr 1fr;
      }
      .pest-guide {
        grid-template-columns: 1fr;
        padding: 28px;
      }

    }
    @media (max-width: 600px) {
      .service-grid-3,
      .service-grid-4 {
        grid-template-columns: 1fr;
      }
      .pest-guide {
        padding: 22px;
      }

    }
    /* Image + text side by side (About, Technology Partner) */
    .why-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 56px;
      align-items: center;
    }

    .why-media img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 20px;
      object-fit: cover;
    }

    /* Portrait photos (About page owner photo) keep their natural shape */
    .why-media-portrait img {
      aspect-ratio: 935 / 1024;
      object-position: center top;
    }

    /* Services: alternating image and text rows */
    .split-rows {
      display: grid;
      gap: 88px;
    }

    .split-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      scroll-margin-top: 110px;
    }

    .split-row-reverse .split-media {
      order: 2;
    }

    .split-media img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: 14px 20px 40px -10px rgba(15, 23, 42, 0.25);
    }

    .split-content h3 {
      font-size: clamp(24px, 2.6vw, 32px);
      color: var(--navy);
      margin: 6px 0 12px;
    }

    .split-content > p {
      font-size: 16.5px;
      color: var(--slate-mid);
      margin-bottom: 22px;
    }

    .split-checklist {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-bottom: 26px;
    }

    .split-checklist li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 15.5px;
      color: var(--slate-dark);
    }

    .split-checklist svg {
      flex-shrink: 0;
      color: var(--gold-hover);
    }

    .split-checklist strong {
      color: var(--navy);
    }

    .split-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: var(--gold-hover);
      transition: gap .2s ease;
    }

    .split-link:hover {
      gap: 12px;
    }

    @media (max-width: 860px) {
      .split-row {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .split-row-reverse .split-media {
        order: 0;
      }
      .split-rows {
        gap: 64px;
      }

    }
    /* Technology partner page */
    .partner-photo {
      margin: 0;
    }

    .partner-photo img {
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
    }

    .partner-photo figcaption {
      margin-top: 12px;
      font-size: 14px;
      color: var(--slate-muted);
      text-align: center;
    }

    .about-actions .btn svg {
      flex-shrink: 0;
    }

    .agent-photo {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 16px;
      border: 2px solid var(--gold);
    }

    .service-card .split-link {
      margin-top: 14px;
      font-size: 15px;
    }

    .agent-card {
      display: flex;
      flex-direction: column;
    }

    .agent-role {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--gold);
      margin: -2px 0 10px;
    }

    .agent-host {
      margin-top: auto;
      padding-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: #E2E8F0;
    }

    .agent-card:hover .agent-host {
      color: var(--gold);
    }

    .principles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .principle {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .principle .service-icon {
      flex-shrink: 0;
      margin-bottom: 0;
    }

    .principle h3 {
      font-size: 18px;
      color: var(--navy);
      margin-bottom: 6px;
    }

    .principle p {
      font-size: 15px;
      color: var(--slate-mid);
    }

    @media (max-width: 860px) {
      .principles {
        grid-template-columns: 1fr;
        gap: 24px;
      }

    }
    /* Mobile contact bar */
    .mobile-bar-call {
      background: var(--navy);
      color: #FFFFFF;
    }

    .mobile-bar-quote {
      background: var(--gold);
      color: var(--navy-deep);
    }

    @media (max-width: 960px) {
      .pest-grid {
        grid-template-columns: 1fr 1fr;
      }
      .why-grid,
      .areas-grid {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .steps {
        grid-template-columns: 1fr;
      }

    }
    @media (max-width: 600px) {
      .home-section {
        padding: 64px 0;
      }
      .pest-grid,
      .areas-list {
        grid-template-columns: 1fr;
      }
      .pest-card,
      .review-card {
        padding: 24px;
      }

    }
    /* Footer (bugs canvas from js/footer-bugs.js crawls behind the content) */
    .footer-bugs-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .site-footer .wrap {
      position: relative;
      z-index: 1;
    }

    .site-footer {
      background: var(--navy-deep);
      border-top: 3px solid var(--gold);
      padding: 64px 0 0;
      color: #94A3B8;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 48px;
    }

    .footer-logo img {
      height: 72px;
      width: auto;
    }

    .footer-tagline {
      margin: 16px 0 24px;
      font-size: 16px;
      color: #94A3B8;
    }

    .footer-contact {
      list-style: none;
      display: grid;
      gap: 14px;
    }

    .footer-contact li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 15px;
      color: #E2E8F0;
      line-height: 1.5;
    }

    .footer-contact svg {
      flex-shrink: 0;
      margin-top: 1px;
      color: var(--gold);
    }

    .footer-contact a:hover,
    .footer-col a:hover {
      color: var(--gold);
    }

    .footer-muted {
      color: #94A3B8;
    }

    .footer-col h4 {
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
    }

    .footer-col a,
    .footer-col span {
      display: block;
      font-size: 15.5px;
      color: #CBD5E1;
      margin-bottom: 14px;
      transition: color .2s ease;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px 24px;
      flex-wrap: wrap;
      margin-top: 48px;
      padding: 22px 0 26px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      font-size: 14px;
      color: #94A3B8;
    }

    .footer-partner {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #94A3B8;
    }

    .footer-partner img {
      border-radius: 4px;
    }

    .footer-partner strong {
      color: #FFFFFF;
      font-weight: 600;
      transition: color .2s ease;
    }

    .footer-partner:hover strong {
      color: var(--gold);
    }

    @media (max-width: 900px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
      }
      .footer-brand {
        grid-column: 1 / -1;
      }
    }
    @media (max-width: 640px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
    }
    /* Inner page hero (services, about, news, technology partner, contact) */
    .page-hero {
      padding: 130px 0 70px;
      background: radial-gradient(circle at 50% 20%, rgba(245, 158, 11, 0.08) 0%, rgba(15, 23, 42, 0.98) 75%), #0B1320;
      color: #FFFFFF;
      text-align: center;
      position: relative;
      overflow: hidden;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .page-hero h1 {
      font-size: clamp(34px, 4.5vw, 56px);
      font-family: 'Outfit', sans-serif;
      font-weight: 900;
      color: #FFFFFF;
      margin: 14px 0 16px;
      line-height: 1.15;
    }

    .page-hero .accent-gold {
      background: linear-gradient(180deg, #FFF6BD 0%, #FFE277 20%, #F5B027 48%, #CE7504 76%, #7E3900 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    .page-hero-sub {
      max-width: 620px;
      margin: 0 auto;
      font-size: 16.5px;
      color: #94A3B8;
      line-height: 1.65;
    }

    /* Contact page */
    .contact-section {
      padding: 72px 0 96px;
      background: var(--paper-dim);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: 56px;
      align-items: stretch;
    }

    .contact-form-card {
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 20px 44px -28px rgba(15, 23, 42, .25);
    }

    .contact-form-col h2,
    .contact-info h2 {
      font-size: 32px;
      color: var(--navy);
    }

    .title-bar {
      display: block;
      width: 64px;
      height: 4px;
      margin: 14px 0 18px;
      border-radius: 2px;
      background: var(--gold);
    }

    .contact-form-intro {
      margin-bottom: 28px;
      font-size: 16px;
      color: var(--slate-mid);
      max-width: 60ch;
    }

    .contact-form {
      position: relative;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 18px;
    }

    .form-field label {
      font-size: 14px;
      font-weight: 600;
      color: var(--navy);
    }

    .form-field label span {
      color: var(--gold-hover);
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      font: inherit;
      font-size: 15px;
      color: var(--ink);
      background: #FFFFFF;
      border: 1px solid #CBD5E1;
      border-radius: 10px;
      padding: 12px 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .form-field textarea {
      resize: vertical;
      min-height: 120px;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
    }

    .form-honeypot {
      display: none;
    }

    .contact-submit {
      width: 100%;
      padding: 15px 22px;
      font-size: 16px;
      margin-top: 4px;
    }

    .contact-submit:disabled {
      opacity: .6;
      cursor: wait;
    }

    .form-status {
      margin-top: 14px;
      font-size: 14.5px;
      color: var(--slate-mid);
    }

    .form-status:empty {
      display: none;
    }

    .form-status.is-success {
      color: var(--emerald);
    }

    .form-status.is-error {
      color: var(--danger);
    }

    /* "Find us" sits directly on the page background and stretches to the form column's height */
    .contact-info {
      display: flex;
      flex-direction: column;
      color: var(--slate-dark);
    }

    .contact-info-list {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-bottom: 24px;
    }

    .contact-info-list li {
      font-size: 16px;
      color: var(--slate-mid);
      line-height: 1.5;
    }

    .contact-info-list strong {
      color: var(--navy);
    }

    .contact-info-list a {
      color: var(--gold-hover);
      font-weight: 600;
    }

    .contact-info-list a:hover {
      color: var(--navy);
    }

    .contact-map {
      flex: 1;
      display: flex;
      min-height: 240px;
    }

    .contact-areas {
      margin-top: 28px;
    }

    .contact-areas h3 {
      font-size: 22px;
      color: var(--navy);
      margin-bottom: 8px;
    }

    .contact-areas p {
      font-size: 15.5px;
      color: var(--slate-mid);
      line-height: 1.65;
    }

    .contact-map iframe {
      display: block;
      width: 100%;
      height: auto;
      min-height: 240px;
      flex: 1;
      border: 0;
      border-radius: 14px;
    }

    @media (max-width: 900px) {
      .contact-grid {
        grid-template-columns: 1fr;
      }

    }
    @media (max-width: 560px) {
      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }
      .contact-form-card {
        padding: 28px 22px;
      }
      .contact-form-col h2,
      .contact-info h2 {
        font-size: 26px;
      }

    }
    /* ================================================================
       TACTILE 3D CARDS (same raised style as the FAQ blocks)
       Light version on light sections, FAQ-dark version on navy sections
       ================================================================ */
    .pest-card,
    .review-card,
    .value-card,
    .service-card,
    .areas-list li,
    .pest-guide {
      background: linear-gradient(145deg, #FFFFFF 0%, #F1F5F9 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow:
        12px 16px 34px -6px rgba(15, 23, 42, 0.14),
        -6px -6px 18px rgba(255, 255, 255, 0.9),
        inset 2px 2px 4px rgba(255, 255, 255, 1),
        inset -3px -3px 8px rgba(15, 23, 42, 0.05);
      transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease, border-color .3s ease;
    }

    .pest-card:hover,
    .review-card:hover,
    .value-card:hover,
    .service-card:hover,
    .areas-list li:hover {
      transform: translateY(-4px);
      border-color: rgba(245, 158, 11, 0.55);
      box-shadow:
        16px 24px 44px -8px rgba(15, 23, 42, 0.2),
        -6px -6px 18px rgba(255, 255, 255, 0.9),
        inset 2px 2px 4px rgba(255, 255, 255, 1),
        inset -3px -3px 8px rgba(15, 23, 42, 0.05),
        0 0 0 1px rgba(245, 158, 11, 0.25);
    }

    .areas-list li {
      border-radius: 16px;
    }

    .home-section-dark .step,
    .home-section-dark .service-card {
      background: linear-gradient(145deg, #13243A 0%, #0D1726 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.14);
      border-radius: 20px;
      box-shadow:
        12px 16px 36px rgba(0, 0, 0, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.10),
        inset -3px -3px 8px rgba(0, 0, 0, 0.5);
      transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
    }

    .home-section-dark .step:hover,
    .home-section-dark .service-card:hover {
      transform: translateY(-4px);
      border-color: rgba(245, 158, 11, 0.5);
    }

    /* Service area pins */
    .areas-list strong {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .areas-list strong svg {
      flex-shrink: 0;
      color: var(--gold-hover);
    }

    /* ================================================================
       ANT POP-UP ON "WHAT WE TREAT" CARDS (restored from the original design)
       ================================================================ */
    .pest-card {
      position: relative;
      overflow: visible;
    }

    .card-ant-peeker {
      position: absolute;
      top: 0;
      right: 28px;
      width: 44px;
      height: 44px;
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      transform: translateY(18px) scale(0.65) rotate(10deg);
      transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
    }

    .card-ant-peeker svg {
      width: 100%;
      height: 100%;
      display: block;
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    }

    /* Alternate sides so the row doesn't look repetitive */
    .pest-card:nth-child(3) .card-ant-peeker,
    .pest-card:nth-child(6) .card-ant-peeker {
      right: auto;
      left: 28px;
    }

    .pest-card:hover .card-ant-peeker,
    .pest-card:focus-visible .card-ant-peeker {
      opacity: 1;
      transform: translateY(-34px) scale(1) rotate(-3deg);
      animation: antPeekerTwitch 2.8s ease-in-out infinite 0.42s;
    }

    @keyframes antPeekerTwitch {
      0%, 100% { transform: translateY(-34px) scale(1) rotate(-3deg); }
      28% { transform: translateY(-37px) scale(1.03) rotate(3deg); }
      56% { transform: translateY(-33px) scale(0.98) rotate(-6deg); }
      82% { transform: translateY(-36px) scale(1.02) rotate(1deg); }

    }

    /* Keep the card content in front of the ant */
    .pest-card > *:not(.card-ant-peeker) {
      position: relative;
      z-index: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .card-ant-peeker {
        display: none;
      }

    }
    /* Review cards: a softer shadow that fits inside the carousel's padding instead of being clipped */
    .review-track .review-card {
      box-shadow:
        0 10px 24px -12px rgba(15, 23, 42, 0.22),
        inset 2px 2px 4px rgba(255, 255, 255, 1),
        inset -3px -3px 8px rgba(15, 23, 42, 0.04);
      border: 1px solid #E2E8F0;
    }

    .review-track .review-card:hover {
      transform: translateY(-3px);
      border-color: rgba(245, 158, 11, 0.55);
      box-shadow:
        0 14px 26px -12px rgba(15, 23, 42, 0.28),
        inset 2px 2px 4px rgba(255, 255, 255, 1),
        inset -3px -3px 8px rgba(15, 23, 42, 0.04);
    }