/* ========================================
   INTERIOR PAGE STYLES
   /group-benefits, /contact, 404
======================================== */

/* ========================================
   PAGE HERO
======================================== */

.page-hero {
  position: relative;
  padding: 96px 0 88px;
  background:
    radial-gradient(
      120% 140% at 15% 0%,
      rgba(61, 103, 179, 0.55) 0%,
      rgba(13, 27, 52, 0) 60%
    ),
    linear-gradient(135deg, #0d1b34 0%, #16294b 55%, #1c3560 100%);
  color: #fff;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -180px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.page-hero-compact {
  padding: 84px 0 72px;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero .section-label {
  color: #9db7e6;
}

.page-hero .section-label .line {
  background: #9db7e6;
}

.page-hero h1 {
  max-width: 15ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.9rem, 5vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.page-hero h1 span {
  display: block;
  margin-top: 8px;
  color: #9db7e6;
  font-style: italic;
  font-weight: 400;
}

.page-hero-copy {
  max-width: 62ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.16rem;
  line-height: 1.7;
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

.page-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 56px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.page-hero-stats strong {
  display: block;
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
}

.page-hero-stats span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ========================================
   BREADCRUMB
======================================== */

.breadcrumb {
  margin-bottom: 26px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.breadcrumb li {
  color: rgba(255, 255, 255, 0.55);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.breadcrumb a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   PAGE SECTIONS
======================================== */

.page-section {
  padding: 92px 0;
  background: #fff;
}

.page-section-soft {
  background: #f3f6fa;
}

.page-section > .container > p,
.split-content > p {
  color: #5c6b82;
  font-size: 1.1rem;
  line-height: 1.8;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}

.split-grid-reverse .split-content {
  order: 2;
}

.split-content .section-heading {
  margin-bottom: 28px;
}

.split-content p {
  margin: 0 0 20px;
}

.split-content .advisor-tags {
  margin: 30px 0 6px;
}

.brand-note {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-left: 2px solid #31579b;
  background: #f3f6fa;
  color: #5c6b82;
  font-size: 1rem;
  line-height: 1.7;
}

.brand-note a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
}

.brand-note a:hover {
  border-bottom-color: #31579b;
}

.contact-details > p a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
}

.split-image {
  position: relative;
}

.split-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: 0 28px 70px rgba(16, 34, 64, 0.14);
}

/* ========================================
   BENEFIT LIST (what's included)
======================================== */

.benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.benefit-item {
  display: flex;
  gap: 20px;
  padding: 32px;
  background: #fff;
  border: 1px solid #e3eaf3;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.page-section-soft .benefit-item {
  background: #fff;
}

.benefit-item:hover {
  transform: translateY(-4px);
  border-color: rgba(49, 87, 155, 0.35);
  box-shadow: 0 24px 55px rgba(16, 34, 64, 0.09);
}

.benefit-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.benefit-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(49, 87, 155, 0.1);
  color: #31579b;
  font-size: 1rem;
}

.benefit-body h3 {
  margin: 4px 0 12px;
  color: #171b2f;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.benefit-body p {
  margin: 0;
  color: #5c6b82;
  font-size: 1.02rem;
  line-height: 1.72;
}

/* ========================================
   CHECK LIST
======================================== */

.check-list {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 34px;
  color: #5c6b82;
  font-size: 1.04rem;
  line-height: 1.72;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(49, 87, 155, 0.12);
  color: #31579b;
  font-size: 0.72rem;
  font-weight: 700;
}

.check-list strong {
  color: #171b2f;
  font-weight: 600;
}

/* ========================================
   SIDE PANEL
======================================== */

.split-panel {
  padding: 44px;
  background: #fff;
  border-top: 3px solid #31579b;
  box-shadow: 0 28px 70px rgba(16, 34, 64, 0.1);
}

.split-panel h3 {
  margin: 0 0 18px;
  color: #171b2f;
  font-size: 1.75rem;
  font-weight: 500;
}

.split-panel p {
  margin: 0 0 24px;
  color: #5c6b82;
  font-size: 1.04rem;
  line-height: 1.75;
}

.split-panel ul {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

.split-panel li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 26px;
  color: #5c6b82;
  font-size: 1rem;
  line-height: 1.65;
}

.split-panel li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #31579b;
}

.panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 30px;
  background: #31579b;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.panel-cta:hover {
  background: #3d67b3;
  transform: translateY(-2px);
}

/* ========================================
   CONTACT PAGE
======================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 72px;
  align-items: start;
}

.contact-details > p {
  margin: 0 0 32px;
  max-width: 54ch;
}

/* Single column: at two-up the cards are too narrow for the email address,
   which then breaks mid-word. */
.contact-card-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: #f3f6fa;
  border-left: 2px solid #31579b;
}

.contact-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(49, 87, 155, 0.12);
  color: #31579b;
  font-size: 0.95rem;
}

.contact-card strong {
  display: block;
  margin-bottom: 6px;
  color: #66758f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-card > div {
  min-width: 0;
}

.contact-card a,
.contact-card span,
.contact-card address {
  display: block;
  color: #171b2f;
  font-size: 1.02rem;
  font-style: normal;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-card a {
  border-bottom: 1px solid rgba(49, 87, 155, 0.35);
  transition: border-color 0.2s ease;
}

.contact-card a:hover {
  border-bottom-color: #31579b;
}

.contact-nudge {
  margin-top: 34px;
  padding: 28px 30px;
  background: #fff;
  border: 1px dashed #cfdcea;
}

.contact-nudge h3 {
  margin: 0 0 10px;
  color: #171b2f;
  font-size: 1.3rem;
  font-weight: 500;
}

.contact-nudge p {
  margin: 0;
  color: #5c6b82;
  font-size: 1.02rem;
  line-height: 1.7;
}

.contact-nudge a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
}

.contact-nudge a:hover {
  border-bottom-color: #31579b;
}

/* Contact page form */

.contact-page-form {
  padding: 40px;
}

.contact-page-form h2 {
  margin: 0 0 10px;
  color: #171b2f;
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact-page-form .form-intro {
  margin: 0 0 28px;
  color: #748299;
  font-size: 1.02rem;
  line-height: 1.65;
}

.contact-page-form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 14px 16px;
  border: 1px solid #d8e0eb;
  background: #f6f8fb;
  color: #17202a;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}

.contact-page-form textarea:focus {
  outline: none;
  border-color: #31579b;
  background: #fff;
}

.contact-page-form .form-alert ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.contact-page-form .form-alert li {
  margin-bottom: 4px;
}

.form-privacy {
  margin: 18px 0 0;
  color: #8b98ab;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}

/* Map */

.map-wrap {
  position: relative;
  aspect-ratio: 21 / 8;
  background: #e6edf5;
  box-shadow: 0 28px 70px rgba(16, 34, 64, 0.12);
}

.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========================================
   SHARED TWEAKS
======================================== */

.process-timeline-three {
  grid-template-columns: repeat(3, 1fr);
}

.process-timeline-three::before {
  left: 16.66%;
  right: 16.66%;
}

.faq-footnote {
  margin: 44px auto 0;
  max-width: 620px;
  color: #748299;
  font-size: 1.04rem;
  line-height: 1.7;
  text-align: center;
}

.faq-footnote a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
}

.faq-footnote a:hover {
  border-bottom-color: #31579b;
}

.nav-link.is-current {
  color: #31579b;
}

/* ========================================
   HOMEPAGE: TRUST ANCHOR + WHY VANCOUVER
======================================== */

.why-vancouver-section {
  padding: 92px 0;
  background: #fff;
}

.why-vancouver-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.why-vancouver-card {
  padding: 34px 36px;
  background: #f3f6fa;
  border-top: 2px solid #31579b;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.why-vancouver-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(16, 34, 64, 0.09);
}

.why-vancouver-card h3 {
  margin: 0 0 14px;
  color: #171b2f;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.why-vancouver-card p {
  margin: 0;
  color: #5c6b82;
  font-size: 1.02rem;
  line-height: 1.75;
}

.why-vancouver-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 36px;
  margin-top: 44px;
}

@media (max-width: 860px) {
  .why-vancouver-section {
    padding: 68px 0;
  }

  .why-vancouver-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .why-vancouver-card {
    padding: 28px;
  }
}

/* ========================================
   LEGAL PAGES
======================================== */

.legal-prose {
  max-width: 780px;
}

.legal-updated {
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e3eaf3;
  color: #8b98ab;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-prose h2 {
  margin: 46px 0 16px;
  color: #171b2f;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.legal-prose h2:first-of-type {
  margin-top: 0;
}

.legal-prose p {
  margin: 0 0 18px;
  color: #5c6b82;
  font-size: 1.06rem;
  line-height: 1.8;
}

.legal-prose strong {
  color: #171b2f;
  font-weight: 600;
}

.legal-prose ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: #5c6b82;
}

.legal-prose li {
  margin-bottom: 10px;
  font-size: 1.04rem;
  line-height: 1.75;
}

.legal-prose a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
  transition: border-color 0.2s ease;
}

.legal-prose a:hover {
  border-bottom-color: #31579b;
}

.legal-contact {
  margin-top: 52px;
  padding: 30px 32px;
  background: #f3f6fa;
  border-left: 2px solid #31579b;
}

.legal-contact h3 {
  margin: 0 0 12px;
  color: #171b2f;
  font-size: 1.25rem;
  font-weight: 500;
}

.legal-contact p {
  margin: 0;
}

/* Licensing note on the contact page */

.licensing-note {
  margin-top: 20px;
  padding: 26px 30px;
  background: #f3f6fa;
  border-left: 2px solid #31579b;
}

.licensing-note h3 {
  margin: 0 0 12px;
  color: #171b2f;
  font-size: 1.18rem;
  font-weight: 500;
}

.licensing-note p {
  margin: 0 0 12px;
  color: #5c6b82;
  font-size: 0.98rem;
  line-height: 1.7;
}

.licensing-note p:last-child {
  margin-bottom: 0;
}

.licensing-note a {
  color: #31579b;
  border-bottom: 1px solid rgba(49, 87, 155, 0.4);
}

.licensing-note strong {
  color: #171b2f;
  font-weight: 600;
}

/* ========================================
   FOOTER ADDITIONS
======================================== */

.footer-brand .brand-lockup {
  padding: 0;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.footer-legal {
  padding: 26px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-attribution {
  max-width: 78ch;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.94rem;
  line-height: 1.7;
}

.footer-attribution strong {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.footer-attribution a {
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  transition: border-color 0.2s ease;
}

.footer-attribution a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 16px;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.footer-legal-links a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.footer-copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.88rem;
}

/* ========================================
   ERROR PAGE
======================================== */

.error-hero {
  min-height: 68vh;
  display: flex;
  align-items: center;
}

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 48px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}

.error-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.2s ease;
}

.error-links a:hover {
  border-bottom-color: rgba(255, 255, 255, 0.75);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1080px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .split-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .split-grid-reverse .split-content {
    order: 0;
  }
}

@media (max-width: 860px) {
  .page-hero {
    padding: 72px 0 64px;
  }

  .page-hero h1 {
    max-width: none;
  }

  .page-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 20px;
  }

  .benefit-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-section {
    padding: 68px 0;
  }

  .process-timeline-three {
    grid-template-columns: repeat(2, 1fr);
  }

  .map-wrap {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .page-hero-actions .hero-btn {
    width: 100%;
  }

  .benefit-item,
  .contact-page-form,
  .split-panel {
    padding: 26px;
  }

  .process-timeline-three {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-page-form .form-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================
   ARTICLES / INSIGHTS
======================================== */

.article-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
}

.article-byline a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.byline-sep { color: rgba(255, 255, 255, 0.35); }

.article-review {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
}

.article-review a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }

.article-review-pending {
  max-width: 70ch;
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 2px solid #f0b429;
  background: rgba(240, 180, 41, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.94rem;
  line-height: 1.65;
}

.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
  padding: 72px 0 92px;
}

.article-main { max-width: 74ch; }

.article-intro p {
  margin: 0 0 32px;
  color: #3d4a5c;
  font-size: 1.22rem;
  line-height: 1.75;
}

.article-intro strong { color: #171b2f; }
.article-intro a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.takeaways {
  margin: 0 0 34px;
  padding: 28px 32px;
  background: #f3f6fa;
  border-left: 3px solid #31579b;
}

.takeaways h2 {
  margin: 0 0 16px;
  color: #171b2f;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.takeaways ul { margin: 0; padding-left: 20px; }

.takeaways li {
  margin-bottom: 10px;
  color: #4a5769;
  font-size: 1.03rem;
  line-height: 1.7;
}

.toc {
  margin: 0 0 44px;
  padding: 24px 28px;
  border: 1px solid #e3eaf3;
}

.toc h2 {
  margin: 0 0 14px;
  color: #66758f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.toc ol { margin: 0; padding-left: 20px; color: #5c6b82; }
.toc li { margin-bottom: 8px; font-size: 1rem; line-height: 1.5; }
.toc a { color: #31579b; border-bottom: 1px solid transparent; }
.toc a:hover { border-bottom-color: #31579b; }

.article-section { scroll-margin-top: 110px; }

.article-section h2 {
  margin: 48px 0 18px;
  color: #171b2f;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.article-section h3 {
  margin: 30px 0 12px;
  color: #171b2f;
  font-size: 1.24rem;
  font-weight: 600;
}

.article-section p {
  margin: 0 0 18px;
  color: #4a5769;
  font-size: 1.07rem;
  line-height: 1.82;
}

.section-answer {
  padding-left: 18px;
  border-left: 2px solid rgba(49, 87, 155, 0.35);
  color: #2f3b4c !important;
  font-size: 1.12rem !important;
  font-weight: 500;
}

.article-table-wrap { margin: 26px 0 30px; }

.article-table-wrap figcaption {
  margin-bottom: 12px;
  color: #748299;
  font-size: 0.95rem;
}

.table-scroll { overflow-x: auto; }

.article-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.99rem;
}

.article-table-wrap th {
  padding: 12px 14px 12px 0;
  border-bottom: 2px solid #cfdcea;
  color: #66758f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.article-table-wrap td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid #e8eef5;
  color: #4a5769;
  line-height: 1.6;
  vertical-align: top;
}

.article-table-wrap td:first-child { color: #171b2f; font-weight: 500; }

.article-list, .article-steps {
  margin: 24px 0 28px;
  padding: 24px 28px;
  background: #f7f9fc;
  border: 1px solid #e3eaf3;
}

.article-list h3, .article-steps h3 { margin: 0 0 14px; font-size: 1.1rem; }
.article-list ul, .article-steps ol { margin: 0; padding-left: 20px; }

.article-list li, .article-steps li {
  margin-bottom: 9px;
  color: #4a5769;
  font-size: 1.02rem;
  line-height: 1.7;
}

.faq-qa { margin-bottom: 26px; }
.faq-qa h3 { margin: 0 0 8px; font-size: 1.15rem; font-weight: 600; }
.faq-qa p { margin: 0; }

.reference-list { margin: 0; padding-left: 22px; }

.reference-list li {
  margin-bottom: 10px;
  color: #5c6b82;
  font-size: 1rem;
  line-height: 1.65;
}

.reference-list a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.reference-note {
  margin-top: 14px;
  color: #8b98ab;
  font-size: 0.9rem;
}

.disclaimer-block {
  margin: 44px 0;
  padding: 28px 32px;
  background: #f3f6fa;
  border-left: 3px solid #8b98ab;
}

.disclaimer-block h2 {
  margin: 0 0 12px;
  color: #171b2f;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.disclaimer-block p {
  margin: 0 0 12px;
  color: #5c6b82;
  font-size: 0.97rem;
  line-height: 1.75;
}

.disclaimer-block p:last-child { margin-bottom: 0; }
.disclaimer-block a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.author-box {
  display: flex;
  gap: 26px;
  margin: 44px 0 0;
  padding: 30px 32px;
  background: #fff;
  border: 1px solid #e3eaf3;
}

.author-box .author-photo, .author-box picture { flex-shrink: 0; }
.author-box img { width: 96px; height: auto; border-radius: 50%; }

.author-box-label {
  margin: 0 0 6px !important;
  color: #8b98ab;
  font-size: 0.74rem !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.author-box h2 { margin: 0 0 4px; font-size: 1.35rem; font-weight: 500; }
.author-box h2 a { color: #171b2f; border-bottom: 1px solid rgba(49,87,155,.3); }
.author-box-role { margin: 0 0 12px !important; color: #31579b; font-size: 0.98rem !important; }
.author-box p { color: #5c6b82; font-size: 1rem; line-height: 1.7; }
.author-box-credential { font-size: 0.93rem !important; color: #748299 !important; }
.author-box-credential a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.article-aside { position: sticky; top: 110px; display: grid; gap: 20px; }

.aside-card { padding: 26px 28px; background: #f3f6fa; border-top: 2px solid #31579b; }
.aside-card h2 { margin: 0 0 14px; color: #171b2f; font-size: 1.15rem; font-weight: 600; }
.aside-card ul { margin: 0; padding-left: 18px; }
.aside-card li { margin-bottom: 9px; font-size: 0.98rem; line-height: 1.55; }
.aside-card a:not(.panel-cta) { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.35); }

/* The CTA is a button, not a link — keep it white on blue. */
.aside-card .panel-cta { color: #fff; border-bottom: 0; }
.aside-card p { margin: 0 0 18px; color: #5c6b82; font-size: 0.98rem; line-height: 1.65; }
.aside-cta { background: #fff; border: 1px solid #e3eaf3; border-top: 2px solid #31579b; }

/* Index + glossary grids */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.article-card {
  padding: 30px 32px;
  background: #fff;
  border: 1px solid #e3eaf3;
  transition: transform .25s ease, box-shadow .25s ease;
}

.article-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(16,34,64,.09); }
.article-card h2, .article-card h3 { margin: 0 0 12px; font-size: 1.35rem; font-weight: 500; line-height: 1.25; }
.article-card a { color: #171b2f; }
.article-card h2 a:hover, .article-card h3 a:hover { color: #31579b; }
.article-card p { margin: 0 0 16px; color: #5c6b82; font-size: 1rem; line-height: 1.65; }

.article-card-meta {
  margin: 0 0 12px !important;
  color: #8b98ab;
  font-size: 0.85rem !important;
}

.badge-draft {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border: 1px solid #f0b429;
  border-radius: 3px;
  color: #a97a08;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.glossary-card { padding: 24px 26px; background: #f7f9fc; border-left: 2px solid #31579b; }
.glossary-card h2 { margin: 0 0 8px; font-size: 1.18rem; font-weight: 600; }
.glossary-card h2 a { color: #171b2f; }
.glossary-card h2 a:hover { color: #31579b; }
.glossary-card p { margin: 0; color: #5c6b82; font-size: 0.97rem; line-height: 1.6; }

.bc-angle {
  margin: 32px 0;
  padding: 24px 28px;
  background: #f3f6fa;
  border-left: 3px solid #31579b;
}

.bc-angle h2 { margin: 0 0 10px !important; font-size: 1.15rem !important; }
.bc-angle p { margin: 0; }

.related-terms { margin: 0 0 30px; padding-left: 20px; }
.related-terms li { margin-bottom: 10px; color: #5c6b82; line-height: 1.65; }
.related-terms a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.insights-note {
  max-width: 74ch;
  margin: 56px auto 0;
  padding-top: 32px;
  border-top: 1px solid #e3eaf3;
}

.insights-note h2 { margin: 0 0 12px; color: #171b2f; font-size: 1.4rem; font-weight: 500; }
.insights-note p { margin: 0 0 14px; color: #5c6b82; font-size: 1.03rem; line-height: 1.75; }
.insights-note a { color: #31579b; border-bottom: 1px solid rgba(49,87,155,.4); }

.profile-note { color: #748299; font-size: 0.97rem; }

@media (max-width: 1080px) {
  .article-body { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .article-aside { position: static; }
}

@media (max-width: 640px) {
  .article-body { padding: 48px 0 64px; }
  .takeaways, .toc, .disclaimer-block, .author-box, .aside-card { padding: 22px; }
  .author-box { flex-direction: column; gap: 18px; }
  .article-list, .article-steps { padding: 20px 22px; }
}

/* ========================================
   TEAM + RECOGNITION (our-company)
======================================== */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.team-card {
  padding: 28px 30px;
  background: #f7f9fc;
  border-top: 2px solid #31579b;
}

.team-card h3 {
  margin: 0 0 4px;
  color: #171b2f;
  font-size: 1.28rem;
  font-weight: 500;
}

.team-title {
  margin: 0 0 12px !important;
  color: #31579b;
  font-size: 0.82rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-card p {
  margin: 0 0 14px;
  color: #5c6b82;
  font-size: 0.99rem;
  line-height: 1.68;
}

.recognition-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.recognition-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid #e3eaf3;
}

.recognition-list a {
  color: #171b2f;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(49, 87, 155, 0.35);
}

.recognition-list a:hover { color: #31579b; }

.recognition-list span {
  color: #8b98ab;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ========================================
   MOBILE TOUCH TARGETS
   Below ~768px, links that sit alone (not inline in a sentence) need a
   comfortable tap area. Card headings get a full-card hit region rather than
   only the text being tappable; stacked link lists get vertical padding to
   reach a usable height.
======================================== */

@media (max-width: 768px) {
  /* Whole card becomes the tap target */
  .glossary-card,
  .article-card,
  .team-card,
  .why-vancouver-card {
    position: relative;
  }

  .glossary-card h2 a::after,
  .article-card h2 a::after,
  .article-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* Only the secondary link needs lifting above the overlay. The heading link
     itself must stay unpositioned, or ::after anchors to the link instead of
     the card and the full-card tap area silently does nothing. */
  .article-card .text-link,
  .team-card .text-link {
    position: relative;
    z-index: 2;
  }

  .glossary-card h2,
  .article-card h2,
  .article-card h3 {
    line-height: 1.35;
  }

  /* Stacked link lists: footer columns, legal links, related terms */
  .footer-column a,
  .footer-legal-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
  }

  .footer-contact p {
    min-height: 44px;
    align-items: center;
  }

  .related-terms li,
  .aside-card li,
  .error-links li {
    margin-bottom: 4px;
  }

  .related-terms a,
  .aside-card a,
  .error-links a,
  .toc a {
    display: inline-block;
    padding: 9px 0;
  }

  /* Breadcrumb links */
  .breadcrumb a {
    display: inline-block;
    padding: 6px 0;
  }

  /* Arrow links and award links sit alone, so they need a real tap height */
  .text-link {
    min-height: 44px;
    padding: 8px 0;
  }

  .recognition-list a,
  .advisor-badge a {
    display: inline-block;
    min-height: 44px;
    padding: 10px 0;
  }

  /* Phone and email on the contact page are the highest-intent taps on the
     site — give them a full-height target. */
  .contact-card a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Social icons already 40px — nudge to 44 */
  .footer-social a {
    width: 44px;
    height: 44px;
  }

  /* Nav dropdown items inside the mobile menu */
  .dropdown-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ========================================
   TOUCH RESPONSIVENESS
   Without touch-action: manipulation some mobile browsers hold a tap for
   ~300ms waiting to see whether it is a double-tap zoom. On an accordion
   that delay reads as "the button did nothing", so the user taps again and
   toggles it straight back closed.
======================================== */

.faq-question,
.mobile-menu-toggle,
.quote-button,
.hero-btn,
.cta-band-btn,
.panel-cta,
.quote-submit,
.text-link,
.nav-link,
.nav-phone {
  touch-action: manipulation;
}

/* Kill the grey tap flash on iOS so feedback comes from our own styles */
.faq-question,
.mobile-menu-toggle {
  -webkit-tap-highlight-color: transparent;
}

/* Visible feedback the instant a finger lands */
.faq-question:active .faq-toggle {
  transform: scale(0.92);
  background: rgba(49, 87, 155, 0.14);
}

/* ========================================
   DECORATIVE OVERLAYS MUST NOT INTERCEPT TAPS
   .faq-section::after is a 160x160 dot pattern pinned to the bottom-right of
   the section, which lands directly on top of the last FAQ item's toggle.
   Being absolutely positioned it paints above the static content, so taps on
   that one button were swallowed while the rest of the row still worked.
   Decorative layers should never be hit targets.
======================================== */

.faq-section::before,
.faq-section::after,
.carrier-bg-dot,
.page-hero::after,
.hero-overlay {
  pointer-events: none;
}