:root {
  --ink: #0b2447;
  --steel: #5b6f8c;
  --zinc: #f1f6fe;
  --line: #d9e4f5;
  --sky: hsl(216, 91%, 96%);
  --blue: #1560d4;
  --blue-d: #0d47a1;
  --white: #fff;
  --star: #fbbf24;
  --r: 12px;
  --topbar-h: 40px;
  --ft-bg: #0a1b38;
  --ft-text: #b4c4dc;
  --ft-above: #fff;

  --primary-orange: #1560d4;
  --primary-orange-glow: rgba(242, 101, 34, 0.4);
  --dark-bg: #0b0d12;
  --card-bg: rgba(18, 22, 31, 0.85);
  --text-white: #ffffff;
  --text-muted: #a0aab8;

  --biats-orange: #1560d4;
  --biats-navy: #0f172a;
  --biats-blue: #0284c7;
  --biats-green: #10b981;
  --biats-bg: #f8fafc;
  --biats-card-bg: #e2e8f0;
  --biats-dark: #0f172a;


  --crimson: #1560d4;
  --crimson-d: #0d47a1;
  --navy: #162740;
  --gold: #c9a84c;
  --gold-l: #e8cc7a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
  --border-glass: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  margin: 0;
  overflow-x: hidden
}

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

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

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px
}

img {
  max-width: 100%
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--blue-d);
  color: #dce9ff;
  font-size: .82rem;
  min-height: var(--topbar-h)
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h)
}

.topbar-list {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap
}

.topbar a:hover {
  color: #fff;
  text-decoration: underline
}

.topbar i {
  color: #9cc4ff;
  margin-right: .45rem
}

.topbar-social {
  display: flex;
  gap: .35rem
}

.topbar-social a {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background .2s, color .2s
}

.topbar-social a:hover {
  background: #fff;
  color: var(--blue-d)
}

.topbar-social i {
  margin: 0;
  color: inherit
}

.topbar-social a {
  background: rgba(255, 255, 255, .1)
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s
}

.site-header.is-stuck {
  box-shadow: 0 8px 24px rgba(15, 34, 48, .1)
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 8px 0;
  transition: padding .3s
}

.is-stuck .header-inner {
  padding-block: 8px
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  transform: rotate(-12deg)
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1
}

.brand-text b {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em
}

.brand-text small {
  font-size: .74rem;
  color: var(--steel);
  font-weight: 500
}

.main-nav {
  display: none
}

@media (min-width:992px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto
  }

  .header-cta {
    margin-left: 1rem
  }

  .nav-toggle {
    display: none !important
  }
}

.nav-link-x {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .95rem;
  font-weight: 600;
  font-size: .97rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit
}

.nav-link-x::after {
  content: "";
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .35rem;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s
}

.nav-link-x:hover::after,
.nav-link-x.is-current::after,
.has-mega.is-open>.nav-link-x::after {
  transform: scaleX(1)
}

.nav-link-x .fa-chevron-down {
  font-size: .65rem;
  transition: transform .25s
}

.has-mega.is-open .fa-chevron-down {
  transform: rotate(180deg)
}

.btn-blue {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  padding: .7rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: background .2s, transform .2s
}

.btn-blue:hover {
  background: var(--blue-d);
  color: #fff
}

.btn-ghost {
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-weight: 600;
  border-radius: 10px;
  padding: .7rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #fff;
  transition: background .2s, color .2s
}

.btn-ghost:hover {
  background: var(--blue);
  color: #fff
}

.nav-toggle {
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem
}

/* ---------- Megamenu ---------- */
.mega {
  position: absolute;
  top: 100%;
  left: 12px;
  right: 12px;
  margin-top: 1px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 24px 48px rgba(13, 71, 161, .18);
  padding: 1.4rem 1.4rem 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s
}

.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 40px
}

.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega {
  visibility: visible;
  opacity: 1;
  transform: none
}

.has-mega:hover .fa-chevron-down,
.has-mega:focus-within .fa-chevron-down {
  transform: rotate(180deg)
}

.has-mega:hover>.nav-link-x::after {
  transform: scaleX(1)
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem
}

.mega-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s
}

.mega-img {
  aspect-ratio: 4/3;
  background: var(--zinc);
  display: grid;
  place-items: center;
  overflow: hidden
}

.mega-img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  transition: transform .4s
}

.mega-body {
  padding: .8rem .95rem .95rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem
}

.mega-name {
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.25;
  display: block
}

.mega-spec {
  font-size: .78rem;
  color: var(--steel);
  display: block;
  margin-top: .2rem
}

.mega-go {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--zinc);
  display: grid;
  place-items: center;
  font-size: .72rem;
  transition: background .2s, transform .2s
}

.mega-card:hover,
.mega-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 10px 24px rgba(15, 34, 48, .1)
}

.mega-card:hover img {
  transform: scale(1.08) rotate(-4deg)
}

.mega-card:hover .mega-go {
  background: var(--blue);
  color: #fff;
  transform: translateX(3px)
}

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.2rem -1.4rem 0;
  padding: .9rem 1.4rem;
  background: var(--zinc);
  border-radius: 0 0 var(--r) var(--r);
  font-size: .9rem
}

.mega-foot a.tel {
  font-weight: 700
}

.mega-foot i {
  color: var(--blue-d);
  margin-right: .4rem
}

.mega-all {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

.mega-all:hover {
  color: var(--blue-d)
}

@media (max-width:1199.98px) {
  .mega-grid {
    gap: .7rem
  }

  .mega-body {
    padding: .65rem
  }
}

/* ---------- Mobile offcanvas ---------- */
.offcanvas {
  --bs-offcanvas-width: 340px;
  max-width: 88vw
}

.m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .95rem 0;
  font-weight: 600;
  font-size: 1.05rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font-family: inherit;
  text-align: left
}

.m-link[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg)
}

.m-link .fa-chevron-down {
  font-size: .75rem;
  transition: transform .25s
}

.m-products {
  padding: .4rem 0 .6rem .4rem;
  border-bottom: 1px solid var(--line)
}

.m-sub {
  display: block;
  padding: .65rem .9rem;
  margin-left: .2rem;
  border-left: 2px solid var(--line);
  font-weight: 500;
  transition: color .2s, border-color .2s, background .2s
}

.m-sub:hover,
.m-sub:focus-visible {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--zinc)
}

.m-contact {
  margin-top: auto;
  padding-top: 1.2rem;
  font-size: .9rem;
  display: grid;
  gap: .6rem
}

.m-contact i {
  color: var(--blue-d);
  width: 1.2rem
}

/* ---------- Hero slider ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #fff 0%, #eaf2fe 55%, #d3e4fc 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate
}



.hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 96, 212, .16), transparent 65%);
  z-index: -1
}

.slides {
  display: grid
}

.slide {
  grid-area: 1/1;
  visibility: hidden;
  opacity: 0;
  padding: 2.2rem 0 5.6rem;
  transition: opacity .6s, visibility .6s
}

.slide.is-active {
  visibility: visible;
  opacity: 1
}

.slide-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center
}

.slide-media {
  order: -1;
  position: relative;
  display: grid;
  place-items: center;
  height: 250px
}

.slide-media::before {
  content: "";
  position: absolute;
  width: min(80%, 310px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  border: 1px dashed rgba(21, 96, 212, .4);
  box-shadow: 0 20px 50px rgba(21, 96, 212, .15)
}

.slide-media img {
  position: relative;
  max-height: 100%;
  max-width: 96%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(13, 71, 161, .28))
}

.slide-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-d);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: .3rem .85rem
}

.slide-tag i {
  color: var(--blue)
}

.slide-title {
  font-size: clamp(2rem, 5.2vw, 3.7rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 1rem 0;
  max-width: 15ch;
  color: var(--ink)
}

.slide-text {
  color: var(--steel);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 1.6rem
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem
}

@media (min-width:992px) {
  .slide {
    padding: 3.5rem 0 6.5rem
  }

  .slide-row {
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem
  }

  .slide-media {
    order: 0;
    height: 470px
  }

  .slide-media::before {
    width: min(90%, 440px)
  }
}

.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.4rem
}

.hero-controls .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem
}

.dots {
  display: flex;
  gap: .6rem;
  flex: 1;
  max-width: 560px
}

.dot {
  flex: 1;
  background: none;
  border: 0;
  padding: .4rem 0;
  color: var(--steel);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer
}

.dot-bar {
  display: block;
  height: 3px;
  background: rgba(21, 96, 212, .2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .5rem
}

.dot-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue)
}

.dot.is-active .dot-fill {
  animation: fill 6s linear forwards
}

.slides:hover~.hero-controls .dot-fill,
.hero:has(:focus-visible) .dot-fill {
  animation-play-state: paused
}

@keyframes fill {
  to {
    width: 100%
  }
}

@media (prefers-reduced-motion:reduce) {
  .dot-fill {
    animation: none !important;
    width: 100%
  }
}

.dot.is-active {
  color: var(--ink)
}

.dot-label {
  display: none
}

@media (min-width:576px) {
  .dot-label {
    display: block
  }
}

.arrows {
  display: flex;
  gap: .5rem
}

.arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: #fff;
  color: var(--blue);
  transition: background .2s, color .2s
}

.arrow:hover {
  background: var(--blue);
  color: #fff
}

@media (max-width:575.98px) {

  .topbar-hours,
  .topbar-social,
  .topbar-addr {
    display: none !important
  }

  .topbar .container {
    justify-content: center
  }

  .topbar-list {
    gap: 1rem;
    justify-content: center
  }

  .slide-actions .btn-blue,
  .slide-actions .btn-ghost {
    flex: 1;
    justify-content: center
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none !important
  }
}


/* ---------- About ---------- */
.about {
  position: relative;
  background: #fff;
  padding: clamp(3rem, 7vw, 6rem) 0;
  overflow: hidden
}

.about::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 96, 212, .13), transparent 70%)
}

.about::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(#bcd0ee 1.5px, transparent 1.6px) 0 0/18px 18px;
  -webkit-mask: linear-gradient(45deg, #000, transparent 70%);
  mask: linear-gradient(45deg, #000, transparent 70%)
}

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

/* Single parent for all dynamic content: everything is styled from here */
.about-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--steel);
  overflow-wrap: break-word
}

.about-content::after {
  content: "";
  display: block;
  clear: both
}

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

.about-content .about-subtitle {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .8rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue)
}

.about-content .about-subtitle::after {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--blue)
}

.about-content .about-title {
  margin-bottom: 1.1rem;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--ink)
}

.about-content .about-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.2rem;
  padding: .35rem 1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--sky);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--blue-d)
}

.about-content p {
  margin: 0 0 1.1rem
}

.about-content>p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink)
}

.about-content strong,
.about-content b {
  color: var(--ink);
  font-weight: 700
}

.about-content a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px
}

.about-content a:hover {
  color: var(--blue-d)
}

.about-content hr {
  clear: both;
  height: 2px;
  margin: 2rem 0;
  border: 0;
  opacity: .35;
  background: repeating-linear-gradient(90deg, var(--blue) 0 12px, transparent 12px 20px)
}

.about-content figure.image {
  margin: 1.6rem 0
}

.about-content figure.image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px
}

/* Lists: icon + dashed connector (li is a block formatting context, so text never slips under the floated gallery) */
.about-content ul,
.about-content ol {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0
}

.about-content li {
  position: relative;
  display: flow-root;
  margin-bottom: 1rem;
  padding: .1rem 0 .1rem 2.8rem;
  font-weight: 600;
  line-height: 1.7;
  color: #2a3d5a
}

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

.about-content li p {
  margin: 0
}

.about-content li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .85rem;
  top: 2.2rem;
  bottom: -.9rem;
  border-left: 2px dashed #b9cff0
}

.about-content ul>li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .1rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px var(--sky);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--blue);
  transition: transform .3s, color .3s, box-shadow .3s
}

.about-content ul>li:hover::before {
  transform: scale(1.12) rotate(-10deg);
  color: var(--blue-d);
  box-shadow: 0 0 0 7px rgba(21, 96, 212, .2)
}

.about-content ol {
  counter-reset: ab
}

.about-content ol>li {
  counter-increment: ab
}

.about-content ol>li::before {
  content: counter(ab);
  position: absolute;
  left: 0;
  top: .1rem;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px var(--sky);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
  color: #fff
}

/* Quote and tables */
.about-content blockquote {
  clear: both;
  position: relative;
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem 1.2rem 3.6rem;
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: var(--sky);
  font-weight: 500;
  color: var(--ink)
}

.about-content blockquote::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  color: var(--blue);
  opacity: .45
}

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

.about-content figure.table {
  clear: both;
  margin: 1.8rem 0;
  overflow-x: auto
}

.about-content table {
  clear: both;
  width: 100%;
  margin: 1.8rem 0;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  font-size: .95rem;
  line-height: 1.5;
  background: #fff;
  box-shadow: 0 4px 15px rgba(13, 71, 161, .05)
}

.about-content figure.table table {
  margin: 0
}

.about-content th,
.about-content td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink)
}

.about-content th {
  background: var(--blue);
  color: #fff;
  font-weight: 600
}

.about-content tr:last-child td {
  border-bottom: 0
}

.about-content tbody tr:nth-child(even) td {
  background: var(--zinc)
}

/* Floated image collage (left) */
.about-gallery {
  float: left;
  position: relative;
  width: 46%;
  margin: 0 3.2rem 1.5rem 0;
  padding-bottom: 4rem
}

.about-gallery::before {
  content: "";
  position: absolute;
  left: -18px;
  top: -18px;
  width: 62%;
  height: 62%;
  border: 2px dashed #9dbcec;
  border-radius: 30px
}

.about-gallery::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 1.2rem;
  width: 80%;
  height: 46%;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--sky), #cfe0fb)
}

.about-shot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(135deg, #dbe8fb, #f1f6fe);
  box-shadow: 0 22px 44px rgba(13, 71, 161, .2)
}

.about-shot::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: rgba(21, 96, 212, .22)
}

.about-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent
}

.about-shot.is-main {
  aspect-ratio: 5/5;
  border-radius: 26px
}

.about-shot.is-sub {
  position: absolute;
  right: -1.6rem;
  bottom: 0;
  width: 50%;
  aspect-ratio: 1;
  border: 6px solid #fff;
  border-radius: 22px
}

.about-shot.is-mini {
  position: absolute;
  right: -1.2rem;
  bottom: 2.2rem;
  width: 30%;
  aspect-ratio: 1;
  border: 5px solid #fff;
  border-radius: 50%
}

.about-badge {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem .6rem .7rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 8px 20px rgba(13, 71, 161, .2);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink)
}

.about-badge i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff
}

.about-years {
  position: absolute;
  left: -1.4rem;
  top: 2.4rem;
  z-index: 3;
  display: grid;
  place-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px #fff, 0 16px 30px rgba(21, 96, 212, .4);
  text-align: center;
  line-height: 1.15;
  color: #fff
}

.about-years b {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff
}

.about-years b::after {
  content: "+"
}

.about-years span {
  font-size: .72rem;
  font-weight: 600
}

@media (max-width:991.98px) {
  .about-gallery {
    float: none;
    width: 100%;
    max-width: 540px;
    margin: 0 auto 2.6rem
  }

  .about-shot.is-sub {
    right: -.4rem
  }

  .about-shot.is-mini {
    right: -.3rem
  }

  .about-years {
    left: -.3rem
  }
}

@media (max-width:767.98px) {
  .about-content table {
    display: block;
    overflow-x: auto
  }
}

@media (max-width:575.98px) {
  .about-years {
    width: 88px;
    height: 88px
  }

  .about-years b {
    font-size: 1.55rem
  }

  .about-badge {
    left: .7rem;
    bottom: .7rem;
    font-size: .75rem
  }
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px
}

/* ---------- Product listing ---------- */
.prod {
  position: relative;
  padding: clamp(3rem, 7vw, 6rem) 0;
  background: var(--zinc);
  counter-reset: prod;
  overflow: hidden
}

.prod::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 96, 212, .12), transparent 70%)
}

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

.prod-head {
  margin-bottom: 2.6rem;
  align-items: flex-end
}

.prod-subtitle {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue)
}

.prod-subtitle::after {
  content: "";
  width: 44px;
  height: 2px;
  background: var(--blue)
}

.prod-title {
  margin: .8rem 0 0;
  max-width: 18ch;
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.1;
  letter-spacing: -.02em
}

.prod-intro {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--steel)
}

.prod-row {
  justify-content: center
}

.prod-col {
  display: flex
}

.prod-card {
  counter-increment: prod;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform .3s, box-shadow .3s, border-color .3s
}

.prod-card:hover,
.prod-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--blue);
  box-shadow: 0 22px 44px rgba(13, 71, 161, .15)
}

.prod-img {
  position: relative;
  display: block;
  aspect-ratio: 4/4;
  overflow: hidden;
  /* background: repeating-linear-gradient(115deg, rgba(21, 96, 212, .05) 0 2px, transparent 2px 14px), linear-gradient(135deg, #e3edfc, #f6f9ff) */
}

.prod-img::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  color: rgba(21, 96, 212, .2)
}

.prod-img::after {
  content: counter(prod, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: .9rem;
  z-index: 2;
  padding: .15rem .7rem;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(13, 71, 161, .15);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--blue)
}

.prod-img img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* padding: 9%; */
  object-fit: contain;
  color: transparent;
  transition: transform .5s
}

.prod-card:hover .prod-img img {
  transform: scale(1.08) rotate(-3deg)
}

.prod-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
  background: #ebf6ff;
}

.prod-name {
  display: block;
  margin-bottom: .55rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  transition: color .2s
}

.prod-name:hover {
  color: var(--blue)
}

.prod-desc {
  flex: 1;
  margin: 0 0 1.3rem;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--steel)
}

.prod-actions {
  display: flex;
  gap: .6rem
}

.prod-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem .8rem;
  border: 1.5px solid var(--blue);
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s
}

.prod-btn i {
  font-size: .8rem;
  transition: transform .2s
}

.prod-btn:hover i {
  transform: translateX(3px)
}

.prod-btn.is-line {
  background: #fff;
  color: var(--blue)
}

.prod-btn.is-line:hover {
  background: var(--sky)
}

.prod-btn.is-fill {
  background: var(--blue);
  color: #fff
}

.prod-btn.is-fill:hover {
  background: var(--blue-d);
  border-color: var(--blue-d)
}

@media (max-width:575.98px) {
  .prod-actions {
    flex-direction: column
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    transition: none !important
  }
}


/* ---------- Why choose us: scroll story ---------- */
.why {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: linear-gradient(180deg, #fff 0%, var(--zinc) 100%);
  overflow: clip;
  isolation: isolate
}

.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(21, 96, 212, .04) 0 2px, transparent 2px 16px)
}

.why::after {
  content: "\f013";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -120px;
  top: -100px;
  z-index: -1;
  font-size: 440px;
  line-height: 1;
  color: rgba(21, 96, 212, .06);
  animation: why-spin 50s linear infinite
}

.why-head {
  max-width: 720px;
  margin: 0 auto 3.2rem;
  text-align: center
}

.why-subtitle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(13, 71, 161, .08);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue)
}

.why-title {
  margin: 1.1rem 0 .9rem;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.1;
  letter-spacing: -.02em
}

.why-intro {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--steel)
}

/* layout: sticky image stage + scrolling steps (stage sticks on mobile too) */
.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem
}

.why-stage {
  position: sticky;
  align-self: start;
  top: 70px;
  z-index: 5;
  padding: .5rem 0 1rem;
  background: linear-gradient(#fff 82%, rgba(255, 255, 255, 0))
}

.why-frame {
  position: relative;
  height: 210px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #dbe8fb, #f1f6fe);
  box-shadow: 0 18px 36px rgba(13, 71, 161, .2)
}

.why-pic {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: repeating-linear-gradient(115deg, rgba(21, 96, 212, .05) 0 2px, transparent 2px 14px), linear-gradient(135deg, #dbe8fb, #f1f6fe)
}

.why-pic.is-on {
  visibility: visible
}

.why-pic::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  color: rgba(21, 96, 212, .22)
}

.why-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent
}

.why-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 5;
  height: 40%;
  background: linear-gradient(transparent, rgba(11, 36, 71, .35));
  pointer-events: none
}

/* progress ring + counter */
.why-count {
  position: absolute;
  right: .7rem;
  top: 1.2rem;
  z-index: 6;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(13, 71, 161, .28)
}

.why-count svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.why-count circle {
  fill: none;
  stroke-width: 6
}

.why-ring-track {
  stroke: var(--line)
}

.why-ring-bar {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46
}

.why-count span {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--steel)
}

.why-count b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink)
}

/* steps with thread line */
.why-steps {
  position: relative;
  counter-reset: why
}

.why-steps::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  border-left: 2px dashed #b9cff0
}

.why-line {
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 5px;
  background: repeating-linear-gradient(180deg, var(--blue) 0 6px, #6fa8ff 6px 12px);
  transform-origin: top
}

.why-js .why-line {
  transform: scaleY(0)
}

.why-step {
  counter-increment: why;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 1.2rem;
  min-height: 46vh;
  padding: 1.5rem 0 1.5rem 4.2rem
}

.why-js .why-step {
  opacity: .38;
  transition: opacity .5s
}

.why-js .why-step:hover {
  opacity: .8
}

.why-js .why-step.is-on,
.why-js .why-step.is-on:hover {
  opacity: 1
}

.why-step-body {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  transition: transform .4s
}

.why-step:hover .why-step-body {
  transform: translateX(8px)
}

/* small image on the right: slides in from the left (GSAP) when its step enters view */
.why-thumb {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 18px;
  background: repeating-linear-gradient(115deg, rgba(21, 96, 212, .05) 0 2px, transparent 2px 14px), linear-gradient(135deg, #dbe8fb, #f1f6fe);
  box-shadow: 0 16px 32px rgba(13, 71, 161, .22)
}

.why-thumb::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: rgba(21, 96, 212, .22)
}

.why-thumb::after {
  content: counter(why, decimal-leading-zero);
  position: absolute;
  left: .55rem;
  top: .55rem;
  z-index: 2;
  padding: .05rem .6rem;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(13, 71, 161, .2);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--blue)
}

.why-thumb img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent;
  transition: scale .6s cubic-bezier(.2, .8, .2, 1)
}

.why-step:hover .why-thumb img {
  scale: 1.12
}

.why-node {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
  margin-top: -29px;
  font-size: 1.15rem;
  color: var(--blue)
}

.why-node::before,
.why-node::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), background .4s
}

.why-node::before {
  inset: 0;
  background: var(--blue)
}

.why-node::after {
  inset: 3px;
  background: #fff
}

.why-node i {
  position: relative;
  z-index: 1;
  transition: color .4s
}

.why-step:hover .why-node::before,
.why-step:hover .why-node::after {
  transform: rotate(180deg)
}

.why-step.is-on .why-node {
  animation: why-pulse 2.2s ease-in-out infinite
}

.why-step.is-on .why-node::after {
  background: var(--blue)
}

.why-step.is-on .why-node i {
  color: #fff
}

.why-name {
  display: block;
  margin-bottom: .7rem;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  transition: color .4s
}

.why-step.is-on .why-name {
  color: var(--blue)
}

.why-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--steel)
}

.why-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none
}

.why-points li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .9rem .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(13, 71, 161, .06);
  font-size: .85rem;
  font-weight: 600;
  color: #2a3d5a
}

.why-points li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--blue);
  font-size: 1rem;
  line-height: 1
}

@media (min-width:992px) {
  .why-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4.5rem
  }

  .why-stage {
    top: 96px;
    z-index: auto;
    padding: 0;
    background: none
  }

  .why-stage::before {
    content: "";
    position: absolute;
    left: -18px;
    top: -18px;
    width: 62%;
    height: 62%;
    border: 2px dashed #9dbcec;
    border-radius: 34px
  }

  .why-stage::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 48%;
    height: 44%;
    border-radius: 34px;
    background: linear-gradient(135deg, var(--sky), #cfe0fb)
  }

  .why-frame {
    height: min(72vh, 600px);
    border-radius: 28px;
    z-index: 1
  }

  .why-count {
    right: -28px;
    top: 28px;
    width: 100px;
    height: 100px
  }

  .why-count span {
    font-size: .7rem
  }

  .why-count b {
    font-size: 1.7rem
  }

  .why-steps::before {
    left: 31px
  }

  .why-line {
    left: 29px
  }

  .why-step {
    grid-template-columns: minmax(0, 1fr) 170px;
    align-items: center;
    gap: 1.8rem;
    min-height: 40vh;
    padding-left: 5.2rem
  }

  .why-thumb {
    width: 170px;
    max-width: none;
    aspect-ratio: 4/5;
    justify-self: end;
    rotate: 2deg
  }

  .why-node {
    width: 64px;
    height: 72px;
    margin-top: -36px;
    font-size: 1.4rem
  }
}

@keyframes why-spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes why-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(21, 96, 212, .5))
  }

  50% {
    filter: drop-shadow(0 0 12px rgba(21, 96, 212, .75))
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}

/* ---------- Testimonials: Modern Single Marquee ---------- */
.tm {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) 0;
  background: radial-gradient(circle at 50% 0%, #f1f5f9 0%, #ffffff 75%);
  overflow: hidden;
  isolation: isolate;
}

.tm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(21, 96, 212, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.tm::after {
  content: "\f10e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -20px;
  top: -20px;
  z-index: -1;
  font-size: 320px;
  line-height: 1;
  color: rgba(21, 96, 212, 0.035);
}

/* Header Styling */
.tm-head {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.tm-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem;
  border: 1px solid rgba(21, 96, 212, 0.15);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(13, 71, 161, 0.06);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.tm-title {
  margin: 1.2rem 0 1rem;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.tm-intro {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--steel);
}

.tm-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  font-size: 0.92rem;
  color: var(--steel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.tm-rating b {
  color: var(--ink);
}

.tm-rating .tm-stars {
  margin: 0;
}

/* Single Track Motion */
.tm-row {
  padding: 1.5rem 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

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

.tm-set {
  display: flex;
  flex: 0 0 auto;
}

@keyframes tm-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Modernized Card Styles */
.tm-card {
  position: relative;
  flex: 0 0 auto;
  width: 400px;
  margin-right: 1.75rem;
  padding: 2rem 1.8rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(11, 36, 71, 0.05);
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.tm-card.is-blue {
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 100%);
  color: #fff;
  box-shadow: 0 14px 36px rgba(21, 96, 212, 0.25);
}

.tm-quote {
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sky);
  font-size: 0.95rem;
  color: var(--blue);
}

.is-blue .tm-quote {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.tm-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  color: var(--star);
}

.tm-text {
  margin: 0 0 1.6rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--steel);
}

.is-blue .tm-text {
  color: rgba(255, 255, 255, 0.92);
}

.tm-user {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.2rem;
  border-top: 1px solid #f1f5f9;
}

.is-blue .tm-user {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.tm-avatar {
  position: relative;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 2px solid var(--sky);
  border-radius: 50%;
  background: linear-gradient(135deg, #dbe8fb, #f1f6fe);
}

.tm-avatar::before {
  content: "\f007";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: rgba(21, 96, 212, 0.3);
}

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

.is-blue .tm-avatar {
  border-color: rgba(255, 255, 255, 0.4);
}

.tm-who b {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}

.tm-who small {
  display: block;
  font-size: 0.84rem;
  color: var(--steel);
}

.is-blue .tm-who small {
  color: rgba(255, 255, 255, 0.78);
}

/* Dynamic Focus Effects on Hover */
.tm:has(.tm-card:hover) .tm-track {
  animation-play-state: paused;
}

.tm:has(.tm-card:hover) .tm-card:not(:hover) {
  filter: blur(3px);
  opacity: 0.5;
  transform: scale(0.96);
}

.tm-card:hover {
  z-index: 5;
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(21, 96, 212, 0.4);
  box-shadow: 0 24px 48px rgba(13, 71, 161, 0.16);
}

.tm-card.is-blue:hover {
  box-shadow: 0 24px 48px rgba(13, 71, 161, 0.35);
}

@media (max-width: 575.98px) {
  .tm-card {
    width: 310px;
    margin-right: 1.2rem;
    padding: 1.5rem 1.4rem 1.3rem;
  }

  .tm-track {
    animation-duration: 35s;
  }
}

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

  .tm-row {
    overflow-x: auto;
  }

  .tm-set[aria-hidden="true"] {
    display: none;
  }
}


/* ---------- FAQ ---------- */
.faq {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: linear-gradient(180deg, #fff 0%, var(--zinc) 100%);
  overflow: hidden;
  isolation: isolate
}

.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(115deg, rgba(21, 96, 212, .035) 0 2px, transparent 2px 16px)
}

.faq::after {
  content: "\3f";
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  position: absolute;
  left: -40px;
  bottom: -120px;
  z-index: -1;
  font-size: 520px;
  line-height: 1;
  color: rgba(21, 96, 212, .06)
}

.faq-head {
  margin-bottom: 1.6rem
}

.faq-subtitle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(13, 71, 161, .08);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue)
}

.faq-title {
  margin: 1.1rem 0 .8rem;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.1;
  letter-spacing: -.02em
}

.faq-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--steel)
}

/* accordion (Bootstrap collapse, restyled; no heading tags) */
.faq-list {
  counter-reset: faq
}

.faq-list .faq-item {
  counter-increment: faq;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff;
  box-shadow: 0 6px 18px rgba(13, 71, 161, .05);
  transition: transform .35s, border-color .35s, box-shadow .35s
}

.faq-list .faq-item:hover {
  transform: translateX(6px);
  border-color: #9dbcec !important;
  box-shadow: 0 14px 30px rgba(13, 71, 161, .1)
}

.faq-list .faq-item.is-open {
  border-color: var(--blue) !important;
  box-shadow: 0 16px 34px rgba(13, 71, 161, .14)
}

.faq-list .faq-q {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--ink)
}

.faq-list .faq-q::after {
  display: none
}

.faq-list .faq-q:not(.collapsed) {
  background: var(--sky);
  box-shadow: inset 4px 0 0 var(--blue);
  color: var(--blue-d)
}

.faq-list .faq-q:focus {
  box-shadow: none
}

.faq-list .faq-q:not(.collapsed):focus {
  box-shadow: inset 4px 0 0 var(--blue)
}

.faq-num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--sky);
  font-size: .9rem;
  font-weight: 800;
  color: var(--blue);
  transition: background .3s, color .3s, transform .4s
}

.faq-num::before {
  content: counter(faq, decimal-leading-zero)
}

.faq-q:not(.collapsed) .faq-num {
  background: var(--blue);
  color: #fff;
  transform: rotate(-6deg)
}

.faq-text {
  flex: 1
}

.faq-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-size: .8rem;
  color: var(--blue);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s, color .3s, border-color .3s
}

.faq-q:hover .faq-icon {
  border-color: var(--blue)
}

.faq-q:not(.collapsed) .faq-icon {
  transform: rotate(135deg);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.faq-list .faq-a {
  padding: 1.1rem 1.4rem 1.5rem 5.4rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--steel)
}

.faq-a p {
  margin: 0
}

.faq-a p+p,
.faq-a p+ul {
  margin-top: .8rem
}

.faq-a ul {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0
}

.faq-a li {
  position: relative;
  padding: .2rem 0 .2rem 1.9rem;
  font-weight: 600;
  color: #2a3d5a
}

.faq-a li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .25rem;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--blue)
}

.faq-a strong {
  color: var(--ink)
}

/* CTA card */
.faq-cta {
  position: relative;
  overflow: hidden;
  padding: 2.2rem 1.8rem 1.8rem;
  border-radius: 26px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px), linear-gradient(160deg, #1a6be0 0%, var(--blue-d) 100%);
  box-shadow: 0 30px 60px rgba(13, 71, 161, .32);
  color: #fff;
  isolation: isolate
}

.faq-cta::before {
  content: "\f013";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -70px;
  top: -70px;
  z-index: -1;
  font-size: 260px;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  animation: faq-spin 40s linear infinite
}

.faq-cta-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 86px;
  margin-bottom: 1.4rem;
  font-size: 1.8rem;
  color: var(--blue);
  filter: drop-shadow(0 10px 16px rgba(5, 30, 80, .35))
}

.faq-cta-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1)
}

.faq-cta:hover .faq-cta-icon::before {
  transform: rotate(360deg)
}

.faq-cta-icon i {
  position: relative;
  animation: faq-ring 3s ease-in-out infinite
}

.faq-cta-title {
  margin: 0 0 .6rem;
  font-size: 1.7rem;
  font-weight: 800;
  font-stretch: 90%;
  line-height: 1.15;
  letter-spacing: -.01em
}

.faq-cta-text {
  margin: 0 0 1.5rem;
  font-size: .98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86)
}

.faq-call {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .9rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 24px rgba(5, 30, 80, .25);
  transition: transform .3s, box-shadow .3s
}

.faq-call:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px rgba(5, 30, 80, .32)
}

.faq-call i {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue);
  font-size: 1.05rem;
  color: #fff
}

.faq-call i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--blue);
  animation: faq-pulse 2s ease-out infinite
}

.faq-call small {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--steel)
}

.faq-call b {
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3
}

.faq-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  overflow: hidden;
  margin-bottom: .7rem;
  padding: .9rem 1rem;
  border: 1.5px solid #fff;
  border-radius: 14px;
  font-size: .98rem;
  font-weight: 700;
  transition: background .3s, color .3s
}

.faq-btn i {
  transition: transform .3s
}

.faq-btn:hover i {
  transform: translateX(4px)
}

.faq-btn.is-solid {
  background: #fff;
  color: var(--blue)
}

.faq-btn.is-solid::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(21, 96, 212, .18), transparent);
  transform: skewX(-20deg);
  animation: faq-shine 3.2s ease-in-out infinite
}

.faq-btn.is-solid:hover {
  background: var(--sky)
}

.faq-btn.is-line {
  color: #fff
}

.faq-btn.is-line:hover {
  background: #fff;
  color: var(--blue)
}

.faq-time {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, .35);
  font-size: .85rem;
  text-align: center;
  color: rgba(255, 255, 255, .85)
}

.faq-time i {
  margin-right: .4rem
}

@keyframes faq-spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes faq-pulse {
  0% {
    transform: scale(1);
    opacity: .7
  }

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

@keyframes faq-shine {

  0%,
  60% {
    left: -80%
  }

  100% {
    left: 140%
  }
}

@keyframes faq-ring {

  0%,
  70%,
  100% {
    transform: rotate(0)
  }

  75% {
    transform: rotate(-14deg)
  }

  80% {
    transform: rotate(12deg)
  }

  85% {
    transform: rotate(-10deg)
  }

  90% {
    transform: rotate(8deg)
  }
}

@media (min-width:992px) and (min-height:860px) {
  .faq-side {
    position: sticky;
    top: 96px
  }
}

@media (max-width:991.98px) {

  /* header sits above the FAQs, CTA below them */
  .faq-side {
    display: contents
  }

  .faq-side-box {
    flex: 0 0 auto;
    width: 100%;
    margin-top: var(--bs-gutter-y);
    padding-inline: calc(var(--bs-gutter-x) * .5)
  }

  .faq-side-box:first-child {
    order: -1;
    margin-top: 0
  }

  .faq-head {
    margin-bottom: 0
  }
}

@media (max-width:575.98px) {
  .faq-list .faq-q {
    gap: .75rem;
    padding: 1rem;
    font-size: 1rem
  }

  .faq-num {
    width: 36px;
    height: 36px;
    border-radius: 10px
  }

  .faq-list .faq-a {
    padding: 1rem 1.1rem 1.3rem
  }

  .faq-list .faq-item:hover {
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition: none !important
  }
}

/* ---------- CTA / contact ---------- */
    .cta {
      position: relative;
      padding: clamp(3.5rem, 8vw, 6.5rem) 0;
      background: linear-gradient(180deg, var(--zinc) 0%, #fff 100%);
      overflow: hidden;
      isolation: isolate
    }
 

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: clamp(1.5rem, 4vw, 3.4rem);
      border-radius: 32px;
      background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px), linear-gradient(135deg, #0a3580 0%, var(--blue) 100%);
      box-shadow: 0 36px 70px rgba(13, 71, 161, .3);
      color: #fff;
      isolation: isolate
    }

    .cta-panel::before {
      content: "\f013";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: -110px;
      bottom: -130px;
      z-index: -1;
      font-size: 420px;
      line-height: 1;
      color: rgba(255, 255, 255, .06);
      animation: cta-spin 50s linear infinite
    }

    .cta-float {
      position: absolute;
      z-index: -1;
      width: 80px;
      height: 90px;
      right: 6%;
      top: -20px;
      background: rgba(255, 255, 255, .08);
      clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
      animation: cta-float 9s ease-in-out infinite
    }

    /* left: intro + contact details */
    .cta-subtitle {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .4rem 1.1rem;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 99px;
      background: rgba(255, 255, 255, .12);
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase
    }

    .cta-title {
      margin: 1.1rem 0 .9rem;
      font-size: clamp(1.9rem, 3.8vw, 2.9rem);
      font-weight: 800;
      font-stretch: 90%;
      line-height: 1.1;
      letter-spacing: -.02em
    }

    .cta-text {
      margin: 0 0 1.8rem;
      font-size: 1.02rem;
      line-height: 1.7;
      color: rgba(255, 255, 255, .85)
    }

    .cta-info {
      margin: 0 0 1.6rem;
      padding: 0;
      list-style: none
    }

    .cta-info li+li {
      margin-top: 1rem
    }

    .cta-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      transition: transform .3s
    }

    a.cta-item:hover {
      transform: translateX(6px)
    }

    .cta-ico {
      position: relative;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 54px;
      height: 60px;
      font-size: 1.1rem;
      color: #fff
    }

    .cta-ico::before,
    .cta-ico::after {
      content: "";
      position: absolute;
      clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
      transition: background .3s, transform .8s cubic-bezier(.2, .8, .2, 1)
    }

    .cta-ico::before {
      inset: 0;
      background: rgba(255, 255, 255, .45)
    }

    .cta-ico::after {
      inset: 2px;
      background: #0f4cae
    }

    .cta-ico i {
      position: relative;
      z-index: 1;
      transition: color .3s
    }

    a.cta-item:hover .cta-ico::before,
    a.cta-item:hover .cta-ico::after {
      transform: rotate(180deg)
    }

    a.cta-item:hover .cta-ico::after {
      background: #fff
    }

    a.cta-item:hover .cta-ico i {
      color: var(--blue)
    }

    .cta-lbl small {
      display: block;
      font-size: .8rem;
      font-weight: 600;
      color: rgba(255, 255, 255, .7)
    }

    .cta-lbl b {
      display: block;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1.45
    }

    .cta-social {
      display: flex;
      gap: .6rem
    }

    .cta-social a {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1.5px solid rgba(255, 255, 255, .4);
      border-radius: 50%;
      transition: background .3s, color .3s, transform .3s
    }

    .cta-social a:hover {
      background: #fff;
      color: var(--blue);
      transform: translateY(-4px)
    }

    /* right: form card */
    .cta-form {
      position: relative;
      padding: clamp(1.4rem, 3vw, 2.2rem);
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 26px 50px rgba(5, 30, 80, .3);
      color: var(--ink)
    }

    .cta-form-title {
      margin: 0 0 .3rem;
      font-size: 1.5rem;
      font-weight: 800;
      font-stretch: 90%;
      line-height: 1.2
    }

    .cta-form-sub {
      margin: 0 0 1.5rem;
      font-size: .95rem;
      color: var(--steel)
    }

    .cta-field label {
      display: block;
      margin-bottom: .4rem;
      font-size: .85rem;
      font-weight: 700;
      color: var(--ink)
    }

    .cta-field label span {
      color: var(--err)
    }

    .cta-input {
      display: flex;
      align-items: center;
      border: 1.5px solid var(--line);
      border-radius: 14px;
      background: #fff;
      transition: border-color .3s, box-shadow .3s, background .3s
    }

    .cta-input>i:first-child {
      flex-shrink: 0;
      width: 3rem;
      text-align: center;
      color: var(--steel);
      transition: color .3s
    }

    .cta-input input,
    .cta-input select,
    .cta-input textarea {
      flex: 1;
      min-width: 0;
      padding: .85rem 1rem .85rem 0;
      border: 0;
      outline: 0;
      background: transparent;
      font: inherit;
      font-size: .98rem;
      color: var(--ink)
    }

    .cta-input input::placeholder,
    .cta-input textarea::placeholder {
      color: #93a3b8
    }

    .cta-input select {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer
    }

    .cta-input select:invalid {
      color: #93a3b8
    }

    .cta-input select option {
      color: var(--ink)
    }

    .cta-input textarea {
      resize: vertical;
      min-height: 120px
    }

    .cta-input.is-area {
      align-items: flex-start
    }

    .cta-input.is-area>i:first-child {
      padding-top: 1.1rem
    }

    .cta-caret {
      padding-right: 1rem;
      font-size: .8rem;
      color: var(--steel);
      pointer-events: none
    }

    .cta-input:hover {
      border-color: #9dbcec
    }

    .cta-input:focus-within {
      border-color: var(--blue);
      background: var(--sky);
      box-shadow: 0 0 0 4px rgba(21, 96, 212, .15)
    }

    .cta-input:focus-within>i:first-child {
      color: var(--blue)
    }

    .cta-input:has(:user-invalid) {
      border-color: var(--err);
      box-shadow: 0 0 0 4px rgba(217, 58, 58, .1)
    }

    .cta-submit {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .7rem;
      width: 100%;
      overflow: hidden;
      margin-top: 1.4rem;
      padding: 1rem;
      border: 0;
      border-radius: 14px;
      background: var(--blue);
      font: inherit;
      font-size: 1.02rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: background .3s, transform .3s, box-shadow .3s
    }

    .cta-submit::after {
      content: "";
      position: absolute;
      top: 0;
      left: -80%;
      width: 50%;
      height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
      transform: skewX(-20deg);
      animation: cta-shine 3.4s ease-in-out infinite
    }

    .cta-submit i {
      transition: transform .3s
    }

    .cta-submit:hover {
      background: var(--blue-d);
      transform: translateY(-2px);
      box-shadow: 0 14px 26px rgba(21, 96, 212, .4)
    }

    .cta-submit:hover i {
      transform: translateX(5px) rotate(-8deg)
    }

    .cta-note {
      margin: 1rem 0 0;
      font-size: .82rem;
      text-align: center;
      color: var(--steel)
    }

    .cta-note i {
      margin-right: .4rem;
      color: var(--blue)
    }

    /* map */
    .cta-map {
      position: relative;
      margin-top: 2.2rem;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow: 0 24px 50px rgba(13, 71, 161, .14)
    }

    .cta-map iframe {
      display: block;
      width: 100%;
      height: 440px;
      border: 0;
      filter: saturate(.8) contrast(1.02);
      transition: filter .5s
    }

    .cta-map:hover iframe {
      filter: none
    }

    .cta-pin {
      position: absolute;
      left: 1.6rem;
      bottom: 1.6rem;
      max-width: 320px;
      padding: 1.3rem 1.4rem;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 20px 40px rgba(13, 71, 161, .28)
    }

    .cta-pin-ico {
      position: relative;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      margin-bottom: .8rem;
      border-radius: 50%;
      background: var(--blue);
      font-size: 1.1rem;
      color: #fff
    }

    .cta-pin-ico::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid var(--blue);
      animation: cta-pulse 2s ease-out infinite
    }

    .cta-pin-title {
      margin: 0 0 .25rem;
      font-size: 1.15rem;
      font-weight: 800
    }

    .cta-pin-text {
      margin: 0 0 1rem;
      font-size: .92rem;
      line-height: 1.55;
      color: var(--steel)
    }

    .cta-pin-btn {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .6rem 1.1rem;
      border: 1.5px solid var(--blue);
      border-radius: 10px;
      font-size: .9rem;
      font-weight: 700;
      color: var(--blue);
      transition: background .3s, color .3s
    }

    .cta-pin-btn:hover {
      background: var(--blue);
      color: #fff
    }

    @keyframes cta-spin {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes cta-float {

      0%,
      100% {
        transform: translateY(0) rotate(0)
      }

      50% {
        transform: translateY(18px) rotate(25deg)
      }
    }

    @keyframes cta-shine {

      0%,
      55% {
        left: -80%
      }

      100% {
        left: 140%
      }
    }

    @keyframes cta-pulse {
      0% {
        transform: scale(1);
        opacity: .7
      }

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

    @media (max-width:767.98px) {
      .cta-panel {
        border-radius: 24px
      }

      .cta-map iframe {
        height: 320px
      }

      .cta-pin {
        position: static;
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid var(--line)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }
    }

    /* ---------- Footer ---------- */
    .ft {
      position: relative;
      margin-top: 2rem;
      padding-top: 3.4rem;
      background: radial-gradient(rgba(255, 255, 255, .045) 1.4px, transparent 1.5px) 0 0/22px 22px, var(--ft-bg);
      color: var(--ft-text);
      overflow: hidden
    }

    /* scalloped top edge, drawn in the colour of the section above */
    .ft-edge {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 14px;
      background: radial-gradient(circle at 50% 0, var(--ft-above) 11px, transparent 12px) 0 0/24px 14px repeat-x
    }

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

    /* big brand watermark */
    .ft-mark {
      margin: 0;
      text-align: center;
      white-space: nowrap;
      text-transform: uppercase;
      font-size: clamp(1.5rem, 7.4vw, 6.7rem);
      font-weight: 800;
      line-height: .9;
      letter-spacing: -.02em;
      background: linear-gradient(180deg, #fff 20%, rgba(180, 205, 245, .35) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      user-select: none
    }

    /* newsletter card */
    .ft-news {
      position: relative;
      margin: -.2rem 0 4rem;
      padding: 2.2rem clamp(1.4rem, 4vw, 3rem) 2.2rem;
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 26px;
      background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 16px), linear-gradient(135deg, #1a6be0, var(--blue-d));
      box-shadow: 14px 14px 0 #07295f, 0 30px 60px rgba(0, 0, 0, .4);
      color: #fff
    }

    .ft-plane {
      position: absolute;
      left: 1.6rem;
      top: -34px;
      display: grid;
      place-items: center;
      width: 66px;
      height: 66px;
      border: 3px solid var(--ft-bg);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
      font-size: 1.5rem;
      color: var(--blue);
      transition: transform .5s
    }

    .ft-plane i {
      transition: transform .6s cubic-bezier(.2, .8, .2, 1)
    }

    .ft-news:hover .ft-plane {
      transform: rotate(-8deg) scale(1.06)
    }

    .ft-news:hover .ft-plane i {
      transform: translate(4px, -4px)
    }

    .ft-news-title {
      margin: .6rem 0 .4rem;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      font-weight: 800;
      font-stretch: 90%;
      line-height: 1.15;
      letter-spacing: -.01em
    }

    .ft-news-text {
      margin: 0;
      font-size: .98rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, .85)
    }

    .ft-form {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .45rem;
      border: 3px solid rgba(255, 255, 255, .95);
      border-radius: 99px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .25)
    }

    .ft-form>i {
      flex-shrink: 0;
      padding-left: 1.1rem;
      color: var(--blue)
    }

    .ft-form input {
      flex: 1;
      min-width: 0;
      padding: .7rem .4rem;
      border: 0;
      outline: 0;
      background: transparent;
      font: inherit;
      font-size: .98rem;
      color: var(--ink)
    }

    .ft-form input::placeholder {
      color: #8a9bb3
    }

    .ft-form button {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      flex-shrink: 0;
      padding: .85rem 1.4rem;
      border: 0;
      border-radius: 99px;
      background: var(--ink);
      font: inherit;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      cursor: pointer;
      transition: background .3s, transform .3s
    }

    .ft-form button i {
      transition: transform .3s
    }

    .ft-form button:hover {
      background: var(--blue)
    }

    .ft-form button:hover i {
      transform: translateX(5px)
    }

    .ft-form:focus-within {
      box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 10px 24px rgba(0, 0, 0, .25)
    }

    /* columns */
    .ft-cols {
      padding-bottom: 3rem
    }

    .ft-brand {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin-bottom: 1.2rem
    }

    .ft-logo {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: var(--blue);
      box-shadow: 0 10px 20px rgba(21, 96, 212, .4);
      font-size: 1.4rem;
      color: #fff;
      transform: rotate(-10deg);
      transition: transform .5s
    }

    .ft-brand:hover .ft-logo {
      transform: rotate(0) scale(1.06)
    }

    .ft-brand-name {
      font-size: 1.5rem;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -.01em;
      color: #fff
    }

    .ft-brand-name small {
      display: block;
      margin-top: .2rem;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #8fb4ee
    }

    .ft-about {
      margin: 0 0 1.5rem;
      max-width: 36ch;
      font-size: .98rem;
      line-height: 1.75
    }

    .ft-social {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem
    }

    .ft-social a {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1.5px solid rgba(255, 255, 255, .22);
      border-radius: 50%;
      color: #fff;
      transition: background .3s, border-color .3s, transform .3s
    }

    .ft-social a:hover {
      background: var(--blue);
      border-color: var(--blue);
      transform: translateY(-5px) rotate(-8deg)
    }

    .ft-title {
      display: flex;
      align-items: center;
      gap: .8rem;
      margin: 0 0 1.5rem;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: #fff
    }

    .ft-title::after {
      content: "";
      width: 44px;
      height: 2px;
      background: var(--blue);
      transition: width .4s
    }

    .ft-col:hover .ft-title::after {
      width: 70px
    }

    .ft-links li+li {
      margin-top: .75rem
    }

    .ft-links a {
      position: relative;
      display: inline-block;
      padding-left: 0;
      transition: padding .3s, color .3s
    }

    .ft-links a::before {
      content: "\f105";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      color: #6fa8ff;
      transform: translateX(-6px);
      transition: opacity .3s, transform .3s
    }

    .ft-links a:hover {
      padding-left: 1.1rem;
      color: #fff
    }

    .ft-links a:hover::before {
      opacity: 1;
      transform: none
    }

    .ft-contact li {
      display: flex;
      align-items: flex-start;
      gap: .9rem
    }

    .ft-contact li+li {
      margin-top: 1.1rem
    }

    .ft-ci {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
      font-size: .95rem;
      color: #6fa8ff;
      transition: background .3s, color .3s, transform .4s
    }

    .ft-contact li:hover .ft-ci {
      background: var(--blue);
      color: #fff;
      transform: rotate(360deg)
    }

    .ft-contact span.ft-ct {
      padding-top: .5rem;
      line-height: 1.5
    }

    .ft-contact a:hover {
      color: #fff
    }

    /* bottom bar */
    .ft-bottom {
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(255, 255, 255, .12)
    }

    .ft-bottom-in {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .6rem 1.5rem;
      padding-block: 1.3rem;
      font-size: .9rem
    }

    .ft-bottom a {
      color: #fff;
      font-weight: 600;
      transition: color .3s
    }

    .ft-bottom a:hover {
      color: #6fa8ff
    }

    
  

    @media (max-width:767.98px) {
      .ft-news {
        margin-bottom: 3rem;
        box-shadow: 8px 8px 0 #07295f, 0 24px 50px rgba(0, 0, 0, .4)
      }

      .ft-form {
        border-radius: 22px;
        flex-wrap: wrap;
        padding: .5rem
      }

      .ft-form>i {
        display: none
      }

      .ft-form input {
        flex: 1 1 100%;
        padding: .7rem .9rem
      }

      .ft-form button {
        flex: 1 1 100%;
        justify-content: center;
        border-radius: 16px
      }

      .ft-bottom-in {
        flex-direction: column;
        text-align: center
      }

      
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }
    }



    /* ══════════════════════════════════════════════
       CALL NOW — LEFT BOTTOM (stacked above WhatsApp)
    ══════════════════════════════════════════════ */
.call-float {
    position: fixed;
    left: 24px;
    bottom: 104px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Main Call button */
.call-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    text-decoration: none;
}

/* Outer animated ring */
.call-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid #1560d473;
    animation: wa-spin-ring 6s linear infinite;
    pointer-events: none;
}

.call-ring::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 6px var(--crimson);
}

/* Second pulse ring */
.call-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #1560d473;
    animation: wa-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

/* Circle core */
.call-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-d) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 24px #f16b1146,
        0 2px 8px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s;
    position: relative;
    z-index: 2;
}

.call-btn:hover .call-circle {
    transform: scale(1.1) rotate(8deg);
    box-shadow:
        0 10px 36px #1560d4,
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.call-circle i {
    font-size: 1.4rem;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* "Call" label pill that slides out on hover */
.call-label-pill {
    background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-d) 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0 0 0;
    border-radius: 0 50px 50px 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    margin-left: -10px;
    height: 40px;
    display: flex;
    align-items: center;
    transition:
        max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s,
        padding 0.28s,
        margin 0.28s;
    box-shadow: 0 4px 18px #1560d4;
}

.call-btn:hover .call-label-pill {
    max-width: 130px;
    opacity: 1;
    padding: 0 16px 0 14px;
    margin-left: -8px;
}

/* ══════════════════════════════════════════════
       WHATSAPP — LEFT BOTTOM
    ══════════════════════════════════════════════ */
.wa-float {
    position: fixed;
    left: 24px;
    bottom: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Main WA button */
.wa-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    text-decoration: none;
}

/* Outer animated ring */
.wa-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, 0.35);
    animation: wa-spin-ring 6s linear infinite;
    pointer-events: none;
}

.wa-ring::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 6px #25d366;
}

@keyframes wa-spin-ring {
    0% {
        transform: rotate(0deg);
    }

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

/* Second pulse ring */
.wa-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.15);
    animation: wa-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes wa-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

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

/* Circle core */
.wa-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366 0%, #128c4e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 6px 24px rgba(37, 211, 102, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s;
    position: relative;
    z-index: 2;
}

.wa-btn:hover .wa-circle {
    transform: scale(1.1) rotate(-8deg);
    box-shadow:
        0 10px 36px rgba(37, 211, 102, 0.65),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.wa-circle i {
    font-size: 1.55rem;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* "Chat" label pill that slides out on hover */
.wa-label-pill {
    background: linear-gradient(135deg, #25d366 0%, #128c4e 100%);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0 0 0 0;
    border-radius: 0 50px 50px 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    margin-left: -10px;
    height: 40px;
    display: flex;
    align-items: center;
    transition:
        max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s,
        padding 0.28s,
        margin 0.28s;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
}

.wa-btn:hover .wa-label-pill {
    max-width: 130px;
    opacity: 1;
    padding: 0 16px 0 14px;
    margin-left: -8px;
}

/* Notification badge */
.wa-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--crimson);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 3;
    animation: badge-bounce 0.6s 0.5s ease both;
}

@keyframes badge-bounce {

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

    50% {
        transform: scale(1.25);
    }
}

/* ══════════════════════════════════════════════
       GO TO TOP — RIGHT BOTTOM
    ══════════════════════════════════════════════ */
.gtt-float {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition:
        opacity 0.35s,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gtt-float.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Circular progress track */
.gtt-btn {
    position: relative;
    width: 54px;
    height: 54px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG progress ring */
.gtt-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gtt-track {
    fill: none;
    stroke: rgba(22, 39, 64, 0.1);
    stroke-width: 2.5;
}

.gtt-progress {
    fill: none;
    stroke: var(--crimson);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 150.8;
    stroke-dashoffset: 150.8;
    transition: stroke-dashoffset 0.1s linear;
}

/* Inner circle */
.gtt-inner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.82rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 18px rgba(22, 39, 64, 0.35);
    transition:
        background 0.25s,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.gtt-btn:hover .gtt-inner {
    background: var(--crimson);
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(139, 26, 46, 0.45);
}

.gtt-btn:hover .gtt-inner i {
    animation: arrow-up 0.4s ease both;
}

@keyframes arrow-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    45% {
        transform: translateY(-6px);
        opacity: 0;
    }

    46% {
        transform: translateY(6px);
        opacity: 0;
    }

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

/* Tiny % label below */
.gtt-pct {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--muted, #6b7a8d);
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1;
}

/* ── Responsive tweak ── */
@media (max-width: 480px) {
    .wa-float {
        left: 16px;
        bottom: 20px;
    }

    .call-float {
        left: 16px;
        bottom: 92px;
    }

    .gtt-float {
        right: 16px;
        bottom: 20px;
    }

    .wa-circle,
    .call-circle {
        width: 52px;
        height: 52px;
    }

    .wa-circle i,
    .call-circle i {
        font-size: 1.25rem;
    }

    .rx-tst-avatar-wrap {
        position: relative;
        width: 120px;
        height: 60px;
    }
}



/* --- Hero Breadcrumb Banner --- */
        .biats-sitemap-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            padding: 125px 0px 75px;
            text-align: center;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.2);
        }

        .biats-sitemap-hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        /* Floating Pill Capsule Breadcrumb Container */
        .biats-sitemap-breadcrumb-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 6px 14px;
            border-radius: 50rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        .biats-sitemap-breadcrumb {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.88rem;
        }

        .biats-sitemap-breadcrumb-item a {
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .biats-sitemap-breadcrumb-item a:hover {
            color: var(--biats-orange);
            transform: scale(1.1);
        }

        .biats-sitemap-breadcrumb-separator {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.65rem;
        }

        .biats-sitemap-breadcrumb-item.active .biats-sitemap-active-badge {
            background-color: var(--biats-orange);
            color: #ffffff;
            font-weight: 700;
            font-size: 0.82rem;
            padding: 4px 16px;
            border-radius: 50rem;
            display: inline-block;
            box-shadow: 0 2px 8px rgba(242, 101, 34, 0.3);
        }

        /* --- About Content Section --- */
        .biats-sitemap-about-section {
            padding: 80px 0;
            background-color: #ffffff;
            position: relative;
        }

        .biats-sitemap-float-img-wrap {
            float: left;
            width: 44%;
            margin-right: 2.5rem;
            margin-bottom: 1.5rem;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1);
            border: 3px solid #fff;
            position: relative;
        }

        .biats-sitemap-float-img-wrap img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .biats-sitemap-float-img-wrap:hover img {
            transform: scale(1.03);
        }

        .biats-sitemap-img-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(8px);
            color: #ffffff;
            padding: 10px 18px;
            border-radius: 50rem;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .biats-sitemap-img-badge i {
            color: var(--biats-orange);
        }

        /* Single Parent Wrapper for CKEditor Dynamic Content */
        .biats-sitemap-ck-content {
            font-size: 1.05rem;
            line-height: 1.8;
            color: #475569;
        }

        .biats-sitemap-ck-content .biats-sitemap-content-title {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--biats-dark);
            line-height: 1.25;
            margin-bottom: 1.25rem;
            letter-spacing: -0.5px;
        }

        .biats-sitemap-ck-content .biats-sitemap-content-subtitle {
            font-size: 1.05rem;
            font-weight: 800;
            color: var(--biats-orange);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.75rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .biats-sitemap-ck-content p {
            margin-bottom: 1.25rem;
        }

        .biats-sitemap-ck-content ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 1.5rem;
        }

        .biats-sitemap-ck-content ul li {
            position: relative;
            padding-left: 28px;
            margin-bottom: 0.75rem;
            font-weight: 600;
            color: #334155;
            overflow: hidden;
        }

        .biats-sitemap-ck-content ul li::before {
            content: "\f058";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            color: var(--biats-orange);
        }

        .biats-sitemap-ck-content table {
            width: 100%;
            margin-bottom: 1.5rem;
            border-collapse: collapse;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
        }

        .biats-sitemap-ck-content table th,
        .biats-sitemap-ck-content table td {
            padding: 14px 18px;
            border: 1px solid #e2e8f0;
            font-size: 0.95rem;
        }

        .biats-sitemap-ck-content table th {
            background-color: var(--biats-navy);
            color: #ffffff;
            font-weight: 700;
        }

        .biats-sitemap-ck-content table tr:nth-child(even) {
            background-color: var(--biats-bg);
        }

        .biats-sitemap-feature-pill {
            display: inline-block;
            background-color: rgba(242, 101, 34, 0.1);
            color: var(--biats-orange);
            border: 1px solid rgba(242, 101, 34, 0.25);
            padding: 6px 16px;
            border-radius: 50rem;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .biats-sitemap-clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        /* --- Live Search Filter Input --- */
        .biats-sitemap-search-box {
            max-width: 650px;
            margin: -25px auto 40px auto;
            position: relative;
            padding: 0 15px;
            z-index: 10;
        }

        .biats-sitemap-search-box input {
            width: 100%;
            padding: 16px 20px 16px 50px;
            border-radius: 50rem;
            border: 1px solid #cbd5e1;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            font-size: 1rem;
            outline: none;
            background: #ffffff;
            transition: all 0.25s ease;
        }

        .biats-sitemap-search-box input:focus {
            border-color: var(--biats-orange);
            box-shadow: 0 10px 30px rgba(242, 101, 34, 0.15);
        }

        .biats-sitemap-search-box i {
            position: absolute;
            left: 35px;
            top: 50%;
            transform: translateY(-50%);
            color: #94a3b8;
            font-size: 1.1rem;
        }

        /* --- MARKET AREA / SITEMAP SECTION (Matches Reference Design) --- */
        .biats-sitemap-market-container {
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            margin-bottom: 40px;
        }

        /* Red/Orange Header Band matching reference design */
        .biats-sitemap-banner-header {
            background-color: var(--primary-orange); /* Distinct Header Bar */
            color: #ffffff;
            font-size: 1.3rem;
            font-weight: 800;
            padding: 12px 20px;
            border-radius: 6px;
            margin-bottom: 25px;
            letter-spacing: 0.5px;
        }

        /* Sub-heading text (e.g., States of India, Cities of...) */
        .biats-sitemap-group-heading {
            color: var(--primary-orange);
            font-size: 1.1rem;
            font-weight: 800;
            margin-top: 25px;
            margin-bottom: 15px;
            letter-spacing: 0.2px;
        }

        /* Grey Box Block Grid Grid Layout */
        .biats-sitemap-block-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .biats-sitemap-block-item {
            background-color: #e9ecef;
            border-radius: 4px;
            padding: 12px 16px;
            font-size: 0.92rem;
            font-weight: 600;
            color: #212529;
            text-decoration: none;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
            min-height: 48px;
            border: 1px solid transparent;
        }

        .biats-sitemap-block-item:hover {
            background-color: #dee2e6;
            color: var(--primary-orange);
            border-color: #ced4da;
            transform: translateY(-2px);
        }

        .biats-sitemap-footer-space {
            padding-bottom: 80px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 991.98px) {
            .biats-sitemap-float-img-wrap {
                float: none;
                width: 100%;
                margin-right: 0;
                margin-bottom: 2rem;
            }
            .biats-sitemap-block-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .biats-sitemap-block-grid {
                grid-template-columns: repeat(1, 1fr);
            }
            .biats-sitemap-hero-title {
                font-size: 1.85rem;
            }
        }