/**
* Template Name: Moderna
* Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Poppins", Arial, sans-serif;
  --heading-font: "Poppins", Arial, sans-serif;
  --nav-font: "Poppins", Arial, sans-serif;
  --btn-font: "Poppins", Arial, sans-serif;
}

/*--------------------------------------------------------------
# Premium Contact Page
--------------------------------------------------------------*/
.contact-page .contact-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
  padding: 150px 0 74px;
  overflow: hidden;
  background: #071f36 url("../img/hero-bg.jpg") center 42% / cover no-repeat;
}

.contact-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,22,39,.96) 0%, rgba(4,28,48,.88) 42%, rgba(4,25,43,.38) 72%, rgba(4,25,43,.2) 100%); }
.contact-hero-copy { position: relative; z-index: 2; max-width: 670px; }
.contact-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #76c7f4; font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.contact-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--brand-red); }
.contact-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(45px, 5.4vw, 76px); line-height: 1.03; }
.contact-hero h1 em { color: #76c7f4; font-style: normal; }
.contact-hero-copy > p { max-width: 650px; margin: 0; color: rgba(255,255,255,.84); font-size: 17px; line-height: 1.7; }
.contact-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-hero-actions a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.22); border-radius: 30px; background: rgba(255,255,255,.1); color: #fff; font-size: 13px; font-weight: 700; backdrop-filter: blur(8px); }
.contact-hero-actions a:hover { color: #fff; border-color: #76c7f4; background: rgba(20,119,184,.35); transform: translateY(-2px); }
.contact-hero-note { position: absolute; z-index: 2; right: 3%; top: 47%; display: flex; align-items: center; gap: 15px; color: #fff; font-family: var(--heading-font); font-size: 25px; font-style: italic; line-height: 1.25; transform: rotate(-5deg); }
.contact-hero-note i { color: #76c7f4; font-size: 48px; }

.contact-premium { padding: 46px 0 70px; background: linear-gradient(145deg, #f5f9fc, #fff 55%, #f1f6f9); }
.contact-layout { display: grid; grid-template-columns: .82fr 1.35fr; grid-template-areas: "visual form" "info info"; gap: 18px; align-items: stretch; }
.contact-panel, .contact-side { min-width: 0; }
.contact-info-panel { grid-area: info; display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 2fr); column-gap: 38px; align-items: center; }
.contact-info-panel .contact-panel-label, .contact-info-panel h2, .contact-info-panel .contact-panel-intro { grid-column: 1; }
.contact-info-panel .contact-panel-label { align-self: end; }
.contact-info-panel h2 { align-self: center; }
.contact-info-panel .contact-panel-intro { align-self: start; margin-bottom: 0; }
.contact-info-panel .contact-methods { grid-column: 2; grid-row: 1 / 4; }
.contact-form-panel { grid-area: form; }
.contact-side { grid-area: visual; }
.contact-panel { padding: 30px; border: 1px solid rgba(8,61,115,.08); border-radius: 22px; background: rgba(255,255,255,.94); box-shadow: 0 18px 50px rgba(8,61,115,.08); }
.contact-panel-label { display: block; margin-bottom: 5px; color: var(--accent-color); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.contact-panel h2 { margin: 0 0 9px; color: var(--heading-color); font-size: 28px; }
.contact-panel-intro { margin-bottom: 26px; color: #65717e; font-size: 13px; line-height: 1.6; }
.contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.contact-method { display: flex; align-items: center; gap: 14px; color: var(--heading-color); }
.contact-method:hover { color: var(--heading-color); }
.contact-method-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; background: linear-gradient(145deg, #e7f3fa, #d8ebf7); color: var(--accent-color); font-size: 20px; box-shadow: inset 0 0 0 6px rgba(255,255,255,.65); }
.contact-method > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.contact-method small, .contact-help-card small, .contact-visit-card small { color: #172b3e; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.contact-method strong { overflow-wrap: anywhere; color: #172b3e; font-size: 14px; }
.contact-method em { margin-top: 2px; color: #72808e; font-size: 11px; font-style: normal; }

.contact-request-form label { margin-bottom: 7px; color: #24384b; font-size: 12px; font-weight: 700; }
.contact-request-form label sup { color: var(--brand-red); }
.contact .contact-request-form input[type=text], .contact .contact-request-form input[type=email], .contact .contact-request-form input[type=tel], .contact .contact-request-form select, .contact .contact-request-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #d7e0e7; border-radius: 9px; background: #fbfdfe; color: var(--heading-color); font-size: 13px; box-shadow: none; }
.contact .contact-request-form textarea { resize: vertical; }
.contact .contact-request-form input:focus, .contact .contact-request-form select:focus, .contact .contact-request-form textarea:focus { border-color: var(--accent-color); background: #fff; box-shadow: 0 0 0 3px rgba(20,119,184,.1); }
.contact .contact-request-form { height: auto; padding: 0; background: transparent; box-shadow: none; }
.contact .contact-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; margin-top: 2px; padding: 14px 24px; border: 0; border-radius: 10px; background: linear-gradient(100deg, #083d73, #1477b8); color: #fff; font-weight: 800; transition: .3s ease; }
.contact .contact-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(8,61,115,.24); }
.contact-privacy { margin: 14px 0 0; color: #73808d; font-size: 10px; text-align: center; }
.contact-privacy i { margin-right: 5px; color: var(--accent-color); }

.contact-side { display: flex; flex-direction: column; gap: 14px; }
.contact-visual { position: relative; overflow: hidden; min-height: 285px; flex: 1; border-radius: 22px; background: #0a3153; box-shadow: 0 18px 45px rgba(8,61,115,.16); }
.contact-visual::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(3,21,37,.82)); }
.contact-visual img { width: 100%; height: 100%; min-height: 285px; object-fit: cover; transition: transform .7s ease; }
.contact-visual:hover img { transform: scale(1.05); }
.contact-visual div { position: absolute; z-index: 2; left: 22px; bottom: 20px; display: flex; flex-direction: column; color: #fff; }
.contact-visual span { font-size: 14px; }
.contact-visual strong { font-family: var(--heading-font); font-size: 27px; }
.contact-service-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 12px 4px; border-radius: 17px; background: #fff; }
.contact-service-icons span { display: flex; align-items: center; flex-direction: column; gap: 5px; color: var(--heading-color); text-align: center; }
.contact-service-icons i { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #e5f2f9; color: var(--accent-color); font-size: 16px; }
.contact-service-icons small { font-size: 9px; line-height: 1.15; }
.contact-help-card { display: flex; align-items: center; gap: 14px; padding: 17px; border-radius: 18px; background: linear-gradient(120deg, #e8f4fa, #f3f9fc); }
.contact-help-card > i { color: var(--accent-color); font-size: 38px; }
.contact-help-card div { display: flex; flex-direction: column; }
.contact-help-card span { color: #6e7b87; font-size: 10px; }
.contact-help-card a { color: var(--heading-color); font-size: 18px; font-weight: 800; }

.contact-map { position: relative; height: 330px; overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.65) contrast(.92); }
.contact-map-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.contact-visit-card { display: flex; align-items: flex-start; gap: 15px; width: min(430px, 100%); padding: 24px; border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 20px 50px rgba(8,61,115,.18); pointer-events: auto; backdrop-filter: blur(12px); }
.contact-visit-card p { margin: 3px 0 14px; color: #6f7b87; font-size: 12px; }
.contact-visit-card a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--accent-color); border-radius: 8px; color: var(--accent-color); font-size: 12px; font-weight: 800; }
.contact-visit-card a:hover { background: var(--accent-color); color: #fff; }

@media (max-width: 1199px) {
  .contact-layout { grid-template-columns: .8fr 1.2fr; }
  .contact-info-panel { grid-template-columns: 1fr; }
  .contact-info-panel .contact-panel-label, .contact-info-panel h2, .contact-info-panel .contact-panel-intro, .contact-info-panel .contact-methods { grid-column: 1; grid-row: auto; }
  .contact-info-panel .contact-panel-intro { margin-bottom: 24px; }
  .contact-hero-note { display: none; }
}

@media (max-width: 767px) {
  .contact-page .contact-hero { min-height: 560px; padding: 135px 0 60px; background-position: 62% center; }
  .contact-hero-shade { background: rgba(4,24,42,.84); }
  .contact-layout { grid-template-columns: 1fr; grid-template-areas: "form" "visual" "info"; }
  .contact-panel { padding: 25px 20px; }
  .contact-side { display: flex; }
  .contact-info-panel { display: block; }
  .contact-info-panel .contact-panel-intro { margin-bottom: 24px; }
  .contact-methods { grid-template-columns: 1fr; }
  .contact-map-overlay { align-items: flex-end; padding-bottom: 18px; }
  .contact-visit-card { width: calc(100% - 24px); margin: auto; }
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #445365; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #083d73; /* Deep blue sampled from the logo */
  --accent-color: #1477b8; /* Primary blue sampled from the logo */
  --brand-red: #df2d36; /* Red accent sampled from the logo */
  --brand-navy: #061f3b;
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #1477b8; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #555555; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1477b8; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f3f7fb;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #061f3b;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #0b3158;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  line-height: 1.7;
  letter-spacing: 0;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  letter-spacing: 0;
  line-height: 1.18;
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0.96);
  --default-color: #083d73;
  --heading-color: #083d73;
  --nav-color: #083d73;
  color: var(--default-color);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 253, 0.96));
  padding: 15px 0;
  border-bottom: 1px solid rgba(20, 119, 184, 0.12);
  box-shadow: 0 4px 28px rgba(6, 31, 59, 0.08);
  backdrop-filter: blur(14px);
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 64px;
  width: auto;
  margin-right: 0;
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .header .logo img {
    max-height: 52px;
  }
}

.header .logo h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .header .logo h1 {
    font-size: 17px;
  }
}

.header .btn-contact {
  align-items: center;
  font-family: var(--btn-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 24px;
  margin-left: 20px;
  border-radius: 50px;
  border: 2px solid var(--brand-red);
  background: var(--brand-red);
  color: #ffffff;
  white-space: nowrap;
  transition: 0.3s;
}

.header .btn-contact:hover {
  border-color: #bc2029;
  background: #bc2029;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(223, 45, 54, 0.24);
  transform: translateY(-1px);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  box-shadow: 0 10px 35px rgba(6, 31, 59, 0.16);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (min-width: 1200px) {
  .mobile-nav-toggle {
    display: none;
  }
}

@media (max-width: 1199px) {
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mobile-nav-toggle {
    position: relative;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgba(20, 119, 184, .08);
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .mobile-nav-toggle span,
  .mobile-nav-toggle span::before,
  .mobile-nav-toggle span::after {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .3s ease, opacity .3s ease, background .3s ease;
  }

  .mobile-nav-toggle span {
    position: relative;
    width: auto;
    height: auto;
    color: currentColor;
    background: transparent;
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
  }

  .mobile-nav-toggle span::before,
  .mobile-nav-toggle span::after {
    content: none;
    position: absolute;
    left: 0;
  }

  .mobile-nav-toggle span::before { transform: translateY(-7px); }
  .mobile-nav-toggle span::after { transform: translateY(7px); }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .mobile-nav-toggle span { background: transparent; }
  .mobile-nav-active .mobile-nav-toggle span::before { transform: rotate(45deg); }
  .mobile-nav-active .mobile-nav-toggle span::after { transform: rotate(-45deg); }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(4, 23, 43, 0.9);
    backdrop-filter: blur(8px);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
    animation: mobileMenuOpen .28s ease both;
  }

  @keyframes mobileMenuOpen {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/*--------------------------------------------------------------
# Polished Header Refresh
--------------------------------------------------------------*/
.header {
  background: transparent;
  padding: 14px 0;
  border-bottom: 0;
  box-shadow: none;
}

.header .container-fluid {
  min-height: 78px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 45px rgba(6, 31, 59, .13);
  backdrop-filter: blur(18px);
}

.header .logo {
  position: relative;
     padding: 0px 20px 8px 15px;
}

.header .logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 16%;
  width: 1px;
  height: 68%;
  /* background: linear-gradient(transparent, rgba(20,119,184,.28), transparent); */
}

.header .logo img {
  max-height: 56px;
  filter: drop-shadow(0 8px 14px rgba(8,61,115,.12));
}

.scrolled .header {
  padding: 8px 0;
  background: transparent;
  box-shadow: none;
}

.scrolled .header .container-fluid {
  min-height: 68px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(6, 31, 59, .16);
}

.scrolled .header .logo img {
  max-height: 50px;
}

.header .btn-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--brand-red), #f05a63 48%, #1477b8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 12px 24px rgba(223, 45, 54, .22);
}

.header .btn-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, #1477b8, #083d73);
  opacity: 0;
  transition: opacity .3s ease;
}

.header .btn-contact:hover {
  border-color: transparent;
  background: linear-gradient(110deg, var(--brand-red), #f05a63 48%, #1477b8);
  color: #fff;
  box-shadow: 0 16px 30px rgba(8,61,115,.24);
  transform: translateY(-2px);
}

.header .btn-contact:hover::before {
  opacity: 1;
}

@media (min-width: 1200px) {
  .navmenu > ul {
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(8,61,115,.08);
    border-radius: 999px;
    background: rgba(244, 249, 252, .78);
  }

  .navmenu a,
  .navmenu a:focus {
    min-height: 39px;
    padding: 10px 13px;
    border-radius: 999px;
    color: #254258;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
  }

  .navmenu a i,
  .navmenu a:focus i {
    margin-left: 7px;
    color: color-mix(in srgb, var(--accent-color), #083d73 20%);
    font-size: 11px;
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    background: linear-gradient(135deg, #1477b8, #083d73);
    color: #fff;
    box-shadow: 0 8px 18px rgba(8,61,115,.18);
  }

  .navmenu li:hover > a i,
  .navmenu .active i,
  .navmenu .active:focus i {
    color: #fff;
  }

  .navmenu .dropdown ul {
    left: 0;
    top: calc(100% + 18px);
    min-width: 260px;
    padding: 10px;
    border: 1px solid rgba(8,61,115,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 22px 48px rgba(6,31,59,.18);
    backdrop-filter: blur(14px);
  }

  .navmenu .dropdown ul::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 28px;
    width: 16px;
    height: 16px;
    border-left: 1px solid rgba(8,61,115,.1);
    border-top: 1px solid rgba(8,61,115,.1);
    background: rgba(255,255,255,.97);
    transform: rotate(45deg);
  }

  .navmenu .dropdown:hover > ul {
    top: calc(100% + 10px);
  }

  .navmenu .dropdown ul a {
    justify-content: flex-start;
    min-height: 38px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #34495a;
    font-size: 13px;
    font-weight: 700;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover > a {
    background: #eef7fc;
    color: var(--accent-color);
    box-shadow: none;
  }
}

@media (max-width: 1199px) {
  .header {
    padding: 10px 12px;
  }

  .header .container-fluid {
    min-height: 68px;
    padding: 8px 12px;
    border-radius: 22px;
  }

  .header .logo::after {
    display: none;
  }

  .header .logo img {
    max-height: 50px;
  }

  .mobile-nav-toggle {
    width: 46px;
    height: 46px;
    margin-right: 0;
    border: 1px solid rgba(20,119,184,.18);
    border-radius: 50%;
    background: linear-gradient(135deg, #1477b8, #083d73);
    color: #fff;
    box-shadow: 0 10px 22px rgba(8,61,115,.2);
  }

  .mobile-nav-toggle span {
    position: relative;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    background: currentColor;
    color: currentColor;
    font-size: 0;
    line-height: 0;
  }

  .mobile-nav-toggle span::before,
  .mobile-nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .3s ease, opacity .3s ease;
  }

  .mobile-nav-toggle span::before {
    transform: translateY(-7px);
  }

  .mobile-nav-toggle span::after {
    transform: translateY(7px);
  }

  .mobile-nav-active .mobile-nav-toggle {
    position: fixed;
    top: 22px;
    right: 22px;
    background: var(--brand-red);
  }

  .mobile-nav-active .mobile-nav-toggle span {
    background: transparent;
  }

  .mobile-nav-active .mobile-nav-toggle span::before {
    transform: rotate(45deg);
  }

  .mobile-nav-active .mobile-nav-toggle span::after {
    transform: rotate(-45deg);
  }

  .navmenu ul {
    inset: 88px 18px 24px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 55px rgba(6,31,59,.22);
  }

  .navmenu a,
  .navmenu a:focus {
    margin: 4px 0;
    padding: 13px 14px;
    border-radius: 14px;
    color: #254258;
    font-size: 15px;
    font-weight: 800;
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    background: #eef7fc;
    color: var(--accent-color);
  }

  .navmenu .dropdown ul {
    margin: 6px 0 10px;
    padding: 8px;
    border-radius: 16px;
    background: #f7fbfd;
  }

  .mobile-nav-active .navmenu {
    background:
      linear-gradient(135deg, rgba(6,31,59,.97), rgba(8,61,115,.96)),
      url("../img/hero-bg.jpg") center / cover;
    backdrop-filter: none;
  }

  .mobile-nav-active .navmenu::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgba(255,255,255,.05) 0 1px, transparent 1px 38px),
      linear-gradient(30deg, rgba(118,199,244,.08) 0 1px, transparent 1px 34px);
    opacity: .35;
    pointer-events: none;
  }

  .mobile-nav-active .navmenu > ul {
    left: 18px;
    right: 18px;
    top: 94px;
    bottom: 24px;
    inset: 94px 18px 24px;
    border: 1px solid rgba(255,255,255,.88);
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 55px rgba(0,0,0,.28);
  }

  .mobile-nav-active .header .container-fluid {
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
  }
}

@media (max-width: 575px) {
  .header {
    padding-inline: 8px;
  }

  .header .container-fluid {
    min-height: 62px;
    border-radius: 18px;
  }

  .header .logo img,
  .scrolled .header .logo img {
    max-height: 44px;
  }
}

/*--------------------------------------------------------------
# Minimal Premium Header (overrides the refresh above)
--------------------------------------------------------------*/
.header {
  padding: 0;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(8, 61, 115, .08);
  box-shadow: none;
  backdrop-filter: blur(14px);
  transition: box-shadow .3s ease, background .3s ease;
}

.scrolled .header {
  padding: 0;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 8px 30px rgba(6, 31, 59, .08);
}

.header .container-fluid,
.scrolled .header .container-fluid,
.mobile-nav-active .header .container-fluid {
  min-height: 84px;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: min-height .3s ease;
}

.scrolled .header .container-fluid {
  min-height: 70px;
}

.header .logo {
  padding: 0;
}

.header .logo img,
.scrolled .header .logo img {
  width: 58px;
  height: 75px;
  max-height: none;
  object-fit: contain;
  filter: none;
}

.scrolled .header .logo img {
  width: 55px;
  height: 75px;
}

/* CTA: solid, quiet, confident */
.header .btn-contact {
  padding: 12px 26px;
  border: 1px solid #083d73;
  border-radius: 4px;
  background: #083d73;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.header .btn-contact::before {
  display: none;
}

.header .btn-contact:hover {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  box-shadow: none;
  transform: none;
}

@media (min-width: 1200px) {
  .navmenu > ul {
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .navmenu a,
  .navmenu a:focus {
    position: relative;
    min-height: 0;
    padding: 30px 14px;
    border-radius: 0;
    background: transparent;
    color: #1b2b3c;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
    box-shadow: none;
  }

  .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 22px;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
  }

  .navmenu > ul > li:hover > a,
  .navmenu > ul > li > a.active,
  .navmenu > ul > li > a.active:focus {
    background: transparent;
    color: #083d73;
    box-shadow: none;
  }

  .navmenu > ul > li:hover > a::after,
  .navmenu > ul > li > a.active::after {
    transform: scaleX(1);
  }

  .navmenu a i,
  .navmenu a:focus i,
  .navmenu li:hover > a i,
  .navmenu .active i {
    margin-left: 5px;
    color: #7a8b9b;
    font-size: 10px;
  }

  .navmenu .dropdown ul {
    top: 100%;
    min-width: 250px;
    padding: 8px 0;
    border: 1px solid rgba(8, 61, 115, .08);
    border-top: 2px solid var(--accent-color);
    border-radius: 0 0 6px 6px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(6, 31, 59, .12);
    backdrop-filter: none;
  }

  .navmenu .dropdown ul::before {
    display: none;
  }

  .navmenu .dropdown:hover > ul {
    top: 100%;
  }

  .navmenu .dropdown ul a {
    padding: 11px 22px;
    border-radius: 0;
    color: #34495a;
    font-size: 13.5px;
    font-weight: 500;
  }

  .navmenu .dropdown ul a::after {
    display: none;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active,
  .navmenu .dropdown ul li:hover > a {
    background: #f4f8fb;
    color: var(--accent-color);
  }
}

@media (max-width: 1199px) {
  .header {
    padding: 0;
  }

  .header .container-fluid,
  .scrolled .header .container-fluid {
    min-height: 68px;
    padding: 0 16px;
    border-radius: 0;
  }

  .mobile-nav-toggle {
    border: 0;
    background: #083d73;
    box-shadow: none;
  }
}

@media (max-width: 575px) {
  .header {
    padding-inline: 0;
  }

  .header .container-fluid,
  .scrolled .header .container-fluid {
    min-height: 62px;
    border-radius: 0;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  position: relative;
  overflow: hidden;
  color: var(--default-color);
  background: radial-gradient(120% 140% at 15% 0%, #163e52 0%, #102e3d 45%, #0a1f29 100%);
  font-size: 14px;
}

.footer .footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.footer .footer-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}

.footer .orb-1 {
  top: -130px;
  left: 8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(104, 164, 196, 0.55), transparent 70%);
  animation: footerOrbFloat 22s ease-in-out infinite;
}

.footer .orb-2 {
  bottom: -150px;
  right: 6%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(224, 171, 82, 0.4), transparent 70%);
  animation: footerOrbFloat 26s ease-in-out infinite reverse;
}

.footer .footer-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 75%);
}

@keyframes footerOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(26px, -20px) scale(1.08); }
}

.footer > .container {
  position: relative;
  z-index: 1;
}

.footer .footer-brand-text {
  color: #ffffff;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s ease;
}

.footer .footer-logo:hover .footer-brand-text {
  transform: scale(1.04);
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: transform 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.footer .social-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--social-accent, var(--accent-color));
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.footer .social-links a:hover::before {
  transform: scale(1);
}

.footer .social-links a:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: 0 12px 26px var(--social-glow, rgba(104, 164, 196, 0.4));
}

.footer .social-links .social-x { --social-accent: #15202b; --social-glow: rgba(21, 32, 43, 0.5); }
.footer .social-links .social-facebook { --social-accent: #1877f2; --social-glow: rgba(24, 119, 242, 0.4); }
.footer .social-links .social-instagram { --social-accent: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); --social-glow: rgba(221, 42, 123, 0.4); }
.footer .social-links .social-linkedin { --social-accent: #0a66c2; --social-glow: rgba(10, 102, 194, 0.4); }

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul li:hover {
  transform: translateX(6px);
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
  transition: color 0.3s ease;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer-orb {
    animation: none !important;
  }

  .footer .footer-brand-text,
  .footer .social-links a,
  .footer .social-links a::before,
  .footer .footer-links ul li,
  .footer .footer-links ul a {
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.phone-float,
.whatsapp-float {
  position: fixed;
  right: 18px;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.phone-float {
  bottom: 143px;
  background: var(--accent-color);
  box-shadow: 0 10px 25px rgba(20, 119, 184, 0.4);
}

.whatsapp-float {
  bottom: 75px;
  background: #25d366;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45);
  animation: whatsapp-pulse 2.4s ease-in-out infinite;
}

.phone-float:hover,
.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
}

.phone-float:hover {
  box-shadow: 0 14px 32px rgba(20, 119, 184, 0.5);
}

.whatsapp-float:hover {
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.55);
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45), 0 0 0 10px rgba(37, 211, 102, 0); }
}

@media (max-width: 575px) {
  .phone-float,
  .whatsapp-float { right: 14px; width: 50px; height: 50px; font-size: 26px; }
  .phone-float { bottom: 130px; }
  .whatsapp-float { bottom: 68px; }
}

.scroll-top {
  position: fixed;
  isolation: isolate;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: linear-gradient(135deg, var(--accent-color), #174d65);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(27, 149, 188, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease, visibility 0.4s, opacity 0.4s;
}

.scroll-top::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  opacity: 0;
  animation: scrollTopPulse 2.4s ease-out infinite;
}

@keyframes scrollTopPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(27, 149, 188, 0.5);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top::before {
    animation: none;
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 24px 0 30px;
}

.page-title-tags a {
  display: inline-flex;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--btn-font);
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: 0.3s;
}

.page-title-tags a:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

@media (max-width: 480px) {
  .page-title-tags a {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  /* background-color: var(--background-color); */
  /* padding: 60px 0; */
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 47px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  background-color: transparent;
}

.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 95%;
  background: linear-gradient(to right, color-mix(in srgb, var(--background-color), transparent 90%), var(--background-color)), url("../img/hero-bg.jpg") center top no-repeat;
  background-size: cover;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) rotate(0deg);
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 96%;
  background: var(--background-color);
  opacity: 0.3;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) translateY(18px) rotate(2deg);
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
}

.hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.hero h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  animation: fadeInDown 1s both;
  display: block;
}

.hero p {
  width: 80%;
  margin: 0 auto 30px auto;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  animation: fadeInDown 1s both 0.2s;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 10%;
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 48px;
  line-height: 1;
  width: auto;
  height: auto;
}

.hero .btn-get-started {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: var(--default-color);
  animation: fadeInUp 1s both 0.4s;
  border: 2px solid var(--accent-color);
}

.hero .btn-get-started:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
}

.hero .carousel-indicators {
  bottom: -60px;
}

.hero .carousel-indicators li {
  cursor: pointer;
  background: var(--default-color);
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  opacity: 0.3;
  transition: 0.3s;
}

.hero .carousel-indicators li.active {
  opacity: 1;
  background: var(--accent-color);
}

.hero .hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero .hero-bg-slide.active {
  opacity: 1;
}

.hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(30, 67, 86, 0.85), rgba(30, 67, 86, 0.55));
}

@media (min-width: 1024px) {
  .hero p {
    width: 60%;
  }

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

@media (max-width: 768px),
(max-height: 700px) {
  .hero h2 {
    font-size: 28px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services {
  --cyan-color: #0dcaf0;
  --orange-color: #fd7e14;
  --teal-color: #20c997;
  --red-color: #df1529;
}

.featured-services .marquee-wrapper {
  overflow: hidden;
  padding: 20px 0;
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.featured-services .marquee-wrapper.is-dragging {
  cursor: grabbing;
}

.featured-services .marquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: featured-marquee 26s linear infinite;
}

.featured-services .marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.featured-services .marquee-track.js-active {
  animation: none;
}

.featured-services .marquee-wrapper.is-dragging .service-item {
  user-select: none;
}

@keyframes featured-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-services .marquee-track {
    animation-play-state: paused;
  }
}

.featured-services .service-item {
  background-color: var(--surface-color);
  box-shadow: 0px 5px 90px 0px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 40px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
  border: 1px solid transparent;
  flex: 0 0 280px;
  width: 280px;
}

.featured-services .service-item:hover {
  transform: translateY(-8px);
}

.featured-services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
  position: relative;
}

.featured-services .service-item .icon i {
  font-size: 28px;
  transition: 0.5s;
  position: relative;
}

.featured-services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.featured-services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.featured-services .service-item:hover {
  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.1);
}

.featured-services .service-item.item-cyan .icon {
  background-color: color-mix(in srgb, var(--cyan-color) 10%, white 95%);
}

.featured-services .service-item.item-cyan .icon i {
  color: var(--cyan-color);
}

.featured-services .service-item.item-cyan:hover {
  border-color: var(--cyan-color);
}

.featured-services .service-item.item-cyan:hover .icon {
  background-color: var(--cyan-color);
}

.featured-services .service-item.item-cyan:hover .icon i {
  color: var(--contrast-color);
}

.featured-services .service-item.item-orange .icon {
  background-color: color-mix(in srgb, var(--orange-color) 10%, white 95%);
}

.featured-services .service-item.item-orange .icon i {
  color: var(--orange-color);
}

.featured-services .service-item.item-orange:hover {
  border-color: var(--orange-color);
}

.featured-services .service-item.item-orange:hover .icon {
  background-color: var(--orange-color);
}

.featured-services .service-item.item-orange:hover .icon i {
  color: var(--contrast-color);
}

.featured-services .service-item.item-teal .icon {
  background-color: color-mix(in srgb, var(--teal-color) 10%, white 95%);
}

.featured-services .service-item.item-teal .icon i {
  color: var(--teal-color);
}

.featured-services .service-item.item-teal:hover {
  border-color: var(--teal-color);
}

.featured-services .service-item.item-teal:hover .icon {
  background-color: var(--teal-color);
}

.featured-services .service-item.item-teal:hover .icon i {
  color: var(--contrast-color);
}

.featured-services .service-item.item-red .icon {
  background-color: color-mix(in srgb, var(--red-color) 10%, white 95%);
}

.featured-services .service-item.item-red .icon i {
  color: var(--red-color);
}

.featured-services .service-item.item-red:hover {
  border-color: var(--red-color);
}

.featured-services .service-item.item-red:hover .icon {
  background-color: var(--red-color);
}

.featured-services .service-item.item-red:hover .icon i {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  position: relative;
  overflow: hidden;
}

.about .about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.about .about-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.about .orb-1 {
  top: -120px;
  right: -90px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(104, 164, 196, 0.35), transparent 70%);
  animation: aboutOrbFloat 20s ease-in-out infinite;
}

.about .orb-2 {
  bottom: -140px;
  left: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(224, 171, 82, 0.22), transparent 70%);
  animation: aboutOrbFloat 24s ease-in-out infinite reverse;
}

.about .about-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 62, 82, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 62, 82, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

@keyframes aboutOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -24px) scale(1.1); }
}

.about > .container {
  position: relative;
  z-index: 1;
}

.about .content h3 {
  margin: 10px 0 18px;
  background: linear-gradient(100deg, #163e52 0%, #1a9bc4 30%, #163e52 55%, #1a9bc4 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: 750;
  line-height: 1.15;
  animation: aboutTitleShine 7s linear infinite;
}

@keyframes aboutTitleShine {
  to { background-position: 200% center; }
}

.about .about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.about .about-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--accent-color);
  animation: aboutLineGrow 2.2s ease-in-out infinite;
}

.about .about-lead {
  color: #335e70;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.75;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 8px 0;
  display: flex;
  gap: 12px;
  transition: transform 0.35s ease, color 0.35s ease;
}

.about .content ul li:hover {
  color: #173c4d;
  transform: translateX(7px);
}

.about .about-chip {
  --chip-accent: #1599b8;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--chip-accent), color-mix(in srgb, var(--chip-accent), #10202a 55%));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--chip-accent), transparent 65%);
  font-size: 1.05rem;
  transition: transform 0.4s ease;
}

.about .content ul li:hover .about-chip {
  transform: rotateY(180deg) scale(1.08);
}

.about .about-chip.chip-blue { --chip-accent: #2870a7; }
.about .about-chip.chip-gold { --chip-accent: #c8933f; }

.about .about-services strong {
  color: #173c4d;
}

.about .about-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0;
}

.about .about-metrics-under-visual {
  margin: 18px 0 0;
}

.about .about-metric {
  --card-accent: #1599b8;
  --card-glow: rgba(21, 153, 184, 0.35);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 82px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(27, 149, 188, 0.2);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #eaf7fa);
  box-shadow: 0 12px 30px rgba(20, 66, 83, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.about .about-metric::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), var(--card-accent), transparent 25%, transparent 75%, var(--card-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: premiumBorderSpin 5s linear infinite;
}

.about .about-metric.metric-blue { --card-accent: #2870a7; --card-glow: rgba(40, 112, 167, 0.35); }
.about .about-metric.metric-gold { --card-accent: #c8933f; --card-glow: rgba(200, 147, 63, 0.35); }

.about .about-metric:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--card-accent), transparent 45%);
  box-shadow: 0 20px 40px rgba(20, 66, 83, 0.16), 0 0 30px var(--card-glow);
}

.about .about-metric:hover::after {
  opacity: 1;
}

.about .about-metric strong {
  color: var(--card-accent);
  font-size: 1.65rem;
  line-height: 1;
}

.about .about-metric span {
  color: #456b79;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}

.about .about-closing {
  position: relative;
  padding: 16px 18px 16px 46px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(120deg, rgba(104, 164, 196, 0.1), transparent);
  color: #456b79;
  font-style: italic;
}

.about .about-closing i {
  position: absolute;
  left: 14px;
  top: 12px;
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  font-size: 1.3rem;
}

.about .about-closing-under-visual {
  margin: 18px 4px 0;
  line-height: 1.7;
}

@keyframes aboutLineGrow {
  0%, 100% { transform: scaleX(0.45); transform-origin: left; opacity: 0.55; }
  50% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@media (max-width: 575px) {
  .about .about-metrics {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about .about-eyebrow::before {
    animation: none;
  }
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

.about .safety-net-3d-showcase {
  --cube-size: min(360px, 72vw);
  position: relative;
  min-height: 440px;
  overflow: visible;
  background: f4f8fbf;
  perspective: 1100px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.about .cube-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--cube-size);
  height: var(--cube-size);
  margin-left: calc(var(--cube-size) / -2);
  margin-top: calc(var(--cube-size) / -2 - 10px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 164, 196, 0.4), transparent 70%);
  filter: blur(40px);
  opacity: 0.8;
  animation: cubeGlowPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cubeGlowPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.65; }
  50% { transform: scale(1.08); opacity: 0.95; }
}

.about .safety-net-3d-showcase:focus-visible {
  outline: none;
}

.about .safety-net-3d-showcase.is-dragging {
  cursor: grabbing;
}

.about .safety-net-cube {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  left: 50%;
  top: 50%;
  margin-left: calc(var(--cube-size) / -2);
  margin-top: calc(var(--cube-size) / -2 - 10px);
  transform-style: preserve-3d;
  will-change: transform;
}

.about .safety-net-cube-face {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: #16384a;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.18);
  backface-visibility: hidden;
}

.about .safety-net-cube-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.about .safety-net-cube .face-front {
  transform: rotateY(0deg) translateZ(calc(var(--cube-size) / 2));
}

.about .safety-net-cube .face-right {
  transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
}

.about .safety-net-cube .face-back {
  transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2));
}

.about .safety-net-cube .face-left {
  transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.about .safety-net-3d-badge {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50px;
  color: #fff;
  background: rgba(18, 51, 68, 0.78);
  backdrop-filter: blur(8px);
  font-weight: 600;
}

@media (max-width: 767px) {
  .about .safety-net-3d-showcase {
    min-height: 360px;
  }
}

/* Premium Security Systems Section */
.security-systems {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(118, 199, 244, 0.22), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(223, 45, 54, 0.16), transparent 30%),
    linear-gradient(135deg, #031427 0%, #061f3b 48%, #092b4d 100%);
  color: #fff;
}

.security-systems .container {
  position: relative;
  z-index: 1;
}

.security-systems-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 46px;
  align-items: center;
}

.security-systems-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(118, 199, 244, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #76c7f4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.security-systems h2 {
  max-width: 620px;
  margin: 18px 0 16px;
  color: #fff;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.06;
}

.security-systems-copy > p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.8;
}

.security-systems-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 28px 0;
}

.security-systems-points a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 70px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}

.security-systems-points a:hover,
.security-systems-points a:focus {
  transform: translateY(-2px);
  border-color: rgba(118, 199, 244, 0.45);
  background: rgba(255, 255, 255, 0.11);
}

.security-systems-points i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1477b8, #0a4d8f);
  color: #fff;
  font-size: 17px;
}

.security-systems-points strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.security-systems-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 23px;
  border-radius: 8px;
  background: var(--brand-red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(223, 45, 54, 0.26);
}

.security-systems-button:hover {
  transform: translateY(-3px);
  color: #fff;
  box-shadow: 0 20px 42px rgba(223, 45, 54, 0.34);
}

.security-systems-gallery {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  grid-auto-rows: 220px;
  gap: 18px;
}

.security-system-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #061f3b;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.28);
}

.security-card-large {
  grid-row: span 2;
}

.security-system-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.08);
  transition: transform 0.7s ease;
}

.security-system-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(3, 20, 39, 0.92));
}

.security-system-card:hover img {
  transform: scale(1.06);
}

.security-system-card div {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 18px;
}

.security-system-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #76c7f4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.security-system-card strong {
  display: block;
  color: #fff;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.1;
}

@media (max-width: 991px) {
  .security-systems-wrap {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 767px) {
  .security-systems-points,
  .security-systems-gallery {
    grid-template-columns: 1fr;
  }

  .security-systems-gallery {
    grid-auto-rows: 245px;
  }

  .security-card-large {
    grid-row: span 1;
  }
}

/* Compact animated safety cards */
.features .section-title {
  padding-bottom: 48px;
}

.features .section-title h2 {
  font-size: clamp(38px, 5vw, 58px);
}

.features-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.features .premium-card,
.features .premium-card:nth-child(even),
.features .premium-card:nth-child(1),
.features .premium-card:nth-child(2),
.features .premium-card:nth-child(3),
.features .premium-card:nth-child(4) {
  grid-column: span 1;
  min-height: 430px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(15, 62, 103, .98), rgba(5, 27, 49, .98));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}

.features .premium-card::before {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--card-accent), var(--brand-red), transparent);
  background-size: 200% 100%;
  animation: cardBorderFlow 3.5s linear infinite;
}

.features .premium-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -65px;
  bottom: -70px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: .1;
  filter: blur(24px);
  transition: opacity .45s ease, transform .45s ease;
}

@keyframes cardBorderFlow {
  to { background-position: 200% 0; }
}

.features .premium-card:hover {
  transform: translateY(-10px) scale(1.015);
  border-color: color-mix(in srgb, var(--card-accent), transparent 45%);
  box-shadow: 0 28px 65px rgba(0, 0, 0, .38), 0 0 28px var(--card-glow);
}

.features .premium-card:hover::after {
  opacity: .2;
  transform: scale(1.35);
}

.features .premium-card .card-media,
.features .premium-card:nth-child(1) .card-media,
.features .premium-card:nth-child(4) .card-media {
  height: 185px;
}

.features .premium-card .card-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.22) 45%, transparent 65%);
  transform: translateX(-120%);
}

.features .premium-card:hover .card-media::before {
  animation: cardImageShine .9s ease;
}

@keyframes cardImageShine {
  to { transform: translateX(120%); }
}

.features .premium-card .card-body {
  padding: 22px 22px 24px;
}

.features .premium-card h3 {
  margin: 3px 0 9px;
  font-size: 25px;
}

.features .premium-card .card-body > p {
  display: -webkit-box;
  min-height: 48px;
  margin-bottom: 18px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 1.7;
}

.features .premium-card ul {
  display: none;
}

.feature-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.11);
  color: #fff;
  font-family: var(--btn-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

.feature-view-more i {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--card-accent);
  transition: transform .35s ease, background .35s ease;
}

.feature-view-more:hover {
  color: #fff;
}

.feature-view-more:hover i,
.premium-card:hover .feature-view-more i {
  background: var(--brand-red);
  transform: rotate(45deg);
}

.features .net-shield,
.features .hanger-motion {
  width: 42px;
  height: 42px;
  font-size: 18px;
  animation: premiumIconFloat 3s ease-in-out infinite;
}

@keyframes premiumIconFloat {
  50% { transform: translateY(-6px); }
}

@media (max-width: 1199px) {
  .features-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) { min-height: 420px; }
}

@media (max-width: 575px) {
  .features-list { grid-template-columns: 1fr; }
  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) {
    grid-column: 1;
    min-height: 405px;
  }
}

/* Timeline layout must remain last in the cascade */
.features-list { display: block; max-width: 1080px; }
.features .premium-card,
.features .premium-card:nth-child(even),
.features .premium-card:nth-child(1),
.features .premium-card:nth-child(2),
.features .premium-card:nth-child(3),
.features .premium-card:nth-child(4) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  grid-column: auto;
  min-height: 245px;
  margin-bottom: 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.features .premium-card .card-media,
.features .premium-card:nth-child(1) .card-media,
.features .premium-card:nth-child(4) .card-media {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 390px);
  height: 215px;
  border-radius: 20px;
}
.features .premium-card .card-body { grid-column: 3; grid-row: 1; padding: 25px 30px; }
.features .premium-card:nth-child(even) .card-media { grid-column: 3; }
.features .premium-card:nth-child(even) .card-body { grid-column: 1; }

@media (max-width: 767px) {
  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) {
    display: flex;
    min-height: 0;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,.045);
  }
  .features .premium-card .card-media,
  .features .premium-card:nth-child(1) .card-media,
  .features .premium-card:nth-child(4) .card-media,
  .features .premium-card:nth-child(even) .card-media { width: 100%; height: 210px; border-radius: 0; }
  .features .premium-card .card-body,
  .features .premium-card:nth-child(even) .card-body { width: 100%; padding: 24px; }
}

/* Oversized footer wordmark */
.footer .footer-watermark {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  bottom: auto;
  width: max-content;
  transform: translate(-50%, -50%);
  font-family: var(--default-font);
  font-size: clamp(110px, 19vw, 300px);
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.075em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.footer .footer-watermark span {
  color: rgba(8, 61, 115, .055);
}

.footer .footer-watermark strong {
  color: rgba(223, 45, 54, .05);
  font: inherit;
}

.footer .footer-top,
.footer .copyright {
  position: relative;
  z-index: 1;
}

.footer .footer-top .row > div {
  padding-inline: 22px;
}

.footer .footer-about,
.footer .footer-links,
.footer .footer-social {
  min-width: 0;
}

.footer .footer-social p {
  max-width: 290px;
}

.footer .footer-follow-title {
  margin-top: 24px;
}

@media (min-width: 992px) {
  .footer .footer-top .row > div:not(:first-child) {
    border-left: 1px solid rgba(8, 61, 115, .08);
  }
}

@media (max-width: 991px) {
  .footer .footer-top .row > div {
    padding-inline: 12px;
  }
}

@media (max-width: 575px) {
  .footer .footer-watermark {
    top: 50%;
    bottom: auto;
    font-size: 120px;
  }
}

/* Premium alternating service timeline */
.features-list {
  position: relative;
  display: block;
  max-width: 1080px;
  margin-inline: auto;
}

/* .features-list::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(91,185,235,.75) 0 9px, transparent 9px 17px);
} */

/* .features-list::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  width: 3px;
  height: 90px;
  border-radius: 10px;
  transform: translateX(-50%);
  background: linear-gradient(transparent, #78caf5, transparent);
  filter: drop-shadow(0 0 8px #48a9df);
  animation: timelineFlow 4s linear infinite;
} */

@keyframes timelineFlow {
  from { top: 10px; }
  to { top: calc(100% - 100px); }
}

.features .premium-card,
.features .premium-card:nth-child(even),
.features .premium-card:nth-child(1),
.features .premium-card:nth-child(2),
.features .premium-card:nth-child(3),
.features .premium-card:nth-child(4) {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: center;
  min-height: 245px;
  margin: 0 0 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.features .premium-card::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 4px solid #0a2947;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  background: var(--card-accent);
  box-shadow: 0 0 0 7px rgba(255,255,255,.08), 0 0 22px var(--card-glow);
  animation: timelinePulse 2.4s ease-in-out infinite;
  mask: none;
  -webkit-mask: none;
}

.features .premium-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: calc(50% - 42px);
  width: 84px;
  height: 1px;
  opacity: .45;
  transform: none;
  background: linear-gradient(90deg, var(--card-accent), transparent, var(--card-accent));
  filter: none;
}

@keyframes timelinePulse {
  50% { box-shadow: 0 0 0 11px rgba(255,255,255,.03), 0 0 30px var(--card-glow); }
}

.features .premium-card .card-media,
.features .premium-card:nth-child(1) .card-media,
.features .premium-card:nth-child(4) .card-media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 390px);
  height: 215px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
}

.features .premium-card .card-body {
  grid-column: 3;
  grid-row: 1;
  padding: 25px 30px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  transition: transform .4s ease, border-color .4s ease, background .4s ease;
}

.features .premium-card:nth-child(even) .card-media { grid-column: 3; justify-self: start; }
.features .premium-card:nth-child(even) .card-body { grid-column: 1; }

.features .premium-card:hover { transform: none; border: 0; box-shadow: none; }
.features .premium-card:hover .card-body { transform: translateY(-6px); border-color: color-mix(in srgb, var(--card-accent), transparent 45%); background: linear-gradient(145deg, rgba(20,119,184,.18), rgba(255,255,255,.04)); }
.features .premium-card:hover .card-media { transform: translateY(-6px) rotate(-1deg); }
.features .premium-card:nth-child(even):hover .card-media { transform: translateY(-6px) rotate(1deg); }
.features .premium-card h3 { font-size: clamp(25px, 3vw, 34px); }
.features .premium-card .card-body > p { min-height: auto; }
.features .feature-view-more { width: auto; gap: 18px; padding-top: 13px; }

@media (max-width: 767px) {
  .features-list { padding-left: 28px; }
  .features-list::before, .features-list::after { left: 8px; }
  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 30px;
    border-radius: 20px;
    background: rgba(255,255,255,.045);
    overflow: hidden;
  }
  .features .premium-card::before { left: -20px; top: 32px; }
  .features .premium-card::after { display: none; }
  .features .premium-card .card-media,
  .features .premium-card:nth-child(1) .card-media,
  .features .premium-card:nth-child(4) .card-media,
  .features .premium-card:nth-child(even) .card-media {
    width: 100%; height: 210px; border: 0; border-radius: 0; transform: none;
  }
  .features .premium-card .card-body,
  .features .premium-card:nth-child(even) .card-body {
    width: 100%; padding: 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features-list::after,
  .features .premium-card::before { animation: none; }
}

/* Premium FAQ */
.premium-faq {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #dce8f3;
  background: linear-gradient(135deg, #04172b 0%, #082e53 55%, #061f3b 100%);
}

.premium-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: linear-gradient(rgba(90,175,229,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(90,175,229,.1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to right, #000, transparent 82%);
}

.faq-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.faq-glow-blue { top: -160px; left: -100px; background: rgba(20,119,184,.3); }
.faq-glow-red { right: -150px; bottom: -200px; background: rgba(223,45,54,.2); }

.faq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #7bc5f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.premium-faq h2 {
  max-width: 470px;
  margin: 18px 0 22px;
  color: #fff;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.faq-intro { max-width: 480px; color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.8; }

.faq-trust-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 440px;
  margin-top: 38px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}

.faq-trust-icon { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 12px; color: #fff; background: var(--accent-color); font-size: 21px; }
.faq-trust-card div { display: grid; flex: 1; }
.faq-trust-card small { color: rgba(255,255,255,.55); }
.faq-trust-card strong { color: #fff; }
.faq-trust-card > a { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-red); }
.faq-trust-card > a:hover { color: #fff; transform: rotate(45deg); }

.faq-accordion { display: grid; gap: 12px; }

.faq-accordion .accordion-item {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 15px 35px rgba(0,0,0,.12);
  backdrop-filter: blur(14px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.faq-accordion .accordion-item:hover { transform: translateX(-5px); border-color: rgba(82,178,235,.38); background: rgba(255,255,255,.08); }

.faq-accordion .accordion-button {
  gap: 16px;
  padding: 22px 24px;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-weight: 700;
}

.faq-accordion .accordion-button span { color: #62b7e9; font-size: 12px; letter-spacing: 1px; }
.faq-accordion .accordion-button:not(.collapsed) { color: #fff; background: transparent; box-shadow: none; }
.faq-accordion .accordion-button::after { filter: brightness(0) invert(1); opacity: .7; }
.faq-accordion .accordion-button:not(.collapsed)::after { filter: brightness(0) saturate(100%) invert(28%) sepia(95%) saturate(2724%) hue-rotate(340deg) brightness(95%); opacity: 1; }
.faq-accordion .accordion-body { padding: 0 58px 22px; color: rgba(255,255,255,.64); line-height: 1.75; }

@media (max-width: 991px) {
  .premium-faq { padding: 80px 0; }
  .premium-faq h2, .faq-intro { max-width: 650px; }
}

@media (max-width: 575px) {
  .premium-faq { padding: 68px 0; }
  .faq-trust-card { margin-top: 28px; }
  .faq-accordion .accordion-button { gap: 11px; padding: 19px 17px; font-size: 14px; }
  .faq-accordion .accordion-body { padding: 0 44px 20px; font-size: 14px; }
}

/* White footer theme */
.footer,
.footer.dark-background {
  --background-color: #ffffff;
  --default-color: #111827;
  --heading-color: #050b14;
  --surface-color: #f4f7fb;
  color: #111827;
  background: #ffffff;
  border-top: 1px solid rgba(8, 61, 115, .12);
}

.footer .footer-orb {
  opacity: .12;
}

.footer .orb-1 {
  background: radial-gradient(circle, rgba(20, 119, 184, .35), transparent 70%);
}

.footer .orb-2 {
  background: radial-gradient(circle, rgba(223, 45, 54, .2), transparent 70%);
}

.footer .footer-grid-overlay {
  background-image:
    linear-gradient(rgba(8, 61, 115, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 61, 115, .035) 1px, transparent 1px);
}

.footer h4,
.footer strong,
.footer .sitename,
.footer .footer-contact,
.footer .copyright,
.footer p {
  color: #111827;
}

.footer .footer-links ul a {
  color: #1f2937;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .social-links a {
  color: #111827;
  border-color: rgba(17, 24, 39, .25);
  background: #ffffff;
}

.footer .footer-brand-text {
  text-shadow: 0 6px 14px rgba(6, 31, 59, .12);
}

.footer .footer-logo-img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  border-radius: 8px;
}

.footer .copyright {
  border-top-color: rgba(17, 24, 39, .12);
}

@media (prefers-reduced-motion: reduce) {
  .features .premium-card::before,
  .features .net-shield,
  .features .hanger-motion { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about .safety-net-cube {
    transition: none !important;
  }

  .about .about-orb,
  .about .content h3,
  .about .cube-glow,
  .about .about-metric::after,
  .about .about-chip {
    animation: none !important;
  }

  .about .about-metric,
  .about .about-chip {
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.features {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: radial-gradient(120% 100% at 12% 0%, #143a4d 0%, #0d2a38 42%, #081920 100%);
}

.features .features-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.features .features-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.features .orb-1 {
  top: -140px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(45, 166, 190, 0.55), transparent 70%);
  animation: featureOrbFloat 17s ease-in-out infinite;
}

.features .orb-2 {
  right: -100px;
  bottom: -150px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(104, 164, 196, 0.45), transparent 70%);
  animation: featureOrbFloat 21s ease-in-out infinite reverse;
}

.features .orb-3 {
  top: 32%;
  right: 16%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(224, 171, 82, 0.28), transparent 70%);
  animation: featureOrbFloat 25s ease-in-out infinite;
  animation-delay: -6s;
}

.features .features-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

@keyframes featureOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.12); }
}

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

.features .features-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #8fd7ec;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.features .section-title h2 {
  display: block;
  background: linear-gradient(100deg, #f2fbfd 0%, #8fe0f2 30%, #f2fbfd 55%, #8fe0f2 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: featureTitleShine 7s linear infinite;
}

.features .section-title h2::before {
  background: rgba(255, 255, 255, 0.14);
}

.features .section-title h2::after {
  background: linear-gradient(90deg, var(--accent-color), var(--brand-red));
}

.features .section-title p {
  color: rgba(255, 255, 255, 0.72);
}

@keyframes featureTitleShine {
  to { background-position: 200% center; }
}

.features .feature-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--card-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.premium-card {
  --card-accent: #1599b8;
  --card-glow: rgba(21, 153, 184, 0.4);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  box-shadow: 0 24px 60px rgba(3, 15, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.premium-card:nth-child(even) {
  flex-direction: row-reverse;
}

.premium-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), var(--card-accent), transparent 25%, transparent 75%, var(--card-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: premiumBorderSpin 5s linear infinite;
}

@keyframes premiumBorderSpin {
  to { --angle: 360deg; }
}

.premium-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--card-accent), transparent 40%);
  box-shadow: 0 34px 80px rgba(3, 15, 22, 0.55), 0 0 46px var(--card-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.premium-card:hover::before {
  opacity: 1;
}

.premium-card.feature-nets {
  --card-accent: #4fb2e8;
  --card-glow: rgba(79, 178, 232, 0.4);
}

.premium-card.feature-spikes {
  --card-accent: #e0ab52;
  --card-glow: rgba(224, 171, 82, 0.4);
}

.premium-card.feature-hanger {
  --card-accent: #4fcf9d;
  --card-glow: rgba(79, 207, 157, 0.4);
}

.premium-card h3 {
  margin-bottom: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 21px;
}

.premium-card .card-body {
  flex: 1 1 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.premium-card .card-body > p {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.premium-card .card-media {
  position: relative;
  flex: 0 0 42%;
  max-width: 42%;
  min-height: 190px;
  overflow: hidden;
  border-radius: 16px;
  background: #0c2531;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  isolation: isolate;
}

.premium-card .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 20, 28, 0) 40%, rgba(6, 20, 28, 0.65) 100%);
  pointer-events: none;
}

.premium-card .card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.8s ease;
}

.premium-card:hover .card-media img {
  transform: scale(1.08);
  filter: saturate(1.1) contrast(1.05);
}

.premium-card .feature-number {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 25, 34, 0.55);
  backdrop-filter: blur(6px);
  font-weight: 700;
}

.premium-card .grill-scan {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 70px;
  left: -30%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-12deg);
}

.premium-card.feature-grills:hover .grill-scan {
  animation: featureGrillScan 1.5s ease-out;
}

.premium-card .net-shield,
.premium-card .hanger-motion {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(27, 149, 188, 0.88);
  box-shadow: 0 0 0 0 rgba(27, 149, 188, 0.5);
  font-size: 22px;
}

.premium-card.feature-nets:hover .net-shield {
  animation: featureShieldPulse 1.5s ease-out infinite;
}

.premium-card .spike-glint {
  position: absolute;
  z-index: 2;
  top: 24%;
  left: 12%;
  width: 10px;
  height: 10px;
  opacity: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 18px 7px rgba(255, 255, 255, 0.9);
}

.premium-card.feature-spikes:hover .spike-glint {
  animation: featureSpikeGlint 1.8s ease-in-out infinite;
}

.premium-card.feature-hanger:hover .hanger-motion {
  animation: featureHangerLift 1.4s ease-in-out infinite;
}

@keyframes featureGrillScan {
  0% { left: -30%; opacity: 0; }
  25% { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

@keyframes featureShieldPulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(27, 149, 188, 0.55); }
  70% { transform: scale(1); box-shadow: 0 0 0 18px rgba(27, 149, 188, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(27, 149, 188, 0); }
}

@keyframes featureSpikeGlint {
  0%, 100% { left: 12%; top: 28%; opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; transform: scale(1); }
  70% { left: 82%; top: 56%; opacity: 0.7; transform: scale(0.65); }
}

@keyframes featureHangerLift {
  0%, 100% { transform: translateY(5px); }
  50% { transform: translateY(-7px); }
}

.premium-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.premium-card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
}

.premium-card .check-chip {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent), transparent 78%);
  color: var(--card-accent);
  font-size: 13px;
}

.features-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  margin-bottom: 40px;
}

.features-more-button {
margin-bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 50px;
  color: #0d2a38;
  background: #ffffff;
  font-family: var(--btn-font);
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-more-button:hover {
  color: #0d2a38;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

.features-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 28px 34px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 22px 50px rgba(3, 15, 22, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.features-cta span,
.features-cta strong {
  display: block;
}

.features-cta span {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  letter-spacing: 0.8px;
}

.features-cta strong {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.features-cta-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 50px;
  color: #0d2a38;
  background: linear-gradient(120deg, #ffffff, #cdeff8);
  font-family: var(--btn-font);
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-cta-button:hover {
  color: #0d2a38;
  transform: translateX(5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
}

@media (max-width: 900px) {
  .features-list {
    gap: 20px;
  }

  .premium-card,
  .premium-card:nth-child(even) {
    flex-direction: column;
    gap: 18px;
  }

  .premium-card .card-media,
  .premium-card .card-body {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .premium-card .card-media {
    min-height: 200px;
  }
}

@media (max-width: 767px) {
  .features-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .features {
    padding: 70px 0;
  }

  .premium-card {
    padding: 22px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features .features-orb,
  .features .section-title h2,
  .premium-card::before,
  .premium-card,
  .premium-card .card-media img,
  .premium-card .grill-scan,
  .premium-card .net-shield,
  .premium-card .spike-glint,
  .premium-card .hanger-motion {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Why Choose Us Section
--------------------------------------------------------------*/
.why-choose-us {
  position: relative;
  overflow: hidden;
  background: #f5fafc;
}

.why-choose-us .why-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.why-choose-us .why-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.why-choose-us .orb-1 {
  top: -110px;
  left: -90px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(104, 164, 196, 0.4), transparent 70%);
  animation: whyOrbFloat 18s ease-in-out infinite;
}

.why-choose-us .orb-2 {
  bottom: -130px;
  right: -90px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(224, 171, 82, 0.3), transparent 70%);
  animation: whyOrbFloat 22s ease-in-out infinite reverse;
}

.why-choose-us .why-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 62, 82, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 62, 82, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

@keyframes whyOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(32px, -26px) scale(1.1); }
}

.why-choose-us .container {
  position: relative;
  z-index: 1;
}

.why-choose-us .why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.why-choose-us .section-title h2 {
  display: block;
  background: linear-gradient(100deg, #163e52 0%, #1a9bc4 30%, #163e52 55%, #1a9bc4 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: whyTitleShine 7s linear infinite;
}

@keyframes whyTitleShine {
  to { background-position: 200% center; }
}

.why-choose-us .why-card {
  --card-accent: #1599b8;
  --card-glow: rgba(21, 153, 184, 0.32);
  position: relative;
  isolation: isolate;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  padding: 34px 30px;
  border: 1px solid rgba(27, 128, 158, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 45px rgba(24, 62, 78, 0.08);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.why-choose-us .why-card-blue { --card-accent: #2870a7; --card-glow: rgba(40, 112, 167, 0.32); }
.why-choose-us .why-card-purple { --card-accent: #7c6fe0; --card-glow: rgba(124, 111, 224, 0.32); }
.why-choose-us .why-card-gold { --card-accent: #e0ab52; --card-glow: rgba(224, 171, 82, 0.32); }
.why-choose-us .why-card-green { --card-accent: #3fb98a; --card-glow: rgba(63, 185, 138, 0.32); }
.why-choose-us .why-card-coral { --card-accent: #e0678a; --card-glow: rgba(224, 103, 138, 0.32); }

.why-choose-us .why-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -65px;
  bottom: -75px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent), transparent 78%), transparent);
  transition: transform 0.55s ease;
}

.why-choose-us .why-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), var(--card-accent), transparent 25%, transparent 75%, var(--card-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: premiumBorderSpin 5s linear infinite;
}

.why-choose-us .why-card:hover {
  transform: translateY(-10px);
  border-color: color-mix(in srgb, var(--card-accent), transparent 45%);
  box-shadow: 0 30px 70px rgba(24, 62, 78, 0.16), 0 0 40px var(--card-glow);
}

.why-choose-us .why-card:hover::before {
  transform: scale(2.2);
}

.why-choose-us .why-card:hover::after {
  opacity: 1;
}

.why-choose-us .why-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent), #10202a 55%));
  box-shadow: 0 12px 25px var(--card-glow);
  font-size: 25px;
  transition: transform 0.5s ease;
}

.why-choose-us .why-card:hover .why-icon {
  transform: rotateY(180deg) scale(1.08);
}

.why-choose-us .why-number {
  position: absolute;
  top: 24px;
  right: 28px;
  color: color-mix(in srgb, var(--card-accent), transparent 88%);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}

.why-choose-us .why-card h3 {
  margin-bottom: 12px;
  color: #173c4d;
  font-size: 21px;
  font-weight: 700;
}

.why-choose-us .why-card p {
  margin: 0;
  color: #557481;
  line-height: 1.7;
}

.why-choose-us .why-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 38px;
  padding: 28px 34px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(110deg, #163e52, #1b7897, #163e52);
  background-size: 200% auto;
  animation: whyCtaGradient 8s ease infinite;
  box-shadow: 0 22px 50px rgba(22, 62, 82, 0.22);
}

@keyframes whyCtaGradient {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.why-choose-us .why-cta span,
.why-choose-us .why-cta strong { display: block; }
.why-choose-us .why-cta span { margin-bottom: 4px; color: rgba(255, 255, 255, 0.72); font-size: 13px; letter-spacing: 0.8px; }
.why-choose-us .why-cta strong { font-size: clamp(1.15rem, 2vw, 1.45rem); }

.why-choose-us .why-cta-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 50px;
  color: #173c4d;
  background: #fff;
  font-family: var(--btn-font);
  font-weight: 700;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us .why-cta-button:hover { color: #173c4d; transform: translateX(5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16); }

@media (max-width: 767px) {
  .why-choose-us .why-cta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .why-choose-us .why-orb,
  .why-choose-us .section-title h2,
  .why-choose-us .why-cta,
  .why-choose-us .why-card,
  .why-choose-us .why-card::before,
  .why-choose-us .why-card::after,
  .why-choose-us .why-icon,
  .why-choose-us .why-cta-button {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Google Reviews Section
--------------------------------------------------------------*/
.google-reviews {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f4f9fb 100%);
}

.google-reviews .reviews-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.google-reviews .reviews-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.google-reviews .orb-1 {
  top: -100px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.22), transparent 70%);
  animation: reviewsOrbFloat 19s ease-in-out infinite;
}

.google-reviews .orb-2 {
  bottom: -110px;
  left: -70px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(224, 171, 82, 0.2), transparent 70%);
  animation: reviewsOrbFloat 23s ease-in-out infinite reverse;
}

.google-reviews .reviews-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22, 62, 82, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 62, 82, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

@keyframes reviewsOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, -22px) scale(1.08); }
}

.google-reviews > .container,
.google-reviews > .reviews-marquee,
.google-reviews > .reviews-note {
  position: relative;
  z-index: 1;
}

.google-reviews .reviews-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 40px;
}

.google-reviews .reviews-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.google-reviews .reviews-heading h2 {
  margin: 9px 0 12px;
  background: linear-gradient(100deg, #163e52 0%, #1a9bc4 30%, #163e52 55%, #1a9bc4 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 750;
  animation: reviewsTitleShine 7s linear infinite;
}

@keyframes reviewsTitleShine {
  to { background-position: 200% center; }
}

.google-reviews .reviews-heading p { max-width: 700px; margin: 0; color: #5a7783; }

.google-reviews .google-rating {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid #e0e8ec;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(25, 62, 78, 0.1);
  animation: reviewsRatingGlow 3s ease-in-out infinite;
}

@keyframes reviewsRatingGlow {
  0%, 100% { box-shadow: 0 14px 35px rgba(25, 62, 78, 0.1), 0 0 0 0 rgba(66, 133, 244, 0.25); }
  50% { box-shadow: 0 14px 35px rgba(25, 62, 78, 0.1), 0 0 0 8px rgba(66, 133, 244, 0); }
}

.google-reviews .google-g,
.google-reviews .mini-google {
  color: #4285f4;
  font-family: Arial, sans-serif;
  font-weight: 800;
}

.google-reviews .google-g { font-size: 36px; }
.google-reviews .google-rating strong,
.google-reviews .google-rating small { display: block; }
.google-reviews .google-rating small { color: #78909a; font-size: 11px; }
.google-reviews .review-stars { color: #f8b400; letter-spacing: 2px; }

.google-reviews .reviews-marquee {
  width: 100%;
  padding: 10px 0 35px;
  overflow-x: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.google-reviews .reviews-marquee.is-dragging {
  cursor: grabbing;
}

.google-reviews .reviews-marquee.is-dragging .review-card {
  pointer-events: none;
}

.google-reviews .reviews-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.google-reviews .reviews-group {
  display: flex;
  gap: 22px;
  padding-right: 22px;
}

.google-reviews .review-card {
  --card-accent: #4285f4;
  --card-glow: rgba(66, 133, 244, 0.28);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 360px;
  min-height: 285px;
  padding: 26px;
  border: 1px solid rgba(29, 100, 128, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 42px rgba(25, 62, 78, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.google-reviews .review-card:has(.avatar-green) { --card-accent: #34a853; --card-glow: rgba(52, 168, 83, 0.28); }
.google-reviews .review-card:has(.avatar-gold) { --card-accent: #fbbc04; --card-glow: rgba(251, 188, 4, 0.3); }
.google-reviews .review-card:has(.avatar-coral) { --card-accent: #f16d65; --card-glow: rgba(241, 109, 101, 0.28); }
.google-reviews .review-card:has(.avatar-purple) { --card-accent: #9167d8; --card-glow: rgba(145, 103, 216, 0.28); }

.google-reviews .review-card::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  right: 18px;
  z-index: 0;
  font-family: var(--heading-font);
  font-size: 100px;
  line-height: 1;
  color: color-mix(in srgb, var(--card-accent), transparent 91%);
  pointer-events: none;
}

.google-reviews .review-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), var(--card-accent), transparent 25%, transparent 75%, var(--card-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: premiumBorderSpin 5s linear infinite;
}

.google-reviews .review-card > * {
  position: relative;
  z-index: 1;
}

.google-reviews .review-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--card-accent), transparent 45%);
  box-shadow: 0 28px 60px rgba(25, 62, 78, 0.16), 0 0 36px var(--card-glow);
}

.google-reviews .review-card:hover::after { opacity: 1; }

.google-reviews .review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.google-reviews .review-top > div { flex: 1; }
.google-reviews .review-top h3 { margin: 0 0 2px; color: #173c4d; font-size: 16px; font-weight: 700; }
.google-reviews .review-top time { color: #91a3aa; font-size: 12px; }
.google-reviews .mini-google { font-size: 21px; }

.google-reviews .review-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.4s ease;
}

.google-reviews .review-card:hover .review-avatar { transform: scale(1.08); }

.google-reviews .avatar-blue { background: linear-gradient(135deg, #4285f4, #1556b5); }
.google-reviews .avatar-green { background: linear-gradient(135deg, #34a853, #187634); }
.google-reviews .avatar-gold { background: linear-gradient(135deg, #fbbc04, #d17a00); }
.google-reviews .avatar-coral { background: linear-gradient(135deg, #f16d65, #b9323b); }
.google-reviews .avatar-purple { background: linear-gradient(135deg, #9167d8, #56329d); }
.google-reviews .review-card > .review-stars { margin-bottom: 12px; font-size: 15px; }
.google-reviews .review-card p { color: #516f7b; line-height: 1.72; white-space: normal; }
.google-reviews .verified-review { display: inline-flex; align-items: center; gap: 6px; color: #69838d; font-size: 12px; font-weight: 600; }
.google-reviews .verified-review i { color: #4285f4; }
.google-reviews .reviews-note { margin-top: 5px; color: #8ba0a8; font-size: 11px; text-align: center; }

@media (max-width: 767px) {
  .google-reviews .reviews-heading { align-items: flex-start; flex-direction: column; }
  .google-reviews .review-card { flex-basis: min(330px, 84vw); }
}

@media (prefers-reduced-motion: reduce) {
  .google-reviews .reviews-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .google-reviews .reviews-orb,
  .google-reviews .reviews-heading h2,
  .google-reviews .google-rating,
  .google-reviews .review-card::after { animation: none !important; }
  .google-reviews .review-card,
  .google-reviews .review-avatar { transition: none; }
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--accent-color);
  font-weight: 700;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
  margin-bottom: 40px;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 120px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 15px 0;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list {
  background-color: var(--surface-color);
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Service Hero Section (individual service pages)
--------------------------------------------------------------*/
.service-hero {
  padding: 150px 0 90px;
}

.service-hero-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

.service-hero-breadcrumbs ol li+li {
  padding-left: 10px;
}

.service-hero-breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.service-hero-breadcrumbs .current {
  color: var(--heading-color);
  font-weight: 700;
}

.service-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.service-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.service-hero-eyebrow::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--brand-red);
}

.service-hero-content h1 {
  max-width: 540px;
  margin-bottom: 18px;
  font-size: clamp(32px, 4vw, 50px);
}

.service-hero-content p {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.service-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding: 6px 6px 6px 26px;
  border-radius: 50px;
  background: color-mix(in srgb, var(--accent-color), white 92%);
  color: var(--heading-color);
  font-family: var(--btn-font);
  font-weight: 600;
  font-size: 15px;
  transition: 0.3s;
}

.service-hero-cta-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  transition: transform 0.3s ease;
}

.service-hero-cta-icon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-red);
  animation: service-cta-pulse 2.4s ease-out infinite;
}

.service-hero-cta:hover {
  background: color-mix(in srgb, var(--accent-color), white 84%);
}

.service-hero-cta:hover .service-hero-cta-icon {
  transform: rotate(45deg);
}

@keyframes service-cta-pulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.service-hero-media {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 420px;
  margin-left: auto;
  animation: service-hero-float 5s ease-in-out infinite;
}

.service-hero-media::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(circle at 65% 30%, color-mix(in srgb, var(--accent-color), transparent 72%), transparent 65%);
  filter: blur(30px);
  animation: service-hero-glow 6s ease-in-out infinite;
}

@keyframes service-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes service-hero-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.service-hero-img {
  position: absolute;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 30px 60px rgba(8, 61, 115, 0.2);
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.36, 1);
}

.service-hero-img-back {
  top: 0;
  right: 0;
  width: 78%;
  height: 76%;
  object-position: 65% 35%;
  transform: rotate(-6deg);
  filter: saturate(0.9) brightness(0.96);
}

.service-hero-img-front {
  left: 0;
  bottom: 0;
  width: 60%;
  height: 58%;
  border: 6px solid var(--background-color);
  transform: rotate(5deg);
  z-index: 2;
}

.service-hero-media:hover .service-hero-img-back {
  transform: rotate(-10deg) translate(-14px, -12px);
}

.service-hero-media:hover .service-hero-img-front {
  transform: rotate(9deg) translate(14px, 14px);
}

.service-hero-badge {
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 50px;
  background: var(--surface-color);
  color: var(--heading-color);
  font-family: var(--btn-font);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 20px 45px rgba(8, 61, 115, 0.24);
  animation: service-badge-float 3.2s ease-in-out infinite;
}

.service-hero-badge i {
  color: var(--brand-red);
  font-size: 16px;
}

@keyframes service-badge-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

@media (max-width: 991px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .service-hero-content h1,
  .service-hero-content p {
    max-width: 100%;
  }

  .service-hero-media {
    margin-left: 0;
    max-width: 420px;
  }
}

@media (max-width: 576px) {
  .service-hero {
    padding: 130px 0 70px;
  }

  .service-hero-media {
    min-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-hero-media,
  .service-hero-media::before,
  .service-hero-badge,
  .service-hero-cta-icon::after {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Individual Service Banner and Editorial Showcase
--------------------------------------------------------------*/
.service-name-banner {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 154px 0 76px;
  background: linear-gradient(115deg, #061f3b 0%, #0a477b 68%, #1477b8 100%);
}

.service-name-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to right, transparent, #000);
}

.service-banner-shape {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -110px;
  top: -240px;
  border: 76px solid rgba(255,255,255,.08);
  border-radius: 50%;
}

.service-banner-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 35px; font-size: 13px; }
.service-banner-breadcrumbs a { color: rgba(255,255,255,.72); }
.service-banner-breadcrumbs a:hover { color: #fff; }
.service-banner-breadcrumbs i { color: rgba(255,255,255,.35); font-size: 10px; }
.service-banner-breadcrumbs span { color: #fff; font-weight: 600; }
.service-banner-label { color: #76c7f4; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.service-name-banner h1 { max-width: 900px; margin: 12px 0 0; color: #fff; font-size: clamp(42px, 6vw, 76px); }

.service-showcase {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  padding: 105px 0 125px;
  background: #fbfaf7;
}

.service-showcase::after { content: ""; position: absolute; inset: auto -8% -240px auto; width: 650px; height: 410px; border-radius: 50% 50% 0 0; background: #eef4f8; transform: rotate(-9deg); }
.service-showcase-orbit { position: absolute; width: 610px; height: 610px; left: 38%; top: -330px; border: 55px solid rgba(8,61,115,.045); border-radius: 50%; }
.service-showcase-grid { display: grid; grid-template-columns: 43% 57%; align-items: center; }
.service-showcase-copy { position: relative; z-index: 4; padding-right: 52px; }
.service-showcase-kicker { display: flex; align-items: center; gap: 18px; margin-bottom: 27px; color: #68717b; font-size: 12px; font-weight: 700; letter-spacing: 2.8px; text-transform: uppercase; }
.service-showcase-kicker::before { content: ""; width: 40px; height: 3px; background: var(--brand-red); }
.service-showcase-copy h2 { margin: 0 0 25px; color: #172b3e; font-size: clamp(46px, 5vw, 72px); line-height: 1.04; }
.service-showcase-copy h2 em { color: var(--accent-color); font-weight: 600; }
.service-showcase-copy > p { max-width: 570px; margin-bottom: 35px; color: #68717b; font-size: 16px; line-height: 1.8; }
.service-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.service-benefit { padding: 18px 10px; border-right: 1px solid #dddcd8; text-align: center; }
.service-benefit:last-child { border-right: 0; }
.service-benefit span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: #edf3f7; color: var(--heading-color); font-size: 23px; }
.service-benefit strong { display: block; color: #273746; font-size: 11px; line-height: 1.45; letter-spacing: .8px; text-transform: uppercase; }
.service-showcase-action { display: flex; align-items: center; gap: 32px; margin-top: 40px; }
.service-project-btn { display: inline-flex; align-items: center; gap: 20px; padding: 17px 19px 17px 26px; border-radius: 40px; background: linear-gradient(100deg, #0a4f85, #1477b8); color: #fff; font-family: var(--btn-font); font-weight: 700; }
.service-project-btn i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--heading-color); transition: transform .25s; }
.service-project-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8,61,115,.2); }
.service-project-btn:hover i { transform: translateX(3px); }
.service-action-note { padding-left: 28px; border-left: 1px solid #d5d2cc; color: #7a8086; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

.service-showcase-visual {
  position: relative;
  z-index: 3;
  width: calc(100% + max(24px, (100vw - 1140px) / 2));
  min-height: 650px;
}
.service-main-photo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  inset: 0 0 0 36px;
  border-radius: 48% 0 0 48%;
  box-shadow: 0 25px 60px rgba(28,38,47,.17);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  will-change: transform;
}
.service-main-photo:hover {
  z-index: 7;
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 34px 75px rgba(28,38,47,.24);
}
.service-main-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}
.service-main-photo:hover > img {
  transform: scale(1.1) translateX(-1.5%);
  filter: saturate(1.08);
}
.service-main-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,26,48,.1), transparent 60%); }
.service-photo-stamp { position: absolute; z-index: 2; right: 25px; top: 25px; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 8px; background: rgba(255,255,255,.9); color: var(--heading-color); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; backdrop-filter: blur(8px); }
.service-photo-stamp i { color: var(--brand-red); font-size: 19px; }
.service-mini-card { position: absolute; z-index: 4; overflow: hidden; width: 245px; height: 190px; bottom: 28px; padding: 7px; border: 3px solid #fff; border-radius: 25px; background: #fff; box-shadow: 0 20px 35px rgba(18,29,37,.25); transform: rotate(5deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; will-change: transform; }
.service-mini-card-one { left: 0; }
.service-mini-card-two { left: 225px; bottom: 2px; transform: rotate(7deg); }
.service-mini-card img { width: 100%; height: 100%; border-radius: 17px; object-fit: cover; filter: brightness(.75); transition: transform .6s ease, filter .6s ease; }
.service-mini-card-one:hover { z-index: 8; transform: translateY(-18px) rotate(-2deg) scale(1.04); box-shadow: 0 28px 48px rgba(18,29,37,.32); }
.service-mini-card-two:hover { z-index: 8; transform: translateY(-18px) rotate(2deg) scale(1.04); box-shadow: 0 28px 48px rgba(18,29,37,.32); }
.service-mini-card:hover img { transform: scale(1.1); filter: brightness(.88) saturate(1.08); }
.service-mini-card span { position: absolute; left: 0; right: 0; bottom: 17px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-align: center; text-transform: uppercase; }
.service-visual-signature { position: absolute; z-index: 5; right: 35px; bottom: 24px; padding: 15px 18px; border-radius: 14px; background: rgba(255,255,255,.88); color: var(--heading-color); font-family: var(--heading-font); font-size: 19px; line-height: 1.15; text-align: right; backdrop-filter: blur(8px); pointer-events: none; }
.service-visual-signature em { color: var(--accent-color); font-size: 25px; }

/* Interactive three-image stack used by every service page. */
.service-image-stack {
  perspective: 1400px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.service-stack-card {
  position: absolute;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 24px 55px rgba(28, 38, 47, .2);
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  transition: left .75s cubic-bezier(.2,.8,.2,1), right .75s cubic-bezier(.2,.8,.2,1), top .75s cubic-bezier(.2,.8,.2,1), bottom .75s cubic-bezier(.2,.8,.2,1), width .75s cubic-bezier(.2,.8,.2,1), height .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1), box-shadow .75s ease, filter .75s ease;
}

.service-stack-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.service-stack-card:focus-visible { outline: 4px solid var(--accent-color); outline-offset: 5px; }

.service-stack-card.stack-back {
  z-index: 1;
  top: 1%;
  right: auto;
  bottom: auto;
  left: 32%;
  width: 64%;
  height: 43%;
  filter: brightness(.82) saturate(.88);
  transform: translateZ(-70px) rotateY(-2deg) rotateZ(-3deg);
}

.service-stack-card.stack-front {
  z-index: 4;
  top: 24%;
  right: auto;
  bottom: auto;
  left: 2%;
  width: 58%;
  height: 42%;
  filter: none;
  transform: translateZ(75px) rotateY(1deg) rotateZ(.4deg);
  box-shadow: 0 34px 70px rgba(18, 29, 37, .32);
}

.service-stack-card.stack-side {
  z-index: 2;
  top: 46%;
  right: auto;
  bottom: auto;
  left: 65%;
  width: 35%;
  height: 25%;
  filter: brightness(.9) saturate(.9);
  transform: translateZ(-30px) rotateY(-4deg) rotateZ(5deg);
}

.service-image-stack:not(.is-rotating) .service-stack-card:not(.stack-front):hover {
  filter: brightness(1) saturate(1.04);
  box-shadow: 0 30px 68px rgba(18, 29, 37, .3);
}
.service-image-stack.is-rotating .service-stack-card { cursor: progress; }
.service-stack-hint { position: absolute; right: 3%; bottom: -18px; z-index: 8; margin: 0; color: #6e7780; font-size: 12px; letter-spacing: .4px; }
.service-stack-hint i { margin-right: 6px; color: var(--accent-color); }

@media (max-width: 1199px) {
  .service-showcase-grid { grid-template-columns: 48% 52%; }
  .service-showcase-copy { padding-right: 30px; }
  .service-mini-card { width: 205px; height: 165px; }
  .service-mini-card-two { left: 185px; }
  .service-showcase-visual { width: calc(100% + 24px); }
}

@media (max-width: 991px) {
  .service-showcase { padding: 80px 0 120px; }
  .service-showcase-grid { grid-template-columns: 1fr; gap: 70px; }
  .service-showcase-copy { padding-right: 0; }
  .service-showcase-visual { min-height: 530px; }
  .service-showcase-visual { width: calc(100% + max(24px, (100vw - 720px) / 2)); }
  .service-main-photo { left: 5%; }
}

@media (max-width: 576px) {
  .service-name-banner { min-height: 330px; padding: 132px 0 55px; }
  .service-name-banner h1 { font-size: 41px; }
  .service-showcase { padding: 65px 0 105px; }
  .service-showcase-copy h2 { font-size: 43px; }
  .service-benefits { grid-template-columns: 1fr; }
  .service-benefit { display: flex; align-items: center; gap: 15px; padding: 11px 0; border-right: 0; border-bottom: 1px solid #e3e0db; text-align: left; }
  .service-benefit span { width: 44px; height: 44px; flex: 0 0 auto; margin: 0; }
  .service-showcase-action { align-items: flex-start; flex-direction: column; }
  .service-action-note { padding: 0; border: 0; }
  .service-showcase-visual { width: calc(100% + 12px); min-height: 460px; }
  .service-main-photo { inset: 0; border-radius: 36px 0 0 36px; }
  .service-mini-card { width: 47%; height: 135px; border-radius: 17px; }
  .service-mini-card-two { left: auto; right: 12px; bottom: 10px; }
  .service-visual-signature { display: none; }
  .service-stack-card.stack-back { left: 26%; width: 72%; height: 43%; }
  .service-stack-card.stack-front { left: 0; width: 68%; height: 42%; }
  .service-stack-card.stack-side { top: 49%; left: 53%; width: 45%; height: 26%; }
  .service-stack-hint { right: 12px; bottom: -30px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-main-photo > img,
  .service-main-photo,
  .service-mini-card,
  .service-mini-card img {
    transition: none;
  }

  .service-stack-card { transition: none; }

  .service-main-photo:hover > img,
  .service-main-photo:hover,
  .service-mini-card-one:hover,
  .service-mini-card-two:hover,
  .service-mini-card:hover img {
    transform: none;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .img {
  border-radius: 8px;
  overflow: hidden;
}

.services .img img {
  transition: 0.6s;
}

.services .details {
  background: color-mix(in srgb, var(--surface-color), transparent 5%);
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 30px;
  transition: all ease-in-out 0.3s;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}

.services .details h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: ease-in-out 0.3s;
}

.services .details p {
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover .details h3 {
  color: var(--accent-color);
}

.services .service-item:hover .img img {
  transform: scale(1.2);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--btn-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  position: relative;
}

.team .member .member-img {
  overflow: hidden;
  position: relative;
}

@media (max-width: 1024px) {
  .team .member .member-img {
    margin: 0 60px;
  }
}

.team .member .member-img img {
  position: relative;
  z-index: 1;
}

.team .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.team .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

.team .member .member-img .social a:hover {
  color: var(--accent-color);
}

.team .member .member-info {
  margin-top: 30px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.team .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.team .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.team .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 24px 0 30px 0;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  height: 100%;
  padding: 30px 30px 0 30px;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.blog-author-widget img {
  max-width: 160px;
}

.blog-author-widget h4 {
  font-weight: 600;
  font-size: 24px;
  margin: 15px 0 0 0;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author-widget .social-links {
  margin: 5px 0;
}

.blog-author-widget .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin: 0 3px;
  font-size: 18px;
}

.blog-author-widget .social-links a:hover {
  color: var(--accent-color);
}

.blog-author-widget p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 10px 0 0 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px 10px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: none;
  color: var(--default-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 16px;
  transition: 0.3s;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  color: var(--accent-color);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  background-color: color-mix(in srgb, var(--default-color), transparent 94%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50px;
  font-size: 14px;
  padding: 5px 15px;
  margin: 0 6px 8px 0;
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

/*--------------------------------------------------------------
# TJR Premium Brand System
--------------------------------------------------------------*/
body {
  background: #f7f9fc;
}

.section {
   padding: 25px 0; 
}

.section-title {
  max-width: 780px;
  margin-inline: auto;
}

.section-title h2 {
  font-size: clamp(34px, 4vw, 52px);
  color: var(--heading-color);
}

.section-title h2::before {
  width: 88px;
  background: rgba(20, 119, 184, 0.18);
}

.section-title h2::after {
  width: 38px;
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent-color), var(--brand-red));
}

.section-title p {
  font-size: 17px;
  line-height: 1.8;
}

/* Premium hero */
.hero {
  min-height: 820px;
  height: min(860px, 100svh);
  padding: 94px 0 0;
  background: var(--brand-navy);
  isolation: isolate;
}

.hero::before {
  inset: 0;
  width: auto;
  height: auto;
  left: 0;
  border-radius: 0;
  transform: none;
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 20, 39, 0.55) 0%, rgba(5, 31, 59, 0.35) 46%, transparent 72%);
}

.hero::after {
  inset: auto 0 0;
  width: 100%;
  height: 140px;
  left: 0;
  border-radius: 0;
  transform: none;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(6, 31, 59, 0.72), transparent);
}

.hero .hero-bg-slide {
  z-index: 1;
  filter: saturate(0.9) contrast(1.05);
  transform: scale(1.02);
}

.hero .hero-overlay {
  display: none;
}

.hero .carousel {
  height: 100%;
  z-index: 4;
}

.hero .carousel > .container,
.hero .carousel-inner,
.hero .carousel-item {
  height: 100%;
}

.hero .carousel > .container {
  display: flex;
  align-items: stretch;
}

.hero .carousel-inner {
  overflow: visible;
}

.hero .carousel-container {
  width: min(690px, 72vw);
  height: 100%;
  min-height: 0;
  padding: 48px 0 74px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.hero .hero-eyebrow,
.features .features-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(10, 77, 143, 0.18);
  border-radius: 999px;
  background: white;
  color: #0a4d8f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.hero .hero-eyebrow i,
.features .features-eyebrow i {
  color: #0a4d8f;
}

.hero h2 {
  max-width: 680px;
  margin: 22px 0 20px;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.hero p {
  width: 100%;
  max-width: 625px;
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.8;
}

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

.hero .btn-get-started,
.hero .btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin: 0;
  padding: 13px 25px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .25px;
}

.hero .btn-get-started {
  border: 1px solid var(--brand-red);
  background: var(--brand-red);
  box-shadow: 0 14px 32px rgba(223, 45, 54, 0.28);
}

.hero .btn-get-started:hover {
  border-color: #f14a54;
  background: #f14a54;
  transform: translateY(-2px);
}

.hero .btn-hero-secondary {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

.hero .btn-hero-secondary:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.14);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 600;
}

.hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof i { color: #5eb5ea; }

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 48px;
  height: 48px;
  top: auto;
  bottom: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(6, 31, 59, .55);
  backdrop-filter: blur(10px);
}
.hero .carousel-control-prev { left: auto; right: 76px; }
.hero .carousel-control-next { right: 18px; }

/* Luxury safety-solutions section */
.features {
  background: linear-gradient(145deg, #04182d 0%, #082d52 52%, #061f3b 100%);
}

.features .features-grid-overlay {
  opacity: .2;
  background-image: linear-gradient(rgba(85, 170, 225, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(85, 170, 225, .1) 1px, transparent 1px);
}

.features .section-title h2 {
  background: none;
  color: #fff;
  -webkit-text-fill-color: initial;
  animation: none;
}

.features .premium-card {
  border: 1px solid rgba(104, 184, 233, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(16px);
}

.features .premium-card::before {
  background: linear-gradient(90deg, var(--accent-color), var(--brand-red));
}

.features .card-media {
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .32);
}

.features .card-media img {
  transition: transform .7s ease, filter .7s ease;
}

.features .premium-card:hover .card-media img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.features .card-body h3 { color: #fff; }
.features .feature-kicker { color: #70bced; }
.features .check-chip { background: rgba(20, 119, 184, .18); color: #72c3f4; }

.features-cta,
.why-cta {
  border: 1px solid rgba(20, 119, 184, .2);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(4, 24, 45, .18);
}

.features-cta-button,
.why-cta-button {
  background: var(--brand-red);
  border-color: var(--brand-red);
  box-shadow: 0 12px 28px rgba(223, 45, 54, .2);
}

/* Consistent premium surfaces across the website */
.about,
.why-choose-us,
.google-reviews,
.services,
.portfolio,
.team,
.contact,
.blog-posts,
.service-details,
.portfolio-details,
.blog-details {
  background-color: #f7f9fc;
}

.service-item,
.portfolio-content,
.team-member,
.post-item,
.contact .info-item,
.why-card,
.review-card {
  border: 1px solid rgba(8, 61, 115, .1);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(6, 31, 59, .08);
}

.service-item:hover,
.portfolio-content:hover,
.team-member:hover,
.post-item:hover,
.why-card:hover,
.review-card:hover {
  border-color: rgba(20, 119, 184, .28);
  box-shadow: 0 24px 60px rgba(6, 31, 59, .14);
  transform: translateY(-5px);
}

.page-title {
  background: linear-gradient(125deg, #061f3b, #0a477d);
}

.footer {
  background: linear-gradient(145deg, #031529, #061f3b 55%, #082d52);
  border-top: 1px solid rgba(69, 160, 219, .18);
}

@media (max-width: 991px) {
  .section { padding: 76px 0; }
  .hero { min-height: 740px; height: auto; }
  .hero .carousel-container { width: min(650px, 84vw); }
}

@media (max-width: 767px) {
  .section { padding: 64px 0; }
  .section-title { padding-bottom: 42px; }
  .hero { min-height: 700px; padding: 80px 0 0; }
  .hero::before { background: linear-gradient(90deg, rgba(3, 20, 39, .65), rgba(5, 31, 59, .4)); }
  .hero .carousel,
  .hero .carousel > .container,
  .hero .carousel-inner,
  .hero .carousel-item { min-height: 620px; }
  .hero .carousel-container { width: 100%; min-height: 620px; height: auto; padding: 58px 14px 74px; }
  .hero h2 { font-size: clamp(40px, 12vw, 58px); }
  .hero p { font-size: 16px; }
  .hero-proof { gap: 10px 16px; }
  .hero .carousel-control-prev,
  .hero .carousel-control-next { display: none; }
}

@media (max-width: 480px) {
  .hero-actions { width: 100%; }
  .hero .btn-get-started,
  .hero .btn-hero-secondary { width: 100%; }
  .hero-proof span { width: 100%; }
}

/* Premium safety collection — editorial bento layout */
.features {
  padding: 112px 0;
}

.features .section-title {
  max-width: 720px;
  padding-bottom: 64px;
}

.features .section-title h2 {
  margin: 18px 0 16px;
  padding: 0;
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: -.045em;
}

.features .section-title h2::before,
.features .section-title h2::after {
  display: none;
}

.features .section-title p {
  max-width: 630px;
  margin-inline: auto;
  color: rgba(255, 255, 255, .67);
}

.features-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px;
}

.features .premium-card,
.features .premium-card:nth-child(even) {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 590px;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #092845;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .26);
}

.features .premium-card:nth-child(1),
.features .premium-card:nth-child(4) {
  grid-column: span 7;
}

.features .premium-card:nth-child(2),
.features .premium-card:nth-child(3) {
  grid-column: span 5;
}

.features .premium-card::before {
  inset: 0;
  padding: 0;
  border-radius: 0;
  opacity: 1;
  animation: none;
  mask: none;
  -webkit-mask: none;
  background: linear-gradient(90deg, var(--card-accent), transparent 42%);
  height: 3px;
}

.features .premium-card:hover {
  transform: translateY(-7px);
  border-color: rgba(104, 184, 233, .34);
  box-shadow: 0 36px 85px rgba(0, 0, 0, .35);
}

.features .premium-card .card-media {
  flex: none;
  width: 100%;
  max-width: none;
  height: 300px;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.features .premium-card:nth-child(1) .card-media,
.features .premium-card:nth-child(4) .card-media {
  height: 330px;
}

.features .premium-card .card-media::after {
  background: linear-gradient(180deg, transparent 48%, rgba(9, 40, 69, .96) 100%);
}

.features .premium-card .card-body {
  flex: 1;
  justify-content: flex-start;
  padding: 28px 30px 32px;
  background: linear-gradient(145deg, #092845, #071f38);
}

.features .premium-card h3 {
  margin: 4px 0 12px;
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.03em;
}

.features .premium-card .card-body > p {
  margin-bottom: 22px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.7;
}

.features .premium-card ul {
  margin-top: auto;
  gap: 9px;
}

.features .premium-card ul li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .78);
}

.features .premium-card .check-chip {
  border: 1px solid color-mix(in srgb, var(--card-accent), transparent 55%);
}

.features .feature-grills,
.features .feature-nets {
  --card-accent: #2b9cdb;
  --card-glow: rgba(43, 156, 219, .22);
}

.features .feature-spikes {
  --card-accent: #df2d36;
  --card-glow: rgba(223, 45, 54, .2);
}

.features .feature-hanger {
  --card-accent: #6ab7e5;
  --card-glow: rgba(106, 183, 229, .2);
}

.features-cta {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 34px 38px;
  border-radius: 24px;
  background: linear-gradient(105deg, #0b3c69, #092845 60%, #311d2a);
}

.features-cta::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: 8%;
  border-radius: 50%;
  background: rgba(223, 45, 54, .15);
  filter: blur(35px);
}

.features-cta > * {
  position: relative;
  z-index: 1;
}

.features-cta-button {
  border-radius: 9px;
}

@media (max-width: 991px) {
  .features { padding: 84px 0; }
  .features .premium-card,
  .features .premium-card:nth-child(even) {
    grid-column: span 6;
    min-height: 610px;
  }
  .features .premium-card .card-media,
  .features .premium-card:nth-child(1) .card-media,
  .features .premium-card:nth-child(4) .card-media {
    height: 275px;
  }
}

@media (max-width: 767px) {
  .features { padding: 70px 0; }
  .features .section-title { padding-bottom: 44px; }
  .features-list { gap: 18px; }
  .features .premium-card,
  .features .premium-card:nth-child(even) {
    grid-column: 1 / -1;
    min-height: 0;
  }
  .features .premium-card .card-body { padding: 25px 23px 28px; }
  .features-cta { align-items: flex-start; padding: 28px 24px; }
}

/* Final compact-grid cascade */
.features {
  overflow: visible;
  padding-bottom: 0;
}

.features-cta {
  z-index: 5;
  margin-top: 34px;
  transform: translateY(50%);
}

.experience-stats-section {
  position: relative;
  z-index: 5;
  padding: 34px 0 30px;
  background: transparent;
}

.experience-stats {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: transparent;
}

.experience-stat {
  display: flex;
  min-height: 180px;
  padding: 25px 24px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.experience-stat strong {
  display: block;
  margin-top: 14px;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(52px, 6vw, 76px);
  font-weight: 700;
  line-height: .9;
}

.experience-stat .experience-stat-label {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--accent-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.experience-stat-label i {
  color: var(--brand-red);
  font-size: 19px;
}

@media (max-width: 767px) {
  .experience-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience-stat {
    min-height: 145px;
    padding: 22px 12px;
  }

  .experience-stat strong {
    font-size: 48px;
  }

  .experience-stat .experience-stat-label {
    font-size: 13px;
  }
}

.why-choose-us {
  padding-top: 0px;
}

.hero .carousel-item:nth-child(3) h2 {
  font-size: clamp(40px, 5vw, 64px);
}

.features .section-title h2 {
  margin: 14px 0 14px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.035em;
}

@media (max-width: 575px) {
  .hero .carousel-item:nth-child(3) h2 {
    font-size: 38px;
  }
}

.features .section-title p {
  font-size: 16px;
}

.features-list {
  display: block;
  max-width: 1080px;
}

.features .premium-card,
.features .premium-card:nth-child(even),
.features .premium-card:nth-child(1),
.features .premium-card:nth-child(2),
.features .premium-card:nth-child(3),
.features .premium-card:nth-child(4) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  grid-column: auto;
  min-height: 245px;
  margin-bottom: 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.features .premium-card .card-media,
.features .premium-card:nth-child(1) .card-media,
.features .premium-card:nth-child(4) .card-media {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 360px);
  height: 205px;
  border-radius: 20px;
}

.features .premium-card .card-body {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  width: min(100%, 360px);
  min-height: 205px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .72);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(240, 247, 253, .86));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.features .premium-card:nth-child(even) .card-media { grid-column: 3; }
.features .premium-card:nth-child(even) .card-body { grid-column: 1; justify-self: end; }

.features .premium-card .feature-kicker {
  color: var(--accent-color);
}

.features .premium-card .card-body h3 {
  color: var(--brand-navy);
  font-size: 25px;
}

.features .premium-card .card-body > p {
  min-height: 48px;
  color: #536273;
}

.features .premium-card .feature-view-more {
  border-top-color: rgba(8, 61, 115, .12);
  color: var(--brand-navy);
}

.features .premium-card .feature-view-more:hover {
  color: var(--accent-color);
}

.features .premium-card:hover .card-body {
  border-color: rgba(80, 168, 220, .55);
  background: linear-gradient(145deg, #fff, rgba(235, 246, 253, .94));
  box-shadow: 0 24px 55px rgba(0, 0, 0, .26), 0 0 25px rgba(60, 161, 218, .16);
}

.features .premium-card h3 {
  font-size: 25px;
}

.features .premium-card ul {
  display: none;
}

@media (max-width: 1199px) {
  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) {
    grid-column: auto;
    min-height: 245px;
  }
}

@media (max-width: 575px) {
  .features-cta {
    margin-top: 24px;
    transform: translateY(45%);
  }

  .why-choose-us {
    padding-top: 155px;
  }

  .features-list {
    padding-left: 24px;
  }

  .features .premium-card,
  .features .premium-card:nth-child(even),
  .features .premium-card:nth-child(1),
  .features .premium-card:nth-child(2),
  .features .premium-card:nth-child(3),
  .features .premium-card:nth-child(4) {
    display: flex;
    grid-column: auto;
    min-height: 0;
    width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
  }

  .features .premium-card::before {
    left: -17px;
    top: 28px;
  }

  .features .premium-card .card-media,
  .features .premium-card:nth-child(1) .card-media,
  .features .premium-card:nth-child(4) .card-media,
  .features .premium-card:nth-child(even) .card-media {
    width: 100%;
    height: 190px;
    border-radius: 0;
  }

  .features .premium-card .card-body,
  .features .premium-card:nth-child(even) .card-body {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: flex-start;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    padding: 21px 20px 22px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(237,246,252,.94));
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .features .premium-card .card-body > p {
    min-height: auto;
    -webkit-line-clamp: 3;
  }

  .features .premium-card .feature-view-more {
    margin-top: 4px;
  }
}

/* Keep the contact redesign above the legacy template contact rules. */
.contact-premium .contact-form-panel .contact-request-form {
  height: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.contact-premium .contact-form-panel .contact-request-form input[type=text],
.contact-premium .contact-form-panel .contact-request-form input[type=email],
.contact-premium .contact-form-panel .contact-request-form input[type=tel],
.contact-premium .contact-form-panel .contact-request-form select,
.contact-premium .contact-form-panel .contact-request-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7e0e7;
  border-radius: 9px;
  background: #fbfdfe;
  color: var(--heading-color);
  font-size: 13px;
  box-shadow: none;
}
.contact-premium .contact-form-panel .contact-request-form input:focus,
.contact-premium .contact-form-panel .contact-request-form select:focus,
.contact-premium .contact-form-panel .contact-request-form textarea:focus {
  border-color: var(--accent-color);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(20,119,184,.1);
}
.contact-premium .contact-form-panel .contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #083d73, #1477b8);
  color: #fff;
  font-weight: 800;
}

/*--------------------------------------------------------------
# Projects Showcase
--------------------------------------------------------------*/
.projects-hero { position: relative; min-height: 565px; display: flex; align-items: center; overflow: hidden; padding: 150px 0 55px; background: #051d31 url("../img/feature-safety-nets.png") center / cover no-repeat; }
.projects-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,20,35,.55), rgba(4,31,52,.4) 48%, transparent 75%); }
.projects-orbit { position: absolute; border: 1px solid rgba(118,199,244,.18); border-radius: 50%; animation: projects-orbit 14s linear infinite; }
.projects-orbit::before { content: ""; position: absolute; width: 12px; height: 12px; top: 12%; left: 12%; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 22px var(--brand-red); }
.projects-orbit.orbit-one { width: 430px; height: 430px; right: -90px; top: -150px; }
.projects-orbit.orbit-two { width: 250px; height: 250px; right: 24%; bottom: -180px; animation-direction: reverse; animation-duration: 10s; }
@keyframes projects-orbit { to { transform: rotate(360deg); } }
.projects-hero-copy { position: relative; z-index: 2; max-width: 750px; }
.projects-eyebrow, .projects-section-label { display: block; margin-bottom: 10px; color: #76c7f4; font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.projects-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(52px, 6vw, 82px); line-height: .98; }
.projects-hero h1 em { color: #76c7f4; font-style: normal; }
.projects-hero-copy > p { max-width: 620px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.65; }
.projects-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 720px; margin-top: 40px; }
.projects-hero-stats span { display: grid; grid-template-columns: 42px 1fr; color: #fff; }
.projects-hero-stats i { grid-row: 1 / 3; font-size: 29px; color: #76c7f4; }
.projects-hero-stats strong { font-size: 12px; }.projects-hero-stats small { color: rgba(255,255,255,.65); font-size: 10px; }
.projects-hero-mark { position: absolute; z-index: 2; right: 3%; top: 44%; display: flex; align-items: center; gap: 14px; color: #fff; font-family: var(--heading-font); font-size: 26px; font-style: italic; line-height: 1.3; transform: rotate(-7deg); }
.projects-hero-mark i { color: #76c7f4; font-size: 52px; animation: project-shield-pulse 2.2s ease-in-out infinite; }
@keyframes project-shield-pulse { 50% { transform: translateZ(30px) scale(1.13); filter: drop-shadow(0 0 13px #76c7f4); } }

.projects-gallery { padding: 70px 0 80px; background: linear-gradient(145deg, #fff, #f4f8fb); }
.projects-heading { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.2fr) auto; gap: 42px; align-items: center; margin-bottom: 30px; }
.projects-heading > div { align-self: center; }
.projects-section-label { color: var(--accent-color); }
.projects-heading h2 { margin: 0; font-size: clamp(37px, 4vw, 54px); }.projects-heading p { max-width: 520px; margin: 0; color: #697684; font-size: 13px; line-height: 1.7; }
.projects-heading > a { display: inline-flex; align-items: center; justify-self: end; gap: 13px; padding: 12px 19px; border: 1px solid var(--accent-color); border-radius: 9px; color: var(--accent-color); font-size: 12px; font-weight: 800; white-space: nowrap; }
.projects-heading > a:hover { background: var(--accent-color); color: #fff; }
.portfolio .projects-filters { display: flex; justify-content: flex-start; gap: 11px; overflow-x: auto; margin: 0 0 30px; padding: 7px 4px 10px; list-style: none; scrollbar-width: none; -ms-overflow-style: none; }
.portfolio .projects-filters::-webkit-scrollbar { display: none; width: 0; height: 0; }
.portfolio .projects-filters li { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 43px; margin: 0; padding: 11px 22px 11px 37px; overflow: hidden; border: 1px solid rgba(8,61,115,.12); border-radius: 40px; background: linear-gradient(145deg, #fff, #eef4f8); color: #314357; font-family: var(--btn-font); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none !important; box-shadow: 0 7px 18px rgba(8,61,115,.07), inset 0 1px 0 #fff; -webkit-tap-highlight-color: transparent; transition: transform .3s ease, color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.portfolio .projects-filters li::before { content: ""; position: absolute; left: 18px; width: 8px; height: 8px; border: 2px solid var(--accent-color); border-radius: 50%; background: transparent; transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.portfolio .projects-filters li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.36), transparent 70%); transform: translateX(-110%); transition: transform .55s ease; }
.portfolio .projects-filters li:hover { color: var(--accent-color); border-color: rgba(20,119,184,.42); background: #fff; box-shadow: 0 11px 25px rgba(8,61,115,.12); transform: translateY(-3px); }
.portfolio .projects-filters li:hover::after { transform: translateX(110%); }
.portfolio .projects-filters li.filter-active { border-color: transparent; background: linear-gradient(110deg, #083d73, #1477b8); color: #fff; box-shadow: 0 12px 27px rgba(8,61,115,.27), inset 0 1px 0 rgba(255,255,255,.25); transform: translateY(-2px); }
.portfolio .projects-filters li.filter-active::before { border-color: #fff; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); transform: scale(.72); }
.projects-grid { perspective: 1300px; }
.projects-gallery .project-card { position: relative; overflow: hidden; height: 100%; border: 1px solid #dde5eb; border-radius: 15px; background: #fff; box-shadow: 0 10px 26px rgba(8,61,115,.07); transform-style: preserve-3d; will-change: transform; transition: transform .18s ease-out, box-shadow .4s ease, border-color .4s ease; }
.projects-gallery .project-card:hover { border-color: rgba(20,119,184,.38); box-shadow: 0 28px 58px rgba(8,61,115,.18); }
.project-image { position: relative; display: block; overflow: hidden; height: 260px; background: #dfeaf0; transform: translateZ(20px); }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.project-card:hover .project-image img { transform: scale(1.09); filter: saturate(1.12); }
.project-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 45%, rgba(8,61,115,.23)); opacity: 0; transition: opacity .4s; }.project-card:hover .project-image::after { opacity: 1; }
.project-scan { position: absolute; z-index: 2; left: -15%; top: -30%; width: 18%; height: 160%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(18deg); opacity: 0; }
.project-card:hover .project-scan { opacity: 1; animation: project-scan 1.25s ease; }
@keyframes project-scan { to { left: 120%; } }
.project-view { position: absolute; z-index: 3; right: 16px; top: 16px; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--heading-color); opacity: 0; transform: translateY(-10px) rotate(-20deg); transition: .35s ease; }.project-card:hover .project-view { opacity: 1; transform: none; }
.project-card-body { position: relative; min-height: 126px; padding: 18px 60px 18px 20px; transform: translateZ(30px); }
.project-category { display: inline-block; padding: 4px 10px; border-radius: 20px; background: #e5f2f9; color: var(--accent-color); font-size: 9px; font-weight: 800; }
.project-card-body h3 { margin: 8px 0 7px; font-size: 19px; }.project-card-body p { margin: 0; color: #74808c; font-size: 11px; }.project-card-body p i { color: var(--accent-color); }
.project-arrow { position: absolute; right: 18px; top: 45px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d8e2e9; border-radius: 50%; color: var(--heading-color); transition: .35s; }.project-arrow:hover { background: var(--accent-color); color: #fff; transform: rotate(45deg); }
.projects-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 45px; padding: 30px 20px; border-radius: 15px; background: linear-gradient(120deg, #061f3b, #083f60); color: #fff; box-shadow: 0 25px 55px rgba(6,31,59,.2); }
.projects-metrics > div { display: flex; justify-content: center; align-items: center; gap: 17px; border-right: 1px solid rgba(118,199,244,.3); }.projects-metrics > div:last-child { border: 0; }
.projects-metrics i { color: #76c7f4; font-size: 37px; }.projects-metrics span { display: flex; flex-direction: column; }.projects-metrics strong { font-size: 25px; }.projects-metrics small { color: rgba(255,255,255,.68); font-size: 10px; text-transform: uppercase; }

.projects-cta { position: relative; min-height: 350px; overflow: hidden; background: linear-gradient(100deg, #edf6fb, #fff); }
.projects-cta-image { position: absolute; inset: 0 55% 0 0; background: url("../img/about.jpg") center / cover; clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%); }.projects-cta-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,61,115,.12), rgba(255,255,255,.15)); }
.projects-cta-copy { width: 48%; margin-left: auto; padding: 70px 0; }.projects-cta-copy > span { color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }.projects-cta h2 { margin: 9px 0 12px; font-size: 39px; }.projects-cta p { max-width: 540px; color: #64717e; font-size: 14px; }
.projects-cta-copy > div { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 23px; }.projects-cta-copy a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 19px; border-radius: 8px; font-size: 12px; font-weight: 800; }.projects-cta-primary { background: var(--accent-color); color: #fff; }.projects-cta-primary:hover { color: #fff; transform: translateY(-2px); }.projects-cta-secondary { border: 1px solid var(--accent-color); color: var(--accent-color); }

@media (max-width: 991px) { .projects-hero-mark { display: none; }.projects-heading { grid-template-columns: 1fr 1fr; gap: 22px 35px; }.projects-heading > a { grid-column: 1 / -1; justify-self: start; }.projects-metrics { grid-template-columns: repeat(2, 1fr); gap: 25px 0; }.projects-metrics > div:nth-child(2) { border: 0; }.projects-cta-image { right: 50%; }.projects-cta-copy { width: 52%; } }
@media (max-width: 767px) { .projects-hero { min-height: 680px; padding-top: 135px; }.projects-hero-stats { grid-template-columns: repeat(2, 1fr); }.projects-heading { grid-template-columns: 1fr; gap: 15px; }.projects-heading > a { grid-column: auto; }.portfolio .projects-filters { margin-right: -12px; margin-left: -12px; padding: 7px 12px 12px; text-decoration: none; }.portfolio .projects-filters li { min-height: 40px; padding: 10px 18px 10px 32px; font-size: 10px; text-decoration: none !important; }.portfolio .projects-filters li::before { left: 15px; width: 7px; height: 7px; }.project-image { height: 235px; }.projects-metrics { grid-template-columns: 1fr; }.projects-metrics > div { justify-content: flex-start; padding: 0 18px 18px; border-right: 0; border-bottom: 1px solid rgba(118,199,244,.25); }.projects-metrics > div:last-child { padding-bottom: 0; }.projects-cta-image { position: relative; inset: auto; height: 230px; clip-path: none; }.projects-cta-copy { width: 100%; padding: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .projects-orbit, .projects-hero-mark i, .project-scan { animation: none; }.projects-gallery .project-card { transform: none !important; } }

/*--------------------------------------------------------------
# Premium Services Page
--------------------------------------------------------------*/
.sp-hero { position: relative; display: flex; align-items: center; min-height: 690px; padding: 150px 0 70px; overflow: hidden; background: #eff8fc url("../img/feature-safety-nets.png") 72% center / cover no-repeat; }
.sp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,15,28,.72) 0%, rgba(6,25,44,.55) 47%, rgba(6,25,44,.25) 75%, transparent 100%); }
.sp-grid-glow { position: absolute; width: 520px; height: 520px; right: -130px; bottom: -230px; border: 1px solid rgba(20,119,184,.22); border-radius: 50%; box-shadow: 0 0 0 65px rgba(20,119,184,.04), 0 0 0 130px rgba(20,119,184,.025); animation: sp-spin 15s linear infinite; }
.sp-hero-copy { position: relative; z-index: 2; max-width: 720px; }.sp-topline { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; color: #76c7f4; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }.sp-topline b { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red); }
.sp-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(48px, 5.7vw, 78px); line-height: 1.01; }.sp-hero h1 em, .sp-section-heading h2 em, .sp-cta h2 em { color: var(--accent-color); font-style: normal; }.sp-hero-copy > p { color: rgba(255,255,255,.82); font-size: 16px; font-weight: 600; }
.sp-trust-row { display: flex; flex-wrap: wrap; gap: 25px; margin: 28px 0; }.sp-trust-row span { display: flex; align-items: center; gap: 8px; }.sp-trust-row i { color: #76c7f4; font-size: 25px; }.sp-trust-row small { color: rgba(255,255,255,.75); font-size: 10px; line-height: 1.25; }
.sp-primary-btn { display: inline-flex; align-items: center; gap: 13px; padding: 13px 22px; border-radius: 30px; background: linear-gradient(110deg, #083d73, #1477b8); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 13px 30px rgba(8,61,115,.22); transition: .35s ease; }.sp-primary-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(8,61,115,.3); }.sp-primary-btn i { transition: transform .3s; }.sp-primary-btn:hover i { transform: translateX(4px); }
.sp-hero-seal { position: absolute; z-index: 2; right: 4%; top: 41%; display: flex; align-items: center; gap: 13px; color: #062f49; font-family: var(--heading-font); font-size: 27px; font-style: italic; line-height: 1.2; transform: rotate(-7deg); }.sp-hero-seal i { color: var(--brand-red); font-size: 53px; animation: sp-heart 2.4s ease-in-out infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } } @keyframes sp-heart { 50% { transform: scale(1.12) translateZ(25px); filter: drop-shadow(0 0 10px rgba(223,45,54,.35)); } }

.sp-categories { padding: 10px 0 55px; background: #fff; }.sp-section-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; }.sp-section-heading > span, .sp-mini-label { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-color); font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }.sp-section-heading > span::before, .sp-section-heading > span::after { content: ""; width: 28px; height: 2px; background: var(--brand-red); }.sp-section-heading h2 { margin: 9px 0 12px; font-size: clamp(40px, 4.4vw, 59px); }.sp-section-heading p { margin: 0; color: #647484; font-size: 14px; line-height: 1.7; }
.sp-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; perspective: 1300px; }.sp-category-card { position: relative; padding-bottom: 24px; border: 1px solid #e0e8ed; border-radius: 22px; background: #fff; color: var(--heading-color); text-align: center; box-shadow: 0 14px 35px rgba(8,61,115,.08); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }.sp-category-card:hover { color: var(--heading-color); transform: translateY(-12px) rotateX(3deg) rotateY(-2deg); box-shadow: 0 30px 65px rgba(8,61,115,.18); }.sp-category-image { position: relative; overflow: hidden; height: 255px; border-radius: 21px 21px 0 0; }.sp-category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }.sp-category-card:hover img { transform: scale(1.09); }.sp-card-shine { position: absolute; top: -30%; left: -25%; width: 18%; height: 160%; background: rgba(255,255,255,.45); transform: rotate(20deg); }.sp-category-card:hover .sp-card-shine { animation: sp-shine 1.1s ease; }@keyframes sp-shine { to { left: 125%; } }
.sp-category-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: -34px auto 12px; position: relative; z-index: 2; border: 5px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #1477b8, #083d73); color: #fff; font-size: 25px; box-shadow: 0 8px 22px rgba(8,61,115,.25); transition: transform .55s; }.sp-category-card:hover .sp-category-icon { transform: rotateY(180deg) scale(1.08); }.sp-category-card h3 { margin: 0 15px 7px; font-size: 23px; }.sp-category-card p { margin: 0 auto; max-width: 280px; padding: 0 18px; color: #74808b; font-size: 11px; }.sp-category-arrow { display: inline-block; margin-top: 13px; color: var(--accent-color); }

.sp-service-row { padding: 35px 0; overflow: hidden; background: linear-gradient(120deg, #fff, #f2f8fb); }.sp-service-row:nth-child(even) { background: #fff; }.sp-service-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 65px; align-items: center; }.sp-reverse .sp-service-copy { order: 2; }.sp-reverse .sp-service-visual { order: 1; }.sp-mini-label::before, .sp-mini-label::after { content: ""; width: 22px; height: 2px; background: var(--brand-red); }.sp-service-copy h2 { margin: 10px 0 13px; font-size: clamp(39px, 4.3vw, 58px); }.sp-service-copy > p { color: #5f6e7b; font-size: 14px; line-height: 1.7; }
.sp-service-list { display: grid; gap: 4px; margin: 22px 0; padding: 19px; border-radius: 16px; background: linear-gradient(120deg, #edf6fb, #fff); box-shadow: inset 0 0 0 1px rgba(20,119,184,.07); }.sp-service-list strong { margin-bottom: 6px; color: #173b50; font-size: 13px; }.sp-service-list a { display: grid; grid-template-columns: 18px 1fr 18px; gap: 7px; align-items: center; padding: 6px; border-radius: 8px; color: #354b5c; font-size: 16px; }.sp-service-list a i:first-child { color: var(--accent-color); }.sp-service-list a i:last-child { opacity: 0; transform: translateX(-6px); transition: .3s; }.sp-service-list a:hover { background: #fff; color: var(--accent-color); transform: translateX(4px); }.sp-service-list a:hover i:last-child { opacity: 1; transform: none; }
.sp-service-visual { position: relative; height: 500px; border-radius: 30px; perspective: 1100px; transform-style: preserve-3d; transition: transform .2s ease-out; }.sp-service-visual > img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 30px; object-fit: cover; box-shadow: 0 28px 65px rgba(8,61,115,.18); transform: translateZ(25px); }.sp-visual-ring { position: absolute; border: 1px solid rgba(20,119,184,.24); border-radius: 50%; animation: sp-spin 12s linear infinite; }.sp-visual-ring::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-red); box-shadow: 0 0 14px var(--brand-red); }.sp-visual-ring.ring-a { z-index: 1; width: 190px; height: 190px; left: -45px; top: -45px; }.sp-visual-ring.ring-b { z-index: 3; width: 120px; height: 120px; right: -30px; bottom: -30px; animation-direction: reverse; }.sp-visual-caption { position: absolute; z-index: 4; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.9); color: var(--heading-color); font-size: 12px; font-weight: 800; backdrop-filter: blur(9px); transform: translateZ(55px); }.sp-visual-caption i { color: var(--accent-color); font-size: 19px; }

.sp-cta { position: relative; padding: 55px 0 65px; background: #061f3b url("../img/about.jpg") center / cover; color: #fff; }.sp-cta-overlay { position: absolute; inset: 0; background: rgba(3,22,39,.9); }.sp-cta-features { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding-bottom: 35px; border-bottom: 1px solid rgba(255,255,255,.13); }.sp-cta-features span { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; }.sp-cta-features i { color: #76c7f4; font-size: 25px; }.sp-cta-copy { position: relative; padding-top: 35px; text-align: center; }.sp-cta h2 { color: #fff; font-size: clamp(34px,4vw,49px); }.sp-cta-copy p { color: rgba(255,255,255,.72); }.sp-cta-copy > div { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }.sp-cta-copy a { display: inline-flex; align-items: center; gap: 9px; padding: 13px 25px; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; color: #fff; font-size: 12px; font-weight: 800; }.sp-cta-copy a:first-child { border-color: var(--accent-color); background: var(--accent-color); }.sp-cta-copy a:hover { transform: translateY(-3px); color: #fff; }
.sp-use-cases { padding: 27px 0; background: #fff; }.sp-use-cases .container { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }.sp-use-cases span { display: flex; align-items: center; flex-direction: column; gap: 7px; color: #334a5b; font-size: 10px; text-align: center; }.sp-use-cases i { color: var(--accent-color); font-size: 28px; transition: transform .35s; }.sp-use-cases span:hover i { transform: translateY(-5px) rotateY(180deg); }
@media(max-width:991px){.sp-hero-seal{display:none}.sp-category-grid{grid-template-columns:repeat(2,1fr)}.sp-category-card:last-child{grid-column:1/-1;max-width:50%;justify-self:center}.sp-service-grid{gap:35px}.sp-service-visual{height:420px}.sp-use-cases .container{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.sp-hero{min-height:760px;padding-top:135px;background-position:65% center}.sp-hero-overlay{background:rgba(4,15,28,.74)}.sp-topline{flex-wrap:wrap}.sp-trust-row{display:grid;grid-template-columns:repeat(2,1fr)}.sp-category-grid{grid-template-columns:1fr}.sp-category-card:last-child{grid-column:auto;max-width:none}.sp-service-grid{grid-template-columns:1fr}.sp-reverse .sp-service-copy,.sp-reverse .sp-service-visual{order:initial}.sp-service-visual{height:350px}.sp-cta-features{grid-template-columns:repeat(2,1fr)}.sp-cta-copy>div{flex-direction:column;align-items:center}.sp-use-cases .container{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.sp-grid-glow,.sp-hero-seal i,.sp-visual-ring,.sp-card-shine{animation:none!important}.sp-service-visual{transform:none!important}}

/* Compact image sizing for the services overview. */
.services-premium-page .sp-category-image { height: 210px; }
.services-premium-page .sp-service-visual { width: 100%; max-width: 650px; height: 410px; justify-self: center; }
@media (max-width: 991px) { .services-premium-page .sp-service-visual { height: 360px; } }
@media (max-width: 767px) { .services-premium-page .sp-category-image { height: 190px; }.services-premium-page .sp-service-visual { height: 290px; } }

/* Refined service-category cards and motion. */
.services-premium-page .sp-category-grid { gap: 28px; perspective: none; }
.services-premium-page .sp-category-card {
  isolation: isolate;
  padding-bottom: 27px;
  overflow: visible;
  border: 1px solid rgba(8,61,115,.1);
  border-radius: 24px;
  background: linear-gradient(160deg, #fff 0%, #f8fbfd 100%);
  box-shadow: 0 12px 30px rgba(8,61,115,.08);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease;
}
.services-premium-page .sp-category-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(130deg, transparent 25%, rgba(20,119,184,.7), rgba(118,199,244,.45), transparent 75%);
  opacity: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .45s ease;
}
.services-premium-page .sp-category-card:hover {
  border-color: transparent;
  color: var(--heading-color);
  transform: translateY(-9px);
  box-shadow: 0 25px 55px rgba(8,61,115,.16);
}
.services-premium-page .sp-category-card:hover::before { opacity: 1; }
.services-premium-page .sp-category-image { border-radius: 23px 23px 0 0; }
.services-premium-page .sp-category-image::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(6,31,59,.16));
  opacity: 0;
  transition: opacity .5s ease;
}
.services-premium-page .sp-category-card:hover .sp-category-image::after { opacity: 1; }
.services-premium-page .sp-category-image img { transform: scale(1.01); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
.services-premium-page .sp-category-card:hover .sp-category-image img { transform: scale(1.065); filter: saturate(1.08) contrast(1.02); }
.services-premium-page .sp-category-icon {
  width: 62px;
  height: 62px;
  margin-top: -31px;
  border-width: 5px;
  background: linear-gradient(145deg, #1477b8, #083d73);
  box-shadow: 0 9px 22px rgba(8,61,115,.25);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.services-premium-page .sp-category-card:hover .sp-category-icon {
  transform: translateY(-5px) scale(1.06) rotate(-6deg);
  box-shadow: 0 14px 28px rgba(8,61,115,.32), 0 0 0 7px rgba(20,119,184,.08);
}
.services-premium-page .sp-category-card h3 { margin-top: 2px; transition: color .3s ease; }
.services-premium-page .sp-category-card:hover h3 { color: var(--accent-color); }
.services-premium-page .sp-category-arrow { transition: transform .35s ease, color .35s ease; }
.services-premium-page .sp-category-card:hover .sp-category-arrow { color: var(--brand-red); transform: translateX(6px); }
.services-premium-page .sp-category-card:hover .sp-card-shine { animation: sp-shine 1.05s ease both; }

@media (hover: none) {
  .services-premium-page .sp-category-card:hover { transform: none; }
  .services-premium-page .sp-category-card:hover .sp-category-icon { transform: none; }
}

/* Services hub — animated hero counters, heading shine, floating orbs. */
.sp-title-shine { background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; }
.sp-title-shine em { -webkit-text-fill-color: #76c7f4; color: #76c7f4; }
@keyframes sp-title-shine { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

.sp-hero-orb { position: absolute; z-index: 1; left: -160px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(118,199,244,.16), transparent 68%); animation: sp-orb-float 9s ease-in-out infinite; }

.sp-hero-highlights { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 10px; }
.sp-hero-highlights span { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 40px; background: rgba(255,255,255,.7); box-shadow: 0 10px 24px rgba(8,61,115,.08); backdrop-filter: blur(6px); transition: transform .35s ease, box-shadow .35s ease; }
.sp-hero-highlights span:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(8,61,115,.16); }
.sp-hero-highlights i { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: linear-gradient(145deg, #1477b8, #083d73); color: #fff; font-size: 16px; box-shadow: 0 6px 14px rgba(8,61,115,.3); animation: sp-badge-float 3.6s ease-in-out infinite; }
.sp-hero-highlights span:nth-child(2) i { animation-delay: .3s; }
.sp-hero-highlights span:nth-child(3) i { animation-delay: .6s; }
.sp-hero-highlights span:nth-child(4) i { animation-delay: .9s; }
.sp-hero-highlights small { color: #213a4c; font-size: 11px; font-weight: 700; line-height: 1.25; }
@keyframes sp-badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.sp-categories { position: relative; overflow: hidden; }
.sp-categories-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(2px); animation: sp-orb-float 10s ease-in-out infinite; }
.sp-categories-orb.orb-a { right: -140px; top: -120px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(20,119,184,.1), transparent 70%); }
.sp-categories-orb.orb-b { left: -100px; bottom: -140px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(223,45,54,.07), transparent 70%); animation-delay: 2.5s; }
@keyframes sp-orb-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-22px) scale(1.05); } }

.sp-category-count { display: inline-flex; align-items: center; gap: 6px; margin: 4px 15px 2px; color: var(--accent-color); font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.sp-category-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-red); }

.sp-service-list a:hover i:first-child { animation: sp-check-pop .45s ease; }
@keyframes sp-check-pop { 50% { transform: scale(1.4) rotate(-8deg); } }

@media (prefers-reduced-motion: reduce) {
  .sp-title-shine, .sp-hero-orb, .sp-categories-orb, .sp-hero-highlights i, .sp-service-list a:hover i:first-child { animation: none !important; }
  .sp-title-shine { -webkit-text-fill-color: #fff; background: none; color: #fff; }
}
@media (max-width: 767px) {
  .sp-hero-orb, .sp-categories-orb { display: none; }
}

/*--------------------------------------------------------------
# Premium Individual Service Pages
--------------------------------------------------------------*/
.individual-service-page .is-hero{position:relative;display:flex;align-items:center;min-height:670px;padding:145px 0 65px;overflow:hidden;background-color:#eff8fc;background-image:var(--service-bg);background-position:center;background-size:cover;background-repeat:no-repeat}.is-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,15,28,.72) 0%,rgba(6,25,44,.55) 43%,rgba(6,25,44,.3) 59%,rgba(6,25,44,.12) 82%,transparent 100%)}.is-hero-grid{position:absolute;right:-100px;top:-180px;width:520px;height:520px;border:1px solid rgba(20,119,184,.18);border-radius:50%;box-shadow:0 0 0 60px rgba(20,119,184,.04),0 0 0 120px rgba(20,119,184,.025);animation:is-spin 16s linear infinite}.is-hero-copy{position:relative;z-index:2;max-width:680px}.is-eyebrow,.is-section-title>span,.is-gallery-heading>div>span{display:inline-flex;align-items:center;gap:10px;color:var(--accent-color);font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase}.is-eyebrow:before,.is-eyebrow:after,.is-section-title>span:before,.is-section-title>span:after{content:"";width:22px;height:2px;background:var(--brand-red)}.is-hero .is-eyebrow{color:#76c7f4}.is-hero h1{margin:16px 0;color:#fff;font-size:clamp(50px,6vw,80px);line-height:1}.is-hero h1 em,.is-intro h2 em,.is-section-title h2 em,.is-faq h2 em{color:var(--accent-color);font-style:normal}.is-hero-copy>p{max-width:600px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.65}.is-hero-points{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:28px 0}.is-hero-points span{display:grid;grid-template-columns:42px 1fr}.is-hero-points i{grid-row:1/3;display:grid;place-items:center;width:37px;height:37px;border:1px solid rgba(118,199,244,.35);border-radius:50%;color:#76c7f4;font-size:18px}.is-hero-points strong{color:#fff;font-size:10px}.is-hero-points small{color:rgba(255,255,255,.65);font-size:9px}.is-hero-actions{display:flex;gap:12px}.is-hero-actions a{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid rgba(118,199,244,.5);border-radius:28px;color:#76c7f4;font-size:11px;font-weight:800;transition:.3s}.is-hero-actions a:first-child{background:linear-gradient(110deg,#083d73,#1477b8);color:#fff;border-color:transparent}.is-hero-actions a:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(8,61,115,.2)}.is-hero-script{position:absolute;z-index:2;right:4%;top:44%;display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--heading-font);font-size:27px;font-style:italic;line-height:1.25;text-shadow:0 2px 12px rgba(6,31,59,.75);transform:rotate(-6deg)}.is-hero-script i{color:#fff;font-size:48px;filter:drop-shadow(0 2px 8px rgba(6,31,59,.65));animation:is-pulse 2.3s ease-in-out infinite}
@keyframes is-spin{to{transform:rotate(360deg)}}@keyframes is-pulse{50%{transform:scale(1.13);filter:drop-shadow(0 0 10px rgba(223,45,54,.35))}}
.is-intro{padding:75px 0;background:linear-gradient(120deg,#fff,#f2f8fb)}.is-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.is-intro-image{position:relative;height:430px;border-radius:24px;perspective:1000px;transform-style:preserve-3d;transition:transform .2s}.is-intro-image img{width:100%;height:100%;border-radius:24px;object-fit:cover;box-shadow:0 25px 55px rgba(8,61,115,.15);transform:translateZ(20px)}.is-intro-image>span{position:absolute;z-index:2;left:0;bottom:32px;padding:16px 28px;background:linear-gradient(110deg,#083d73,#1477b8);color:#fff;font-size:17px;font-weight:800;transform:translateZ(45px)}.is-intro-copy h2{margin:12px 0 16px;font-size:clamp(38px,4vw,55px);line-height:1.08}.is-intro-copy>p{color:#62717d;font-size:14px;line-height:1.7}.is-intro-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}.is-intro-benefits span{display:flex;align-items:center;gap:10px}.is-intro-benefits i{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;border-radius:50%;background:#e4f2f9;color:var(--accent-color);font-size:19px}.is-intro-benefits strong{font-size:11px;line-height:1.25}
.is-benefits{padding:65px 0 75px;background:#fff}.is-section-title{text-align:center;margin-bottom:35px}.is-section-title h2{margin:10px 0 0;font-size:clamp(36px,4vw,52px)}.is-benefit-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.is-benefit-grid>div{display:flex;align-items:center;flex-direction:column;gap:10px;min-height:135px;padding:18px 12px;border:1px solid #e5ebef;border-radius:15px;background:linear-gradient(145deg,#fff,#f6fafc);text-align:center;transition:.4s}.is-benefit-grid>div:hover{transform:translateY(-8px);border-color:rgba(20,119,184,.35);box-shadow:0 18px 35px rgba(8,61,115,.12)}.is-benefit-grid i{display:grid;place-items:center;width:53px;height:53px;border-radius:50%;background:#e3f1f8;color:var(--accent-color);font-size:23px;transition:.5s}.is-benefit-grid>div:hover i{transform:rotateY(180deg)}.is-benefit-grid strong{font-size:10px;line-height:1.25}
.is-gallery{padding:65px 0 75px;background:linear-gradient(120deg,#051f35,#083e55);color:#fff}.is-gallery-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px}.is-gallery-heading h2{margin:6px 0;color:#fff;font-size:40px}.is-gallery-heading p{margin:0;color:rgba(255,255,255,.65);font-size:12px}.is-gallery-heading>a{color:#76c7f4;font-size:12px;font-weight:700}.is-gallery-track{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.is-gallery-track>a{position:relative;display:block;height:230px;overflow:hidden;border-radius:15px}.is-gallery-track img{width:100%;height:100%;object-fit:cover;transition:.65s}.is-gallery-track span{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,31,59,.4);color:#fff;font-size:25px;opacity:0;transition:.4s}.is-gallery-track a:hover img{transform:scale(1.1)}.is-gallery-track a:hover span{opacity:1}
.is-process{padding:70px 0;background:#fff}.is-process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.is-process-grid>div{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center}.is-process-grid>div:not(:last-child):after{content:"→";position:absolute;right:-13px;top:30px;color:var(--accent-color)}.is-process-grid>div>span{position:absolute;left:calc(50% + 22px);top:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--brand-red);color:#fff;font-size:9px}.is-process-grid i{display:grid;place-items:center;width:66px;height:66px;margin-bottom:14px;border-radius:50%;background:#e4f2f9;color:var(--accent-color);font-size:26px}.is-process-grid strong{font-size:12px}.is-process-grid small{margin-top:5px;color:#71808c;font-size:9px}
.is-answer{padding:70px 0;background:linear-gradient(125deg,#f4f9fc,#fff)}.is-answer-grid{display:grid;grid-template-columns:1fr .85fr .55fr;gap:25px;align-items:stretch}.is-family-image{position:relative;overflow:hidden;min-height:390px;border-radius:22px}.is-family-image img{width:100%;height:100%;object-fit:cover}.is-family-image span{position:absolute;left:25px;top:25px;color:#fff;font-family:var(--heading-font);font-size:24px;font-style:italic;text-shadow:0 2px 8px #061f3b}.is-faq{padding:12px 0}.is-faq h2{margin:10px 0 18px;font-size:32px}.is-faq .accordion-item{margin-bottom:8px;border:0;border-radius:9px;overflow:hidden}.is-faq .accordion-button{padding:13px 15px;background:#fff;color:#253b4d;font-size:11px;font-weight:700;box-shadow:none}.is-faq .accordion-button:not(.collapsed){color:var(--accent-color)}.is-faq .accordion-body{padding:12px 15px;color:#687885;font-size:10px}.is-quote-card{display:flex;flex-direction:column;padding:26px;border-radius:20px;background:linear-gradient(145deg,#1477b8,#083d73);color:#fff}.is-quote-card h2{color:#fff;font-size:25px}.is-quote-card p{color:rgba(255,255,255,.76);font-size:11px}.is-quote-card input{margin-bottom:9px;padding:11px;border:0;border-radius:8px;font-size:11px}.is-quote-card button{margin-top:auto;padding:12px;border:0;border-radius:8px;background:#061f3b;color:#fff;font-size:11px;font-weight:800}.is-stats{padding:30px 0;background:#061f3b;color:#fff}.is-stats .container{display:grid;grid-template-columns:repeat(4,1fr)}.is-stats span{display:grid;grid-template-columns:52px 1fr;padding:0 25px;border-right:1px solid rgba(255,255,255,.14)}.is-stats span:last-child{border:0}.is-stats i{grid-row:1/3;color:#76c7f4;font-size:35px}.is-stats strong{font-size:17px}.is-stats small{color:rgba(255,255,255,.65);font-size:10px}
@media(max-width:991px){.is-hero-script{display:none}.is-intro-grid{gap:30px}.is-intro-image{height:360px}.is-benefit-grid{grid-template-columns:repeat(3,1fr)}.is-gallery-track{grid-template-columns:repeat(3,1fr)}.is-gallery-track>a:nth-child(n+4){display:none}.is-answer-grid{grid-template-columns:1fr 1fr}.is-quote-card{grid-column:1/-1}.is-stats .container{grid-template-columns:repeat(2,1fr);gap:25px 0}.is-stats span:nth-child(2){border:0}}
@media(max-width:767px){.individual-service-page .is-hero{min-height:780px;padding-top:135px;background-position:62% center}.is-hero-overlay{background:linear-gradient(90deg,rgba(248,252,254,.96),rgba(248,252,254,.86) 70%,rgba(248,252,254,.5))}.is-hero-points{grid-template-columns:repeat(2,1fr)}.is-intro-grid{grid-template-columns:1fr}.is-intro-image{height:300px}.is-intro-copy{order:-1}.is-benefit-grid{grid-template-columns:repeat(2,1fr)}.is-gallery-track{grid-template-columns:1fr 1fr}.is-gallery-track>a{height:190px}.is-gallery-track>a:nth-child(3){display:none}.is-process-grid{grid-template-columns:1fr;gap:22px}.is-process-grid>div:not(:last-child):after{display:none}.is-answer-grid{grid-template-columns:1fr}.is-family-image{min-height:300px}.is-hero-actions{flex-direction:column;align-items:flex-start}.is-stats .container{grid-template-columns:1fr}.is-stats span{padding:15px 25px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}}
@media(prefers-reduced-motion:reduce){.is-hero-grid,.is-hero-script i{animation:none}.is-intro-image{transform:none!important}}

/*--------------------------------------------------------------
# Premium About Page — Story Redesign
--------------------------------------------------------------*/
.story-progress { position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 3px; background: rgba(8,61,115,.08); }
.story-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-red), var(--accent-color)); transition: width .12s linear; }

.story-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.story-kicker::before { content: ""; width: 26px; height: 2px; background: var(--brand-red); }
.story-kicker-light { color: #76c7f4; }

.story-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 1px solid transparent; border-radius: 30px; background: linear-gradient(110deg, #1477b8, #083d73); color: #fff; font-size: 12px; font-weight: 800; transition: .35s ease; }
.story-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(8,61,115,.28); }
.story-btn i { transition: transform .3s; }
.story-btn:hover i { transform: translateX(4px); }
.story-btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); }
.story-btn-light { background: #fff; color: var(--heading-color); }
.story-btn-light:hover { color: var(--accent-color); }

.story-hero { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 92vh; overflow: hidden; background: radial-gradient(120% 100% at 15% 0%, #0b3a5c 0%, #061f3b 55%, #04121f 100%); text-align: center; padding: 150px 20px 90px; }
.story-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,18,31,.75) 0%, rgba(6,31,59,.35) 55%, rgba(6,31,59,.15) 100%); }
.story-hero-mesh { position: absolute; inset: -10%; opacity: .16; background-image: repeating-linear-gradient(45deg, rgba(118,199,244,.6) 0 1px, transparent 1px 42px), repeating-linear-gradient(-45deg, rgba(118,199,244,.6) 0 1px, transparent 1px 42px); animation: story-mesh-drift 34s linear infinite; }
@keyframes story-mesh-drift { to { background-position: 420px 420px, -420px 420px; } }
.story-hero-inner { position: relative; z-index: 2; max-width: 780px; }
.story-hero-title { margin: 22px 0 18px; color: #fff; font-size: clamp(42px, 6vw, 74px); line-height: 1.08; }
.story-hero-title em { color: #76c7f4; font-style: normal; }
.story-line { display: block; clip-path: inset(0 100% 0 0); animation: story-reveal 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes story-reveal { to { clip-path: inset(0 0 0 0); } }
.story-hero-lede { max-width: 600px; margin: 0 auto; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.75; }
.story-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.story-scroll-cue { position: absolute; z-index: 2; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.story-scroll-cue span { width: 1px; height: 30px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: story-cue-move 1.8s ease-in-out infinite; }
@keyframes story-cue-move { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); transform-origin: top; opacity: 1; } 60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } }

.story-sticky { padding: 90px 0; background: #fff; }
.story-sticky-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 60px; }
.story-sticky-visual { position: sticky; top: 110px; align-self: start; }
.story-sticky-media { position: relative; height: 420px; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 60px rgba(8,61,115,.18); }
.story-sticky-media img { width: 100%; height: 100%; object-fit: cover; }
.story-sticky-badge { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 30px; background: rgba(255,255,255,.92); color: var(--heading-color); font-size: 11px; font-weight: 800; }
.story-sticky-badge i { color: var(--accent-color); }
.story-stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; padding: 20px 10px; border-radius: 18px; background: linear-gradient(135deg, #061f3b, #083d73); }
.story-stat-band div { text-align: center; }
.story-stat-band strong { display: block; color: #fff; font-family: var(--heading-font); font-size: clamp(19px, 2vw, 25px); }
.story-stat-band strong:not(:last-child)::after { content: "+"; }
.story-stat-band small { color: rgba(255,255,255,.65); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.story-sticky-copy h2 { margin: 14px 0 16px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
.story-sticky-copy h2 em { color: var(--accent-color); font-style: normal; }
.story-sticky-copy > p { color: #5f6e7b; font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.story-check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; margin: 22px 0 28px; padding: 0; list-style: none; }
.story-check-list li { display: flex; align-items: center; gap: 10px; color: #253b4d; font-size: 12.5px; font-weight: 700; }
.story-check-list i { color: var(--accent-color); font-size: 15px; }

.story-values { padding: 80px 0; background: linear-gradient(180deg, #f4f9fc, #fff); }
.story-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.story-head h2 { margin: 12px 0 0; font-size: clamp(32px, 3.8vw, 46px); }
.story-head p { margin: 12px 0 0; color: #647484; font-size: 13.5px; }
.story-values-row { display: flex; gap: 14px; }
.story-values-row > div { position: relative; flex: 1; padding: 30px 22px; border-radius: 20px; background: #fff; border: 1px solid rgba(8,61,115,.08); box-shadow: 0 12px 28px rgba(8,61,115,.06); overflow: hidden; cursor: default; transition: flex-grow .5s ease, box-shadow .4s ease, border-color .4s ease; }
.story-values-row > div:hover { flex-grow: 2.2; box-shadow: 0 22px 45px rgba(8,61,115,.14); border-color: rgba(20,119,184,.25); }
.story-values-num { display: block; margin-bottom: 14px; color: rgba(8,61,115,.1); font-family: var(--heading-font); font-size: 40px; font-weight: 700; }
.story-values-row h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; white-space: nowrap; }
.story-values-row h3 i { color: var(--accent-color); }
.story-values-row p { max-height: 0; margin: 0; color: #6c7986; font-size: 12.5px; line-height: 1.6; opacity: 0; transition: max-height .5s ease, opacity .4s ease, margin .5s ease; }
.story-values-row > div:hover p { max-height: 120px; margin-top: 12px; opacity: 1; }

.story-services { padding: 80px 0 90px; background: #fff; }
.story-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-service-card { position: relative; display: block; height: 380px; border-radius: 22px; overflow: hidden; color: #fff; }
.story-service-card:hover { color: #fff; }
.story-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.story-service-card:hover img { transform: scale(1.08); }
.story-service-duotone { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(6,31,59,.88), rgba(20,119,184,.55)); mix-blend-mode: multiply; transition: opacity .5s ease; }
.story-service-card:hover .story-service-duotone { opacity: .3; }
.story-service-copy { position: absolute; inset: auto 0 0 0; padding: 26px; background: linear-gradient(transparent, rgba(3,20,36,.88)); }
.story-service-copy > i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: 19px; }
.story-service-copy h3 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.story-service-copy p { margin: 0 0 10px; color: rgba(255,255,255,.75); font-size: 11.5px; }
.story-service-copy > span { display: inline-flex; align-items: center; gap: 8px; color: #76c7f4; font-size: 11px; font-weight: 800; }
.story-service-copy > span i { transition: transform .3s; }
.story-service-card:hover .story-service-copy > span i { transform: translateX(4px); }

.story-commit { padding: 85px 0; background: linear-gradient(120deg, #f4f9fc, #fff); overflow: hidden; }
.story-commit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-commit-copy h2 { margin: 12px 0 16px; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.1; }
.story-commit-copy h2 em { color: var(--accent-color); font-style: normal; }
.story-commit-copy p { color: #5f6e7b; font-size: 14px; line-height: 1.75; margin-bottom: 24px; }
.story-commit-collage { position: relative; height: 420px; }
.story-commit-collage .tile { position: absolute; border-radius: 18px; object-fit: cover; box-shadow: 0 20px 45px rgba(8,61,115,.18); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.story-commit-collage .tile-a { z-index: 1; left: 0; top: 10px; width: 62%; height: 78%; transform: rotate(-4deg); }
.story-commit-collage .tile-b { z-index: 2; right: 0; top: 0; width: 46%; height: 46%; transform: rotate(5deg); }
.story-commit-collage .tile-c { z-index: 3; right: 4%; bottom: 0; width: 44%; height: 42%; transform: rotate(-3deg); }
.story-commit-collage .tile:hover { transform: rotate(0) scale(1.04); box-shadow: 0 26px 55px rgba(8,61,115,.26); z-index: 4; }

.story-timeline { padding: 80px 0 90px; background: #fff; }
.story-timeline-track { position: relative; display: flex; justify-content: space-between; gap: 12px; }
.story-timeline-line { position: absolute; left: 5%; right: 5%; top: 24px; width: 90%; height: 10px; overflow: visible; }
.story-timeline-line path { fill: none; stroke: rgba(20,119,184,.25); stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.6s ease; }
.story-timeline-track[data-aos].aos-animate .story-timeline-line path { stroke-dashoffset: 0; }
.story-timeline-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1; text-align: center; }
.story-timeline-dot { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #1477b8, #083d73); color: #fff; font-family: var(--heading-font); font-weight: 700; box-shadow: 0 8px 20px rgba(8,61,115,.28); }
.story-timeline-step > i { margin-bottom: 8px; color: var(--accent-color); font-size: 22px; }
.story-timeline-step strong { font-size: 12.5px; }
.story-timeline-step small { margin-top: 4px; color: #71808c; font-size: 10px; }

.story-cta { position: relative; overflow: hidden; padding: 70px 0; background: #061f3b; color: #fff; text-align: center; }
.story-cta-diagonal { position: absolute; inset: -20% -10%; background: linear-gradient(105deg, #061f3b 0%, #083d73 45%, #1477b8 75%, #061f3b 100%); transform: skewY(-3deg); }
.story-cta-inner { position: relative; z-index: 1; }
.story-cta h2 { margin: 0 0 10px; color: #fff; font-size: clamp(30px, 3.6vw, 44px); }
.story-cta h2 em { color: #76c7f4; font-style: normal; }
.story-cta p { margin: 0 0 24px; color: rgba(255,255,255,.72); font-size: 13px; }

@media (max-width: 991px) {
  .story-sticky-grid, .story-commit-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-sticky-visual { position: static; }
  .story-values-row { flex-wrap: wrap; }
  .story-values-row > div { flex: 1 1 45%; }
  .story-values-row > div:hover { flex-grow: 1; }
  .story-service-grid { grid-template-columns: 1fr 1fr; }
  .story-commit-collage { height: 360px; margin-top: 20px; }
}
@media (max-width: 767px) {
  .story-hero { min-height: 82vh; padding-top: 130px; }
  .story-check-list { grid-template-columns: 1fr; }
  .story-stat-band { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .story-values-row { flex-direction: column; }
  .story-values-row > div:hover { flex-grow: 0; }
  .story-service-grid { grid-template-columns: 1fr; }
  .story-timeline-track { flex-direction: column; gap: 26px; }
  .story-timeline-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-hero-mesh, .story-scroll-cue span, .story-line { animation: none !important; }
  .story-line { clip-path: inset(0 0 0 0); }
  .story-timeline-line path { transition: none; stroke-dashoffset: 0; }
}

/*--------------------------------------------------------------
# Premium Building Safety Nets Page
--------------------------------------------------------------*/
.bsn-hero { position: relative; display: flex; align-items: center; min-height: 680px; padding: 150px 0 100px; overflow: hidden; background-color: #04101c; background-image: var(--bsn-hero-bg, url("../img/hero-bg.jpg")); background-position: center 30%; background-size: cover; background-repeat: no-repeat; }
.bsn-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4,15,28,.55) 0%, rgba(6,25,44,.4) 38%, transparent 75%); }
.bsn-hero-ring { position: absolute; right: -140px; top: -220px; width: 540px; height: 540px; border: 1px solid rgba(118,199,244,.22); border-radius: 50%; box-shadow: 0 0 0 65px rgba(118,199,244,.035), 0 0 0 130px rgba(118,199,244,.02); animation: bsn-spin 18s linear infinite; }
.bsn-hero > .container { min-width: 0; }
.bsn-hero-copy { position: relative; z-index: 2; max-width: 660px; min-width: 0; }
.bsn-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 16px 7px 12px; border: 1px solid rgba(118,199,244,.3); border-radius: 30px; background: rgba(118,199,244,.08); color: #76c7f4; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; backdrop-filter: blur(6px); }
.bsn-eyebrow i { font-size: 13px; }
.bsn-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(44px, 5.4vw, 74px); line-height: 1.04; }
.bsn-hero h1 em { color: #76c7f4; font-style: normal; }
.bsn-hero-copy > p { max-width: 570px; margin: 0; color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.75; }
.bsn-hero-points { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 30px 0; }
.bsn-hero-points span { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; column-gap: 10px; }
.bsn-hero-points i { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(118,199,244,.35); border-radius: 50%; color: #76c7f4; font-size: 17px; }
.bsn-hero-points strong { color: #fff; font-size: 11px; }
.bsn-hero-points small { color: rgba(255,255,255,.6); font-size: 9.5px; }
.bsn-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bsn-hero-actions a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border: 1px solid rgba(255,255,255,.28); border-radius: 30px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; transition: .35s ease; backdrop-filter: blur(6px); }
.bsn-hero-actions a:first-child { border-color: transparent; background: linear-gradient(110deg, #1477b8, #0b5a94); box-shadow: 0 14px 32px rgba(8,61,115,.35); }
.bsn-hero-actions a:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 32px rgba(4,15,28,.4); }
.bsn-hero-actions a i { transition: transform .3s; }
.bsn-hero-actions a:hover i { transform: translateX(4px); }
.bsn-hero-seal { position: absolute; z-index: 2; right: 6%; bottom: 12%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: rgba(6,25,44,.55); color: #fff; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); animation: bsn-float 4s ease-in-out infinite; }
.bsn-hero-seal i { color: #76c7f4; font-size: 34px; animation: bsn-pulse 2.4s ease-in-out infinite; }
.bsn-hero-seal strong { display: block; font-family: var(--heading-font); font-size: 15px; }
.bsn-hero-seal small { color: rgba(255,255,255,.65); font-size: 10px; }
@keyframes bsn-spin { to { transform: rotate(360deg); } }
@keyframes bsn-pulse { 50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(118,199,244,.55)); } }
@keyframes bsn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bsn-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.bsn-kicker::before, .bsn-kicker::after { content: ""; width: 22px; height: 2px; background: var(--brand-red); }

.bsn-features { padding: 80px 0 85px; background: linear-gradient(180deg, #fff, #f4f9fc); }
.bsn-section-title { max-width: 720px; margin: 0 auto 45px; text-align: center; }
.bsn-section-title span { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.bsn-section-title span::before, .bsn-section-title span::after { content: ""; width: 24px; height: 2px; background: var(--brand-red); }
.bsn-section-title h2 { margin: 12px 0 0; font-size: clamp(34px, 4vw, 50px); }
.bsn-section-title h2 em { color: var(--accent-color); font-style: normal; }
.bsn-section-title p { margin: 12px auto 0; color: #647484; font-size: 13.5px; line-height: 1.7; }
.bsn-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.bsn-feature-card { position: relative; isolation: isolate; padding: 30px 26px 26px; border: 1px solid rgba(8,61,115,.09); border-radius: 20px; background: linear-gradient(160deg, #fff 0%, #f8fbfd 100%); box-shadow: 0 12px 28px rgba(8,61,115,.07); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.bsn-feature-card::before { content: ""; position: absolute; z-index: -1; inset: -1px; padding: 1px; border-radius: 20px; background: linear-gradient(130deg, transparent 20%, rgba(20,119,184,.75), rgba(118,199,244,.5), transparent 80%); opacity: 0; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .45s ease; }
.bsn-feature-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(8,61,115,.15); }
.bsn-feature-card:hover::before { opacity: 1; }
.bsn-feature-num { position: absolute; top: 22px; right: 24px; color: rgba(8,61,115,.09); font-family: var(--heading-font); font-size: 34px; font-weight: 700; }
.bsn-feature-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(145deg, #1477b8, #083d73); color: #fff; font-size: 24px; box-shadow: 0 10px 22px rgba(8,61,115,.28); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.bsn-feature-card:hover .bsn-feature-icon { transform: translateY(-4px) rotate(-8deg) scale(1.07); box-shadow: 0 14px 28px rgba(8,61,115,.35), 0 0 0 7px rgba(20,119,184,.08); }
.bsn-feature-card h3 { margin: 0 0 8px; font-size: 18px; }
.bsn-feature-card p { margin: 0; color: #6c7986; font-size: 12.5px; line-height: 1.65; }

.bsn-about { padding: 80px 0; background: #fff; }
.bsn-about-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 58px; align-items: center; }
.bsn-about-image { position: relative; height: 460px; border-radius: 26px; perspective: 1000px; transform-style: preserve-3d; transition: transform .2s; }
.bsn-about-image img { width: 100%; height: 100%; border-radius: 26px; object-fit: cover; box-shadow: 0 28px 60px rgba(8,61,115,.18); transform: translateZ(20px); }
.bsn-about-image::after { content: ""; position: absolute; inset: 18px; z-index: -1; border: 1px solid rgba(20,119,184,.25); border-radius: 26px; }
.bsn-about-chip { position: absolute; z-index: 2; left: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.94); color: var(--heading-color); font-size: 12px; font-weight: 800; box-shadow: 0 14px 30px rgba(8,61,115,.2); transform: translateZ(45px); }
.bsn-about-chip i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e3f1f8; color: var(--accent-color); font-size: 14px; }
.bsn-about-copy h2 { margin: 12px 0 16px; font-size: clamp(34px, 4vw, 50px); line-height: 1.1; }
.bsn-about-copy h2 em { color: var(--accent-color); font-style: normal; }
.bsn-about-copy p { margin: 0 0 14px; color: #5f6e7b; font-size: 14px; line-height: 1.75; }
.bsn-about-points { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 26px; }
.bsn-about-points span { display: flex; align-items: center; gap: 11px; }
.bsn-about-points i { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: #e4f2f9; color: var(--accent-color); font-size: 17px; transition: transform .45s; }
.bsn-about-points span:hover i { transform: rotateY(180deg); }
.bsn-about-points strong { font-size: 11.5px; line-height: 1.3; }

.bsn-applications { padding: 36px 0; background: linear-gradient(120deg, #061f3b, #083d73); text-align: center; }
.bsn-app-head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #76c7f4; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.bsn-app-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.bsn-app-grid span { display: flex; flex-direction: column; align-items: center; gap: 9px; color: rgba(255,255,255,.85); text-align: center; font-size: 11px; font-weight: 700; }
.bsn-app-grid i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); color: #76c7f4; font-size: 20px; transition: transform .4s ease, background .4s ease; }
.bsn-app-grid span:hover i { transform: translateY(-5px) rotate(-8deg); background: rgba(118,199,244,.2); }

.bsn-install { padding: 80px 0; background: linear-gradient(120deg, #f4f9fc, #fff); }
.bsn-install-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 58px; align-items: center; }
.bsn-install-copy h2 { margin: 12px 0 16px; font-size: clamp(34px, 4vw, 50px); line-height: 1.1; }
.bsn-install-copy h2 em { color: var(--accent-color); font-style: normal; }
.bsn-install-copy p { margin: 0 0 14px; color: #5f6e7b; font-size: 14px; line-height: 1.75; }
.bsn-install-checklist { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.bsn-install-checklist div { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #e5ebef; transition: .35s; }
.bsn-install-checklist div:hover { border-color: rgba(20,119,184,.35); box-shadow: 0 14px 28px rgba(8,61,115,.1); transform: translateY(-4px); }
.bsn-install-checklist i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #e3f1f8; color: var(--accent-color); font-size: 16px; }
.bsn-install-checklist strong { font-size: 11.5px; }
.bsn-install-visual { position: relative; height: 460px; }
.bsn-install-visual img { width: 100%; height: 100%; border-radius: 26px; object-fit: cover; box-shadow: 0 28px 60px rgba(8,61,115,.18); }
.bsn-install-visual .bsn-ring { position: absolute; border: 1px solid rgba(20,119,184,.28); border-radius: 50%; animation: bsn-spin 13s linear infinite; }
.bsn-install-visual .bsn-ring.a { z-index: 1; width: 150px; height: 150px; left: -35px; top: -35px; }
.bsn-install-visual .bsn-ring.b { z-index: 1; width: 100px; height: 100px; right: -25px; bottom: -25px; animation-direction: reverse; }

.bsn-gallery { padding: 70px 0 80px; background: linear-gradient(120deg, #051f35, #083e55); color: #fff; }
.bsn-gallery-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 30px; gap: 20px; flex-wrap: wrap; }
.bsn-gallery-heading span { color: #76c7f4; font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.bsn-gallery-heading h2 { margin: 8px 0 0; color: #fff; font-size: clamp(30px, 3.6vw, 42px); }
.bsn-gallery-heading p { margin: 4px 0 0; color: rgba(255,255,255,.65); font-size: 12.5px; }
.bsn-gallery-heading > a { color: #76c7f4; font-size: 12px; font-weight: 700; }
.bsn-gallery-track { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 13px; }
.bsn-gallery-track a { position: relative; display: block; height: 235px; overflow: hidden; border-radius: 16px; }
.bsn-gallery-track img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.bsn-gallery-track a:hover img { transform: scale(1.1); }
.bsn-gallery-track span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6,31,59,.45); color: #fff; font-size: 24px; opacity: 0; transition: .4s; }
.bsn-gallery-track a:hover span { opacity: 1; }

.bsn-stats { padding: 32px 0; background: #061f3b; color: #fff; }
.bsn-stats .container { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.bsn-stats span { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; padding: 0 25px; border-right: 1px solid rgba(255,255,255,.14); }
.bsn-stats span:last-child { border: 0; }
.bsn-stats i { color: #76c7f4; font-size: 34px; }
.bsn-stats strong { display: block; font-size: 18px; }
.bsn-stats small { color: rgba(255,255,255,.65); font-size: 10px; }

.bsn-cta { padding: 80px 0; background: linear-gradient(125deg, #f4f9fc, #fff); }
.bsn-cta-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.8fr); gap: 45px; align-items: center; }
.bsn-cta-copy h2 { margin: 12px 0 16px; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.1; }
.bsn-cta-copy h2 em { color: var(--accent-color); font-style: normal; }
.bsn-cta-copy p { color: #5f6e7b; font-size: 14px; line-height: 1.75; margin-bottom: 22px; }
.bsn-cta-phone { display: inline-flex; align-items: center; gap: 12px; color: var(--heading-color); font-weight: 800; }
.bsn-cta-phone i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #e3f1f8; color: var(--accent-color); font-size: 19px; transition: transform .35s; }
.bsn-cta-phone:hover { color: var(--heading-color); }
.bsn-cta-phone:hover i { transform: rotate(-12deg) scale(1.08); }
.bsn-quote-card { display: flex; flex-direction: column; padding: 30px; border-radius: 22px; background: linear-gradient(145deg, #1477b8, #083d73); color: #fff; box-shadow: 0 25px 55px rgba(8,61,115,.25); }
.bsn-quote-card h2 { color: #fff; font-size: 25px; margin: 0 0 6px; }
.bsn-quote-card p { color: rgba(255,255,255,.78); font-size: 11.5px; margin: 0 0 18px; }
.bsn-quote-card input { margin-bottom: 10px; padding: 12px 14px; border: 0; border-radius: 9px; font-size: 12px; }
.bsn-quote-card button { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border: 0; border-radius: 9px; background: #061f3b; color: #fff; font-size: 12px; font-weight: 800; transition: .3s; }
.bsn-quote-card button:hover { background: #04101f; transform: translateY(-2px); }

@media (max-width: 1199px) {
  .bsn-feature-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsn-app-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .bsn-hero-seal { display: none; }
  .bsn-about-grid, .bsn-install-grid, .bsn-cta-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .bsn-about-image, .bsn-install-visual { height: 360px; }
  .bsn-gallery-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin: 0 -1px; }
  .bsn-gallery-track::-webkit-scrollbar { display: none; }
  .bsn-gallery-track > a { flex: 0 0 auto; width: 46%; scroll-snap-align: start; }
  .bsn-stats .container { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 0; }
  .bsn-stats span:nth-child(2) { border: 0; }
}
@media (max-width: 767px) {
  .bsn-hero { min-height: 800px; padding-top: 135px; background-position: 65% center; }
  .bsn-hero-points { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsn-hero-actions { flex-direction: column; align-items: flex-start; }
  .bsn-feature-grid { grid-template-columns: minmax(0,1fr); }
  .bsn-app-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsn-install-checklist { grid-template-columns: minmax(0,1fr); }
  .bsn-gallery-track > a { width: 80%; height: 190px; }
  .bsn-stats .container { grid-template-columns: minmax(0,1fr); }
  .bsn-stats span { padding: 14px 20px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .bsn-hero-ring, .bsn-hero-seal, .bsn-hero-seal i, .bsn-install-visual .bsn-ring { animation: none !important; }
  .bsn-about-image { transform: none !important; }
}

/*--------------------------------------------------------------
# Premium Blog Page
--------------------------------------------------------------*/
.blog-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; }
.blog-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 26px; background: linear-gradient(110deg, #1477b8, #083d73); color: #fff; font-size: 12px; font-weight: 800; transition: .3s ease; }
.blog-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(8,61,115,.28); }

.blog-hero { position: relative; overflow: hidden; padding: 155px 0 75px; background: linear-gradient(160deg, #eef7fc 0%, #fff 65%); text-align: center; }
.blog-hero-compact { padding-bottom: 95px; }
.blog-hero-shape { position: absolute; border-radius: 50%; filter: blur(1px); animation: blog-shape-float 9s ease-in-out infinite; }
.blog-hero-shape.shape-a { width: 340px; height: 340px; left: -110px; top: -110px; background: radial-gradient(circle, rgba(20,119,184,.14), transparent 70%); }
.blog-hero-shape.shape-b { width: 260px; height: 260px; right: -90px; bottom: -110px; background: radial-gradient(circle, rgba(223,45,54,.09), transparent 70%); animation-delay: 2s; }
@keyframes blog-shape-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-24px); } }
.blog-hero-copy { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.blog-hero h1 { margin: 16px 0; font-size: clamp(38px, 5vw, 60px); line-height: 1.08; }
.blog-hero h1 em { color: var(--accent-color); font-style: normal; }
.blog-hero-copy > p { color: #5f6e7b; font-size: 14px; line-height: 1.7; }
.blog-hero .blog-btn { margin-top: 22px; }

.blog-list { padding: 70px 0 90px; background: linear-gradient(180deg, #f7fbfd 0%, #fff 45%, #f4f9fc 100%); }
.blog-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 90px 20px; text-align: center; color: #6c7986; }
.blog-empty i { font-size: 48px; color: rgba(20,119,184,.3); }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; align-items: stretch; }
.blog-grid-related { grid-template-columns: repeat(3, minmax(0,1fr)); }
.blog-card { position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border: 1px solid rgba(8,61,115,.1); border-radius: 18px; background: #fff; box-shadow: 0 16px 36px rgba(8,61,115,.08); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.blog-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--brand-red), var(--accent-color)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.blog-card:hover { transform: translateY(-7px); border-color: rgba(20,119,184,.28); box-shadow: 0 26px 55px rgba(8,61,115,.16); }
.blog-card:hover::after { transform: scaleX(1); }
.blog-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e8f4fa; }
.blog-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(6,31,59,.58)); opacity: .85; transition: opacity .35s ease; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease, filter .7s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.07); filter: saturate(1.05) contrast(1.03); }
.blog-card:hover .blog-card-media::after { opacity: .6; }
.blog-card-read { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 32px); padding: 7px 11px; border-radius: 8px; background: rgba(255,255,255,.94); color: var(--heading-color); font-size: 10.5px; font-weight: 800; box-shadow: 0 8px 18px rgba(6,31,59,.16); }
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 23px 24px 25px; }
.blog-card-date { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; margin-bottom: 12px; padding: 6px 10px; border-radius: 8px; background: #eef7fc; color: var(--accent-color); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.blog-card-body h2 { margin: 0 0 11px; font-size: 20px; line-height: 1.3; }
.blog-card-body h2 a { color: var(--heading-color); transition: color .25s ease; }
.blog-card:hover .blog-card-body h2 a { color: var(--accent-color); }
.blog-card-body p { flex: 1; margin: 0 0 20px; color: #637280; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-more { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid #e7eef3; color: var(--heading-color); font-size: 12px; font-weight: 800; }
.blog-card-more i { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: linear-gradient(135deg, #1477b8, #083d73); color: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover .blog-card-more i { transform: translateX(4px); box-shadow: 0 8px 16px rgba(8,61,115,.22); }

.blog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; }
.blog-page-num, .blog-page-nav { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f4f9fc; color: var(--heading-color); font-size: 13px; font-weight: 800; transition: .3s ease; }
.blog-page-num:hover, .blog-page-nav:hover { background: #e3f1f8; color: var(--accent-color); }
.blog-page-num.is-active { background: linear-gradient(135deg, #1477b8, #083d73); color: #fff; box-shadow: 0 10px 22px rgba(8,61,115,.28); }
.blog-page-nav.is-disabled { opacity: .35; pointer-events: none; }

.blog-detail-hero { position: relative; padding: 170px 0 90px; background-color: #04101c; background-size: cover; background-position: center; overflow: hidden; }
.blog-detail-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,15,28,.5), rgba(4,15,28,.88)); }
.blog-back { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; }
.blog-back:hover { color: #fff; }
.blog-detail-meta { position: relative; z-index: 1; display: flex; gap: 18px; margin-bottom: 16px; }
.blog-detail-meta span { display: inline-flex; align-items: center; gap: 6px; color: #76c7f4; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.blog-detail-hero h1 { position: relative; z-index: 1; max-width: 820px; margin: 0 0 14px; color: #fff; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.15; }
.blog-detail-lede { position: relative; z-index: 1; max-width: 640px; margin: 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.7; }

.blog-detail-body { padding: 70px 0 90px; background: #fff; }
.blog-detail-grid { display: grid; grid-template-columns: 1fr minmax(0,.38fr); gap: 55px; align-items: start; }
.blog-detail-content p { margin: 0 0 20px; color: #3b4a58; font-size: 15px; line-height: 1.85; }
.blog-detail-cta { position: sticky; top: 110px; padding: 30px; border-radius: 22px; background: linear-gradient(150deg, #061f3b, #083d73); color: #fff; text-align: center; }
.blog-detail-cta i { font-size: 34px; color: #76c7f4; }
.blog-detail-cta h3 { margin: 14px 0 8px; color: #fff; font-size: 19px; }
.blog-detail-cta p { margin: 0 0 20px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; }
.blog-detail-cta .blog-btn { width: 100%; justify-content: center; background: #fff; color: var(--heading-color); }
.blog-detail-cta .blog-btn:hover { color: var(--accent-color); }
.blog-btn-ghost { display: inline-flex; align-items: center; gap: 9px; justify-content: center; width: 100%; margin-top: 10px; padding: 11px 20px; border: 1px solid rgba(255,255,255,.3); border-radius: 26px; color: #fff; font-size: 12px; font-weight: 700; transition: .3s ease; }
.blog-btn-ghost:hover { color: #fff; border-color: #76c7f4; }

/* Simple premium footer */
.footer,
.footer.dark-background {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #061f3b;
  color: rgba(255, 255, 255, .76);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(118, 199, 244, .16), transparent 34%),
    linear-gradient(135deg, rgba(20, 119, 184, .16), transparent 45%);
  pointer-events: none;
}

.footer > .container {
  position: relative;
  z-index: 1;
}

.footer .footer-top {
  padding: 62px 0 38px;
}

.footer .footer-main {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(150px, .75fr)) minmax(220px, 1fr);
  gap: 42px;
  align-items: start;
}

.footer .footer-about,
.footer .footer-links,
.footer .footer-social {
  padding: 0;
  border: 0;
  background: transparent;
}

.footer .footer-brand-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(118, 199, 244, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: 0 18px 35px rgba(0, 0, 0, .18);
}

.footer .footer-logo-img {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: contain;
  border: 1px solid rgba(118, 199, 244, .28);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 35px rgba(0, 0, 0, .18);
  transition: transform .3s ease;
}

.footer .footer-logo:hover .footer-brand-text {
  transform: translateY(-2px);
}

.footer .footer-logo:hover .footer-logo-img {
  transform: translateY(-2px);
}

.footer .footer-about p {
  max-width: 330px;
  margin: 22px 0 24px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.75;
}

.footer h4 {
  position: relative;
  margin: 0 0 20px;
  padding-bottom: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: #76c7f4;
}

.footer .footer-links ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer-links ul li {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.footer .footer-links ul li:hover {
  transform: none;
}

.footer .footer-links ul a {
  display: inline-flex;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.4;
}

.footer .footer-links ul a:hover {
  color: #76c7f4;
  transform: translateX(4px);
}

.footer .footer-contact p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.65;
}

.footer .footer-contact strong {
  color: #fff;
  font-weight: 800;
}

.footer .footer-contact span {
  overflow-wrap: anywhere;
}

.footer .social-links {
  gap: 10px;
}

.footer .social-links a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 16px;
  box-shadow: none;
}

.footer .social-links a::before {
  display: none;
}

.footer .social-links a:hover {
  border-color: #76c7f4;
  background: #76c7f4;
  color: #061f3b;
  transform: translateY(-3px);
}

.footer .copyright {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .62);
}

.footer .copyright p {
  margin: 0;
  color: inherit;
  font-size: 13px;
}

.footer .sitename {
  color: #fff;
}

@media (max-width: 991px) {
  .footer .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .footer .footer-top {
    padding: 48px 0 28px;
  }

  .footer .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer .footer-about {
    text-align: center;
  }

  .footer .footer-logo {
    justify-content: center;
  }

  .footer .footer-about p {
    max-width: 100%;
    margin: 18px auto 22px;
  }

  .footer .social-links {
    justify-content: center;
  }

  .footer h4 {
    margin-bottom: 16px;
    text-align: center;
  }

  .footer h4::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer .footer-links ul {
    gap: 9px;
    text-align: center;
  }

  .footer .footer-links ul a {
    justify-content: center;
    width: 100%;
  }

  .footer .footer-links ul a:hover {
    transform: none;
  }

  .footer .footer-social {
    text-align: center;
  }

  .footer .footer-contact p {
    margin-bottom: 10px;
  }

  .footer .copyright {
    padding: 17px 12px;
    text-align: center;
  }
}

/* Simple premium safety solution cards */
.features {
  padding: 84px 0;
  background: #f7fafc;
}

.features .features-bg,
.features .features-orb,
.features .features-grid-overlay {
  display: none;
}

.features .section-title {
  max-width: 760px;
  padding-bottom: 44px;
}

.features .section-title h2 {
  color: #0a4d8f;
}

.features .section-title h2::before,
.features .section-title h2::after {
  display: none;
}

.features .section-title p {
  max-width: 620px;
  margin-inline: auto;
  color: #153e6a;
}

.features-card-grid,
.features-list.features-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: none;
  padding: 0;
}

.features .simple-premium-card,
.features .premium-card.simple-premium-card,
.features .premium-card.simple-premium-card:nth-child(even),
.features .premium-card.simple-premium-card:nth-child(1),
.features .premium-card.simple-premium-card:nth-child(2),
.features .premium-card.simple-premium-card:nth-child(3),
.features .premium-card.simple-premium-card:nth-child(4) {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e4edf3;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 61, 115, .06);
  transform: none;
}

.features .simple-premium-card::before,
.features .simple-premium-card::after {
  display: none;
}

.features .simple-premium-card:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 119, 184, .24);
  box-shadow: 0 16px 32px rgba(8, 61, 115, .1);
}

.features .simple-premium-card .card-media,
.features .premium-card.simple-premium-card .card-media,
.features .premium-card.simple-premium-card:nth-child(1) .card-media,
.features .premium-card.simple-premium-card:nth-child(4) .card-media,
.features .premium-card.simple-premium-card:nth-child(even) .card-media {
  width: 100%;
  height: 170px;
  min-height: 0;
  flex: 0 0 auto;
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #e6f1f8;
  transform: none;
}

.features .simple-premium-card:hover .card-media {
  transform: none;
}

.features .simple-premium-card .card-media::before,
.features .simple-premium-card .card-media::after,
.features .simple-premium-card .grill-scan,
.features .simple-premium-card .net-shield,
.features .simple-premium-card .spike-glint,
.features .simple-premium-card .hanger-motion {
  display: none;
}

.features .simple-premium-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform .45s ease;
}

.features .simple-premium-card:hover .card-media img {
  transform: scale(1.03);
}

.features .simple-premium-card .card-body,
.features .premium-card.simple-premium-card .card-body,
.features .premium-card.simple-premium-card:nth-child(even) .card-body {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  grid-column: auto;
  grid-row: auto;
  padding: 20px;
  border: 0;
  background: transparent;
  transform: none;
}

.features .simple-premium-card:hover .card-body {
  transform: none;
  border: 0;
  background: transparent;
}

.features .simple-premium-card .feature-kicker {
  margin-bottom: 8px;
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.features .simple-premium-card h3,
.features .simple-premium-card .card-body h3 {
  margin: 0 0 9px;
  color: var(--accent-color);
  font-size: 18px;
  line-height: 1.25;
}

.features .simple-premium-card .card-body > p {
  min-height: 0;
  margin: 0 0 16px;
  color: #1e6fac;
  font-size: 12.5px;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.features .simple-premium-card ul {
  display: none;
}

.features .simple-premium-card .feature-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  margin-top: auto;
  padding-top: 0;
  border-top: 0;
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 800;
}

.features .simple-premium-card .feature-view-more i {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e6f3fa;
  color: var(--accent-color);
  font-size: 12px;
  transition: transform .3s ease;
}

.features .simple-premium-card .feature-view-more:hover {
  color: var(--accent-color);
}

.features .simple-premium-card .feature-view-more:hover i {
  transform: translate(3px, -3px);
}

.features-more {
  margin-top: 34px;
}

@media (max-width: 1199px) {
  .features-card-grid,
  .features-list.features-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .features {
    padding: 72px 0;
  }

  .features-card-grid,
  .features-list.features-card-grid {
    grid-template-columns: 1fr;
  }

  .features .simple-premium-card,
  .features .premium-card.simple-premium-card,
  .features .premium-card.simple-premium-card:nth-child(even),
  .features .premium-card.simple-premium-card:nth-child(1),
  .features .premium-card.simple-premium-card:nth-child(2),
  .features .premium-card.simple-premium-card:nth-child(3),
  .features .premium-card.simple-premium-card:nth-child(4) {
    min-height: 0;
  }

  .features .simple-premium-card .card-media,
  .features .premium-card.simple-premium-card .card-media,
  .features .premium-card.simple-premium-card:nth-child(1) .card-media,
  .features .premium-card.simple-premium-card:nth-child(4) .card-media,
  .features .premium-card.simple-premium-card:nth-child(even) .card-media {
    height: 190px;
    flex-basis: auto;
  }
}

.blog-related { padding: 80px 0 90px; background: linear-gradient(180deg, #f4f9fc, #fff); }
.blog-head { max-width: 600px; margin: 0 auto 36px; text-align: center; }
.blog-head h2 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 40px); }

@media (max-width: 1199px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991px) {
  .blog-detail-grid { grid-template-columns: minmax(0,1fr); }
  .blog-detail-cta { position: static; }
  .blog-grid-related { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .blog-grid, .blog-grid-related { grid-template-columns: minmax(0,1fr); }
  .blog-card-body { padding: 20px; }
  .blog-card-body h2 { font-size: 18px; }
  .blog-detail-meta { flex-wrap: wrap; }
  .blog-hero { padding-top: 135px; }
  .blog-detail-hero { padding-top: 135px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-hero-shape { animation: none !important; }
}

/*--------------------------------------------------------------
# Banner Heading Size Adjustments
--------------------------------------------------------------*/
.contact-hero h1,
.projects-hero h1,
.service-name-banner h1,
.sp-hero h1,
.individual-service-page .is-hero h1,
.story-hero-title,
.bsn-hero h1,
.blog-hero h1,
.blog-detail-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.12;
}

.hero h2 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.1;
}

.page-title h1 {
  font-size: 34px;
  line-height: 1.18;
}

.security-systems.section {
  padding: 92px 0;
}

/* Remove decorative background mesh overlays */
.story-hero-mesh,
.footer .footer-grid-overlay,
.about .about-grid-overlay,
.features .features-grid-overlay,
.why-choose-us .why-grid-overlay,
.google-reviews .reviews-grid-overlay,
.is-hero-grid {
  display: none !important;
}

@media (max-width: 767px) {
  .contact-hero h1,
  .projects-hero h1,
  .service-name-banner h1,
  .sp-hero h1,
  .individual-service-page .is-hero h1,
  .story-hero-title,
  .bsn-hero h1,
  .blog-hero h1,
  .blog-detail-hero h1 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.16;
  }

  .hero h2 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .page-title h1 {
    font-size: 30px;
  }

  .security-systems.section {
    padding: 68px 0;
  }
}