/*
Theme Name: Virtual Edge
Theme URI: https://virtualedge.co.uk
Description: A minimal custom WordPress theme for Virtual Edge CyberReady. 
Version: 1.0.0
Author: TharinduR
Author URI: https://www.tharindur.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: virtual-edge
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ==========================================================================
   Virtual Edge CyberReady Style Sheet
   ========================================================================== */

/* 1. Global Reset & Variables */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --cream: #f5efe8;
  --cream-dk: #ede5db;
  --teal: #1a7a5e;
  --teal-dk: #155f49;
  --teal-lt: #e8f5f1;
  --teal-mid: #c8e8de;
  --ink: #0d1117;
  --ink-mid: #1e2a35;
  --navy: #0d1b3e;
  --navy-mid: #1e3a5f;
  --body: #3d4a56;
  --body-c: #3d4a56;
  /* compatible fallback */
  --muted: #6b7a8a;
  --border: #ddd6cc;
  --border-lt: #e8e2da;
  --white: #fff;
  --red: #c0392b;
  --red-lt: #fdf0ee;
  --red-dk: #a8362a;
  --red-border: #f5cdc6;
  --amber: #b86e1a;
  --amber-lt: #fef4e8;
  --amber-border: #f5d89e;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --f: 'Plus Jakarta Sans', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 14px;
}

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

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

/* 2. Common Layout Wrappers */
.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 1200px content wrapper for homepage / sectors */
.w {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 3. Navigation Bar (ve-all-pages style with dropdowns) */
nav {
  background: var(--cream);
  border-bottom: 1px solid var(--border-lt);
  position: sticky;
  top: 0;
  z-index: 200;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

nav.scrolled {
  background: rgba(245, 239, 232, 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 20px rgba(13, 17, 23, 0.05);
  border-color: rgba(221, 214, 204, 0.6);
}

.nav-i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Hide mobile-only elements on desktop */
.nav-mobile-only {
  display: none;
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
  z-index: 210;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger animation to X */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.custom-logo-link img {
  max-height: 36px;
  width: auto;
}

@keyframes slideDownMenu {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .nav-i {
    padding: 0 24px;
  }

  .nav-btn {
    display: none;
    /* Hide desktop book button in header row */
  }

  .nav-mobile-only {
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .nav-btn-mobile {
    display: block;
    background: var(--teal);
    color: var(--white) !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background .2s;
  }

  .nav-btn-mobile:hover {
    background: var(--teal-dk);
  }

  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: rgba(245, 239, 232, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    display: none;
    padding: 24px;
    border-bottom: 1px solid var(--border-lt);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }

  .nav-i.nav-active .nav-links {
    display: flex;
    animation: slideDownMenu 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .nav-toggle {
    display: flex;
  }

  /* Dropdown styles inside mobile menu */
  .ndrop {
    width: 100%;
    text-align: center;
  }

  .ndrop-menu {
    position: static;
    display: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    border: none;
    border-radius: 8px;
    margin-top: 8px;
    padding: 6px;
    box-sizing: border-box;
  }

  .ndrop.active .ndrop-menu {
    display: block;
    animation: slideDownMenu 0.2s ease forwards;
  }

  .ndrop-menu a {
    text-align: center;
    font-size: 14px;
    padding: 10px;
  }
}

.nav-logo {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
  cursor: pointer;
}

.nav-logo span {
  color: var(--teal);
}

.nav-logo img {
  height: 36px;
  cursor: pointer;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.nav-links a,
.nav-links span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-mid);
  cursor: pointer;
  transition: color .2s;
}

.nav-links a:hover,
.nav-links span:hover {
  color: var(--teal);
}

.nav-btn {
  background: var(--teal);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: none;
}

.nav-btn:hover {
  background: var(--teal-dk);
  transform: translateY(-1px);
}

/* Dropdowns in Header */
.ndrop {
  position: relative;
}

.ndrop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  z-index: 300;
}

.ndrop:hover .ndrop-menu {
  display: block;
}

.ndrop-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 15px;
  color: var(--body);
  border-radius: 6px;
  cursor: pointer;
}

.ndrop-menu a:hover {
  background: var(--teal-lt);
  color: var(--teal);
}

/* 4. Common Typography & Badges */
.stag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

.sh2 {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 14px;
}

.sh2 em {
  font-style: normal;
  color: var(--teal);
}

.sh2w {
  color: #white;
}

.sh2w em {
  color: #7dd3b8;
}

.ssub {
  font-size: 16px;
  color: var(--body);
  line-height: 1.75;
  max-width: 520px;
}

.hero-dk .ssub-w {
  color: rgba(255, 255, 255, .65);
}

.hero-dk .sh2w {
    color: #fff;
}

.htag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.htag.lt {
  background: rgba(26, 122, 94, .15);
  border-color: rgba(26, 122, 94, .35);
  color: #7dd3b8;
}

.hdot,
.tdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bl 2s infinite;
}

.tdot {
  background: var(--teal);
}

@keyframes bl {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .2;
  }
}

.bc {
  padding: 14px 0;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc a {
  color: var(--teal);
  cursor: pointer;
}

.rb {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 30px;
}

.rb-c {
  background: var(--red-lt);
  color: var(--red);
}

.rb-h {
  background: var(--amber-lt);
  color: var(--amber);
}

/* 5. Common Grid Layouts */
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.g2s {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

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

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

.ibox {
  border-radius: 18px;
  overflow: hidden;
}

.ibox img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

/* 6. Section Styles */
.sec {
  padding: 76px 0;
  background: var(--cream);
}

.sec-wh {
  padding: 76px 0;
  background: var(--white);
}

.sec-ink {
  padding: 76px 0;
  background: var(--ink);
}

.sec-ink .stag {
  color: #7dd3b8;
}

/* 7. Buttons & Interactive Elements */
.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  border: none;
  text-align: center;
}

.btn-p:hover {
  background: var(--teal-dk);
  transform: translateY(-1px);
}

.btn-o {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--teal);
  color: var(--teal);
  cursor: pointer;
  transition: all .2s;
  background: transparent;
}

.btn-o:hover {
  background: var(--teal);
  color: #fff;
}

.btn-wh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, .35);
  color: #fff;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
}

.btn-wh:hover {
  border-color: #white;
  background: rgba(255, 255, 255, .1);
}

/* Contact Form 7 styling */
.wpcf7-form {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 18px;
  padding: 32px;
  display: grid;
  gap: 20px;
}

.wpcf7-form p {
  margin: 0;
}

.wpcf7-form label {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  font-size: 14px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  background: #fff;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(26, 122, 94, .1);
  outline: none;
}

.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.wpcf7-form .wpcf7-submit:hover {
  background: var(--teal-dk);
  transform: translateY(-1px);
}

.wpcf7-form .wpcf7-response-output {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--red);
}

/* Blog listing and single post styles */
.blog-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 22px;
}

.blog-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.blog-item .post-thumb img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

.post-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 6px;
}

.post-title a {
  color: inherit;
}

.post-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.post-excerpt {
  color: var(--body);
  line-height: 1.6;
  margin-bottom: 12px;
}

.post-pagination {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.post-pagination .page-numbers {
  display: inline-flex;
  gap: 8px;
}

.post-single {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px;
}

.post-featured img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 18px;
}

.post-content {
  margin-top: 16px;
  font-size: 16px;
  color: var(--body);
  line-height: 1.8;
}

.post-nav {
  margin-top: 28px;
  gap: 12px;
}

.post-nav .prev,
.post-nav .next {
  font-weight: 700;
}

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

  .post-featured img {
    height: 240px;
  }
}

/* 8. Cards & Lists */
.card {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  padding: 22px;
  transition: all .25s;
}

.card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26, 122, 94, .1);
}

.card-cream {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  padding: 22px;
}

.cdk {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 22px;
  transition: border-color .2s;
}

.cdk:hover {
  border-color: rgba(26, 122, 94, .35);
}

.ci {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 12px;
}

.ct {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}

.cdk .ct {
  color: #fff;
}

.cb {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
}

.cdk .cb {
  color: rgba(255, 255, 255, .6);
}

.sbar {
  background: var(--ink);
  padding: 24px 0;
}

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

.sb {
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.sb:last-child {
  border-right: none;
}

.sn {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: var(--teal);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.sl {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  line-height: 1.4;
}

/* Pricing Page specific cards */
.pc {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.pc::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--teal);
}

.pl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}

.pp {
  font-size: 34px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.03em;
}

.pper {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}

.pdesc {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-lt);
}

.plist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.plist li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 15px;
  color: var(--body);
}

.plist li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  background: var(--teal);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7l3 3 5.5-5.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.chk {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chk li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--body);
}

.chk li::before {
  content: '✓';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.chk.lt li {
  color: rgba(255, 255, 255, .75);
}

/* Process Timeline (Advisor/Oncall pages) */
.proc {
  display: flex;
  flex-direction: column;
}

.pst {
  display: flex;
  gap: 16px;
  padding-bottom: 26px;
  position: relative;
}

.pst:last-child {
  padding-bottom: 0;
}

.pln {
  position: absolute;
  left: 17px;
  top: 37px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--teal-mid), transparent);
}

.pst:last-child .pln {
  display: none;
}

.pci {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--teal-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

.pci span {
  font-size: 14px;
  font-weight: 900;
  color: var(--teal);
}

.pb {
  padding-top: 6px;
}

.pti {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 3px;
}

.pde {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
}

.ppi {
  display: inline-block;
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--muted);
}

/* FAQ Lists */
.faqlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faqitem {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  overflow: hidden;
}

.faqq {
  padding: 15px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faqq:hover {
  color: var(--teal);
}

.faqq::after {
  content: '+';
  font-size: 18px;
  color: var(--teal);
  transition: transform .2s;
}

.faqitem {
    background: var(--cream);
    border: 1px solid var(--border-lt);
    border-radius: 10px;
    overflow: hidden;
}

.faqitem.open .faqq::after {
  transform: rotate(45deg);
}

.faqa {
  display: none;
  padding: 0 18px 15px;
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
}

.faqitem.open .faqa {
  display: block;
}

/* 9. CTA Sections */
.cta {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
}

.ctabg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1600&q=80&fit=crop');
  background-size: cover;
  background-position: center;
}

.ctaov {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 17, 23, .92), rgba(26, 122, 94, .65));
}

.ctacon {
  position: relative;
  z-index: 2;
}

.cta .sh2 {
  color: #fff;
}

.cta .sh2 em {
  color: #7dd3b8;
}

.cta .stag {
  color: #7dd3b8;
}

.cta p {
  font-size: 15px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.7;
  margin-bottom: 22px;
}

.ctacard {
  background: var(--white);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.ctacard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--teal);
}

.cctag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}

.ccti {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 7px;
}

.ccb {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  margin-bottom: 16px;
}

.ccsteps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.ccs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--body);
}

.csn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--teal);
  flex-shrink: 0;
}

.ccnote {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 9px;
}

.cta2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.spill {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.spill-item {
  padding: 7px 14px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: all .2s;
}

.spill-item:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* 10. Footer Section */
footer {
  background: var(--ink-mid);
  padding: 44px 0 20px;
}

.ftg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}

.ftbrand img {
  height: 26px;
  margin-bottom: 12px;
  filter: brightness(0) invert(1);
}

.ftbrand p {
  font-size: 14px;
  color: rgba(255, 255, 255, .4);
  line-height: 1.7;
  max-width: 240px;
}

.ftcol h4 {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 12px;
}

.ftcol ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ftcol a {
  font-size: 14px;
  color: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: color .2s;
}

.ftcol a:hover {
  color: #fff;
}

.ftbot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11px;
  color: rgba(255, 255, 255, .25);
}

.ftlinks {
  display: flex;
  gap: 14px;
}

.ftlinks a {
  color: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: color .2s;
}

.ftlinks a:hover {
  color: #white;
}

/* ==========================================================================
   11. Homepage-Specific CSS
   ========================================================================== */

/* ── Hero Carousel ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 80vh;
  min-height: 620px;
  max-height: 860px;
  overflow: hidden;
  background: #000;
}

/* Slides container */
.hslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}

.hslide.active {
  opacity: 1;
  z-index: 2;
}

.hslide.prev {
  opacity: 0;
  z-index: 1;
}

/* Per-slide background image with Ken Burns zoom */
.hslide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s ease;
}

.hslide.active .hslide-bg {
  transform: scale(1);
}

/* Background images — one per slide */
.hslide:nth-child(1) .hslide-bg {
  background-image: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=1400&q=85&fit=crop');
}

.hslide:nth-child(2) .hslide-bg {
  background-image: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?w=1400&q=85&fit=crop&crop=top');
}

.hslide:nth-child(3) .hslide-bg {
  background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1400&q=85&fit=crop');
}

/* Dark gradient overlay */
.hslide-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10, 16, 22, .88) 0%, rgba(10, 16, 22, .65) 55%, rgba(10, 16, 22, .2) 100%);
}

/* Slide content layer */
.hslide-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.hslide-inner {
  max-width: 580px;
  pointer-events: none;
}

.hslide.active .hslide-inner {
  pointer-events: auto;
}

/* Tag pill — override light variant for dark hero */
.hero .htag {
  background: rgba(26, 122, 94, .18);
  border-color: rgba(125, 211, 184, .35);
  color: #7dd3b8;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s .1s, transform .6s .1s;
}

.hslide.active .htag {
  opacity: 1;
  transform: translateY(0);
}

/* Live dot override for dark hero */
.hero .tdot {
  background: #7dd3b8;
}

/* Hero headline */
.hero h1 {
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s .25s, transform .65s .25s;
}

.hslide.active h1 {
  opacity: 1;
  transform: translateY(0);
}

.hero h1 em {
  font-style: italic;
  color: #7dd3b8;
}

/* Hero subtext */
.hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.8;
  margin-bottom: 32px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s .4s, transform .6s .4s;
}

.hslide.active .hero-sub {
  opacity: 1;
  transform: translateY(0);
}

.hero-sub strong {
  color: #fff;
  font-weight: 600;
}

/* Hero button row */
.hbtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s .55s, transform .6s .55s;
}

.hslide.active .hbtns {
  opacity: 1;
  transform: translateY(0);
}

/* Ghost/glass secondary button for dark hero */
.hero .btn-o {
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  backdrop-filter: blur(6px);
}

.hero .btn-o:hover {
  border-color: rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

/* Trust strip */
.trust-strip {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s .7s, transform .6s .7s;
}

.hslide.active .trust-strip {
  opacity: 1;
  transform: translateY(0);
}

.ti {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

.ti strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
}

.ti-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(26, 122, 94, .25);
  border: 1px solid rgba(125, 211, 184, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ── Carousel Controls ────────────────────────────────────────────────────── */

/* Dot navigation */
.hero-nav {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: width .35s ease, background .3s ease;
}

.hero-dot.active {
  width: 28px;
  background: #7dd3b8;
}

/* Prev / Next arrow buttons */
.hero-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  backdrop-filter: blur(8px);
  transition: background .2s;
  user-select: none;
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, .18);
}

.hero-arrow.prev {
  left: 24px;
}

.hero-arrow.next {
  right: 24px;
}

/* Slide counter (top-right) */
.hero-counter {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 20;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .12em;
}

/* Progress bar (bottom edge) */
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--teal);
  z-index: 20;
  width: 0;
}

.hero-progress.running {
  animation: hero-prog 5s linear forwards;
}

@keyframes hero-prog {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ── Hero Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero {
    max-height: none;
    min-height: 580px;
  }

  .hero h1 {
    font-size: clamp(28px, 7vw, 40px);
  }

  .hero-arrow {
    display: none;
  }

  .hslide-content {
    padding: 0 20px;
  }

  .hslide-inner {
    max-width: 100%;
  }

  .trust-strip {
    gap: 14px;
  }
}

/* Intro section */
.intro {
  padding: 72px 0;
  background: var(--white);
}

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

.intro-img {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.intro-img img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: top;
}

.img-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--teal);
  color: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.img-badge span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: .8;
}

/* Fears grid */
.fears {
  padding: 72px 0;
  background: var(--cream);
}

.fears-top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fc {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 12px;
  padding: 20px;
}

.fc:hover {
  border-color: var(--teal);
}

.fn {
  font-size: 10px;
  font-weight: 800;
  color: var(--teal);
  opacity: .6;
  margin-bottom: 8px;
  letter-spacing: .08em;
}

.fe {
  font-size: 20px;
  margin-bottom: 10px;
  display: block;
}

.ft2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
  line-height: 1.3;
}

.fd {
  font-size: 14px;
  color: var(--body);
  line-height: 1.65;
}

.fpill {
  display: inline-block;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--teal-lt);
  color: var(--teal);
}

.fright {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fimg {
  border-radius: 14px;
  overflow: hidden;
}

.fimg img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
}

.fquote {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 20px;
}

.fqt {
  font-size: 15px;
  font-style: italic;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 12px;
}

.fqa {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.fqr {
  font-size: 11px;
  color: var(--muted);
}

/* Services overview on homepage */
.services {
  padding: 72px 0;
  background: var(--white);
}

.svc-hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 48px;
}

.svc-img {
  border-radius: 16px;
  overflow: hidden;
}

.svc-img img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.sgrid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.sc {
  background: var(--cream);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.sc:hover {
  background: #fdf8f3;
}

.sc-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.sc:hover .sc-bar {
  transform: scaleX(1);
}

.sc-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.sc-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.bs {
  background: var(--teal-lt);
  color: var(--teal);
}

.bp {
  background: var(--amber-lt);
  color: var(--amber);
}

.br {
  background: #eef2ff;
  color: #4f46e5;
}

.bpr {
  background: var(--red-lt);
  color: var(--red);
}

.sc-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 8px;
}

.sc-desc {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 16px;
}

.sc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.sc-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
}

.sc-list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  background: var(--teal);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 6.5l2.5 3 5.5-5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.sc-lnk {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}

/* Testimonials on homepage */
.testis {
  padding: 64px 0;
  background: var(--ink);
}

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

.tc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 24px;
}

.tstars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.tstars span {
  color: var(--teal);
  font-size: 14px;
}

.tq {
  font-size: 15px;
  line-height: 1.75;
  font-style: italic;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 16px;
}

.ta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.tn {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.tr {
  font-size: 10px;
  color: rgba(255, 255, 255, .42);
}

.ttag {
  display: inline-block;
  margin-top: 14px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  color: #7dd3b8;
  background: rgba(26, 122, 94, .18);
  border: 1px solid rgba(26, 122, 94, .3);
}

/* Journey section on homepage */
.journey {
  padding: 72px 0;
  background: var(--cream);
}

.ji {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: flex;
  gap: 16px;
  padding-bottom: 28px;
  position: relative;
}

.step:last-child {
  padding-bottom: 0;
}

.sline {
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--teal-mid), transparent);
}

.step:last-child .sline {
  display: none;
}

.scirc {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  background: var(--teal-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}

.scirc span {
  font-size: 14px;
  font-weight: 900;
  color: var(--teal);
}

.sbody {
  padding-top: 6px;
}

.stitle {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.sdesc {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
}

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

.ji-main {
  border-radius: 14px;
  overflow: hidden;
}

.ji-main img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.jirow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.jism {
  border-radius: 12px;
  overflow: hidden;
}

.jism img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.jicap {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 16px 18px;
}

.jicapt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
}

.jicaps {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* Sectors on homepage */
.sectors {
  padding: 72px 0;
  background: var(--white);
}

.sec-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  margin-bottom: 48px;
}

.secimg {
  border-radius: 16px;
  overflow: hidden;
}

.secimg img {
  width: 100%;
  height: 340px;
  object-fit: cover;
}

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

.secc {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: all .2s;
}

.secc:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.seem {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.secn {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.secr {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.rh {
  background: var(--red-lt);
  color: var(--red);
}

.rm {
  background: var(--amber-lt);
  color: var(--amber);
}

.secd {
  font-size: 14px;
  color: var(--body);
  line-height: 1.65;
}

/* Homepage specific CTA styles */
.cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=1600&q=80&fit=crop');
  background-size: cover;
  background-position: center;
}

.cta-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13, 17, 23, .93), rgba(26, 122, 94, .65));
}

.cta-con {
  position: relative;
  z-index: 2;
}

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

.ctap {
  font-size: 15px;
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
  margin-bottom: 24px;
}

.cta-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.cta-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--teal);
}

/* ==========================================================================
   12. Sector-Specific (Legal & Expanded Pages) CSS
   ========================================================================== */

.hero-dk {
  background: var(--ink);
  padding: 64px 0 56px;
}

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

.auth-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.auth-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.auth-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(26, 122, 94, .2);
  border: 1px solid rgba(26, 122, 94, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Scenarios for Sector Pages */
.scenario {
  background: var(--ink);
  border-radius: 18px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.scenario::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--amber));
}

.sc-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.sc-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.sc-body {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.85;
}

.sc-body strong {
  color: #fff;
}

.sc-timeline {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.sc-time {
  flex-shrink: 0;
  width: 80px;
  font-size: 14px;
  font-weight: 800;
  color: var(--red);
  padding-top: 2px;
}

.sc-event {
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.65;
}

.sc-event strong {
  color: #fff;
}

.sc-divider {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 20px 0;
}

.sc-outcome {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.7;
  font-style: italic;
}

.sc-outcome strong {
  color: var(--teal);
  font-style: normal;
}

/* Testimonials / Outcomes on sector pages */
.testi {
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 16px;
  padding: 28px;
  text-align: left;
}

.testi .tq {
    font-size: 13px;
    line-height: 1.75;
    font-style: italic;
    color: var(--body);
    margin-bottom: 14px;
}

.testi .tn {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
}

.testi .tr {
    font-size: 11px;
    color: var(--muted);
}

.testi:hover {
  border-color: var(--teal);
}

.testi-q {
  font-size: 15px;
  font-style: italic;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 14px;
}

.testi-a {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.testi-r {
  font-size: 14px;
  color: var(--muted);
}

.stars {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}

.stars span {
  color: var(--teal);
  font-size: 14px;
}

.toutcome {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-lt);
}

.toutcome span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  padding: 4px 10px;
  border-radius: 20px;
}

/* Forms for booking / contact pages */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  text-align: left;
}

.form-group label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  transition: border-color .2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

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

/* ── Inner Page Hero Split Screen (Desktop) ───────────────────────────── */
@media(min-width: 901px) {
  .hero:not(#hero) {
    position: relative;
    overflow: hidden !important;
    background: var(--cream) !important;
  }

  .hero:not(#hero) .wrap {
    position: relative;
    z-index: 2;
  }

  .hero:not(#hero) .ibox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    border-radius: 0;
    margin: 0;
    z-index: 1;
  }

  .hero:not(#hero) .ibox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero:not(#hero) .ibox::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--cream) 0%, rgba(245, 239, 232, 0) 30%, rgba(26, 122, 94, 0.6) 100%);
    pointer-events: none;
  }
}

/* Fix for inner page heroes sharing .hero class with the homepage carousel */
.hero:not(#hero) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--cream) !important;
  padding: 80px 0;
}


/* 13. Responsive Breakpoints overrides */
@media(max-width:900px) {

  /* Mobile Hero Banner layout fix: Image on top */
  .hero .g2,
  .hero-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
  }

  .g2,
  .g2s,
  .cta2,
  .ftg,
  .intro-i,
  .fears-top,
  .svc-hd,
  .cta-2,
  .ji,
  .sec-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .g3,
  .g2g,
  .secgrid,
  .tgrid,
  .fgrid,
  .form-row,
  .sgrid-cards {
    grid-template-columns: 1fr;
  }

  .sg {
    grid-template-columns: repeat(2, 1fr);
  }

  .sb:nth-child(2) {
    border-right: none;
  }

  .sb:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-right: 1px solid rgba(255, 255, 255, .1);
  }

  .sb:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .nav-links {
    display: none;
  }

  .wrap,
  .w {
    padding: 0 20px;
  }

  /* hero carousel responsive rules are in section 11 */
}

/* ── NEW HOME PAGE STYLES ────────────────────────────────── */
:root {
  --cream: #f5efe8;
  --teal: #1a7a5e;
  --teal-dk: #155f49;
  --teal-lt: #e8f5f1;
  --teal-mid: #c8e8de;
  --ink: #0d1117;
  --ink-mid: #1e2a35;
  --body: #3d4a56;
  --muted: #6b7a8a;
  --border: #ddd6cc;
  --border-lt: #e8e2da;
  --white: #fff;
  --red: #c0392b;
  --red-lt: #fdf0ee;
  --amber: #b86e1a;
  --amber-lt: #fef4e8;
}

/* STATS BAR */
.sbar {
  background: var(--ink);
  padding: 32px 0
}

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

.sb {
  text-align: center;
  padding: 8px 16px;
  border-right: 1px solid rgba(255, 255, 255, .1)
}

.sb:last-child {
  border-right: none
}

.sn {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--teal);
  margin-bottom: 6px
}

.sl {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.5
}

/* PROBLEM */
.problem {
  padding: 80px 0;
  background: var(--white)
}

.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center
}

.stag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px
}

.sh2 {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 16px
}

.sh2 em {
  font-style: normal;
  color: var(--teal)
}

.ssub {
  font-size: 16px;
  color: var(--body);
  line-height: 1.8
}

.fear-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px
}

.fear-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color .2s
}

.fear-item:hover {
  border-color: var(--teal)
}

.fear-emoji {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px
}

.fear-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px
}

.fear-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.65
}

/* SERVICES */
.services {
  padding: 80px 0;
  background: var(--cream)
}

.svc-header {
  text-align: center;
  margin-bottom: 52px
}

.svc-header .ssub {
  margin: 0 auto
}

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

.svc-card {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  display: block
}

.svc-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26, 122, 94, .1)
}

.svc-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--teal-lt);
  border: 1px solid var(--teal-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 18px
}

.svc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px
}

.bs {
  background: var(--teal-lt);
  color: var(--teal)
}

.bp {
  background: var(--amber-lt);
  color: var(--amber)
}

.br {
  background: #eef2ff;
  color: #4f46e5
}

.bpr {
  background: var(--red-lt);
  color: var(--red)
}

.svc-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 10px
}

.svc-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.7;
  margin-bottom: 16px
}

.svc-lnk {
  font-size: 13px;
  font-weight: 700;
  color: var(--teal)
}

/* TESTIMONIALS */
.testis {
  padding: 80px 0;
  background: var(--ink)
}

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

.tc {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 28px
}

.tstars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px
}

.tstars span {
  color: var(--teal);
  font-size: 13px
}

.tq {
  font-size: 14px;
  line-height: 1.75;
  font-style: italic;
  color: rgba(255, 255, 255, .65);
  margin-bottom: 18px
}

.ta {
  display: flex;
  align-items: center;
  gap: 12px
}

.tav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0
}

.tn {
  font-size: 13px;
  font-weight: 800;
  color: #fff
}

.tr {
  font-size: 11px;
  color: rgba(255, 255, 255, .42)
}

/* HOW IT WORKS — HORIZONTAL FLOW */
.flow-section {
  padding: 80px 0;
  background: var(--white)
}

.flow-head {
  text-align: center;
  margin-bottom: 52px
}

.flow-head .stag {
  display: block;
  margin-bottom: 14px
}

.flow-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
  margin-bottom: 12px
}

.flow-title em {
  font-style: normal;
  color: var(--teal)
}

.flow-sub {
  font-size: 15px;
  color: var(--body);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.7
}

.flow-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative
}

.flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 12px
}

.flow-connector {
  position: absolute;
  top: 22px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: linear-gradient(90deg, var(--teal-mid), var(--teal));
  opacity: .4;
  z-index: 0
}

.flow-step:last-child .flow-connector {
  display: none
}

.flow-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  transition: all .3s
}

.fn-active {
  background: var(--teal);
  color: #fff;
  border: 2px solid var(--teal);
  box-shadow: 0 4px 16px rgba(26, 122, 94, .3)
}

.fn-default {
  background: var(--teal-lt);
  color: var(--teal);
  border: 2px solid var(--teal-mid)
}

.flow-step:hover .fn-default {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal)
}

.flow-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center
}

.flow-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 160px
}

.flow-footer {
  margin-top: 48px;
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--border-lt);
  border-radius: 14px;
  padding: 20px 32px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto
}

.flow-footer-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px
}

.flow-footer-sub {
  font-size: 12px;
  color: var(--muted)
}

/* SECTORS — card grid */
.sectors {
  padding: 80px 0;
  background: var(--cream)
}

.sec-header {
  text-align: center;
  margin-bottom: 48px
}

.sec-header .ssub {
  margin: 8px auto 0;
  max-width: 520px
}

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

.sec-card {
  background: var(--white);
  border: 1px solid var(--border-lt);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  transition: all .25s;
  text-decoration: none;
  color: inherit
}

.sec-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26, 122, 94, .08)
}

.sec-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0
}

.si-legal {
  background: #eef2ff
}

.si-health {
  background: #fce8e8
}

.si-acc {
  background: var(--teal-lt)
}

.si-fin {
  background: var(--amber-lt)
}

.si-rec {
  background: #f3e8ff
}

.si-ecom {
  background: #e8f4fd
}

.sec-info {
  flex: 1
}

.sec-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px
}

.sec-risk {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px
}

.sr-crit {
  background: var(--red-lt);
  color: var(--red)
}

.sr-high {
  background: var(--amber-lt);
  color: var(--amber)
}

.sec-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 12px
}

.sec-arrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s
}

.sec-card:hover .sec-arrow {
  gap: 8px
}

/* CTA */
.cta-simple {
  padding: 88px 0;
  background: var(--white)
}

.cta-simple-inner {
  text-align: center;
  max-width: 620px;
  margin: 0 auto
}

.cta-simple-inner .sh2 {
  margin-bottom: 18px
}

.cta-simple-inner .ssub {
  margin: 0 auto 36px;
  text-align: center;
  max-width: 500px
}

.cta-feats {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 36px
}

.cta-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--body)
}

.cta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0
}

/* RESPONSIVE */
@media(max-width:960px) {
  .prob-grid {
    grid-template-columns: 1fr
  }

  .svc-grid {
    grid-template-columns: 1fr 1fr
  }

  .tgrid {
    grid-template-columns: 1fr
  }

  .flow-track {
    flex-direction: column;
    align-items: stretch;
    gap: 20px
  }

  .flow-step {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    padding: 0
  }

  .flow-connector {
    display: none
  }

  .flow-num {
    margin-bottom: 0;
    flex-shrink: 0
  }

  .flow-label {
    min-height: auto;
    justify-content: flex-start
  }

  .flow-desc {
    max-width: none
  }

  .sec-grid {
    grid-template-columns: 1fr 1fr
  }

  .sg {
    grid-template-columns: repeat(2, 1fr)
  }

  .sb:nth-child(2) {
    border-right: none
  }

  .sb:nth-child(3) {
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-right: 1px solid rgba(255, 255, 255, .1)
  }

  .sb:nth-child(4) {
    border-top: 1px solid rgba(255, 255, 255, .1)
  }

  .hero-bg,
  .hero-ov {
    display: none
  }
}

@media(max-width:600px) {

  .svc-grid,
  .sec-grid {
    grid-template-columns: 1fr
  }
}


/* ==========================================================================
   16. HACKED / INCIDENT RESPONSE PAGE  (.pg-hacked)
   ========================================================================== */

@keyframes hk-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Urgency strip */
.pg-hacked .urgency-strip {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pg-hacked .urgency-strip .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #fca5a5;
  animation: hk-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.pg-hacked .urgency-strip a { text-decoration: underline; font-weight: 800; color: #6ee7c7; }

/* Breadcrumb */
.hk-bc { background: var(--cream-dk); border-bottom: 1px solid var(--border); padding: 12px 0; }
.hk-bc-i { max-width: 1140px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hk-bc-i a { color: var(--teal); font-weight: 500; }
.hk-bc-i span { color: var(--border); }

/* Hero — unique class to avoid conflict with homepage carousel .hero */
.hk-hero {
  background: var(--navy);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.hk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 40%, rgba(192,57,43,.18) 0%, transparent 60%);
}
.hk-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hk-hero-i {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
}
.hk-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(192,57,43,.18);
  border: 1px solid rgba(192,57,43,.4);
  color: #fca5a5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 6px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hk-hero-tag .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fca5a5;
  animation: hk-pulse 1.6s ease-in-out infinite;
}
.hk-hero h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 18px;
}
.hk-hero h1 em { font-style: normal; color: #fca5a5; }
.hk-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 540px;
}
.hk-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Incident-specific buttons */
.btn-incident-primary {
  background: var(--red);
  color: #fff;
  padding: 14px 26px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  transition: all .2s;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-incident-primary:hover { background: var(--red-dk); transform: translateY(-1px); }
.btn-incident-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 14px 26px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  transition: all .2s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-incident-outline:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }

/* Hero side card */
.hk-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 26px;
}
.hk-card-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hk-card-title .pulse { width: 8px; height: 8px; border-radius: 50%; background: #fca5a5; animation: hk-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.hk-card-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.hk-card-item:last-child { border-bottom: none; }
.hk-card-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(192,57,43,.25);
  color: #fca5a5;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.hk-card-text { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; }
.hk-card-text strong { color: #fff; }

/* Section helpers */
.pg-hacked .hk-section { padding: 80px 0; }
.pg-hacked .hk-section-alt { background: var(--white); }
.pg-hacked .hk-section-cream { background: var(--cream-dk); }
.pg-hacked .hk-stag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-lt);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 14px;
  border-radius: 100px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pg-hacked .hk-stag.urgent { background: var(--red-lt); color: var(--red); }
.pg-hacked .hk-sh {
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
}
.pg-hacked .hk-sh em { font-style: normal; color: var(--teal); }
.pg-hacked .hk-sub { font-size: 16px; color: var(--muted); line-height: 1.7; max-width: 620px; }
.pg-hacked .hk-hdr { margin-bottom: 48px; }
.pg-hacked .hk-hdr.center { text-align: center; }
.pg-hacked .hk-hdr.center .hk-sub { margin: 0 auto; }

/* Do / Don't checklist */
.pg-hacked .checklist { display: flex; flex-direction: column; gap: 0; }
.pg-hacked .cl-item { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 0 0 36px; position: relative; }
.pg-hacked .cl-item:last-child { padding-bottom: 0; }
.pg-hacked .cl-item::before { content: ''; position: absolute; left: 25px; top: 56px; bottom: 0; width: 2px; background: var(--border); }
.pg-hacked .cl-item:last-child::before { display: none; }
.pg-hacked .cl-badge { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0; z-index: 1; border: 3px solid var(--cream); }
.pg-hacked .cl-badge.dont { background: var(--red-lt); color: var(--red); box-shadow: 0 0 0 3px var(--red); }
.pg-hacked .cl-badge.do { background: var(--teal-lt); color: var(--teal); box-shadow: 0 0 0 3px var(--teal); }
.pg-hacked .cl-body h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 6px; margin-top: 10px; }
.pg-hacked .cl-body .cl-flag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 5px; margin-left: 10px; vertical-align: middle; }
.pg-hacked .cl-flag.dont { background: var(--red-lt); color: var(--red); }
.pg-hacked .cl-flag.do { background: var(--teal-lt); color: var(--teal); }
.pg-hacked .cl-body p { font-size: 15px; color: var(--muted); line-height: 1.7; }

/* Signs grid */
.pg-hacked .signs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pg-hacked .sign-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 12px; padding: 22px; transition: all .2s; }
.pg-hacked .sign-card:hover { border-color: var(--red-border); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.pg-hacked .sign-icon { font-size: 24px; margin-bottom: 10px; }
.pg-hacked .sign-card h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pg-hacked .sign-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* Process timeline */
.pg-hacked .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.pg-hacked .process-grid::before { content: ''; position: absolute; top: 30px; left: 12.5%; width: 75%; height: 2px; background: repeating-linear-gradient(90deg, var(--teal) 0, var(--teal) 8px, transparent 8px, transparent 16px); z-index: 0; }
.pg-hacked .proc-step { position: relative; z-index: 1; text-align: center; padding: 0 16px; }
.pg-hacked .proc-num { width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; border: 3px solid var(--white); }
.pg-hacked .proc-step h3 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.pg-hacked .proc-step p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.pg-hacked .proc-time { font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }

/* After-the-dust section */
.pg-hacked .after-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pg-hacked .after-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.pg-hacked .after-card.featured { border-color: var(--teal); background: var(--teal-lt); }
.pg-hacked .after-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cream-dk); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.pg-hacked .after-card.featured .after-icon { background: rgba(26,122,94,.15); }
.pg-hacked .after-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.pg-hacked .after-card p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 18px; flex: 1; }
.pg-hacked .after-price { font-size: 13px; font-weight: 700; color: var(--teal); margin-bottom: 14px; }
.pg-hacked .after-link { font-size: 14px; font-weight: 700; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s; }
.pg-hacked .after-link:hover { gap: 10px; color: var(--teal); }

/* FAQ accordion */
.pg-hacked .faq-list { display: flex; flex-direction: column; }
.pg-hacked .faq-item { border-bottom: 1px solid var(--border-lt); }
.pg-hacked .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; text-align: left; gap: 12px; }
.pg-hacked .faq-q-text { font-size: 15px; font-weight: 700; color: var(--navy); }
.pg-hacked .faq-icon { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-lt); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform .2s; font-size: 18px; color: var(--teal); font-weight: 300; line-height: 1; }
.pg-hacked .faq-item.open .faq-icon { transform: rotate(45deg); }
.pg-hacked .faq-a { display: none; padding: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.pg-hacked .faq-item.open .faq-a { display: block; }

/* CTA band */
.pg-hacked .cta-band { background: var(--navy); padding: 80px 0; position: relative; overflow: hidden; }
.pg-hacked .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 50%, rgba(192,57,43,.15) 0%, transparent 60%); }
.pg-hacked .cta-i { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: center; }
.pg-hacked .cta-h { font-size: 38px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 14px; }
.pg-hacked .cta-h em { font-style: normal; color: #fca5a5; }
.pg-hacked .cta-sub { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; }
.pg-hacked .cta-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 28px; }
.pg-hacked .cta-card-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.pg-hacked .cta-emergency { background: rgba(192,57,43,.12); border: 1px solid rgba(192,57,43,.3); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.pg-hacked .cta-emergency-label { font-size: 11px; font-weight: 700; color: #fca5a5; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.pg-hacked .cta-emergency-val { font-size: 18px; font-weight: 800; color: #fff; }
.pg-hacked .cta-emergency-note { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 4px; }
.pg-hacked .cta-book { width: 100%; padding: 14px; border-radius: 10px; background: var(--red); color: #fff; border: none; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; display: block; text-align: center; margin-bottom: 10px; }
.pg-hacked .cta-book:hover { background: var(--red-dk); }
.pg-hacked .cta-book-alt { width: 100%; padding: 14px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s; display: block; text-align: center; }
.pg-hacked .cta-book-alt:hover { background: rgba(255,255,255,.1); }
.pg-hacked .cta-note { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; margin-top: 10px; }

/* Scroll reveal */
.pg-hacked .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }
.pg-hacked .reveal.visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 980px) {
  .hk-hero-i { grid-template-columns: 1fr; }
  .pg-hacked .signs-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-hacked .process-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-hacked .process-grid::before { display: none; }
  .pg-hacked .after-grid { grid-template-columns: 1fr; }
  .pg-hacked .cta-i { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pg-hacked .signs-grid { grid-template-columns: 1fr; }
  .pg-hacked .process-grid { grid-template-columns: 1fr; }
  .hk-hero h1 { font-size: 32px; }
}

/* ==========================================================================
   Pricing Page
   ========================================================================== */

.pg-pricing .breadcrumb{background:var(--cream-dk);border-bottom:1px solid var(--border);padding:12px 0}
.pg-pricing .breadcrumb-i{max-width:1140px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pg-pricing .breadcrumb-i a{color:var(--teal);font-weight:500}
.pg-pricing .breadcrumb-i span{color:var(--border)}


.pg-pricing .page-hero{background:var(--navy);padding:72px 0 64px;position:relative;overflow:hidden}
.pg-pricing .page-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(26,122,94,.15) 0%,transparent 60%);
}
.pg-pricing .page-hero::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
}
.pg-pricing .page-hero-i{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 40px;text-align:center}
.pg-pricing .page-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(26,122,94,.2);border:1px solid rgba(26,122,94,.4);color:#6ee7c7;font-size:12px;font-weight:700;letter-spacing:.08em;padding:5px 14px;border-radius:100px;text-transform:uppercase;margin-bottom:20px}
.pg-pricing .page-hero h1{font-size:48px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px}
.pg-pricing .page-hero h1 em{font-style:normal;background:linear-gradient(90deg,#6ee7c7,#1a7a5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pg-pricing .page-hero p{font-size:18px;color:rgba(255,255,255,.65);max-width:580px;margin:0 auto 32px;line-height:1.7}
.pg-pricing .hero-toggle{display:inline-flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:4px;gap:4px}
.pg-pricing .toggle-opt{padding:8px 20px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.6);border:none;background:none}
.pg-pricing .toggle-opt.active{background:var(--teal);color:#fff}


.pg-pricing .section{padding:80px 0}
.pg-pricing .section-alt{background:var(--white)}
.pg-pricing .section-cream{background:var(--cream-dk)}
.pg-pricing .section-dark{background:var(--navy);color:#fff}
.pg-pricing .section-tag{display:inline-flex;align-items:center;gap:6px;background:var(--teal-lt);color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.06em;padding:5px 14px;border-radius:100px;text-transform:uppercase;margin-bottom:14px}
.pg-pricing .section-dark .section-tag{background:rgba(26,122,94,.2);color:#6ee7c7}
.pg-pricing .sh{font-size:36px;font-weight:800;color:var(--navy);line-height:1.2;margin-bottom:14px}
.pg-pricing .section-dark .sh{color:#fff}
.pg-pricing .ssub{font-size:16px;color:var(--muted);line-height:1.7;max-width:560px}
.pg-pricing .section-dark .ssub{color:rgba(255,255,255,.6)}
.pg-pricing .hdr{margin-bottom:52px}
.pg-pricing .hdr.center{text-align:center}.pg-pricing .hdr.center .ssub{margin:0 auto}


.pg-pricing .tiers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1.5px solid var(--border);border-radius:16px;overflow:hidden;background:var(--white)}
.pg-pricing .tier{padding:28px 22px 24px;border-right:1px solid var(--border);position:relative;transition:all .2s;display:flex;flex-direction:column}
.pg-pricing .tier:last-child{border-right:none}
.pg-pricing .tier:hover{background:var(--teal-lt)}
.pg-pricing .tier.featured{background:var(--navy);color:#fff}
.pg-pricing .tier.featured:hover{background:var(--navy-mid)}
.pg-pricing .tier-new{position:absolute;top:0;left:0;right:0;background:var(--teal);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-align:center;padding:5px;text-transform:uppercase}
.pg-pricing .tier-num{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;margin-top:4px}
.pg-pricing .tier.featured .tier-num{color:rgba(255,255,255,.45)}
.pg-pricing .tier h3{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:4px;line-height:1.2}
.pg-pricing .tier.featured h3{color:#fff}
.pg-pricing .tier-type{font-size:12px;color:var(--muted);margin-bottom:16px;font-weight:500}
.pg-pricing .tier.featured .tier-type{color:rgba(255,255,255,.5)}
.pg-pricing .tier-price{font-size:28px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:3px}
.pg-pricing .tier.featured .tier-price{color:#fff}
.pg-pricing .tier-price span{font-size:14px;font-weight:400;color:var(--muted)}
.pg-pricing .tier.featured .tier-price span{color:rgba(255,255,255,.45)}
.pg-pricing .tier-freq{font-size:12px;color:var(--muted);margin-bottom:6px}
.pg-pricing .tier.featured .tier-freq{color:rgba(255,255,255,.4)}
.pg-pricing .tier-bundled{font-size:11px;font-weight:600;background:var(--teal-lt);color:var(--teal);padding:3px 8px;border-radius:5px;display:inline-block;margin-bottom:16px}
.pg-pricing .tier.featured .tier-bundled{background:rgba(26,122,94,.25);color:#6ee7c7}
.pg-pricing .tier-divider{height:1px;background:var(--border-lt);margin:0 0 14px}
.pg-pricing .tier.featured .tier-divider{background:rgba(255,255,255,.1)}
.pg-pricing .tier-features{list-style:none;display:flex;flex-direction:column;gap:7px;flex:1;margin-bottom:18px}
.pg-pricing .tier-features li{font-size:12px;color:var(--body-c);line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.pg-pricing .tier.featured .tier-features li{color:rgba(255,255,255,.7)}
.pg-pricing .ck{width:15px;height:15px;border-radius:50%;background:var(--teal-lt);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pg-pricing .ck svg{width:8px;height:8px;stroke:var(--teal);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pg-pricing .tier.featured .ck{background:rgba(26,122,94,.3)}
.pg-pricing .tier.featured .ck svg{stroke:#6ee7c7}
.pg-pricing .tier-cta{width:100%;padding:10px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .2s;background:var(--cream-dk);color:var(--navy);margin-top:auto}
.pg-pricing .tier-cta:hover{background:var(--teal);color:#fff}
.pg-pricing .tier.featured .tier-cta{background:var(--teal);color:#fff}
.pg-pricing .tier.featured .tier-cta:hover{background:#1a9e78}


.pg-pricing .size-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.pg-pricing .size-table th{background:var(--navy);color:#fff;padding:14px 20px;font-size:13px;font-weight:700;text-align:left;letter-spacing:.03em}
.pg-pricing .size-table th:not(:first-child){text-align:center}
.pg-pricing .size-table td{padding:14px 20px;font-size:14px;color:var(--body-c);border-bottom:1px solid var(--border-lt);background:var(--white);vertical-align:middle}
.pg-pricing .size-table tr:last-child td{border-bottom:none}
.pg-pricing .size-table td:not(:first-child){text-align:center;font-weight:600}
.pg-pricing .size-table td:first-child{font-weight:500;color:var(--ink)}
.pg-pricing .size-table tr:hover td{background:var(--cream)}
.pg-pricing .size-table .featured-col{background:rgba(26,122,94,.04)!important}
.pg-pricing .pop-badge{background:var(--teal);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;letter-spacing:.04em}
.pg-pricing .price-cell{color:var(--navy)!important;font-size:16px!important}
.pg-pricing .bundled-cell{font-size:12px!important;color:var(--teal)!important}


.pg-pricing .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pg-pricing .value-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:28px;transition:all .2s}
.pg-pricing .value-card:hover{border-color:var(--teal-mid);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.pg-pricing .value-card.highlight{border-color:var(--teal);background:var(--teal-lt)}
.pg-pricing .vc-icon{font-size:28px;margin-bottom:14px}
.pg-pricing .vc-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.pg-pricing .vc-num{font-size:36px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:8px}
.pg-pricing .vc-num.teal{color:var(--teal)}
.pg-pricing .vc-desc{font-size:14px;color:var(--muted);line-height:1.6}


.pg-pricing .incl-table{width:100%;border-collapse:collapse}
.pg-pricing .incl-table th{padding:12px 16px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--border);text-align:left}
.pg-pricing .incl-table th:not(:first-child){text-align:center}
.pg-pricing .incl-table td{padding:13px 16px;font-size:13px;color:var(--body-c);border-bottom:1px solid var(--border-lt)}
.pg-pricing .incl-table td:not(:first-child){text-align:center}
.pg-pricing .incl-table tr:last-child td{border-bottom:none}
.pg-pricing .incl-table td:first-child{font-weight:500;color:var(--ink)}
.pg-pricing .incl-table tr:hover td{background:var(--cream)}
.pg-pricing .incl-table .th-soc{background:rgba(26,122,94,.06);color:var(--teal)!important;border-bottom:2px solid var(--teal)!important}
.pg-pricing .incl-table .td-soc{background:rgba(26,122,94,.03)}
.pg-pricing .c-yes{color:#16a34a;font-size:16px}
.pg-pricing .c-no{color:#dc2626;font-size:16px}
.pg-pricing .c-part{color:var(--amber);font-size:13px;font-weight:600}


.pg-pricing .journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pg-pricing .journey-steps{display:flex;flex-direction:column;gap:0}
.pg-pricing .js{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:0 0 32px;position:relative}
.pg-pricing .js:last-child{padding-bottom:0}
.pg-pricing .js::before{content:'';position:absolute;left:20px;top:48px;bottom:0;width:2px;background:var(--border)}
.pg-pricing .js:last-child::before{display:none}
.pg-pricing .js-num{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.pg-pricing .js-num.new{background:var(--navy);box-shadow:0 0 0 3px var(--teal)}
.pg-pricing .js-body h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px;margin-top:10px}
.pg-pricing .js-body p{font-size:14px;color:var(--muted);line-height:1.6}
.pg-pricing .js-body .jtag{display:inline-block;background:var(--teal-lt);color:var(--teal);font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;margin-top:8px}
.pg-pricing .js-body .jtag.new{background:var(--navy);color:#6ee7c7}


.pg-pricing .faq-list{display:flex;flex-direction:column}
.pg-pricing .faq-item{border-bottom:1px solid var(--border-lt)}
.pg-pricing .faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;text-align:left;gap:12px}
.pg-pricing .faq-q-text{font-size:15px;font-weight:700;color:var(--navy)}
.pg-pricing .faq-icon{width:26px;height:26px;border-radius:50%;background:var(--teal-lt);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .2s;font-size:18px;color:var(--teal);font-weight:300;line-height:1}
.pg-pricing .faq-item.open .faq-icon{transform:rotate(45deg)}
.pg-pricing .faq-a{display:none;padding:0 0 20px;font-size:14px;color:var(--muted);line-height:1.7}
.pg-pricing .faq-item.open .faq-a{display:block}


.pg-pricing .cta-band{background:var(--navy);padding:80px 0;position:relative;overflow:hidden}
.pg-pricing .cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 25% 50%,rgba(26,122,94,.15) 0%,transparent 60%)}
.pg-pricing .cta-i{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 380px;gap:64px;align-items:center}
.pg-pricing .cta-h{font-size:38px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:14px}
.pg-pricing .cta-h em{font-style:normal;color:#6ee7c7}
.pg-pricing .cta-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.7}
.pg-pricing .cta-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px}
.pg-pricing .cta-card-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.pg-pricing .cta-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.pg-pricing .cta-opt{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.pg-pricing .cta-opt-name{font-size:13px;font-weight:600;color:#fff}
.pg-pricing .cta-opt-price{font-size:15px;font-weight:800;color:#6ee7c7}
.pg-pricing .cta-opt-sub{font-size:11px;color:rgba(255,255,255,.35);margin-top:1px}
.pg-pricing .cta-book{width:100%;padding:14px;border-radius:10px;background:var(--teal);color:#fff;border:none;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;display:block;text-align:center}
.pg-pricing .cta-book:hover{background:var(--teal-dk)}
.pg-pricing .cta-note{font-size:12px;color:rgba(255,255,255,.3);text-align:center;margin-top:10px}




.pg-pricing .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.pg-pricing .reveal.visible{opacity:1;transform:none}




@media(max-width:1000px){.pg-pricing .tiers-grid{grid-template-columns:1fr 1fr;border-radius:12px}.pg-pricing .tier{border-right:none;border-bottom:1px solid var(--border)}.pg-pricing .tier:last-child{border-bottom:none}}
@media(max-width:760px){.pg-pricing .tiers-grid{grid-template-columns:1fr}.pg-pricing .value-grid{grid-template-columns:1fr}.pg-pricing .journey-grid{grid-template-columns:1fr}.pg-pricing .cta-i{grid-template-columns:1fr}.pg-pricing .page-hero h1{font-size:32px}}

.chks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.chk2 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.chk2 p {
	margin: 0;
}

.ckd {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(26, 122, 94, .25);
    border: 1px solid #7dd3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #7dd3b8;
    font-weight: 900;
    flex-shrink: 0;
}