/* ═══════════════════════════════════════════════════════════════
   HBM v2 — Inner Page Styles
   Extends style.css for all non-homepage pages.
   Uses same design tokens from variables.css.
═══════════════════════════════════════════════════════════════ */

/* ─── Section-Header section: keep top padding, drop bottom (next widget supplies its own padding-top) */
.section.section--header-only { padding-bottom: 0; }
/* When an Elementor container holds a section-header widget, drop top padding on sections in the next container */
.elementor-element.e-con:has(> .e-con-inner > .elementor-widget-hbm-section-header) + .elementor-element.e-con section.section,
.elementor-element.e-con:has(> .elementor-widget-hbm-section-header) + .elementor-element.e-con section.section {
  padding-top: 0;
}

/* ─── Elementor Override Shield ───────────────────────────────
   Elementor's frontend.min.css sets `.elementor img { border-radius: 0px }`
   and `.elementor-column { min-height: 1px }` which break our designs.
   These rules use !important to guarantee our theme styles win.
─────────────────────────────────────────────────────────────── */

/* Images that need border-radius preserved */
.elementor img.team-card__photo {
  border-radius: 50% !important;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover !important;
}
.elementor img.intro-block__image,
.elementor .intro-block__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .founder-block__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .case-card__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .case-card__device img {
  border-radius: var(--r-lg) !important;
}
.elementor .city-info__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .problem-visual img {
  border-radius: var(--r-xl) !important;
  object-fit: cover !important;
}
.elementor .vision-grid__image img {
  border-radius: var(--r-xl) !important;
  object-fit: cover !important;
}
.elementor .location-hero__image img,
.elementor .location-intro__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .blog-card__image img,
.elementor .blog-featured__image img {
  border-radius: var(--r-lg) !important;
  object-fit: cover !important;
}
.elementor .ebook-cover img {
  border-radius: var(--r-lg) !important;
}
.elementor .device-frame img {
  border-radius: var(--r-lg) !important;
}
.elementor .review-card__avatar img {
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Elementor header wrapper zero-height (prevents 1px gap) */
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-widget-wrap {
  min-height: 0 !important;
  height: 0 !important;
}

/* Elementor container zero-padding (widgets handle their own padding) */
.elementor-widget-wrap > .elementor-element > .elementor-widget-container {
  padding: 0 !important;
}

/* SVG icon preserves — prevent Elementor from filling outlined SVGs */
svg[fill="none"] { fill: none !important; }
svg[fill="none"] path[stroke] { fill: none !important; }

/* ─── End Elementor Override Shield ─── */

/* ─── Page Hero (Inner Pages) ─── */
.page-hero {
  background: var(--navy);
  padding: clamp(8rem, 12vw, 12rem) 0 clamp(4rem, 6vw, 6rem);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(5,195,195,0.08) 0%, transparent 70%),
    repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px);
  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.page-hero--center .page-hero__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--s-4);
}

.page-hero__label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.page-hero h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--s-4);
  letter-spacing: -0.03em;
}

.page-hero__desc {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  max-width: 720px;
}

.page-hero--center .page-hero__desc {
  margin: 0 auto;
  max-width: 720px;
}

/* Center hero CTAs and add margin-top */
.page-hero .hero-ctas {
  margin-top: var(--s-8);
  margin-bottom: 0;
}

.page-hero--center .hero-ctas {
  justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  font-size: var(--text-xs);
}

.page-hero--center .breadcrumb {
  justify-content: center;
}

.breadcrumb a {
  color: rgba(255,255,255,0.4);
  transition: color var(--duration-fast) var(--ease-out);
}

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

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

.breadcrumb__current {
  color: rgba(255,255,255,0.7);
}

/* ─── Content Links — visible, interactive, on-brand ─── */
.section p a,
.section li a,
.intro-block__text p a,
.intro-block__text li a,
.faq-body__inner a,
.location-intro__text p a,
.city-info__text p a,
.article-body p a,
.article-body li a,
.content-block p a,
.solution-card p a,
.feature-item p a,
.problem-text a,
.pain-points a,
.card-text a,
.case-study__desc a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(rgba(5,195,195,0.4), rgba(5,195,195,0.4));
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: color 0.18s ease, background-size 0.18s ease, background-image 0.18s ease;
}

.section p a:hover,
.section li a:hover,
.intro-block__text p a:hover,
.intro-block__text li a:hover,
.faq-body__inner a:hover,
.location-intro__text p a:hover,
.city-info__text p a:hover,
.article-body p a:hover,
.article-body li a:hover,
.content-block p a:hover,
.solution-card p a:hover,
.feature-item p a:hover,
.problem-text a:hover,
.pain-points a:hover,
.card-text a:hover,
.case-study__desc a:hover {
  color: #fff;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 100% 100%;
}

/* External links — subtle indicator */
.section p a[target="_blank"]::after,
.article-body p a[target="_blank"]::after {
  content: '\2009\2197';
  font-size: 0.75em;
  opacity: 0.6;
}

/* ─── Bold Keywords — teal highlight, no underline ─── */
.section p strong,
.section li strong,
.intro-block__text p strong,
.intro-block__text li strong,
.faq-body__inner strong,
.location-intro__text p strong,
.city-info__text p strong,
.problem-text strong,
.pain-points strong,
.article-body p strong,
.article-body li strong,
.content-block p strong,
.solution-card p strong,
.feature-item p strong {
  color: var(--navy);
  font-weight: 700;
  background: rgba(5,195,195,0.1);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ─── Section Header (Inner Pages) ─── */
.section-header {
  margin-bottom: var(--s-12);
}

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}

.section-desc {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

.section-header--center .section-desc {
  margin: 0 auto;
}

/* Dark section overrides */
.section--dark {
  background: var(--navy);
}

.section--dark .section-label { color: var(--teal); }
.section--dark h2 { color: var(--white); }
.section--dark .section-desc { color: rgba(255,255,255,0.6); }
.section--dark p { color: rgba(255,255,255,0.7); }

/* ─── Stats Grid — Premium Dark Treatment ─── */
.section--dark .stats-banner__grid {
  gap: var(--s-4);
}
.section--dark .stats-banner__item {
  padding: var(--s-10) var(--s-8);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.025);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.section--dark .stats-banner__item:hover {
  background: rgba(5,195,195,0.04);
  border-color: rgba(5,195,195,0.18);
}
.section--dark .stats-banner__item h3 {
  text-shadow: 0 0 40px rgba(5,195,195,0.45);
}
.section--dark .stats-banner__item p {
  color: rgba(255,255,255,0.45);
}

/* ─── Solution Cards — Premium Dark Treatment ─── */
.section--dark .solution-card {
  background: var(--navy-mid);
  border-color: rgba(5,195,195,0.1);
}
.section--dark .solution-card h3 { color: var(--white); }
.section--dark .solution-card p  { color: rgba(255,255,255,0.5); }
.section--dark .solution-card:hover {
  background: var(--navy-light);
  border-color: rgba(5,195,195,0.28);
  box-shadow: 0 8px 40px rgba(5,195,195,0.07), 0 4px 20px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}
.section--dark .solution-card__icon {
  background: rgba(5,195,195,0.08);
  color: var(--teal);
}

/* ─── Intro Block on Dark Sections ─── */
.section--dark .intro-block__text h2 { color: var(--white); }
.section--dark .intro-block__text p { color: rgba(255,255,255,0.65); }

/* ─── Ghost Button on Dark Hero (page-hero) ─── */
.page-hero .btn-ghost {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.page-hero .btn-ghost:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.12);
}

.section--alt {
  background: var(--off-white);
}

/* ─── Intro Block (2-col with text) ─── */
.intro-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
}

.intro-block.intro-block--no-image {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.intro-block__text h2 {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: var(--s-6);
  letter-spacing: -0.02em;
}

.intro-block__text p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-4);
}

.intro-block__image img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Book cover intro-blocks: cap height so tall portrait covers don't dominate */
.intro-block__image img[src*="builders-pipeline"],
.intro-block__image img[src*="builders-playbook"] {
  max-height: 520px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: transparent;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.45);
}
.intro-block:has(img[src*="builders-pipeline"]) .intro-block__image,
.intro-block:has(img[src*="builders-playbook"]) .intro-block__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Featured Books Strip (3 book covers under the hero) ─── */
.books-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);max-width:1180px;margin:0 auto;padding:var(--s-12) var(--s-6)}
.books-strip__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-4);padding:var(--s-8) var(--s-6);background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:var(--r-lg);box-shadow:0 8px 24px -12px rgba(15,23,42,.12);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.books-strip__card:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 30px 60px -25px rgba(5,195,195,.4),0 12px 30px -15px rgba(15,23,42,.18)}
.books-strip__cover{width:auto;max-width:100%;max-height:340px;height:auto;display:block;border-radius:var(--r-sm);box-shadow:0 24px 50px -20px rgba(15,23,42,.55)}
.books-strip__title{font-size:var(--text-h5);font-weight:800;color:var(--navy,#0f172a);line-height:1.25;margin:var(--s-2) 0 0}
.books-strip__author{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.books-strip__sub{font-size:var(--text-sm);color:#475569;line-height:1.55;margin:0;flex:1}
.books-strip__btn{display:inline-flex;align-items:center;gap:6px;padding:11px 20px;background:transparent;border:1.5px solid var(--teal);color:var(--teal);font-size:var(--text-sm);font-weight:700;border-radius:var(--r-full);text-decoration:none;transition:all .2s ease;margin-top:auto}
.books-strip__btn:hover{background:var(--teal);color:#fff;box-shadow:0 8px 22px -6px rgba(5,195,195,.45)}
.books-strip__btn svg{width:14px;height:14px}
@media (max-width:900px){.books-strip{grid-template-columns:1fr;gap:var(--s-6)}}

@media (max-width: 1024px) {
  .intro-block {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

/* ─── Value Prop Cards (Bento Grid) ─── */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.value-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}

.value-card:hover::before {
  transform: scaleX(1);
}

.value-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.value-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  color: var(--teal);
}

.value-card__icon svg {
  width: 24px;
  height: 24px;
}

.value-card h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* ─── Founder Story Block ─── */
.founder-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-16);
  align-items: center;
}

/* Alternate layout: image on the right, text on the left */
.founder-block--reverse {
  grid-template-columns: 1.2fr 1fr;
}
.founder-block--reverse .founder-block__image { order: 2; }
.founder-block--reverse .founder-block__text { order: 1; }

/* Stacked founders need extra vertical breathing room between them */
#founder-nicholas + * #founder-seth,
#founder-nicholas ~ * .founder-block { margin-top: var(--s-12); }

.founder-block__image img {
  width: 100%;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.founder-block__text blockquote {
  font-size: var(--text-body-lg);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-6);
  padding-left: var(--s-6);
  border-left: 3px solid var(--teal);
}

.founder-block__text cite {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-style: normal;
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-body);
}

.founder-block__text cite::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--teal);
}

@media (max-width: 1024px) {
  .founder-block {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

/* ─── Numbered Features (Differentiators) ─── */
/* ─── Differentiators Interactive Tabs ─── */
.diff-tabs {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.diff-tabs__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.diff-tab {
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: left;
  transition: all 0.25s ease;
  position: relative;
}

.diff-tab:hover {
  border-left-color: rgba(5,195,195,0.4);
  background: var(--teal-subtle);
  transform: translateX(3px);
}

.diff-tab.is-active {
  border-left-color: var(--teal);
  background: var(--teal-subtle);
  box-shadow: 0 4px 20px rgba(5,195,195,0.1);
}

.diff-tab__num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  transition: color 0.25s ease;
  font-variant-numeric: tabular-nums;
}

.diff-tab.is-active .diff-tab__num,
.diff-tab:hover .diff-tab__num {
  color: var(--teal);
}

.diff-tab__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.diff-tab__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.diff-tab__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.diff-tab__arrow {
  color: var(--border);
  transition: color 0.25s ease, transform 0.25s ease;
  flex-shrink: 0;
}

.diff-tab.is-active .diff-tab__arrow {
  color: var(--teal);
  transform: none;
}

/* Right: content panels — grid-stacking keeps all panels in the same cell
   so CSS transitions work (no position switching needed) */
.diff-tabs__content {
  display: grid;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
}

.diff-panel {
  grid-area: 1 / 1;
  padding: var(--s-10);
  opacity: 0;
  pointer-events: none;
}

.diff-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.diff-panel__bg-num {
  position: absolute;
  top: 0;
  right: var(--s-6);
  font-size: 9rem;
  font-weight: 900;
  color: rgba(5,195,195,0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

.diff-panel__icon {
  width: 56px;
  height: 56px;
  background: var(--teal-subtle);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  margin-bottom: var(--s-5);
}

.diff-panel h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-4);
  line-height: 1.25;
}

.diff-panel p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-6);
}

.diff-panel__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--teal-subtle);
  border: 1px solid rgba(5,195,195,0.2);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .diff-tabs {
    grid-template-columns: 1fr;
  }
  .diff-tabs__content {
    min-height: auto;
  }
  .diff-panel {
    padding: var(--s-7);
  }
  .diff-panel__bg-num {
    font-size: 6rem;
  }
}
@media (max-width: 480px) {
  .diff-panel {
    padding: var(--s-5) var(--s-4);
  }
  .diff-panel__bg-num {
    font-size: 4rem;
  }
}

/* ─── Old numbered-features (kept for fallback) ─── */
.numbered-features {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.numbered-feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: start;
}

.numbered-feature__num {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: var(--r-lg);
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--teal);
  flex-shrink: 0;
}

.numbered-feature h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.numbered-feature p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ─── Stats Row ─── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.stat-item {
  text-align: center;
  padding: var(--s-8);
  background: rgba(5,195,195,0.04);
  border: 1px solid rgba(5,195,195,0.1);
  border-radius: var(--r-lg);
}

.stat-item__value {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
  margin-bottom: var(--s-2);
}

.stat-item__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

/* Dark stat row */
.section--dark .stat-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

.section--dark .stat-item__value {
  color: var(--teal);
}

.section--dark .stat-item__label {
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr; }
}

/* ─── Fit / Not Fit Section ─── */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}

.fit-card {
  border-radius: var(--r-lg);
  padding: var(--s-8);
}

.fit-card--yes {
  background: rgba(5,195,195,0.04);
  border: 1px solid rgba(5,195,195,0.15);
}

.fit-card--no {
  background: rgba(245,105,98,0.04);
  border: 1px solid rgba(245,105,98,0.15);
}

.fit-card h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.fit-card--yes h3 { color: var(--teal); }
.fit-card--no h3 { color: #f56962; }

.fit-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.fit-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.fit-card li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.fit-card--yes li svg { color: var(--teal); }
.fit-card--no li svg { color: #f56962; }

@media (max-width: 768px) {
  .fit-grid { grid-template-columns: 1fr; }
}

/* ─── Knowledge Cards (Confirmed / Expected / TBD) ─── */
.knowledge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

.knowledge-card {
  border-radius: var(--r-lg);
  padding: var(--s-8);
}

.knowledge-card--confirmed {
  background: rgba(5,195,195,0.04);
  border: 1px solid rgba(5,195,195,0.15);
}
.knowledge-card--expected {
  background: rgba(59,130,246,0.04);
  border: 1px solid rgba(59,130,246,0.15);
}
.knowledge-card--tbd {
  background: rgba(245,158,11,0.04);
  border: 1px solid rgba(245,158,11,0.15);
}

.knowledge-card h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.knowledge-card--confirmed h3 { color: var(--teal); }
.knowledge-card--expected h3 { color: #3B82F6; }
.knowledge-card--tbd h3 { color: #F59E0B; }

.knowledge-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0;
}

.knowledge-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.knowledge-card li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.knowledge-card--confirmed li svg { color: var(--teal); }
.knowledge-card--expected li svg { color: #3B82F6; }
.knowledge-card--tbd li svg { color: #F59E0B; }

@media (max-width: 1024px) {
  .knowledge-grid { grid-template-columns: 1fr; }
}

/* ─── Team Grid ─── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.team-grid--3,
.team-grid.team-grid--3 {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.team-card {
  text-align: center;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--white);
  transition: all var(--duration-fast) var(--ease-out);
}

.team-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

img.team-card__photo {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto var(--s-4);
  border: 3px solid var(--teal-subtle);
}

.team-card__name {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-1);
}

.team-card__role {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--s-3);
}

.team-card__bio {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid.team-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid.team-grid--3 { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid.team-grid--3 { grid-template-columns: 1fr !important; max-width: 100% !important; }
}

/* ─── Service Cards Grid ─── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.service-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--teal-subtle), rgba(5,195,195,0.12));
  border-radius: var(--r-md);
  margin-bottom: var(--s-5);
  color: var(--teal);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: var(--s-5);
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  transition: gap var(--duration-fast) var(--ease-out);
}

.service-card__link:hover {
  gap: var(--s-3);
}

.service-card__link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .service-grid { grid-template-columns: 1fr; }
}

/* ─── Contact Cards ─── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.contact-card {
  text-align: center;
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
}

.contact-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.contact-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: 50%;
  margin: 0 auto var(--s-4);
  color: var(--teal);
}

.contact-card__icon svg {
  width: 24px;
  height: 24px;
}

.contact-card h3 {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.contact-card p,
.contact-card a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.elementor-button) {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

.contact-card a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.elementor-button):hover {
  color: var(--teal);
}

/* Ensure CTA button inside contact-card always has white text */
.contact-card .btn-primary,
.contact-card .btn-primary:hover,
.contact-card .btn-primary:focus,
.contact-card .btn-primary:visited {
  color: var(--white) !important;
}

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ─── Contact Form ─── */
.contact-form {
  max-width: 640px;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.contact-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-body);
  font-family: var(--font);
  background: var(--white);
  transition: all var(--duration-fast) var(--ease-out);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-subtle);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.form-group {
  margin-bottom: var(--s-5);
}

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

/* ─── Partners Strip (default — used in homepage hero, partners section) ─── */
.partners-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-12);
  flex-wrap: wrap;
}

.partners-strip img {
  height: 40px;
  width: auto;
  transition: all var(--duration-fast) var(--ease-out);
}

/* Override grayscale/opacity for partners-block context (contact form sidebar) */
.partners-block .partners-strip img {
  opacity: 1;
  filter: none;
}

/* ─── Process Steps (Horizontal) ─── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  position: relative;
}

.process-step {
  text-align: center;
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border);
  position: relative;
}

.process-step__num {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--white);
  font-weight: 800;
  font-size: var(--text-body-lg);
  border-radius: 50%;
  margin: 0 auto var(--s-5);
}

.process-step h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}

.process-step p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .process-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .process-steps { grid-template-columns: 1fr !important; }
}

/* ─── Guarantee Banner ─── */
.guarantee-banner {
  background: linear-gradient(135deg, var(--teal-subtle), rgba(212,168,83,0.06));
  border: 1px solid rgba(5,195,195,0.15);
  border-radius: var(--r-xl);
  padding: var(--s-8) var(--s-10);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.guarantee-banner__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--white);
}

.guarantee-banner__icon svg {
  width: 28px;
  height: 28px;
}

.guarantee-banner h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.guarantee-banner p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

@media (max-width: 600px) {
  .guarantee-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--s-6);
  }
}

/* ─── FAQ (Inner Page — Full Width) ─── */
.faq-categories {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
  flex-wrap: wrap;
}

.faq-cat-btn {
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--off-white);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.faq-cat-btn.is-active,
.faq-cat-btn:hover {
  background: var(--teal);
  color: var(--white);
  border-color: var(--teal);
}

/* ─── Package Cards ─── */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  align-items: start;
}

.package-card {
  border-radius: var(--r-xl);
  padding: var(--s-8);
  background: var(--white);
  border: 2px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}

.package-card--featured {
  border-color: var(--teal);
  box-shadow: var(--shadow-lg);
}

.package-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--teal);
  color: var(--white);
  padding: var(--s-1) var(--s-5);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.package-card__name {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.package-card__price {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--teal);
  margin-bottom: var(--s-2);
}

.package-card__price span {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.package-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}

.package-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-8);
}

.package-card__features li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.package-card__features li svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex-shrink: 0;
}

.package-card__tagline {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.package-card__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--teal), #04D4D4);
  color: var(--white);
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--s-3);
}

/* Remove the ::before "Most Popular" since we now use .package-card__badge */
.package-card--featured::before {
  display: none;
}

@media (max-width: 1024px) {
  .package-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .package-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ─── Add-on Cards ─── */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

.addon-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  transition: all var(--duration-fast) var(--ease-out);
}

.addon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--teal);
}

.addon-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: rgba(5, 195, 195, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-4);
}

.addon-card__icon svg {
  width: 22px;
  height: 22px;
  color: var(--teal);
}

.addon-card__title {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.addon-card__price {
  font-size: var(--text-h4);
  font-weight: 800;
  color: var(--teal);
  margin-bottom: var(--s-3);
}

.addon-card__price span {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.addon-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .addon-grid { grid-template-columns: 1fr; }
}

/* ─── Case Study Cards ─── */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
}

.case-card {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  transition: all var(--duration-fast) var(--ease-out);
}

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

.case-card__image {
  height: 240px;
  overflow: hidden;
}

.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.case-card:hover .case-card__image img {
  transform: scale(1.06);
}

.case-card__body {
  padding: var(--s-6);
}

.case-card__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--s-2);
}

.case-card h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}

.case-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--s-4);
}

.case-card__metrics {
  display: flex;
  gap: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.case-card__metric {
  text-align: center;
}

.case-card__metric-value {
  font-size: var(--text-h4);
  font-weight: 800;
  color: var(--teal);
}

.case-card__metric-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .case-grid { grid-template-columns: 1fr; }
}

/* ─── Case Card Dark Variant (Case Studies Overview) ─── */
.case-card--dark {
  background: var(--navy-light, #0d1b2e);
  border-color: rgba(255,255,255,0.06);
}

.case-card--dark h3 {
  color: var(--white);
}

.case-card--dark p {
  color: rgba(255,255,255,0.55);
}

.case-card--dark .case-card__metrics {
  border-color: rgba(255,255,255,0.08);
}

.case-card--dark .case-card__metric-label {
  color: rgba(255,255,255,0.4);
}

.case-card__highlight {
  font-size: var(--text-h3);
  font-weight: 800;
  color: var(--teal);
  margin-bottom: var(--s-2);
  line-height: 1.1;
}

.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  transition: gap var(--duration-fast) var(--ease-out);
}

.case-card__link:hover {
  gap: var(--s-3);
}

.case-card__link svg {
  width: 16px;
  height: 16px;
}

/* ─── Map Embed ─── */
.map-embed {
  border-radius: var(--r-xl);
  overflow: hidden;
  height: 400px;
  border: 1px solid var(--border);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Shared Inner Page CTA (same as homepage) ─── */
/* Already defined in style.css as .cta-v2 */

/* CTA inside intro-block (matches static inline style="margin-top:var(--s-5)") */
.intro-block__text .intro-block__cta {
  margin-top: var(--s-5);
}

/* Solution card with image header (used by Library hub, etc.) */
.solution-card--with-image { padding-top: 0; overflow: hidden; }
.solution-card--with-image .solution-card__image {
  margin: calc(var(--s-8) * -1) calc(var(--s-8) * -1) var(--s-6);
  height: 200px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.solution-card--with-image .solution-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Buttons (Inner Page Variants) ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy);
  background: var(--teal);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-primary:hover {
  background: var(--white);
  box-shadow: var(--shadow-teal);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  transition: all var(--duration-fast) var(--ease-out);
}

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

/* ─── Location Page ─── */
.location-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

@media (max-width: 1024px) {
  .location-services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .location-services { grid-template-columns: 1fr; }
}

/* ─── Location Page — Extended ─── */
.location-hero { text-align: left; }
.location-hero .page-hero__content { max-width: 680px; }
.location-hero .hero-ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }

.location-intro { padding: var(--section-y) 0; }
.location-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.location-intro__text p + p { margin-top: var(--s-4); }

@media (max-width: 768px) {
  .location-intro__grid { grid-template-columns: 1fr; }
}

.location-service-card {
  padding: var(--s-6);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all var(--duration-fast) var(--ease-out);
}
.location-service-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.location-service-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-light);
  border-radius: var(--r-md);
  color: var(--teal);
  margin-bottom: var(--s-4);
}
.location-service-card__icon svg { width: 24px; height: 24px; }
.location-service-card h3 {
  font-size: var(--text-body-lg);
  margin-bottom: var(--s-2);
}
.location-service-card p { color: var(--text-secondary); font-size: var(--text-small); }

.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.area-tag {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-small);
  font-weight: 500;
  transition: all var(--duration-fast) var(--ease-out);
}
.area-tag:hover { border-color: var(--teal); color: var(--teal); }
.area-tag svg { width: 14px; height: 14px; color: var(--teal); flex-shrink: 0; }

@media (max-width: 1024px) {
  .areas-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
}

.contact-strip {
  background: var(--navy);
  padding: var(--s-12) 0;
}
.contact-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.contact-strip__item {
  text-align: center;
  color: var(--white);
}
.contact-strip__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  color: var(--teal);
  margin: 0 auto var(--s-3);
}
.contact-strip__icon svg { width: 20px; height: 20px; fill: currentColor; }
.contact-strip__icon svg path { fill: currentColor; }
.contact-strip__item h4 { font-size: var(--text-small); color: rgba(255,255,255,0.5); margin-bottom: var(--s-1); }
.contact-strip__item p { font-weight: 600; }
.contact-strip__item a { color: var(--white); }
.contact-strip__item a:hover { color: var(--teal); }

@media (max-width: 768px) {
  .contact-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}
@media (max-width: 600px) {
  .contact-strip__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

.city-info {
  padding: var(--section-y) 0;
}
.city-info__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}
.city-info__image {
  border-radius: var(--r-xl);
  overflow: hidden;
}
.city-info__image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.city-info__text h2 { margin-bottom: var(--s-4); }
.city-info__text p + p { margin-top: var(--s-4); }
.attractions-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-6);
  margin-top: var(--s-5);
  list-style: none;
}
.attractions-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.attractions-list li svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }

@media (max-width: 768px) {
  .city-info__grid { grid-template-columns: 1fr; }
  .city-info__image img { height: 280px; }
  .attractions-list { grid-template-columns: 1fr; }
}

/* ─── Industry Cards (Inner Page) ─── */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.industry-card-inner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  text-align: center;
  transition: all var(--duration-fast) var(--ease-out);
}

.industry-card-inner:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.industry-card-inner__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: var(--r-lg);
  margin: 0 auto var(--s-5);
  color: var(--teal);
}

.industry-card-inner__icon svg {
  width: 28px;
  height: 28px;
}

.industry-card-inner h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}

.industry-card-inner p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--s-5);
}

@media (max-width: 1024px) {
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .industry-grid { grid-template-columns: 1fr; }
}

/* ─── Contact Form Layout ─── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
}

@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ─── Comparison Table ─── */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.comparison-table col:first-child { width: 25%; }
.comparison-table col:nth-child(2) { width: 25%; }
.comparison-table col:nth-child(3) { width: 25%; }
.comparison-table col:nth-child(4) { width: 25%; }
.comparison-table th,
.comparison-table td {
  padding: var(--s-5) var(--s-6);
}
.comparison-table thead th {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-body);
  vertical-align: bottom;
  padding-bottom: var(--s-5);
  border-bottom: 3px solid var(--teal);
  background: var(--off-white);
}
.comparison-table thead th:first-child {
  text-align: left;
}
.comparison-table thead th:not(:first-child) {
  text-align: center;
}
.comparison-table tbody td {
  border-bottom: 1px solid var(--border);
}
.comparison-table tbody td:first-child {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 500;
}
.comparison-table tbody td:not(:first-child) {
  text-align: center;
}
.comparison-table .col-featured {
  background: rgba(5,195,195,0.04);
}
.comparison-table .check {
  color: var(--teal);
}
.comparison-table .check svg {
  display: inline-block;
  vertical-align: middle;
}
.comparison-table .dash {
  color: var(--text-muted);
}
.comparison-table .text-featured {
  color: var(--teal);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Service Detail Pages
═══════════════════════════════════════════════════════════════ */

/* ─── Service Hero (reuses page-hero with larger layout) ─── */
.service-hero { text-align: left; }
.service-hero .page-hero__content { max-width: 680px; }
.service-hero .page-hero__desc { max-width: 580px; }
.service-hero .hero-ctas {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

/* ─── Problem Section (dark navy + texture) ─── */
.problem-section {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-y) 0;
  position: relative;
}

.problem-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-12);
  align-items: center;
}

.problem-grid__text h2,
.problem-content h2 {
  color: var(--white);
  font-size: var(--text-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
}
.problem-grid__text p,
.problem-content p {
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
}
.problem-content .section-label,
.problem-grid__text .section-label {
  color: var(--teal);
}
.problem-lead {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.78) !important;
  margin-bottom: var(--s-6);
}
.problem-closer {
  margin-top: var(--s-6);
  font-size: var(--text-body-lg);
  color: var(--white) !important;
}
.problem-closer strong {
  color: var(--white);
  background: linear-gradient(180deg, transparent 60%, rgba(5,195,195,0.25) 60%);
  padding: 1px 4px;
}
/* Ensure pain-points inside the text column don't expand it */
.problem-content .pain-points,
.problem-grid__text .pain-points {
  margin: var(--s-6) 0;
}

/* Image column — matches static .problem-visual */
.problem-grid__image,
.problem-visual {
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.problem-grid__image img,
.problem-visual img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}
@media (max-width: 1024px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-grid__image img,
  .problem-visual img { height: 300px; }
}

.pain-points,
.problem-grid__points {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.pain-point {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-8);
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-xl);
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.pain-point:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(5,195,195,0.2);
  transform: translateX(4px);
}

.pain-point__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,83,0.15);
  border-radius: var(--r-md);
  color: var(--gold);
  flex-shrink: 0;
}

.pain-point__icon svg { width: 20px; height: 20px; }

.pain-point h3,
.pain-point h4 {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s-1);
}

.pain-point p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}

/* Pain point number badge */
.pain-point__number {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,83,0.15);
  border-radius: var(--r-md);
  color: var(--gold);
  font-weight: 800;
  font-size: var(--text-xs);
}

@media (max-width: 768px) {
  .problem-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ─── Mobile Overflow Fixes — Bare Inline Grids & Tables ─── */

/* Fix inline repeat(3,1fr) grids (blog related posts, resource grids, etc.) */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Fix tables in blog/article content */
.article-body table,
.legal-content table,
.section table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Comparison table scroll handled by .comparison-wrap, not the table itself */

/* ─── Solution / Features Bento ─── */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 1024px) {
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .solution-grid { grid-template-columns: 1fr; }
}

.solution-card {
  padding: var(--s-8);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.solution-card:hover::before { transform: scaleX(1); }

.solution-card:hover {
  border-color: rgba(5,195,195,0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

.solution-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: var(--r-lg);
  color: var(--teal);
  margin-bottom: var(--s-5);
}

.solution-card__icon svg { width: 24px; height: 24px; }

.solution-card h3 {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}

.solution-card p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Modifier: 4-column layout — for sections with 4 or 8 cards (cleaner grid than 3-col) */
.solution-grid--4col { grid-template-columns: repeat(4, 1fr); }
/* Modifier: 2-column layout — for sections with 2 or 4 cards if a wider card is desired */
.solution-grid--2col { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1024px) {
  .solution-grid,
  .solution-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .solution-grid,
  .solution-grid--4col,
  .solution-grid--2col { grid-template-columns: 1fr; }
}

/* ─── Checklist (replaces checkmark lists) ─── */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-8);
}

.check-item {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.check-item svg {
  width: 20px;
  height: 20px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .check-grid { grid-template-columns: 1fr; }
}

/* ─── Why Choose Section (alternating layout) ─── */
.why-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
}

.why-block--reverse { direction: rtl; }
.why-block--reverse > * { direction: ltr; }

.why-block__content h2 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--s-5);
}

.why-block__content p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-4);
}

.why-block__image img {
  width: 100%;
  border-radius: var(--r-xl);
  object-fit: cover;
}

@media (max-width: 768px) {
  .why-block, .why-block--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* ─── FAQ Accordion (service pages) ─── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.faq-item.is-open {
  border-color: rgba(5,195,195,0.2);
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-5) var(--s-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  gap: var(--s-4);
}

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

.faq-trigger__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-subtle);
  border-radius: 50%;
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-trigger__icon { transform: rotate(45deg); }

.faq-trigger__icon svg { width: 14px; height: 14px; }

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-body__inner {
  padding: 0 var(--s-6) var(--s-6);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ─── Stats Banner (inline stats row on service pages) ─── */
.stats-banner {
  background: var(--navy);
  padding: var(--s-12) 0;
}

.stats-banner__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  text-align: center;
}

.stats-banner__item h3 {
  font-size: var(--text-h2);
  font-weight: 800;
  color: var(--teal);
  margin-bottom: var(--s-2);
}

.stats-banner__item p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

@media (max-width: 768px) {
  .stats-banner__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); }
}
@media (max-width: 480px) {
  .stats-banner__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════
   LEGAL / POLICY PAGES — Premium Layout
═══════════════════════════════════ */
.legal-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-16);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

/* Sticky sidebar TOC */
.legal-toc {
  position: sticky;
  top: 100px;
  padding: var(--s-6);
  background: var(--off-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.legal-toc__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: var(--s-4);
}
.legal-toc a {
  display: block;
  padding: var(--s-2) 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  padding-left: var(--s-4);
  transition: all 0.2s ease;
  text-decoration: none;
}
.legal-toc a:hover,
.legal-toc a.is-active {
  color: var(--teal);
  border-left-color: var(--teal);
}

/* Content area */
.legal-content {
  max-width: 800px;
}
.legal-content .legal-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--off-white);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-full);
  margin-bottom: var(--s-10);
}
.legal-content h2 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
  scroll-margin-top: 100px;
}
.legal-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal-content p {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-5);
}
.legal-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--s-6);
}
.legal-content ul li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--s-2);
}
.legal-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
}
.legal-content ul li strong {
  color: var(--text-primary);
  font-weight: 600;
}
.legal-content a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.legal-content a:hover {
  color: var(--teal-hover);
}

/* Cross-links at bottom */
.legal-crosslinks {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
}
.legal-crosslink {
  flex: 1;
  padding: var(--s-6);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: all 0.2s ease;
}
.legal-crosslink:hover {
  border-color: rgba(5,195,195,0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
.legal-crosslink__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: var(--s-2);
}
.legal-crosslink__name {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--s-8); }
  .legal-toc { position: static; }
  .legal-crosslinks { flex-direction: column; }
}

/* ═══════════════════════════════════
   PREMIUM CASE STUDY COMPONENTS
═══════════════════════════════════ */

/* ─── Device Frame (browser mockup for screenshots/iframes) ─── */
.device-frame {
  background: var(--navy);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(5,195,195,0.1);
  transition: box-shadow 0.3s ease;
}
.device-frame:hover {
  box-shadow: 0 12px 48px rgba(5,195,195,0.08);
}
.device-frame__bar {
  height: 32px;
  background: var(--navy-mid);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 8px;
}
.device-frame__dots {
  display: flex;
  gap: 5px;
}
.device-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.device-frame__dot--red { background: #ff5f57; }
.device-frame__dot--yellow { background: #ffbd2e; }
.device-frame__dot--green { background: #28c840; }
.device-frame__url {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  padding: 4px 12px;
  border-radius: 6px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-frame__body {
  position: relative;
  overflow: hidden;
}
.device-frame__body iframe {
  width: 100%;
  border: none;
  display: block;
}
.device-frame__body img {
  width: 100%;
  display: block;
}

/* ─── Analytics Frame (for Search Console / GA screenshots) ─── */
.analytics-frame {
  background: var(--navy-mid);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(5,195,195,0.1);
  transition: all 0.3s ease;
}
.analytics-frame:hover {
  box-shadow: 0 8px 40px rgba(5,195,195,0.1);
  border-color: rgba(5,195,195,0.2);
}
.analytics-frame__bar {
  background: var(--navy);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.analytics-frame__caption {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--s-3);
}

/* ─── Case Study Strategy Grid Override (2 columns) ─── */
.results-dashboard ~ .section .value-grid,
.section--dark + .section .value-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .results-dashboard ~ .section .value-grid,
  .section--dark + .section .value-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Results Dashboard Section ─── */
.results-dashboard {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.results-dashboard .container {
  position: relative;
  z-index: 1;
}
.results-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(5,195,195,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,195,195,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.results-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-12);
}
.results-stat {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-lg);
  transition: all 0.3s ease;
}
.results-stat:hover {
  background: rgba(5,195,195,0.04);
  border-color: rgba(5,195,195,0.18);
}
.results-stat__value {
  font-size: var(--text-h2);
  font-weight: 900;
  color: var(--teal);
  line-height: 1;
  margin-bottom: var(--s-2);
  text-shadow: 0 0 40px rgba(5,195,195,0.4);
}
.results-stat__label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.results-screenshots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}

@media (max-width: 768px) {
  .results-stats { grid-template-columns: repeat(2, 1fr); }
  .results-screenshots { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .results-stats { grid-template-columns: 1fr; }
}

/* ─── Live Website Preview ─── */
.live-preview {
  max-width: 100%;
  margin: 0 auto;
}
.live-preview .device-frame__body iframe {
  height: 700px;
}
.live-preview__actions {
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

@media (max-width: 768px) {
  .live-preview .device-frame__body iframe { height: 400px; }
}

/* ─── Before/After Comparison ─── */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}
.before-after__card {
  padding: var(--s-8);
  border-radius: var(--r-lg);
  text-align: center;
}
.before-after__card--before {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.before-after__card--after {
  background: rgba(5,195,195,0.06);
  border: 1px solid rgba(5,195,195,0.15);
}
.before-after__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-5);
}
.before-after__card--before .before-after__label { color: rgba(255,255,255,0.4); }
.before-after__card--after .before-after__label { color: var(--teal); }
.before-after__metric {
  font-size: var(--text-h3);
  font-weight: 800;
  margin-bottom: var(--s-2);
}
.before-after__card--before .before-after__metric { color: rgba(255,255,255,0.6); }
.before-after__card--after .before-after__metric { color: var(--teal); }
.before-after__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
  .before-after { grid-template-columns: 1fr; }
}

/* ─── Mobile Phone Frame (iPhone-style) ─── */
.phone-frame {
  width: 260px;
  margin: 0 auto;
  background: #111;
  border-radius: 40px;
  padding: 10px;
  border: 2px solid #333;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.phone-frame__notch {
  width: 90px;
  height: 24px;
  background: #111;
  border-radius: 0 0 16px 16px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-frame__notch::after {
  content: '';
  width: 40px;
  height: 4px;
  background: #222;
  border-radius: 4px;
}
.phone-frame__screen {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.phone-frame__screen-wrap {
  width: 240px;
  height: 520px;
  overflow: hidden;
  position: relative;
}
.phone-frame__screen-wrap iframe {
  width: 375px;
  height: 812px;
  border: none;
  transform: scale(0.64);
  transform-origin: top left;
  display: block;
}
.phone-frame__url {
  text-align: center;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  padding: 8px 0 2px;
  letter-spacing: 0.03em;
}
/* Home bar */
.phone-frame__homebar {
  width: 80px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  margin: 6px auto 2px;
}

/* ─── Case Study Card (updated with device frame) ─── */
.case-card__device {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.case-card__device-bar {
  height: 24px;
  background: #0a0e1a;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
}
.case-card__device-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.case-card__device iframe,
.case-card__device img {
  width: 100%;
  height: 220px;
  border: none;
  pointer-events: none;
  object-fit: cover;
  object-position: top;
}
.case-card:hover .case-card__device iframe,
.case-card:hover .case-card__device img {
  filter: brightness(1.05);
}

/* ═══════════════════════════════════════
   PACKAGES PAGE — Pricing cards, tooltips, comparison grid
═══════════════════════════════════════ */
    /* ── Toggle ── */
    .pricing-toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);margin-bottom:var(--s-10)}
    .pricing-toggle{display:inline-flex;align-items:center;gap:var(--s-3);background:var(--navy-mid);border-radius:var(--r-full);padding:5px;position:relative}
    .pricing-toggle__label{font-size:var(--text-sm);font-weight:600;color:var(--text-muted);padding:var(--s-2) var(--s-5);border-radius:var(--r-full);cursor:pointer;transition:color .3s ease,background .3s ease;user-select:none;position:relative;z-index:1}
    .pricing-toggle__label.is-active{color:var(--white)}
    .pricing-toggle__slider{position:absolute;top:5px;left:5px;height:calc(100% - 10px);width:calc(50% - 5px);background:var(--teal);border-radius:var(--r-full);transition:transform .35s var(--ease-out);z-index:0}
    .pricing-toggle[data-billing="monthly"] .pricing-toggle__slider{transform:translateX(100%)}
    .pricing-toggle__save{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:700;color:var(--teal);background:var(--teal-subtle);padding:3px 10px;border-radius:var(--r-full);opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
    .pricing-toggle[data-billing="monthly"] ~ .pricing-toggle__save{opacity:1;transform:translateY(0)}
    .pricing-usd{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:.02em}

    /* ── Card Grid ── */
    .pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);align-items:stretch;margin-bottom:var(--s-6)}
    .pkg-card{display:flex;flex-direction:column}
    .pkg-features{flex:1}
    .pkg-card__cta{margin-top:auto}
    @media(max-width:1024px){.pkg-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}

    /* ── Card Base ── */
    .pkg-card{background:var(--navy-mid);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:var(--s-8) var(--s-6) var(--s-6);position:relative;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
    .pkg-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

    /* ── Featured Card (Growth) ── */
    .pkg-card--featured{border-color:var(--teal);box-shadow:0 0 40px rgba(5,195,195,.12),0 0 80px rgba(5,195,195,.06);padding-top:calc(var(--s-8) + 12px);z-index:2}
    .pkg-card--featured::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-xl);background:linear-gradient(180deg,var(--teal) 0%,transparent 50%);z-index:-1;opacity:.15}
    @media(min-width:1025px){.pkg-card--featured{transform:scale(1.04)}.pkg-card--featured:hover{transform:scale(1.04) translateY(-4px)}}

    /* ── Most Popular Badge ── */
    .pkg-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--teal);color:var(--white);font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:6px 20px;border-radius:var(--r-full);white-space:nowrap;box-shadow:0 4px 16px rgba(5,195,195,.3)}

    /* ── Card Content ── */
    .pkg-card__audience{font-size:11px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-2);line-height:1.4}
    .pkg-card__name{font-size:var(--text-h4);font-weight:700;color:var(--white);margin-bottom:2px}
    .pkg-card__tagline{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--s-5)}
    .pkg-card__price{display:flex;align-items:baseline;gap:6px;margin-bottom:var(--s-2)}
    .pkg-card__amount{font-size:clamp(2.25rem,3vw,2.75rem);font-weight:800;color:var(--teal);line-height:1;transition:opacity .25s ease,transform .25s ease}
    .pkg-card__amount.is-switching{opacity:0;transform:translateY(8px)}
    .pkg-card__period{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}
    .pkg-card__quote{position:relative;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:var(--text-sm);line-height:1.55;color:rgba(255,255,255,.9);background:rgba(5,195,195,.06);border-left:3px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s-3) var(--s-4);margin:var(--s-4) 0 var(--s-2);quotes:"\201C""\201D"}
    .pkg-card__quote::before{content:open-quote;font-size:1.5em;line-height:0;vertical-align:-0.35em;color:var(--teal);margin-right:.15em}
    .pkg-card__quote::after{content:close-quote;font-size:1.5em;line-height:0;vertical-align:-0.35em;color:var(--teal);margin-left:.1em}
    .pkg-card__divider{height:1px;background:var(--border-light);margin:var(--s-5) 0}
    .pkg-card__compare{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);background:rgba(255,255,255,.04);border:1px dashed var(--border-light);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);margin:0 0 var(--s-5)}
    .pkg-card__compare-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}
    .pkg-card__compare-value{font-size:var(--text-sm);font-weight:800;color:var(--white)}

    /* ── Commitment section grouped (header + cards same bg) ── */
    .commitment-section{background:var(--section-alt-bg,rgba(255,255,255,.02));border-radius:var(--r-lg);padding:var(--s-10) var(--s-6);margin:var(--s-8) auto}
    .commitment-section .section-header{margin-bottom:var(--s-8)}
    .commitment-section .value-card h3 .badge{display:inline-block;margin-left:var(--s-2);padding:3px 10px;background:var(--teal);color:var(--white);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-full);vertical-align:middle}

    /* ── "Everything in X plus:" label ── */
    .pkg-card__includes{font-size:var(--text-xs);font-weight:600;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s-3)}

    /* ── Feature List ── */
    .pkg-features{list-style:none;padding:0;margin:0 0 var(--s-6) 0;display:flex;flex-direction:column;gap:var(--s-3)}
    .pkg-features li{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--text-sm);color:rgba(255,255,255,.8);line-height:1.5}
    .pkg-features li svg.check-icon{flex-shrink:0;width:18px;height:18px;color:var(--teal);margin-top:2px}
    .pkg-features__sep{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-2) 0;padding:0 !important}
    .pkg-features__sep span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);white-space:nowrap}
    .pkg-features__sep::after{content:'';flex:1;height:1px;background:var(--border-light)}

    /* ── Tooltip Trigger (i) ── */
    .pkg-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text-muted);font-size:10px;font-weight:700;font-style:normal;cursor:help;flex-shrink:0;margin-left:auto;transition:background .2s ease,color .2s ease}
    .pkg-tip:hover{background:var(--teal-subtle);color:var(--teal)}

    /* ── Tooltip Popup ── */
    .pkg-tip__popup{position:absolute;bottom:calc(100% + 10px);right:0;width:240px;background:var(--navy);border-left:3px solid var(--teal);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);font-size:var(--text-xs);font-weight:400;color:rgba(255,255,255,.85);line-height:1.55;box-shadow:0 8px 30px rgba(0,0,0,.35);pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;transform:translateY(4px);z-index:50;white-space:normal}
    .pkg-tip:hover .pkg-tip__popup{opacity:1;transform:translateY(0);pointer-events:auto}
    /* First 2 items show tooltip below */
    .pkg-features li:first-child .pkg-tip__popup,
    .pkg-features li:nth-child(2) .pkg-tip__popup{bottom:auto;top:calc(100% + 10px)}
    .pkg-features li:first-child .pkg-tip:hover .pkg-tip__popup,
    .pkg-features li:nth-child(2) .pkg-tip:hover .pkg-tip__popup{transform:translateY(0)}

    /* ── CTA Buttons ── */
    .pkg-card__cta{display:flex;width:100%;justify-content:center;padding:var(--s-4) var(--s-6);border-radius:var(--r-md);font-weight:700;font-size:var(--text-sm);text-decoration:none;transition:all .3s ease}
    .pkg-card__cta--primary{background:var(--teal);color:var(--white)}
    .pkg-card__cta--primary:hover{background:var(--teal-hover);box-shadow:var(--shadow-teal)}
    .pkg-card__cta--ghost{background:transparent;color:var(--white);border:1px solid var(--border-light)}
    .pkg-card__cta--ghost:hover{border-color:var(--teal);color:var(--teal)}

    /* ── Scroll Indicator ── */
    .pricing-scroll-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);margin-top:var(--s-10);text-decoration:none;color:var(--teal);transition:color .2s ease}
    .pricing-scroll-indicator:hover{color:var(--teal-hover)}
    .pricing-scroll-indicator__label{font-size:var(--text-sm);font-weight:600;display:flex;align-items:center;gap:var(--s-2)}
    .pricing-scroll-indicator__arrow{width:40px;height:40px;border:2px solid rgba(5,195,195,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:bounce-arrow 2s ease-in-out infinite}
    .pricing-scroll-indicator:hover .pricing-scroll-indicator__arrow{border-color:var(--teal);background:rgba(5,195,195,.06)}
    @keyframes bounce-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

    /* ── Comparison Grid ── */
    .comparison-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
    .comparison-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;width:100%}
    .comparison-grid .cg-cell{padding:var(--s-4) var(--s-5);font-size:var(--text-sm);color:var(--navy);border-bottom:1px solid var(--border);display:flex;align-items:center}
    .comparison-grid .cg-cell.cg-feature{font-weight:600;color:var(--navy)}
    .comparison-grid .cg-cell.col-featured{background:rgba(5,195,195,.04)}
    .comparison-grid .cg-cell.cg-check{justify-content:center}
    .comparison-grid .cg-cell.cg-check svg{color:var(--teal);flex-shrink:0}
    .comparison-grid .cg-cell.cg-text{justify-content:center;font-weight:600;color:var(--teal)}
    .comparison-grid .cg-cell.cg-dash{justify-content:center}
    .comparison-grid .cg-cell.cg-dash .dash{color:var(--text-muted);font-size:var(--text-body-lg)}
    .comparison-grid .cg-header{padding:var(--s-5) var(--s-5);font-size:var(--text-sm);font-weight:700;color:var(--navy);background:var(--off-white);border-bottom:3px solid var(--teal);display:flex;flex-direction:column;justify-content:center}
    .comparison-grid .cg-header.col-featured{color:var(--teal)}
    .comparison-grid .cg-header .cg-price{font-size:var(--text-xs);font-weight:500;color:var(--text-muted);margin-top:2px}
    .comparison-grid .cg-header.col-featured .cg-price{color:var(--teal)}
    .comparison-grid .cg-row:hover .cg-cell{background:rgba(5,195,195,.02)}
    .comparison-grid .cg-row:hover .cg-cell.col-featured{background:rgba(5,195,195,.07)}
    .comparison-grid .cg-row{display:contents}
    .comparison-grid .cg-row:last-child .cg-cell{border-bottom:none}
    @media(max-width:768px){.comparison-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.comparison-grid{min-width:700px}}

/* ═══════════════════════════════════════
   BLOG + EBOOKS LISTING PAGES
═══════════════════════════════════════ */
/* === blog page styles === */

.blog-listing-wrap { background:transparent; padding:3rem 0 5rem; }
    .blog-filter-bar { display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-bottom:2.5rem; }
    .blog-filter-btn { padding:0.4rem 1.1rem;border-radius:999px;border:1.5px solid #D1D9E0;background:#fff;color:#718096;font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.18s ease;letter-spacing:0.02em; }
    .blog-filter-btn:hover { border-color:var(--teal);color:var(--teal); }
    .blog-filter-btn.is-active { background:var(--teal);border-color:var(--teal);color:#fff; }
    .blog-featured { display:grid;grid-template-columns:1fr 1fr;border-radius:16px;overflow:hidden;margin-bottom:2.5rem;text-decoration:none;color:inherit;background:#fff;border:1px solid #E2E8F0;box-shadow:0 2px 16px rgba(0,0,0,0.06);transition:transform 0.25s ease,box-shadow 0.25s ease; }
    .blog-featured:hover { transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.1); }
    .blog-featured__img-wrap { position:relative;overflow:hidden; }
    .blog-featured__img-wrap img { width:100%;height:100%;min-height:340px;object-fit:cover;display:block;transition:transform 0.5s ease; }
    .blog-featured:hover .blog-featured__img-wrap img { transform:scale(1.04); }
    .blog-featured__badge { position:absolute;top:1rem;left:1rem;background:var(--teal);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px; }
    .blog-featured__body { padding:2.5rem;display:flex;flex-direction:column;justify-content:center; }
    .blog-featured__cat { font-size:11px;font-weight:700;color:var(--teal);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:0.75rem; }
    .blog-featured__meta { display:flex;align-items:center;gap:0.75rem;font-size:13px;color:#718096;margin-bottom:1.25rem; }
    .blog-featured__meta-dot { width:3px;height:3px;border-radius:50%;background:#CBD5E0; }
    .blog-featured__title { font-size:clamp(1.3rem,2vw,1.75rem);font-weight:800;line-height:1.25;color:#1A1F36;margin-bottom:1rem;letter-spacing:-0.02em; }
    .blog-featured__excerpt { color:#4A5568;font-size:1rem;line-height:1.7;margin-bottom:1.75rem; }
    .blog-featured__read-more { display:inline-flex;align-items:center;gap:0.4rem;font-weight:700;font-size:0.9rem;color:var(--teal); }
    .blog-featured__read-more svg { transition:transform 0.2s; }
    .blog-featured:hover .blog-featured__read-more svg { transform:translateX(4px); }
    .blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
    .blog-card { display:flex;flex-direction:column;background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:transform 0.22s ease,box-shadow 0.22s ease,border-color 0.22s ease; }
    .blog-card:hover { transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,0.1);border-color:rgba(5,195,195,0.3); }
    .blog-card__img-wrap { position:relative;overflow:hidden; }
    .blog-card__img-wrap img { width:100%;height:200px;object-fit:cover;display:block;transition:transform 0.5s ease; }
    .blog-card:hover .blog-card__img-wrap img { transform:scale(1.06); }
    .blog-card__cat { position:absolute;bottom:0.75rem;left:0.75rem;background:var(--teal);color:#fff;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 10px;border-radius:999px; }
    .blog-card__body { padding:1.25rem 1.25rem 1rem;display:flex;flex-direction:column;flex:1; }
    .blog-card__meta { display:flex;align-items:center;gap:0.5rem;font-size:12px;color:#718096;margin-bottom:0.75rem; }
    .blog-card__meta-dot { width:3px;height:3px;border-radius:50%;background:#CBD5E0; }
    .blog-card__title { font-size:1rem;font-weight:700;line-height:1.35;color:#1A1F36;margin-bottom:0.5rem;flex:1; }
    .blog-card__excerpt { font-size:0.875rem;color:#4A5568;line-height:1.65;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
    .blog-card__footer { display:flex;align-items:center;justify-content:space-between;padding-top:0.75rem;border-top:1px solid #EDF2F7; }
    .blog-card__author { display:flex;align-items:center;gap:0.4rem;font-size:12px;color:#718096; }
    .blog-card__author img { width:22px;height:22px;border-radius:50%;object-fit:cover; }
    .blog-card__read-link { display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--teal); }
    .blog-card__read-link svg { transition:transform 0.2s; }
    .blog-card:hover .blog-card__read-link svg { transform:translateX(3px); }
    .blog-results-info { font-size:13px;color:#718096;margin-bottom:1.5rem; }
    .load-more-wrap { text-align:center;margin-top:2.5rem; }
    .load-more-btn { padding:0.75rem 2.5rem;border-radius:999px;border:1.5px solid #D1D9E0;background:#fff;color:#4A5568;font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;letter-spacing:0.02em; }
    .load-more-btn:hover { border-color:var(--teal);color:var(--teal);box-shadow:0 4px 12px rgba(5,195,195,0.15); }
    .blog-card.is-hidden { display:none !important; }
    @media (max-width:768px) { .blog-featured { grid-template-columns:1fr; } .blog-featured__img-wrap img { min-height:220px; } .blog-grid { grid-template-columns:1fr; } }
    @media (min-width:769px) and (max-width:1023px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }

/* === ebooks page styles === */

/* ── Grid ── */
    .ebook-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-8);
    }
    @media (max-width: 960px)  { .ebook-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 560px)  { .ebook-grid { grid-template-columns: 1fr; } }

    /* ── Card shell ── */
    .ebook-card {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      background: #0D1526;
      border: 1px solid rgba(255,255,255,0.07);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .ebook-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(5,195,195,0.0) 0%, rgba(5,195,195,0.0) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      transition: background 0.3s ease;
      pointer-events: none;
    }
    .ebook-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 32px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(5,195,195,0.2);
      border-color: rgba(5,195,195,0.2);
    }
    .ebook-card:hover::before {
      background: linear-gradient(135deg, rgba(5,195,195,0.35) 0%, transparent 60%);
    }

    /* ── Cover ── */
    .ebook-card__cover {
      position: relative;
      background: radial-gradient(ellipse at 30% 40%, rgba(5,195,195,0.1) 0%, #080E1D 65%);
      padding: 48px 36px 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 340px;
      overflow: hidden;
    }
    .ebook-card__cover::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 60px;
      background: linear-gradient(to bottom, transparent, #0D1526);
    }
    .ebook-card__cover img {
      position: relative;
      z-index: 1;
      max-height: 280px;
      width: auto;
      max-width: 75%;
      object-fit: contain;
      border-radius: 6px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.85), 0 6px 20px rgba(0,0,0,0.55);
      transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    .ebook-card:hover .ebook-card__cover img {
      transform: scale(1.07) rotate(-2deg) translateY(-4px);
    }

    /* ── Badge ── */
    .ebook-card__badge {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 2;
      background: var(--teal);
      color: #0B1120;
      font-size: 0.6rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 999px;
    }

    /* ── Body ── */
    .ebook-card__body {
      padding: 28px 28px 28px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: #0D1526;
      border-top: 1px solid rgba(255,255,255,0.06);
    }

    .ebook-card__category {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
    }

    .ebook-card__title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #FFFFFF;
      line-height: 1.4;
      margin: 0;
    }

    .ebook-card__desc {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.65;
      flex: 1;
      margin: 0;
    }

    /* ── Button ── */
    .ebook-card__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      margin-top: 8px;
      background: rgba(5,195,195,0.08);
      border: 1px solid rgba(5,195,195,0.25);
      border-radius: 999px;
      color: var(--teal);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    }
    .ebook-card:hover .ebook-card__btn {
      background: var(--teal);
      border-color: var(--teal);
      color: #0B1120;
      transform: translateY(-1px);
    }

/* === ebooks page styles === */

.ebook-showcase-track {
        position: relative;
        width: 100%;
        overflow: hidden;
      }
      .ebook-showcase-track::before,
      .ebook-showcase-track::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        width: 120px;
        z-index: 2;
        pointer-events: none;
      }
      .ebook-showcase-track::before {
        left: 0;
        background: linear-gradient(to right, #080E1D, transparent);
      }
      .ebook-showcase-track::after {
        right: 0;
        background: linear-gradient(to left, #080E1D, transparent);
      }
      .ebook-showcase-inner {
        display: flex;
        align-items: center;
        gap: 48px;
        width: max-content;
        animation: ebookScroll 28s linear infinite;
        padding: 0 24px;
      }
      .ebook-showcase-inner img {
        height: 220px;
        width: auto;
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.5);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex-shrink: 0;
      }
      .ebook-showcase-inner img:hover {
        transform: scale(1.06) translateY(-6px);
        box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(5,195,195,0.3);
      }
      @keyframes ebookScroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      @media (max-width: 640px) {
        .ebook-showcase-inner img { height: 160px; }
        .ebook-showcase-inner { gap: 32px; }
      }
/* ════════════════════════════════════════════════════════════
   BLOG SINGLE — full single-post layout (HBM Blog Single widget)
   Mirrors static HTML library-of-resources/blog/{slug}/index.html
   ════════════════════════════════════════════════════════════ */

/* ── Reading Progress Bar ── */
#readProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--teal);
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(5,195,195,0.6);
}

/* ── Post Cover (dark hero) ── */
.post-cover {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: #1A1F36;
}
.post-cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.post-cover__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,16,30,0.3) 0%, rgba(10,16,30,0.85) 100%);
}
.post-cover__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3rem;
}
.post-cover__breadcrumb {
  margin-bottom: 1rem;
}
.post-cover__breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.post-cover__breadcrumb a:hover { color: var(--teal); }
.post-cover__breadcrumb .breadcrumb__sep { margin: 0 .5rem; color: rgba(255,255,255,0.3); }
.post-cover__meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.post-cover__tag {
  background: var(--teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 999px;
}
.post-cover__date { color: rgba(255,255,255,0.5); font-size: 13px; }
.post-cover__title {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 750px;
  margin: 0;
}

/* ── Blog Layout (article + sidebar grid) ── */
.blog-single-section { padding-top: var(--s-10); padding-bottom: var(--s-12); }
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--s-12);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: none; }
}
.blog-main { min-width: 0; }

/* ── Article Body Typography ── */
.article-body { min-width: 0; }
.article-body h2 {
  font-size: var(--text-h3);
  font-weight: 800;
  color: #1A1F36;
  margin-top: var(--s-12);
  margin-bottom: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid #E8ECF0;
  scroll-margin-top: 100px;
}
.article-body h3 {
  font-size: var(--text-h4);
  font-weight: 700;
  color: #1A1F36;
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  scroll-margin-top: 100px;
}
.article-body p {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #4A5568;
  margin-bottom: var(--s-5);
}
.article-body ul,
.article-body ol {
  margin-bottom: var(--s-5);
  padding-left: var(--s-7);
}
.article-body li {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #4A5568;
  margin-bottom: var(--s-2);
}
.article-body ul li::marker { color: var(--teal); }
.article-body ol li::marker { color: var(--teal); font-weight: 700; }

.article-body p a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.cta-v2__btn),
.article-body li a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.cta-v2__btn) {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(rgba(5,195,195,0.4), rgba(5,195,195,0.4));
  background-size: 100% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: color 0.18s ease, background-size 0.18s ease, background-image 0.18s ease;
}
.article-body p a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.cta-v2__btn):hover,
.article-body li a:not(.btn-primary):not(.btn-ghost):not(.btn-secondary):not(.cta-v2__btn):hover {
  color: var(--white);
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 100% 100%;
}

/* Buttons inside article body keep their own styling — no underline gradient, visible text */
.article-body .btn-primary,
.article-body .btn-ghost,
.article-body .btn-secondary,
.article-body .cta-v2__btn,
.article-cta .btn-primary,
.article-cta .btn-ghost,
.article-cta .cta-v2__btn {
  background-image: none !important;
  background-size: auto !important;
  padding-bottom: var(--s-4);
  text-decoration: none;
}
.article-body .btn-primary,
.article-body .cta-v2__btn { color: var(--navy) !important; background: var(--teal) !important; padding: var(--s-4) var(--s-8); display: inline-flex; align-items: center; gap: var(--s-2); border-radius: var(--r-full); font-weight: 700; }
.article-body .btn-ghost   { color: var(--navy) !important; }

.article-body p strong,
.article-body li strong {
  color: #1A1F36;
  font-weight: 700;
  background: rgba(5,195,195,0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Article Meta strip ── */
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding: var(--s-5) 0 var(--s-6);
  border-bottom: 1px solid #E2E8F0;
  margin-bottom: var(--s-8);
  font-size: var(--text-body-sm);
  color: #718096;
}
.article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.article-meta__author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--teal);
}
.article-meta__author span { color: #1A1F36; font-weight: 600; }
.article-meta__author-text { display: flex; flex-direction: column; line-height: 1.2; }
.article-meta__author-name { color: #1A1F36; font-weight: 700; font-size: 0.95rem; }
.article-meta__author-role { color: var(--teal); font-weight: 600; font-size: 0.78rem; margin-top: 2px; }
.article-meta__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(5,195,195,0.12);
  color: var(--teal);
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Featured Image ── */
.article-featured-img {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  height: auto;
  margin-bottom: var(--s-10);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* ── Mid-article CTA box ── */
.article-cta {
  background: linear-gradient(135deg, rgba(5,195,195,0.08) 0%, rgba(5,195,195,0.03) 100%);
  border: 1px solid rgba(5,195,195,0.2);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-8);
  margin: var(--s-10) 0;
}
.article-cta h3 {
  font-size: var(--text-h4);
  color: #1A1F36;
  margin-bottom: var(--s-3);
}
.article-cta p { color: #4A5568; margin-bottom: var(--s-5) !important; }

/* ── Pullquote ── */
.article-pullquote {
  border-left: 3px solid var(--teal);
  padding: var(--s-4) var(--s-8);
  margin: var(--s-8) 0;
  background: rgba(5,195,195,0.06);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article-pullquote p {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: #2D3748 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ── Author Bio ── */
.article-author {
  display: flex;
  gap: var(--s-6);
  align-items: flex-start;
  background: #F7F9FC;
  border: 1px solid #E2E8F0;
  border-radius: var(--r-xl);
  padding: var(--s-8);
  margin-top: var(--s-12);
}
.article-author img {
  width: 80px;
  height: 80px;
  min-width: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--teal);
}
.article-author__name {
  font-size: var(--text-h4);
  font-weight: 700;
  color: #1A1F36;
  margin-bottom: var(--s-1);
}
.article-author__title {
  font-size: var(--text-body-sm);
  color: var(--teal);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.article-author__bio {
  font-size: var(--text-body-sm);
  color: #718096;
  line-height: 1.7;
  margin: 0 !important;
}
@media (max-width: 600px) { .article-author { flex-direction: column; } }

/* ── Sidebar (TOC + CTA) ── */
.blog-sidebar {
  position: sticky;
  top: 100px;
}
.toc-card {
  background: #F7F9FC;
  border: 1px solid #E2E8F0;
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-7);
  margin-bottom: var(--s-6);
}
.toc-card__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s-4);
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.toc-list li a {
  display: block;
  font-size: 0.875rem;
  color: #4A5568;
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border-left: 2px solid transparent;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  line-height: 1.4;
}
.toc-list li a:hover,
.toc-list li a.is-active {
  color: var(--teal);
  background: rgba(5,195,195,0.06);
  border-left-color: var(--teal);
}
.sidebar-cta {
  background: linear-gradient(135deg, var(--teal) 0%, #038f8f 100%);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  text-align: center;
}
.sidebar-cta__title {
  font-size: var(--text-body-lg);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: var(--s-3);
}
.sidebar-cta__desc {
  font-size: var(--text-body-sm);
  color: rgba(10,16,30,0.75);
  margin-bottom: var(--s-5);
  line-height: 1.5;
}
.sidebar-cta__btn {
  display: block;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}
.sidebar-cta__btn:hover {
  background: rgba(10,16,30,0.85);
  transform: translateY(-1px);
}

/* ── Share Bar (inline below article body) ── */
.article-share {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid #E2E8F0;
  margin-top: var(--s-8);
  flex-wrap: wrap;
}
.article-share__label {
  font-size: var(--text-body-sm);
  color: #718096;
  font-weight: 600;
}
.article-share .share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s;
  border: 1px solid #E2E8F0;
  color: #4A5568;
  background: transparent;
}
.article-share .share-btn:hover {
  color: var(--teal);
  background: #F0FDFC;
  transform: translateY(-1px);
}

/* ── Related Posts ── */
.related-section { padding: var(--s-12) 0 var(--s-10); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }

.related-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.18s, transform 0.18s;
}
.related-card:hover {
  border-color: rgba(5,195,195,0.3);
  transform: translateY(-3px);
}
.related-card__tag {
  display: inline-block;
  padding: 2px 10px;
  background: rgba(5,195,195,0.12);
  color: var(--teal);
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.related-card h3 {
  font-size: var(--text-body-lg);
  font-weight: 700;
  color: #1A1F36;
  margin-bottom: var(--s-3);
  line-height: 1.4;
}
.related-card p {
  font-size: var(--text-body-sm);
  color: #718096;
  line-height: 1.6;
  margin-bottom: var(--s-4);
}
.related-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal);
}

/* ── Inline images inside post_content ── */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  margin: var(--s-8) 0;
}

/* ════════════════════════════════════════════════════════════
   404 PAGE — construction scene + animations + dark navy bg
   Mirrors static HTML 404/index.html
   ════════════════════════════════════════════════════════════ */
.error-page {
      min-height: 100vh;
      background: var(--navy);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    /* ─── Blueprint Grid Background ─── */
    .error-page::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(5,195,195,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(5,195,195,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 20%, transparent 70%);
      pointer-events: none;
    }
    .error-page::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(5,195,195,0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .error-main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(8rem, 12vw, 12rem) var(--gutter) clamp(4rem, 6vw, 6rem);
      position: relative;
      z-index: 1;
    }

    .error-content {
      text-align: center;
      max-width: 680px;
    }

    /* ─── The Construction Scene ─── */
    .error-scene {
      position: relative;
      width: 320px;
      height: 240px;
      margin: 0 auto var(--s-10);
    }

    /* Crane */
    .crane {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .crane__tower {
      width: 6px;
      height: 140px;
      background: linear-gradient(to bottom, rgba(5,195,195,0.6), rgba(5,195,195,0.2));
      margin: 0 auto;
      border-radius: 3px;
    }
    .crane__arm {
      width: 160px;
      height: 4px;
      background: linear-gradient(to right, rgba(5,195,195,0.15), rgba(5,195,195,0.5), rgba(5,195,195,0.15));
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    .crane__cable {
      width: 2px;
      height: 60px;
      background: rgba(5,195,195,0.25);
      position: absolute;
      top: 4px;
      right: 20px;
      animation: cable-swing 4s ease-in-out infinite;
      transform-origin: top center;
    }
    @keyframes cable-swing {
      0%, 100% { transform: rotate(-5deg); }
      50% { transform: rotate(5deg); }
    }

    /* Dangling 404 block */
    .crane__block {
      width: 48px;
      height: 36px;
      background: var(--teal);
      border-radius: 4px;
      position: absolute;
      bottom: -36px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-weight: 800;
      font-size: 0.75rem;
      color: var(--navy);
      letter-spacing: 1px;
      box-shadow: 0 4px 20px rgba(5,195,195,0.35);
    }

    /* House outline — incomplete */
    .house {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 100px;
    }
    .house__wall {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70px;
      border: 2px dashed rgba(5,195,195,0.2);
      border-top: none;
      border-radius: 0 0 4px 4px;
    }
    .house__wall-fill {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 35px;
      background: rgba(5,195,195,0.04);
      border: 2px solid rgba(5,195,195,0.15);
      border-top: 2px dashed rgba(5,195,195,0.1);
      border-radius: 0 0 4px 4px;
      animation: wall-build 3s ease-in-out infinite;
    }
    @keyframes wall-build {
      0%, 100% { height: 35px; }
      50% { height: 50px; }
    }
    .house__roof {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 80px solid transparent;
      border-right: 80px solid transparent;
      border-bottom: 35px solid transparent;
      filter: drop-shadow(0 0 0 transparent);
    }
    .house__roof-line {
      position: absolute;
      top: 26px;
      left: 50%;
      width: 130px;
      height: 2px;
      transform: translateX(-50%);
      background: repeating-linear-gradient(90deg, rgba(5,195,195,0.25) 0 8px, transparent 8px 16px);
    }
    .house__door {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 40px;
      border: 2px dashed rgba(5,195,195,0.2);
      border-bottom: none;
      border-radius: 12px 12px 0 0;
    }
    .house__window {
      position: absolute;
      bottom: 42px;
      width: 18px;
      height: 18px;
      border: 2px dashed rgba(5,195,195,0.2);
      border-radius: 3px;
    }
    .house__window--l { left: 18px; }
    .house__window--r { right: 18px; }

    /* Floating blueprint pieces */
    .bp-piece {
      position: absolute;
      border: 1px solid rgba(5,195,195,0.12);
      border-radius: 3px;
      background: rgba(5,195,195,0.02);
      animation: float-piece 6s ease-in-out infinite;
    }
    .bp-piece--1 { width: 20px; height: 14px; top: 60px; left: 30px; animation-delay: 0s; }
    .bp-piece--2 { width: 16px; height: 16px; top: 40px; right: 40px; animation-delay: -2s; }
    .bp-piece--3 { width: 24px; height: 10px; bottom: 50px; left: 20px; animation-delay: -4s; }
    .bp-piece--4 { width: 12px; height: 20px; bottom: 80px; right: 25px; animation-delay: -1s; }
    @keyframes float-piece {
      0%, 100% { opacity: 0.4; transform: translateY(0) rotate(0deg); }
      50% { opacity: 0.8; transform: translateY(-10px) rotate(5deg); }
    }

    /* ─── 404 Number ─── */
    .error-number {
      font-size: clamp(5rem, 12vw, 9rem);
      font-weight: 900;
      color: transparent;
      -webkit-text-stroke: 2px rgba(5,195,195,0.15);
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: var(--s-4);
      position: relative;
    }
    .error-number span {
      position: relative;
      display: inline-block;
    }
    .error-number span:nth-child(2) {
      -webkit-text-stroke-color: var(--teal);
      color: var(--teal);
      -webkit-text-stroke: 0;
      text-shadow: 0 0 60px rgba(5,195,195,0.4);
      animation: zero-pulse 3s ease-in-out infinite;
    }
    @keyframes zero-pulse {
      0%, 100% { text-shadow: 0 0 60px rgba(5,195,195,0.4); }
      50% { text-shadow: 0 0 80px rgba(5,195,195,0.6), 0 0 120px rgba(5,195,195,0.2); }
    }

    .error-label {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--teal);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: var(--s-6);
      background: rgba(5,195,195,0.06);
      padding: var(--s-2) var(--s-5);
      border-radius: var(--r-full);
      border: 1px solid rgba(5,195,195,0.15);
    }
    .error-label svg {
      width: 14px;
      height: 14px;
    }

    .error-title {
      font-size: var(--text-h2);
      font-weight: 800;
      color: var(--white);
      line-height: 1.15;
      margin-bottom: var(--s-4);
      letter-spacing: -0.02em;
    }

    .error-desc {
      font-size: var(--text-body-lg);
      color: rgba(255,255,255,0.5);
      line-height: 1.7;
      max-width: 520px;
      margin: 0 auto var(--s-10);
    }

    /* ─── CTA Buttons ─── */
    .error-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-4);
      justify-content: center;
      margin-bottom: var(--s-12);
    }

    /* ─── Quick Links ─── */
    .error-quicklinks {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-3);
      justify-content: center;
    }
    .error-quicklinks a {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.35);
      transition: color 0.2s ease;
      padding: var(--s-2) var(--s-4);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-full);
    }
    .error-quicklinks a:hover {
      color: var(--teal);
      border-color: rgba(5,195,195,0.2);
      background: rgba(5,195,195,0.04);
    }

    /* ─── Hard Hat Emoji Bounce ─── */
    .hardhat {
      display: inline-block;
      animation: hardhat-bounce 2s ease-in-out infinite;
    }
    @keyframes hardhat-bounce {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      25% { transform: translateY(-4px) rotate(-3deg); }
      75% { transform: translateY(-2px) rotate(3deg); }
    }

/* ─── 404 page body overrides — make Theme Builder header sit on navy bg ─── */
body.page-404-page,
body.page-404,
body.error404 {
  background: var(--navy);
}
body.page-404-page .elementor-location-header,
body.page-404 .elementor-location-header,
body.error404 .elementor-location-header {
  background: transparent !important;
  position: relative;
  z-index: 10;
}
body.page-404-page .elementor-location-header .site-header,
body.page-404 .elementor-location-header .site-header,
body.error404 .elementor-location-header .site-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
body.page-404-page .error-page,
body.page-404 .error-page,
body.error404 .error-page {
  min-height: calc(100vh - 80px);
}

/* ════════════════════════════════════════════════════════════
   SCHEDULE — split layout (info panel + calendar embed)
   Used by hbm-schedule-sidebar widget
   ════════════════════════════════════════════════════════════ */
/* ── Light premium split schedule layout ── */

    .schedule-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: calc(100vh - 90px);
    }

    @media (max-width: 960px) {
      .schedule-split { grid-template-columns: 1fr; }
      .schedule-sidebar { padding: var(--s-10) var(--s-6) var(--s-8); }
      .schedule-calendar { padding: var(--s-8) var(--s-6) var(--s-10); }
    }

    /* Left -- info panel (light) */
    .schedule-sidebar {
      padding: var(--s-2) var(--s-8) var(--s-2) 0;
      display: flex;
      flex-direction: column;
      gap: var(--s-8);
    }

    /* Progress indicator (decorative) */
    .schedule-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: var(--s-2);
    }

    .schedule-progress__dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      transition: background 0.3s, transform 0.3s;
    }

    .schedule-progress__dot--active {
      background: var(--teal);
      transform: scale(1.3);
      box-shadow: 0 0 0 4px rgba(5,195,195,0.15);
    }

    .schedule-progress__line {
      width: 28px;
      height: 2px;
      background: #e5e7eb;
      border-radius: 2px;
    }

    .schedule-progress__line--active {
      background: var(--teal);
    }

    .schedule-sidebar__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: var(--s-3);
    }

    .schedule-sidebar__eyebrow::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.6); }
    }

    .schedule-sidebar h1 {
      font-size: clamp(2rem, 3.5vw, 2.8rem);
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin-bottom: var(--s-4);
    }

    .schedule-sidebar__desc {
      font-size: 1.0625rem;
      color: var(--text-secondary);
      line-height: 1.75;
    }

    /* Steps with vertical connector */
    .schedule-steps {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    .schedule-step {
      display: flex;
      align-items: flex-start;
      gap: var(--s-4);
      position: relative;
      padding-bottom: var(--s-5);
    }

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

    /* Vertical teal connector line between step circles */
    .schedule-step:not(:last-child) .schedule-step__num::after {
      content: '';
      position: absolute;
      top: 40px;
      left: 19px;
      width: 2px;
      height: calc(100% - 40px);
      background: linear-gradient(to bottom, var(--teal), rgba(5,195,195,0.15));
      border-radius: 2px;
    }

    .schedule-step__num {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 50%;
      background: var(--teal);
      color: var(--white);
      font-weight: 800;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      box-shadow: 0 2px 8px rgba(5,195,195,0.25);
    }

    .schedule-step__title {
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 2px;
      font-size: 0.95rem;
    }

    .schedule-step__desc {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    /* Trust pills (light) with hover lift */
    .schedule-trust {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-2);
    }

    .trust-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: var(--white);
      border: 1px solid #e5e7eb;
      border-radius: var(--r-full);
      font-size: 0.8rem;
      color: var(--text-primary);
      font-weight: 500;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      cursor: default;
    }

    .trust-pill:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    }

    .trust-pill svg { color: var(--teal); }

    /* Seth card (light) with hover teal glow */
    .schedule-seth {
      display: flex;
      align-items: center;
      gap: var(--s-4);
      padding: var(--s-5) var(--s-6);
      background: var(--off-white);
      border: 1px solid #e5e7eb;
      border-radius: var(--r-xl);
      transition: box-shadow 0.3s ease;
    }

    .schedule-seth:hover {
      box-shadow: 0 0 20px rgba(5,195,195,0.15), 0 4px 16px rgba(0,0,0,0.04);
    }

    .schedule-seth img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--teal);
      flex-shrink: 0;
    }

    .schedule-seth__name {
      font-weight: 700;
      color: var(--text-primary);
      font-size: 0.95rem;
    }

    .schedule-seth__role {
      font-size: 0.78rem;
      color: var(--teal);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .schedule-seth__quote {
      font-size: 0.82rem;
      color: var(--text-secondary);
      font-style: italic;
      line-height: 1.45;
    }

    /* Availability badge with pulsing dot */
    .schedule-availability {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-top: var(--s-2);
    }

    .schedule-availability__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--teal);
      animation: availability-pulse 2s ease-in-out infinite;
      box-shadow: 0 0 0 0 rgba(5,195,195,0.4);
    }

    @keyframes availability-pulse {
      0% { box-shadow: 0 0 0 0 rgba(5,195,195,0.4); }
      50% { box-shadow: 0 0 0 6px rgba(5,195,195,0); }
      100% { box-shadow: 0 0 0 0 rgba(5,195,195,0); }
    }

    .schedule-availability strong {
      color: var(--teal);
      font-weight: 700;
    }

    /* Contact links (light) */
    .schedule-contact {
      display: flex;
      gap: var(--s-4);
      flex-wrap: wrap;
    }

    .schedule-contact a {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: 0.85rem;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.15s;
    }

    .schedule-contact a:hover {
      color: var(--teal);
    }

    /* Right -- calendar panel (light) */
    .schedule-calendar {
      padding: var(--s-2) 0 var(--s-2) var(--s-8);
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--border);
    }

    .schedule-calendar__label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: var(--s-3);
    }

    .schedule-calendar h2 {
      font-size: clamp(1.4rem, 2.5vw, 1.9rem);
      font-weight: 800;
      color: var(--text-primary);
      margin-bottom: var(--s-6);
      letter-spacing: -0.02em;
    }

    .calendar-widget-wrap {
      flex: 1;
      border-radius: var(--r-xl);
      overflow: hidden;
      background: var(--white);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
    }

    .calendar-widget-wrap iframe {
      display: block;
      width: 100%;
      min-height: 680px;
      border: none;
    }

/* ─── Contact card button variant (used on FAQ "Still have questions?" + similar) ─── */
.contact-card--button {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-card--button .contact-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--s-4);
}
.contact-card--button .btn-primary {
  font-size: var(--text-sm);
  padding: var(--s-3) var(--s-6);
}

/* ─── FAQ list responsive ─── */
.faq-categories {
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .faq-categories { gap: var(--s-2); }
  .faq-cat-btn { padding: var(--s-2) var(--s-4); font-size: 0.75rem; }
}

/* ─── Schedule single-column variant (when sidebar hidden, e.g. tickets) ─── */
.schedule-split:not(:has(.schedule-sidebar)) {
  grid-template-columns: 1fr;
  max-width: 700px;
  margin: 0 auto;
}

/* ─── Job List (Careers Open Positions) ─── */
.job-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  background: var(--navy-mid, #0F1730);
  border: 1px solid rgba(5,195,195,0.1);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  transition: all 0.3s ease;
  flex-wrap: wrap;
}
.job-card:hover {
  border-color: rgba(5,195,195,0.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.job-card__body { flex: 1; min-width: 240px; }

.job-card__title {
  color: var(--white);
  font-size: var(--text-h4);
  font-weight: 700;
  margin-bottom: var(--s-2);
}

.job-card__desc {
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: var(--s-3);
}

.job-card__tags {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.job-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-full);
}
.job-tag--primary {
  color: var(--teal);
  background: rgba(5,195,195,0.1);
}
.job-tag--subtle {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}

.job-card__apply {
  white-space: nowrap;
  padding: var(--s-3) var(--s-6);
  font-size: var(--text-sm);
}

.job-list__footer {
  text-align: center;
  margin-top: var(--s-12);
}
.job-list__footer p {
  color: rgba(255,255,255,0.5);
  font-size: var(--text-body-lg);
}
.job-list__footer a {
  color: var(--teal);
}

/* ─── Contact Layout (form + sticky sidebar) ─── */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-10);
  align-items: start;
}
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--s-8); }
}

.contact-layout__form .section-header { text-align: left; margin-bottom: var(--s-6); }

.contact-form-iframe {
  border-radius: var(--r-xl);
  overflow: hidden;
}
.contact-form-iframe iframe {
  width: 100%;
  border: none;
  display: block;
  border-radius: var(--r-xl);
}

.contact-layout__sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
@media (max-width: 960px) {
  .contact-layout__sidebar { position: static; }
}

/* Partners block (in contact form sidebar) */
.partners-block {
  background: var(--white);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  text-align: center;
}
.partners-block__label {
  margin-bottom: var(--s-4);
  justify-content: center;
}
.partners-block__heading {
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--text-primary, #1A1F36);
  margin-bottom: var(--s-3);
}
.partners-block__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary, #4A5568);
  line-height: 1.7;
  margin-bottom: var(--s-6);
}

/* Partners-strip when inside .partners-block (contact form sidebar) — single line */
.partners-block .partners-strip {
  gap: var(--s-6);
  flex-wrap: nowrap;
}
.partners-block .partners-strip img {
  height: 28px;
  max-width: 100%;
  object-fit: contain;
  flex: 0 1 auto;
  min-width: 0;
}
/* GHL logo ships as white-on-transparent; flip it for light-background use */
.partners-block .partners-strip img[alt*="GoHighLevel" i],
.partners-block .partners-strip img[alt*="HighLevel" i],
.partners-block .partners-strip img[src*="ghl-logo" i] {
  filter: invert(1) hue-rotate(180deg);
}
@media (max-width: 480px) {
  .partners-block .partners-strip { gap: var(--s-3); }
  .partners-block .partners-strip img { height: 22px; }
}

/* ─── Map Embed wrapper ─── */
.map-embed {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.map-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH LAYER — v1.2.6
   Adds depth, glow, refined hover states, and visual hierarchy
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Hero — Mesh Gradient Background ─── */
.page-hero {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(5,195,195,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(212,168,83,0.05) 0%, transparent 55%),
    var(--navy);
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(11,17,32,0.4) 100%);
  pointer-events: none;
  z-index: 0;
}
.page-hero__content { z-index: 2; }
.page-hero h1 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
.page-hero__label {
  padding: 6px 14px 6px 12px;
  background: rgba(5,195,195,0.08);
  border: 1px solid rgba(5,195,195,0.18);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ─── 2. Section Eyebrow Labels — Premium Badge ─── */
.section-label,
.intro-block__text .section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(5,195,195,0.06), rgba(5,195,195,0.02));
  border: 1px solid rgba(5,195,195,0.16);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal);
  line-height: 1;
}
.section-label::before {
  content: '';
  display: block;
  position: static;
  transform: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(5,195,195,0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
/* If the label already has an inline .dot span (from older markup), hide our pseudo-dot to avoid double */
.section-label:has(> .dot)::before { display: none; }
.section-label .dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(5,195,195,0.18);
  animation: pulse-dot 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─── 3. Section Heading — Refined Type ─── */
.section-header h2,
.intro-block__text h2 {
  background: linear-gradient(180deg, var(--text-primary) 0%, #2a3855 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.section--dark .section-header h2,
.section--dark h2 {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── 4. Intro Block — Wider, More Premium ─── */
.intro-block.intro-block--no-image {
  max-width: 980px;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.04),
    0 8px 24px rgba(15,30,60,0.04),
    0 24px 60px -20px rgba(15,30,60,0.05);
  position: relative;
}
.intro-block.intro-block--no-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 50%, transparent 100%);
  border-radius: 999px;
}

.intro-block__text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
  position: relative;
  padding-left: var(--s-5);
}
.intro-block__text h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 4px;
  height: 1.1em;
  background: linear-gradient(180deg, var(--teal), var(--teal-hover));
  border-radius: 2px;
}
.intro-block__text ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: var(--s-5) 0;
}
.intro-block__text ul li {
  position: relative;
  padding-left: var(--s-7);
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: var(--text-body);
}
.intro-block__text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2305C3C3'><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ─── 5. Value Cards — Premium Depth ─── */
.value-card {
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(15,30,60,0.06);
  border-radius: var(--r-xl);
  padding: var(--s-10) var(--s-7);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.03),
    0 4px 16px rgba(15,30,60,0.04);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), border-color 380ms;
}
.value-card::before {
  height: 4px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
}
.value-card:hover {
  transform: translateY(-8px);
  border-color: rgba(5,195,195,0.25);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.04),
    0 12px 32px rgba(5,195,195,0.10),
    0 24px 60px rgba(15,30,60,0.10);
}
.value-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(5,195,195,0.12) 0%, rgba(5,195,195,0.04) 100%);
  border: 1px solid rgba(5,195,195,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  position: relative;
}
.value-card__icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(5,195,195,0.3), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.value-card:hover .value-card__icon::after { opacity: 1; }

/* When grid has 4+ cards, narrow padding so they don't look cramped */
.value-grid:has(.value-card:nth-child(4)) .value-card {
  padding: var(--s-8) var(--s-6);
}

/* ─── 6. Knowledge Cards — Premium ─── */
.knowledge-card {
  position: relative;
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.03),
    0 4px 16px rgba(15,30,60,0.04);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  overflow: hidden;
}
.knowledge-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.knowledge-card--confirmed {
  background: linear-gradient(180deg, rgba(5,195,195,0.05) 0%, rgba(5,195,195,0.02) 100%);
  border: 1px solid rgba(5,195,195,0.18);
}
.knowledge-card--confirmed::before { background: linear-gradient(90deg, var(--teal), rgba(5,195,195,0.4)); }
.knowledge-card--expected {
  background: linear-gradient(180deg, rgba(59,130,246,0.05) 0%, rgba(59,130,246,0.02) 100%);
  border: 1px solid rgba(59,130,246,0.18);
}
.knowledge-card--expected::before { background: linear-gradient(90deg, #3B82F6, rgba(59,130,246,0.4)); }
.knowledge-card--tbd {
  background: linear-gradient(180deg, rgba(245,158,11,0.05) 0%, rgba(245,158,11,0.02) 100%);
  border: 1px solid rgba(245,158,11,0.18);
}
.knowledge-card--tbd::before { background: linear-gradient(90deg, var(--gold), rgba(212,168,83,0.4)); }
.knowledge-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.04),
    0 12px 32px rgba(15,30,60,0.06),
    0 24px 60px rgba(15,30,60,0.08);
}
.knowledge-card h3 {
  font-weight: 800;
  letter-spacing: -0.015em;
}
.knowledge-card li {
  padding: 8px 0;
  border-bottom: 1px dashed rgba(15,30,60,0.08);
}
.knowledge-card li:last-child { border-bottom: 0; }

/* ─── 7. FAQ Accordion — Premium ─── */
.faq-item, .elementor-accordion-item {
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(15,30,60,0.06) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.faq-item:hover, .elementor-accordion-item:hover {
  border-color: rgba(5,195,195,0.2) !important;
  box-shadow: 0 8px 24px rgba(15,30,60,0.06);
  transform: translateY(-1px);
}
.faq-item.is-open, .faq-item--open, .elementor-accordion-item.elementor-active {
  border-color: rgba(5,195,195,0.28) !important;
  box-shadow: 0 12px 32px rgba(5,195,195,0.08) !important;
}

/* ─── 8. Stats Banner — Numbers with Glow ─── */
.section--dark .stats-banner__item h3,
.section--dark .stats-banner__item .stat-number {
  background: linear-gradient(180deg, #ffffff 0%, rgba(5,195,195,0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(5,195,195,0.35));
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ─── 9. CTA Section — Premium Glow ─── */
.cta-v2-section, .cta-section {
  position: relative;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(5,195,195,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 100%, rgba(212,168,83,0.06) 0%, transparent 55%),
    var(--navy);
  overflow: hidden;
}

/* ─── 10. Numbered Features — Premium Numbers ─── */
.numbered-feature__num {
  background: linear-gradient(135deg, var(--teal) 0%, rgba(5,195,195,0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 16px rgba(5,195,195,0.25));
  font-weight: 900;
  letter-spacing: -0.04em;
}

/* ─── 11. Section Transition — Subtle Divider ─── */
.section + .section:not(.section--dark):not(.section--alt) {
  border-top: 1px solid rgba(15,30,60,0.04);
}

/* ─── 12. Buttons — Premium Lift on Primary ─── */
.btn-primary, .elementor-button-primary, .hbm-btn--primary {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-hover) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 24px rgba(5,195,195,0.28),
    0 2px 4px rgba(5,195,195,0.18) !important;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out) !important;
}
.btn-primary:hover, .elementor-button-primary:hover, .hbm-btn--primary:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 12px 32px rgba(5,195,195,0.40),
    0 4px 8px rgba(5,195,195,0.22) !important;
}

/* ─── 13. Numbered Features Card Polish ─── */
.numbered-feature {
  position: relative;
  padding: var(--s-8) var(--s-7);
  background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  border: 1px solid rgba(15,30,60,0.06);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.03),
    0 4px 16px rgba(15,30,60,0.04);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.numbered-feature:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.04),
    0 12px 32px rgba(15,30,60,0.06),
    0 24px 60px rgba(15,30,60,0.06);
}

/* ─── 14. Page background subtle — for depth ─── */
body {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
}

/* ─── 15. Responsive premium polish ─── */
@media (max-width: 768px) {
  .intro-block.intro-block--no-image {
    padding: var(--s-7) var(--s-5);
  }
  .value-card { padding: var(--s-7) var(--s-5); }
  .knowledge-card { padding: var(--s-6) var(--s-5); }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HERO — Side Image Variant (2-col grid)
   ═══════════════════════════════════════════════════════════ */
.page-hero--with-image .page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  text-align: left;
}
.page-hero--with-image .page-hero__content {
  max-width: none;
  text-align: left;
  margin: 0;
}
.page-hero--with-image .page-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-hero--with-image .page-hero__visual img {
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.4);
}
.page-hero--with-image .breadcrumb {
  justify-content: flex-start;
}
.page-hero--with-image .hero-ctas {
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .page-hero--with-image .page-hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    text-align: center;
  }
  .page-hero--with-image .page-hero__content {
    text-align: center;
  }
  .page-hero--with-image .breadcrumb,
  .page-hero--with-image .hero-ctas {
    justify-content: center;
  }
  .page-hero--with-image .page-hero__visual img {
    max-width: 240px;
  }
}

/* ═══════════════════════════════════════════════════════════
   EBOOK LANDING — 2-col grid: cover + info/form
   ═══════════════════════════════════════════════════════════ */
.ebook-landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .ebook-landing { grid-template-columns: 1fr; gap: var(--s-10); }
}

/* Cover column */
.ebook-landing__cover {
  position: sticky;
  top: 120px;
  background: linear-gradient(135deg, #0B1120 0%, rgba(5,195,195,0.12) 100%);
  border-radius: var(--r-2xl);
  padding: var(--s-16) var(--s-10);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  border: 1px solid rgba(5,195,195,0.15);
}
.ebook-landing__cover img {
  max-width: 300px;
  width: 85%;
  border-radius: var(--r-md);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.5);
}

/* Info column */
.ebook-landing__info {}
.ebook-landing__subtitle {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s-3);
}
.ebook-landing__info h1,
.ebook-landing__info .ebook-landing__heading,
.ebook-landing__info h2.ebook-landing__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #1A1F36;
  line-height: 1.2;
  margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.ebook-landing__desc,
.ebook-landing__info > p {
  color: #4A5568;
  line-height: 1.8;
  font-size: var(--text-body-lg);
  margin-bottom: var(--s-5);
}

/* Bullet list */
.ebook-landing__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ebook-landing__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: #4A5568;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.ebook-landing__bullet svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  padding: 1px;
  border-radius: 50%;
  background: rgba(5,195,195,0.15);
  border: 1.5px solid var(--teal);
  color: var(--teal);
}

/* Form box */
.ebook-landing__form {
  background: #F7F9FC;
  border: 1px solid #E2E8F0;
  border-radius: var(--r-2xl);
  padding: var(--s-8);
  margin-top: var(--s-8);
}
.ebook-landing__form h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1A1F36;
  margin-bottom: var(--s-2);
}
.ebook-landing__form p {
  font-size: var(--text-sm);
  color: #718096;
  margin-bottom: var(--s-6);
}
.ebook-landing__form iframe {
  width: 100%;
  border: none;
  border-radius: var(--r-lg);
}

/* ═══════════════════════════════════════════════════════════
   MYTH LIST — Myth vs. Fact rows
   ═══════════════════════════════════════════════════════════ */
.myth-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 900px;
  margin: 0 auto;
}
.myth-list + .myth-list, .myth-list:not(:first-child) { margin-top: var(--s-6); }

.myth-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15,30,60,0.03),
    0 4px 16px rgba(15,30,60,0.04);
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.myth-item:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15,30,60,0.04),
    0 12px 32px rgba(15,30,60,0.06);
}

.myth-item__myth,
.myth-item__fact {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-7);
  font-size: var(--text-body);
  line-height: 1.6;
}

.myth-item__myth {
  background: linear-gradient(180deg, rgba(245,105,98,0.04), rgba(245,105,98,0.02));
  border-bottom: 1px dashed rgba(245,105,98,0.18);
  color: #4A5568;
}
.myth-item__myth svg {
  color: #f56962;
  flex-shrink: 0;
  margin-top: 3px;
  width: 22px;
  height: 22px;
}

.myth-item__fact {
  background: linear-gradient(180deg, rgba(5,195,195,0.04), rgba(5,195,195,0.02));
  color: var(--text-primary);
  font-weight: 500;
}
.myth-item__fact svg {
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 3px;
}
.myth-item__fact span:empty::before {
  content: '(See guide for full answer)';
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* Heading above myth-list */
.elementor-widget-hbm-ebook-myths h2 {
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-8);
  color: var(--text-primary);
}

/* Fix the ebook hero subtitle "A brief description of what this page is about"
   This is the page-hero default — only show if explicitly set */
.page-hero__desc:empty { display: none; }

/* ─── 16. Elementor Stock Button — Premium Styling ─── */
.elementor-widget-button {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.elementor-widget-button .elementor-button-wrapper {
  text-align: center;
}
.elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 16px 32px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white) !important;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-hover) 100%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 24px rgba(5,195,195,0.30),
    0 2px 4px rgba(5,195,195,0.18) !important;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out) !important;
}
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 14px 36px rgba(5,195,195,0.42),
    0 4px 8px rgba(5,195,195,0.22) !important;
}
.elementor-widget-button .elementor-button::after {
  content: '\2192';
  font-size: 1.1em;
  margin-left: 0.25rem;
  transition: transform 220ms var(--ease-out);
}
.elementor-widget-button .elementor-button:hover::after {
  transform: translateX(3px);
}

/* Careers page – single-line description */
.page-careers .section-desc { max-width: none; white-space: nowrap; }

/* HBM-A11Y-CONTRAST-START */
:root { --teal-accessible: #036666; }
/* Force darker teal for text-on-light contexts (WCAG AA 4.6:1) */
.section-label,
.bento-card-link,
.plan-step__num { color: #036666 !important; font-weight: 700; }
.bento-card-link { font-weight: 600; }
/* Keep brighter teal for dark backgrounds and decorative uses */
.section--dark .section-label,
.section--dark .bento-card-link,
.section--dark .plan-step__num { color: var(--teal) !important; }
/* HBM-A11Y-CONTRAST-END */