/*
Theme Name: Pearl Medical (WPConvert)
Theme URI: https://wpconvert.ai
Author: WPConvert.ai
Author URI: https://wpconvert.ai
Description: This theme was automatically generated from your original site design using WPConvert.ai. It preserves your layout, colors, typography, header, footer, and page content, and makes it editable in WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpconvert
Tags: landing page, responsive, custom header, custom footer
*/

/* External Stylesheets - @import statements MUST come before any CSS rules */

/* CSS Variables */
:root {
}

/* Inline Styles */

/* Extracted CSS from page */
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/league-gothic-400.woff2') format('woff2');
}
:root {
  --teal: #025050;
  --teal-mid: #206b6b;
  --aqua: #1cbdbd;
  --pale: #e7eadc;
  --wash: #f8f9f3;
  --ink: #17302e;
  --muted: #3e5d5a;
  --soft: #6c8984;
  --footer: #001f2a;
  --footer-dk: #00141b;
  --grad-teal: linear-gradient(130deg, #206b6b 0%, #025050 100%);
  --citrus: #e6f9af;
  --grad-deep: linear-gradient(0deg, #24534e 0%, #3e6b66 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: rgb(242, 244, 234);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(32, 107, 107), rgb(2, 80, 80));
  border-radius: 8px;
  border: 3px solid rgb(242, 244, 234);
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(32, 107, 107);
}
html {
  scrollbar-width: thin;
  scrollbar-color: rgb(32, 107, 107) rgb(242, 244, 234);
}
html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: clip;
}
body {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: rgb(255, 255, 255);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
a {
  text-decoration: none;
  color: var(--teal);
  transition: color 0.2s;
}
h1,
h2 {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.1;
}
h2 {
  font-size: 50px;
}
h3 {
  font-weight: 500;
  line-height: 1.25;
}
.container {
  --gut: 50px;
  max-width: none;
  margin: 0px auto;
  padding: 0 var(--gut);
}
.sen {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
}
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease),
    transform 0.8s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv-d1 {
  transition-delay: 0.12s;
}
.rv-d2 {
  transition-delay: 0.24s;
}
.rv-d3 {
  transition-delay: 0.36s;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 14.5px;
  font-weight: 400;
  background: var(--teal);
  border: 0px;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s,
    background 0.25s;
  font-family: inherit;
  line-height: 1.4;
  color: rgb(255, 255, 255) !important;
}
.btn:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: rgba(2, 80, 80, 0.24) 0px 10px 26px;
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.btn--white {
  background: rgb(255, 255, 255);
  color: var(--teal) !important;
}
.btn--white:hover {
  background: var(--pale);
  box-shadow: rgba(2, 80, 80, 0.2) 0px 10px 26px;
}
.btn--line {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal) !important;
}
.btn--line:hover {
  background: var(--teal);
  color: rgb(255, 255, 255) !important;
}
.btn .arr {
  transition: transform 0.2s;
}
.btn:hover .arr {
  transform: translateX(4px);
}
.divider {
  width: 44px;
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-image: none;
  border-top: 3px solid var(--teal-mid);
  margin: 18px 0px;
}
.divider--c {
  margin-left: auto;
  margin-right: auto;
}
.divider--w {
  border-top-color: var(--aqua);
}
.topbar {
  background: var(--footer);
  color: rgb(207, 229, 226);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 50px;
  font-size: 12.5px;
  gap: 16px;
}
.topbar .r {
  display: flex;
  gap: 24px;
  align-items: center;
  white-space: nowrap;
}
.topbar a {
  color: rgb(207, 229, 226);
}
.topbar a:hover {
  color: var(--aqua);
}
.header-group {
  position: sticky;
  top: 0px;
  z-index: 1000;
}
.header {
  background: rgb(255, 255, 255);
  transition:
    background 0.3s,
    box-shadow 0.3s,
    backdrop-filter 0.3s;
}
.header.glass {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: rgba(2, 80, 80, 0.1) 0px 4px 24px;
}
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 88px;
  max-width: none;
  margin: 0px auto;
  padding: 0px 50px;
}
.header img.logo {
  height: 40px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
}
.nav a.btn {
  white-space: nowrap;
}
@media (max-width: 1560px) {
  .header-in {
    padding: 0px 30px;
    gap: 20px;
  }
  .topbar {
    padding: 9px 30px;
  }
  .nav {
    gap: 19px;
    font-size: 13.5px;
  }
  .nav a.btn {
    padding: 11px 19px;
    font-size: 13.5px;
  }
}
.nav a {
  color: var(--muted);
  position: relative;
  padding: 6px 0px;
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0px;
  right: 100%;
  bottom: 0px;
  border-bottom: 2px solid var(--teal);
  transition: right 0.25s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a.on::after {
  right: 0px;
}
.nav a.on {
  color: var(--teal);
}
.nav a.btn {
  padding: 12px 26px;
}
[id] {
  scroll-margin-top: 150px;
}
.burger {
  display: none;
  position: relative;
  background: var(--teal);
  color: rgb(255, 255, 255);
  border: 0px;
  border-radius: 8px;
  width: 46px;
  height: 42px;
  font-size: 0px;
  cursor: pointer;
}
.burger::before {
  content: '☰';
  font-size: 20px;
  line-height: 42px;
  display: block;
  text-align: center;
}
body.menu-open .burger::before {
  content: '✕';
  font-size: 18px;
}
.hero {
  position: relative;
  padding: 120px 0px 200px;
  overflow: hidden;
}
.hero video,
.hero .hero-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.78) 0%,
    rgba(3, 46, 46, 0.55) 45%,
    rgba(3, 46, 46, 0.32) 100%
  );
}
.hero video {
  will-change: transform;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero .kicker {
  color: var(--aqua);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
}
.hero h1 {
  color: rgb(255, 255, 255);
  font-size: 72px;
  margin-top: 12px;
  max-width: 760px;
  font-weight: 400;
}
.hero p.sub {
  color: rgb(228, 240, 238);
  font-weight: 300;
  font-size: 16.5px;
  max-width: 600px;
  margin-top: 20px;
}
.hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.trust {
  margin-top: -90px;
  position: relative;
  z-index: 5;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.trust-card {
  background: rgb(255, 255, 255);
  border-radius: 12px;
  box-shadow: rgba(2, 60, 60, 0.14) 0px 14px 36px;
  padding: 30px 24px;
  text-align: center;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.trust-card:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.18) 0px 22px 46px;
}
.trust-card .big {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 46px;
  color: var(--teal);
}
.trust-card .lbl {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
.sec {
  padding: 92px 0px;
}
.sec--wash {
  background: var(--wash);
}
.sec--slim {
  padding: 46px 0px;
}
.sec h2 {
  color: var(--teal);
  font-size: 50px;
}
.c {
  text-align: center;
}
.sec .lead {
  font-weight: 300;
  color: var(--muted);
  max-width: 720px;
}
.c .lead {
  margin: 0px auto;
}
.opp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 58px;
  align-items: center;
}
.opp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
  margin-top: 22px;
}
.opp-item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14.5px;
}
.opp img {
  border-radius: 12px;
  box-shadow: rgba(2, 60, 60, 0.18) 0px 16px 40px;
}
.imgfloat {
  transition: transform 0.3s var(--ease);
}
.imgfloat:hover {
  transform: translateY(-8px);
}
.check {
  flex: 0 0 auto;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 52px;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.pillar .circle {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.pillar:hover .circle {
  transform: translateY(-8px);
  box-shadow: rgba(2, 80, 80, 0.28) 0px 18px 40px;
}
.pillar h3 {
  color: var(--teal-mid);
  font-size: 19px;
}
.pillar p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 290px;
}
.solutions {
  background: var(--grad-teal);
  padding: 92px 0px;
}
.solutions h2,
.solutions .lead {
  color: rgb(255, 255, 255);
}
.solutions .lead {
  color: rgb(216, 236, 234);
}
.carousel {
  position: relative;
  margin-top: 46px;
  text-align: left;
}
.slides {
  position: relative;
}
.slide {
  position: absolute;
  inset: 0px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s var(--ease),
    visibility 0s linear 0.7s;
}
.slide.on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease);
}
.s-im {
  min-height: 320px;
}
.s-im picture,
.s-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s-bd {
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 17px;
  letter-spacing: 2px;
}
.s-bd h3 {
  color: rgb(255, 255, 255);
  font-size: 36px;
  letter-spacing: 0.3px;
  line-height: 1.15;
}
.s-bd .s-tx {
  color: rgb(234, 245, 244);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 16px;
  max-width: 560px;
}
.s-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 12px 26px;
  margin-top: 26px;
  padding: 0px;
  max-width: 560px;
}
.s-list li {
  list-style: none;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: rgb(255, 255, 255);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.s-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.c-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.c-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
}
.c-arrow:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.c-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}
.c-dots span {
  width: 9px;
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.3s;
}
.c-dots span.act {
  width: 28px;
  background: var(--aqua);
}
.models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 30px;
  margin-top: 48px;
  text-align: left;
}
.model {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  min-height: 440px;
  box-shadow: rgba(2, 60, 60, 0.14) 0px 14px 34px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.model:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.2) 0px 24px 48px;
}
.model picture,
.model img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.model img {
  transform: scale(1.02);
}
.model:hover img {
  transform: scale(1.07);
}
.m-ov {
  position: absolute;
  inset: auto 0px 0px;
  padding: 130px 32px 30px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.6) 55%,
    transparent 100%
  );
}
.m-ov .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 17px;
  letter-spacing: 2px;
}
.m-ov h3 {
  color: rgb(255, 255, 255);
  font-size: 27px;
  margin-top: 6px;
}
.m-ov .d {
  font-weight: 300;
  color: rgb(216, 236, 234);
  font-size: 14.5px;
  margin-top: 10px;
  max-width: 480px;
}
.m-ov .t {
  font-size: 13px;
  color: var(--aqua);
  margin-top: 12px;
  font-weight: 500;
}
.how {
  position: relative;
  background: image-set(
      url('assets/images/howitworks.webp') 1x type('image/webp'),
      url('assets/images/howitworks.jpg') 1x type('image/jpeg')
    )
    center center / cover no-repeat;
  padding: 92px 0px;
}
.how::before {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    0deg,
    rgba(23, 58, 54, 0.46) 0%,
    rgba(38, 77, 72, 0.44) 100%
  );
}
.how .container {
  position: relative;
  z-index: 2;
}
.how h2 {
  color: rgb(255, 255, 255);
  text-shadow: rgba(3, 32, 30, 0.55) 0px 2px 14px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 52px;
}
.step {
  text-align: center;
}
.step .n {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid var(--aqua);
  color: rgb(255, 255, 255);
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto 18px;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.step:hover .n {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.22);
}
.step h3 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  text-shadow: rgba(3, 32, 30, 0.55) 0px 2px 12px;
}
.step p {
  color: rgb(242, 244, 234);
  font-weight: 300;
  font-size: 14px;
  margin-top: 10px;
  text-shadow: rgba(3, 32, 30, 0.6) 0px 2px 10px;
}
.whysec {
  background: linear-gradient(180deg, #fff 0%, var(--wash) 100%);
}
.kicker2 {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.why-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 44px;
  flex-wrap: wrap;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 46px;
  text-align: left;
}
.why {
  position: relative;
  overflow: hidden;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  padding: 32px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: rgba(2, 60, 60, 0.06) 0px 10px 28px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.why::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 4px;
  background: var(--grad-teal);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.35s var(--ease);
}
.why:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.14) 0px 22px 44px;
}
.why:hover::before {
  transform: scaleY(1);
}
.why .ic {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.why:hover .ic {
  background: var(--teal-mid);
}
.why h3 {
  color: var(--teal);
  font-size: 17.5px;
  position: relative;
}
.why p {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  position: relative;
}
.track {
  background: var(--grad-teal);
  padding: 64px 0px;
}
.track h2 {
  color: rgb(255, 255, 255);
  text-align: center;
}
.track-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  margin-top: 46px;
}
.track .num {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 62px;
  color: rgb(255, 255, 255);
}
.track .num .a {
  color: var(--aqua);
  font-size: 30px;
  vertical-align: top;
}
.track .lbl {
  color: rgb(207, 229, 226);
  font-size: 13.5px;
  margin-top: 2px;
}
.cm {
  overflow: hidden;
  margin-top: 14px;
  margin-left: calc(-1 * var(--gut, 50px));
  margin-right: calc(-1 * var(--gut, 50px));
}
.cm-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: 40s linear 0s infinite normal none running marquee;
}
.cm:hover .cm-track {
  animation-play-state: paused;
}
.cph {
  width: 360px;
  height: 230px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}
.cph picture,
.cph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.cph img {
  transform: scale(1.02);
}
.cph:hover img {
  transform: scale(1.07);
}
.track .note {
  color: rgb(159, 203, 199);
  font-size: 11.5px;
  text-align: center;
  margin-top: 22px;
}
.team-car {
  position: relative;
  margin-top: 48px;
}
.team-vp {
  overflow: hidden;
}
.team-track {
  display: flex;
  gap: 22px;
  transition: transform 0.6s var(--ease);
}
.tmc {
  flex: 0 0 calc(25% - 16.5px);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  text-align: left;
  background: var(--footer);
}
.tmc picture,
.tmc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.tmc img {
  transform: scale(1.02);
}
.tmc:hover img {
  transform: scale(1.07);
}
.tmc .ov {
  position: absolute;
  inset: auto 0px 0px;
  padding: 52px 20px 18px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.92) 0%,
    rgba(2, 32, 30, 0.55) 55%,
    transparent 100%
  );
}
.tmc h3 {
  color: rgb(255, 255, 255);
  font-size: 17px;
  font-weight: 500;
}
.tmc .role {
  color: var(--aqua);
  font-size: 12.5px;
  margin-top: 3px;
}
.tmc .bio {
  color: rgb(216, 236, 234);
  font-weight: 300;
  font-size: 12.5px;
  margin-top: 8px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s var(--ease),
    opacity 0.4s;
}
.tmc:hover .bio {
  max-height: 90px;
  opacity: 1;
}
.tmc .tm-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aqua);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 10px;
}
.tmc .tm-more .arr {
  transition: transform 0.2s;
}
.tmc:hover .tm-more {
  color: rgb(255, 255, 255);
}
.tmc:hover .tm-more .arr {
  transform: translateX(4px);
}
.tmc:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}
.team-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.t-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
}
.t-arrow svg path {
  transition: stroke 0.25s;
}
.t-arrow:hover {
  background: var(--teal);
  transform: translateY(-2px);
}
.t-arrow:hover svg path {
  stroke: rgb(255, 255, 255);
}
.t-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}
.t-dots span {
  width: 9px;
  height: 9px;
  border-radius: 6px;
  background: rgb(201, 222, 219);
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.3s;
}
.t-dots span.act {
  width: 28px;
  background: var(--teal);
}
.tsec {
  background: var(--wash);
  padding: 92px 0px 84px;
  overflow: hidden;
}
.t-marquee {
  overflow: hidden;
  margin-top: 22px;
  padding: 24px 0px 48px;
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgb(0, 0, 0) 8%,
    rgb(0, 0, 0) 92%,
    transparent
  );
}
.t-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: 44s linear 0s infinite normal none running marquee;
}
.t-marquee:hover .t-track {
  animation-play-state: paused;
}
@keyframes marquee {
  100% {
    transform: translateX(-50%);
  }
}
.t-card {
  width: 360px;
  background: rgb(255, 255, 255);
  border-radius: 14px;
  box-shadow: rgba(2, 60, 60, 0.09) 0px 10px 26px;
  padding: 28px;
  text-align: left;
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease);
}
.t-card:hover {
  transform: translateY(-5px);
}
.t-card .q {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 54px;
  line-height: 1;
}
.t-card p.tx {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}
.t-card .who {
  margin-top: 16px;
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
}
.t-card .sp {
  font-size: 12.5px;
  color: var(--soft);
}
#insights {
  background: rgb(242, 244, 234);
}
.ins-car {
  position: relative;
  margin-top: 48px;
}
.ins-vp {
  overflow: hidden;
  padding: 10px 10px 42px;
  margin: -10px -10px -42px;
}
.ins-track {
  display: flex;
  gap: 26px;
  transition: transform 0.6s var(--ease);
}
.ins {
  flex: 0 0 calc(25% - 19.5px);
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  background: var(--footer);
  text-align: left;
  box-shadow: rgba(2, 60, 60, 0.12) 0px 12px 30px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.ins:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.2) 0px 20px 42px;
}
.ins .im {
  position: absolute;
  inset: 0px;
  overflow: hidden;
}
.ins .im picture,
.ins .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.ins .im img {
  transform: scale(1.02);
}
.ins:hover .im img {
  transform: scale(1.07);
}
.ins .bd {
  position: absolute;
  inset: auto 0px 0px;
  padding: 58px 18px 17px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.6) 58%,
    transparent 100%
  );
}
.ins .cat {
  display: block;
  background: none;
  border-radius: 0px;
  padding: 0px;
  color: var(--aqua);
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 500;
}
.ins h3 {
  color: rgb(255, 255, 255);
  font-size: 15.5px;
  line-height: 1.42;
  margin-top: 7px;
  font-weight: 500;
  min-height: 0px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins .rd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--aqua);
  font-weight: 500;
}
.ins:hover .rd {
  color: rgb(255, 255, 255);
}
.ins:hover .rd .arr {
  transform: translateX(4px);
}
.ins .arr {
  transition: transform 0.2s;
}
.ins:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}
.cta {
  position: relative;
  background: image-set(
      url('assets/images/cta.webp') 1x type('image/webp'),
      url('assets/images/cta.jpg') 1x type('image/jpeg')
    )
    center center / cover no-repeat;
  padding: 96px 0px;
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    0deg,
    rgba(23, 58, 54, 0.52) 0%,
    rgba(38, 77, 72, 0.48) 100%
  );
}
.cta .container {
  position: relative;
  z-index: 2;
}
.cta h2 {
  color: rgb(255, 255, 255);
  font-size: 50px;
  text-shadow: rgba(3, 32, 30, 0.55) 0px 2px 14px;
}
.cta p {
  color: rgb(242, 244, 234);
  font-weight: 300;
  max-width: 620px;
  margin: 16px auto 30px;
  text-shadow: rgba(3, 32, 30, 0.6) 0px 2px 10px;
}
.footer {
  background: var(--footer);
  color: rgb(199, 219, 216);
  padding: 64px 0px 56px;
  font-weight: 300;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 44px;
}
.footer h4 {
  color: rgb(255, 255, 255);
  font-weight: 500;
  font-size: 15.5px;
  margin-bottom: 16px;
}
.footer a {
  color: rgb(199, 219, 216);
  font-size: 13.5px;
  display: block;
  padding: 4px 0px;
}
.footer a:hover {
  color: var(--aqua);
}
.footer p {
  font-size: 13px;
  line-height: 1.7;
}
.f-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.f-social span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.f-social span:hover {
  background: var(--teal-mid);
  transform: translateY(-3px);
}
.f-contact li {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 4px 0px;
  font-size: 13.5px;
  align-items: flex-start;
}
.f-contact svg {
  margin-top: 4px;
  flex: 0 0 auto;
}
.copy {
  background: var(--footer-dk);
  color: rgb(143, 166, 163);
  display: flex;
  justify-content: space-between;
  padding: 16px 50px;
  font-size: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.copy a {
  color: rgb(143, 166, 163);
}
.copy a:hover {
  color: var(--aqua);
}
.top-btn {
  position: fixed;
  right: 44px;
  bottom: 146px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: rgb(255, 255, 255);
  border: 0px;
  cursor: pointer;
  box-shadow: rgba(2, 80, 80, 0.35) 0px 10px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.2s;
  z-index: 1100;
}
.top-btn.show {
  opacity: 1;
  pointer-events: auto;
}
.top-btn:hover {
  transform: translateY(-3px);
}
.float-badge {
  transition:
    transform 0.3s var(--ease),
    background 0.3s,
    opacity 0.35s var(--ease);
}
body.at-footer .float-badge,
body.at-footer .top-btn {
  pointer-events: none;
  transform: translateY(24px);
  opacity: 0 !important;
}
.team-vp,
.ins-vp {
  touch-action: pan-y;
  cursor: grab;
}
.team-vp:active,
.ins-vp:active {
  cursor: grabbing;
}
.slides:active {
  cursor: grabbing;
}
.tmc,
.ins,
.t-card,
.cph {
  user-select: none;
}
#progress {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 3px;
  width: 0px;
  background: linear-gradient(90deg, var(--teal-mid), var(--aqua));
  z-index: 1300;
  transition: width 0.15s linear;
}
.divider.anim {
  width: 0px;
  transition: width 0.9s var(--ease) 0.25s;
}
.divider.anim.in {
  width: 44px;
}
.steps {
  position: relative;
}
.steps.anim .n {
  transform: scale(0.55);
  opacity: 0;
}
.steps.anim.in .n {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.6s var(--ease),
    opacity 0.5s var(--ease);
}
.steps.anim.in .step:nth-child(2) .n {
  transition-delay: 0.3s;
}
.steps.anim.in .step:nth-child(3) .n {
  transition-delay: 0.6s;
}
.pillar .circle {
  position: relative;
}
.pillar .circle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--aqua);
  opacity: 0;
  pointer-events: none;
}
.pillars.anim.in .pillar:nth-child(1) .circle::after {
  animation: ring 1.15s var(--ease) 0.35s;
}
.pillars.anim.in .pillar:nth-child(2) .circle::after {
  animation: ring 1.15s var(--ease) 0.55s;
}
.pillars.anim.in .pillar:nth-child(3) .circle::after {
  animation: ring 1.15s var(--ease) 0.75s;
}
@keyframes ring {
  0% {
    transform: scale(0.72);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.38);
    opacity: 0;
  }
}
.slide .s-list li {
  opacity: 0;
  transform: translateY(10px);
}
.slide.on .s-list li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease) 0.25s,
    transform 0.5s var(--ease) 0.25s;
}
.slide.on .s-list li:nth-child(2) {
  transition-delay: 0.33s;
}
.slide.on .s-list li:nth-child(3) {
  transition-delay: 0.41s;
}
.slide.on .s-list li:nth-child(4) {
  transition-delay: 0.49s;
}
.slide.on .s-list li:nth-child(5) {
  transition-delay: 0.57s;
}
.slide.on .s-list li:nth-child(6) {
  transition-delay: 0.65s;
}
@media (prefers-reduced-motion: reduce) {
  .divider.anim,
  .divider.anim.in {
    width: 44px;
    transition: none;
  }
  .steps.anim .n,
  .steps.anim.in .n {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .pillars.anim.in .circle::after {
    animation: auto ease 0s 1 normal none running none;
  }
  .slide .s-list li,
  .slide.on .s-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #progress {
    display: none;
  }
}
.faqsec {
  background: rgb(255, 255, 255);
}
.faq-list {
  max-width: 820px;
  margin: 40px auto 0px;
}
.faq-item {
  border-bottom: 1px solid rgb(233, 236, 223);
}
.faq-q {
  width: 100%;
  background: none;
  border: 0px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  padding: 22px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.faq-q:hover {
  color: var(--teal);
}
.faq-q .fx {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.35s var(--ease),
    background 0.3s;
}
.faq-item.open .faq-q .fx {
  transform: rotate(45deg);
  background: var(--aqua);
}
.faq-a {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a p {
  padding: 0px 6px 24px;
  color: var(--muted);
  font-weight: 300;
  font-size: 14.5px;
  max-width: 740px;
}
.float-badge {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 104px;
  height: 104px;
  z-index: 1100;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: rgba(2, 40, 40, 0.45) 0px 12px 32px;
  transition:
    transform 0.3s var(--ease),
    background 0.3s;
}
.float-badge:hover {
  background: rgb(154, 218, 212);
}
.float-badge:hover {
  transform: scale(1.08);
}
.float-badge .fb-ic {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-badge .ring {
  position: absolute;
  inset: 0px;
  animation: 16s linear 0s infinite normal none running spin;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.float-badge .ring text {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2.2px;
  fill: rgb(0, 31, 42);
  text-transform: uppercase;
}
.mobile-cta {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: none;
  z-index: 1200;
  box-shadow: rgba(2, 40, 40, 0.22) 0px -6px 18px;
}
.mobile-cta a {
  flex: 1 1 0%;
  text-align: center;
  padding: 15px 10px;
  font-size: 15px;
  font-weight: 500;
}
.mobile-cta .m-call {
  background: var(--teal);
  color: rgb(255, 255, 255);
}
.mobile-cta .m-book {
  background: rgb(255, 255, 255);
  color: var(--teal);
}
@media (max-width: 1200px) {
  .nav {
    position: fixed;
    inset: var(--navtop, 88px) 0 0 0;
    background: rgb(255, 255, 255);
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
    z-index: 999;
  }
  .nav.open {
    transform: translateX(0px);
  }
  .nav a {
    padding: 13px 6px;
    border-bottom: 1px solid rgb(241, 243, 232);
    width: 100%;
    font-size: 16px;
  }
  .nav .btn {
    margin-top: 14px;
  }
  .nav a.btn {
    font-size: 15px;
    padding: 13px 26px;
    width: auto;
  }
  .burger {
    display: block;
  }
}
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 54px;
  }
  .trust-grid,
  .pillars,
  .steps,
  .why-grid,
  .track-stats {
    grid-template-columns: 1fr;
  }
  .ins {
    flex-basis: calc(50% - 13px);
  }
  .tmc {
    flex: 0 0 calc(50% - 11px);
  }
  @media (max-width: 640px) {
    .ins {
      flex-basis: 100%;
    }
  }
  .models,
  .opp,
  .f-grid {
    grid-template-columns: 1fr;
  }
  .slide {
    grid-template-columns: 1fr;
  }
  .slide .s-im {
    min-height: 200px;
  }
  .s-bd {
    padding: 28px 26px;
  }
  .s-bd h3 {
    font-size: 26px;
  }
  .s-list {
    grid-template-columns: 1fr;
  }
  .cph {
    width: 260px;
    height: 170px;
  }
  .model {
    min-height: 360px;
  }
  .why-head {
    align-items: flex-start;
  }
  .float-badge {
    display: none;
  }
  .mobile-cta {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
  .top-btn {
    right: 18px;
    bottom: 70px;
  }
  .track-photos {
    grid-template-columns: 1fr;
  }
  .topbar {
    justify-content: center;
    padding: 9px 20px;
  }
  .container,
  .header-in {
    padding: 0px 20px;
  }
  .container {
    --gut: 20px;
  }
  .topbar .r {
    display: none;
  }
}
.nav-item {
  position: relative;
}
.nav-item > a .car {
  font-size: 11px;
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.25s;
  vertical-align: 1px;
}
.nav-item:hover > a .car {
  transform: rotate(180deg);
}
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0px;
  min-width: 240px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(2, 60, 60, 0.16) 0px 12px 32px;
  border-radius: 0px 0px 10px 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.25s var(--ease);
  padding: 8px 0px;
  z-index: 60;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop a {
  display: block;
  padding: 10px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.nav .nav-drop a:not(.btn)::after {
  display: none;
  content: none;
}
.nav-drop a:hover {
  background: var(--wash);
  color: var(--teal);
}
.page-hero {
  position: relative;
  padding: 96px 0px 110px;
  overflow: hidden;
  background: var(--grad-teal);
}
.page-hero .ph-img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
}
.page-hero .ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.8) 0%,
    rgba(3, 46, 46, 0.55) 50%,
    rgba(3, 46, 46, 0.35) 100%
  );
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero .crumb {
  color: var(--aqua);
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.page-hero .crumb a {
  color: var(--aqua);
}
.page-hero h1 {
  color: rgb(255, 255, 255);
  font-size: 62px;
  max-width: 820px;
  margin-top: 12px;
  font-weight: 400;
}
.page-hero p.sub {
  color: rgb(228, 240, 238);
  font-weight: 300;
  font-size: 16px;
  max-width: 640px;
  margin-top: 16px;
}
.rich-list {
  padding: 0px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rich-list li {
  list-style: none;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.rich-list svg {
  flex: 0 0 auto;
  margin-top: 3px;
}
.rich-list b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.rich-list p {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 2px;
}
.glass-cards .rich-list b {
  color: rgb(255, 255, 255);
}
.glass-cards .rich-list p {
  color: rgb(220, 235, 233);
}
.glass-cards .kchip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgb(255, 255, 255);
  border-radius: 18px;
  padding: 4px 15px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.map-band {
  background: var(--footer);
  padding: 92px 0px;
}
.map-band h2 {
  color: rgb(255, 255, 255);
}
.map-band .lead {
  color: rgb(185, 212, 209);
}
.usmap-wrap {
  position: relative;
  max-width: 1180px;
  margin: 52px auto 0px;
}
.usmap-wrap > img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 18px 40px);
}
.mpin {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 0px;
  background: none;
  padding: 0px;
  z-index: 5;
}
.mpin:hover,
.mpin.on,
.mpin:focus-visible {
  z-index: 40;
}
.mpin .dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  box-shadow:
    0 0 0 3.5px var(--aqua),
    0 0 18px rgba(28, 189, 189, 0.95);
  transition: transform 0.25s var(--ease);
}
.mpin::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(28, 189, 189, 0.8);
  animation: mping 2.2s var(--ease) infinite;
}
@keyframes mping {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.mpin:hover .dot,
.mpin.on .dot {
  transform: scale(1.3);
}
.mcard {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 8px);
  width: 310px;
  background: rgb(255, 255, 255);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
  z-index: 30;
  pointer-events: none;
  text-align: left;
}
.mpin:hover .mcard,
.mpin:focus-visible .mcard,
.mpin.on .mcard {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0px);
  pointer-events: auto;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease);
}
.mcard .im {
  height: 150px;
  overflow: hidden;
}
.mcard .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcard .bd {
  padding: 16px 18px 18px;
}
.mcard .st {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 21px;
}
.mcard .tp {
  color: var(--teal-mid);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 3px;
}
.mcard p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.55;
}
.mcard--left {
  left: auto;
  right: -10px;
  transform: translate(0px, 8px);
}
.mpin:hover .mcard--left,
.mpin.on .mcard--left,
.mpin:focus-visible .mcard--left {
  transform: translate(0px, 0px);
}
.mcard--right {
  left: -10px;
  right: auto;
  transform: translate(0px, 8px);
}
.mpin:hover .mcard--right,
.mpin.on .mcard--right,
.mpin:focus-visible .mcard--right {
  transform: translate(0px, 0px);
}
.mgo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  background: var(--teal);
  color: rgb(255, 255, 255);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.mgo:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .mcard {
    width: 230px;
  }
  .mcard .im {
    height: 105px;
  }
}
.csl {
  flex: 0 0 calc(33.3333% - 17.3333px);
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: rgba(2, 60, 60, 0.08) 0px 10px 28px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  user-select: none;
  cursor: pointer;
}
.csl:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.15) 0px 20px 44px;
}
.csl .im {
  height: 200px;
  overflow: hidden;
  flex: 0 0 auto;
}
.csl .im picture,
.csl .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.csl:hover .im img {
  transform: scale(1.05);
}
.csl .bd {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
}
.csl .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.csl h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.4;
}
.csl .sm {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}
.csl .btn {
  margin-top: 18px;
  align-self: flex-start;
  padding: 10px 22px;
  font-size: 13.5px;
}
@media (max-width: 1024px) {
  .csl {
    flex-basis: calc(50% - 13px);
  }
}
@media (max-width: 640px) {
  .csl {
    flex-basis: 100%;
  }
}
.cmodal {
  position: fixed;
  inset: 0px;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 32, 30, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.cmodal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.cmodal-card {
  position: relative;
  width: min(860px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  box-shadow: rgba(2, 32, 30, 0.4) 0px 30px 80px;
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.35s var(--ease),
    opacity 0.3s var(--ease);
  padding: 42px 46px;
}
.cmodal.open .cmodal-card {
  transform: none;
  opacity: 1;
}
.cmodal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0px;
  background: var(--pale);
  color: var(--teal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
  z-index: 2;
}
.cmodal-x:hover {
  background: var(--teal);
  color: rgb(255, 255, 255);
  transform: rotate(90deg);
}
.cmodal .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.cmodal h3 {
  color: var(--teal);
  font-size: 26px;
  font-weight: 500;
  margin-top: 8px;
  padding-right: 34px;
}
.cmodal-gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0px 8px;
}
.cmodal-gal .g {
  border-radius: 12px;
  overflow: hidden;
  height: 200px;
}
.cmodal-gal .g img,
.cmodal-gal .g picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cmodal-blk {
  margin-top: 20px;
}
.cmodal-blk b {
  font-family: 'League Gothic', sans-serif;
  color: var(--teal);
  font-size: 16px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 400;
}
.cmodal-blk p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .cmodal {
    padding: 14px;
  }
  .cmodal-card {
    padding: 30px 24px;
  }
  .cmodal-gal {
    grid-template-columns: 1fr;
  }
  .cmodal-gal .g {
    height: 160px;
  }
}
.glass-cards .phase {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: rgba(2, 32, 30, 0.28) 0px 14px 38px;
  border-radius: 18px;
}
.glass-cards .phase:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-6px);
  box-shadow: rgba(2, 32, 30, 0.36) 0px 22px 48px;
}
.glass-cards .phase h3 {
  color: rgb(255, 255, 255);
  font-size: 21px;
  line-height: 1.3;
  text-shadow: rgba(2, 32, 30, 0.4) 0px 1px 8px;
}
.glass-cards .phase li {
  color: rgb(240, 247, 246);
}
.glass-cards .phase li svg circle {
  fill: rgba(255, 255, 255, 0.22);
}
.glass-cards .phase li svg path {
  stroke: var(--aqua);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-cards .phase {
    background: rgba(3, 46, 46, 0.55);
  }
}
.cs-car {
  position: relative;
  margin-top: 48px;
}
.cs-vp {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding: 10px 10px 40px;
  margin: -10px -10px -40px;
}
.cs-vp:active {
  cursor: grabbing;
}
.cs-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s var(--ease);
}
.csx {
  flex: 0 0 calc(50% - 12px);
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  box-shadow: rgba(2, 60, 60, 0.14) 0px 14px 34px;
  text-align: left;
  user-select: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.csx:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.2) 0px 24px 48px;
}
.csx picture,
.csx img {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.csx:hover img {
  transform: scale(1.05);
}
.csx .ov {
  position: absolute;
  inset: auto 0px 0px;
  padding: 120px 28px 26px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.58) 55%,
    transparent 100%
  );
}
.csx .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.csx h3 {
  color: rgb(255, 255, 255);
  font-size: 22px;
  font-weight: 500;
  margin-top: 8px;
  max-width: 440px;
}
.csx .rd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13.5px;
  color: rgb(207, 234, 231);
  font-weight: 500;
}
.csx .rd .arr {
  transition: transform 0.2s;
}
.csx:hover .rd .arr {
  transform: translateX(4px);
}
@media (max-width: 800px) {
  .csx {
    flex-basis: 100%;
    min-height: 340px;
  }
}
.img-band {
  position: relative;
  padding: 112px 0px;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.img-band::before {
  content: '';
  position: absolute;
  inset: 0px;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.74) 0%,
    rgba(3, 46, 46, 0.52) 55%,
    rgba(3, 46, 46, 0.34) 100%
  );
}
.img-band .container {
  position: relative;
  z-index: 2;
}
.img-band .kicker2 {
  color: var(--aqua);
}
.img-band h2 {
  color: rgb(255, 255, 255);
  text-shadow: rgba(3, 32, 30, 0.5) 0px 2px 14px;
}
.img-band .lead {
  color: rgb(242, 244, 234);
  text-shadow: rgba(3, 32, 30, 0.55) 0px 2px 10px;
}
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  margin-top: 44px;
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  overflow: hidden;
  background: rgb(255, 255, 255);
  box-shadow: rgba(2, 60, 60, 0.09) 0px 18px 44px;
}
.cmp th {
  background: var(--teal);
  color: rgb(255, 255, 255);
  font-weight: 500;
  font-size: 15.5px;
  padding: 20px 22px;
  text-align: center;
  letter-spacing: 0.3px;
}
.cmp th:first-child {
  background: rgb(0, 31, 42);
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.6px;
}
.cmp .thk {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
}
.cmp .thk .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid var(--aqua);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--aqua);
  flex: 0 0 auto;
}
.cmp .thk small {
  display: block;
  font-weight: 300;
  font-size: 11.5px;
  color: rgb(191, 227, 224);
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.cmp td {
  padding: 17px 22px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid rgb(237, 245, 243);
  font-weight: 300;
  text-align: center;
  transition: background 0.25s;
}
.cmp td:not(:first-child) {
  border-left: 1px solid rgb(237, 245, 243);
}
.cmp td:first-child {
  color: var(--teal);
  font-weight: 400;
  font-family: 'League Gothic', sans-serif;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--wash);
}
.cmp tr:nth-child(2n) td {
  background: rgb(248, 252, 251);
}
.cmp tr:nth-child(2n) td:first-child {
  background: var(--wash);
}
.cmp tr:hover td {
  background: rgb(230, 243, 240);
}
.cmp tr:hover td:first-child {
  background: rgb(223, 238, 234);
}
.cmp .pillv {
  display: inline-block;
  background: var(--pale);
  color: var(--teal);
  border-radius: 18px;
  padding: 5px 16px;
  font-weight: 500;
  font-size: 13px;
}
.cmp .pillv--deep {
  background: var(--teal);
  color: rgb(255, 255, 255);
}
.cmp tr {
  opacity: 0;
  transform: translateY(16px);
}
.cmp.in tr {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.6s var(--ease);
}
.cmp.in tr:nth-child(2) {
  transition-delay: 0.09s;
}
.cmp.in tr:nth-child(3) {
  transition-delay: 0.18s;
}
.cmp.in tr:nth-child(4) {
  transition-delay: 0.27s;
}
.cmp.in tr:nth-child(5) {
  transition-delay: 0.36s;
}
.cmp.in tr:nth-child(6) {
  transition-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .cmp tr,
  .cmp.in tr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.form-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 50px;
  align-items: start;
  margin-top: 50px;
}
.cform {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 18px;
  padding: 40px 42px;
  box-shadow: rgba(2, 60, 60, 0.08) 0px 16px 40px;
}
.cform .fset {
  margin-bottom: 26px;
}
.cform .fset legend,
.cform .flabel {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.frow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cform input[type='text'],
.cform input[type='email'],
.cform input[type='tel'],
.cform select,
.cform textarea {
  width: 100%;
  border: 1.5px solid rgb(226, 229, 214);
  border-radius: 10px;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: rgb(251, 253, 253);
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  margin-bottom: 14px;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--teal-mid);
  box-shadow: rgba(32, 107, 107, 0.12) 0px 0px 0px 3px;
}
.cform textarea {
  min-height: 110px;
  resize: vertical;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pills label {
  border: 1.5px solid rgb(226, 229, 214);
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition: 0.25s;
  user-select: none;
}
.pills input {
  display: none;
}
.pills label:has(input:checked) {
  background: var(--teal);
  border-color: var(--teal);
  color: rgb(255, 255, 255);
}
.side-card {
  background: var(--wash);
  border-radius: 18px;
  padding: 34px 32px;
}
.side-card h3 {
  color: var(--teal);
  font-size: 19px;
  margin-bottom: 18px;
}
.side-card li {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 8px 0px;
  font-size: 14px;
  color: var(--muted);
  align-items: flex-start;
}
.side-card svg {
  flex: 0 0 auto;
  margin-top: 3px;
}
.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.phase {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  padding: 30px 26px;
  position: relative;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  text-align: left;
}
.phase:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.12) 0px 18px 38px;
}
.phases {
  margin-top: 70px;
}
.phase {
  overflow: visible;
}
.phase .pn {
  position: absolute;
  top: -46px;
  left: 20px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  background: linear-gradient(
      135deg,
      rgb(2, 80, 80) 10%,
      rgb(32, 107, 107) 55%,
      rgb(28, 189, 189) 100%
    )
    text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.phase h3 {
  margin-top: 34px;
}
.phase h3 {
  color: var(--teal);
  font-size: 16.5px;
}
.phase p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}
.case {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: rgba(2, 60, 60, 0.07) 0px 10px 28px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.case:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.13) 0px 20px 44px;
}
.case .im {
  height: 190px;
  overflow: hidden;
}
.case .im img,
.case .im picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.case:hover .im img {
  transform: scale(1.05);
}
.case .bd {
  padding: 26px 28px 28px;
}
.case .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.case .meta span {
  background: var(--pale);
  color: var(--teal);
  border-radius: 16px;
  padding: 3px 11px;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.case h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}
.case .blk {
  margin-top: 12px;
}
.case .blk b {
  color: var(--teal);
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'League Gothic', sans-serif;
}
.case .blk p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split .img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: rgba(2, 60, 60, 0.16) 0px 16px 40px;
}
.split .img-wrap img,
.split .img-wrap picture {
  width: 100%;
  display: block;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.catc {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 16px;
  padding: 30px 26px;
  text-align: left;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  display: block;
}
.catc:hover {
  transform: translateY(-6px);
  box-shadow: rgba(2, 60, 60, 0.12) 0px 18px 38px;
}
.catc h3 {
  color: var(--teal);
  font-size: 16.5px;
}
.catc p {
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.catc .ic2 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feat {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  margin-top: 48px;
}
.feat .big {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  display: block;
}
.feat .big img,
.feat .big picture {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.feat .big:hover img {
  transform: scale(1.04);
}
.feat .big .ov {
  position: absolute;
  inset: auto 0px 0px;
  padding: 120px 30px 28px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94),
    rgba(2, 32, 30, 0.5) 60%,
    transparent
  );
}
.feat .big .ov h3 {
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-weight: 500;
  max-width: 520px;
}
.feat .list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feat .mini {
  display: flex;
  gap: 16px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.feat .mini:hover {
  transform: translateY(-4px);
  box-shadow: rgba(2, 60, 60, 0.12) 0px 14px 30px;
}
.feat .mini .th {
  width: 130px;
  flex: 0 0 auto;
  overflow: hidden;
}
.feat .mini .th img,
.feat .mini .th picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat .mini .tx {
  padding: 14px 16px 14px 0px;
}
.feat .mini h4 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.mb2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 24px;
}
.mb3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 24px;
}
.mb4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 30px;
}
.latest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 26px;
}
.tgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-band .num {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 62px;
  color: var(--teal);
  line-height: 1.1;
}
.stat-band .lbl {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 2px;
}
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}
.pfc {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 14px;
  padding: 20px 24px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.pfc:hover {
  transform: translateY(-5px);
  box-shadow: rgba(2, 60, 60, 0.12) 0px 16px 34px;
}
.pfc .st {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 21px;
}
.pfc .dt {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 1024px) {
  .form-grid,
  .split,
  .feat {
    grid-template-columns: 1fr;
  }
  .phases,
  .cat-grid,
  .exp-grid,
  .portfolio,
  .latest-grid,
  .tgrid {
    grid-template-columns: 1fr 1fr;
  }
  .mb2,
  .mb3,
  .mb4,
  .stat-band {
    grid-template-columns: 1fr;
  }
  .page-hero h1 {
    font-size: 48px;
  }
  .frow {
    grid-template-columns: 1fr;
  }
  .tmc {
    flex: 0 0 calc(50% - 11px);
  }
}
@media (max-width: 640px) {
  .phases,
  .cat-grid,
  .exp-grid,
  .portfolio,
  .latest-grid,
  .tgrid {
    grid-template-columns: 1fr;
  }
  .tgrid .tmc {
    flex-basis: 100%;
  }
  .cmp th,
  .cmp td {
    padding: 11px 12px;
    font-size: 12.5px;
  }
  .tmc {
    flex: 0 0 100%;
  }
}
.tmodal {
  position: fixed;
  inset: 0px;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 32, 30, 0.62);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.tmodal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.tmodal-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0px;
  width: min(880px, 100%);
  max-height: 86vh;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: rgba(2, 60, 60, 0.42) 0px 30px 70px;
  transform: translateY(22px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.42s var(--ease),
    opacity 0.32s var(--ease);
}
.tmodal.open .tmodal-card {
  transform: none;
  opacity: 1;
}
.tmodal-im {
  background: var(--pale);
}
.tmodal-im picture,
.tmodal-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tmodal-bd {
  padding: 40px 44px;
  overflow-y: auto;
}
.tmodal-bd .tmodal-name {
  color: var(--teal);
  font-size: 25px;
  font-weight: 500;
  padding-right: 30px;
}
.tmodal-bd .tmodal-role {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 16.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 7px;
}
.tmodal-tx p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 14px;
}
.tmodal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0px;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  box-shadow: rgba(2, 60, 60, 0.18) 0px 6px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.2s;
  z-index: 2;
}
.tmodal-x:hover {
  background: var(--pale);
  transform: rotate(90deg);
}
.tmodal-x:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 2px;
}
body.modal-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .tmodal {
    padding: 16px;
  }
  .tmodal-card {
    grid-template-columns: 1fr;
    max-height: 88vh;
  }
  .tmodal-im {
    height: 210px;
  }
  .tmodal-bd {
    padding: 26px 24px 30px;
  }
  .tmodal-bd .tmodal-name {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tmodal,
  .tmodal-card {
    transition: none;
  }
  .tmodal-card {
    transform: none;
  }
}
@media (max-width: 1200px) {
  .nav-item {
    width: 100%;
  }
  .nav-item > a .car {
    display: none;
  }
  .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0px;
    min-width: 0px;
    padding: 0px 0px 6px;
    background: transparent;
  }
  .nav-drop a {
    display: block;
    padding: 11px 6px 11px 20px;
    font-size: 14.5px;
    border-bottom: 1px solid rgb(244, 246, 236);
    width: 100%;
  }
  .nav-drop a:hover {
    background: transparent;
    color: var(--teal);
  }
}
.tmodal {
  position: fixed;
  inset: 0px auto auto 0px;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 1;
  visibility: visible;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: none;
  z-index: 1500;
}
.tmodal.open {
  display: flex;
}
.tmodal .tmodal-card {
  opacity: 1;
  transform: none;
  transition: none;
  animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running tmIn;
  width: min(880px, 100%);
  max-height: none;
}
@keyframes tmIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.tmodal-im img {
  object-position: center top;
}
@media (max-width: 760px) {
  .tmodal {
    padding: 14px;
    align-items: flex-start;
  }
  .tmodal .tmodal-card {
    grid-template-columns: 1fr;
    margin: auto 0px;
  }
  .tmodal-im {
    height: 280px;
  }
  .tmodal-bd {
    padding: 26px 24px 30px;
  }
}
.cmodal {
  display: none;
  opacity: 1;
  visibility: visible;
  transition: none;
  z-index: 1500;
}
.cmodal.open {
  display: flex;
}
.cmodal .cmodal-card {
  opacity: 1;
  transform: none;
  transition: none;
  animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running tmIn;
}
@media (max-width: 1024px) {
  .topbar {
    justify-content: center;
    padding: 8px 16px;
    gap: 0px;
  }
  .topbar > span {
    display: none;
  }
  .topbar .r {
    gap: 26px;
    font-size: 13px;
    display: flex !important;
  }
  .topbar .r a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}
@media (max-width: 1024px) {
  .hero {
    padding: 52px 0px 110px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .trust {
    margin-top: -60px;
  }
  .page-hero {
    padding: 56px 0px 66px;
  }
  .page-hero h1 {
    font-size: 46px;
  }
}
@media (max-width: 1024px) {
  .nav {
    position: fixed;
    top: var(--hgh, 125px);
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: auto;
    background: rgb(255, 255, 255);
    box-shadow: rgba(2, 60, 60, 0.16) 0px 18px 40px;
    border-top: 1px solid rgb(233, 236, 223);
    padding: 18px 22px 40px;
    gap: 0px;
    overflow-y: auto;
    z-index: 1200;
  }
  .nav a {
    color: var(--ink);
    font-weight: 400;
  }
  .nav a.on {
    color: var(--teal);
    font-weight: 500;
  }
  body.menu-open {
    overflow: hidden;
  }
  .nav .nav-item {
    display: block;
    width: 100%;
  }
  .nav .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0px 0px 8px 14px;
    display: none;
    min-width: 0px;
  }
  .nav .nav-item.open-sub .nav-drop {
    display: block;
  }
}
.copy {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.copy > span:first-child {
  text-align: left;
}
.copy .copy-legal {
  display: flex;
  gap: 22px;
  text-align: right;
}
@media (max-width: 860px) {
  .copy {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding: 18px 20px;
    gap: 12px;
  }
  .copy .copy-legal {
    justify-content: center;
  }
  .footer {
    text-align: center;
  }
  .f-grid {
    text-align: center;
  }
  .f-contact li {
    justify-content: center;
    text-align: left;
  }
  .f-social {
    justify-content: center;
  }
  .f-logo {
    margin: 0px auto;
  }
  .footer .btn {
    margin-left: auto;
    margin-right: auto;
  }
}
.pills label:hover {
  border-color: var(--teal-mid);
  background: var(--pale);
  color: var(--teal);
}
.cform select:hover,
.cform input:hover,
.cform textarea:hover {
  border-color: var(--teal-mid);
}
.cform select option:checked {
  background: var(--pale);
}
.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0px 22px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  appearance: none;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 1.5px solid rgb(202, 221, 217);
  border-radius: 5px;
  background: rgb(255, 255, 255);
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.consent input:hover {
  border-color: var(--teal-mid);
}
.consent input:checked {
  background: var(--teal);
  border-color: var(--teal);
}
.consent input:checked::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-image: none;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}
.consent a {
  color: var(--teal);
  text-decoration: underline;
}
.feat {
  align-items: center;
}
@media (max-width: 1024px) {
  .why-grid[style] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 760px) {
  .why-grid,
  .why-grid[style] {
    grid-template-columns: 1fr !important;
  }
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pager button {
  min-width: 42px;
  height: 42px;
  padding: 0px 13px;
  border-radius: 12px;
  border: 1.5px solid rgb(226, 229, 214);
  background: rgb(255, 255, 255);
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.2s;
}
.pager button:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}
.pager button.act {
  background: var(--teal);
  border-color: var(--teal);
  color: rgb(255, 255, 255);
}
.pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
.pager .pg-info {
  color: var(--soft);
  font-size: 13px;
  margin-left: 8px;
}
.art-wrap {
  max-width: 820px;
  margin: 0px auto;
  padding: 0px 50px;
}
.art-top {
  padding: 34px 0px 0px;
}
.art-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid rgb(226, 229, 214);
  border-radius: 24px;
  padding: 9px 20px;
  transition: 0.25s;
  background: rgb(255, 255, 255);
}
.art-back:hover {
  background: var(--teal);
  color: rgb(255, 255, 255);
  border-color: var(--teal);
}
.art-back svg {
  transition: transform 0.2s;
}
.art-back:hover svg {
  transform: translateX(-3px);
}
.art-back:hover svg path {
  stroke: rgb(255, 255, 255);
}
.art-head {
  padding: 26px 0px 0px;
  text-align: left;
}
.art-cat {
  display: inline-block;
  background: var(--pale);
  color: var(--teal);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
}
.art-head h1 {
  color: var(--ink);
  font-size: 60px;
  line-height: 1.08;
  margin-top: 18px;
  font-weight: 400;
}
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 20px;
  color: var(--soft);
  font-size: 13.5px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgb(231, 241, 239);
}
.art-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(191, 212, 208);
}
.art-cover {
  margin: 30px 0px 8px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: rgba(2, 60, 60, 0.14) 0px 16px 40px;
}
.art-cover img,
.art-cover picture {
  width: 100%;
  display: block;
}
.art-lead {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 30px 0px 0px;
  padding-left: 20px;
  border-left: 3px solid var(--aqua);
}
.art-body {
  padding: 8px 0px 10px;
}
.art-body h2 {
  color: var(--teal);
  font-size: 36px;
  margin: 38px 0px 14px;
  font-weight: 400;
}
.art-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 18px;
}
.art-body ul {
  margin: 6px 0px 24px;
  padding: 0px;
}
.art-body li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
}
.art-body li svg {
  flex: 0 0 auto;
  margin-top: 4px;
}
.art-quote {
  margin: 32px 0px;
  padding: 28px 32px;
  background: var(--wash);
  border-radius: 16px;
  border-left: 4px solid var(--teal);
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--teal);
}
.art-author {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 40px 0px 0px;
  padding: 24px;
  background: var(--wash);
  border-radius: 16px;
}
.art-author .ph {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--pale);
}
.art-author .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.art-author .nm {
  color: var(--teal);
  font-weight: 500;
  font-size: 15px;
}
.art-author .rl {
  color: var(--soft);
  font-size: 12.5px;
  margin-top: 2px;
}
.art-share {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-bottom: 10px;
}
.art-share span {
  color: var(--soft);
  font-size: 13px;
  margin-right: 4px;
}
.art-share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}
.art-share a:hover {
  background: var(--teal);
  transform: translateY(-2px);
}
.art-share a:hover svg path {
  fill: rgb(255, 255, 255);
}
@media (max-width: 760px) {
  .art-wrap {
    padding: 0px 20px;
  }
  .art-head h1 {
    font-size: 42px;
  }
  .art-body h2 {
    font-size: 31px;
  }
  .art-lead {
    font-size: 16.5px;
  }
  .art-quote {
    padding: 22px 24px;
    font-size: 17px;
  }
}
.svc-band {
  padding: 78px 0px;
}
.svc-band--1 {
  background: rgb(255, 255, 255);
}
.svc-band--2 {
  background: rgb(248, 249, 243);
}
.svc-band--3 {
  background: rgb(242, 244, 234);
}
.svc-band--4 {
  background: rgb(231, 234, 220);
}
.svc-band .kicker2 {
  color: var(--teal-mid);
}
.contact-form-sec {
  padding-top: 56px;
}
.side-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.side-stats div {
  text-align: center;
}
.side-stats .n {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 32px;
}
.side-stats .l {
  font-size: 11px;
  color: var(--soft);
  line-height: 1.35;
  margin-top: 3px;
}
.side-quote {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
}
.side-quote + .who {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--teal);
  font-weight: 500;
}
.side-quote + .who + .sp {
  font-size: 12px;
  color: var(--soft);
}
.legal-body {
  max-width: 780px;
  margin: 0px auto;
  padding: 0px 50px;
}
.legal-body h2 {
  color: var(--teal);
  font-size: 34px;
  margin: 34px 0px 12px;
  font-weight: 400;
}
.legal-body p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 16px;
}
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pale);
  color: var(--teal);
  border-radius: 24px;
  padding: 10px 22px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .legal-body {
    padding: 0px 20px;
  }
}
@media (max-width: 1024px) {
  .header.glass {
    backdrop-filter: none;
    background: rgb(255, 255, 255);
  }
  .header-group {
    backdrop-filter: none;
  }
}
.track {
  position: relative;
  overflow: visible;
  background: none;
}
.track-stats {
  position: relative;
  margin-top: 22px;
  row-gap: 0px;
  background: rgb(255, 255, 255);
  border: 0px;
  border-radius: 24px;
  padding: 32px 34px 34px;
  box-shadow: rgba(2, 60, 60, 0.15) 0px 24px 54px;
}
.track-ttl {
  grid-column: 1 / -1;
}
.track-ttl h2 {
  margin: 0px;
  font-size: 40px;
  line-height: 1.1;
  color: var(--teal);
  text-align: center;
}
.track-stats .num {
  color: var(--teal);
}
.track-stats .lbl {
  color: var(--muted);
}
.track-stats > div {
  position: relative;
}
.track-stats > div + div::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 52px;
  background: linear-gradient(transparent, rgba(2, 80, 80, 0.16), transparent);
}
.track-band {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 0px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    160deg,
    rgb(11, 74, 72) 0%,
    rgb(7, 58, 57) 52%,
    rgb(5, 46, 46) 100%
  );
}
.track > .container {
  position: relative;
  z-index: 1;
}
.track-map {
  position: relative;
  margin-top: 28px;
  padding: 56px 0px 48px;
}
.track-map > * {
  position: relative;
  z-index: 1;
}
.track-map-t {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: rgb(255, 255, 255);
  font-size: 50px;
  text-align: center;
  line-height: 1.1;
}
.track-map-s {
  color: rgb(185, 212, 209);
  font-weight: 300;
  font-size: 14.5px;
  text-align: center;
  max-width: 620px;
  margin: 10px auto 0px;
  line-height: 1.6;
}
.usmap-wrap--track {
  max-width: 1280px;
  margin: 20px auto 0px;
}
.usmap-wrap--track > img {
  filter: drop-shadow(rgba(0, 0, 0, 0.32) 0px 18px 40px);
}
.mpin .dot {
  background: var(--teal);
  box-shadow:
    rgb(255, 255, 255) 0px 0px 0px 3.5px,
    rgba(2, 80, 80, 0.28) 0px 0px 0px 5px,
    rgba(2, 80, 80, 0.3) 0px 0px 16px;
}
.mpin::before {
  border-color: rgba(2, 80, 80, 0.5);
}
@media (max-width: 1100px) {
  .track-ttl h2 {
    font-size: 36px;
  }
}
@media (max-width: 1024px) {
  .track-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 28px 24px 30px;
    border-radius: 20px;
    row-gap: 30px;
  }
  .track-stats > div:nth-of-type(2n + 1)::before {
    display: none;
  }
  .track-map-t {
    font-size: 42px;
  }
}
@media (max-width: 760px) {
  .track-ttl h2 {
    font-size: 33px;
  }
  .track-stats {
    padding: 26px 20px 28px;
  }
}
@media (max-width: 560px) {
  .track-stats {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding: 30px 20px;
  }
  .track-stats > div + div::before {
    display: none;
  }
  .track-map {
    padding: 64px 0px 70px;
  }
  .track-map-t {
    font-size: 36px;
  }
  .track-map-s {
    font-size: 13.5px;
  }
}
@media (max-width: 768px) {
  .mpin {
    width: 17px;
    height: 17px;
  }
  .mpin .dot {
    inset: 4px;
    box-shadow:
      0 0 0 2.5px var(--aqua),
      0 0 12px rgba(28, 189, 189, 0.9);
  }
  .mpin::before {
    inset: -5px;
    border-width: 1.5px;
  }
}
.model--static {
  cursor: default;
}
.model--static:hover {
  transform: none;
  box-shadow: rgba(2, 60, 60, 0.14) 0px 14px 34px;
}
.model--static:hover img {
  transform: none;
}
.m-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--aqua);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}
.m-more .arr {
  transition: transform 0.2s;
}
.m-more:hover {
  color: rgb(255, 255, 255);
}
.m-more:hover .arr {
  transform: translateX(4px);
}
.m-more:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 4px;
  border-radius: 4px;
}
.models-cta {
  text-align: center;
  margin-top: 44px;
}
.mm-cta {
  margin-top: 26px;
}
@supports (appearance: base-select) {
  .cform select,
  .cform select::picker(select) {
    appearance: base-select;
  }
  .cform select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 11px 15px;
    border-width: 1.5px;
  }
  .cform select::picker(select) {
    background: rgb(255, 255, 255);
    border: 1.5px solid rgb(226, 229, 214);
    border-radius: 12px;
    padding: 6px;
    margin-top: 6px;
    box-shadow: rgba(2, 60, 60, 0.16) 0px 18px 44px;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.18s var(--ease),
      transform 0.18s var(--ease),
      overlay 0.18s allow-discrete,
      display 0.18s allow-discrete;
  }
  .cform select:open::picker(select) {
    opacity: 1;
    transform: translateY(0px);
  }
  @starting-style {
    .cform select:open::picker(select) {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .cform select option {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: rgb(255, 255, 255);
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .cform select option:hover,
  .cform select option:focus {
    background: var(--pale);
    color: var(--teal);
    outline: none;
  }
  .cform select option:checked {
    background: var(--teal);
    color: rgb(255, 255, 255);
  }
  .cform select option:checked:hover {
    background: var(--teal-mid);
    color: rgb(255, 255, 255);
  }
  .cform select option::checkmark {
    display: none;
  }
  .cform select::picker-icon {
    color: var(--teal-mid);
    transition: transform 0.25s var(--ease);
  }
  .cform select:open::picker-icon {
    transform: rotate(180deg);
  }
}
@media (max-width: 860px) {
  .cform input[type='text'],
  .cform input[type='email'],
  .cform input[type='tel'],
  .cform select,
  .cform textarea {
    font-size: 16px;
  }
  .cform select option {
    font-size: 16px;
  }
}
@media (max-width: 760px) {
  .tmodal .tmodal-im {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 62vh;
  }
  .tmodal .tmodal-im img {
    object-position: center top;
  }
}
body.menu-open .header-group {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}
@media (min-width: 1025px) {
  .split--img-left .img-wrap {
    order: -1;
  }
}
@media (max-width: 1024px) {
  .nav > a:not(.btn) {
    padding: 15px 4px;
  }
  .nav .nav-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 4px;
  }
  .nav .nav-item > a .car {
    display: inline-block;
    margin: 0px;
    font-size: 13px;
    line-height: 1;
    color: var(--teal-mid);
    transition: transform 0.25s var(--ease);
  }
  .nav .nav-item.open-sub > a {
    color: var(--teal);
    font-weight: 500;
  }
  .nav .nav-item.open-sub > a .car {
    transform: rotate(180deg);
    color: var(--teal);
  }
  .nav .nav-drop {
    padding: 0px 0px 10px;
  }
  .nav .nav-drop a {
    display: block;
    width: 100%;
    padding: 13px 4px 13px 20px;
    font-size: 14.5px;
    color: var(--muted);
    border-bottom: 1px solid rgb(244, 246, 236);
  }
  .nav .nav-drop a:last-child {
    border-bottom: 0px;
  }
  .nav a.btn {
    margin-top: 20px;
  }
}
.copy a:hover {
  color: var(--citrus);
}
.f-links a:hover,
.footer a:hover {
  color: var(--citrus);
}
.f-social a:hover svg {
  fill: var(--citrus);
}
.m-more:hover {
  color: var(--citrus);
}
.tmc:hover .tm-more {
  color: var(--citrus);
}
.mcard .mgo:hover {
  background: var(--citrus);
  color: var(--teal);
}
.mpin::before {
  border-color: rgba(230, 249, 175, 0.85);
}
.mpin .dot {
  box-shadow:
    rgb(255, 255, 255) 0px 0px 0px 3.5px,
    rgba(230, 249, 175, 0.55) 0px 0px 0px 5px,
    rgba(230, 249, 175, 0.45) 0px 0px 16px;
}
@media (max-width: 1024px) {
  h2,
  .sec h2,
  .cta h2 {
    font-size: 43px;
  }
  .art-body h2 {
    font-size: 33px;
  }
  .legal-body h2 {
    font-size: 31px;
  }
  .track-ttl h2 {
    font-size: 36px;
  }
  .track .num,
  .stat-band .num {
    font-size: 54px;
  }
  .phase .pn {
    font-size: 88px;
    top: -40px;
  }
}
@media (max-width: 560px) {
  .hero h1 {
    font-size: 46px;
  }
  .page-hero h1 {
    font-size: 42px;
  }
  h2,
  .sec h2,
  .cta h2 {
    font-size: 38px;
  }
  .art-head h1 {
    font-size: 40px;
  }
  .art-body h2 {
    font-size: 30px;
  }
  .legal-body h2 {
    font-size: 29px;
  }
  .track-ttl h2 {
    font-size: 32px;
  }
  .track .num,
  .stat-band .num {
    font-size: 50px;
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .art-head h1 {
    font-size: 50px;
  }
}
.psec {
  position: relative;
  padding: 96px 0px;
  background: var(--grad-teal);
  text-align: center;
  overflow: hidden;
}
.psec .kicker2 {
  color: var(--citrus);
}
.psec h2 {
  color: rgb(255, 255, 255);
  max-width: 860px;
  margin: 10px auto 0px;
}
.psec .lead {
  color: rgb(216, 236, 234);
  margin: 0px auto;
}
.p-compare {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 26px;
  max-width: 1080px;
  margin: 52px auto 0px;
  text-align: left;
  align-items: stretch;
}
.p-col {
  border-radius: 22px;
  padding: 36px 38px;
}
.p-col--old {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.p-col--pearl {
  background: rgb(255, 255, 255);
  box-shadow: rgba(0, 20, 27, 0.32) 0px 30px 70px;
}
.p-k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgb(159, 189, 186);
}
.p-col--pearl .p-k {
  color: var(--teal-mid);
}
.p-col h3 {
  font-size: 22px;
  font-weight: 500;
  margin-top: 6px;
  color: rgb(255, 255, 255);
}
.p-col--pearl h3 {
  color: var(--teal);
}
.p-list {
  list-style: none;
  padding: 0px;
  margin: 24px 0px 0px;
  display: grid;
  gap: 16px;
}
.p-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: rgb(207, 224, 222);
}
.p-col--pearl .p-list li {
  color: var(--ink);
}
.p-list svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.psec .btn {
  margin-top: 46px;
}
@media (max-width: 860px) {
  .p-compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-col {
    padding: 28px 24px;
  }
  .psec {
    padding: 76px 0px;
  }
}
.qmodal .cmodal-card {
  width: min(720px, 100%);
  padding: 40px 44px;
}
.qm-sub {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 8px;
  max-width: 560px;
}
.qmodal .cform {
  border: 0px;
  box-shadow: none;
  padding: 0px;
  background: none;
  margin-top: 22px;
  border-radius: 0px;
}
.qmodal .cform textarea {
  min-height: 84px;
}
.qmodal .cform .btn[type='submit'] {
  width: 100%;
  justify-content: center;
}
.lead-done {
  text-align: center;
  padding: 26px 8px;
}
.lead-done .ok {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px auto 18px;
}
.lead-done h3 {
  color: var(--teal);
  font-size: 26px;
  font-weight: 500;
  padding-right: 0px;
  margin: 0px;
}
.lead-done p {
  font-weight: 300;
  font-size: 15px;
  color: var(--muted);
  max-width: 440px;
  margin: 10px auto 0px;
  line-height: 1.7;
}
.lead-done .btn {
  margin-top: 24px;
}
.cform + .lead-done,
.cform[hidden] + .lead-done {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(233, 236, 223);
  border-radius: 18px;
  padding: 56px 32px;
  box-shadow: rgba(2, 60, 60, 0.08) 0px 16px 40px;
}
.qmodal .lead-done {
  background: none;
  border: 0px;
  box-shadow: none;
  padding: 26px 8px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  .qmodal .cmodal-card {
    padding: 30px 20px;
  }
}
@media (min-width: 561px) {
  .qmodal .frow {
    grid-template-columns: repeat(2, 1fr);
  }
}
.art-body .art-intro {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 400;
}
.art-body h3 {
  color: var(--teal);
  font-size: 19px;
  font-weight: 500;
  margin: 28px 0px 10px;
}
.art-body strong {
  font-weight: 500;
  color: var(--ink);
}
.art-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.art-body .art-ul,
.art-body .art-ol {
  margin: 6px 0px 24px 22px;
  padding: 0px;
}
.art-body .art-ul li,
.art-body .art-ol li {
  display: list-item;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 8px;
  padding-left: 4px;
}
.art-body .art-ul li::marker {
  color: var(--aqua);
}
.art-body .art-ol li::marker {
  color: var(--teal);
  font-weight: 500;
}
/* EC-CSS-005: scoped per-page CSS for page-insights */
@media (max-width: 1024px) {
  .latest-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 640px) {
  .latest-grid {
    grid-template-columns: 1fr !important;
  }
}
/* EC-CSS-005: scoped per-page CSS for page-partnerships */
@media (max-width: 1024px) {
  #duoGrid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1024px) {
  #whoGrid {
    grid-template-columns: 1fr !important;
  }
}

/* From assets/fonts/fontfaces.css */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/league-gothic-400.woff2') format('woff2');
}

/* Source extracted CSS */

/* From assets/site.css */
/* ============================================================
   PEARL MEDICAL — HOME (Proyecto Premium)
   Base visual: Modelo A (fusión New Bay 70 / RCQ 30)
   Animaciones e interacciones: patrón DocShield
   ============================================================ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/poppins-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/league-gothic-400.woff2') format('woff2');
}
:root {
  --teal: #025050;
  --teal-mid: #206b6b;
  --aqua: #1cbdbd;
  --pale: #e7eadc;
  --wash: #f8f9f3;
  --ink: #17302e;
  --muted: #3e5d5a;
  --soft: #6c8984;
  --footer: #001f2a;
  --footer-dk: #00141b;
  --grad-teal: linear-gradient(130deg, #206b6b 0%, #025050 100%);
  --citrus: #e6f9af;
  --grad-deep: linear-gradient(0deg, #24534e 0%, #3e6b66 100%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #f2f4ea;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #206b6b, #025050);
  border-radius: 8px;
  border: 3px solid #f2f4ea;
}
::-webkit-scrollbar-thumb:hover {
  background: #206b6b;
}
html {
  scrollbar-width: thin;
  scrollbar-color: #206b6b #f2f4ea;
}
html {
  scroll-behavior: smooth;
}
/* El menu movil vive fuera de pantalla (translateX 100%): recortamos el eje X
   con overflow-x:clip para que no genere scroll horizontal. clip no crea un
   contenedor de scroll, asi que el header sticky sigue funcionando. */
html,
body {
  overflow-x: clip;
}
body {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
a {
  text-decoration: none;
  color: var(--teal);
  transition: color 0.2s;
}
h1,
h2 {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.1;
}
h2 {
  font-size: 50px;
}
h3 {
  font-weight: 500;
  line-height: 1.25;
}
.container {
  --gut: 50px;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--gut);
}
.sen {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
}

/* ---------- reveal on scroll (DocShield) ---------- */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease),
    transform 0.8s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv-d1 {
  transition-delay: 0.12s;
}
.rv-d2 {
  transition-delay: 0.24s;
}
.rv-d3 {
  transition-delay: 0.36s;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- botones (pill Modelo A + hover DocShield) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: 30px;
  font-size: 14.5px;
  font-weight: 400;
  color: #fff !important;
  background: var(--teal);
  border: 0;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s,
    background 0.25s;
  font-family: inherit;
  line-height: 1.4;
}
.btn:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(2, 80, 80, 0.24);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.btn--white {
  background: #fff;
  color: var(--teal) !important;
}
.btn--white:hover {
  background: var(--pale);
  box-shadow: 0 10px 26px rgba(2, 80, 80, 0.2);
}
.btn--line {
  background: transparent;
  border: 1.5px solid var(--teal);
  color: var(--teal) !important;
}
.btn--line:hover {
  background: var(--teal);
  color: #fff !important;
}
.btn .arr {
  transition: transform 0.2s;
}
.btn:hover .arr {
  transform: translateX(4px);
}

/* ---------- divider corto (New Bay) ---------- */
.divider {
  width: 44px;
  border: 0;
  border-top: 3px solid var(--teal-mid);
  margin: 18px 0;
}
.divider--c {
  margin-left: auto;
  margin-right: auto;
}
.divider--w {
  border-top-color: var(--aqua);
}

/* ============ TOP BAR ============ */
.topbar {
  background: var(--footer);
  color: #cfe5e2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 50px;
  font-size: 12.5px;
  gap: 16px;
}
.topbar .r {
  display: flex;
  gap: 24px;
  align-items: center;
  white-space: nowrap;
}
.topbar a {
  color: #cfe5e2;
}
.topbar a:hover {
  color: var(--aqua);
}

/* ============ HEADER sticky + glass (DocShield) ============ */
.header-group {
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header {
  background: #fff;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    backdrop-filter 0.3s;
}
.header.glass {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(2, 80, 80, 0.1);
}
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 88px;
  max-width: none;
  margin: 0 auto;
  padding: 0 50px;
}
.header img.logo {
  height: 40px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14.5px;
}
.nav a.btn {
  white-space: nowrap;
}
/* El menu del Ultimate es largo: apretamos el header en pantallas medianas
   para que nunca pise el logo ni parta el boton en dos lineas. */
@media (max-width: 1560px) {
  .header-in {
    padding: 0 30px;
    gap: 20px;
  }
  .topbar {
    padding: 9px 30px;
  }
  .nav {
    gap: 19px;
    font-size: 13.5px;
  }
  .nav a.btn {
    padding: 11px 19px;
    font-size: 13.5px;
  }
}
.nav a {
  color: var(--muted);
  position: relative;
  padding: 6px 0;
}
.nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  border-bottom: 2px solid var(--teal);
  transition: right 0.25s var(--ease);
}
.nav a:not(.btn):hover::after,
.nav a.on::after {
  right: 0;
}
.nav a.on {
  color: var(--teal);
}
.nav a.btn {
  padding: 12px 26px;
}
[id] {
  scroll-margin-top: 150px;
}
/* El boton se muestra desde 1200px, asi que el icono y su estado abierto
   viven en la regla base y no dentro de un breakpoint mas estrecho. */
.burger {
  display: none;
  position: relative;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: 8px;
  width: 46px;
  height: 42px;
  font-size: 0;
  cursor: pointer;
}
.burger::before {
  content: '\2630';
  font-size: 20px;
  line-height: 42px;
  display: block;
  text-align: center;
}
body.menu-open .burger::before {
  content: '\2715';
  font-size: 18px;
}

/* ============ HERO con video ============ */
.hero {
  position: relative;
  padding: 120px 0 200px;
  overflow: hidden;
}
.hero video,
.hero .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.78) 0%,
    rgba(3, 46, 46, 0.55) 45%,
    rgba(3, 46, 46, 0.32) 100%
  );
}
.hero video {
  will-change: transform;
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero .kicker {
  color: var(--aqua);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
}
.hero h1 {
  color: #fff;
  font-size: 72px;
  margin-top: 12px;
  max-width: 760px;
  font-weight: 400;
}
.hero p.sub {
  color: #e4f0ee;
  font-weight: 300;
  font-size: 16.5px;
  max-width: 600px;
  margin-top: 20px;
}
.hero-btns {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* ============ TRUST BAR superpuesta (Modelo A) ============ */
.trust {
  margin-top: -90px;
  position: relative;
  z-index: 5;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.trust-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(2, 60, 60, 0.14);
  padding: 30px 24px;
  text-align: center;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.trust-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(2, 60, 60, 0.18);
}
.trust-card .big {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 46px;
  color: var(--teal);
}
.trust-card .lbl {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ============ SECCIONES ============ */
.sec {
  padding: 92px 0;
}
.sec--wash {
  background: var(--wash);
}
.sec--slim {
  padding: 46px 0;
}
.sec h2 {
  color: var(--teal);
  font-size: 50px;
}
.c {
  text-align: center;
}
.sec .lead {
  font-weight: 300;
  color: var(--muted);
  max-width: 720px;
}
.c .lead {
  margin: 0 auto;
}

/* Opportunity */
.opp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 58px;
  align-items: center;
}
.opp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 22px;
  margin-top: 22px;
}
.opp-item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14.5px;
}
.opp img {
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(2, 60, 60, 0.18);
}
.imgfloat {
  transition: transform 0.3s var(--ease);
}
.imgfloat:hover {
  transform: translateY(-8px);
}
.check {
  flex: none;
}

/* About: círculos (Modelo A) */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
  margin-top: 52px;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.pillar .circle {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.pillar:hover .circle {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(2, 80, 80, 0.28);
}
.pillar h3 {
  color: var(--teal-mid);
  font-size: 19px;
}
.pillar p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  max-width: 290px;
}

/* Solutions: carrusel con fade */
.solutions {
  background: var(--grad-teal);
  padding: 92px 0;
}
.solutions h2,
.solutions .lead {
  color: #fff;
}
.solutions .lead {
  color: #d8ecea;
}
.carousel {
  position: relative;
  margin-top: 46px;
  text-align: left;
}
.slides {
  position: relative;
}
.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s var(--ease),
    visibility 0s linear 0.7s;
}
.slide.on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease);
}
.s-im {
  min-height: 320px;
}
.s-im picture,
.s-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s-bd {
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 17px;
  letter-spacing: 2px;
}
.s-bd h3 {
  color: #fff;
  font-size: 36px;
  letter-spacing: 0.3px;
  line-height: 1.15;
}
.s-bd .s-tx {
  color: #eaf5f4;
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.75;
  margin-top: 16px;
  max-width: 560px;
}
.s-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  margin-top: 26px;
  padding: 0;
  max-width: 560px;
}
.s-list li {
  list-style: none;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.s-list svg {
  flex: none;
  margin-top: 2px;
}
.c-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.c-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
}
.c-arrow:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}
.c-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}
.c-dots span {
  width: 9px;
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.3s;
}
.c-dots span.act {
  width: 28px;
  background: var(--aqua);
}

/* Models OBL/ASC: tarjetas de imagen completa */
.models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 48px;
  text-align: left;
}
.model {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  min-height: 440px;
  box-shadow: 0 14px 34px rgba(2, 60, 60, 0.14);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.model:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(2, 60, 60, 0.2);
}
.model picture,
.model img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.model img {
  transform: scale(1.02);
}
.model:hover img {
  transform: scale(1.07);
}
.m-ov {
  position: absolute;
  inset: auto 0 0 0;
  padding: 130px 32px 30px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.6) 55%,
    transparent 100%
  );
}
.m-ov .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 17px;
  letter-spacing: 2px;
}
.m-ov h3 {
  color: #fff;
  font-size: 27px;
  margin-top: 6px;
}
.m-ov .d {
  font-weight: 300;
  color: #d8ecea;
  font-size: 14.5px;
  margin-top: 10px;
  max-width: 480px;
}
.m-ov .t {
  font-size: 13px;
  color: var(--aqua);
  margin-top: 12px;
  font-weight: 500;
}

/* How it works */
.how {
  position: relative;
  background: url('assets/images/howitworks.jpg') center/cover no-repeat;
  background-image: image-set(
    url('assets/images/howitworks.webp') type('image/webp'),
    url('assets/images/howitworks.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  padding: 92px 0;
}
.how::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(23, 58, 54, 0.46) 0%,
    rgba(38, 77, 72, 0.44) 100%
  );
}
.how .container {
  position: relative;
  z-index: 2;
}
.how h2 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(3, 32, 30, 0.55);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 52px;
}
.step {
  text-align: center;
}
.step .n {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid var(--aqua);
  color: #fff;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  transition:
    transform 0.25s var(--ease),
    background 0.25s;
}
.step:hover .n {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.22);
}
.step h3 {
  color: #fff;
  font-size: 18px;
  text-shadow: 0 2px 12px rgba(3, 32, 30, 0.55);
}
.step p {
  color: #f2f4ea;
  font-weight: 300;
  font-size: 14px;
  margin-top: 10px;
  text-shadow: 0 2px 10px rgba(3, 32, 30, 0.6);
}

/* Why partner */
.whysec {
  background: linear-gradient(180deg, #fff 0%, var(--wash) 100%);
}
.kicker2 {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.why-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 44px;
  flex-wrap: wrap;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 46px;
  text-align: left;
}
.why {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  padding: 32px 34px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  box-shadow: 0 10px 28px rgba(2, 60, 60, 0.06);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.why::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--grad-teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}
.why:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(2, 60, 60, 0.14);
}
.why:hover::before {
  transform: scaleY(1);
}
.why .ic {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.why:hover .ic {
  background: var(--teal-mid);
}
.why h3 {
  color: var(--teal);
  font-size: 17.5px;
  position: relative;
}
.why p {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  position: relative;
}

/* Track record */
.track {
  background: var(--grad-teal);
  padding: 64px 0;
}
.track h2 {
  color: #fff;
  text-align: center;
}
.track-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  margin-top: 46px;
}
.track .num {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 62px;
  color: #fff;
}
.track .num .a {
  color: var(--aqua);
  font-size: 30px;
  vertical-align: top;
}
.track .lbl {
  color: #cfe5e2;
  font-size: 13.5px;
  margin-top: 2px;
}
/* Sin difuminado: las fotos entran y salen por el borde de la pagina, asi que
   el carrusel rompe el margen del contenedor con --gut. */
.cm {
  overflow: hidden;
  margin-top: 14px;
  margin-left: calc(-1 * var(--gut, 50px));
  margin-right: calc(-1 * var(--gut, 50px));
}
.cm-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.cm:hover .cm-track {
  animation-play-state: paused;
}
.cph {
  width: 360px;
  height: 230px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}
.cph picture,
.cph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.cph img {
  transform: scale(1.02);
}
.cph:hover img {
  transform: scale(1.07);
}
.track .note {
  color: #9fcbc7;
  font-size: 11.5px;
  text-align: center;
  margin-top: 22px;
}

/* Team: carrusel de tarjetas con foto completa */
.team-car {
  position: relative;
  margin-top: 48px;
}
.team-vp {
  overflow: hidden;
}
.team-track {
  display: flex;
  gap: 22px;
  transition: transform 0.6s var(--ease);
}
.tmc {
  flex: 0 0 calc((100% - 66px) / 4);
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/5;
  text-align: left;
  background: var(--footer);
}
.tmc picture,
.tmc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.tmc img {
  transform: scale(1.02);
}
.tmc:hover img {
  transform: scale(1.07);
}
.tmc .ov {
  position: absolute;
  inset: auto 0 0 0;
  padding: 52px 20px 18px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.92) 0%,
    rgba(2, 32, 30, 0.55) 55%,
    transparent 100%
  );
}
.tmc h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}
.tmc .role {
  color: var(--aqua);
  font-size: 12.5px;
  margin-top: 3px;
}
.tmc .bio {
  color: #d8ecea;
  font-weight: 300;
  font-size: 12.5px;
  margin-top: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.4s var(--ease),
    opacity 0.4s;
}
.tmc:hover .bio {
  max-height: 90px;
  opacity: 1;
}
/* Enlace siempre visible que deja claro que la tarjeta se puede abrir */
.tmc .tm-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aqua);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 10px;
}
.tmc .tm-more .arr {
  transition: transform 0.2s;
}
.tmc:hover .tm-more {
  color: #fff;
}
.tmc:hover .tm-more .arr {
  transform: translateX(4px);
}
.tmc:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}
.team-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.t-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
}
.t-arrow svg path {
  transition: stroke 0.25s;
}
.t-arrow:hover {
  background: var(--teal);
  transform: translateY(-2px);
}
.t-arrow:hover svg path {
  stroke: #fff;
}
.t-dots {
  display: flex;
  gap: 9px;
  align-items: center;
}
.t-dots span {
  width: 9px;
  height: 9px;
  border-radius: 6px;
  background: #c9dedb;
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.3s;
}
.t-dots span.act {
  width: 28px;
  background: var(--teal);
}

/* Testimonials marquee (DocShield) */
.tsec {
  background: var(--wash);
  padding: 92px 0 84px;
  overflow: hidden;
}
.t-marquee {
  overflow: hidden;
  margin-top: 22px;
  padding: 24px 0 48px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.t-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 44s linear infinite;
}
.t-marquee:hover .t-track {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.t-card {
  width: 360px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(2, 60, 60, 0.09);
  padding: 28px;
  text-align: left;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.t-card:hover {
  transform: translateY(-5px);
}
.t-card .q {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 54px;
  line-height: 1;
}
.t-card p.tx {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
}
.t-card .who {
  margin-top: 16px;
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
}
.t-card .sp {
  font-size: 12.5px;
  color: var(--soft);
}

/* Insights: carrusel sobre fondo tintado */
#insights {
  background: #f2f4ea;
}
.ins-car {
  position: relative;
  margin-top: 48px;
}
.ins-vp {
  overflow: hidden;
  padding: 10px 10px 42px;
  margin: -10px -10px -42px;
}
.ins-track {
  display: flex;
  gap: 26px;
  transition: transform 0.6s var(--ease);
}
.ins {
  flex: 0 0 calc((100% - 78px) / 4);
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1/1.05;
  background: var(--footer);
  text-align: left;
  box-shadow: 0 12px 30px rgba(2, 60, 60, 0.12);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.ins:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px rgba(2, 60, 60, 0.2);
}
.ins .im {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ins .im picture,
.ins .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.ins .im img {
  transform: scale(1.02);
}
.ins:hover .im img {
  transform: scale(1.07);
}
.ins .bd {
  position: absolute;
  inset: auto 0 0 0;
  padding: 58px 18px 17px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.6) 58%,
    transparent 100%
  );
}
.ins .cat {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  color: var(--aqua);
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 500;
}
.ins h3 {
  color: #fff;
  font-size: 15.5px;
  line-height: 1.42;
  margin-top: 7px;
  font-weight: 500;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins .rd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--aqua);
  font-weight: 500;
}
.ins:hover .rd {
  color: #fff;
}
.ins:hover .rd .arr {
  transform: translateX(4px);
}
.ins .arr {
  transition: transform 0.2s;
}
.ins:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

/* Final CTA */
.cta {
  position: relative;
  background: url('assets/images/cta.jpg') center/cover no-repeat;
  background-image: image-set(
    url('assets/images/cta.webp') type('image/webp'),
    url('assets/images/cta.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center;
  padding: 96px 0;
  text-align: center;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(23, 58, 54, 0.52) 0%,
    rgba(38, 77, 72, 0.48) 100%
  );
}
.cta .container {
  position: relative;
  z-index: 2;
}
.cta h2 {
  color: #fff;
  font-size: 50px;
  text-shadow: 0 2px 14px rgba(3, 32, 30, 0.55);
}
.cta p {
  color: #f2f4ea;
  font-weight: 300;
  max-width: 620px;
  margin: 16px auto 30px;
  text-shadow: 0 2px 10px rgba(3, 32, 30, 0.6);
}

/* Footer */
.footer {
  background: var(--footer);
  color: #c7dbd8;
  padding: 64px 0 56px;
  font-weight: 300;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 44px;
}
.footer h4 {
  color: #fff;
  font-weight: 500;
  font-size: 15.5px;
  margin-bottom: 16px;
}
.footer a {
  color: #c7dbd8;
  font-size: 13.5px;
  display: block;
  padding: 4px 0;
}
.footer a:hover {
  color: var(--aqua);
}
.footer p {
  font-size: 13px;
  line-height: 1.7;
}
.f-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
}
.f-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.f-social span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
}
.f-social span:hover {
  background: var(--teal-mid);
  transform: translateY(-3px);
}
.f-contact li {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 4px 0;
  font-size: 13.5px;
  align-items: flex-start;
}
.f-contact svg {
  margin-top: 4px;
  flex: none;
}
.copy {
  background: var(--footer-dk);
  color: #8fa6a3;
  display: flex;
  justify-content: space-between;
  padding: 16px 50px;
  font-size: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.copy a {
  color: #8fa6a3;
}
.copy a:hover {
  color: var(--aqua);
}

/* Back to top (RCQ) */
.top-btn {
  position: fixed;
  right: 44px;
  bottom: 146px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(2, 80, 80, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.2s;
  z-index: 1100;
}
.top-btn.show {
  opacity: 1;
  pointer-events: auto;
}
.top-btn:hover {
  transform: translateY(-3px);
}

/* Flotantes ocultos al llegar al footer */
.float-badge {
  transition:
    transform 0.3s var(--ease),
    background 0.3s,
    opacity 0.35s var(--ease);
}
body.at-footer .float-badge,
body.at-footer .top-btn {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(24px);
}

/* Carruseles: arrastre */
.team-vp,
.ins-vp {
  touch-action: pan-y;
  cursor: grab;
}
.team-vp:active,
.ins-vp:active {
  cursor: grabbing;
}
.slides:active {
  cursor: grabbing;
}
.tmc,
.ins,
.t-card,
.cph {
  user-select: none;
}

/* ============ ANIMACIONES ORIGINALES (re-disparables) ============ */
/* Barra de progreso de lectura */
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--teal-mid), var(--aqua));
  z-index: 1300;
  transition: width 0.15s linear;
}
/* Divider que crece al entrar */
.divider.anim {
  width: 0;
  transition: width 0.9s var(--ease) 0.25s;
}
.divider.anim.in {
  width: 44px;
}
/* Revelado de fotos con barrido (clip-path) */
/* Pasos: línea punteada que se dibuja + números con pop */
.steps {
  position: relative;
}
.steps.anim .n {
  transform: scale(0.55);
  opacity: 0;
}
.steps.anim.in .n {
  transform: scale(1);
  opacity: 1;
  transition:
    transform 0.6s var(--ease),
    opacity 0.5s var(--ease);
}
.steps.anim.in .step:nth-child(2) .n {
  transition-delay: 0.3s;
}
.steps.anim.in .step:nth-child(3) .n {
  transition-delay: 0.6s;
}
/* Pilares: anillo perla que pulsa al entrar */
.pillar .circle {
  position: relative;
}
.pillar .circle::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--aqua);
  opacity: 0;
  pointer-events: none;
}
.pillars.anim.in .pillar:nth-child(1) .circle::after {
  animation: ring 1.15s var(--ease) 0.35s;
}
.pillars.anim.in .pillar:nth-child(2) .circle::after {
  animation: ring 1.15s var(--ease) 0.55s;
}
.pillars.anim.in .pillar:nth-child(3) .circle::after {
  animation: ring 1.15s var(--ease) 0.75s;
}
@keyframes ring {
  0% {
    transform: scale(0.72);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.38);
    opacity: 0;
  }
}
/* Items de lista en cascada al cambiar de slide */
.slide .s-list li {
  opacity: 0;
  transform: translateY(10px);
}
.slide.on .s-list li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease) 0.25s,
    transform 0.5s var(--ease) 0.25s;
}
.slide.on .s-list li:nth-child(2) {
  transition-delay: 0.33s;
}
.slide.on .s-list li:nth-child(3) {
  transition-delay: 0.41s;
}
.slide.on .s-list li:nth-child(4) {
  transition-delay: 0.49s;
}
.slide.on .s-list li:nth-child(5) {
  transition-delay: 0.57s;
}
.slide.on .s-list li:nth-child(6) {
  transition-delay: 0.65s;
}
@media (prefers-reduced-motion: reduce) {
  .divider.anim,
  .divider.anim.in {
    width: 44px;
    transition: none;
  }
  .steps.anim .n,
  .steps.anim.in .n {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .pillars.anim.in .circle::after {
    animation: none;
  }
  .slide .s-list li,
  .slide.on .s-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #progress {
    display: none;
  }
}

/* FAQ acordeon */
.faqsec {
  background: #fff;
}
.faq-list {
  max-width: 820px;
  margin: 40px auto 0;
}
.faq-item {
  border-bottom: 1px solid #e9ecdf;
}
.faq-q {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  padding: 22px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.faq-q:hover {
  color: var(--teal);
}
.faq-q .fx {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.35s var(--ease),
    background 0.3s;
}
.faq-item.open .faq-q .fx {
  transform: rotate(45deg);
  background: var(--aqua);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq-a p {
  padding: 0 6px 24px;
  color: var(--muted);
  font-weight: 300;
  font-size: 14.5px;
  max-width: 740px;
}

/* Badge circular flotante (desktop) */
.float-badge {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 104px;
  height: 104px;
  z-index: 1100;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 12px 32px rgba(2, 40, 40, 0.45);
  transition:
    transform 0.3s var(--ease),
    background 0.3s;
}
.float-badge:hover {
  background: #9adad4;
}
.float-badge:hover {
  transform: scale(1.08);
}
.float-badge .fb-ic {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-badge .ring {
  position: absolute;
  inset: 0;
  animation: spin 16s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.float-badge .ring text {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2.2px;
  fill: #001f2a;
  text-transform: uppercase;
}

/* Barra CTA fija en movil */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  z-index: 1200;
  box-shadow: 0 -6px 18px rgba(2, 40, 40, 0.22);
}
.mobile-cta a {
  flex: 1;
  text-align: center;
  padding: 15px 10px;
  font-size: 15px;
  font-weight: 500;
}
.mobile-cta .m-call {
  background: var(--teal);
  color: #fff;
}
.mobile-cta .m-book {
  background: #fff;
  color: var(--teal);
}

/* Mobile */
/* Menu movil. Se activa antes de 1024 porque el menu del Ultimate es largo
   y a partir de ~1200px empezaba a partirse en dos lineas sobre el logo. */
@media (max-width: 1200px) {
  .nav {
    position: fixed;
    inset: var(--navtop, 88px) 0 0 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    overflow-y: auto;
    z-index: 999;
  }
  .nav.open {
    transform: translateX(0);
  }
  .nav a {
    padding: 13px 6px;
    border-bottom: 1px solid #f1f3e8;
    width: 100%;
    font-size: 16px;
  }
  .nav .btn {
    margin-top: 14px;
  }
  .nav a.btn {
    font-size: 15px;
    padding: 13px 26px;
    width: auto;
  }
  .burger {
    display: block;
  }
}
@media (max-width: 1024px) {
  .hero h1 {
    font-size: 54px;
  }
  .trust-grid,
  .pillars,
  .steps,
  .why-grid,
  .track-stats {
    grid-template-columns: 1fr;
  }
  .ins {
    flex-basis: calc((100% - 26px) / 2);
  }
  .tmc {
    flex: 0 0 calc((100% - 22px) / 2);
  }
  @media (max-width: 640px) {
    .ins {
      flex-basis: 100%;
    }
  }
  .models,
  .opp,
  .f-grid {
    grid-template-columns: 1fr;
  }
  .slide {
    grid-template-columns: 1fr;
  }
  .slide .s-im {
    min-height: 200px;
  }
  .s-bd {
    padding: 28px 26px;
  }
  .s-bd h3 {
    font-size: 26px;
  }
  .s-list {
    grid-template-columns: 1fr;
  }
  .cph {
    width: 260px;
    height: 170px;
  }
  .model {
    min-height: 360px;
  }
  .why-head {
    align-items: flex-start;
  }
  .float-badge {
    display: none;
  }
  .mobile-cta {
    display: flex;
  }
  body {
    padding-bottom: 52px;
  }
  .top-btn {
    right: 18px;
    bottom: 70px;
  }
  .track-photos {
    grid-template-columns: 1fr;
  }
  .topbar {
    justify-content: center;
    padding: 9px 20px;
  }
  .container,
  .header-in {
    padding: 0 20px;
  }
  .container {
    --gut: 20px;
  }
  .topbar .r {
    display: none;
  }
}

/* ============ SUBPAGINAS ============ */
/* Dropdowns del nav (Ultimate) */
.nav-item {
  position: relative;
}
.nav-item > a .car {
  font-size: 11px;
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.25s;
  vertical-align: 1px;
}
.nav-item:hover > a .car {
  transform: rotate(180deg);
}
.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(2, 60, 60, 0.16);
  border-radius: 0 0 10px 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.25s var(--ease);
  padding: 8px 0;
  z-index: 60;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop a {
  display: block;
  padding: 10px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.nav .nav-drop a:not(.btn)::after {
  display: none;
  content: none;
}
.nav-drop a:hover {
  background: var(--wash);
  color: var(--teal);
}
/* Hero interior */
.page-hero {
  position: relative;
  padding: 96px 0 110px;
  overflow: hidden;
  background: var(--grad-teal);
}
.page-hero .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-hero .ph-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.8) 0%,
    rgba(3, 46, 46, 0.55) 50%,
    rgba(3, 46, 46, 0.35) 100%
  );
}
.page-hero .container {
  position: relative;
  z-index: 2;
}
.page-hero .crumb {
  color: var(--aqua);
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.page-hero .crumb a {
  color: var(--aqua);
}
.page-hero h1 {
  color: #fff;
  font-size: 62px;
  max-width: 820px;
  margin-top: 12px;
  font-weight: 400;
}
.page-hero p.sub {
  color: #e4f0ee;
  font-weight: 300;
  font-size: 16px;
  max-width: 640px;
  margin-top: 16px;
}
/* Lista rica (titulo + descripcion) para tarjetas duo/glass */
.rich-list {
  padding: 0;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rich-list li {
  list-style: none;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.rich-list svg {
  flex: none;
  margin-top: 3px;
}
.rich-list b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.rich-list p {
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 2px;
}
.glass-cards .rich-list b {
  color: #fff;
}
.glass-cards .rich-list p {
  color: #dcebe9;
}
.glass-cards .kchip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 18px;
  padding: 4px 15px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 14.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Mapa de centros con pins y tarjetas hover */
.map-band {
  background: var(--footer);
  padding: 92px 0;
}
.map-band h2 {
  color: #fff;
}
.map-band .lead {
  color: #b9d4d1;
}
.usmap-wrap {
  position: relative;
  max-width: 1180px;
  margin: 52px auto 0;
}
.usmap-wrap > img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}
.mpin {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  z-index: 5;
}
/* El pin activo sube por encima del resto para que ningun punto vecino
   quede dibujado sobre la tarjeta abierta. */
.mpin:hover,
.mpin.on,
.mpin:focus-visible {
  z-index: 40;
}
.mpin .dot {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 3.5px var(--aqua),
    0 0 18px rgba(28, 189, 189, 0.95);
  transition: transform 0.25s var(--ease);
}
.mpin::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(28, 189, 189, 0.8);
  animation: mping 2.2s var(--ease) infinite;
}
@keyframes mping {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.mpin:hover .dot,
.mpin.on .dot {
  transform: scale(1.3);
}
.mcard {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 8px);
  width: 310px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
  z-index: 30;
  pointer-events: none;
  text-align: left;
}
.mpin:hover .mcard,
.mpin:focus-visible .mcard,
.mpin.on .mcard {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease);
}
.mcard .im {
  height: 150px;
  overflow: hidden;
}
.mcard .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mcard .bd {
  padding: 16px 18px 18px;
}
.mcard .st {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 21px;
}
.mcard .tp {
  color: var(--teal-mid);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 3px;
}
.mcard p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.55;
}
.mcard--left {
  left: auto;
  right: -10px;
  transform: translate(0, 8px);
}
.mpin:hover .mcard--left,
.mpin.on .mcard--left,
.mpin:focus-visible .mcard--left {
  transform: translate(0, 0);
}
/* Espejo de la anterior, para los pines pegados al borde izquierdo del mapa:
   sin esto la tarjeta se centra en el pin y se sale de la pantalla en movil. */
.mcard--right {
  left: -10px;
  right: auto;
  transform: translate(0, 8px);
}
.mpin:hover .mcard--right,
.mpin.on .mcard--right,
.mpin:focus-visible .mcard--right {
  transform: translate(0, 0);
}
.mgo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  background: var(--teal);
  color: #fff;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.2s;
}
.mgo:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .mcard {
    width: 230px;
  }
  .mcard .im {
    height: 105px;
  }
}

/* Case studies: tarjeta compacta de carrusel + modal expandido */
.csl {
  flex: 0 0 calc((100% - 52px) / 3);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 10px 28px rgba(2, 60, 60, 0.08);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  user-select: none;
  cursor: pointer;
}
.csl:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(2, 60, 60, 0.15);
}
.csl .im {
  height: 200px;
  overflow: hidden;
  flex: none;
}
.csl .im picture,
.csl .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.csl:hover .im img {
  transform: scale(1.05);
}
.csl .bd {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.csl .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.csl h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
  line-height: 1.4;
}
.csl .sm {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}
.csl .btn {
  margin-top: auto;
  padding-top: 0;
  margin-top: 18px;
  align-self: flex-start;
  padding: 10px 22px;
  font-size: 13.5px;
}
@media (max-width: 1024px) {
  .csl {
    flex-basis: calc((100% - 26px) / 2);
  }
}
@media (max-width: 640px) {
  .csl {
    flex-basis: 100%;
  }
}
.cmodal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 32, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.cmodal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.cmodal-card {
  position: relative;
  width: min(860px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(2, 32, 30, 0.4);
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.35s var(--ease),
    opacity 0.3s var(--ease);
  padding: 42px 46px;
}
.cmodal.open .cmodal-card {
  transform: none;
  opacity: 1;
}
.cmodal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--pale);
  color: var(--teal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.25s;
  z-index: 2;
}
.cmodal-x:hover {
  background: var(--teal);
  color: #fff;
  transform: rotate(90deg);
}
.cmodal .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 16px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.cmodal h3 {
  color: var(--teal);
  font-size: 26px;
  font-weight: 500;
  margin-top: 8px;
  padding-right: 34px;
}
.cmodal-gal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 24px 0 8px;
}
.cmodal-gal .g {
  border-radius: 12px;
  overflow: hidden;
  height: 200px;
}
.cmodal-gal .g img,
.cmodal-gal .g picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cmodal-blk {
  margin-top: 20px;
}
.cmodal-blk b {
  font-family: 'League Gothic', sans-serif;
  color: var(--teal);
  font-size: 16px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 400;
}
.cmodal-blk p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .cmodal {
    padding: 14px;
  }
  .cmodal-card {
    padding: 30px 24px;
  }
  .cmodal-gal {
    grid-template-columns: 1fr;
  }
  .cmodal-gal .g {
    height: 160px;
  }
}

/* Tarjetas liquid glass (usar dentro de .img-band u otro fondo con imagen) */
.glass-cards .phase {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 14px 38px rgba(2, 32, 30, 0.28);
  border-radius: 18px;
}
.glass-cards .phase:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(2, 32, 30, 0.36);
}
.glass-cards .phase h3 {
  color: #fff;
  font-size: 21px;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(2, 32, 30, 0.4);
}
.glass-cards .phase li {
  color: #f0f7f6;
}
.glass-cards .phase li svg circle {
  fill: rgba(255, 255, 255, 0.22);
}
.glass-cards .phase li svg path {
  stroke: var(--aqua);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-cards .phase {
    background: rgba(3, 46, 46, 0.55);
  }
}

/* Case studies preview: tarjetas full-image en carrusel */
.cs-car {
  position: relative;
  margin-top: 48px;
}
.cs-vp {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding: 10px 10px 40px;
  margin: -10px -10px -40px;
}
.cs-vp:active {
  cursor: grabbing;
}
.cs-track {
  display: flex;
  gap: 24px;
  transition: transform 0.6s var(--ease);
}
.csx {
  flex: 0 0 calc((100% - 24px) / 2);
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  min-height: 400px;
  box-shadow: 0 14px 34px rgba(2, 60, 60, 0.14);
  text-align: left;
  user-select: none;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.csx:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(2, 60, 60, 0.2);
}
.csx picture,
.csx img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.csx:hover img {
  transform: scale(1.05);
}
.csx .ov {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 28px 26px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94) 0%,
    rgba(2, 32, 30, 0.58) 55%,
    transparent 100%
  );
}
.csx .k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--aqua);
  font-size: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.csx h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  margin-top: 8px;
  max-width: 440px;
}
.csx .rd {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13.5px;
  color: #cfeae7;
  font-weight: 500;
}
.csx .rd .arr {
  transition: transform 0.2s;
}
.csx:hover .rd .arr {
  transform: translateX(4px);
}
@media (max-width: 800px) {
  .csx {
    flex-basis: 100%;
    min-height: 340px;
  }
}

/* Banda de imagen completa con overlay */
.img-band {
  position: relative;
  padding: 112px 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.img-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(3, 46, 46, 0.74) 0%,
    rgba(3, 46, 46, 0.52) 55%,
    rgba(3, 46, 46, 0.34) 100%
  );
}
.img-band .container {
  position: relative;
  z-index: 2;
}
.img-band .kicker2 {
  color: var(--aqua);
}
.img-band h2 {
  color: #fff;
  text-shadow: 0 2px 14px rgba(3, 32, 30, 0.5);
}
.img-band .lead {
  color: #f2f4ea;
  text-shadow: 0 2px 10px rgba(3, 32, 30, 0.55);
}

/* Tabla comparativa OBL vs ASC */
.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 44px;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(2, 60, 60, 0.09);
}
.cmp th {
  background: var(--teal);
  color: #fff;
  font-weight: 500;
  font-size: 15.5px;
  padding: 20px 22px;
  text-align: center;
  letter-spacing: 0.3px;
}
.cmp th:first-child {
  background: #001f2a;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.6px;
}
.cmp .thk {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
}
.cmp .thk .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid var(--aqua);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--aqua);
  flex: none;
}
.cmp .thk small {
  display: block;
  font-weight: 300;
  font-size: 11.5px;
  color: #bfe3e0;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.cmp td {
  padding: 17px 22px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid #edf5f3;
  font-weight: 300;
  text-align: center;
  transition: background 0.25s;
}
.cmp td:not(:first-child) {
  border-left: 1px solid #edf5f3;
}
.cmp td:first-child {
  color: var(--teal);
  font-weight: 400;
  font-family: 'League Gothic', sans-serif;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--wash);
}
.cmp tr:nth-child(even) td {
  background: #f8fcfb;
}
.cmp tr:nth-child(even) td:first-child {
  background: var(--wash);
}
.cmp tr:hover td {
  background: #e6f3f0;
}
.cmp tr:hover td:first-child {
  background: #dfeeea;
}
.cmp .pillv {
  display: inline-block;
  background: var(--pale);
  color: var(--teal);
  border-radius: 18px;
  padding: 5px 16px;
  font-weight: 500;
  font-size: 13px;
}
.cmp .pillv--deep {
  background: var(--teal);
  color: #fff;
}
/* Animacion: filas en cascada re-disparable */
.cmp tr {
  opacity: 0;
  transform: translateY(16px);
}
.cmp.in tr {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s var(--ease),
    transform 0.6s var(--ease);
}
.cmp.in tr:nth-child(2) {
  transition-delay: 0.09s;
}
.cmp.in tr:nth-child(3) {
  transition-delay: 0.18s;
}
.cmp.in tr:nth-child(4) {
  transition-delay: 0.27s;
}
.cmp.in tr:nth-child(5) {
  transition-delay: 0.36s;
}
.cmp.in tr:nth-child(6) {
  transition-delay: 0.45s;
}
@media (prefers-reduced-motion: reduce) {
  .cmp tr,
  .cmp.in tr {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Formulario de contacto */
.form-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 50px;
  align-items: start;
  margin-top: 50px;
}
.cform {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 18px;
  padding: 40px 42px;
  box-shadow: 0 16px 40px rgba(2, 60, 60, 0.08);
}
.cform .fset {
  margin-bottom: 26px;
}
.cform .fset legend,
.cform .flabel {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.frow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cform input[type='text'],
.cform input[type='email'],
.cform input[type='tel'],
.cform select,
.cform textarea {
  width: 100%;
  border: 1.5px solid #e2e5d6;
  border-radius: 10px;
  padding: 12px 15px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fbfdfd;
  outline: none;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
  margin-bottom: 14px;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(32, 107, 107, 0.12);
}
.cform textarea {
  min-height: 110px;
  resize: vertical;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pills label {
  border: 1.5px solid #e2e5d6;
  border-radius: 24px;
  padding: 9px 18px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition: 0.25s;
  user-select: none;
}
.pills input {
  display: none;
}
.pills label:has(input:checked) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.side-card {
  background: var(--wash);
  border-radius: 18px;
  padding: 34px 32px;
}
.side-card h3 {
  color: var(--teal);
  font-size: 19px;
  margin-bottom: 18px;
}
.side-card li {
  list-style: none;
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  align-items: flex-start;
}
.side-card svg {
  flex: none;
  margin-top: 3px;
}
/* Fases / journey */
.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.phase {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  padding: 30px 26px;
  position: relative;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  text-align: left;
}
.phase:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(2, 60, 60, 0.12);
}
.phases {
  margin-top: 70px;
}
.phase {
  overflow: visible;
}
.phase .pn {
  position: absolute;
  top: -46px;
  left: 20px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 100px;
  line-height: 1;
  background: linear-gradient(135deg, #025050 10%, #206b6b 55%, #1cbdbd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}
.phase h3 {
  margin-top: 34px;
}
.phase h3 {
  color: var(--teal);
  font-size: 16.5px;
}
.phase p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}
/* Case studies */
.case {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 10px 28px rgba(2, 60, 60, 0.07);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.case:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(2, 60, 60, 0.13);
}
.case .im {
  height: 190px;
  overflow: hidden;
}
.case .im img,
.case .im picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.case:hover .im img {
  transform: scale(1.05);
}
.case .bd {
  padding: 26px 28px 28px;
}
.case .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.case .meta span {
  background: var(--pale);
  color: var(--teal);
  border-radius: 16px;
  padding: 3px 11px;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.case h3 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}
.case .blk {
  margin-top: 12px;
}
.case .blk b {
  color: var(--teal);
  font-size: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'League Gothic', sans-serif;
}
.case .blk p {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
/* Two column split generico */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split .img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2, 60, 60, 0.16);
}
.split .img-wrap img,
.split .img-wrap picture {
  width: 100%;
  display: block;
}
/* Categorias insights */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.catc {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 16px;
  padding: 30px 26px;
  text-align: left;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
  display: block;
}
.catc:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(2, 60, 60, 0.12);
}
.catc h3 {
  color: var(--teal);
  font-size: 16.5px;
}
.catc p {
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.catc .ic2 {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
/* Featured insight */
.feat {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  margin-top: 48px;
}
.feat .big {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  display: block;
}
.feat .big img,
.feat .big picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.feat .big:hover img {
  transform: scale(1.04);
}
.feat .big .ov {
  position: absolute;
  inset: auto 0 0 0;
  padding: 120px 30px 28px;
  background: linear-gradient(
    0deg,
    rgba(2, 32, 30, 0.94),
    rgba(2, 32, 30, 0.5) 60%,
    transparent
  );
}
.feat .big .ov h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  max-width: 520px;
}
.feat .list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feat .mini {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.feat .mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(2, 60, 60, 0.12);
}
.feat .mini .th {
  width: 130px;
  flex: none;
  overflow: hidden;
}
.feat .mini .th img,
.feat .mini .th picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat .mini .tx {
  padding: 14px 16px 14px 0;
}
.feat .mini h4 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
/* Expertise areas (team) */
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
/* Rejillas reutilizables de subpaginas */
.mb2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.mb3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.mb4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.latest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.tgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
/* Banda de estadisticas sobre fondo claro */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.stat-band .num {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 62px;
  color: var(--teal);
  line-height: 1.1;
}
.stat-band .lbl {
  color: var(--muted);
  font-size: 13.5px;
  margin-top: 2px;
}
/* Listado de centros por estado */
.portfolio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  text-align: left;
}
.pfc {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 14px;
  padding: 20px 24px;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.pfc:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(2, 60, 60, 0.12);
}
.pfc .st {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 21px;
}
.pfc .dt {
  font-weight: 300;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 4px;
}
@media (max-width: 1024px) {
  .form-grid,
  .split,
  .feat {
    grid-template-columns: 1fr;
  }
  .phases,
  .cat-grid,
  .exp-grid,
  .portfolio,
  .latest-grid,
  .tgrid {
    grid-template-columns: 1fr 1fr;
  }
  .mb2,
  .mb3,
  .mb4,
  .stat-band {
    grid-template-columns: 1fr;
  }
  .page-hero h1 {
    font-size: 48px;
  }
  .frow {
    grid-template-columns: 1fr;
  }
  .tmc {
    flex: 0 0 calc((100% - 22px) / 2);
  }
}
@media (max-width: 640px) {
  .phases,
  .cat-grid,
  .exp-grid,
  .portfolio,
  .latest-grid,
  .tgrid {
    grid-template-columns: 1fr;
  }
  .tgrid .tmc {
    flex-basis: 100%;
  }
  .cmp th,
  .cmp td {
    padding: 11px 12px;
    font-size: 12.5px;
  }
  .tmc {
    flex: 0 0 100%;
  }
}
/* ============ MODAL DE BIO DEL EQUIPO ============ */
.tmodal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 32, 30, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.tmodal.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.tmodal-card {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  width: min(880px, 100%);
  max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(2, 60, 60, 0.42);
  transform: translateY(22px) scale(0.97);
  opacity: 0;
  transition:
    transform 0.42s var(--ease),
    opacity 0.32s var(--ease);
}
.tmodal.open .tmodal-card {
  transform: none;
  opacity: 1;
}
.tmodal-im {
  background: var(--pale);
}
.tmodal-im picture,
.tmodal-im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tmodal-bd {
  padding: 40px 44px;
  overflow-y: auto;
}
.tmodal-bd .tmodal-name {
  color: var(--teal);
  font-size: 25px;
  font-weight: 500;
  padding-right: 30px;
}
.tmodal-bd .tmodal-role {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal-mid);
  font-size: 16.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 7px;
}
.tmodal-tx p {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 14px;
}
.tmodal-x {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(2, 60, 60, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.2s;
  z-index: 2;
}
.tmodal-x:hover {
  background: var(--pale);
  transform: rotate(90deg);
}
.tmodal-x:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 2px;
}
body.modal-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .tmodal {
    padding: 16px;
  }
  .tmodal-card {
    grid-template-columns: 1fr;
    max-height: 88vh;
  }
  .tmodal-im {
    height: 210px;
  }
  .tmodal-bd {
    padding: 26px 24px 30px;
  }
  .tmodal-bd .tmodal-name {
    font-size: 21px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tmodal,
  .tmodal-card {
    transition: none;
  }
  .tmodal-card {
    transform: none;
  }
}

/* En el menu movil no hay hover: los submenus del Ultimate se muestran
   siempre, indentados, para que sus paginas sigan siendo accesibles.
   Va al final del archivo para ganarle en orden a las reglas de escritorio. */
@media (max-width: 1200px) {
  .nav-item {
    width: 100%;
  }
  .nav-item > a .car {
    display: none;
  }
  .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0 0 6px 0;
    background: transparent;
  }
  .nav-drop a {
    display: block;
    padding: 11px 6px 11px 20px;
    font-size: 14.5px;
    border-bottom: 1px solid #f4f6ec;
    width: 100%;
  }
  .nav-drop a:hover {
    background: transparent;
    color: var(--teal);
  }
}

/* ==========================================================
   FIX PACK 18 SEP 2026 (feedback del equipo)
   ========================================================== */

/* --- 1. Modal de equipo: robusto en PC (no abria) y en movil (foto cortada) --- */
.tmodal {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 1;
  visibility: visible;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: none;
  z-index: 1500;
}
.tmodal.open {
  display: flex;
}
.tmodal .tmodal-card {
  opacity: 1;
  transform: none;
  transition: none;
  animation: tmIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: min(880px, 100%);
  max-height: none;
}
@keyframes tmIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tmodal-im img {
  object-position: top center;
}
@media (max-width: 760px) {
  .tmodal {
    padding: 14px;
    align-items: flex-start;
  }
  .tmodal .tmodal-card {
    grid-template-columns: 1fr;
    margin: auto 0;
  }
  .tmodal-im {
    height: 280px;
  }
  .tmodal-bd {
    padding: 26px 24px 30px;
  }
}

/* --- 2. Modal de case study: misma robustez --- */
.cmodal {
  display: none;
  opacity: 1;
  visibility: visible;
  transition: none;
  z-index: 1500;
}
.cmodal.open {
  display: flex;
}
.cmodal .cmodal-card {
  opacity: 1;
  transform: none;
  transition: none;
  animation: tmIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --- 3. Top bar en movil: el texto largo se comia los iconos --- */
@media (max-width: 1024px) {
  .topbar {
    justify-content: center;
    padding: 8px 16px;
    gap: 0;
  }
  .topbar > span {
    display: none;
  }
  .topbar .r {
    display: flex !important;
    gap: 26px;
    font-size: 13px;
  }
  .topbar .r a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/* --- 4. Hero movil: subir el contenido, sobraba aire arriba --- */
@media (max-width: 1024px) {
  .hero {
    padding: 52px 0 110px;
  }
  .hero h1 {
    font-size: 52px;
  }
  .trust {
    margin-top: -60px;
  }
  .page-hero {
    padding: 56px 0 66px;
  }
  .page-hero h1 {
    font-size: 46px;
  }
}

/* --- 5. Menu movil: panel solido, altura correcta bajo el header, icono X --- */
@media (max-width: 1024px) {
  .nav {
    position: fixed;
    inset: auto;
    top: var(--hgh, 125px);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    background: #fff;
    box-shadow: 0 18px 40px rgba(2, 60, 60, 0.16);
    border-top: 1px solid #e9ecdf;
    padding: 18px 22px 40px;
    gap: 0;
    overflow-y: auto;
    z-index: 1200;
  }
  .nav a {
    color: var(--ink);
    font-weight: 400;
  }
  .nav a.on {
    color: var(--teal);
    font-weight: 500;
  }
  body.menu-open {
    overflow: hidden;
  }
  /* dropdowns del ultimate, accesibles en movil */
  .nav .nav-item {
    display: block;
    width: 100%;
  }
  .nav .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 8px 14px;
    display: none;
    min-width: 0;
  }
  .nav .nav-item.open-sub .nav-drop {
    display: block;
  }
}

/* --- 6. Footer: centrado en movil, politicas sobre el copyright --- */
/* En escritorio el copyright va a la izquierda y las politicas a la derecha.
   Por debajo de 860px el bloque se apila y vuelve a centrarse. */
.copy {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.copy > span:first-child {
  text-align: left;
}
.copy .copy-legal {
  display: flex;
  gap: 22px;
  text-align: right;
}
@media (max-width: 860px) {
  .copy {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding: 18px 20px;
    gap: 12px;
  }
  .copy .copy-legal {
    justify-content: center;
  }
  .footer {
    text-align: center;
  }
  .f-grid {
    text-align: center;
  }
  .f-contact li {
    justify-content: center;
    text-align: left;
  }
  .f-social {
    justify-content: center;
  }
  .f-logo {
    margin: 0 auto;
  }
  .footer .btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- 7. Formulario de contacto: hover verde y checkbox de privacidad --- */
.pills label:hover {
  border-color: var(--teal-mid);
  background: var(--pale);
  color: var(--teal);
}
.cform select:hover,
.cform input:hover,
.cform textarea:hover {
  border-color: var(--teal-mid);
}
.cform select option:checked {
  background: var(--pale);
}
.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 4px 0 22px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid #caddd9;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
  position: relative;
}
.consent input:hover {
  border-color: var(--teal-mid);
}
.consent input:checked {
  background: var(--teal);
  border-color: var(--teal);
}
.consent input:checked::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent a {
  color: var(--teal);
  text-decoration: underline;
}

/* --- 8. Featured insights: tarjetas de la derecha centradas con la imagen --- */
.feat {
  align-items: center;
}

/* --- 9. Tarjetas de 3 columnas que no colapsaban en movil --- */
@media (max-width: 1024px) {
  .why-grid[style] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 760px) {
  .why-grid,
  .why-grid[style] {
    grid-template-columns: 1fr !important;
  }
}

/* --- 10. Paginacion del blog --- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pager button {
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  border: 1.5px solid #e2e5d6;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.2s;
}
.pager button:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}
.pager button.act {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
.pager .pg-info {
  color: var(--soft);
  font-size: 13px;
  margin-left: 8px;
}

/* --- 11. Pagina de articulo --- */
.art-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 50px;
}
.art-top {
  padding: 34px 0 0;
}
.art-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid #e2e5d6;
  border-radius: 24px;
  padding: 9px 20px;
  transition: 0.25s;
  background: #fff;
}
.art-back:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}
.art-back svg {
  transition: transform 0.2s;
}
.art-back:hover svg {
  transform: translateX(-3px);
}
.art-back:hover svg path {
  stroke: #fff;
}
.art-head {
  padding: 26px 0 0;
  text-align: left;
}
.art-cat {
  display: inline-block;
  background: var(--pale);
  color: var(--teal);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
}
.art-head h1 {
  color: var(--ink);
  font-size: 60px;
  line-height: 1.08;
  margin-top: 18px;
  font-weight: 400;
}
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  margin-top: 20px;
  color: var(--soft);
  font-size: 13.5px;
  padding-bottom: 26px;
  border-bottom: 1px solid #e7f1ef;
}
.art-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bfd4d0;
}
.art-cover {
  margin: 30px 0 8px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(2, 60, 60, 0.14);
}
.art-cover img,
.art-cover picture {
  width: 100%;
  display: block;
}
.art-lead {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 300;
  margin: 30px 0 0;
  padding-left: 20px;
  border-left: 3px solid var(--aqua);
}
.art-body {
  padding: 8px 0 10px;
}
.art-body h2 {
  color: var(--teal);
  font-size: 36px;
  margin: 38px 0 14px;
  font-weight: 400;
}
.art-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 18px;
}
.art-body ul {
  margin: 6px 0 24px;
  padding: 0;
}
.art-body li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  font-weight: 300;
}
.art-body li svg {
  flex: none;
  margin-top: 4px;
}
.art-quote {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--wash);
  border-radius: 16px;
  border-left: 4px solid var(--teal);
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--teal);
}
.art-author {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 40px 0 0;
  padding: 24px;
  background: var(--wash);
  border-radius: 16px;
}
.art-author .ph {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: var(--pale);
}
.art-author .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.art-author .nm {
  color: var(--teal);
  font-weight: 500;
  font-size: 15px;
}
.art-author .rl {
  color: var(--soft);
  font-size: 12.5px;
  margin-top: 2px;
}
.art-share {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-bottom: 10px;
}
.art-share span {
  color: var(--soft);
  font-size: 13px;
  margin-right: 4px;
}
.art-share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}
.art-share a:hover {
  background: var(--teal);
  transform: translateY(-2px);
}
.art-share a:hover svg path {
  fill: #fff;
}
@media (max-width: 760px) {
  .art-wrap {
    padding: 0 20px;
  }
  .art-head h1 {
    font-size: 42px;
  }
  .art-body h2 {
    font-size: 31px;
  }
  .art-lead {
    font-size: 16.5px;
  }
  .art-quote {
    padding: 22px 24px;
    font-size: 17px;
  }
}

/* --- 12. Servicios delimitados por color (solutions) --- */
.svc-band {
  padding: 78px 0;
}
.svc-band--1 {
  background: #ffffff;
}
.svc-band--2 {
  background: #f8f9f3;
}
.svc-band--3 {
  background: #f2f4ea;
}
.svc-band--4 {
  background: #e7eadc;
}
.svc-band .kicker2 {
  color: var(--teal-mid);
}

/* --- 13. Contact: menos aire bajo el hero y sidebar equilibrada --- */
.contact-form-sec {
  padding-top: 56px;
}
.side-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.side-stats div {
  text-align: center;
}
.side-stats .n {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: var(--teal);
  font-size: 32px;
}
.side-stats .l {
  font-size: 11px;
  color: var(--soft);
  line-height: 1.35;
  margin-top: 3px;
}
.side-quote {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
}
.side-quote + .who {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--teal);
  font-weight: 500;
}
.side-quote + .who + .sp {
  font-size: 12px;
  color: var(--soft);
}

/* --- 14. Paginas legales --- */
.legal-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 50px;
}
.legal-body h2 {
  color: var(--teal);
  font-size: 34px;
  margin: 34px 0 12px;
  font-weight: 400;
}
.legal-body p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 16px;
}
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pale);
  color: var(--teal);
  border-radius: 24px;
  padding: 10px 22px;
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .legal-body {
    padding: 0 20px;
  }
}

/* --- 5b. El backdrop-filter del header creaba un contenedor que rompia el panel fijo --- */
@media (max-width: 1024px) {
  .header.glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
  .header-group {
    backdrop-filter: none;
  }
}

/* ===== TRACK RECORD: estadisticas en recuadro + mapa suelto ===== */
/* La banda es la mas alta del home, asi que usa un verde mas profundo y con
   menos croma que el resto del sitio para que no sature la vista. */
/* La seccion no pinta fondo: todo el fondo vive dentro de .track-band, que
   arranca en la mitad del recuadro de estadisticas y muere en la mitad del
   carrusel. Asi el recuadro sobresale por arriba y el carrusel por abajo. */
.track {
  position: relative;
  overflow: visible;
  background: none;
}
/* Tarjeta blanca solida: sobresale por encima de la franja y se sostiene
   sola sobre el fondo claro de la seccion anterior. */
.track-stats {
  position: relative;
  margin-top: 22px;
  row-gap: 0;
  background: #fff;
  border: 0;
  border-radius: 24px;
  padding: 32px 34px 34px;
  box-shadow: 0 24px 54px rgba(2, 60, 60, 0.15);
}
.track-ttl {
  grid-column: 1/-1;
}
.track-ttl h2 {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  color: var(--teal);
  text-align: center;
}
.track-stats .num {
  color: var(--teal);
}
.track-stats .lbl {
  color: var(--muted);
}
.track-stats > div {
  position: relative;
}
.track-stats > div + div::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 52px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(2, 80, 80, 0.16),
    transparent
  );
}
/* La franja arranca en la mitad del recuadro de estadisticas y muere en la
   mitad del carrusel. Esa altura la calcula site.js, porque depende de dos
   elementos hermanos y CSS no puede medirlos. */
.track-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(160deg, #0b4a48 0%, #073a39 52%, #052e2e 100%);
}
.track > .container {
  position: relative;
  z-index: 1;
}
/* Franja toda verde: el texto del mapa vuelve a tinta clara. */
.track-map {
  position: relative;
  margin-top: 28px;
  padding: 56px 0 48px;
}
.track-map > * {
  position: relative;
  z-index: 1;
}
.track-map-t {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 50px;
  text-align: center;
  line-height: 1.1;
}
.track-map-s {
  color: #b9d4d1;
  font-weight: 300;
  font-size: 14.5px;
  text-align: center;
  max-width: 620px;
  margin: 10px auto 0;
  line-height: 1.6;
}
.usmap-wrap--track {
  max-width: 1280px;
  margin: 20px auto 0;
}
.usmap-wrap--track > img {
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.32));
}
/* Pines calibrados para un mapa claro: punto oscuro con aro blanco. */
.mpin .dot {
  background: var(--teal);
  box-shadow:
    0 0 0 3.5px #fff,
    0 0 0 5px rgba(2, 80, 80, 0.28),
    0 0 16px rgba(2, 80, 80, 0.3);
}
.mpin::before {
  border-color: rgba(2, 80, 80, 0.5);
}
@media (max-width: 1100px) {
  .track-ttl h2 {
    font-size: 36px;
  }
}
@media (max-width: 1024px) {
  .track-stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 28px 24px 30px;
    border-radius: 20px;
    row-gap: 30px;
  }
  .track-stats > div:nth-of-type(odd)::before {
    display: none;
  }
  .track-map-t {
    font-size: 42px;
  }
}
@media (max-width: 760px) {
  .track-ttl h2 {
    font-size: 33px;
  }
  .track-stats {
    padding: 26px 20px 28px;
  }
}
@media (max-width: 560px) {
  .track-stats {
    grid-template-columns: 1fr;
    row-gap: 26px;
    padding: 30px 20px;
  }
  .track-stats > div + div::before {
    display: none;
  }
  .track-map {
    padding: 64px 0 70px;
  }
  .track-map-t {
    font-size: 36px;
  }
  .track-map-s {
    font-size: 13.5px;
  }
}
@media (max-width: 768px) {
  .mpin {
    width: 17px;
    height: 17px;
  }
  .mpin .dot {
    inset: 4px;
    box-shadow:
      0 0 0 2.5px var(--aqua),
      0 0 12px rgba(28, 189, 189, 0.9);
  }
  .mpin::before {
    inset: -5px;
    border-width: 1.5px;
  }
}

/* Tarjetas de modelo sin enlace: sin senales de que se puede hacer clic */
.model--static {
  cursor: default;
}
.model--static:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(2, 60, 60, 0.14);
}
.model--static:hover img {
  transform: none;
}

/* Enlace de detalle en las tarjetas de modalidad */
.m-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--aqua);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}
.m-more .arr {
  transition: transform 0.2s;
}
.m-more:hover {
  color: #fff;
}
.m-more:hover .arr {
  transform: translateX(4px);
}
.m-more:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 4px;
  border-radius: 4px;
}
.models-cta {
  text-align: center;
  margin-top: 44px;
}

.mm-cta {
  margin-top: 26px;
}

/* Lista desplegable con colores de marca. Chrome y Edge permiten estilar el
   desplegable nativo; el resto de navegadores conserva el del sistema. */
@supports (appearance: base-select) {
  .cform select,
  .cform select::picker(select) {
    appearance: base-select;
  }
  .cform select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 11px 15px;
    border-width: 1.5px;
  }
  .cform select::picker(select) {
    background: #fff;
    border: 1.5px solid #e2e5d6;
    border-radius: 12px;
    padding: 6px;
    margin-top: 6px;
    box-shadow: 0 18px 44px rgba(2, 60, 60, 0.16);
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.18s var(--ease),
      transform 0.18s var(--ease),
      overlay 0.18s allow-discrete,
      display 0.18s allow-discrete;
  }
  .cform select:open::picker(select) {
    opacity: 1;
    transform: translateY(0);
  }
  @starting-style {
    .cform select:open::picker(select) {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
  .cform select option {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .cform select option:hover,
  .cform select option:focus {
    background: var(--pale);
    color: var(--teal);
    outline: none;
  }
  .cform select option:checked {
    background: var(--teal);
    color: #fff;
  }
  .cform select option:checked:hover {
    background: var(--teal-mid);
    color: #fff;
  }
  .cform select option::checkmark {
    display: none;
  }
  .cform select::picker-icon {
    color: var(--teal-mid);
    transition: transform 0.25s var(--ease);
  }
  .cform select:open::picker-icon {
    transform: rotate(180deg);
  }
}

/* iOS Safari amplia la pagina al enfocar un campo cuyo texto mide menos de
   16px, y esa ampliacion es la que produce el scroll horizontal en movil.
   Con 16px el navegador deja la pagina quieta. */
@media (max-width: 860px) {
  .cform input[type='text'],
  .cform input[type='email'],
  .cform input[type='tel'],
  .cform select,
  .cform textarea {
    font-size: 16px;
  }
  .cform select option {
    font-size: 16px;
  }
}

/* ===== Modal del equipo en movil =====
   Los retratos son 900x1125, es decir 4:5. Dandole al hueco esa misma
   proporcion la foto entra entera y la persona no se corta por arriba ni
   por abajo, en lugar de recortarse contra una caja apaisada fija. */
@media (max-width: 760px) {
  .tmodal .tmodal-im {
    height: auto;
    aspect-ratio: 4/5;
    max-height: 62vh;
  }
  .tmodal .tmodal-im img {
    object-position: center top;
  }
}

/* ===== Header con el menu abierto =====
   El bloqueo de scroll convierte al body en contenedor de recorte y eso
   anula el position:sticky del header, que se iba a su posicion estatica
   en lo alto del documento. Mientras el menu esta abierto se fija. */
body.menu-open .header-group {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ===== Imagen a la izquierda solo en escritorio =====
   En el DOM el texto va primero para que en movil se lea texto y luego
   imagen; en pantallas anchas la imagen se adelanta a la columna izquierda. */
@media (min-width: 1025px) {
  .split--img-left .img-wrap {
    order: -1;
  }
}

/* ===== Menu movil del Ultimate: submenus en acordeon =====
   Los enlaces de .nav-item son inline dentro de un span, asi que ni el ancho
   ni el separador llegaban al borde y las lineas quedaban escalonadas. */
@media (max-width: 1024px) {
  .nav > a:not(.btn) {
    padding: 15px 4px;
  }
  .nav .nav-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 4px;
  }
  .nav .nav-item > a .car {
    display: inline-block;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--teal-mid);
    transition: transform 0.25s var(--ease);
  }
  .nav .nav-item.open-sub > a {
    color: var(--teal);
    font-weight: 500;
  }
  .nav .nav-item.open-sub > a .car {
    transform: rotate(180deg);
    color: var(--teal);
  }
  .nav .nav-drop {
    padding: 0 0 10px 0;
  }
  .nav .nav-drop a {
    display: block;
    width: 100%;
    padding: 13px 4px 13px 20px;
    font-size: 14.5px;
    color: var(--muted);
    border-bottom: 1px solid #f4f6ec;
  }
  .nav .nav-drop a:last-child {
    border-bottom: 0;
  }
  .nav a.btn {
    margin-top: 20px;
  }
}

/* ===== Acentos Citrus del brand guide (solo sobre fondos oscuros) ===== */
.copy a:hover {
  color: var(--citrus);
}
.f-links a:hover,
.footer a:hover {
  color: var(--citrus);
}
.f-social a:hover svg {
  fill: var(--citrus);
}
.m-more:hover {
  color: var(--citrus);
}
.tmc:hover .tm-more {
  color: var(--citrus);
}
.mcard .mgo:hover {
  background: var(--citrus);
  color: var(--teal);
}
/* aro de pulso de los pines del mapa */
.mpin::before {
  border-color: rgba(230, 249, 175, 0.85);
}
.mpin .dot {
  box-shadow:
    0 0 0 3.5px #fff,
    0 0 0 5px rgba(230, 249, 175, 0.55),
    0 0 16px rgba(230, 249, 175, 0.45);
}
/* escala League Gothic */
@media (max-width: 1024px) {
  h2,
  .sec h2,
  .cta h2 {
    font-size: 43px;
  }
  .art-body h2 {
    font-size: 33px;
  }
  .legal-body h2 {
    font-size: 31px;
  }
  .track-ttl h2 {
    font-size: 36px;
  }
  .track .num,
  .stat-band .num {
    font-size: 54px;
  }
  .phase .pn {
    font-size: 88px;
    top: -40px;
  }
}
@media (max-width: 560px) {
  .hero h1 {
    font-size: 46px;
  }
  .page-hero h1 {
    font-size: 42px;
  }
  h2,
  .sec h2,
  .cta h2 {
    font-size: 38px;
  }
  .art-head h1 {
    font-size: 40px;
  }
  .art-body h2 {
    font-size: 30px;
  }
  .legal-body h2 {
    font-size: 29px;
  }
  .track-ttl h2 {
    font-size: 32px;
  }
  .track .num,
  .stat-band .num {
    font-size: 50px;
  }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .art-head h1 {
    font-size: 50px;
  }
}
/* seccion partnership + modal de consulta */
.psec {
  position: relative;
  padding: 96px 0;
  background: var(--grad-teal);
  text-align: center;
  overflow: hidden;
}
.psec .kicker2 {
  color: var(--citrus);
}
.psec h2 {
  color: #fff;
  max-width: 860px;
  margin: 10px auto 0;
}
.psec .lead {
  color: #d8ecea;
  margin: 0 auto;
}
.p-compare {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 26px;
  max-width: 1080px;
  margin: 52px auto 0;
  text-align: left;
  align-items: stretch;
}
.p-col {
  border-radius: 22px;
  padding: 36px 38px;
}
.p-col--old {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.p-col--pearl {
  background: #fff;
  box-shadow: 0 30px 70px rgba(0, 20, 27, 0.32);
}
.p-k {
  font-family: 'League Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #9fbdba;
}
.p-col--pearl .p-k {
  color: var(--teal-mid);
}
.p-col h3 {
  font-size: 22px;
  font-weight: 500;
  margin-top: 6px;
  color: #fff;
}
.p-col--pearl h3 {
  color: var(--teal);
}
.p-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 16px;
}
.p-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 300;
  color: #cfe0de;
}
.p-col--pearl .p-list li {
  color: var(--ink);
}
.p-list svg {
  flex: none;
  margin-top: 2px;
}
.psec .btn {
  margin-top: 46px;
}
@media (max-width: 860px) {
  .p-compare {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-col {
    padding: 28px 24px;
  }
  .psec {
    padding: 76px 0;
  }
}
.qmodal .cmodal-card {
  width: min(720px, 100%);
  padding: 40px 44px;
}
.qm-sub {
  font-weight: 300;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 8px;
  max-width: 560px;
}
.qmodal .cform {
  border: 0;
  box-shadow: none;
  padding: 0;
  background: none;
  margin-top: 22px;
  border-radius: 0;
}
.qmodal .cform textarea {
  min-height: 84px;
}
.qmodal .cform .btn[type='submit'] {
  width: 100%;
  justify-content: center;
}
.lead-done {
  text-align: center;
  padding: 26px 8px;
}
.lead-done .ok {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.lead-done h3 {
  color: var(--teal);
  font-size: 26px;
  font-weight: 500;
  padding-right: 0;
  margin: 0;
}
.lead-done p {
  font-weight: 300;
  font-size: 15px;
  color: var(--muted);
  max-width: 440px;
  margin: 10px auto 0;
  line-height: 1.7;
}
.lead-done .btn {
  margin-top: 24px;
}
.cform + .lead-done,
.cform[hidden] + .lead-done {
  background: #fff;
  border: 1px solid #e9ecdf;
  border-radius: 18px;
  padding: 56px 32px;
  box-shadow: 0 16px 40px rgba(2, 60, 60, 0.08);
}
.qmodal .lead-done {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 26px 8px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  .qmodal .cmodal-card {
    padding: 30px 20px;
  }
}
@media (min-width: 561px) {
  .qmodal .frow {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* articulos importados del blog original */
.art-body .art-intro {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 400;
}
.art-body h3 {
  color: var(--teal);
  font-size: 19px;
  font-weight: 500;
  margin: 28px 0 10px;
}
.art-body strong {
  font-weight: 500;
  color: var(--ink);
}
.art-body a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.art-body .art-ul,
.art-body .art-ol {
  margin: 6px 0 24px 22px;
  padding: 0;
}
.art-body .art-ul li,
.art-body .art-ol li {
  display: list-item;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 8px;
  padding-left: 4px;
}
.art-body .art-ul li::marker {
  color: var(--aqua);
}
.art-body .art-ol li::marker {
  color: var(--teal);
  font-weight: 500;
}

/* WordPress-specific styles */
.wp-block-group {
  margin-bottom: 1rem;
}

.wp-block-image {
  margin-bottom: 1rem;
}

.wp-block-button {
  margin-bottom: 1rem;
}

/* CRITICAL: Reset WordPress default constraints that break layouts */
/* WordPress adds default max-width to containers which breaks original layouts */
.entry-content,
.site-content,
.content-area {
  max-width: none !important;
  width: 100% !important;
}

/* EC-CONTAIN-001: Only override .container / section max-width when the site's
   own CSS does NOT define them. Tailwind and Bootstrap sites intentionally set
   .container { max-width: … } — blasting it with !important breaks every section. */
/* EC-CONTAIN-001: site defines own container/section widths — no override needed */

/* EC-ANIM-008 / EC-ANIM-009: Scroll-reveal utilities (.scroll-fade-up etc.) start at opacity:0
   and transition to visible when an IntersectionObserver adds .visible (injected in functions.php).
   Carousels inside scroll-reveal wrappers must be forced visible immediately so Embla can measure. */
.scroll-fade-up:has([aria-roledescription='carousel']),
.scroll-fade-up:has([data-wpconvert-blog-filter-bar]),
.scroll-fade-left:has([aria-roledescription='carousel']),
.scroll-fade-right:has([aria-roledescription='carousel']),
.scroll-scale-in:has([aria-roledescription='carousel']) {
  opacity: 1 !important;
  transform: none !important;
}

/* EC-SCROLL-001: Auto-scroll marquee CSS (always included - lightweight, no-op if no marquee elements) */

/* EC-SCROLL-001: Auto-scroll gallery marquee animation */
/* Replaces React requestAnimationFrame/scrollLeft with pure CSS animation */
.wpconvert-marquee-container {
  overflow: hidden !important;
}
.wpconvert-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: wpconvert-marquee 30s linear infinite;
}
@keyframes wpconvert-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Pause on hover for accessibility */
.wpconvert-marquee-container:hover .wpconvert-marquee-track {
  animation-play-state: paused;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wpconvert-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}
/* EC-MARQUEE-OVERFLOW-001: Local clip for a SOURCE marquee/ticker wrapper whose
   over-wide track would otherwise add horizontal page scroll. Applied at build
   time to the track's direct parent (see clipMarqueeOverflow). Works on every
   browser and never touches body/sticky-header behavior. */
.wpc-marquee-clip {
  overflow-x: hidden;
  max-width: 100%;
}

/* EC-ANIM-011: Frozen Framer Motion infinite float/pulse animations replaced with CSS keyframes.
   4 float variants with staggered durations and amplitudes, plus a pulse variant. */
@keyframes wpconvert-float-1 {
  0%,
  100% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(8px);
  }
}
@keyframes wpconvert-float-2 {
  0%,
  100% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes wpconvert-float-3 {
  0%,
  100% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(12px);
  }
}
@keyframes wpconvert-float-4 {
  0%,
  100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes wpconvert-pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.05;
  }
}
@keyframes wpconvert-float-tilt {
  0%,
  100% {
    transform: translateY(0%) rotate(0deg);
  }
  50% {
    transform: translateY(4%) rotate(-2deg);
  }
}
.wpconvert-float-1 {
  animation: wpconvert-float-1 5s ease-in-out infinite;
}
.wpconvert-float-2 {
  animation: wpconvert-float-2 6s ease-in-out infinite 0.5s;
}
.wpconvert-float-3 {
  animation: wpconvert-float-3 5.5s ease-in-out infinite 1s;
}
.wpconvert-float-4 {
  animation: wpconvert-float-4 6.5s ease-in-out infinite 1.5s;
}
.wpconvert-pulse {
  animation: wpconvert-pulse 4s ease-in-out infinite;
}
.wpconvert-float-tilt {
  animation: wpconvert-float-tilt 6s ease-in-out infinite;
}
/* EC-ANIM-011c: z-0 override for centered pulse cards whose z-10 was demoted */
.wpconvert-pulse.z-0 {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wpconvert-float-1,
  .wpconvert-float-2,
  .wpconvert-float-3,
  .wpconvert-float-4,
  .wpconvert-pulse,
  .wpconvert-float-tilt {
    animation: none;
  }
}

/* WPConvert Tabs Component CSS */

/* WPConvert Tabs Component */
.wpconvert-tabs {
  max-width: 64rem;
  margin: 0 auto;
}

.wpconvert-tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpconvert-tab-nav {
    grid-template-columns: repeat(6, 1fr);
  }
}

.wpconvert-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-btn:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}

.wpconvert-tab-btn.active {
  background: hsl(var(--primary) / 0.1);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.wpconvert-tab-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.wpconvert-tab-icon svg {
  width: 100%;
  height: 100%;
}

.wpconvert-tab-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.wpconvert-tab-viewport {
  position: relative;
  display: flex;
  align-items: center;
}

.wpconvert-tab-content {
  flex: 1;
  position: relative;
}

.wpconvert-tab-panel {
  display: none;
  padding: 2rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg,
    hsl(var(--card)) 0%,
    hsl(var(--muted) / 0.3) 100%
  );
  border: 1px solid hsl(var(--border));
  text-align: center;
  animation: wpconvert-tab-fade-in 0.3s ease;
}

.wpconvert-tab-panel.active {
  display: block;
}

@keyframes wpconvert-tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpconvert-tab-icon-large {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 2rem;
  padding: 1rem;
  border-radius: 1rem;
  background: hsl(var(--primary) / 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpconvert-tab-icon-large svg {
  width: 100%;
  height: 100%;
  color: hsl(var(--primary));
}

.wpconvert-tab-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-title {
    font-size: 1.875rem;
  }
}

.wpconvert-tab-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

.wpconvert-tab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.wpconvert-tab-arrow:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.wpconvert-tab-prev {
  left: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-prev {
    left: -1.5rem;
  }
}

.wpconvert-tab-next {
  right: -1rem;
}

@media (min-width: 640px) {
  .wpconvert-tab-next {
    right: -1.5rem;
  }
}

.wpconvert-tab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.wpconvert-tab-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wpconvert-tab-dot:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

.wpconvert-tab-dot.active {
  background: hsl(var(--primary));
  width: 2rem;
  border-radius: 0.375rem;
}

/* EC-MSTEP-001: Multi-step form wizard CSS */

/* EC-MSTEP-001: Multi-step form wizard */
.wpconvert-multistep-form {
  width: 100%;
}
.wpconvert-step-panel {
  display: none;
}
.wpconvert-step-panel.active {
  display: block;
  animation: wpconvert-step-fade-in 0.25s ease;
}
@keyframes wpconvert-step-fade-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.wpconvert-step-progress-fill {
  transition: width 0.4s ease-out;
}
/* Signature canvas */
canvas[data-wpc-sig-init] {
  width: 100%;
  min-height: 150px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 1rem;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

/* EC-CALC-001: Interactive calculator CSS */

/* EC-CALC-001: Interactive calculator */
[data-wpc-calc] input[type='range'] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-wpc-calc] input[type='range']:focus {
  outline: none;
}
[data-wpc-calc] [data-wpc-calc-toggle].wpc-calc-toggle-active {
  opacity: 1;
}
[data-wpc-calc] [data-wpc-calc-toggle]:not(.wpc-calc-toggle-active) {
  opacity: 0.6;
}

/* CRITICAL FIX: Ensure gradient overlays respect their default hidden state */
/* NOTE: The main fix is in cleanHtmlContent() which corrects captured hover states */
/* These CSS rules are a FALLBACK to ensure overlays stay hidden if any slip through */

/* Keep gradient overlays hidden - they're decorative hover effects */
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}

/* Keep bottom accent bars hidden by default */
.group [class*='absolute'][class*='bottom-0'][class*='bg-gradient'].scale-x-0 {
  transform: scaleX(0) !important;
}

/* Reset WordPress default margins that break spacing */
.entry-content > *:first-child,
.site-content > *:first-child {
  margin-top: 0 !important;
}

/* EC-DARK-001: In dark-themed sites (html.dark), containers with explicit bg-white
   backgrounds need dark text. The .dark scope sets --foreground to a light color,
   making text invisible on white cards. Reset to :root-scope (light) variable values. */
.dark .bg-white,
.dark [class*='bg-white'] {
  --foreground: 222.2 84% 4.9%;
  --muted-foreground: 215.4 16.3% 46.9%;
  color: hsl(222.2 84% 4.9%);
}
.dark .bg-white .text-foreground,
.dark [class*='bg-white'] .text-foreground,
.dark .bg-white [class*='text-foreground'],
.dark [class*='bg-white'] [class*='text-foreground'] {
  color: hsl(222.2 84% 4.9%);
}

/* Navigation Menu Styling - Universal for all dropdown patterns */
/* Reset ALL menu items */
.menu-item,
li.menu-item,
li.menu-item-type-post_type,
li.menu-item-type-custom,
li.menu-item-object-page,
li.menu-item-has-children {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* EC-NAV-MOBILE-010: The force-horizontal / force-inline-block rules below are DESKTOP-ONLY.
   They exist to coerce WordPress-generated <ul class="menu"><li> markup into a horizontal bar.
   Previously they were unconditional with id-specificity + !important, which overrode the source
   theme's mobile-first hide (e.g. a .nav-primary .menu display:none revealed via a hamburger).
   On classic mobile-first themes that leaked the desktop nav onto every mobile page (often as a
   full-screen overlay, since the source .menu base is position:fixed;inset:0). Scoping to a
   min-width media query keeps desktop horizontal while letting the source's mobile nav / our
   injected #wpconvert-mobile-nav drawer own small screens.
   EC-NAV-483: and the width where small screens end is the source's to choose — see
   source-nav-breakpoint.js. 768px is the default, raised when the source's own CSS hides
   the primary list above it. */
@media (min-width: 768px) {
  /* CRITICAL: Top-level menu MUST be horizontal - Maximum specificity */
  /* NOTE: nav ul#wpconvert-primary-ul is NOT included here to avoid conflicting with .main-nav styling */
  /* EC-NAV-095: Do NOT set gap here. A fixed gap with !important (previously 0.25rem, briefly 2rem) overrides
   menus.json ulClasses / Tailwind (e.g. gap-8) and breaks diverse nav densities. Spacing comes from ulClasses.
   EC-NAV-502: a panel carried from the source keeps its own list classes and layout. */
  header ul#wpconvert-primary-ul,
  #wpconvert-primary-ul,
  #wpconvert-primary-ul.menu,
  ul#wpconvert-primary-ul.menu,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul) {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* CRITICAL: Preserve original .main-nav styling for static sites - MUST come AFTER generic rules */
  /* MAXIMUM specificity with header prefix ensures this overrides ALL other rules */
  header nav.main-nav ul#wpconvert-primary-ul,
  header .main-nav ul#wpconvert-primary-ul,
  nav.main-nav ul#wpconvert-primary-ul,
  .main-nav #wpconvert-primary-ul,
  .main-nav ul#wpconvert-primary-ul {
    /* Inherit the original .main-nav ul styles */
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* EC-NAV-364: …but an auto margin on the menu <ul> IS the navbar's horizontal
   layout, not a stray UA default. Bootstrap's .navbar-nav.ml-auto (and the
   Tailwind / BS5 spellings) is what pushes the menu away from the brand over to
   the right edge; the ID-scoped "margin: 0 !important" resets above outrank the
   utility's own !important and collapse the whole bar to the left (Butterfly
   Cancer Care Foundation). Re-asserted here — last, and with a 3-element variant
   that ties the highest-specificity reset ("header nav.main-nav ul#…") so it wins
   on both counts. Additive: these selectors match ONLY a <ul> that literally
   carries the utility, so every other menu keeps today's layout byte-for-byte. */
  header nav ul#wpconvert-primary-ul.ml-auto,
  header ul#wpconvert-primary-ul.ml-auto,
  ul#wpconvert-primary-ul.ml-auto,
  #wpconvert-primary-ul.ml-auto,
  header nav ul#wpconvert-primary-ul.ms-auto,
  header ul#wpconvert-primary-ul.ms-auto,
  ul#wpconvert-primary-ul.ms-auto,
  #wpconvert-primary-ul.ms-auto {
    margin-left: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mr-auto,
  header ul#wpconvert-primary-ul.mr-auto,
  ul#wpconvert-primary-ul.mr-auto,
  #wpconvert-primary-ul.mr-auto,
  header nav ul#wpconvert-primary-ul.me-auto,
  header ul#wpconvert-primary-ul.me-auto,
  ul#wpconvert-primary-ul.me-auto,
  #wpconvert-primary-ul.me-auto {
    margin-right: auto !important;
  }
  header nav ul#wpconvert-primary-ul.mx-auto,
  header ul#wpconvert-primary-ul.mx-auto,
  ul#wpconvert-primary-ul.mx-auto,
  #wpconvert-primary-ul.mx-auto,
  header nav ul#wpconvert-primary-ul.m-auto,
  header ul#wpconvert-primary-ul.m-auto,
  ul#wpconvert-primary-ul.m-auto,
  #wpconvert-primary-ul.m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRITICAL: Top-level items MUST be inline - Maximum specificity for ALL WordPress classes */
  /* NOTE: nav ul#wpconvert-primary-ul > li is NOT included to avoid conflicting with .main-nav */
  header ul#wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li,
  #wpconvert-primary-ul > li.menu-item,
  #wpconvert-primary-ul > li.menu-item-type-post_type,
  #wpconvert-primary-ul > li.menu-item-type-custom,
  #wpconvert-primary-ul > li.menu-item-object-page,
  #wpconvert-primary-ul > li.menu-item-object-custom,
  #wpconvert-primary-ul > li.menu-item-has-children,
  #wpconvert-primary-ul > li.current-menu-item,
  #wpconvert-primary-ul > li.current_page_item,
  #wpconvert-primary-ul > li.current-menu-ancestor,
  #wpconvert-primary-ul.menu > li,
  ul.menu:not(.submenu):not(.sub-menu):not([data-wpc-external-nav-panel] ul)
    > li,
  body #wpconvert-primary-ul > li {
    display: inline-block !important;
    position: relative !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    /* EC-NAV-295: Do NOT force the top-level item margin to zero here. This rule is
     ID-scoped (+ !important) and previously clobbered a source theme's inter-item spacing
     (e.g. .main-menu__list > li + li margin-left:37px), collapsing classic HTML
     navbars into a jammed-together row. Item spacing must come from the source theme
     (li margins) or from ulClasses on the ul (Tailwind gap-*). The gentle
     low-specificity .menu-item margin:0 default above still neutralises stray
     browser/WP margins for sites that ship none, and any source li spacing wins. */
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    clear: none !important;
  }
}
/* End EC-NAV-MOBILE-010 desktop-only nav layout */

/* Preserve original .main-nav link styling (color/weight is width-independent) */
header nav.main-nav ul#wpconvert-primary-ul a,
header .main-nav ul#wpconvert-primary-ul a,
nav.main-nav ul#wpconvert-primary-ul a,
.main-nav #wpconvert-primary-ul a,
.main-nav ul#wpconvert-primary-ul a {
  text-decoration: none;
  font-weight: 500;
}

/* Top-level links maintain their button appearance */
#wpconvert-primary-ul > .menu-item > a {
  /* Keep original classes for styling */
}

/* Hide submenus by default with high z-index - CRITICAL for all sites */
/* EC-NAV-220: Layout & visibility properties stay !important so the
   hover-to-show behaviour overrides Tailwind's display:none / opacity:0
   defaults on sites without their own dropdown CSS. */
.menu-item.menu-item-has-children > .submenu,
.menu-item.menu-item-has-children > .sub-menu,
.menu-item-has-children > ul,
li.menu-item-has-children > ul {
  display: none !important; /* Important to override inline-flex and other display classes */
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 9999 !important; /* Higher than content */
  list-style: none !important;
  margin: 0 !important;
}
/* EC-NAV-220: Visual surface properties (background / border / shadow /
   padding / sizing) are emitted via :where(...) so the selector collapses
   to specificity (0,0,0). Any captured custom-submenu CSS rule with
   non-zero specificity (e.g. aura-lace .dropdown-menu with background
   var(--emerald)) automatically wins via the cascade so the author's
   luxury / dark-themed dropdown panel renders correctly.
   For sites WITHOUT captured dropdown CSS, these white-card defaults
   still apply because nothing else competes. */
:where(.menu-item.menu-item-has-children) > :where(.submenu),
:where(.menu-item.menu-item-has-children) > :where(.sub-menu),
:where(.menu-item-has-children) > :where(ul),
:where(li.menu-item-has-children) > :where(ul) {
  background: white;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

/* Show on hover/focus - Maximum specificity to override everything */
.menu-item.menu-item-has-children:hover > .submenu,
.menu-item.menu-item-has-children:hover > .sub-menu,
.menu-item.menu-item-has-children:hover > ul,
.menu-item.menu-item-has-children:focus-within > .submenu,
.menu-item.menu-item-has-children:focus-within > .sub-menu,
.menu-item.menu-item-has-children:focus-within > ul,
li.menu-item-has-children:hover > ul,
li.menu-item-has-children:focus-within > ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Force submenu items to display as block - Override ALL WordPress and utility classes */
.submenu li,
.submenu .menu-item,
.submenu .menu-item-type-post_type,
.submenu .menu-item-type-custom,
.submenu .menu-item-object-page,
.submenu .menu-item-object-custom,
.submenu .current-menu-item,
.submenu .current_page_item,
ul.sub-menu li,
ul.sub-menu .menu-item,
body .submenu li {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex-direction: column !important;
  list-style: none !important;
  float: none !important;
  clear: both !important;
}

.submenu .menu-item a,
.submenu a,
ul.sub-menu a {
  display: block !important;
  width: 100% !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Override ANY utility classes that could break submenu layout */
.submenu .menu-item.inline-flex,
.submenu .menu-item.flex,
.submenu .menu-item.grid,
.submenu li.inline-flex,
.submenu li.flex,
.submenu li.grid,
.submenu .inline-flex,
.submenu .flex,
.submenu .grid {
  display: block !important;
  flex-direction: column !important;
}

.submenu .menu-item a.inline-flex,
.submenu .menu-item a.flex,
.submenu .menu-item a.grid,
.submenu a.inline-flex,
.submenu a.flex,
.submenu a.grid {
  display: block !important;
}

/* Ensure submenu container is vertical */
.submenu,
ul.sub-menu {
  flex-direction: column !important;
}

/* EC-NAV-493: display:block !important used to ride along on the rule above, to
   beat an inline-flex utility class on the panel. On a wp_nav_menu() menu it
   decided nothing - the hide/show pair on .menu-item-has-children outranks it
   either way. On a captured hand-authored nav there is no .menu-item-has-children
   for those rules to match, so the blanket declaration was the only one left
   standing, and it beat the site's own unprefixed .submenu { display: none }:
   every CSS-hover dropdown shipped permanently open (Unitive Mind). The display
   is therefore scoped to the shapes WordPress itself generates, where visibility
   is already governed and nothing moves.

   The scope is .menu-item rather than the panel's own class because the class
   name says nothing about who wrote it - a hand-authored nav is free to call
   its panel sub-menu too, and scoping only .submenu would leave that site with
   the same permanently-open dropdown. Both walkers stamp .menu-item on every
   item they emit, and a captured nav carries it nowhere.

   Descendant, not child: EC-NAV-428 wraps the panel in a positioning div when
   the source revealed it through one, which puts a generation between the item
   and the panel. A child combinator reads as correctly scoped and would
   silently stop reaching that shape.
   NOTE: no backticks in this comment - it lives inside a JS template literal. */
.menu-item .submenu,
.menu-item .sub-menu {
  display: block !important;
}

/* FLAT NAV ACTIVE STATE - For React/Vite sites converted to wp_nav_menu() */
/* EC-NAV-010: Dynamic current page highlighting */
/* The .wpconvert-active-link class is added by WPConvert_Flat_Menu_Walker to current page links */
.wpconvert-active-link {
  /* Default active styling - will be enhanced by extracted classes if available */
  font-weight: 600;
}

/* EC-NAV-010: When active link has text-primary class, override any text-foreground from base */
/* This ensures the active item shows the highlighted color (text-primary = green/brand color) */
a.wpconvert-active-link.text-primary,
.current-menu-item > a.text-primary,
.current_page_item > a.text-primary {
  color: hsl(var(--primary)) !important;
}

/* EC-NAV-010: Ensure inactive items don't get active color */
/* Links WITHOUT wpconvert-active-link should use text-foreground */
nav a.text-foreground:not(.wpconvert-active-link):not(.text-primary) {
  color: hsl(var(--foreground)) !important;
}

/* Also style current-menu-item for flat navs */
.current-menu-item > a,
.current_page_item > a,
a.current-menu-item,
a.wpconvert-active-link {
  /* The actual active styling comes from extracted activeLinkClasses */
  /* These are fallback styles if extraction doesn't provide specific classes */
}

/* Flat nav submenu styling */
.wpconvert-flat-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  padding: 0.5rem 0;
  display: none;
  z-index: 9999;
}

.wpconvert-flat-submenu a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* EC-NAV-140: Large flat dropdowns flow into two columns (mega-style) without extra walker markup */
.wpconvert-flat-submenu--mega-cols-2 {
  min-width: min(640px, 92vw);
  column-count: 2;
  column-gap: 2.5rem;
  padding: 0.75rem 1.25rem !important;
}
.wpconvert-flat-submenu--mega-cols-2 > a {
  white-space: normal !important;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
/* Show flat submenu when parent <li> hovers (wp_nav_menu wraps items in li.menu-item-has-children) */
li.menu-item-has-children:hover > .wpconvert-flat-submenu,
li.menu-item-has-children:focus-within > .wpconvert-flat-submenu {
  display: block !important;
}

/* Hide Radix UI viewport containers and similar dropdown containers - Universal */
[data-radix-navigation-menu-viewport],
[class*='viewport'][data-state='open'],
[class*='popover'][data-state='open'],
.radix-navigation-menu-viewport,
nav > div[class*='absolute'][class*='top-full'] {
  display: none !important;
  visibility: hidden !important;
}

/* EC-DIALOG-001: Hide Radix Sheet/Dialog overlays and panels that survive into converted themes */
/* These are interactive React components captured in open state during snapshot */
/* EC-GALLERY-002d: [data-wpc-live-dialog] opts out — a dialog WPConvert injects on purpose
   (e.g. the gallery lightbox) is not snapshot debris, and these !important rules would
   otherwise beat even its inline styles and leave it permanently invisible. */
[role='dialog'][class*='fixed']:not([data-wpc-live-dialog]),
[data-radix-dialog-content][class*='fixed']:not([data-wpc-live-dialog]),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='bg-black']:not(
    [data-wpc-live-dialog]
  ),
div[data-state='open'][class*='fixed'][class*='inset-0'][class*='backdrop']:not(
    [data-wpc-live-dialog]
  ) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }

  .menu-item.menu-item-has-children > .submenu {
    position: static;
    box-shadow: none;
  }
}

/* CRITICAL: Ensure header and navigation are above hero/content sections */
/* Only apply relative positioning if nav is NOT sticky/fixed/absolute */
/* Exclude #wpconvert-mobile-nav — it must stay position:fixed as an overlay */
/* EC-NAV-190: Also exclude position:absolute overlay headers (Tailwind
   "absolute" utility class) — common in hero-overlay navbars (e.g.
   svg-to-site-magic-main: <header class="absolute inset-x-0 top-6 z-30 ...">).
   Without this exclusion, the !important rule below forces the absolute
   overlay header into normal flow, taking up its full height and pushing
   the hero section down by ~80px (visible as a white band above the navbar). */
/* EC-NAV-429: the class guards above only see a utility class ON the element.
   A header the source lifts out of flow from an ancestor rule — Scorpion uses
   ".overlap #HeaderZone { position: absolute }" with no class on the header at
   all — passed every guard and was forced back into flow, dropping a
   deliberately transparent header onto the page background where its light link
   text became invisible. Such ids are detected from the source CSS. */
header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
.site-header:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
[role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
[role='navigation']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ):not(#wpconvert-mobile-nav) {
  position: relative !important;
  z-index: 1000 !important;
}

/* EC-NAV-361: the rule above uses BARE TAG selectors, but <header> and <nav> are
   also valid SECTIONING content — a hero banner, an article header, a breadcrumb
   trail. Those live inside <main class="site-main">, and inflating them to
   z-index:1000 puts PAGE CONTENT on a layer above almost everything, where it
   beats any overlay the source site authored (Jegson Publicity: the enquiry modal
   is z-index:100, so the 78vh hero <header> painted straight over the open popup).
   Site chrome is always emitted OUTSIDE <main>, so scoping the repair to
   descendants of the content wrapper can never reach the real navbar.
   Only z-index is reset — position is left alone so the EC-NAV-190 absolute-overlay
   and EC-NAV-352 CSS-authored-fixed-nav behaviours are untouched. "auto" is what an
   un-styled hero has, and it is the value that restores the source ordering: the
   base rule already beats a Tailwind z-* utility (it is !important), so exempting
   those would merely leave them inflated to 1000 — the very bug being fixed. */
main.site-main
  header:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']):not(
    #wpconvert-mobile-nav
  ),
main.site-main
  [role='banner']:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  z-index: auto !important;
}

/* Preserve sticky/fixed positioning for navs that have it */
/* CRITICAL: Ensure sticky/fixed actually works - add explicit CSS for common patterns */
nav[class*='sticky'],
nav[class*='fixed'],
header nav[class*='sticky'],
header nav[class*='fixed'],
header[class*='sticky'],
header[class*='fixed'],
.site-header[class*='sticky'],
.site-header[class*='fixed'] {
  z-index: 1000 !important; /* Keep z-index for visibility */
}

/* Explicit sticky positioning support - ensures it works even without Tailwind CSS loaded */
/* Only apply if sticky class is present and no explicit position override */
/* EC-NAV-296: Exclude the classic-theme sticky-header class family
   (.sticky-header / .sticky-header--normal / .sticky-header--cloned). Those are SEMANTIC
   class names from HTML themes (e.g. Visanet / Smart Travel International) that ship their
   OWN sticky-on-scroll mechanism: JS clones .main-header into a .sticky-header--cloned
   element whose source CSS keeps it position:fixed + visibility:hidden + translateY(-100%)
   (out of flow, hidden) until .active is added on scroll. The broad [class*=sticky]
   substring match also caught that clone and forced position:sticky !important, which —
   because sticky stays IN FLOW — made the invisible clone occupy ~114px of vertical space
   (white gap between navbar and hero, issue #1) and surface as a duplicate header band
   (issue #2). The exclusion is substring-scoped to sticky-header, so Tailwind's sticky
   utility (nav.sticky / header.sticky) and responsive variants like lg:sticky are
   UNAFFECTED — they never contain the sticky-header token. */
/* EC-NAV-363: same source-neutralisation exemption as the fixed block below. */
nav.sticky,
nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header nav.sticky,
header
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky,
header[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: sticky !important;
}

/* EC-NAV-322: Inner <nav> must not be sticky when the header wrapper is already
   fixed/sticky — double-positioning clips menu text in pre-scroll (Kai.dev:
   fixed header + converter-injected nav.sticky.top-0). */
header.fixed nav.sticky,
header.fixed nav[class*='sticky']:not([class*='sticky-header']),
header[class*='fixed'] nav.sticky,
header[class*='fixed']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']),
header.sticky nav.sticky,
header[class*='sticky']
  nav[class*='sticky']:not([style*='position']):not([class*='sticky-header']) {
  position: static !important;
  top: auto !important;
}

/* Explicit fixed positioning support - ensures it works even without Tailwind CSS loaded */
/* EC-NAV-296: same sticky-header clone exclusion (a .sticky-header--cloned does not carry
   a fixed token, but keep the guard symmetric in case a theme names a clone with both). */
/* EC-NAV-363: the substring selectors additionally exempt any framework position
   class the SOURCE cascade already neutralises (Bootstrap .fixed-top redeclared
   in-flow by a later .navbar{position:relative}). The exact-token `nav.fixed`
   (Tailwind) selectors are never guarded — they have no such override. */
nav.fixed,
nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header nav.fixed,
header
  nav[class*='fixed']:not([style*='position']):not([class*='sticky-header']),
header.fixed,
header[class*='fixed']:not([style*='position']):not([class*='sticky-header']) {
  position: fixed !important;
}

/* Common Tailwind patterns: sticky top-0, fixed top-0 */
nav[class*='sticky'][class*='top-0'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='sticky'][class*='top-0'],
header nav[class*='fixed'][class*='top-0'],
header[class*='sticky'][class*='top-0'],
header[class*='fixed'][class*='top-0'] {
  top: 0 !important;
}

/* Fixed navs typically need full width */
nav[class*='fixed'][class*='w-full'],
nav[class*='fixed'][class*='top-0'],
header nav[class*='fixed'][class*='w-full'],
header nav[class*='fixed'][class*='top-0'],
header[class*='fixed'][class*='w-full'],
header[class*='fixed'][class*='top-0'] {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* Ensure hero and main content respect header z-index */
section[class*='hero'],
.hero,
main,
.site-main {
  position: relative;
  z-index: 1;
}

/* Theme-specific overrides */
/* Only apply relative if not sticky/fixed */
.site-header:not([class*='sticky']):not([class*='fixed']) {
  position: relative;
}

.site-main {
  margin-top: 0;
  padding-top: 0;
  min-height: 60vh;
}

/* Remove gap between fixed navbar and first content (white band under header).
 * Use :first-of-type (not :first-child): WP templates often have a whitespace text node
 * between <div id="primary"> and <section>, so section is never :first-child and rules
 * would silently fail (EC-NAV-086 follow-up).
 *
 * EC-NAV-276: INNER-page templates wrap content one level deeper —
 *   .site-main > div.page-SLUG > div.page-content > HERO
 * and the hero is frequently authored as a div (e.g. div.hero), not a section.
 * Static sites (e.g. WECConnect) set the original nav position:fixed and give
 * each subpage hero margin-top:NAVHEIGHT to clear it; once the universal reset
 * forces the class-only nav in-flow (sticky/relative), that top margin becomes a
 * visible white band under the bar. Zero the first child inside .page-content
 * (section OR div) so inner pages match the front page (whose hero is already
 * covered by the rules above). Scoped to .page-content, which only WPConvert
 * page templates emit — SPA inner pages never carry it.
 *
 * EC-NAV-442: suppressed when the site's own stylesheet holds the bar OUT of
 * flow — the margin is then the author's clearance, not a redundant gap. */

.site-main > section:first-of-type,
.site-main > div:first-of-type > section:first-of-type,
.site-main .page-content > section:first-of-type,
.site-main .page-content > div:first-of-type,
.site-main .page-content > :first-child > :first-child {
  margin-top: 0;
}

/* EC-NAV-086: Fixed nav + full-viewport hero (Tailwind min-h-screen) — React/Vite SPAs
 * stack the hero at document top with fixed nav overlaid; body/main background shows through
 * any empty band under the bar. Pull the first min-h-screen hero up by the header bar height
 * (--wpconvert-header-bar-height from header.php EC-NAV-100; fallback 4rem) so background layers
 * align with the original SPA.
 * Only on front-page template (body.front-page); skip sections with explicit pt-* / mt-* utilities.
 * :first-of-type required: newline/whitespace between #primary and hero <section> breaks :first-child. */
body.front-page
  .site-main
  #primary
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']),
body.front-page
  .site-main
  > div:first-of-type
  > section.min-h-screen:first-of-type:not([class*='pt-']):not([class*='mt-']) {
  /* Logged out: --wp-admin--admin-bar--height is unset → 0px. Logged in: WP sets 32px / 46px (782px). */
  margin-top: calc(
    -1 * var(--wpconvert-header-bar-height, 4rem) -
      var(--wp-admin--admin-bar--height, 0px)
  );
}

/* EC-NAV-089: Admin bar is fixed at top:0; in-flow content gets html { margin-top } but fixed nav does not,
 * so the site navbar sits under #wpadminbar. Offset primary fixed nav; exclude full-screen mobile drawer.
 * EC-NAV-323: Also offset header.fixed — React/Vite SPAs (Kai.dev) use <header class="fixed top-0">,
 * not bare nav.fixed, so the round-1 EC-NAV-089 selectors never matched. */
body.admin-bar nav.fixed.top-0:not(#wpconvert-mobile-nav),
body.admin-bar nav.fixed[class*='top-0']:not(#wpconvert-mobile-nav),
body.admin-bar header.fixed.top-0,
body.admin-bar header.fixed[class*='top-0'] {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* EC-NAV-087: Merged / blog / legacy CSS often sets body { padding-top: 5rem+ } as “clearance”
 * for fixed headers. With a fixed overlay nav, that padding does NOT move the bar — it only
 * pushes <main> down while body background shows through → white/cream band (~nav height) under
 * the bar. Stay Boost ships this in bundled style.css; EC-NAV-086 margin alone cannot cancel it. */
body.front-page {
  padding-top: 0 !important;
}

/* EC-HERO-014: Full-viewport hero fidelity — SPA wrapper path + min-height guard */
body.front-page #primary section#top.min-h-screen,
body.front-page
  #primary
  > div:first-of-type
  > section.min-h-screen:first-of-type {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}
body.front-page #primary section#top.min-h-screen > .absolute.bottom-10 {
  z-index: 10;
}

.site-footer {
  margin-top: auto;
}

/* EC-TW4-001: WordPress default style overrides */

body.wp-admin {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}
/* EC-BTN-104: :where() = 0 specificity so Tailwind text-* utilities always win over these resets.
   Plain "a:hover { color: inherit }" can outrank .text-white on links (0,2,0 vs 0,1,0) and wash out hero CTAs. */
:where(a) {
  color: inherit;
  text-decoration: none;
}
:where(a:hover) {
  color: inherit;
}
/* EC-CSS-001: Long-hand padding-left/right (NOT shorthand 'padding: 0 20px') so
 * compound selectors like .container.hero-grid (which sets padding-top: 74px)
 * keep their vertical padding. The shorthand resets ALL four sides at the same
 * specificity, which on Dabster Labs caused the hero badge to slide under the
 * fixed 74px nav. Horizontal gutter (20px each side) unchanged; vertical
 * defaults to the browser's 0 — same effective behavior for sites that do not
 * set padding-top via another selector. */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* EC-CSS-009: :where() = 0 specificity, same reasoning as EC-BTN-104 above. A
   bare "h1, h2, h3, h4, h5, h6" list ties a site's own "h1, h2, h3 { font-weight:
   400 }" on specificity (0,0,1) and, being emitted after the merged site CSS,
   wins — so a display face meant to render at 400 shipped bold everywhere. These
   declarations still beat the UA stylesheet, because author origin outranks
   user-agent origin regardless of specificity. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
:where(button, .btn) {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
/* EC-BTN-107: Disclosure/accordion toggle buttons (aria-expanded) must not be
   text-selectable. Otherwise a double-click or click-drag on a FAQ question
   label paints the browser's default blue text-selection highlight, which the
   user sees as a stray "bluish background" that appears on one click and clears
   on the next. Native <button>s are non-selectable and the source React FAQ is
   too. Scoped to button[aria-expanded] so ordinary buttons and selectable
   content elsewhere are untouched. */
button[aria-expanded] {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea,
select {
  font-family: inherit;
}
ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

/* Grid Layout & Sidebar Preservation - Ensures Bootstrap and other grid systems work properly */
.grid-layout-container {
  width: 100%;
  max-width: 100%;
}

/* Preserve Bootstrap row structure */
.grid-layout-container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure Bootstrap columns work */
.grid-layout-container [class*='col-'] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* Bootstrap column widths - responsive */
@media (min-width: 768px) {
  .grid-layout-container .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .grid-layout-container .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .grid-layout-container .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .grid-layout-container .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .grid-layout-container .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .grid-layout-container .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Mobile stacking for sidebars */
@media (max-width: 767px) {
  .grid-layout-container [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Sidebar styling */
.grid-layout-container aside,
.grid-layout-container [class*='sidebar'] {
  padding: 20px;
}

/* CRITICAL: Disable popups marked by WPConvert - Universal for ALL popup libraries */
/* This targets ONLY popups we've marked, regardless of the library used */
/* Users can re-enable by overriding this CSS in Customizer → Additional CSS */
[data-wpconvert-popup-disabled='true'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  left: -99999px !important;
  transform: scale(0) !important;
}

/* Also hide child elements of disabled popups (for nested structures) */
[data-wpconvert-popup-disabled='true'] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Disable popup overlay backgrounds (universal) */
[data-wpconvert-popup-disabled='true'].overlay,
[data-wpconvert-popup-disabled='true'][class*='overlay'],
[data-wpconvert-popup-disabled='true'][class*='backdrop'],
[data-wpconvert-popup-disabled='true'][class*='bg'] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* EC-FORM-004: Native <select> option list styling.
 *
 * Why: EC-FORMS-004 / EC-MSTEP-001C converts Radix shadcn comboboxes to
 * native <select> elements so the form submits as a real HTML form. Native
 * select-popups inherit the trigger element background, so on shadcn forms
 * with translucent inputs (e.g. bg-white slash 10), the option list paints
 * as a translucent panel that bleeds the parent form background and makes
 * options nearly unreadable.
 *
 * The rule below paints each option on a solid surface using the same
 * shadcn --card design tokens the rest of the theme already uses, so
 * dropdowns visually match the original SelectContent / bg-popover render.
 *
 * Safety:
 *   - Scoped strictly to select option / select optgroup — never leaks
 *     to custom popover divs.
 *   - hsl(var(--card, ...)) with fallbacks degrades cleanly on themes
 *     that do not define the variable.
 *   - Safari ignores option styling entirely (no DOM hook into the native
 *     popup) so this is a no-op there. Chrome/Edge/Firefox/Brave honour it.
 */
/* EC-FORM-004 / EC-FORM-004b: solid option surfaces — card tokens by default,
   popover tokens on dark booking sections (bg-secondary / needs-wiring forms). */
select option,
select optgroup,
.bg-secondary select option,
.bg-secondary select optgroup,
form[data-wpconvert-form] select option,
form[data-wpconvert-form] select optgroup {
  background-color: hsl(var(--popover, var(--card, 0 0% 100%)));
  color: hsl(var(--popover-foreground, var(--card-foreground, 222.2 84% 4.9%)));
}

/* CRITICAL: Tailwind Font Override - ensure custom fonts take precedence over Tailwind CDN */
/* Tailwind CDN generates CSS dynamically that can override static CSS, so we use !important */
/* No custom font classes detected */

/* EC-NAV-433b: the EC-NAV-190 in-flow repair uses BARE tag selectors, and its
   :not([class*='…']) guards only see a utility class ON the element. A content
   header the SOURCE lifts out of flow from a stylesheet rule — Sabrina's
   ".set-product-head { position: absolute; top: 50% }" caption inside an
   overflow:hidden product frame — slipped past all three guards, was forced
   back into flow and clipped out of its frame. Restore the authored value for
   sectioning headers inside <main>, where the site header never lives. */
main.site-main
  header.nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  nav.nav:not([class*='sticky']):not([class*='fixed']):not([class*='absolute']),
main.site-main
  [role='banner'].nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ),
main.site-main
  [role='navigation'].nav:not([class*='sticky']):not([class*='fixed']):not(
    [class*='absolute']
  ) {
  position: fixed !important;
}

/* ── Blog Templates ─────────────────────────────────────── */

/* Prose typography for single post content */
/* EC-BLOG-184: Inherit the page's own body text colour instead of forcing the
   shadcn light-mode --foreground token. On dark-themed sites --foreground is the
   light-mode value (near-black), which rendered the entire article body
   invisible (dark text on a dark page). 'inherit' matches whatever the source
   theme authored for readable body copy (e.g. cream on dark, or dark on light),
   so blog content is legible on light AND dark themes. */
.prose {
  line-height: 1.8;
  color: inherit;
}
.prose p {
  margin-bottom: 1.25em;
}
.prose h2 {
  font-size: 1.5em;
  font-weight: 700;
  margin-top: 2em;
  margin-bottom: 0.75em;
}
.prose h3 {
  font-size: 1.25em;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.prose a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: underline;
}
.prose a:hover {
  opacity: 0.8;
}
.prose blockquote {
  border-left: 3px solid hsl(var(--accent, 221 83% 53%));
  padding-left: 1em;
  margin: 1.5em 0;
  font-style: italic;
  opacity: 0.9;
}
.prose ul,
.prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}
.prose li {
  margin-bottom: 0.5em;
}
.prose img {
  border-radius: 0.5rem;
  margin: 1.5em 0;
}
.prose code {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose pre {
  background: hsl(var(--muted, 0 0% 15%));
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5em 0;
}
.prose pre code {
  background: none;
  padding: 0;
}

/* Pagination */
.wpconvert-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  border: 1px solid hsl(var(--border, 0 0% 20%));
}
.wpconvert-pagination .page-numbers.current {
  background: hsl(var(--primary, 221 83% 53%));
  color: white;
  border-color: transparent;
}
.wpconvert-pagination .page-numbers:hover:not(.current) {
  background: hsl(var(--muted, 0 0% 15%));
}

/* Card hover image zoom (matches Tailwind group-hover:scale-105) */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Post navigation links on single.php */
article .flex.items-center.justify-between a {
  color: hsl(var(--primary, 221 83% 53%));
  text-decoration: none;
  font-weight: 500;
}
article .flex.items-center.justify-between a:hover {
  text-decoration: underline;
}

/* Responsive: stack grid on mobile */
@media (max-width: 768px) {
  [class*='md\:grid-cols-'] {
    grid-template-columns: 1fr !important;
  }
}

/* ── EC-BLOG-186 semantic layout fallback ───────────────────
   This site's stylesheet has no Tailwind utility classes, but the generated
   blog templates use a small set of them for layout. Define them here so the
   single-post article is a centered, readable column (not full-width / left-
   aligned) and card images crop correctly. */
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-none {
  max-width: none;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: 1rem;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.object-cover {
  object-fit: cover;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9;
}
.prose-lg {
  font-size: 1.125rem;
  line-height: 1.8;
}

/* EC-BLOG-188: the injected category-filter buttons use Tailwind utility
   classes (bg-primary / bg-card / text-muted-foreground …) that do not exist
   on a semantic site, so they render as default white boxes with dark text.
   Style the real .wpconvert-blog-filter / .wpconvert-category-filters classes
   with theme-neutral outlined pills (currentColor-based, so they adapt to dark
   or light themes) and a clear active state. */
.wpconvert-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.wpconvert-blog-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: currentColor;
  opacity: 0.6;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    opacity 0.2s,
    border-color 0.2s,
    background 0.2s;
}
.wpconvert-blog-filter:hover {
  opacity: 1;
}
.wpconvert-blog-filter.active {
  opacity: 1;
  border-color: currentColor;
  background: rgba(128, 128, 128, 0.14);
}