:root {
      --navy: #172b4d;
      --deep: #10233f;
      --blue: #2463a8;
      --blue2: #3684d6;
      --pale: #edf5fc;
      --pale2: #f5f9fd;
      --ink: #182b49;
      --muted: #5c6d84;
      --line: #dce5ef;
      --white: #fff;
      --accent: #e66c52;
      --teal: #42a7a0;
      --shadow: 0 10px 30px rgba(22, 43, 77, .09);
      --radius: 16px;
    }

 /* Header */
    header {
      height: 72px;
      background: #ffffffed;
      backdrop-filter: blur(12px);
      border-bottom: 1px solid #e8eef5;
      position: sticky;
      top: 0;
      z-index: 20
    }

    .nav {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 190px
    }

    .brand-mark {
      width: 33px;
      height: 36px;
      display: grid;
      place-items: center;
      color: white;
      background: var(--blue);
      border-radius: 10px 10px 10px 3px;
      font-weight: 700;
      font-size: 21px;
      position: relative
    }

    .brand-mark:after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      right: -3px;
      top: -2px;
      border: 2px solid white
    }

    .brand-name {
      font-size: 19px;
      font-weight: 850;
      letter-spacing: -.8px;
      color: var(--navy);
      line-height: 1.1
    }

    .brand-tag {
      font-size: 9px;
      color: var(--muted);
      margin-top: 3px
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 12px;
      font-weight: 700;
      color: #40536c
    }

    .nav-links a {
      padding: 26px 0;
      position: relative
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--blue)
    }

    .nav-links a.active:after {
      content: "";
      height: 3px;
      width: 22px;
      background: var(--blue);
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 4px
    }

    .nav-cta {
      white-space: nowrap
    }

    .menu-toggle {
      display: none;
      background: white;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px 11px;
      color: var(--navy);
      cursor: pointer
    }







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

    button,
    input {
      font: inherit
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent
    }

    .container {
      width: min(1120px, calc(100% - 44px));
      margin: auto
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 12px 20px;
      font-weight: 750;
      font-size: 13px;
      cursor: pointer;
      transition: .2s ease
    }

    .btn-primary {
      background: var(--blue);
      color: #fff;
      box-shadow: 0 6px 15px #2463a826;
	  font-weight: 500;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    }

    .btn-primary:hover {
      background: var(--deep);
		color:#fff;
      transform: translateY(-1px)
    }

    .btn-outline {
      background: #fff !important;
	  margin-left:10px;
      color: var(--navy);
      border-color: #9eb2c9;
	  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    }

    .btn-outline:hover {
      border-color: var(--blue);
      color: var(--blue)
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      background: #e2effc;
      color: var(--blue);
      padding: 6px 13px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .15px
    }

    .section-title {
      text-align: center;
      margin: 0 auto 12px;
      font-size: clamp(26px, 3vw, 36px);
      line-height: 1.14;
      letter-spacing: -1.1px;
      color: var(--navy)
    }

    .section-subtitle {
      text-align: center;
      color: var(--muted);
      font-size: 14px;
      max-width: 620px;
      margin: 0 auto 34px
    }

    .accent {
      color: var(--blue)
    }
p,
span,
strong,
div{
	    font-family: var(--e-global-typography-primary-font-family), Sans-serif !important;
}
/* Hero */
    .hero {
      background: linear-gradient(110deg, #edf5fc 0%, #f7fbff 55%, #e5f0fa 100%);
      overflow: hidden
    }

    .hero-grid {
      min-height: 510px;
      display: grid;
      grid-template-columns: 1fr 1.05fr;
      align-items: center;
      gap: 30px;
      padding-top: 35px;
      padding-bottom: 28px
    }

    .hero-copy {
      position: relative;
      z-index: 2
    }

    .hero h1 {
      font-size: clamp(35px, 4.1vw, 50px);
      line-height: 1.04;
      letter-spacing: -1.9px;
      color: var(--navy);
      margin: 17px 0 15px;
      max-width: 570px
    }

    .hero h1 span {
      color: var(--blue)
    }

    .hero-copy>p {
      max-width: 485px;
      color: #4d607a;
      font-size: 14px;
      margin: 0 0 22px
    }

    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 22px 0 20px
    }

    .hero-points {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      color: #40536c;
      font-size: 10px;
      font-weight: 750
    }

    .hero-points span:before {
      content: "✓";
      color: var(--teal);
      font-size: 14px;
      margin-right: 5px
    }

    .hero-visual {
      height: 390px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .visual-glow {
      position: absolute;
      width: 92%;
      height: 82%;
      background: linear-gradient(135deg, #d7e9fa, #fff 60%, #c8e4f0);
      border-radius: 48% 42% 35% 45%;
      transform: rotate(-5deg)
    }

    .plant {
      position: absolute;
      right: 4%;
      top: 3%;
      font-size: 64px;
      filter: drop-shadow(0 8px 5px #193d2a1c);
      opacity: .75
    }

    .laptop {
      position: relative;
      width: min(100%, 490px);
      z-index: 2;
      transform: rotate(-2deg);
      filter: drop-shadow(0 18px 16px #162b4d20)
    }

    .screen {
      background: #fff;
      border: 8px solid #18212c;
      border-bottom-width: 11px;
      border-radius: 15px 15px 7px 7px;
      padding: 18px 18px 15px;
      min-height: 255px;
      box-shadow: inset 0 0 0 1px #cdd7e2
    }

    .screen-top {
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid #e7edf3;
      padding-bottom: 12px;
      font-size: 11px;
      font-weight: 800;
      color: var(--navy)
    }

    .tiny-logo {
      width: 15px;
      height: 17px;
      background: var(--blue);
      border-radius: 4px;
      color: white;
      display: grid;
      place-items: center;
      font-size: 10px
    }

    .screen-body {
      display: grid;
      grid-template-columns: 110px 1fr;
      gap: 17px;
      padding-top: 14px
    }

    .screen-menu {
      display: grid;
      gap: 9px;
      align-content: start
    }

    .screen-menu span {
      font-size: 9px;
      color: #586b83;
      padding: 7px 5px;
      border-radius: 5px;
      background: #f4f7fa
    }

    .screen-menu span:first-child {
      background: #e7f1fb;
      color: var(--blue);
      font-weight: 800
    }

    .report-title {
      font-size: 10px;
      font-weight: 800;
      margin: 0 0 12px;
      color: #40536c
    }

    .report-line {
      height: 8px;
      border-radius: 4px;
      background: #dce6f0;
      margin: 7px 0;
      width: 90%
    }

    .report-line.red {
      background: #ef8c8c;
      width: 78%
    }

    .report-line.orange {
      background: #f6bf61;
      width: 67%
    }

    .report-line.teal {
      background: #6cc6b3;
      width: 55%
    }

    .report-line.blue {
      background: #70a9e9;
      width: 85%
    }

    .laptop-base {
      height: 15px;
      background: linear-gradient(#c5ccd4, #7e8995);
      border-radius: 0 0 18px 18px;
      margin: 0 -13px;
      position: relative
    }

    .laptop-base:after {
      content: "";
      position: absolute;
      left: 39%;
      width: 22%;
      height: 5px;
      background: #89939e;
      border-radius: 0 0 8px 8px
    }

    .review-card {
      position: absolute;
      right: -1%;
      bottom: 15px;
      width: 195px;
      background: #fff;
      border: 1px solid #e0e8f0;
      border-radius: 13px;
      padding: 13px;
      z-index: 3;
      box-shadow: var(--shadow)
    }

    .review-card h4 {
      margin: 0 0 9px;
      font-size: 11px;
      color: var(--navy)
    }

    .review-item {
      display: flex;
      gap: 9px;
      padding: 8px 0;
      border-top: 1px solid #eef2f6
    }

    .review-icon {
      width: 28px;
      height: 28px;
      flex: none;
      border-radius: 8px;
      background: #e7f1fb;
      color: var(--blue);
      display: grid;
      place-items: center;
      font-size: 15px
    }

    .review-item strong {
      display: block;
      font-size: 9px
    }

    .review-item small {
      display: block;
      font-size: 8px;
      line-height: 1.35;
      color: var(--muted)
    }

    .trust-strip {
      background: #ffffffb8;
      border-top: 1px solid #e1edf7;
      padding: 17px 0 19px
    }

    .trust-title {
      text-align: center;
      font-size: 11px;
      font-weight: 850;
      color: var(--navy);
      margin-bottom: 12px
    }

    .trust-items {
      display: flex;
      justify-content: center;
      gap: clamp(15px, 3.4vw, 42px);
      flex-wrap: wrap;
      color: #4d6078;
      font-size: 11px
    }

    .trust-items span {
      display: flex;
      align-items: center;
      gap: 7px
    }

    .trust-items b {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #e4effb;
      color: var(--blue);
      font-size: 14px
    }

    /* Features */
    .features {
      padding: 72px 0 68px
    }

    .feature-grid {
      display: grid;
      grid-template-columns: 1.08fr 1fr;
      align-items: center;
      gap: 70px
    }

    .report-visual {
      min-height: 335px;
      position: relative;
      display: grid;
      place-items: center
    }

    .report-backdrop {
      position: absolute;
      inset: 9% 3% 8%;
      background: #d8eafb;
      border-radius: 30px;
      transform: rotate(8deg)
    }

    .report-backdrop:after {
      content: "";
      position: absolute;
      inset: 45% 5% -8% 5%;
      background: #d8f2ec;
      border-radius: 25px;
      transform: rotate(5deg);
      z-index: -1
    }

    .report-window {
      position: relative;
      z-index: 1;
      width: 90%;
      background: #fff;
      border: 7px solid #252b34;
      border-radius: 13px 13px 5px 5px;
      padding: 17px 17px 20px;
      box-shadow: var(--shadow)
    }

    .report-window-head {
      font-size: 15px;
      font-weight: 700;
      color: var(--blue);
      border-bottom: 1px solid #e8edf3;
      padding-bottom: 12px
    }

    .report-columns {
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 18px;
      padding-top: 15px
    }

    .report-columns h5 {
      margin: 0 0 10px;
      font-size: 10px;
      color: var(--navy)
    }

    .match {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 10px 0;
      font-size: 9px;
      color: #50637c
    }

    .match i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: var(--blue);
      display: inline-block
    }

    .match:nth-child(3) i {
      background: var(--accent)
    }

    .match:nth-child(4) i {
      background: #eab65d
    }

    .match:nth-child(5) i {
      background: var(--teal)
    }

    .feature-copy .eyebrow {
      margin-bottom: 14px
    }

    .feature-copy h2 {
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.1;
      letter-spacing: -1.2px;
      margin: 0 0 12px;
      color: var(--navy)
    }

    .feature-copy>p {
      font-size: 14px;
      color: var(--muted);
      margin: 0 0 22px
    }

    .feature-list {
      display: grid;
      gap: 13px
    }

    .feature-list li {
      list-style: none;
      display: flex;
      align-items: flex-start;
      gap: 12px
    }

    .feature-symbol {
      width: 34px;
      height: 34px;
      flex: none;
      display: grid;
      place-items: center;
/*       background: #e7f1fb; */
/*       color: var(--blue); */
/*       border-radius: 11px; */
/*       font-size: 16px */
    }

    .feature-list strong {
      display: block;
      font-size: 12px;
      color: var(--navy)
    }

    .feature-list small {
      display: block;
      font-size: 11px;
      color: var(--muted)
    }

    /* Pricing */
    .pricing {
      background: linear-gradient(130deg, #122742, #1b3b61);
      padding: 62px 0 68px;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .pricing:before,
    .pricing:after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border: 1px solid #ffffff10;
      border-radius: 45%;
      transform: rotate(35deg)
    }

    .pricing:before {
      left: -120px;
      top: 70px
    }

    .pricing:after {
      right: -120px;
      bottom: -70px
    }

    .pricing .section-title {
      color: #fff
    }

    .pricing .section-subtitle {
      color: #d4e1ef
    }

    .pricing .eyebrow {
      background: #e5f1fd
    }

    .price-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      position: relative;
      z-index: 1
    }

    .price-card {
      background: #fff;
      color: var(--navy);
      border: 1px solid #e2eaf3;
      border-radius: 14px;
      padding: 24px 22px 20px;
      position: relative;
      box-shadow: 0 12px 28px #07162a30
    }

    .price-card.popular {
      border: 2px solid #65b5df;
      transform: translateY(-7px)
    }

    .popular-tag {
      position: absolute;
      top: -13px;
      right: 16px;
      background: var(--blue);
      color: #fff;
      border-radius: 999px;
      padding: 5px 12px;
      font-size: 10px;
      font-weight: 800
    }

    .plan-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px
    }

    .plan-icon {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #e6f2fc;
      color: var(--blue);
      font-size: 22px
    }

    .price-card:nth-child(2) .plan-icon {
      background: #fff0e7;
      color: var(--accent)
    }

    .price-card:nth-child(3) .plan-icon {
      background: #e7eaf8;
      color: #6669b7
    }

    .plan-head h3 {
      font-size: 14px;
      margin: 0
    }

    .price {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: -1px;
      line-height: 1.1;
      margin: 7px 0 2px
    }

    .price small {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--muted)
    }

    .price-card ul {
      padding: 0;
      margin: 20px 0 22px;
      display: grid;
      gap: 9px;
      list-style: none;
      font-size: 12px;
      color: #50627a
    }

    .price-card li:before {
      content: "✓";
      font-weight: 700;
      color: var(--teal);
      margin-right: 8px
    }

    .price-card .btn {
      width: 100%;
      border-radius: 9px
    }

    .price-card .btn-outline {
      border-color: #9db1c7
    }

    .price-note {
      text-align: center;
      color: #c8d7e8;
      font-size: 11px;
      margin: 21px 0 0
    }

    /* How it works */
    .process {
      padding: 68px 0 62px
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
      text-align: center
    }

    .step {
      position: relative;
      padding: 5px 8px
    }

    .step:not(:last-child):after {
      content: "→";
      position: absolute;
      right: -24px;
      top: 30px;
      color: #9bb9d9;
      font-size: 28px;
      font-weight: 300
    }

    .step-icon {
      width: 74px;
      height: 74px;
      border-radius: 22px;
      background: #e5f1fc;
      color: var(--blue);
      display: grid;
      place-items: center;
      font-size: 29px;
      margin: 0 auto 15px;
      position: relative
    }

    .step-num {
      position: absolute;
      right: 25px;
      top: -10px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      display: grid;
      place-items: center;
/*       border: 2px solid white */
    }

    .step h3 {
    font-size: 17px;
    color: var(--navy);
    margin: 0 0 10px;
    font-weight: 700;
    }

    .step p {
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 auto;
      max-width: 190px
    }

    /* Integrity cards */
    .integrity {
/*       padding: 54px 0 64px; */
      background: linear-gradient(180deg, #f7fbfe, #eef7fa)
    }

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

    .integrity-card {
      background: #fff;
      border: 1px solid #e4edf4;
      border-radius: 13px;
      padding: 20px 18px;
      box-shadow: 0 5px 15px #203b5710
    }

    .integrity-icon {
      font-size: 25px;
      margin-bottom: 12px;
      color: var(--blue)
    }

    .integrity-card h3 {
    font-size: 17px;
    color: var(--navy);
    margin: 0 0 10px;
    font-weight: 700;
    }

    .integrity-card p {
      font-size: 13px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0
    }

    /* Testimonials */
    .testimonials {
/*       padding: 58px 0 65px; */
      background: #e9f5f3
    }

    .testimonials .section-title {
      font-size: 29px
    }

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

    .quote-card {
      background: #fff;
      border: 1px solid #e4eceb;
      border-radius: 13px;
      padding: 20px;
      box-shadow: 0 5px 15px #193c3b0b
    }

    .quote-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px
    }

    .avatar {
      width: 42px;
      height: 42px;
      flex: none;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #e3edf7;
      color: var(--blue);
      font-weight: 850
    }

    .stars {
      color: #e6a33c;
      letter-spacing: 1px;
      font-size: 13px
    }

    .quote-card p {
      font-size: 12px;
      color: #506178;
      line-height: 1.55;
      margin: 0 0 13px
    }

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

    .quote-card small {
      font-size: 10px;
      color: var(--muted)
    }

    /* FAQ */
    .faq {
      padding: 64px 0 70px
    }

    .faq-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 25px
    }

    .faq-heading h2 {
      font-size: 30px;
      letter-spacing: -.8px;
      margin: 12px 0 0;
      color: var(--navy)
    }

    


/* HOMEPAGE FAQ LAYOUT */
.faq-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

/* Each column */
.faq-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

/* FAQ Item */
.faq-layout .faq-item {
  width: 100%;
  min-width: 0;
  align-self: start;
  border: 1px solid #e1e9f1;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}

/* Question Button */
.faq-layout .faq-question {
  width: 100%;
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: #fff;
  border: 0;
  padding: 15px 18px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

/* Hover and keyboard focus */
.faq-layout .faq-question:hover,
.faq-layout .faq-question:focus-visible {
  background-color: var(--blue) !important;
  color: #fff !important;
}

.faq-layout .faq-question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

/* Question text */
.faq-layout .faq-question span:first-child {
  min-width: 0;
}

/* Plus icon */
.faq-layout .faq-question .faq-icon {
  flex: 0 0 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--blue);
  transition: transform .2s, color .2s;
}

/* Icon white on hover */
.faq-layout .faq-question:hover .faq-icon,
.faq-layout .faq-question:focus-visible .faq-icon {
  color: #fff !important;
}

/* Open FAQ: blue background stays */
.faq-layout .faq-item.open .faq-question {
  background-color: var(--blue) !important;
  color: #fff !important;
}

/* Open question text stays white */
.faq-layout .faq-item.open .faq-question span:first-child {
  color: #fff !important;
}

/* Open icon stays white */
.faq-layout .faq-item.open .faq-question .faq-icon {
  color: #fff !important;
  transform: rotate(45deg);
}

/* Answer */
.faq-layout .faq-answer {
  display: none;
  padding: 0 18px 16px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

/* Show answer when open */
.faq-layout .faq-item.open .faq-answer {
  display: block;
}

/* Respect hidden attribute */
.faq-layout .faq-answer[hidden] {
  display: none !important;
}

/* Responsive */
@media (max-width: 650px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .faq-column {
    gap: 14px;
  }
}





/* Single Post Css */

.single-post-wrapper {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 50px 24px 70px;
  box-sizing: border-box;
  color: var(--ink, #07183f);
  font-family: "DM Sans", sans-serif;
}

/* Main content + sidebar */
.single-post-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

.post-main,
.post-sidebar {
  min-width: 0;
  box-sizing: border-box;
}

.post-main {
  width: 100%;
}

.post-sidebar {
  width: 100%;
}

/* Back to blog */
.back-to-blog {
  margin-bottom: 18px;
}

.back-to-blog a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--blue, #146cff);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.back-to-blog a:hover {
  color: var(--navy2, #0b2460);
}

/* Post title */
.post-title {
  font-family: "Manrope", sans-serif !important;
  font-size: clamp(30px, 3.2vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -1.2px;
  color: var(--navy, #071a3f) !important;
  margin: 0 0 18px !important;
  overflow-wrap: anywhere;
}

/* Post meta */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 22px;
  color: var(--muted, #68748d);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.6;
}

/* Featured image */
.post-thumbnail {
  width: 100%;
  margin: 0 0 26px;
  overflow: hidden;
  border-radius: var(--radius, 12px);
}

.post-thumbnail img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--radius, 12px);
  object-fit: cover;
}

/* Social share */
.social-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 28px;
}

.social-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--navy, #071a3f);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.social-share a:hover {
  background: var(--blue, #146cff);
  color: #fff;
  transform: translateY(-2px);
}

/* Article content */
.post-text {
  color: var(--ink, #07183f);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: break-word;
}

.post-text p {
  margin: 0 0 20px;
  color: var(--muted, #68748d);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.85;
}

/* Article headings */
.post-text h2 {
  margin: 36px 0 16px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.5px;
}

.post-text h3 {
  margin: 28px 0 12px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-size: clamp(20px, 2vw, 23px);
  font-weight: 800;
  line-height: 1.4;
}

.post-text h4 {
  margin: 24px 0 10px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
}

.post-text h5,
.post-text h6 {
  margin: 20px 0 10px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  line-height: 1.5;
}

/* Article links */
.post-text a {
  color: var(--blue, #146cff);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.post-text a:hover {
  color: var(--navy2, #0b2460);
}

/* Bold and inline text */
.post-text strong,
.post-text b {
  color: var(--ink, #07183f);
  font-weight: 700;
}

.post-text em,
.post-text i {
  font-style: italic;
}

/* Lists */
.post-text ul,
.post-text ol {
  margin: 0 0 22px;
  padding-left: 26px;
  color: var(--muted, #68748d);
}

.post-text ul {
  list-style-type: disc;
}

.post-text ol {
  list-style-type: decimal;
}

.post-text li {
  margin-bottom: 9px;
  padding-left: 3px;
  line-height: 1.8;
}

.post-text li::marker {
  color: var(--blue, #146cff);
}

/* Nested lists */
.post-text ul ul,
.post-text ol ol,
.post-text ul ol,
.post-text ol ul {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Blockquote */
.post-text blockquote {
  margin: 26px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--blue, #146cff);
  border-radius: 0 10px 10px 0;
  background: var(--soft, #f6f9ff);
  color: var(--ink, #07183f);
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.8;
}

.post-text blockquote p {
  margin-bottom: 0;
  color: inherit;
}

/* Article images */
.post-text img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  border-radius: 8px;
}

.post-text figure {
  max-width: 100%;
  margin: 26px 0;
}

.post-text figure img {
  margin: 0 auto;
}

.post-text figcaption {
  margin-top: 10px;
  color: var(--muted, #68748d);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

/* Tables */
.post-text table {
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.post-text th,
.post-text td {
  padding: 12px 14px;
  border: 1px solid var(--line, #e3e9f3);
  text-align: left;
  vertical-align: top;
}

.post-text th {
  background: var(--soft, #f6f9ff);
  color: var(--navy, #071a3f);
  font-weight: 700;
}

.post-text td {
  color: var(--muted, #68748d);
}

/* Table overflow on small screens */
.post-text .table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Horizontal rule */
.post-text hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid var(--line, #e3e9f3);
}

/* Code blocks */
.post-text pre {
  max-width: 100%;
  padding: 18px;
  overflow-x: auto;
  border: 1px solid var(--line, #e3e9f3);
  border-radius: 10px;
  background: var(--soft, #f6f9ff);
  color: var(--ink, #07183f);
  font-size: 14px;
  line-height: 1.7;
}

.post-text code {
  font-family: Consolas, monospace;
  overflow-wrap: anywhere;
}

.post-text pre code {
  overflow-wrap: normal;
}

/* CTA box */
.cta-box {
  position: relative;
  box-sizing: border-box;
  padding: 30px 26px;
  margin: 0 0 28px;
  border: 1px solid #dce6f7;
  border-radius: var(--radius, 12px);
  background-color: var(--soft, #f6f9ff);
  background-image: url("https://taylorsandfrancis.co.uk/wp-content/uploads/2026/04/clock.webp");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 100px auto;
}

.cta-box h3 {
  max-width: 90%;
  margin: 0 0 12px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
}

.cta-box p {
  max-width: 95%;
  margin: 0 0 18px;
  color: var(--muted, #68748d);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid var(--blue, #146cff);
  border-radius: 7px;
  background: var(--blue, #146cff);
  color: #fff !important;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.cta-btn:hover {
  background: var(--navy, #071a3f);
  border-color: var(--navy, #071a3f);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Table of contents */
.toc-box {
  position: sticky;
  top: 90px;
  box-sizing: border-box;
  padding: 22px;
  margin: 0 0 28px;
  border: 1px solid var(--line, #e3e9f3);
  border-radius: var(--radius, 12px);
  background: #fff;
  box-shadow: 0 8px 26px rgba(22, 47, 95, .05);
}

.toc-box h3 {
  margin: 0 0 14px;
  color: var(--navy, #071a3f);
  font-family: "Manrope", sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.4;
}

ul#toc-list {
  margin: 0;
  padding: 14px 0 0 18px;
  border-top: 1px solid var(--line, #e3e9f3);
  list-style: disc;
}

.toc-box ul {
  padding-left: 18px;
}

.toc-box ul li {
  margin: 0 0 10px;
  padding-left: 2px;
  color: var(--blue, #146cff);
}

.toc-box ul li::marker {
  color: var(--blue, #146cff);
}

.toc-box ul li a {
  color: var(--ink, #07183f);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

.toc-box ul li a:hover {
  color: var(--blue, #146cff);
}

/* Sidebar images */
.post-sidebar img {
  max-width: 100%;
  height: auto;
}

/* Responsive: tablets */
@media (max-width: 1024px) {
  .single-post-wrapper {
    padding: 40px 22px 55px;
  }

  .single-post-content {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
  }

  .post-title {
    font-size: 34px !important;
  }

  .post-text {
    font-size: 15px;
  }

  .post-text p {
    font-size: 15px;
  }

  .toc-box {
    padding: 18px;
    top: 85px;
  }

  .cta-box {
    padding: 25px 20px;
    background-size: 75px auto;
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {
  .single-post-wrapper {
    padding: 28px 16px 40px;
    margin: 0 auto;
  }

  .single-post-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .post-main,
  .post-sidebar {
    width: 100%;
    min-width: 0;
  }

  .post-title {
    font-size: 29px !important;
    line-height: 1.25 !important;
    letter-spacing: -.7px;
    margin-bottom: 14px !important;
  }

  .post-meta {
    gap: 6px 10px;
    margin-bottom: 18px;
    font-size: 12px;
  }

  .post-thumbnail {
    margin-bottom: 20px;
    border-radius: 10px;
  }

  .social-share {
    margin: 18px 0 24px;
  }

  .social-share a {
    width: 35px;
    height: 35px;
    font-size: 13px;
  }

  .post-text {
    font-size: 15px;
    line-height: 1.8;
  }

  .post-text p {
    margin-bottom: 17px;
    font-size: 15px;
    line-height: 1.8;
  }

  .post-text h2 {
    margin-top: 30px;
    margin-bottom: 13px;
    font-size: 24px;
    line-height: 1.35;
  }

  .post-text h3 {
    margin-top: 24px;
    margin-bottom: 10px;
    font-size: 20px;
  }

  .post-text h4 {
    font-size: 17px;
  }

  .post-text ul,
  .post-text ol {
    padding-left: 22px;
  }

  .post-text blockquote {
    padding: 16px 18px;
    font-size: 15px;
  }

  .post-text table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }

  .post-text th,
  .post-text td {
    padding: 10px;
  }

  .cta-box {
    padding: 24px 18px;
    background-image: none;
  }

  .cta-box h3 {
    max-width: 100%;
    font-size: 20px;
  }

  .cta-box p {
    max-width: 100%;
    font-size: 14px;
  }

  .cta-btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  .toc-box {
    position: static;
    padding: 18px;
    margin-bottom: 24px;
  }

  .toc-box h3 {
    font-size: 18px;
  }
}

/* Small mobile screens */
@media (max-width: 380px) {
  .single-post-wrapper {
    padding-right: 12px;
    padding-left: 12px;
  }

  .post-title {
    font-size: 26px !important;
  }

  .post-text h2 {
    font-size: 22px;
  }

  .post-text h3 {
    font-size: 19px;
  }

  .cta-box {
    padding: 20px 15px;
  }
}
 /* Footer */
    footer {
      background: var(--deep);
      color: #dce6f1;
      padding: 42px 0 18px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
      gap: 36px;
      padding-bottom: 30px
    }

    footer .brand-name {
      color: #fff
    }

    footer .brand-tag {
      color: #a9bdd2
    }

    .footer-about p {
      font-size: 11px;
      line-height: 1.65;
      color: #b7c8d9;
      max-width: 270px;
      margin: 15px 0
    }

    .footer-col h4 {
      font-size: 12px;
      color: #fff;
      margin: 0 0 15px
    }

    .footer-col a,
    .footer-col p {
      display: block;
      font-size: 11px;
      color: #b7c8d9;
      margin: 9px 0
    }

    .footer-col a:hover {
      color: #fff
    }

    .socials {
      display: flex;
      gap: 8px;
      margin-top: 14px
    }

    .socials a {
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #28415e;
      color: #fff;
      font-size: 10px;
      margin: 0
    }

    .footer-bottom {
      border-top: 1px solid #ffffff24;
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      gap: 15px;
      flex-wrap: wrap;
      color: #9fb2c7;
      font-size: 10px
    }

    .footer-bottom a {
      margin-left: 14px
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 50;
      background: var(--deep);
      color: white;
      padding: 13px 17px;
      border-radius: 12px;
      box-shadow: var(--shadow);
      font-size: 13px;
      max-width: min(380px, calc(100% - 40px));
      display: none
    }

    .toast.show {
      display: block;
      animation: fadein .25s ease
    }

    @keyframes fadein {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

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

    @media(max-width:900px) {
      .nav-links {
        gap: 14px
      }

      .brand {
        min-width: 165px
      }

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

      .review-card {
        right: -2%;
        width: 175px
      }

      .feature-grid {
        gap: 35px
      }

      .price-card {
        padding: 21px 17px
      }

      .footer-grid {
        gap: 22px
      }
    }

    @media(max-width:720px) {
      header {
        height: 66px
      }

      .container {
        width: min(100% - 32px, 560px)
      }

      .menu-toggle {
        display: block
      }

      .nav-cta {
        display: none
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 65px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 12px 22px 18px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 18px #12274212;
        flex-direction: column;
        align-items: stretch;
        gap: 0
      }

      .nav-links.open {
        display: flex
      }

      .nav-links a {
        padding: 12px 4px
      }

      .nav-links a.active:after {
        display: none
      }

      .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 38px;
        gap: 4px
      }

      .hero h1 {
        font-size: 39px
      }

      .hero-visual {
        height: 330px;
        margin-top: 5px
      }

      .review-card {
        right: 0;
        bottom: 0;
        width: 165px
      }

      .screen {
        min-height: 220px;
        padding: 13px
      }

      .screen-body {
        grid-template-columns: 85px 1fr;
        gap: 10px
      }

      .trust-items {
        gap: 12px 20px
      }

      .features {
        padding: 54px 0
      }

      .feature-grid {
        grid-template-columns: 1fr;
        gap: 34px
      }

      .report-visual {
        min-height: 270px;
        order: 2
      }

      .feature-copy {
        order: 1
      }

      .price-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 420px;
        margin: auto
      }

      .price-card.popular {
        transform: none;
        margin-top: 8px
      }

      .steps {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px
      }

      .step:nth-child(2):after {
        display: none
      }

      .step:not(:last-child):after {
        right: -15px
      }

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

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

      .faq-heading {
        align-items: flex-start;
        flex-direction: column
      }

      .faq-heading .btn {
        align-self: flex-start
      }

      .faq-layout {
        grid-template-columns: 1fr
      }

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

      .footer-about {
        grid-column: 1/-1
      }
    }

    @media(max-width:420px) {
      .hero h1 {
        font-size: 34px
      }

      .hero-visual {
        height: 285px
      }

      .review-card {
        width: 145px;
        padding: 9px
      }

      .review-item {
        gap: 6px
      }

      .review-item small {
        font-size: 7px
      }

      .screen {
        border-width: 6px;
        border-bottom-width: 9px
      }

      .screen-body {
        grid-template-columns: 70px 1fr
      }

      .screen-menu span {
        font-size: 7px
      }

      .hero-points {
        gap: 8px
      }

      .btn {
        padding: 11px 15px
      }

      .integrity-grid {
        gap: 10px
      }

      .integrity-card {
        padding: 15px 13px
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px
      }

      .brand-name {
        font-size: 17px
      }
    }


/* ABOUT PAGE */
.about-page {
  color: var(--ink);
  background: var(--white);
}

.about-page h1,
.about-page h2,
.about-page h3,
.about-page p {
  margin-top: 0;
}

/* Hero */
.about-hero {
  padding: 48px 0 54px;
  text-align: center;
  background:
    radial-gradient(ellipse at 85% 0%, #dcf8eb 0%, transparent 42%),
    linear-gradient(120deg, #f1f8fd, #ffffff 70%);
}

.about-breadcrumb {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11px;
}

.about-hero .eyebrow,
.about-purpose .eyebrow,
.about-section-heading .eyebrow {
  margin-bottom: 15px;
}

.about-hero h1 {
  max-width: 760px;
  margin: 0 auto 17px;
  color: var(--navy);
  font-size: clamp(34px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.8px;
}

.about-hero h1 span,
.about-purpose-copy h2 span,
.about-section-heading h2 span {
  color: var(--blue);
}

.about-hero > .container > p {
  max-width: 610px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* Purpose */
.about-purpose {
  padding: 65px 0 72px;
}

.about-purpose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
}

.about-purpose-copy h2 {
  max-width: 470px;
  margin: 12px 0 18px;
  color: var(--navy);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
}

.about-purpose-copy p {
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

/* Principles illustration */
.about-principles-visual {
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border-radius: 24px;
  background: linear-gradient(135deg, #dceeff, #e9f9f3);
}

.principles-card {
  width: 100%;
  max-width: 370px;
  padding: 23px;
  border: 1px solid #edf1f5;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(23, 43, 77, .10);
}

.principles-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 17px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-size: 12px;
}

.principles-heading strong span {
  color: var(--blue);
}

.principles-badge {
  padding: 5px 8px;
  border-radius: 20px;
  background: #e4f7ee;
  color: #16865b;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.principle-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: start;
  gap: 12px;
  margin: 15px 0;
}

.principle-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e5f6ef;
  color: var(--blue);
  font-size: 17px;
}

.principle-item h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 13px;
}

.principle-item p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* Approach */
.about-approach {
  padding: 65px 0 70px;
  background: var(--pale2);
}

.about-section-heading {
  max-width: 650px;
  margin: 0 auto 32px;
  text-align: center;
}

.about-section-heading h2 {
  margin: 10px 0 13px;
  color: var(--navy);
  font-size: clamp(27px, 3vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
}

.about-section-heading > p {
  max-width: 570px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

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

.approach-card {
  padding: 24px;
  border: 1px solid #e3ebf3;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(23, 43, 77, .04);
  transition: transform .2s ease, box-shadow .2s ease;
}

.approach-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.approach-number {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  border-radius: 10px;
  background: #e4f7ee;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
}

.approach-card h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.4;
}

.approach-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}

/* Information */
.about-information {
  padding: 65px 0 75px;
  background: #fff;
}

.about-content {
  width: min(100% - 44px, 830px);
  margin: 0 auto;
}

.about-content h2 {
  margin: 0 0 13px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
}

.about-content p {
  margin: 0 0 25px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.about-notice {
  margin: -4px 0 30px;
  padding: 15px 17px;
  border: 1px solid #f2dfb6;
  border-radius: 11px;
  background: #fff8e9;
  color: #805d27;
  font-size: 11px;
  line-height: 1.7;
}

.about-contact {
  padding-top: 2px;
}

.about-contact h2 {
  margin-bottom: 12px;
}

.about-contact p {
  margin-bottom: 18px;
}

.about-contact .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Responsive */
@media (max-width: 768px) {
  .about-hero {
    padding: 40px 0 45px;
  }

  .about-purpose {
    padding: 48px 0;
  }

  .about-purpose-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-principles-visual {
    min-height: 300px;
  }

  .about-approach {
    padding: 48px 0;
  }

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

  .approach-card {
    padding: 21px;
  }

  .about-information {
    padding: 48px 0;
  }

  .about-content {
    width: min(100% - 32px, 830px);
  }
}

@media (max-width: 480px) {
  .about-hero h1 {
    font-size: 34px;
    letter-spacing: -1.2px;
  }

  .about-hero > .container > p {
    font-size: 13px;
  }

  .about-principles-visual {
    min-height: auto;
    padding: 17px;
  }

  .principles-card {
    padding: 18px;
  }

  .principles-heading {
    flex-wrap: wrap;
  }

  .about-content h2 {
    font-size: 20px;
  }
}

/* Contacy Us page Css */

/* CONTACT PAGE */
.contact-page {
  background: var(--white);
  color: var(--ink);
}

.contact-page h1,
.contact-page h2,
.contact-page h3 {
  font-weight: 700;
}

.contact-page p {
  margin-top: 0;
}

/* Hero */
.contact-hero {
  padding: 48px 0 55px;
  text-align: center;
  background:
    radial-gradient(ellipse at 85% 0%, #dcf8eb 0%, transparent 42%),
    linear-gradient(120deg, #f1f8fd, #ffffff 70%);
}

.contact-breadcrumb {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 11px;
}

.contact-hero .eyebrow {
  margin-bottom: 15px;
}

.contact-hero h1 {
  margin: 0 0 15px;
  color: var(--navy);
  font-size: clamp(35px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.4px;
}

.contact-hero h1 span {
  color: var(--blue);
}

.contact-hero > .container > p {
  max-width: 650px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

/* Main Contact Area */
.contact-main {
  padding: 55px 0 65px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: stretch;
  gap: 25px;
}

/* Information Card */
.contact-info {
  align-self: start;
  padding: 28px;
  border-radius: 16px;
  background: var(--deep);
  color: #fff;
}

.contact-info .eyebrow {
  margin-bottom: 17px;
  background: #e4f7ee;
  color: #16865b;
}

.contact-info h2 {
  margin: 0 0 15px;
  color: #fff;
  font-size: clamp(25px, 3vw, 31px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.6px;
}

.contact-intro {
  margin-bottom: 17px !important;
  color: #d4e1ef;
  font-size: 13px;
  line-height: 1.75;
}

.contact-info-item {
  padding: 15px 0;
  border-top: 1px solid #ffffff20;
}

.contact-info-item strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.contact-info-item p,
.contact-info-item a {
  display: block;
  margin: 0;
  color: #c8d9eb;
  font-size: 11px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.contact-info-item a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Form Card */
.contact-form-card {
  padding: 27px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

.contact-form-card h2 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.6px;
}

.contact-form-description {
  margin-bottom: 20px !important;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 19px;
}

.contact-field label {
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  transition: border-color .2s, box-shadow .2s;
}

.contact-field input,
.contact-field select {
  min-height: 43px;
}

.contact-field textarea {
  min-height: 115px;
  resize: vertical;
  line-height: 1.6;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 99, 168, .10);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #8795a7;
}

.contact-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.contact-submit:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

.contact-privacy-note {
  margin: 14px 0 0 !important;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.7;
}

.contact-form-status {
  margin: 10px 0 0 !important;
  color: var(--blue);
  font-size: 12px;
}

/* Helpful Information */
.contact-help {
  padding: 60px 0 65px;
  background: var(--pale2);
}

.contact-help-heading {
  max-width: 650px;
  margin: 0 auto 30px;
  text-align: center;
}

.contact-help-heading .eyebrow {
  margin-bottom: 13px;
}

.contact-help-heading h2 {
  margin: 0 0 13px;
  color: var(--navy);
  font-size: clamp(27px, 3vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.8px;
}

.contact-help-heading h2 span {
  color: var(--blue);
}

.contact-help-heading p {
  margin: 0 auto;
  max-width: 600px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.contact-help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.contact-help-card {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 43, 77, .04);
}

.contact-help-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 11px;
  background: #e4f7ee;
  color: var(--blue);
  font-size: 18px;
}

.contact-help-card h3 {
  margin: 0 0 9px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.contact-help-card p {
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75;
}

.contact-help-card a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.contact-help-card a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-hero {
    padding: 40px 0 45px;
  }

  .contact-main {
    padding: 40px 0 48px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact-info {
    padding: 24px;
  }

  .contact-form-card {
    padding: 22px;
  }

  .contact-help {
    padding: 45px 0;
  }

  .contact-help-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .contact-hero h1 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-info h2 {
    font-size: 27px;
  }

  .contact-form-card h2 {
    font-size: 23px;
  }

  .contact-info,
  .contact-form-card,
  .contact-help-card {
    padding: 20px;
  }
}

/* Contact Form 7 — PrismChecker */
.contact-form-card .wpcf7 form {
  margin: 0;
}

.contact-form-card .wpcf7 .contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-form-card .wpcf7 .contact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 19px;
}

.contact-form-card .wpcf7 .contact-field label {
  color: var(--navy, #172b4d);
  font-size: 11px;
  font-weight: 700;
}

.contact-form-card .wpcf7 .contact-field input,
.contact-form-card .wpcf7 .contact-field select,
.contact-form-card .wpcf7 .contact-field textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line, #dce5ef);
  border-radius: 9px;
  background: #fff;
  color: var(--ink, #182b49);
  font-family: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.contact-form-card .wpcf7 .contact-field input,
.contact-form-card .wpcf7 .contact-field select {
  height: 43px;
}

.contact-form-card .wpcf7 .contact-field textarea {
  min-height: 115px;
  resize: vertical;
  line-height: 1.6;
}

.contact-form-card .wpcf7 .contact-field input:focus,
.contact-form-card .wpcf7 .contact-field select:focus,
.contact-form-card .wpcf7 .contact-field textarea:focus {
  border-color: var(--blue, #2463a8);
  box-shadow: 0 0 0 3px rgba(36, 99, 168, .10);
}

.contact-form-card .wpcf7 .contact-field input::placeholder,
.contact-form-card .wpcf7 .contact-field textarea::placeholder {
  color: #8795a7;
}

.contact-form-card .wpcf7 .contact-submit-wrap {
  margin-top: 2px;
}

.contact-form-card .wpcf7 input.contact-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--blue, #2463a8);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}

.contact-form-card .wpcf7 input.contact-submit:hover {
  background: var(--navy, #172b4d);
}

.contact-form-card .wpcf7 input.contact-submit:disabled {
  opacity: .6;
  cursor: wait;
}

.contact-form-card .wpcf7 .wpcf7-not-valid {
  border-color: #dc4545 !important;
}

.contact-form-card .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 4px;
  color: #c53030;
  font-size: 11px;
}

.contact-form-card .wpcf7 .wpcf7-response-output {
  margin: 15px 0 0;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .contact-form-card .wpcf7 .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}



/* FAQ PAGE */

/* Hero */
.faqs-hero {
  padding: 44px 0 52px;
  text-align: center;
  background:
    radial-gradient(ellipse at 85% 0%, #dcf8eb 0%, transparent 42%),
    linear-gradient(120deg, #f1f8fd, #ffffff 70%);
}

.faqs-breadcrumb {
  margin-bottom: 17px;
  color: var(--muted);
  font-size: 11px;
}

.faqs-hero .eyebrow {
  margin-bottom: 14px;
}

.faqs-hero h1 {
  margin: 0 0 13px;
  color: var(--navy);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -1.2px;
  font-weight: 700;
}

.faqs-hero h1 span {
  color: var(--blue);
}

.faqs-hero > .container > p {
  max-width: 610px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

/* FAQ Content */
.faqs-content {
  padding: 48px 0 28px;
}

.faqs-inner {
  max-width: 740px;
}

.faq-category {
  margin-bottom: 7px;
}

.faq-category h2 {
  margin: 0 0 11px;
  color: var(--navy);
  font-size: clamp(23px, 2.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -.7px;
  font-weight: 700;
}

/* FAQ List */
.faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

/* FAQ Item */
.faq-category .faq-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.faq-category .faq-item.open {
  border-color: #b6d6ed;
  box-shadow: 0 5px 16px rgba(23, 43, 77, .05);
}

/* Question */
.faq-category .faq-question {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 16px;
  border: 0;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

/* Hover and Focus */
.faq-category .faq-question:hover,
.faq-category .faq-question:focus,
.faq-category .faq-question:active {
  background-color: var(--blue) !important;
  color: #fff !important;
}

.faq-category .faq-question:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

/* Question Text */
.faq-category .faq-question span:first-child {
  min-width: 0;
}

/* Plus Icon */
.faq-category .faq-question .faq-icon {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 19px;
  font-weight: 700;
  transition: transform .2s ease, color .2s ease;
}

/* Icon White on Hover */
.faq-category .faq-question:hover .faq-icon,
.faq-category .faq-question:focus .faq-icon,
.faq-category .faq-question:active .faq-icon {
  color: #fff !important;
}

/* Keep Open FAQ Blue */
.faq-category .faq-item.open .faq-question {
  background-color: var(--blue) !important;
  color: #fff !important;
}

/* Keep Open Question Text White */
.faq-category .faq-item.open .faq-question span:first-child {
  color: #fff !important;
}

/* Keep Open Icon White */
.faq-category .faq-item.open .faq-question .faq-icon {
  color: #fff !important;
  transform: rotate(45deg);
}

/* FAQ Answer */
.faq-category .faq-answer {
  padding: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

/* Hide Closed Answer */
.faq-category .faq-answer[hidden] {
  display: none !important;
}

/* CTA */
.faqs-cta-section {
  padding: 0 0 52px;
}

.faqs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 29px 30px;
  border-radius: 16px;
  background: linear-gradient(115deg, var(--deep), #174461);
  color: #fff;
}

.faqs-cta h2 {
  margin: 0 0 9px;
  color: #fff;
  font-size: clamp(23px, 3vw, 29px);
  line-height: 1.25;
  font-weight: 700;
}

.faqs-cta p {
  margin: 0;
  color: #d4e1ef;
  font-size: 12px;
  line-height: 1.7;
}

.faqs-cta .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 650px) {
  .faqs-hero {
    padding: 36px 0 42px;
  }

  .faqs-content {
    padding: 35px 0 20px;
  }

  .faqs-inner {
    width: calc(100% - 32px);
  }

  .faq-category h2 {
    font-size: 24px;
  }

  .faq-category .faq-question {
    padding: 13px;
  }

  .faq-category .faq-answer {
    padding: 0 13px 14px;
  }

  .faqs-cta-section {
    padding-bottom: 38px;
  }

  .faqs-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    gap: 18px;
  }
}

@media (max-width: 400px) {
  .faqs-hero h1 {
    font-size: 30px;
  }

  .faq-category h2 {
    font-size: 22px;
  }
}