/* ==========================================================================
   Prime Cares Health — Custom theme
   Built on top of Bootstrap 5 (grid, utilities, components)
   Fonts: Plus Jakarta Sans (headings) + Manrope (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --pc-teal-900: #04302C;
  --pc-teal-800: #084F49;
  --pc-teal-700: #0A5F58;
  --pc-teal: #0C6B63;
  --pc-teal-500: #15968D;
  --pc-teal-300: #7CCFC6;
  --pc-mint: #E7F5F1;
  --pc-mint-soft: #F3FAF8;
  --pc-cream: #FBFDFC;

  --pc-coral: #FF7A59;
  --pc-coral-600: #F25F3A;
  --pc-coral-soft: #FFEDE7;
  --pc-amber: #FFB65C;

  --pc-ink: #0B2A27;
  --pc-body: #53696B;
  --pc-muted: #7F9490;
  --pc-line: #DCEDE9;

  --pc-white: #ffffff;

  --pc-radius-xl: 30px;
  --pc-radius-lg: 22px;
  --pc-radius: 16px;
  --pc-radius-sm: 12px;

  --pc-shadow-xs: 0 2px 8px rgba(8, 60, 55, .05);
  --pc-shadow-sm: 0 8px 22px rgba(8, 60, 55, .07);
  --pc-shadow: 0 18px 45px rgba(8, 60, 55, .10);
  --pc-shadow-lg: 0 32px 70px rgba(8, 60, 55, .16);

  --pc-gradient: linear-gradient(135deg, var(--pc-teal) 0%, var(--pc-teal-500) 100%);
  --pc-gradient-coral: linear-gradient(135deg, var(--pc-coral) 0%, var(--pc-coral-600) 100%);
  --pc-gradient-dark: linear-gradient(150deg, var(--pc-teal-900) 0%, var(--pc-teal-700) 60%, var(--pc-teal-500) 130%);

  --pc-header-h: 82px;

  --bs-body-font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--pc-body);
  --bs-body-font-size: 1rem;
  --bs-border-color: var(--pc-line);
  --bs-link-color: var(--pc-teal);
  --bs-link-hover-color: var(--pc-teal-800);
  --bs-primary: var(--pc-teal);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

/* `clip` (unlike `hidden`) never creates a scroll container, so the sticky
   header keeps working while sideways scroll is fully prevented. Bootstrap
   rows with a wide gutter can otherwise push a few pixels past the viewport. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--pc-body);
  background: var(--pc-white);
  font-size: 1.0125rem;
  line-height: 1.78;
  /* clip (not hidden) keeps the body out of the scroll-container chain so the
     sticky header keeps working */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

/* Tighten the largest gutters on small screens only — keeps phones roomy
   without changing the desktop rhythm. */
@media (max-width: 575.98px) {
  .row.g-5 { --bs-gutter-x: 1.75rem; --bs-gutter-y: 1.75rem; }
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  font-family: 'Plus Jakarta Sans', var(--bs-body-font-family);
  color: var(--pc-ink);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.16;
}

h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); }
h3 { font-size: clamp(1.22rem, 1.7vw, 1.5rem); }
h4 { font-size: 1.16rem; }
h5 { font-size: 1.03rem; }

p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; transition: color .25s ease, opacity .25s ease; }

img { max-width: 100%; height: auto; }

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

::selection { background: var(--pc-teal); color: #fff; }

:focus-visible {
  outline: 3px solid rgba(21, 150, 141, .45);
  outline-offset: 3px;
  border-radius: 6px;
}

.lead { font-size: 1.09rem; line-height: 1.82; color: var(--pc-body); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--pc-mint-soft); }
::-webkit-scrollbar-thumb { background: var(--pc-teal-300); border-radius: 20px; border: 3px solid var(--pc-mint-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--pc-teal-500); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 66px 0; }
.section-tight { padding: 44px 0; }
.bg-mint { background: var(--pc-mint-soft); }
.bg-mint-solid { background: var(--pc-mint); }
.bg-cream { background: var(--pc-cream); }
.bg-ink { background: var(--pc-gradient-dark); color: rgba(255, 255, 255, .8); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; }

.text-teal { color: var(--pc-teal) !important; }
.text-coral { color: var(--pc-coral) !important; }
.text-ink { color: var(--pc-ink) !important; }
.text-muted-soft { color: var(--pc-muted) !important; }

.rounded-xl { border-radius: var(--pc-radius-xl) !important; }
.rounded-lg { border-radius: var(--pc-radius-lg) !important; }
.shadow-soft { box-shadow: var(--pc-shadow) !important; }

.divider-line { height: 1px; background: var(--pc-line); border: 0; opacity: 1; }

/* Decorative blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.blob-teal { background: rgba(21, 150, 141, .28); }
.blob-coral { background: rgba(255, 122, 89, .22); }
.blob-amber { background: rgba(255, 182, 92, .22); }

/* Dot pattern */
.dot-grid {
  position: absolute;
  inset: auto;
  width: 170px;
  height: 170px;
  background-image: radial-gradient(rgba(12, 107, 99, .28) 1.6px, transparent 1.6px);
  background-size: 17px 17px;
  pointer-events: none;
  z-index: 0;
}

/* Section heading block */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--pc-mint);
  color: var(--pc-teal-800);
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: .48rem 1.02rem;
  border-radius: 100px;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pc-coral);
  box-shadow: 0 0 0 4px rgba(255, 122, 89, .18);
}
.eyebrow-light {
  background: rgba(255, 255, 255, .12);
  color: #D6F2EE;
}
.eyebrow-light::before { background: var(--pc-amber); box-shadow: 0 0 0 4px rgba(255, 182, 92, .18); }

.section-head { max-width: 720px; margin: 0 auto 58px; text-align: center; }
.section-head.text-start { margin-left: 0; }
.section-head p { color: var(--pc-body); margin-top: .95rem; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .945rem;
  letter-spacing: -.01em;
  border-radius: 100px;
  padding: .82rem 1.6rem;
  border: 1.6px solid transparent;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn i { font-size: 1.05em; line-height: 1; }

.btn-pc {
  background: var(--pc-gradient);
  color: #fff;
  box-shadow: 0 12px 26px rgba(12, 107, 99, .28);
}
.btn-pc:hover, .btn-pc:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 38px rgba(12, 107, 99, .34); }

.btn-coral {
  background: var(--pc-gradient-coral);
  color: #fff;
  box-shadow: 0 12px 26px rgba(242, 95, 58, .26);
}
.btn-coral:hover, .btn-coral:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 20px 38px rgba(242, 95, 58, .32); }

.btn-pc-outline {
  background: transparent;
  color: var(--pc-teal-800);
  border-color: var(--pc-line);
  background-color: #fff;
}
.btn-pc-outline:hover, .btn-pc-outline:focus {
  color: #fff;
  background: var(--pc-teal);
  border-color: var(--pc-teal);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(12, 107, 99, .22);
}

.btn-ghost-light {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px);
}
.btn-ghost-light:hover, .btn-ghost-light:focus { background: #fff; color: var(--pc-teal-800); transform: translateY(-3px); }

.btn-white {
  background: #fff;
  color: var(--pc-teal-800);
  box-shadow: 0 14px 30px rgba(4, 48, 44, .2);
}
.btn-white:hover, .btn-white:focus { color: var(--pc-teal-800); transform: translateY(-3px); box-shadow: 0 22px 40px rgba(4, 48, 44, .26); }

.btn-sm-pc { padding: .62rem 1.22rem; font-size: .87rem; }
.btn-lg-pc { padding: .96rem 2.02rem; font-size: 1.03rem; }

.btn-link-pc {
  color: var(--pc-teal);
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  background: none;
}
.btn-link-pc i { transition: transform .3s ease; }
.btn-link-pc:hover { color: var(--pc-coral); }
.btn-link-pc:hover i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Top bar + Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--pc-teal-900);
  color: rgba(255, 255, 255, .76);
  font-size: .855rem;
  padding: .55rem 0;
  position: relative;
  z-index: 5;
}
.topbar a { color: rgba(255, 255, 255, .82); font-weight: 600; }
.topbar a:hover { color: #fff; }
.topbar i { color: var(--pc-teal-300); margin-right: .4rem; }
.topbar .topbar-note i { color: var(--pc-amber); }
.topbar .tb-item { display: inline-flex; align-items: center; }
.topbar .social-mini a {
  width: 27px; height: 27px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: .8rem;
}
.topbar .social-mini a:hover { background: var(--pc-coral); color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pc-line);
  transition: box-shadow .3s ease, background-color .3s ease, padding .3s ease;
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(8, 60, 55, .09); background: rgba(255, 255, 255, .97); }

.navbar { padding: 0; }
.navbar > .container { min-height: var(--pc-header-h); }

.brand { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 46px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.29rem;
  color: var(--pc-ink);
  letter-spacing: -.03em;
}
.brand-name span { color: var(--pc-teal); }
.brand-tag {
  font-size: .645rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pc-muted);
  font-weight: 700;
}

.navbar-nav .nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: .965rem;
  color: var(--pc-ink);
  padding: .55rem .92rem !important;
  border-radius: 100px;
  position: relative;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: .28rem;
  width: 0; height: 2.5px;
  border-radius: 4px;
  background: var(--pc-coral);
  transform: translateX(-50%);
  transition: width .3s ease;
}
.navbar-nav .nav-link:hover { color: var(--pc-teal); }
.navbar-nav .nav-link:hover::after { width: 30%; }
.navbar-nav .nav-link.active { color: var(--pc-teal); }
.navbar-nav .nav-link.active::after { width: 46%; }

.navbar-toggler {
  border: 1.6px solid var(--pc-line);
  border-radius: 12px;
  padding: .42rem .6rem;
  color: var(--pc-teal-800);
  background: #fff;
}
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler i { font-size: 1.3rem; line-height: 1; }

/* Offcanvas mobile nav */
.offcanvas-pc { width: min(88vw, 380px); border: 0; }
.offcanvas-pc .offcanvas-header { border-bottom: 1px solid var(--pc-line); padding: 1.1rem 1.35rem; }
.offcanvas-pc .offcanvas-body { padding: 1.1rem 1.35rem 1.6rem; }
.offcanvas-pc .navbar-nav .nav-link { padding: .78rem .35rem !important; border-radius: 0; border-bottom: 1px solid var(--pc-mint); font-size: 1.04rem; }
.offcanvas-pc .navbar-nav .nav-link::after { display: none; }
.offcanvas-pc .navbar-nav .nav-link.active { color: var(--pc-teal); }
.offcanvas-pc .offcanvas-contact { background: var(--pc-mint-soft); border-radius: var(--pc-radius); padding: 1.05rem 1.15rem; margin-top: 1.4rem; }
.offcanvas-pc .offcanvas-contact a { color: var(--pc-teal-800); font-weight: 700; display: block; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(21, 150, 141, .13), transparent 60%),
    radial-gradient(760px 420px at 4% 8%, rgba(255, 122, 89, .10), transparent 62%),
    var(--pc-cream);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(251, 253, 252, 0), #fff);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.hero-title { font-size: clamp(2.25rem, 4.6vw, 3.6rem); margin-bottom: 1.15rem; }
.hero-title .hl { position: relative; color: var(--pc-teal); white-space: nowrap; }
.hero-title .hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .07em;
  height: .32em;
  background: rgba(255, 182, 92, .38);
  border-radius: 6px;
  z-index: -1;
}
.hero-lead { font-size: 1.1rem; max-width: 33rem; margin-bottom: 1.9rem; }

.hero-trust { display: flex; flex-wrap: wrap; gap: .6rem .7rem; margin-top: 2.1rem; }
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 100px;
  padding: .5rem 1rem .5rem .55rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--pc-ink);
  box-shadow: var(--pc-shadow-xs);
}
.trust-chip i {
  width: 27px; height: 27px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pc-mint);
  color: var(--pc-teal);
  font-size: .85rem;
}

.hero-visual { position: relative; padding: 8px 0 14px; }
.hero-frame {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--pc-shadow-lg);
  border: 8px solid #fff;
  background: #fff;
}
.hero-frame img { width: 100%; display: block; aspect-ratio: 11 / 10.6; object-fit: cover; }
.hero-ring {
  position: absolute;
  inset: -16px -18px auto auto;
  width: 190px; height: 190px;
  border: 2px dashed rgba(12, 107, 99, .32);
  border-radius: 50%;
  z-index: -1;
  animation: spinSlow 42s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.float-card {
  position: absolute;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: .85rem 1.05rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  animation: floaty 6s ease-in-out infinite;
  z-index: 3;
}
.float-card .fc-icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--pc-mint);
  color: var(--pc-teal);
  font-size: 1.14rem;
}
.float-card .fc-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .9rem; color: var(--pc-ink); line-height: 1.2; }
.float-card .fc-sub { font-size: .765rem; color: var(--pc-muted); line-height: 1.35; }
.float-card--tl { top: 4%; left: -26px; }
.float-card--br { bottom: 5%; right: -18px; animation-delay: -3s; }
.float-card--br .fc-icon { background: var(--pc-coral-soft); color: var(--pc-coral-600); }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-11px); }
}

/* --------------------------------------------------------------------------
   7. Media frames (about, generic)
   -------------------------------------------------------------------------- */
.media-frame { position: relative; }
.media-frame img { width: 100%; display: block; border-radius: var(--pc-radius-xl); box-shadow: var(--pc-shadow); object-fit: cover; }
.media-frame--outline::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border: 2px solid var(--pc-line);
  border-radius: var(--pc-radius-xl);
  z-index: -1;
}
.media-badge {
  position: absolute;
  bottom: 22px; right: -22px;
  background: #fff;
  border-radius: var(--pc-radius);
  box-shadow: var(--pc-shadow);
  padding: .95rem 1.15rem;
  display: flex; align-items: center; gap: .8rem;
  max-width: 250px;
}
.media-badge .mb-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 14px;
  background: var(--pc-gradient);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.24rem;
}
.media-badge .mb-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--pc-ink); font-size: .95rem; line-height: 1.2; }
.media-badge .mb-sub { font-size: .78rem; color: var(--pc-muted); line-height: 1.32; }

/* Checklist */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 2.15rem;
  margin-bottom: .78rem;
  color: var(--pc-body);
  font-size: 1rem;
}
.check-list li:last-child { margin-bottom: 0; }
.check-list li::before {
  content: "\F26E"; /* bootstrap-icons check-circle-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0; top: .12rem;
  color: var(--pc-teal-500);
  font-size: 1.16rem;
  line-height: 1;
}
.check-list li strong { color: var(--pc-ink); }

/* --------------------------------------------------------------------------
   8. Cards: why choose us / features
   -------------------------------------------------------------------------- */
.why-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 2.05rem 1.75rem 1.85rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform .38s cubic-bezier(.2, .8, .3, 1), box-shadow .38s ease, border-color .38s ease;
}
.why-card::before {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 190px; height: 190px;
  background: var(--pc-mint-soft);
  border-radius: 50%;
  transition: transform .45s ease;
}
.why-card:hover { transform: translateY(-8px); box-shadow: var(--pc-shadow); border-color: transparent; }
.why-card:hover::before { transform: scale(2.1); }
.why-card > * { position: relative; z-index: 1; }
.why-icon {
  width: 62px; height: 62px;
  border-radius: 19px;
  display: grid; place-items: center;
  font-size: 1.72rem;
  background: var(--pc-mint);
  color: var(--pc-teal);
  margin-bottom: 1.35rem;
  transition: transform .38s ease;
}
.why-card:hover .why-icon { transform: rotate(-6deg) scale(1.06); }
.why-card h3 { font-size: 1.19rem; margin-bottom: .6rem; }
.why-card p { font-size: .965rem; margin: 0; }

.why-card--feature { background: var(--pc-gradient-dark); border-color: transparent; color: rgba(255, 255, 255, .82); }
.why-card--feature h3 { color: #fff; }
.why-card--feature::before { background: rgba(255, 255, 255, .07); }
.why-card--feature .why-icon { background: rgba(255, 255, 255, .14); color: #fff; }
.why-card--feature .btn-link-pc { color: var(--pc-amber); }
.why-card--feature .btn-link-pc:hover { color: #fff; }

.why-card--coral .why-icon { background: var(--pc-coral-soft); color: var(--pc-coral-600); }

/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */
.service-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), box-shadow .4s ease;
}
.service-card:hover { transform: translateY(-9px); box-shadow: var(--pc-shadow-lg); }
.service-thumb { position: relative; overflow: hidden; aspect-ratio: 8 / 5; }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2, .8, .3, 1); }
.service-card:hover .service-thumb img { transform: scale(1.07); }
.service-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 48, 44, .55) 0%, rgba(4, 48, 44, 0) 55%);
}
.service-icon {
  position: absolute;
  z-index: 2;
  left: 16px; bottom: -19px;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: #fff;
  color: var(--pc-teal);
  display: grid; place-items: center;
  font-size: 1.4rem;
  box-shadow: var(--pc-shadow-sm);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.service-card:hover .service-icon { background: var(--pc-teal); color: #fff; transform: translateY(-4px); }
.service-body { padding: 2.15rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.service-body h3 { font-size: 1.16rem; margin-bottom: .6rem; }
.service-body h3 a { color: inherit; }
.service-body h3 a:hover { color: var(--pc-teal); }
.service-body p { font-size: .955rem; margin-bottom: 1.35rem; }
.service-body .btn { align-self: flex-start; margin-top: auto; }
.service-tag {
  position: absolute;
  z-index: 2;
  top: 14px; left: 14px;
  background: rgba(255, 255, 255, .93);
  color: var(--pc-teal-800);
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .38rem .72rem;
  border-radius: 100px;
}

/* CTA tile filling the service grid */
.service-tile-cta {
  border-radius: var(--pc-radius-lg);
  background: var(--pc-gradient-dark);
  color: rgba(255, 255, 255, .82);
  padding: 2.1rem 1.7rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-tile-cta::after {
  content: "\F2DD";
  font-family: "bootstrap-icons";
  position: absolute;
  right: -18px; bottom: -30px;
  font-size: 8.4rem;
  color: rgba(255, 255, 255, .07);
  line-height: 1;
}
.service-tile-cta h3 { color: #fff; font-size: 1.28rem; margin-bottom: .7rem; position: relative; z-index: 1; }
.service-tile-cta p { position: relative; z-index: 1; font-size: .955rem; }
.service-tile-cta .btn { align-self: flex-start; position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.85rem 1.6rem 1.7rem;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .38s ease, box-shadow .38s ease;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.testimonial-card .quote-mark {
  font-size: 2.05rem;
  color: rgba(12, 107, 99, .16);
  line-height: 1;
  margin-bottom: .7rem;
}
.testimonial-card p { font-size: .985rem; color: var(--pc-body); font-style: italic; }
.testimonial-card .t-person { display: flex; align-items: center; gap: .85rem; margin-top: auto; padding-top: 1.35rem; }
.avatar-initials {
  width: 50px; height: 50px; flex: 0 0 50px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  color: #fff;
  background: var(--pc-gradient);
  font-size: 1rem;
  letter-spacing: .02em;
}
.avatar-initials.coral { background: var(--pc-gradient-coral); }
.avatar-initials.amber { background: linear-gradient(135deg, #FFC46B, #F2963A); }
.avatar-initials.plum { background: linear-gradient(135deg, #8E7BF0, #5F4BC9); }
.t-person .t-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--pc-ink); font-size: .985rem; line-height: 1.25; }
.t-person .t-role { font-size: .815rem; color: var(--pc-muted); }

.testimonial-carousel { position: relative; }
.testimonial-carousel .carousel-control-prev,
.testimonial-carousel .carousel-control-next {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--pc-line);
  color: var(--pc-teal-800);
  opacity: 1;
  top: auto;
  bottom: -74px;
  box-shadow: var(--pc-shadow-sm);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.testimonial-carousel .carousel-control-prev { left: calc(50% - 56px); }
.testimonial-carousel .carousel-control-next { right: calc(50% - 56px); }
.testimonial-carousel .carousel-control-prev:hover,
.testimonial-carousel .carousel-control-next:hover { background: var(--pc-teal); color: #fff; transform: translateY(-2px); }
.testimonial-carousel .carousel-control-prev i,
.testimonial-carousel .carousel-control-next i { font-size: 1.2rem; }
.testimonial-carousel .carousel-indicators { position: static; margin: 2.9rem 0 0; }
.testimonial-carousel .carousel-indicators [data-bs-target] {
  width: 26px; height: 5px;
  border-radius: 100px;
  background: var(--pc-teal-300);
  opacity: .45;
  border: 0;
  margin: 0 5px;
}
.testimonial-carousel .carousel-indicators .active { background: var(--pc-teal); opacity: 1; }
.testimonial-carousel .carousel-inner { padding-bottom: .5rem; }

/* --------------------------------------------------------------------------
   11. Blog cards
   -------------------------------------------------------------------------- */
.post-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2, .8, .3, 1), box-shadow .4s ease;
}
.post-card:hover { transform: translateY(-8px); box-shadow: var(--pc-shadow-lg); }
.post-thumb { position: relative; overflow: hidden; aspect-ratio: 9 / 5.6; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .3, 1); }
.post-card:hover .post-thumb img { transform: scale(1.06); }
.post-cat {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255, 255, 255, .95);
  color: var(--pc-teal-800);
  font-size: .715rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 100px;
  box-shadow: var(--pc-shadow-xs);
}
.post-body { padding: 1.55rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.05rem; font-size: .825rem; color: var(--pc-muted); margin-bottom: .8rem; }
.post-meta span { display: inline-flex; align-items: center; gap: .42rem; }
.post-meta i { color: var(--pc-teal-500); }
.post-card h3 { font-size: 1.14rem; margin-bottom: .65rem; }
.post-card h3 a { color: inherit; }
.post-card h3 a:hover { color: var(--pc-teal); }
.post-card p { font-size: .955rem; margin-bottom: 1.15rem; }
.post-card .btn-link-pc { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.accordion-pc .accordion-item {
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius) !important;
  margin-bottom: .95rem;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.accordion-pc .accordion-item:has(.accordion-button:not(.collapsed)) { box-shadow: var(--pc-shadow-sm); border-color: var(--pc-teal-300); }
.accordion-pc .accordion-button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.045rem;
  color: var(--pc-ink);
  background: #fff;
  padding: 1.28rem 3.4rem 1.28rem 1.4rem;
  box-shadow: none !important;
  gap: 1rem;
}
.accordion-pc .accordion-button::after {
  content: "\F4FE"; /* plus-lg */
  font-family: "bootstrap-icons";
  background-image: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pc-mint);
  color: var(--pc-teal);
  font-size: .95rem;
  position: absolute;
  right: 1.25rem;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.accordion-pc .accordion-button:not(.collapsed) { background: #fff; color: var(--pc-teal); }
.accordion-pc .accordion-button:not(.collapsed)::after {
  background: var(--pc-teal);
  color: #fff;
  transform: rotate(135deg);
}
.accordion-pc .accordion-body { padding: 0 3.4rem 1.4rem 1.4rem; font-size: .975rem; color: var(--pc-body); }

.faq-aside {
  background: var(--pc-gradient-dark);
  border-radius: var(--pc-radius-lg);
  padding: 2.1rem 1.8rem;
  color: rgba(255, 255, 255, .82);
  position: relative;
  overflow: hidden;
}
.faq-aside::after {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  right: -70px; top: -70px;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%;
}
.faq-aside h3 { color: #fff; font-size: 1.28rem; margin-bottom: .75rem; position: relative; z-index: 1; }
.faq-aside p { position: relative; z-index: 1; font-size: .965rem; }
.faq-aside .faq-contact-line {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .7rem;
  padding: .72rem 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  font-size: .97rem;
}
.faq-aside .faq-contact-line i { color: var(--pc-amber); font-size: 1.05rem; }
.faq-aside .faq-contact-line a { color: #fff; }
.faq-aside .faq-contact-line a:hover { color: var(--pc-amber); }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border-radius: var(--pc-radius-xl);
  overflow: hidden;
  background: var(--pc-teal-900);
  isolation: isolate;
}
.cta-band img.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(4, 48, 44, .95) 0%, rgba(10, 95, 88, .88) 45%, rgba(21, 150, 141, .62) 100%);
  z-index: -1;
}
.cta-band .cta-inner { padding: 4.2rem 3.4rem; position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { color: rgba(255, 255, 255, .84); font-size: 1.045rem; max-width: 40rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }
.cta-mini { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.1rem; }
.cta-mini span { display: inline-flex; align-items: center; gap: .55rem; color: rgba(255, 255, 255, .88); font-weight: 600; font-size: .94rem; }
.cta-mini i { color: var(--pc-amber); }

/* --------------------------------------------------------------------------
   14. Inner page hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 78px;
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(21, 150, 141, .16), transparent 60%),
    radial-gradient(600px 340px at 2% 10%, rgba(255, 122, 89, .12), transparent 62%),
    var(--pc-mint-soft);
  border-bottom: 1px solid var(--pc-line);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .9rem; }
.page-hero p { max-width: 46rem; color: var(--pc-body); font-size: 1.06rem; }

.breadcrumb-pc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .865rem; margin-bottom: 1.15rem; padding: 0; list-style: none; }
.breadcrumb-pc li { display: inline-flex; align-items: center; gap: .5rem; color: var(--pc-muted); font-weight: 600; }
.breadcrumb-pc li + li::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .7rem; color: var(--pc-teal-300); }
.breadcrumb-pc a { color: var(--pc-teal); }
.breadcrumb-pc a:hover { color: var(--pc-coral); }

/* --------------------------------------------------------------------------
   15. Info cards / value tiles / team
   -------------------------------------------------------------------------- */
.info-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.6rem 1.45rem;
  height: 100%;
  display: flex;
  gap: 1.05rem;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.info-card:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); border-color: transparent; }
.info-card .ic-icon {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 16px;
  background: var(--pc-mint);
  color: var(--pc-teal);
  display: grid; place-items: center;
  font-size: 1.36rem;
}
.info-card h3, .info-card h4 { font-size: 1.06rem; margin-bottom: .42rem; }
.info-card p, .info-card address { font-size: .955rem; margin: 0; line-height: 1.7; }
.info-card a { color: var(--pc-teal-800); font-weight: 600; }
.info-card a:hover { color: var(--pc-coral); }
.info-card--coral .ic-icon { background: var(--pc-coral-soft); color: var(--pc-coral-600); }

.value-tile {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.85rem 1.6rem;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.value-tile:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.value-tile .vt-icon { font-size: 1.9rem; color: var(--pc-teal); display: block; margin-bottom: .95rem; }
.value-tile h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.value-tile p { font-size: .955rem; margin: 0; }

.team-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.75rem 1.4rem;
  text-align: center;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.team-card .avatar-initials { margin: 0 auto 1.05rem; width: 74px; height: 74px; flex: 0 0 74px; font-size: 1.35rem; }
.team-card h3 { font-size: 1.09rem; margin-bottom: .28rem; }
.team-card .team-role { color: var(--pc-teal); font-weight: 700; font-size: .885rem; margin-bottom: .6rem; display: block; }
.team-card p { font-size: .92rem; margin: 0; }

.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.9rem 1.5rem 1.6rem;
  height: 100%;
  transition: transform .35s ease, box-shadow .35s ease;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.step-card .step-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: var(--pc-gradient);
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 1.15rem;
  box-shadow: 0 12px 24px rgba(12, 107, 99, .24);
}
.step-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.step-card p { font-size: .945rem; margin: 0; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form-panel {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-xl);
  padding: 2.4rem 2.2rem;
  box-shadow: var(--pc-shadow-sm);
}
.form-panel--flush { box-shadow: none; }

.form-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: .885rem;
  color: var(--pc-ink);
  margin-bottom: .45rem;
}
.form-label .req { color: var(--pc-coral); }
.form-control, .form-select {
  border: 1.6px solid var(--pc-line);
  border-radius: var(--pc-radius-sm);
  padding: .78rem 1.05rem;
  font-size: .975rem;
  color: var(--pc-ink);
  background-color: #fff;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.form-control::placeholder { color: #A9B8B5; }
.form-control:focus, .form-select:focus {
  border-color: var(--pc-teal-300);
  box-shadow: 0 0 0 4px rgba(21, 150, 141, .12);
}
textarea.form-control { min-height: 138px; resize: vertical; }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.7px solid var(--pc-line); margin-top: .22em; }
.form-check-input:checked { background-color: var(--pc-teal); border-color: var(--pc-teal); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(21, 150, 141, .14); border-color: var(--pc-teal-300); }
.form-check-label { font-size: .93rem; }
.form-text { font-size: .845rem; color: var(--pc-muted); }

.form-control.is-invalid, .form-select.is-invalid { border-color: #E4573B; background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(228, 87, 59, .12); }
.invalid-feedback { font-size: .845rem; font-weight: 600; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .7rem; }
.choice {
  position: relative;
  border: 1.6px solid var(--pc-line);
  border-radius: var(--pc-radius-sm);
  padding: .78rem .95rem .78rem 2.6rem;
  cursor: pointer;
  font-size: .93rem;
  font-weight: 600;
  color: var(--pc-ink);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  background: #fff;
  margin: 0;
}
.choice input { position: absolute; left: .85rem; top: .95rem; margin: 0; }
.choice:hover { border-color: var(--pc-teal-300); }
.choice:has(input:checked) { border-color: var(--pc-teal); background: var(--pc-mint-soft); box-shadow: 0 0 0 3px rgba(21, 150, 141, .10); }

.form-success {
  display: none;
  background: var(--pc-mint);
  border: 1px solid var(--pc-teal-300);
  border-radius: var(--pc-radius);
  padding: 1.25rem 1.35rem;
  color: var(--pc-teal-800);
  font-size: .97rem;
  margin-bottom: 1.35rem;
}
.form-success.is-visible { display: flex; gap: .8rem; align-items: flex-start; animation: fadeUp .5s ease both; }
.form-success i { font-size: 1.35rem; color: var(--pc-teal); line-height: 1.2; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--pc-teal-900);
  color: rgba(255, 255, 255, .72);
  padding: 72px 0 0;
  position: relative;
  overflow: hidden;
  font-size: .955rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -140px; top: -160px;
  border-radius: 50%;
  background: rgba(21, 150, 141, .16);
  filter: blur(30px);
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: .01em;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: .7rem;
}
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 3px;
  border-radius: 4px;
  background: var(--pc-coral);
}
.site-footer .brand-name { color: #fff; }
.site-footer .brand-name span { color: var(--pc-teal-300); }
.site-footer .brand-tag { color: rgba(255, 255, 255, .5); }
.footer-about { margin: 1.25rem 0 1.5rem; font-size: .955rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .7rem; }
.footer-links a { color: rgba(255, 255, 255, .72); display: inline-flex; align-items: center; gap: .5rem; }
.footer-links a::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: .68rem;
  color: var(--pc-teal-300);
  transition: transform .25s ease, color .25s ease;
}
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { transform: translateX(3px); color: var(--pc-coral); }

.footer-contact-line { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .95rem; }
.footer-contact-line i { color: var(--pc-teal-300); font-size: 1.03rem; line-height: 1.6; }
.footer-contact-line a { color: rgba(255, 255, 255, .85); font-weight: 600; }
.footer-contact-line a:hover { color: #fff; }

.footer-social { display: flex; gap: .55rem; margin-top: 1.35rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: .99rem;
  transition: background .3s ease, transform .3s ease;
}
.footer-social a:hover { background: var(--pc-coral); transform: translateY(-3px); }

.newsletter-mini {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--pc-radius);
  padding: 1.35rem 1.3rem;
  margin-top: 1.1rem;
}
.newsletter-mini p { font-size: .9rem; color: rgba(255, 255, 255, .7); margin-bottom: .95rem; }
.newsletter-mini .form-control {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 100px;
  padding: .72rem 1.15rem;
}
.newsletter-mini .form-control::placeholder { color: rgba(255, 255, 255, .55); }
.newsletter-mini .form-control:focus { background: rgba(255, 255, 255, .16); border-color: var(--pc-teal-300); box-shadow: none; color: #fff; }
.newsletter-mini .btn { width: 100%; margin-top: .6rem; }
.newsletter-mini .form-text { color: rgba(255, 255, 255, .5); }

.footer-bottom {
  margin-top: 58px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.45rem 0;
  font-size: .885rem;
  color: rgba(255, 255, 255, .58);
}
.footer-bottom a { color: rgba(255, 255, 255, .72); }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: .55rem 1.15rem; }
.footer-disclaimer { font-size: .8rem; color: rgba(255, 255, 255, .42); margin-top: .5rem; max-width: 62rem; }

/* --------------------------------------------------------------------------
   18. Article (blog post) styles
   -------------------------------------------------------------------------- */
.article-hero-img { border-radius: var(--pc-radius-xl); overflow: hidden; box-shadow: var(--pc-shadow); }
.article-hero-img img { width: 100%; display: block; }

.article-body { font-size: 1.045rem; line-height: 1.85; }
.article-body h2 { font-size: 1.62rem; margin: 2.4rem 0 .95rem; }
.article-body h3 { font-size: 1.24rem; margin: 1.9rem 0 .8rem; }
.article-body p { margin-bottom: 1.15rem; }
.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-left: 1.2rem; }
.article-body li { margin-bottom: .6rem; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul li { position: relative; padding-left: 1.75rem; }
.article-body ul li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0; top: .1rem;
  color: var(--pc-teal-500);
  font-size: 1.02rem;
}
.article-body ol { padding-left: 1.35rem; }
.article-body ol li::marker { color: var(--pc-teal); font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; }
.article-body blockquote {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem 1.4rem 1.75rem;
  background: var(--pc-mint-soft);
  border-left: 4px solid var(--pc-teal);
  border-radius: 0 var(--pc-radius) var(--pc-radius) 0;
  font-style: italic;
  color: var(--pc-ink);
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-callout {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-left: 4px solid var(--pc-coral);
  border-radius: 0 var(--pc-radius) var(--pc-radius) 0;
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
  box-shadow: var(--pc-shadow-xs);
}
.article-callout h4 { font-size: 1.02rem; margin-bottom: .45rem; display: flex; align-items: center; gap: .5rem; }
.article-callout h4 i { color: var(--pc-coral); }
.article-callout p { font-size: .96rem; margin: 0; }

.article-meta-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--pc-line);
  border-bottom: 1px solid var(--pc-line);
  margin: 1.9rem 0 2.6rem;
  font-size: .9rem;
  color: var(--pc-muted);
}
.article-meta-bar .am-item { display: inline-flex; align-items: center; gap: .5rem; }
.article-meta-bar i { color: var(--pc-teal-500); }

.share-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.share-row .share-label { font-weight: 700; color: var(--pc-ink); font-size: .9rem; }
.share-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pc-mint);
  color: var(--pc-teal);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.share-row a:hover { background: var(--pc-teal); color: #fff; transform: translateY(-3px); }

.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-pill {
  background: var(--pc-mint-soft);
  border: 1px solid var(--pc-line);
  color: var(--pc-teal-800);
  font-size: .82rem;
  font-weight: 600;
  padding: .38rem .85rem;
  border-radius: 100px;
}
.tag-pill:hover { background: var(--pc-mint); color: var(--pc-teal); }

.author-box {
  display: flex; gap: 1.15rem; align-items: flex-start;
  background: var(--pc-mint-soft);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.55rem 1.6rem;
}
.author-box .avatar-initials { width: 62px; height: 62px; flex: 0 0 62px; font-size: 1.15rem; }
.author-box h4 { font-size: 1.05rem; margin-bottom: .2rem; }
.author-box .author-role { font-size: .845rem; color: var(--pc-teal); font-weight: 700; display: block; margin-bottom: .55rem; }
.author-box p { font-size: .935rem; margin: 0; }

.sidebar-card {
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.6rem 1.5rem;
  margin-bottom: 1.6rem;
}
.sidebar-card h4 { font-size: 1.06rem; margin-bottom: 1.15rem; }
.sidebar-post { display: flex; gap: .95rem; padding: .9rem 0; border-bottom: 1px solid var(--pc-mint); }
.sidebar-post:first-of-type { padding-top: .2rem; }
.sidebar-post:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar-post img { width: 76px; height: 62px; object-fit: cover; border-radius: 12px; flex: 0 0 76px; }
.sidebar-post h5 { font-size: .93rem; line-height: 1.45; margin-bottom: .3rem; }
.sidebar-post h5 a { color: var(--pc-ink); }
.sidebar-post h5 a:hover { color: var(--pc-teal); }
.sidebar-post .sp-meta { font-size: .775rem; color: var(--pc-muted); }

.sidebar-cta {
  background: var(--pc-gradient-dark);
  border: 0;
  color: rgba(255, 255, 255, .8);
  position: relative;
  overflow: hidden;
}
.sidebar-cta h4, .sidebar-cta h3 { color: #fff; }
.sidebar-cta p { font-size: .94rem; position: relative; z-index: 1; }
.sidebar-cta .btn { position: relative; z-index: 1; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   19. Legal pages (privacy / terms)
   -------------------------------------------------------------------------- */
.legal-toc {
  position: sticky;
  top: calc(var(--pc-header-h) + 22px);
  background: var(--pc-mint-soft);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-lg);
  padding: 1.5rem 1.4rem;
}
.legal-toc h4 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pc-muted); margin-bottom: 1rem; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.legal-toc li { margin-bottom: .55rem; }
.legal-toc a {
  color: var(--pc-body);
  font-size: .925rem;
  font-weight: 600;
  display: block;
  padding-left: 1.35rem;
  position: relative;
}
.legal-toc a::before {
  counter-increment: toc;
  content: counter(toc);
  position: absolute;
  left: 0; top: .06rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  color: var(--pc-teal-300);
}
.legal-toc a:hover, .legal-toc a.active { color: var(--pc-teal); }
.legal-toc a.active::before { color: var(--pc-coral); }

.legal-body h2 {
  font-size: 1.42rem;
  margin: 2.6rem 0 .95rem;
  padding-top: .2rem;
  scroll-margin-top: calc(var(--pc-header-h) + 20px);
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.legal-body p, .legal-body li { font-size: .995rem; color: var(--pc-body); }
.legal-body ul { list-style: none; padding-left: 0; margin-bottom: 1.15rem; }
.legal-body ul li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.legal-body ul li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute; left: 0; top: .12rem;
  color: var(--pc-teal-500);
  font-size: .98rem;
}
.legal-note {
  background: var(--pc-mint-soft);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  padding: 1.2rem 1.35rem;
  font-size: .945rem;
  margin: 1.6rem 0;
}
.legal-note strong { display: block; margin-bottom: .3rem; }

/* --------------------------------------------------------------------------
   20. Misc components
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .7s cubic-bezier(.2, .8, .3, 1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .27s; }
.reveal-d4 { transition-delay: .36s; }

.to-top {
  position: fixed;
  right: 22px; bottom: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--pc-teal);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.15rem;
  box-shadow: 0 14px 30px rgba(12, 107, 99, .32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s ease, background .3s ease;
  z-index: 1040;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--pc-coral); }

.map-frame {
  position: relative;
  border-radius: var(--pc-radius-xl);
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--pc-shadow);
  background: #EAF4F2;
}
.map-frame svg { display: block; width: 100%; height: auto; }
.map-pin-card {
  position: absolute;
  left: 22px; bottom: 22px;
  background: rgba(255, 255, 255, .97);
  border-radius: var(--pc-radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--pc-shadow);
  max-width: 290px;
}
.map-pin-card h4 { font-size: 1rem; margin-bottom: .35rem; }
.map-pin-card address { font-size: .92rem; margin-bottom: .65rem; line-height: 1.6; }

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--pc-coral-soft);
  color: var(--pc-coral-600);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .38rem .8rem;
  border-radius: 100px;
}
.badge-soft-teal { background: var(--pc-mint); color: var(--pc-teal-800); }

/* Newsletter page hero panel */
.subscribe-panel {
  background: var(--pc-gradient-dark);
  border-radius: var(--pc-radius-xl);
  padding: 3.2rem 2.6rem;
  color: rgba(255, 255, 255, .8);
  position: relative;
  overflow: hidden;
}
.subscribe-panel::after {
  content: "\F414";
  font-family: "bootstrap-icons";
  position: absolute;
  right: -30px; bottom: -50px;
  font-size: 12rem;
  color: rgba(255, 255, 255, .06);
  line-height: 1;
}
.subscribe-panel h2 { color: #fff; }
.subscribe-panel .form-panel { position: relative; z-index: 1; }
/* Used on a light background (Subscribe page), so colours stay dark-on-light.
   A white-on-dark variant is available for use inside .subscribe-panel. */
.perk-item { display: flex; gap: .9rem; align-items: flex-start; position: relative; z-index: 1; margin-bottom: 1.35rem; }
.perk-item .perk-icon {
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px;
  background: var(--pc-mint);
  color: var(--pc-teal);
  display: grid; place-items: center;
  font-size: 1.2rem;
  transition: background .3s ease, color .3s ease;
}
.perk-item:hover .perk-icon { background: var(--pc-teal); color: #fff; }
.perk-item h5 { color: var(--pc-ink); font-size: 1.01rem; margin-bottom: .25rem; }
.perk-item p { font-size: .935rem; margin: 0; color: var(--pc-body); }

/* Dark-background variant */
.subscribe-panel .perk-item .perk-icon,
.bg-ink .perk-item .perk-icon { background: rgba(255, 255, 255, .12); color: #fff; }
.subscribe-panel .perk-item h5,
.bg-ink .perk-item h5 { color: #fff; }
.subscribe-panel .perk-item p,
.bg-ink .perk-item p { color: rgba(255, 255, 255, .78); }

.stat-free-note { font-size: .86rem; color: var(--pc-muted); }

/* Empty-state / notice used on unsubscribe */
.notice-card {
  background: var(--pc-mint-soft);
  border: 1px dashed var(--pc-teal-300);
  border-radius: var(--pc-radius-lg);
  padding: 1.4rem 1.5rem;
  font-size: .96rem;
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .float-card--tl { left: -12px; }
  .float-card--br { right: -8px; }
}

@media (max-width: 991.98px) {
  .section { padding: 74px 0; }
  .hero { padding: 66px 0 78px; }
  .hero-visual { margin-top: 3.4rem; }
  .media-frame--outline::before { display: none; }
  .media-badge { right: 8px; bottom: -18px; }
  .testimonial-carousel .carousel-control-prev,
  .testimonial-carousel .carousel-control-next { display: none; }
  .testimonial-carousel .carousel-indicators { margin-top: 2rem; }
  .cta-band .cta-inner { padding: 3rem 2rem; }
  .legal-toc { position: static; margin-bottom: 2rem; }
  .page-hero { padding: 56px 0 60px; }
  .dot-grid { display: none; }
}

@media (max-width: 767.98px) {
  body { font-size: .99rem; }
  .section { padding: 62px 0; }
  .section-head { margin-bottom: 40px; }
  .hero { padding: 52px 0 62px; }
  .hero-trust { margin-top: 1.6rem; }
  .form-panel { padding: 1.7rem 1.35rem; }
  .cta-band .cta-inner { padding: 2.4rem 1.4rem; }
  .cta-band { border-radius: var(--pc-radius-lg); }
  .cta-mini { gap: 1rem; }
  .float-card { display: none; }
  .hero-frame { border-width: 6px; border-radius: 26px; }
  .media-badge { position: static; margin-top: 1.2rem; right: auto; bottom: auto; max-width: none; }
  .why-card, .value-tile, .team-card, .step-card { padding: 1.6rem 1.35rem; }
  .subscribe-panel { padding: 2rem 1.4rem; }
  .author-box { flex-direction: column; }
  .footer-bottom { text-align: center; }
  .footer-bottom .legal-links { justify-content: center; }
  .to-top { right: 14px; bottom: 16px; }
}

@media (max-width: 575.98px) {
  h1 { font-size: 1.95rem; }
  .hero-title { font-size: 1.98rem; }
  .btn { padding: .76rem 1.35rem; }
  .btn-lg-pc { padding: .82rem 1.5rem; font-size: .97rem; }
  .article-body { font-size: 1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .site-header, .topbar, .site-footer, .to-top, .cta-band { display: none !important; }
  body { color: #000; }
}