:root {
  --navy: #001f55;
  --navy-2: #062a66;
  --ink: #071943;
  --muted: #52627a;
  --line: #dfe6f0;
  --soft: #f5f8fc;
  --orange: #3476fe;
  --white: #ffffff;
  --shadow: 0 14px 35px rgba(7, 25, 67, 0.12);
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-600.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-800.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-900.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(1450px, calc(100% - 80px));
  margin: 0 auto;
}

.topbar {
  background: var(--navy);
  color: var(--white);
  font-size: 13px;
}

.topbar__inner {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
}

.topbar__group {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}

.topbar__group span,
.topbar__group a {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.topbar i {
  margin-right: 7px;
  color: var(--orange);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(7, 25, 67, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  gap: 24px;
}

.logo {
  width: 210px;
  height: auto;
  flex: 0 0 auto;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px 12px;
  font-weight: 800;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(14px, 2vw, 28px);
  font-size: 14px;
  font-weight: 800;
  min-width: 0;
}

.nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 35px 0;
  white-space: nowrap;
}

.nav__links a.active::after,
.nav__links a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 3px;
  background: var(--orange);
  border-radius: 999px;
}

.btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--orange);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(52, 118, 254, 0.22);
  cursor: pointer;
}

.btn--light {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: 0 8px 16px rgba(7, 25, 67, 0.08);
}

.btn--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: none;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #edf4fb 100%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(430px, 0.88fr) minmax(520px, 1.12fr);
  gap: 28px;
  align-items: center;
  min-height: 520px;
  padding: 54px 0 0;
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 22px;
  color: var(--navy);
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.13;
  font-weight: 900;
}

h2 {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  font-weight: 900;
}

h3 {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}

.lead {
  max-width: 610px;
  color: var(--muted);
  font-size: 18px;
}

.hero__actions,
.cta__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero__media {
  position: relative;
  min-height: 500px;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.hero__photo {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center top;
}

.hero__badges {
  position: absolute;
  right: 28px;
  top: 96px;
  width: min(290px, 42%);
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.badge-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.badge-item:last-child {
  border-bottom: 0;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-weight: 900;
}

.icon i {
  font-size: 18px;
  line-height: 1;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.quick-stat {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 800;
}

.quick-stat small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.section {
  padding: 72px 0;
}

.section--soft {
  background: var(--soft);
}

.section__head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.grid {
  display: grid;
  gap: 18px;
}

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

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

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

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(7, 25, 67, 0.04);
  min-width: 0;
}

.service-mini {
  min-height: 218px;
}

.service-mini p,
.card p {
  color: var(--muted);
  font-size: 14px;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.search-band {
  margin-top: 28px;
  padding: 22px;
  background: var(--navy);
  border-radius: 8px;
}

.search-band__inner {
  display: grid;
  grid-template-columns: 260px 1fr 140px;
  gap: 0;
  overflow: hidden;
  border-radius: 6px;
}

.search-band label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  font-weight: 900;
}

.search-band input,
.search-band select {
  min-height: 56px;
  border: 0;
  border-left: 1px solid var(--line);
  padding: 0 18px;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.rounded-photo {
  width: 100%;
  aspect-ratio: 1.3;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.stats-dark {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  border-radius: 8px;
}

.stats-dark__item {
  padding: 34px 24px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.stats-dark__item:last-child {
  border-right: 0;
}

.stats-dark strong {
  display: block;
  font-size: 30px;
  line-height: 1.1;
}

.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.process__item {
  text-align: center;
}

.process__number {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: 32px;
  font-weight: 900;
}

.image-card {
  overflow: hidden;
  padding: 0;
}

.image-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: center;
}

.image-card__body {
  padding: 20px;
}

.checks {
  padding-left: 0;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  list-style: none;
}

.checks li {
  margin: 5px 0;
}

.checks li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  display: inline-block;
  width: 14px;
  margin-right: 8px;
  color: var(--orange);
  font-weight: 900;
}

.cta {
  margin: 28px 0 0;
  padding: 26px 34px;
  background: var(--navy);
  color: var(--white);
  border-radius: 10px;
}

.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta h2,
.cta h3,
.site-footer h3 {
  color: var(--white);
}

.cta p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
}

.avatar {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--white);
}

.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 46px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(140px, 1fr));
  gap: 36px;
}

.site-footer p,
.site-footer a,
.site-footer li {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

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

.site-footer li {
  margin: 6px 0;
}

.footer-bottom {
  margin-top: 36px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.page-title {
  padding: 74px 0;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #eaf3fb 100%);
}

.service-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pill {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 28px;
}

.form-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.field {
  display: grid;
  gap: 8px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 14px;
  color: var(--ink);
}

.field textarea {
  min-height: 125px;
  padding-top: 12px;
  resize: vertical;
}

.contact-card {
  display: grid;
  gap: 16px;
}

.map {
  width: 100%;
  min-height: 330px;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}

.faq details {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}

.faq summary {
  cursor: pointer;
  padding: 16px 18px;
  color: var(--navy);
  font-weight: 900;
}

.faq p {
  padding: 0 18px 18px;
  color: var(--muted);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  overflow: hidden;
  padding: 0;
}

.blog-card img {
  height: 210px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-card__body {
  padding: 22px;
}

.tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 8px;
  background: #fff5e4;
  color: var(--orange);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.article {
  max-width: 860px;
  margin: 0 auto;
}

.article p,
.article li {
  color: var(--muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-grid img,
.video-tile {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.video-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy), #163b7d);
  color: var(--white);
  font-weight: 900;
}

.legal {
  max-width: 930px;
  margin: 0 auto;
}

.legal h2 {
  margin-top: 34px;
  font-size: 28px;
}

.legal p,
.legal li {
  color: var(--muted);
}

.whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #15c55f;
  color: var(--white);
  font-weight: 900;
  box-shadow: var(--shadow);
}

.whatsapp i {
  font-size: 30px;
}

.home-page .topbar {
  display: none;
}

.home-page .site-header {
  position: relative;
  box-shadow: 0 1px 8px rgba(7, 25, 67, 0.08);
}

.home-page .nav {
  min-height: 96px;
}

.home-page .logo {
  width: 220px;
}

.home-page .nav__links {
  gap: 28px;
}

.home-page .nav__links a {
  padding: 36px 0;
}

.home-page .nav__links a.active::after,
.home-page .nav__links a:hover::after {
  bottom: 25px;
}

.home-page .nav__links .btn {
  min-width: 176px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 7px;
  color: var(--white);
}

.home-page .nav__links .btn i {
  display: none;
}

.hero--home {
  border-top: 1px solid #edf2f8;
  background:
    linear-gradient(90deg, #ffffff 0%, #ffffff 42%, rgba(255, 255, 255, 0.82) 51%, rgba(238, 246, 253, 0.18) 67%, rgba(229, 240, 250, 0.3) 100%);
}

.hero--home .hero__inner {
  width: min(1272px, calc(100% - 90px));
  min-height: 430px;
  padding: 48px 0 0;
  grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  gap: 0;
}

.hero--home .hero__copy {
  align-self: start;
  padding-top: 4px;
}

.hero--home h1 {
  max-width: 680px;
  margin-bottom: 20px;
  font-size: clamp(40px, 3.76vw, 52px);
  line-height: 1.16;
  letter-spacing: 0;
}

.hero--home h1 span {
  display: block;
}

.hero--home .lead {
  max-width: 560px;
  margin-bottom: 0;
  font-size: 17px;
  line-height: 1.62;
  color: #23344f;
}

.hero--home .hero__actions {
  gap: 20px;
  margin-top: 28px;
}

.hero--home .hero__actions .btn {
  min-width: 220px;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 7px;
  font-size: 15px;
  box-shadow: 0 10px 18px rgba(52, 118, 254, 0.24);
}

.hero--home .hero__actions .btn--light {
  min-width: 220px;
  border-color: #dce5ee;
  box-shadow: 0 7px 18px rgba(7, 25, 67, 0.1);
}

.hero--home .hero__media {
  min-height: 430px;
  align-self: stretch;
  margin-right: -45px;
  overflow: hidden;
}

.hero--home .hero__photo {
  height: 430px;
  object-fit: cover;
  object-position: center top;
}

.hero--home .hero__badges {
  display: block;
  top: 82px;
  right: 42px;
  width: 236px;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(7, 25, 67, 0.14);
}

.hero--home .badge-item {
  grid-template-columns: 36px 1fr;
  gap: 13px;
  padding: 13px 0;
  font-size: 13px;
}

.hero--home .badge-item strong {
  font-size: 14px;
}

.hero--home .badge-item .icon {
  width: 34px;
  height: 34px;
}

.hero--home .badge-item .icon i {
  font-size: 16px;
}

.home-page .quick-stats {
  width: min(1272px, calc(100% - 90px));
  min-height: 78px;
  padding: 13px 0 15px;
  gap: 0;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #e5ebf3;
}

.home-page .quick-stat {
  position: relative;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 26px;
  font-size: 16px;
  line-height: 1.2;
}

.home-page .quick-stat:first-child {
  padding-left: 0;
}

.home-page .quick-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 0;
  width: 1px;
  height: 44px;
  background: #e7edf5;
}

.home-page .quick-stat .icon {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
}

.home-page .quick-stat .icon i {
  font-size: 28px;
  color: var(--orange);
}

.home-page .quick-stat small {
  margin-top: 3px;
  font-size: 11px;
}

@media (max-width: 980px) {
  .topbar__inner,
  .topbar__group {
    justify-content: center;
  }

  .topbar__group:last-child {
    display: none;
  }

  .nav {
    min-height: 78px;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    background: var(--white);
    box-shadow: 0 18px 24px rgba(7, 25, 67, 0.12);
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links a {
    padding: 14px 0;
  }

  .nav__links a.active::after,
  .nav__links a:hover::after {
    bottom: 7px;
  }

  .hero__inner,
  .split,
  .form-layout,
  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  .hero__media {
    min-height: auto;
    display: block;
  }

  .grid--6,
  .grid--4,
  .grid--3,
  .quick-stats,
  .process,
  .footer-grid,
  .blog-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-dark {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-page .quick-stats {
    width: min(100% - 32px, 1240px);
    gap: 12px 0;
  }

  .hero--home .hero__inner {
    width: min(100% - 32px, 1240px);
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 42px 0 0;
  }

  .hero--home .hero__media {
    min-height: auto;
    margin-right: 0;
  }

  .hero--home .hero__photo {
    height: 360px;
  }

  .hero--home .hero__badges {
    top: 54px;
    right: 24px;
  }

  .home-page .quick-stat {
    padding: 0 20px;
  }

  .home-page .quick-stat:nth-child(2)::after {
    display: none;
  }

  .search-band__inner,
  .service-row,
  .pill-grid,
  .faq {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 42px, 1450px);
  }

  .logo {
    width: 178px;
  }

  .hero__inner {
    padding: 42px 0;
  }

  .hero__photo {
    height: 320px;
  }

  .hero__badges {
    position: static;
    width: 100%;
    margin-top: 16px;
  }

  .home-page .quick-stats {
    width: min(100% - 24px, 1240px);
  }

  .hero--home .hero__inner {
    width: min(100% - 24px, 1240px);
    padding: 36px 0 0;
  }

  .hero--home .hero__photo {
    height: 320px;
  }

  .hero--home .hero__badges {
    position: static;
    width: 100%;
    margin-top: 16px;
  }

  .home-page .quick-stat {
    padding: 14px 0;
  }

  .home-page .quick-stat::after {
    display: none;
  }

  .grid--6,
  .grid--4,
  .grid--3,
  .quick-stats,
  .process,
  .footer-grid,
  .blog-grid,
  .gallery-grid,
  .feature-list,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .stats-dark {
    grid-template-columns: 1fr;
  }

  .stats-dark__item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .stats-dark__item:last-child {
    border-bottom: 0;
  }

  .cta,
  .card {
    padding: 20px;
  }

  .cta__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .section {
    padding: 52px 0;
  }
}

/* Reference homepage and shared overrides */
:root {
  --ref-navy: #00285e;
  --ref-navy-dark: #001f4d;
  --ref-ink: #26364d;
  --ref-muted: #637187;
  --ref-orange: #3476fe;
  --ref-soft: #f8fafd;
  --ref-line: #e3e8ef;
  --ref-white: #ffffff;
  --ref-shadow: 0 12px 28px rgba(0, 31, 77, 0.11);
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-600.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-800.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Poppins";
  src: url("../vendor/fonts/poppins/poppins-latin-900.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.ref-home {
  margin: 0;
  color: var(--ref-ink);
  background: var(--ref-white);
  font-family: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
}

.ref-home img {
  display: block;
  max-width: 100%;
}

.ref-home a {
  color: inherit;
  text-decoration: none;
}

.ref-home button,
.ref-home input {
  font: inherit;
}

.ref-container {
  width: min(1450px, calc(100% - 80px));
  margin: 0 auto;
}

.ref-topbar {
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  font-size: 12px;
}

.ref-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: 14px;
}

.ref-topbar span,
.ref-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.ref-topbar i {
  color: var(--ref-white);
  font-size: 12px;
  opacity: 0.9;
}

.ref-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ref-white);
  box-shadow: 0 1px 10px rgba(0, 31, 77, 0.08);
}

.ref-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 28px;
}

.ref-logo {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  flex: 0 0 auto;
}

.ref-logo img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
}

.ref-logo__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}

.ref-logo__name {
  color: var(--ref-navy-dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.ref-logo__tagline {
  color: var(--ref-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Footer sits on the dark navy background, so the wordmark needs light text instead of the header's dark navy. */
.ref-footer__brand { margin-bottom: 14px; }
.ref-footer__brand .ref-logo__name { color: var(--ref-navy-dark); }
.ref-footer__brand .ref-logo__tagline { color: var(--ref-muted); }

.ref-nav__close {
  display: none;
}

.ref-nav__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--ref-line);
  border-radius: 6px;
  background: var(--ref-white);
  color: var(--ref-navy-dark);
  font-weight: 800;
}

.ref-nav__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 1.8vw, 30px);
  color: var(--ref-navy-dark);
  font-size: 14px;
  font-weight: 800;
}

.ref-nav__links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.ref-nav__links a:not(.ref-btn) {
  min-height: 80px;
}

.ref-nav__links a.active::after,
.ref-nav__links a:not(.ref-btn):hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 3px;
  background: var(--ref-orange);
  border-radius: 99px;
}

.ref-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.ref-nav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ref-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  min-width: 190px;
  padding: 10px 0;
  background: var(--ref-white);
  border-radius: 8px;
  box-shadow: var(--ref-shadow);
}

.ref-nav__item:hover .ref-nav__dropdown,
.ref-nav__item.is-open .ref-nav__dropdown {
  display: flex;
}

.ref-nav__dropdown a {
  min-height: auto !important;
  padding: 10px 20px;
  white-space: nowrap;
}

.ref-nav__dropdown a:hover,
.ref-nav__dropdown a.active {
  color: var(--ref-orange);
}

.ref-nav__links .ref-nav__dropdown a.active::after,
.ref-nav__links .ref-nav__dropdown a:not(.ref-btn):hover::after {
  content: none;
}

.ref-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--ref-orange);
  color: var(--ref-white);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 12px 22px rgba(52, 118, 254, 0.22);
  cursor: pointer;
  color: #fff !important;
}

.ref-btn--small {
  min-height: 52px;
  padding: 0 25px;
  font-size: 14px;
}

.ref-btn--light,
.ref-btn--white {
  background: var(--ref-white);
  color: var(--ref-navy-dark) !important;
  border-color: var(--ref-line);
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.08);
}

.ref-btn--navy {
  background: var(--ref-orange);
  color: var(--ref-white);
  box-shadow: none;
}

.ref-hero {
  overflow: hidden;
  border-top: 1px solid #edf2f8;
  background: #ffffff;
}

.ref-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 43%) minmax(0, 57%);
  align-items: stretch;
  min-height: 500px;
  padding-top: 0;
}

.ref-hero__copy {
  align-self: start;
  padding-right: 32px;
  padding-top: 25px;
}

.ref-hero h1 {
  margin: 0 0 20px;
  color: var(--ref-navy-dark);
  font-family: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(44px, 3.0vw, 56px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.ref-hero h1 span {
  display: block;
}

.ref-hero__copy p {
  max-width: 560px;
  margin: 0;
  color: var(--ref-ink);
  font-size: 17px;
  line-height: 1.6;
}

.ref-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 0px;
}

.ref-hero__visual {
  position: relative;
  min-height: 405px;
  margin-right: calc((100vw - min(1450px, calc(100vw - 80px))) / -2);
  overflow: hidden;
  background: #ffffff;
}

.ref-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.94) 9%, rgba(255, 255, 255, 0.5) 21%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 15%);
}

.ref-hero__visual img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.92) brightness(1.03) contrast(1.02);
}

.ref-trust-card {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: max(58px, calc((100vw - min(1450px, calc(100vw - 80px))) / 2 + 42px));
  width: 262px;
  padding: 18px 22px;
  border: 1px solid var(--ref-line);
  border-radius: 10px;
  background: var(--ref-white);
  box-shadow: var(--ref-shadow);
}

.ref-trust-card div {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ref-line);
}

.ref-trust-card div:last-child {
  border-bottom: 0;
}

.ref-trust-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ref-orange);
  font-size: 23px;
}

.ref-trust-card p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 13px;
  line-height: 1.35;
}

.ref-trust-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ref-navy-dark);
  font-size: 14px;
  font-weight: 900;
}

.ref-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 0.139fr));
  min-height: 80px;
  padding: 14px 0;
  border-top: 1px solid #e3e8ef00;
  border-bottom: 1px solid var(--ref-line);
  background: rgba(255, 255, 255, 0);
  margin-top: -105px;
  z-index: 3;
  position: relative;
}

.ref-hero-stats div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  border-right: 1px solid var(--ref-line);
}

.ref-hero-stats div:first-child {
  padding-left: 0;
}

.ref-hero-stats div:last-child {
  border-right: 0;
}

.ref-hero-stats i {
  color: var(--ref-orange);
  font-size: 30px;
}

.ref-hero-stats__icon-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.ref-hero-stats p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.ref-hero-stats strong {
  display: block;
  color: var(--ref-navy-dark);
  font-size: 18px;
  font-weight: 900;
}

.ref-section {
  padding: 10px 0;
}

.ref-help {
  padding-top: 36px;
}

.ref-section-head {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}

.ref-section-head span,
.ref-title-row span,
.ref-case span {
  display: block;
  margin-bottom: 9px;
  color: var(--ref-orange);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ref-title-row span {
  display: block;
  margin-bottom: 9px;
  color: var(--ref-orange);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ref-section h2 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(25px, 1.3vw, 30px);
  line-height: 0.8;
  font-weight: 600;
}

.ref-title-row h2 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(25px, 1.0vw, 16px);
  line-height: 0.8;
  font-weight: 600;
}

.ref-section-head p,
.ref-title-row p {
  margin: 12px 0 0;
  color: var(--ref-muted);
  font-size: 16px;
}

.ref-service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.ref-service-grid article,
.ref-core-grid article,
.ref-testimonial-grid article,
.ref-article-grid article {
  min-width: 0;
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: 0 8px 22px rgba(0, 31, 77, 0.04);
}

.ref-service-grid article {
  display: flex;
  flex-direction: column;
  min-height: 206px;
  padding: 21px 20px 18px;
}

.ref-service-grid article > i {
  color: var(--ref-orange);
  font-size: 25px;
}

.ref-service-grid h3,
.ref-core-grid h3,
.ref-process h3,
.ref-article-grid h3 {
  margin: 14px 0 9px;
  color: var(--ref-navy-dark);
  font-size: 18px;
  line-height: 1.24;
  font-weight: 600;
}

.ref-service-grid p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 13px;
}

.ref-service-grid a {
  margin-top: auto;
  color: var(--ref-orange);
  font-size: 15px;
}

.ref-search {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 150px;
  align-items: center;
  margin-top: 20px;
  padding: 10px 80px;
  border-radius: 8px;
  background: var(--ref-navy-dark);
}

.ref-search label {
  color: var(--ref-white);
  font-weight: 600;
  text-align: center;
}

.ref-search input {
  width: 100%;
  min-height: 45px;
  border: 0;
  padding: 0 18px;
  color: var(--ref-ink);
}

.ref-search .ref-btn {
  min-height: 45px;
  border-radius: 0 6px 6px 0;
  box-shadow: none;
}

.ref-trust-strip {
  background: var(--ref-navy-dark);
}

.ref-trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 80px;
}

.ref-trust-strip__grid div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ref-white);
}

.ref-trust-strip__grid div:last-child {
  border-right: 0;
}

.ref-trust-strip i {
  color: var(--ref-white);
  font-size: 28px;
}

.ref-trust-strip__icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.ref-trust-strip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.35;
}

.ref-trust-strip strong,
.ref-trust-strip span {
  display: block;
  color: var(--ref-white);
  font-weight: 900;
}

.ref-trust-strip span {
  color: var(--ref-white);
  letter-spacing: 1px;
}

.ref-trust-strip .ref-stars {
  display: flex;
  gap: 2px;
  margin: 2px 0;
  letter-spacing: 0;
}

.ref-trust-strip .ref-stars i {
  color: var(--ref-white);
  font-size: 12px;
}

.ref-core {
  padding: 30px 0 48px;
  background: var(--ref-white);
}

.ref-core .ref-section-head {
  max-width: max-content;
  margin-bottom: 30px;
}

.ref-core .ref-section-head span {
  margin-bottom: 5px;
  font-size: 16px;
  letter-spacing: 2px;
}

.ref-core .ref-section-head h2 {
  font-size: clamp(25px, 2.10vw, 30px);
  line-height: 1.18;
}

.ref-core .ref-section-head p {
  margin-top: 8px;
  color: var(--ref-ink);
  font-size: 16px;
}

.ref-core-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.ref-core-grid article {
  display: flex;
  flex-direction: column;
  min-height: 217px;
  padding: 10px 20px 25px;
  border-color: #e1e7ef;
  border-radius: 8px;
  box-shadow: none;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.ref-core-grid h3 {
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.2;
}

.ref-core-grid ul {
  flex: 1;
  padding-left: 19px;
  margin: 0 0 22px;
  list-style: disc;
}

.ref-case ul {
  padding: 0;
  margin: 14px 0 19px;
  list-style: none;
}

.ref-core-grid li {
  margin: 0 0 13px;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.35;
}

.ref-core-grid li::marker {
  color: var(--ref-navy-dark);
  font-size: 9px;
}

.ref-case li {
  margin: 7px 0;
  color: var(--ref-muted);
  font-size: 14px;
}

.ref-case li::before {
  content: "\f00c";
  display: inline-block;
  width: 17px;
  margin-right: 8px;
  color: var(--ref-orange);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.ref-core-grid a,
.ref-title-row a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ref-navy-dark);
  font-size: 16px;
  font-weight: 900;
}

.ref-center-action {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.ref-core .ref-btn--navy {
  min-width: 268px;
  min-height: 58px;
  border-radius: 7px;
  background: var(--ref-orange);
  color: var(--ref-white);
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(52, 118, 254, 0.22);
}

.ref-work {
  padding: 0px 0 30px;
  background: var(--ref-white);
}

.ref-work .ref-section-head {
  margin-bottom: 20px;
}

.ref-work .ref-section-head span {
  margin-bottom: 5px;
  font-size: 16px;
  letter-spacing: 4px;
}

.ref-work .ref-section-head h2 {
  font-size: clamp(25px, 2.10vw, 30px);
}

.ref-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 42px;
}

.ref-process::before {
  display: none;
}

.ref-process article {
  position: relative;
  min-width: 0;
  padding-top: 112px;
  text-align: left;
}

.ref-process article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 39px;
  left: calc(50% + 45px);
  width: calc(100% - 20px);
  border-top: 2px dotted #9aa8bb;
}

.ref-process article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -28px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #9aa8bb;
  border-right: 2px solid #9aa8bb;
  transform: rotate(45deg);
}

.ref-process i {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border: 4px solid #082b63;
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  font-size: 28px;
  box-shadow: 0 7px 16px rgba(0, 31, 77, 0.18);
  transform: translateX(-50%);
}

.ref-process i::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
}

.ref-process span {
  position: absolute;
  top: 115px;
  left: 41px;
  color: var(--ref-orange);
  font-size: 35px;
  line-height: 1;
  font-weight: 900;
}

.ref-process h3 {
  margin: 0 0 10px 80px;
  color: var(--ref-navy-dark);
  font-size: 15px;
  line-height: 1.22;
}

.ref-process p {
  margin: 0 0 0 40px;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.65;
}

.ref-proof__grid {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%);
  gap: 24px;
  align-items: stretch;
}

.ref-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.ref-case div {
  padding: 30px;
}

.ref-case h2 {
  margin: 0 0 15px;
  color: var(--ref-white);
  font-size: 23px;
  line-height: 1.2;
}

.ref-case li {
  color: rgba(255, 255, 255, 0.82);
}

.ref-case strong {
  display: block;
  margin-bottom: 20px;
  color: var(--ref-orange);
}

.ref-case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ref-testimonials {
  background: #eaedec9c;
  padding: 20px 15px;
  border-radius: 15px;
}

.ref-title-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.ref-testimonial-carousel {
  position: relative;
}

.ref-testimonial-viewport {
  overflow: hidden;
  margin: 0 42px;
}

.ref-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ref-line);
  border-radius: 50%;
  background: var(--ref-white);
  color: var(--ref-navy);
  box-shadow: var(--ref-shadow);
  cursor: pointer;
}

.ref-carousel-arrow:hover {
  background: var(--ref-orange);
  border-color: var(--ref-orange);
  color: var(--ref-white);
}

.ref-carousel-arrow--prev { left: 4px; }
.ref-carousel-arrow--next { right: 4px; }

.ref-testimonial-track {
  display: flex;
  gap: 16px;
  transition: transform 0.45s ease;
}

.ref-testimonial-track [data-carousel-slide] {
  flex: 0 0 calc((100% - 2 * 16px) / 3);
  min-width: 0;
  display: flex;
}

@media (max-width: 960px) {
  .ref-testimonial-track [data-carousel-slide] {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

@media (max-width: 640px) {
  .ref-testimonial-track [data-carousel-slide] {
    flex: 0 0 100%;
  }
}

.ref-testimonial-grid article {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ref-testimonial-grid > article > i {
  color: var(--ref-orange);
  font-size: 22px;
}

.ref-testimonial-grid p {
  min-height: 78px;
  margin: 14px 0 18px;
  color: var(--ref-ink);
  font-size: 14px;
}

.ref-testimonial-grid div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  margin-top: auto;
}

.ref-testimonial-grid img {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.ref-testimonial-grid strong {
  color: var(--ref-navy-dark);
  line-height: 1.1;
}

.ref-testimonial-grid small {
  color: var(--ref-muted);
  font-size: 11px;
}

.ref-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.ref-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ref-line);
  cursor: pointer;
  border: none;
  padding: 0;
}

.ref-dots span.is-active {
  background: var(--ref-orange);
}

.ref-knowledge {
  background: #f8fafd00;
}

.ref-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.ref-article-grid article {
  overflow: hidden;
}

.ref-article-grid img {
  width: 100%;
  height: 208px;
  object-fit: cover;
}

.ref-article-grid div {
  padding: 22px;
}

.ref-article-grid span {
  display: inline-block;
  margin-right: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: -20px;
  background: #501ddd;
  padding: 5px 10px;
  border-radius: 15px;
}

.ref-article-grid small {
  color: var(--ref-muted);
  font-size: 12px;
}

.ref-article-grid h3 {
  margin: 14px 0 9px;
  color: var(--ref-navy-dark);
  font-size: 15px;
  line-height: 1.24;
  font-weight: 600;
}

.ref-article-grid p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 13px;
}

.ref-final-cta {
  padding-bottom: 44px;
}

.ref-final-cta__inner {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 10px 50px;
  border-radius: 10px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.ref-final-cta img {
  width: 82px;
  height: 82px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.ref-final-cta h2 {
  margin: 0 0 8px;
  color: var(--ref-white);
  font-size: 25px;
}

.ref-final-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.ref-final-cta p span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 12px 2px;
  border-radius: 50%;
  background: var(--ref-orange);
}

.ref-footer {
  padding: 42px 0;
  background: var(--ref-white);
  color: var(--ref-ink);
  border-top: 1px solid var(--ref-line);
}

.ref-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(4, minmax(140px, 1fr));
  gap: 32px;
}

/* The footer logo mark is a self-contained icon graphic (no baked-in text), so it
   no longer needs the white card that used to give white-on-transparent text
   somewhere to sit on top of the dark footer. */
.ref-footer .ref-logo img {
  margin-bottom: 0;
}

.ref-footer h3 {
  margin: 0 0 14px;
  color: var(--ref-orange);
  font-size: 15px;
}

.ref-footer p,
.ref-footer a {
  display: block;
  margin: 0 0 8px;
  color: var(--ref-ink);
  font-size: 13px;
}

.ref-footer i {
  width: 20px;
  color: var(--ref-orange);
}

.ref-footer-social {
  display: flex;
  gap: 12px;
  margin: 14px 0 4px;
}

.ref-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 5px;
}

.ref-footer-social a i {
  width: auto;
  color: #ffffff;
  font-size: 16px;
}

/* Identity-based, not nth-child — nth-child assigned colors by position, so
   hiding any one icon (no URL set for that platform) shifted every color
   after it onto the wrong icon. */
.ref-footer-social a.ref-footer-social--linkedin { background: #0a66c2; }
.ref-footer-social a.ref-footer-social--facebook { background: #1877f2; }
.ref-footer-social a.ref-footer-social--youtube { background: #ff0000; }
.ref-footer-social a.ref-footer-social--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #515bd4); }

.ref-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: var(--ref-shadow);
}

.ref-whatsapp img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

/* The mobile sidebar panel gets its own stacking context from its
   translateX transform, so its z-index no longer compares against this
   button's the way plain z-index numbers would suggest — it can still paint
   on top of the panel. Hiding it outright while the sidebar is open is the
   reliable fix. */
body.nav-is-open .ref-whatsapp {
  display: none;
}

/* Once the sidebar has its own close button, the page header's hamburger
   button underneath is redundant and was only showing through (thanks to
   the transform stacking-context quirk noted above) as a confusing second
   × button. Hide it while the sidebar is open. */
body.nav-is-open .ref-nav__toggle {
  display: none;
}

.ref-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.08);
}

.ref-whatsapp-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

/* The 8px shadow tuned for a white background reads as a visible ring on the
   dark navy closing-CTA banner, and its default 56px height sat taller than
   the 44px "Book a Slot" button beside it. Match the button's height and
   drop the shadow so the two sit level with no halo. */
.ref-final-cta .ref-whatsapp-icon {
  width: 44px;
  height: 44px;
  box-shadow: none;
}

/* .ref-final-cta img sets a fixed 82x82 white-ring frame meant for the
   specialist's circular photo — it also matches this icon's own <img>
   since that's an <img> inside .ref-final-cta too. Reset it back down. */
.ref-final-cta .ref-whatsapp-icon img {
  width: 100%;
  height: 100%;
  border: none;
}

/* .contact-ref-hero__media img sets a hard height:280px for its mobile hero
   photo — since that's a bare descendant selector, it also matches this icon
   nested inside the WhatsApp card further down the same container and wins
   on source order. Pin the icon's own size back down wherever it's nested
   inside a wider media block like that. */
.contact-ref-whatsapp-card .ref-whatsapp-icon img {
  width: 56px;
  height: 56px;
}

@media (max-width: 1180px) {
  .ref-container {
    width: min(100% - 42px, 1450px);
  }

  .ref-topbar a:nth-of-type(n + 2) {
    display: none;
  }

  .ref-nav__links {
    gap: 16px;
    font-size: 13px;
  }

  .ref-logo img {
    width: 40px;
    height: 40px;
  }

  .ref-logo__name {
    font-size: 17px;
  }

  .ref-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ref-trust-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ref-core-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ref-proof__grid,
  .ref-case {
    grid-template-columns: 1fr;
  }

  .ref-case img {
    height: 230px;
  }

  /* Grid items default to min-width:auto, so .ref-testimonials was refusing
     to shrink below its content's intrinsic width and overflowing past the
     single-column track above — pushing the carousel's right arrow off the
     edge of the screen. */
  .ref-testimonials {
    min-width: 0;
  }
}

@media (max-width: 960px) {
  .ref-topbar__inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 7px 0;
  }

  .ref-topbar span:first-child,
  .ref-topbar a {
    display: none;
  }

  .ref-nav {
    min-height: 76px;
    gap: 10px;
  }

  .ref-nav__toggle {
    display: inline-flex;
    order: 2;
    padding: 0;
    width: 42px;
    justify-content: center;
    flex-shrink: 0;
  }

  .ref-nav__toggle span {
    display: none;
  }

  .ref-nav__links > .ref-btn {
    flex-shrink: 1;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }

  /* Collapsed (default): the link list itself generates no box, so its
     children become direct flex items of .ref-nav — every link hides except
     the "Speak to an Expert" button, which then sits in the header row
     itself, ahead of the hamburger toggle (order: 1 vs 2). Open state below
     restores the normal dropdown-panel behaviour with everything visible. */
  .ref-nav__links {
    display: contents;
  }

  .ref-nav__links > a:not(.ref-btn),
  .ref-nav__links > .ref-nav__item {
    display: none;
  }

  .ref-nav__links > .ref-btn {
    order: 1;
    width: auto;
  }

  .ref-nav__links > .ref-nav__close {
    display: none;
  }

  /* JS mounts the panel with .is-ready (a real fixed box, parked off-screen
     to the right), then adds .is-open on the next frame so the browser
     animates the transform change: slides in from the right. Closing swaps
     .is-open for .is-closing, animating out past the left edge, then strips
     .is-ready once that transition ends. */
  .ref-nav__links.is-ready {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 82vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    background: var(--ref-white);
    box-shadow: var(--ref-shadow);
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
  }

  .ref-nav__links.is-ready > .ref-nav__close {
    display: flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border: 1px solid var(--ref-line);
    border-radius: 6px;
    background: var(--ref-white);
    color: var(--ref-navy-dark);
    font-size: 16px;
  }

  .ref-nav__links.is-open {
    transform: translateX(0);
    transition: transform 0.32s ease;
  }

  .ref-nav__links.is-closing {
    transform: translateX(-100vw);
    transition: transform 0.32s ease;
  }

  .ref-nav__links.is-ready > a:not(.ref-btn) {
    display: flex;
    align-items: center;
  }

  .ref-nav__links.is-ready > .ref-nav__item {
    display: flex;
  }

  .ref-nav__links.is-ready > .ref-btn {
    display: none;
  }

  .ref-nav__backdrop {
    display: none;
  }

  .ref-nav__backdrop.is-ready {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 20, 45, 0.45);
    opacity: 0;
  }

  .ref-nav__backdrop.is-open {
    opacity: 1;
    transition: opacity 0.32s ease;
  }

  .ref-nav__backdrop.is-closing {
    opacity: 0;
    transition: opacity 0.32s ease;
  }

  .ref-nav__toggle {
    position: relative;
    z-index: 65;
  }

  .ref-nav__links a:not(.ref-btn) {
    min-height: 44px;
  }

  .ref-nav__links a.active::after,
  .ref-nav__links a:not(.ref-btn):hover::after {
    bottom: 6px;
  }

  .ref-nav__item {
    flex-wrap: wrap;
  }

  .ref-nav__caret {
    min-height: 44px;
  }

  .ref-nav__dropdown {
    position: static;
    flex: 1 0 100%;
    min-width: 0;
    padding: 0 0 6px 18px;
    box-shadow: none;
  }

  .ref-nav__dropdown a {
    min-height: 38px !important;
  }

  .ref-hero__grid {
    grid-template-columns: 1fr;
    padding-top: 38px;
  }

  .ref-hero__copy {
    padding-right: 0;
  }

  .ref-hero__visual {
    min-height: auto;
    margin: 30px 0 0;
  }

  .ref-hero__visual img {
    height: 390px;
  }

  .ref-trust-card {
    top: 42px;
    right: 30px;
  }

  .ref-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 20px;
  }

  .ref-search {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ref-search label {
    justify-content: flex-start;
    text-align: left;
  }

  .ref-search .ref-btn,
  .ref-search input {
    border-radius: 6px;
  }

  .ref-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 36px;
  }

  .ref-core-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ref-process::before {
    display: none;
  }

  .ref-process article:not(:last-child)::before,
  .ref-process article:not(:last-child)::after {
    display: none;
  }

  .ref-testimonial-grid,
  .ref-article-grid {
    grid-template-columns: 1fr;
  }

  .ref-final-cta__inner {
    grid-template-columns: 82px 1fr;
  }

  .ref-final-cta__inner .ref-actions {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .ref-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ref-container {
    width: min(100% - 24px, 1450px);
  }

  .ref-logo img {
    width: 36px;
    height: 36px;
  }

  .ref-footer__services {
    display: none;
  }

  .ref-logo__name {
    font-size: 16px;
  }

  .ref-logo__tagline {
    display: block;
    color: #637089;
    font-size: 8px;
    line-height: 1.1;
  }

  .ref-topbar span:nth-child(2) {
    order: 2;
  }

  .ref-topbar span:nth-child(3) {
    order: 1;
  }

  .ref-hero h1 {
    font-size: 38px;
  }

  .ref-actions,
  .ref-btn {
    width: 100%;
  }

  .ref-hero__visual img {
    height: 300px;
  }

  .ref-trust-card {
    display: none;
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  .ref-service-grid,
  .ref-trust-strip__grid,
  .ref-process,
  .ref-final-cta__inner {
    grid-template-columns: 1fr;
  }

  /* Matches Home's footer treatment: brand block and Contact Us span full
     width, Quick Links/Resources pair up in between (Our Services is
     hidden on mobile, so it drops out of the grid entirely). Every other
     page previously fell back to a single stacked column here instead. */
  .ref-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
  }

  .ref-footer__grid > div:first-child,
  .ref-footer__grid > div:last-child {
    grid-column: 1 / -1;
  }

  /* Brand block (logo, description, socials, copyright) moves to the very
     end of the footer instead of leading it — the link columns come first. */
  .ref-footer__grid > div:first-child {
    order: 3;
  }

  .ref-footer__grid > div:last-child {
    order: 2;
  }

  .ref-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ref-trust-strip__grid div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .ref-hero-stats div {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 4px 6px;
    border-right: 0;
    text-align: center;
  }

  .ref-hero-stats div:first-child {
    padding-left: 6px;
  }

  .ref-hero-stats i {
    font-size: 20px;
  }

  .ref-hero-stats__icon-img {
    width: 20px;
    height: 20px;
  }

  .ref-hero-stats p {
    font-size: 10.5px;
  }

  .ref-section {
    padding: 44px 0;
  }

  .ref-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Generic (not body.ref-home-scoped) so every page sharing this component
     gets the same compact mobile treatment already proven on Home — avatar
     + text in a row, the two CTA buttons side by side below. */
  .ref-final-cta {
    padding: 8px 0 10px;
  }

  .ref-final-cta__inner {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px;
    text-align: left;
  }

  .ref-final-cta__inner img {
    width: 48px;
    height: 48px;
  }

  .ref-final-cta h2 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .ref-final-cta p {
    font-size: 9px !important;
  }

  .ref-final-cta__inner .ref-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .ref-final-cta__inner .ref-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 8px;
    font-size: 10.5px !important;
    white-space: nowrap;
  }

  .ref-whatsapp {
    right: 16px;
    bottom: 16px;
  }
}

.about-ref-page {
  background: var(--ref-white);
}

.about-ref-kicker {
  display: inline-block;
  color: var(--ref-orange);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
  text-transform: uppercase;
}

.about-ref-hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #edf2f8;
  background: var(--ref-white);
}

.about-ref-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  min-height: 660px;
}

.about-ref-hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 780px;
  padding: 64px 26px 72px 0;
}

.about-ref-hero h1 {
  margin: 34px 0 28px;
  color: var(--ref-navy-dark);
  font-size: clamp(46px, 3vw, 58px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.about-ref-hero p {
  max-width: 620px;
  margin: 0;
  color: var(--ref-ink);
  font-size: 21px;
  line-height: 1.72;
  font-weight: 500;
}

.about-ref-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 54px;
}

.about-ref-actions .ref-btn {
  min-width: 250px;
  min-height: 74px;
  font-size: 18px;
  border-radius: 8px;
}

.about-ref-hero__media {
  position: absolute;
  top: 0;
  right: calc((100vw - min(1450px, calc(100vw - 80px))) / -2);
  bottom: 0;
  z-index: 1;
  width: min(59vw, 1780px);
  overflow: hidden;
}

.about-ref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.6) 18%, rgba(255, 255, 255, 0) 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, #ffffff 100%);
}

.about-ref-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.about-ref-who {
  padding: 76px 0 70px;
}

.about-ref-who__grid {
  display: grid;
  grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
  align-items: start;
  gap: clamp(56px, 6vw, 120px);
}

.about-ref-photo img {
  width: 100%;
  aspect-ratio: 1.12 / 1;
  object-fit: cover;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 31, 77, 0.12);
}

.about-ref-who__copy h2,
.about-ref-section-head h2 {
  margin: 26px 0 28px;
  color: var(--ref-navy-dark);
  font-size: clamp(34px, 2.9vw, 54px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.8px;
}

.about-ref-who__copy p {
  max-width: 840px;
  margin: 0 0 34px;
  color: var(--ref-ink);
  font-size: 20px;
  line-height: 1.78;
  font-weight: 500;
}

.about-ref-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 50px;
}

.about-ref-values article,
.about-ref-choose__grid article {
  min-height: 214px;
  padding: 28px 22px;
  border: 1px solid var(--ref-line);
  border-radius: 12px;
  background: var(--ref-white);
  box-shadow: 0 10px 28px rgba(0, 31, 77, 0.06);
}

.about-ref-values i,
.about-ref-choose__grid i {
  color: var(--ref-orange);
  font-size: 38px;
}

.about-ref-values h3,
.about-ref-choose__grid h3 {
  margin: 30px 0 13px;
  color: var(--ref-navy-dark);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 700;
}

.about-ref-values p,
.about-ref-choose__grid p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.75;
  font-weight: 500;
}

.about-ref-stats {
  padding: 18px 0 92px;
}

.about-ref-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  min-height: 226px;
  border: 2px solid #103467;
  border-radius: 18px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 18px 36px rgba(0, 31, 77, 0.18);
}

.about-ref-stats__grid div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 26px 18px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.about-ref-stats__grid div:last-child {
  border-right: 0;
}

.about-ref-stats__grid i {
  color: var(--ref-white);
  font-size: 46px;
}

.about-ref-stats__icon-img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.about-ref-stats__grid strong {
  display: block;
  color: var(--ref-white);
  font-size: clamp(36px, 2.7vw, 52px);
  line-height: 1.05;
  font-weight: 700;
}

.about-ref-stats__grid span {
  color: var(--ref-white);
  font-size: 22px;
  line-height: 1.28;
  font-weight: 500;
}

.about-ref-journey {
  padding: 12px 0 88px;
  text-align: center;
}

.about-ref-section-head {
  max-width: 920px;
  margin: 0 auto 58px;
  text-align: center;
}

.about-ref-section-head h2 {
  margin-bottom: 0;
}

.about-ref-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 38px;
}

.about-ref-timeline article {
  position: relative;
  text-align: center;
}

.about-ref-timeline article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 52px;
  left: calc(50% + 62px);
  width: calc(100% - 86px);
  border-top: 3px dotted #9da9bb;
}

.about-ref-timeline article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 45px;
  right: -25px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid var(--ref-navy-dark);
}

.about-ref-timeline__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 106px;
  height: 106px;
  border: 4px solid #12396b;
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 11px 22px rgba(0, 31, 77, 0.16);
}

.about-ref-timeline__icon i {
  font-size: 42px;
}

.about-ref-timeline__icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.about-ref-timeline h3 {
  margin: 28px 0 18px;
  color: var(--ref-navy-dark);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

.about-ref-timeline p {
  max-width: 240px;
  margin: 0 auto;
  color: var(--ref-ink);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 500;
}

.about-ref-choose {
  padding: 0 0 48px;
}

.about-ref-choose__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-width: 1140px;
  margin: 0 auto;
}

.about-ref-choose .about-ref-section-head,
.about-ref-leadership .about-ref-section-head,
.about-ref-testimonials .about-ref-section-head {
  margin-bottom: 24px;
}

.about-ref-choose .about-ref-section-head h2,
.about-ref-leadership .about-ref-section-head h2,
.about-ref-testimonials .about-ref-section-head h2 {
  margin-top: 11px;
  font-size: clamp(24px, 1.55vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.4px;
}

.about-ref-choose__grid article {
  min-height: 162px;
  padding: 22px 16px 20px;
  text-align: center;
  border-radius: 8px;
}

.about-ref-choose__grid i {
  font-size: 30px;
  color: var(--ref-navy-dark);
}

.about-ref-choose__grid h3 {
  margin: 16px 0 10px;
  font-size: 14px;
  line-height: 1.28;
}

.about-ref-choose__grid p {
  font-size: 11px;
  line-height: 1.55;
}

.about-ref-leadership {
  padding: 0 0 46px;
}

.about-ref-leaders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1130px;
  margin: 0 auto;
}

.about-ref-leaders article {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 18px;
  min-height: 176px;
  padding: 10px;
  border: 1px solid var(--ref-line);
  border-radius: 9px;
  background: var(--ref-white);
  box-shadow: 0 8px 24px rgba(0, 31, 77, 0.05);
}

.about-ref-leaders img {
  width: 126px;
  height: 156px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
}

.about-ref-leaders h3 {
  margin: 10px 0 5px;
  color: var(--ref-navy-dark);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.about-ref-leaders strong {
  display: block;
  margin-bottom: 13px;
  color: var(--ref-navy-dark);
  font-size: 12px;
  font-weight: 600;
}

.about-ref-leaders p {
  margin: 0 0 12px;
  color: var(--ref-ink);
  font-size: 11px;
  line-height: 1.6;
  font-weight: 500;
}

.about-ref-leaders a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  font-size: 10px;
}

.about-ref-testimonials {
  padding: 0 0 76px;
}

.about-ref-testimonial-carousel {
  position: relative;
}

.about-ref-testimonial-viewport {
  overflow: hidden;
  margin: 0 42px;
}

.about-ref-testimonial-track {
  display: flex;
  gap: 18px;
  transition: transform 0.45s ease;
}

.about-ref-testimonial-track [data-carousel-slide] {
  flex: 0 0 calc((100% - 2 * 18px) / 3);
  min-width: 0;
  display: flex;
}

@media (max-width: 960px) {
  .about-ref-testimonial-track [data-carousel-slide] {
    flex: 0 0 calc((100% - 18px) / 2);
  }
}

@media (max-width: 640px) {
  .about-ref-testimonial-track [data-carousel-slide] {
    flex: 0 0 100%;
  }
}

.about-ref-testimonial-grid article {
  min-height: 214px;
  padding: 24px 28px 20px;
  border: 1px solid var(--ref-line);
  border-radius: 9px;
  background: var(--ref-white);
  box-shadow: 0 8px 24px rgba(0, 31, 77, 0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.about-ref-testimonial-grid > article > i {
  display: block;
  margin-bottom: 16px;
  color: var(--ref-navy-dark);
  font-size: 22px;
}

.about-ref-testimonial-grid p {
  margin: 0 0 22px;
  color: var(--ref-ink);
  font-size: 13px;
  line-height: 1.62;
  font-weight: 500;
}

.about-ref-testimonial-grid div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.about-ref-testimonial-grid img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.about-ref-testimonial-grid span {
  display: block;
  color: var(--ref-ink);
  font-size: 11px;
  line-height: 1.35;
}

.about-ref-testimonial-grid strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ref-navy-dark);
  font-size: 11px;
  font-weight: 700;
}

.about-ref-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.about-ref-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9d3df;
  cursor: pointer;
  border: none;
  padding: 0;
}

.about-ref-dots span.is-active {
  background: var(--ref-navy-dark);
}

@media (max-width: 1180px) {
  .about-ref-hero__inner {
    min-height: 620px;
  }

  .about-ref-hero h1 {
    font-size: clamp(44px, 4.2vw, 60px);
  }

  .about-ref-hero p,
  .about-ref-who__copy p {
    font-size: 18px;
  }

  .about-ref-values,
  .about-ref-choose__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-ref-leaders,
  .about-ref-testimonial-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .about-ref-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 34px;
  }

  .about-ref-timeline article:nth-child(3)::before,
  .about-ref-timeline article:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 960px) {
  .about-ref-hero__inner,
  .about-ref-who__grid {
    grid-template-columns: 1fr;
  }

  .about-ref-hero__inner {
    min-height: auto;
    padding-top: 46px;
  }

  .about-ref-hero__copy {
    max-width: 100%;
    padding: 0 0 42px;
  }

  .about-ref-hero__media {
    position: relative;
    right: auto;
    width: 100%;
    height: 390px;
    margin-bottom: 22px;
  }

  .about-ref-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-ref-stats__grid div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  }

  .about-ref-stats__grid div:nth-child(2n) {
    border-right: 0;
  }

  .about-ref-stats__grid div:last-child {
    grid-column: 1 / -1;
    border-bottom: 0;
  }
}

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .ref-container {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .about-ref-page {
    overflow: hidden;
  }

  .about-ref-kicker {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .about-ref-hero__copy,
  .about-ref-who__copy {
    min-width: 0;
    width: 100%;
    max-width: calc(100vw - 40px);
  }

  .about-ref-hero h1 {
    margin-top: 22px;
    max-width: 100%;
    font-size: 31px;
    letter-spacing: -0.6px;
    overflow-wrap: normal;
  }

  .about-ref-hero p,
  .about-ref-who__copy p {
    max-width: calc(100vw - 52px);
    font-size: 14px;
    line-height: 1.65;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .about-ref-actions,
  .about-ref-actions .ref-btn {
    width: 100%;
  }

  .about-ref-actions .ref-btn {
    min-width: 0;
    min-height: 58px;
    font-size: 15px;
  }

  .about-ref-hero__media {
    height: 280px;
  }

  .about-ref-hero__media img {
    object-position: center;
  }

  .about-ref-who {
    padding: 54px 0 46px;
  }

  .about-ref-who__copy h2,
  .about-ref-section-head h2 {
    font-size: 30px;
    letter-spacing: -0.4px;
  }

  .about-ref-choose__grid,
  .about-ref-leaders,
  .about-ref-testimonial-grid,
  .about-ref-stats__grid,
  .about-ref-timeline {
    grid-template-columns: 1fr;
  }

  /* 2x2 grid instead of a single stacked column. */
  .about-ref-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-ref-values article,
  .about-ref-choose__grid article {
    min-height: auto;
  }

  .about-ref-leaders article {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .about-ref-leaders img {
    width: 96px;
    height: 120px;
  }

  .about-ref-stats {
    padding-bottom: 58px;
  }

  .about-ref-stats__grid div {
    border-right: 0;
    padding: 18px 14px;
    gap: 6px;
  }

  .about-ref-stats__grid i {
    font-size: 22px;
  }

  .about-ref-stats__icon-img {
    width: 22px;
    height: 22px;
  }


  .about-ref-timeline article::before,
  .about-ref-timeline article::after {
    display: none;
  }
}

/* Shared typography scale for every PHP page. */
:root {
  --site-text-size: 15px;
  --site-text-line: 1.6;
  --site-small-size: 13px;
  --site-kicker-size: 15px;
  --site-card-title-size: 18px;
  --site-section-title-size: clamp(25px, 2.1vw, 30px);
  --site-hero-title-size: clamp(44px, 3vw, 56px);
}

body {
  font-size: var(--site-text-size);
  line-height: var(--site-text-line);
}

.topbar,
.ref-topbar {
  font-size: 12px;
}

.nav__links,
.ref-nav__links {
  font-size: 14px;
}

.btn,
.ref-btn,
.pill,
.ref-core a,
.ref-service-grid a {
  font-size: var(--site-text-size);
}

.hero h1,
.ref-hero h1,
.about-ref-hero h1 {
  font-size: var(--site-hero-title-size);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.section h2,
.section__head h2,
.ref-section h2,
.ref-title-row h2,
.ref-section-head h2,
.about-ref-who__copy h2,
.about-ref-section-head h2 {
  font-size: var(--site-section-title-size);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: 0;
}

.eyebrow,
.ref-section-head span,
.ref-title-row span,
.about-ref-kicker {
  font-size: var(--site-kicker-size);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 2px;
}

.lead,
.hero__copy p,
.ref-hero__copy p,
.about-ref-hero p,
.about-ref-who__copy p,
.section__head p,
.ref-section-head p,
.card p,
.service-card p,
.service-row p,
.ref-service-grid p,
.ref-core-grid p,
.ref-process p,
.ref-article-grid p,
.about-ref-values p,
.about-ref-choose__grid p,
.about-ref-testimonial-grid p {
  font-size: var(--site-text-size);
  line-height: var(--site-text-line);
  font-weight: 500;
}

h3,
.card h3,
.service-card h3,
.service-row h3,
.ref-service-grid h3,
.ref-core-grid h3,
.ref-process h3,
.ref-article-grid h3,
.about-ref-values h3,
.about-ref-choose__grid h3 {
  font-size: var(--site-card-title-size);
  line-height: 1.24;
  font-weight: 600;
}

.about-ref-choose__grid article {
  min-height: 196px;
  padding: 28px 20px 24px;
}

.about-ref-choose__grid i {
  font-size: 38px;
}

.about-ref-choose__grid h3 {
  margin: 22px 0 12px;
}

.about-ref-choose__grid p {
  max-width: 190px;
  margin-right: auto;
  margin-left: auto;
}

.about-ref-leaders h3,
.about-ref-testimonial-grid strong {
  font-size: 13px;
  line-height: 1.3;
}

.about-ref-leaders strong,
.about-ref-testimonial-grid span {
  font-size: 12px;
}

.about-ref-leaders p {
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  :root {
    --site-hero-title-size: clamp(34px, 5.4vw, 44px);
    --site-section-title-size: clamp(24px, 4vw, 30px);
  }
}

@media (max-width: 640px) {
  :root {
    --site-text-size: 14px;
    --site-kicker-size: 13px;
    --site-card-title-size: 17px;
    --site-section-title-size: 28px;
    --site-hero-title-size: 31px;
  }

  .hero h1,
  .ref-hero h1,
  .about-ref-hero h1 {
    line-height: 1.16;
    letter-spacing: -0.6px;
  }

  .about-ref-choose__grid article {
    min-height: auto;
  }

  .about-ref-choose__grid p {
    max-width: 260px;
  }
}

.services-ref-page {
  background: var(--ref-white);
  color: var(--ref-ink);
  overflow-x: hidden;
}

.services-ref-kicker,
.services-ref-section-head span {
  display: block;
  margin-bottom: 9px;
  color: var(--ref-orange);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
}

.services-ref-hero {
  overflow: hidden;
  background: var(--ref-white);
}

.services-ref-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(560px, 1.3fr);
  align-items: center;
  min-height: 535px;
}

.services-ref-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
  padding: 64px 0 104px;
}

.services-ref-hero h1 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-family: "Poppins", sans-serif;
  font-size: clamp(44px, 3vw, 56px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.16;
}

.services-ref-hero__copy p {
  max-width: 575px;
  margin: 24px 0 0;
  color: var(--ref-ink);
  font-size: 16px;
  line-height: 1.72;
}

.services-ref-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.services-ref-actions .ref-btn {
  min-width: 236px;
}

.services-ref-hero__media {
  position: absolute;
  top: 0;
  right: calc((100vw - min(1450px, calc(100vw - 80px))) / -2);
  bottom: 0;
  width: min(58vw, 870px);
}

.services-ref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ref-white) 0%, rgba(255, 255, 255, 0.92) 10%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(0deg, var(--ref-white) 0%, rgba(255, 255, 255, 0) 18%);
  pointer-events: none;
}

.services-ref-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.services-ref-trust-card {
  position: absolute;
  z-index: 2;
  top: 94px;
  right: 70px;
  width: 278px;
  padding: 22px 28px;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: 0 14px 38px rgba(0, 31, 77, 0.14);
}

.services-ref-trust-card div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  min-height: 68px;
  border-bottom: 1px solid var(--ref-line);
}

.services-ref-trust-card div:last-child {
  border-bottom: 0;
}

.services-ref-trust-card i {
  color: var(--ref-orange);
  font-size: 25px;
}

.services-ref-trust-card strong,
.services-ref-trust-card span {
  display: block;
}

.services-ref-trust-card strong {
  color: var(--ref-navy-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.services-ref-trust-card span {
  color: var(--ref-ink);
  font-size: 13px;
  line-height: 1.6;
}

.services-ref-hero-stats {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 0.139fr));
  min-height: 80px;
  margin-top: -120px;
  padding: 14px 0;
  border-top: 1px solid #e3e8ef00;
  border-bottom: 1px solid var(--ref-line);
  background: rgba(255, 255, 255, 0);
}

.services-ref-hero-stats div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 22px;
  border-right: 1px solid var(--ref-line);
}

.services-ref-hero-stats div:last-child {
  border-right: 0;
}

.services-ref-hero-stats i {
  color: var(--ref-orange);
  font-size: 32px;
}

.services-ref-hero-stats strong {
  display: block;
  color: var(--ref-navy-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
}

.services-ref-hero-stats span {
  color: var(--ref-ink);
  font-size: 13px;
  line-height: 1.45;
}

.services-ref-section {
  padding: 42px 0;
}

.services-ref-section-head {
  max-width: 850px;
  margin: 0 auto 30px;
  text-align: center;
}

.services-ref-section-head h2,
.services-ref-why h2,
.services-ref-final-cta h2 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(25px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.18;
}

.services-ref-categories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.services-ref-categories article,
.services-ref-details article,
.services-ref-industry-grid article,
.services-ref-testimonial-grid article {
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
}

.services-ref-categories article {
  display: flex;
  flex-direction: column;
  min-height: 205px;
  padding: 22px 18px 20px;
}

.services-ref-categories i {
  color: var(--ref-orange);
  font-size: 30px;
}

.services-ref-categories h3,
.services-ref-details h3,
.services-ref-process h3 {
  margin: 14px 0 9px;
  color: var(--ref-navy-dark);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.24;
}

.services-ref-categories p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.6;
}

.services-ref-categories a,
.services-ref-details a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  color: var(--ref-navy-dark);
  font-size: 14px;
  font-weight: 700;
}

.services-ref-details-section,
.services-ref-faq {
  background: #f8fafd;
}

.services-ref-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.services-ref-details article {
  overflow: hidden;
}

.services-ref-details img {
  display: block;
  width: 100%;
  aspect-ratio: 1.55;
  object-fit: cover;
}

.services-ref-details article > div {
  padding: 18px 20px 22px;
}

.services-ref-details ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-ref-details li {
  position: relative;
  padding-left: 22px;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.45;
}

.services-ref-details li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--ref-orange);
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
}

.services-ref-featured {
  padding: 6px 0 10px;
  background: var(--ref-white);
}

.services-ref-featured__head {
  margin-bottom: 8px;
}

.services-ref-featured__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
}

.services-ref-featured__inner div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 18px;
  border-right: 1px solid #dfe6ef;
}

.services-ref-featured__inner div:last-child {
  border-right: 0;
}

.services-ref-featured i {
  color: var(--ref-orange);
  font-size: 24px;
}

.services-ref-featured strong {
  color: var(--ref-navy-dark);
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.services-ref-featured span {
  display: block;
  color: var(--ref-ink);
  font-size: 11px;
  line-height: 1.35;
}

.services-ref-process-section {
  padding: 8px 0 10px;
}

.services-ref-process-section .services-ref-section-head {
  margin-bottom: 18px;
}

.services-ref-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.services-ref-process article {
  position: relative;
  min-height: 140px;
  padding-top: 70px;
}

.services-ref-process article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(50% + 34px);
  width: calc(100% - 50px);
  border-top: 2px dotted #b8c3d4;
}

.services-ref-process article:not(:last-child)::after {
  content: "\f061";
  position: absolute;
  top: 19px;
  right: -10px;
  color: #9aa8bc;
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
}

.services-ref-process__icon {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.18);
}

.services-ref-process__icon i {
  color: var(--ref-white);
  font-size: 22px;
}

.services-ref-process span {
  position: absolute;
  top: 88px;
  left: 6px;
  color: var(--ref-orange);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.services-ref-process h3 {
  margin: 0 0 6px 44px;
  font-size: 15px;
}

.services-ref-process p {
  margin: 0 0 0 44px;
  color: var(--ref-ink);
  font-size: 12px;
  line-height: 1.55;
}

.services-ref-why {
  padding: 12px 0 24px;
  background: var(--ref-white);
}

.services-ref-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 680px);
  gap: 58px;
  align-items: center;
  justify-content: center;
}

.services-ref-why p {
  max-width: 520px;
  margin: 12px 0 0;
  color: var(--ref-ink);
  font-size: 15px;
  line-height: 1.7;
}

.services-ref-why ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 34px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.services-ref-why li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ref-navy-dark);
  font-size: 13px;
  font-weight: 600;
}

.services-ref-why li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(52, 118, 254, 0.12);
  color: var(--ref-orange);
  font-size: 12px;
}

.services-ref-why__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 8px;
  background: var(--ref-navy-dark);
}

.services-ref-why__stats div {
  min-height: 150px;
  padding: 36px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 0;
  text-align: center;
}

.services-ref-why__stats div:last-child {
  border-right: 0;
}

.services-ref-why__stats strong {
  display: block;
  color: var(--ref-orange);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.services-ref-why__stats span {
  display: block;
  margin-top: 12px;
  color: var(--ref-white);
  font-size: 14px;
  font-weight: 600;
}

.services-ref-industry-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

.services-ref-industries {
  padding: 20px 0 26px;
  background: var(--ref-white);
}

.services-ref-industries .services-ref-section-head {
  margin-bottom: 18px;
}

.services-ref-industry-grid article {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 7px;
  min-height: 64px;
  padding: 11px 8px;
  text-align: center;
}

.services-ref-industry-grid i {
  color: var(--ref-navy-dark);
  font-size: 22px;
}

.services-ref-industry-grid span {
  color: var(--ref-navy-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}

.services-ref-testimonials {
  background: var(--ref-white);
}

.services-ref-testimonial-carousel {
  overflow: hidden;
}

.services-ref-testimonial-track {
  display: flex;
  transition: transform 0.45s ease;
}

.services-ref-testimonial-track [data-carousel-slide] {
  flex: 0 0 100%;
  min-width: 100%;
}

.services-ref-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.services-ref-testimonial-grid article {
  padding: 24px;
}

.services-ref-testimonial-grid > article > i {
  color: var(--ref-navy-dark);
  font-size: 22px;
}

.services-ref-testimonial-grid p {
  margin: 12px 0 20px;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.65;
}

.services-ref-testimonial-grid div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.services-ref-testimonial-grid img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.services-ref-testimonial-grid span,
.services-ref-testimonial-grid strong {
  display: block;
}

.services-ref-testimonial-grid strong {
  color: var(--ref-navy-dark);
  font-size: 13px;
  font-weight: 700;
}

.services-ref-testimonial-grid span {
  color: var(--ref-ink);
  font-size: 12px;
  line-height: 1.45;
}

.services-ref-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}

.services-ref-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c6d0df;
  cursor: pointer;
  border: none;
  padding: 0;
}

.services-ref-dots span.is-active {
  background: var(--ref-navy-dark);
}

.services-ref-faq {
  padding: 18px 0 8px;
  background: var(--ref-white);
}

.services-ref-faq .services-ref-section-head {
  margin-bottom: 22px;
}

.services-ref-faq-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.services-ref-faq-help {
  padding-top: 2px;
}

.services-ref-faq-help strong,
.services-ref-faq-help span {
  display: block;
  color: var(--ref-navy-dark);
  font-size: 13px;
  line-height: 1.25;
}

.services-ref-faq-help strong {
  font-weight: 600;
}

.services-ref-faq-help span {
  margin-bottom: 16px;
  font-weight: 700;
}

.services-ref-faq-help .ref-btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 13px !important;
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.08);
}

.services-ref-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}

.services-ref-faq-grid details {
  border: 1px solid #dfe6ef;
  border-radius: 4px;
  background: var(--ref-white);
  box-shadow: 0 4px 12px rgba(0, 31, 77, 0.05);
}

.services-ref-faq-grid summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 42px;
  padding: 10px 18px;
  color: var(--ref-navy-dark);
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.services-ref-faq-grid summary::-webkit-details-marker,
.services-ref-faq-grid summary::marker {
  display: none;
  content: '';
}

.services-ref-faq-grid summary i {
  color: var(--ref-navy-dark);
  font-size: 12px;
  transition: transform 0.2s ease;
}

.services-ref-faq-grid details[open] summary i {
  transform: rotate(180deg);
}

.services-ref-faq-grid details p {
  margin: 0;
  padding: 0 18px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ref-muted);
  line-height: 1.6;
}

.services-ref-final-cta {
  padding: 10px 0 8px;
  background: var(--ref-white);
}

.services-ref-final-cta__inner {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 14px 48px;
  border-radius: 10px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.services-ref-final-cta__inner > div:first-child {
  width: 64px;
  height: 64px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

.services-ref-final-cta__inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services-ref-final-cta h2 {
  margin: 0 0 8px;
  color: var(--ref-white);
  font-size: 25px;
}

.services-ref-final-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.6;
}

.services-ref-final-cta__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.services-ref-final-cta__actions .ref-btn {
  min-height: 46px;
  min-width: 188px;
  padding: 0 26px;
}

@media (max-width: 1180px) {
  .services-ref-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(450px, 1fr);
  }

  .services-ref-trust-card {
    right: 30px;
  }

  .services-ref-categories,
  .services-ref-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .services-ref-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .services-ref-hero__inner {
    display: block;
    min-height: auto;
  }

  .services-ref-hero__copy {
    max-width: 100%;
    padding: 52px 0 30px;
  }

  .services-ref-hero__media {
    position: relative;
    right: auto;
    width: 100%;
    height: 440px;
    margin: 0 auto;
  }

  .services-ref-trust-card {
    top: 42px;
    right: 24px;
  }

  .services-ref-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
    background: var(--ref-white);
  }

  .services-ref-hero-stats div:nth-child(2n) {
    border-right: 0;
  }

  .services-ref-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-ref-featured__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-ref-industry-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .services-ref-process article:not(:last-child)::before,
  .services-ref-process article:not(:last-child)::after {
    display: none;
  }

  .services-ref-why__grid,
  .services-ref-faq-layout,
  .services-ref-final-cta__inner {
    grid-template-columns: 1fr;
  }

  .services-ref-faq-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 0;
  }

  .services-ref-faq-help span {
    margin-bottom: 0;
  }

  .services-ref-final-cta__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .services-ref-hero h1 {
    font-size: 31px;
    letter-spacing: -0.6px;
    line-height: 1.16;
  }

  .services-ref-hero__copy p {
    font-size: 14px;
  }

  .services-ref-actions,
  .services-ref-actions .ref-btn,
  .services-ref-final-cta__actions,
  .services-ref-final-cta__actions .ref-btn {
    width: 100%;
  }

  .services-ref-hero__media {
    height: auto;
    aspect-ratio: 1.2;
  }

  .services-ref-trust-card {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 32px);
    margin: -120px auto 20px;
  }

  .services-ref-hero-stats,
  .services-ref-categories,
  .services-ref-details,
  .services-ref-featured__inner,
  .services-ref-process,
  .services-ref-why ul,
  .services-ref-why__stats,
  .services-ref-industry-grid,
  .services-ref-testimonial-grid,
  .services-ref-faq-grid {
    grid-template-columns: 1fr;
  }

  .services-ref-hero-stats div,
  .services-ref-featured__inner div {
    border-right: 0;
    border-bottom: 1px solid var(--ref-line);
  }

  .services-ref-hero-stats div:last-child,
  .services-ref-featured__inner div:last-child {
    border-bottom: 0;
  }

  .services-ref-section {
    padding: 30px 0;
  }

  .services-ref-section-head h2,
  .services-ref-why h2 {
    font-size: 25px;
    line-height: 1.18;
  }

  .services-ref-why__stats div,
  .services-ref-why__stats div:nth-child(2n),
  .services-ref-why__stats div:nth-child(n + 3) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .services-ref-why__stats div:last-child {
    border-bottom: 0;
  }

  .services-ref-final-cta__inner {
    padding: 22px;
  }

  .services-ref-faq-help {
    display: block;
  }

  .services-ref-faq-help span {
    margin-bottom: 16px;
  }
}

.all-ref-page {
  overflow-x: hidden;
  background: var(--ref-white);
  color: var(--ref-ink);
}

.all-ref-kicker,
.all-ref-section-head span {
  display: block;
  margin-bottom: 10px;
  color: var(--ref-orange);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
}

.all-ref-hero {
  overflow: hidden;
  background: var(--ref-white);
}

.all-ref-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.22fr);
  align-items: center;
  min-height: 460px;
}

.all-ref-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
  padding: 54px 0 74px;
}

.all-ref-hero h1 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(42px, 3vw, 56px);
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 1.15;
}

.all-ref-hero__copy p {
  max-width: 520px;
  margin: 22px 0 0;
  color: var(--ref-ink);
  font-size: 15px;
  line-height: 1.7;
}

.all-ref-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.all-ref-actions .ref-btn {
  min-width: 205px;
}

.all-ref-hero__media {
  position: absolute;
  top: 0;
  right: calc((100vw - min(1450px, calc(100vw - 80px))) / -2);
  bottom: 0;
  width: min(61vw, 920px);
}

.all-ref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ref-white) 0%, rgba(255, 255, 255, 0.96) 11%, rgba(255, 255, 255, 0.38) 37%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(0deg, var(--ref-white) 0%, rgba(255, 255, 255, 0) 21%);
  pointer-events: none;
}

.all-ref-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.all-ref-search {
  position: relative;
  z-index: 4;
  margin-top: -22px;
}

.all-ref-search__bar {
  overflow: hidden;
  min-height: 76px;
  padding: 12px 16px 12px 28px;
  border-radius: 8px;
  background: var(--ref-navy-dark);
  box-shadow: 0 12px 28px rgba(0, 31, 77, 0.18);
}

.all-ref-search__form {
  display: grid;
  grid-template-columns: 295px minmax(0, 1fr) 175px 145px;
  align-items: center;
  gap: 0;
}

.all-ref-clear-filters {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 10px;
  color: #ffffff !important;
  opacity: 0.75;
  font-size: 12px;
}

.all-ref-clear-filters:hover {
  opacity: 1;
}

.all-ref-search label {
  color: var(--ref-white);
  font-size: 17px;
  font-weight: 700;
}

.all-ref-search__input {
  position: relative;
}

.all-ref-search__input i {
  position: absolute;
  top: 50%;
  left: 18px;
  color: var(--ref-navy-dark);
  font-size: 15px;
  transform: translateY(-50%);
}

.all-ref-search input,
.all-ref-search select {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-left: 1px solid var(--ref-line);
  background: var(--ref-white);
  color: var(--ref-ink);
  font-size: 13px;
  font-weight: 500;
}

.all-ref-search input {
  padding: 0 18px 0 50px;
  border-left: 0;
  border-radius: 5px 0 0 5px;
}

.all-ref-search select {
  padding: 0 15px;
}

.all-ref-search .ref-btn {
  min-height: 48px;
  border-radius: 0 5px 5px 0;
  box-shadow: none;
}

.all-ref-services {
  padding: 42px 0 34px;
  background: var(--ref-white);
}

.all-ref-services__grid {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.all-ref-sidebar {
  padding: 24px 22px 0;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
}

.all-ref-sidebar h3 {
  margin: 0 0 22px;
  color: var(--ref-navy-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.all-ref-sidebar ul {
  display: grid;
  gap: 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.all-ref-sidebar li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.all-ref-sidebar li i {
  color: var(--ref-orange);
  font-size: 21px;
}

.all-ref-sidebar li strong,
.all-ref-sidebar li span {
  display: block;
}

.all-ref-sidebar li strong {
  color: var(--ref-navy-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.all-ref-sidebar li span {
  color: var(--ref-ink);
  font-size: 12px;
  line-height: 1.55;
}

.all-ref-help-card {
  overflow: hidden;
  margin: 28px -14px 0;
  padding: 24px 18px 0;
  border-radius: 8px 8px 0 0;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.all-ref-help-card h4 {
  margin: 0 0 12px;
  color: var(--ref-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.all-ref-help-card p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1.6;
}

.all-ref-help-card .ref-btn {
  width: 100%;
  min-height: 46px;
  margin-bottom: 18px;
  padding: 0 16px;
  font-size: 13px !important;
}

.all-ref-help-card img {
  display: block;
  width: calc(100% + 18px);
  max-width: none;
  margin: 0 -9px;
  aspect-ratio: 1.06;
  object-fit: cover;
  object-position: center top;
  border-radius: 50% 50% 0 0;
}

.all-ref-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.all-ref-title-row h2 {
  margin: 0 0 8px;
  color: var(--ref-navy-dark);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.18;
}

.all-ref-title-row p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 14px;
  line-height: 1.55;
}

.all-ref-title-row > a,
.all-ref-row-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ref-orange);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.all-ref-service-list {
  min-width: 0;
}

.all-ref-service-row {
  position: relative;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 160px;
  margin-bottom: 16px;
  padding: 40px 24px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: rgba(0, 0, 0, 0.035) 0 6px 24px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;
}

.all-ref-service-intro {
  position: relative;
  min-height: 92px;
  padding-left: 56px;
}

.all-ref-service-intro > i {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(80, 29, 221, 0.45);
  border-radius: 50%;
  color: var(--ref-navy-dark);
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
}

.all-ref-service-intro > i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ref-orange);
}

.all-ref-service-intro h3 {
  margin: 2px 0 9px;
  color: var(--ref-navy-dark);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.24;
}

.all-ref-service-intro p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 12px;
  line-height: 1.55;
}

.all-ref-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.all-ref-pills a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 82px;
  padding: 12px 10px 14px;
  border: 1px solid #e5ebf2;
  border-radius: 8px;
  background: var(--ref-white);
  color: var(--ref-navy-dark);
  box-shadow: 0 4px 16px rgba(0, 31, 77, 0.04);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.all-ref-pills a > i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  margin-right: 0;
  color: var(--ref-navy-dark);
  font-size: 25px;
  line-height: 1;
}

.all-ref-pills a > i::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ref-orange);
  box-shadow: 0 0 0 2px var(--ref-white);
}

.all-ref-row-link {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
}

.all-ref-stats {
  padding: 0 0 24px;
  background: var(--ref-white);
}

.all-ref-stats__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  min-height: 94px;
  border-radius: 8px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.all-ref-stats__grid div {
  display: grid;
  place-items: center;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

.all-ref-stats__grid div:last-child {
  border-right: 0;
}

.all-ref-stats__grid strong,
.all-ref-stats__grid span {
  display: block;
}

.all-ref-stats__grid strong {
  color: var(--ref-white);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
}

.all-ref-stats__grid span {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
}

.all-ref-process {
  padding: 24px 0 12px;
  background: var(--ref-white);
}

.all-ref-section-head {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
}

.all-ref-section-head h2 {
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.18;
}

.all-ref-section-head p {
  margin: 7px 0 0;
  color: var(--ref-ink);
  font-size: 13px;
  line-height: 1.45;
}

.all-ref-faq {
  padding: 10px 0 8px;
  background: var(--ref-white);
}

.all-ref-faq__head {
  margin-bottom: 16px;
}

.all-ref-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 30px;
}

.all-ref-faq__grid details {
  border: 1px solid #dfe6ef;
  border-radius: 5px;
  background: var(--ref-white);
}

.all-ref-faq__grid summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 34px;
  padding: 8px 18px;
  color: var(--ref-navy-dark);
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.all-ref-faq__grid summary::-webkit-details-marker,
.all-ref-faq__grid summary::marker {
  display: none;
  content: '';
}

.all-ref-faq__grid summary i {
  transition: transform 0.2s ease;
}

.all-ref-faq__grid details[open] summary i {
  transform: rotate(180deg);
}

.all-ref-faq__grid details p {
  margin: 0;
  padding: 0 18px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ref-muted);
  line-height: 1.55;
}

.all-ref-final {
  padding: 8px 0 28px;
  background: var(--ref-white);
}

.all-ref-final__cta {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 104px;
  padding: 15px 48px;
  border-radius: 10px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.all-ref-final__cta img {
  width: 72px;
  height: 72px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  object-fit: cover;
}

.all-ref-final__cta h2 {
  margin: 0 0 8px;
  color: var(--ref-white);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.18;
}

.all-ref-final__cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

.all-ref-final__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.all-ref-final__actions .ref-btn {
  min-width: 205px;
  min-height: 52px;
}

@media (max-width: 1180px) {
  .all-ref-search__form {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .all-ref-search label {
    grid-column: 1 / -1;
  }

  .all-ref-search input,
  .all-ref-search select,
  .all-ref-search .ref-btn {
    border-radius: 5px;
  }

  .all-ref-services__grid {
    grid-template-columns: 1fr;
  }

  .all-ref-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    padding-bottom: 0;
  }

  .all-ref-sidebar h3 {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .all-ref-help-card {
    margin-top: 0;
  }

  .all-ref-service-row {
    grid-template-columns: 235px minmax(0, 1fr);
  }

  .all-ref-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .all-ref-hero__inner {
    display: block;
    min-height: auto;
  }

  .all-ref-hero__copy {
    max-width: 100%;
    padding: 48px 0 28px;
  }

  .all-ref-hero__media {
    position: relative;
    right: auto;
    width: 100%;
    height: 330px;
  }

  .all-ref-service-row,
  .all-ref-final__cta {
    grid-template-columns: 1fr;
  }

  .all-ref-final__actions {
    flex-wrap: wrap;
  }

  .all-ref-row-link {
    position: static;
    justify-self: start;
  }

  .all-ref-stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .all-ref-stats__grid div:nth-child(2n) {
    border-right: 0;
  }

  .all-ref-faq__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .all-ref-hero h1 {
    font-size: 31px;
    letter-spacing: -0.6px;
  }

  .all-ref-actions,
  .all-ref-actions .ref-btn,
  .all-ref-search__form,
  .all-ref-sidebar,
  .all-ref-pills,
  .all-ref-stats__grid {
    grid-template-columns: 1fr;
  }

  .all-ref-actions .ref-btn,
  .all-ref-final__actions,
  .all-ref-final__actions .ref-btn {
    width: 100%;
  }

  .all-ref-search__bar {
    padding: 18px;
  }

  .all-ref-sidebar {
    display: block;
  }

  .all-ref-help-card {
    margin: 24px -14px 0;
  }

  .all-ref-title-row {
    display: block;
  }

  .all-ref-title-row > a {
    margin-top: 12px;
  }

  .all-ref-final__actions .ref-btn + .ref-btn {
    margin-top: 14px;
  }
}

/* Final all-page typography lock. Keep this block last. */
:root {
  --cc-font-body: 15px;
  --cc-font-small: 13px;
  --cc-font-mini: 12px;
  --cc-font-kicker: 15px;
  --cc-font-card-title: 18px;
  --cc-font-section-title: clamp(25px, 2.1vw, 30px);
  --cc-font-page-title: clamp(34px, 3vw, 44px);
  --cc-font-hero-title: clamp(44px, 3vw, 56px);
}

body,
main,
p,
li,
label,
input,
select,
textarea,
.field label,
.checks,
.legal p,
.article p,
.contact-card p,
.footer-grid p,
.ref-footer p,
.ref-footer a {
  font-size: var(--cc-font-body) !important;
  line-height: 1.6;
  font-weight: 500;
}

.topbar,
.topbar a,
.topbar span,
.ref-topbar,
.ref-topbar a,
.ref-topbar span,
.tag,
.footer-bottom,
.ref-trust-card p,
.ref-hero-stats p,
.ref-trust-strip p,
.ref-article-grid span,
.about-ref-leaders strong,
.about-ref-leaders p,
.about-ref-testimonial-grid span,
.about-ref-testimonial-grid strong,
.services-ref-trust-card span,
.services-ref-hero-stats span,
.services-ref-testimonial-grid span,
.services-ref-testimonial-grid strong {
  font-size: var(--cc-font-small) !important;
  line-height: 1.45;
}

.nav__links,
.nav__links a,
.ref-nav__links,
.ref-nav__links a {
  font-size: 14px !important;
  line-height: 1.25;
}

.btn,
.ref-btn,
.pill,
button,
.link,
.ref-service-grid a,
.ref-core-grid a,
.ref-core a,
.services-ref-categories a,
.services-ref-details a {
  font-size: var(--cc-font-body) !important;
  line-height: 1.2;
  font-weight: 700;
}

h1,
.hero h1,
.ref-hero h1,
.about-ref-hero h1,
.services-ref-hero h1 {
  font-size: var(--cc-font-hero-title) !important;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.page-title h1,
.article h1,
.legal h1 {
  font-size: var(--cc-font-page-title) !important;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.8px;
}

h2,
.section h2,
.section__head h2,
.legal h2,
.article h2,
.ref-section h2,
.ref-title-row h2,
.ref-section-head h2,
.about-ref-who__copy h2,
.about-ref-section-head h2,
.ref-final-cta h2,
.services-ref-section-head h2,
.services-ref-why h2,
.services-ref-final-cta h2 {
  font-size: var(--cc-font-section-title) !important;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: 0;
}

h3,
.card h3,
.service-card h3,
.service-row h3,
.image-card h3,
.contact-card h3,
.ref-service-grid h3,
.ref-core-grid h3,
.ref-process h3,
.ref-article-grid h3,
.ref-footer h3,
.about-ref-values h3,
.about-ref-choose__grid h3,
.about-ref-leaders h3,
.services-ref-categories h3,
.services-ref-details h3 {
  font-size: var(--cc-font-card-title) !important;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: 0;
}

.eyebrow,
.ref-section-head span,
.ref-title-row span,
.about-ref-kicker,
.services-ref-kicker,
.services-ref-section-head span {
  font-size: var(--cc-font-kicker) !important;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 2px;
}

.lead,
.hero__copy p,
.page-title .lead,
.section__head p,
.ref-section-head p,
.ref-hero__copy p,
.about-ref-hero p,
.about-ref-who__copy p,
.card p,
.service-card p,
.service-row p,
.image-card p,
.blog-card p,
.ref-service-grid p,
.ref-core-grid p,
.ref-process p,
.ref-article-grid p,
.about-ref-values p,
.about-ref-choose__grid p,
.about-ref-testimonial-grid p,
.services-ref-hero__copy p,
.services-ref-categories p,
.services-ref-details li,
.services-ref-why p,
.services-ref-testimonial-grid p {
  font-size: var(--cc-font-body) !important;
  line-height: 1.6;
  font-weight: 500;
}

.stats-dark__item,
.quick-stat,
.ref-hero-stats strong,
.ref-trust-strip strong,
.ref-trust-strip span,
.about-ref-stats__grid span,
.services-ref-hero-stats strong,
.services-ref-why__stats span {
  font-size: var(--cc-font-body) !important;
  line-height: 1.35;
}

.stats-dark__item strong,
.about-ref-stats__grid strong {
  font-size: clamp(30px, 2.4vw, 42px) !important;
  line-height: 1.05;
  font-weight: 700;
}

.about-ref-choose__grid article {
  min-height: 215px;
  padding: 28px 20px 24px;
}

.about-ref-choose__grid i {
  font-size: 38px !important;
}

.about-ref-choose__grid h3 {
  margin: 22px 0 12px;
}

.about-ref-choose__grid p {
  max-width: 198px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 960px) {
  :root {
    --cc-font-body: 14px;
    --cc-font-kicker: 13px;
    --cc-font-card-title: 17px;
    --cc-font-section-title: clamp(24px, 4vw, 30px);
    --cc-font-page-title: clamp(30px, 5vw, 38px);
    --cc-font-hero-title: clamp(34px, 5.4vw, 44px);
  }
}

@media (max-width: 640px) {
  :root {
    --cc-font-body: 14px;
    --cc-font-small: 12px;
    --cc-font-kicker: 13px;
    --cc-font-card-title: 17px;
    --cc-font-section-title: 28px;
    --cc-font-page-title: 31px;
    --cc-font-hero-title: 31px;
  }

  h1,
  .hero h1,
  .ref-hero h1,
  .about-ref-hero h1,
  .services-ref-hero h1,
  .page-title h1 {
    line-height: 1.16;
    letter-spacing: -0.6px;
  }

  .about-ref-choose__grid article {
    min-height: auto;
  }

  .about-ref-choose__grid p {
    max-width: 270px;
  }
}

.all-ref-hero h1 {
  font-size: clamp(42px, 3vw, 56px) !important;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -1.1px;
}

.all-ref-kicker,
.all-ref-section-head span {
  font-size: 15px !important;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 2px;
}

.all-ref-title-row h2 {
  font-size: 30px !important;
  line-height: 1.18;
  font-weight: 600;
}

.all-ref-section-head h2 {
  font-size: 26px !important;
  line-height: 1.18;
  font-weight: 600;
}

.all-ref-final__cta h2 {
  font-size: 25px !important;
  line-height: 1.18;
  font-weight: 600;
}

.all-ref-sidebar h3,
.all-ref-service-intro h3,
.all-ref-help-card h4 {
  font-size: 18px !important;
  line-height: 1.24;
  font-weight: 700;
}

.all-ref-hero__copy p,
.all-ref-search label {
  font-size: 15px !important;
  line-height: 1.6;
}

.all-ref-title-row p,
.all-ref-section-head p,
.all-ref-help-card p,
.all-ref-final__cta p {
  font-size: 13px !important;
  line-height: 1.55;
}

.all-ref-service-intro p,
.all-ref-sidebar li span,
.all-ref-pills a,
.all-ref-faq__grid summary {
  font-size: 12px !important;
  line-height: 1.35;
}

.all-ref-sidebar li strong,
.all-ref-title-row > a,
.all-ref-row-link,
.all-ref-search input,
.all-ref-search select {
  font-size: 13px !important;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .all-ref-hero h1 {
    font-size: 31px !important;
    line-height: 1.16;
    letter-spacing: -0.6px;
  }
}

.partner-ref-page {
  overflow: hidden;
  background: var(--ref-white);
  color: var(--ref-navy-dark);
}

.partner-ref-hero {
  border-bottom: 1px solid var(--ref-line);
  background: var(--ref-white);
}

.partner-ref-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(420px, 0.43fr) minmax(0, 0.57fr);
  align-items: center;
  min-height: 455px;
}

.partner-ref-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
  min-width: 0;
  padding: 35px 0 42px;
}

.partner-ref-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 54px;
  color: #53647f;
  font-size: 13px;
  font-weight: 500;
}

.partner-ref-breadcrumb a {
  color: #53647f;
}

.partner-ref-breadcrumb i {
  font-size: 9px;
  color: #8b97aa;
}

.partner-ref-hero h1 {
  margin: 0 0 6px;
  color: var(--ref-navy-dark);
  font-size: clamp(40px, 3vw, 56px) !important;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}

.partner-ref-hero h2 {
  margin: 0 0 24px;
  color: var(--ref-orange);
  font-size: clamp(30px, 2.1vw, 38px) !important;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
}

.partner-ref-hero p {
  max-width: 565px;
  margin: 0;
  color: var(--ref-ink);
  font-size: 16px !important;
  line-height: 1.72;
  font-weight: 500;
}

.partner-ref-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.partner-ref-actions .ref-btn {
  min-width: 170px;
  min-height: 56px;
  padding: 0 27px;
}

.partner-ref-btn--navy {
  background: var(--ref-orange) !important;
  color: var(--ref-white) !important;
  border-color: var(--ref-orange) !important;
  box-shadow: 0 12px 22px rgba(52, 118, 254, 0.22) !important;
}

.partner-ref-hero__media {
  position: absolute;
  top: 0;
  right: calc((1450px - 100vw) / 2);
  bottom: 0;
  width: min(56vw, 855px);
  overflow: hidden;
}

.partner-ref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ref-white) 0%, rgba(255,255,255,0.88) 11%, rgba(255,255,255,0.2) 31%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, var(--ref-white) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}

.partner-ref-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.partner-ref-section {
  padding: 42px 0 0;
  background: var(--ref-white);
}

.partner-ref-section-head {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 28px;
  text-align: center;
}

.partner-ref-section-head h2 {
  position: relative;
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(25px, 2.1vw, 30px) !important;
  line-height: 1.18;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.partner-ref-section-head h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--ref-orange);
}

.partner-ref-benefit-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.partner-ref-benefit-grid article,
.partner-ref-opportunity-grid article {
  min-width: 0;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: rgba(0, 0, 0, 0.035) 0 6px 24px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;
  text-align: center;
}

.partner-ref-benefit-grid article {
  min-height: 212px;
  padding: 30px 17px 22px;
}

.partner-ref-benefit-grid i {
  color: var(--ref-navy-dark);
  font-size: 42px;
  line-height: 1;
}

.partner-ref-benefit-grid h3 {
  margin: 24px 0 12px;
  color: var(--ref-navy-dark);
  font-size: 17px !important;
  line-height: 1.22;
  font-weight: 700;
}

.partner-ref-benefit-grid p,
.partner-ref-opportunity-grid p,
.partner-ref-process p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 13px !important;
  line-height: 1.6;
  font-weight: 500;
}

.partner-ref-eligibility {
  padding-top: 28px;
}

.partner-ref-eligible-grid {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 55px;
  align-items: center;
}

.partner-ref-eligible-grid > p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 16px !important;
  line-height: 1.75;
}

.partner-ref-check-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 20px 34px;
  border-radius: 8px;
  background: #f3f6fb;
}

.partner-ref-check-panel ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-ref-check-panel li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ref-navy-dark);
  font-size: 14px !important;
  line-height: 1.35;
  font-weight: 600;
}

.partner-ref-check-panel i {
  color: var(--ref-navy-dark);
  font-size: 16px;
}

.partner-ref-opportunities {
  padding-top: 34px;
}

.partner-ref-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.partner-ref-opportunity-grid article {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding-bottom: 24px;
}

.partner-ref-opportunity-grid img {
  display: block;
  width: 100%;
  height: 125px;
  object-fit: cover;
}

.partner-ref-opportunity-grid span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: -31px auto 16px;
  border: 5px solid var(--ref-white);
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 10px 18px rgba(0, 31, 77, 0.18);
}

.partner-ref-opportunity-grid span i {
  font-size: 25px;
}

.partner-ref-opportunity-grid h3 {
  margin: 0 16px 12px;
  color: var(--ref-navy-dark);
  font-size: 17px !important;
  line-height: 1.24;
  font-weight: 700;
}

.partner-ref-opportunity-grid p {
  min-height: 48px;
  margin: 0 20px 16px;
}

.partner-ref-opportunity-grid a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ref-orange);
  font-size: 13px !important;
  font-weight: 700;
}

.partner-ref-process-section {
  padding-top: 38px;
}

.partner-ref-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.partner-ref-process article {
  position: relative;
  text-align: center;
}

.partner-ref-process article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 37px;
  left: calc(50% + 46px);
  width: calc(100% - 64px);
  border-top: 2px dotted #b8c3d2;
}

.partner-ref-process__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 26px;
  border: 5px solid #eef3f9;
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.2);
}

.partner-ref-process__icon > i {
  font-size: 30px;
}

.partner-ref-process__icon span {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 4px solid var(--ref-white);
  border-radius: 50%;
  background: var(--ref-orange);
  color: var(--ref-white);
  font-size: 13px !important;
  font-weight: 800;
}

.partner-ref-process h3 {
  margin: 0 0 10px;
  color: var(--ref-navy-dark);
  font-size: 16px !important;
  line-height: 1.2;
  font-weight: 700;
}

.partner-ref-process p {
  max-width: 185px;
  margin: 0 auto;
}

.partner-ref-story {
  padding: 44px 0 0;
  background: var(--ref-white);
}

.partner-ref-story__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  min-height: 145px;
  padding: 34px 50px;
  border-radius: 8px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 14px 28px rgba(0, 31, 77, 0.18);
}

.partner-ref-story__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,31,77,0.98), rgba(0,31,77,0.92) 54%, rgba(0,31,77,0.62)),
    url("../images/site/become-partner-cta-bg-hq.jpg") right center / cover no-repeat;
}

.partner-ref-story__inner > * {
  position: relative;
  z-index: 1;
}

.partner-ref-story h2 {
  margin: 0 0 10px;
  color: var(--ref-white);
  font-size: 26px !important;
  line-height: 1.2;
  font-weight: 600;
}

.partner-ref-story p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px !important;
  line-height: 1.5;
}

.partner-ref-story .ref-btn {
  min-width: 210px;
  color: var(--ref-white) !important;
}

.partner-ref-form-section {
  padding: 36px 0 46px;
}

.partner-ref-book-cta {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.partner-ref-book-cta .ref-btn {
  min-width: 260px;
}

.partner-ref-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
}

.partner-ref-field {
  display: grid;
  gap: 8px;
}

.partner-ref-field--wide {
  grid-column: span 2;
}

.partner-ref-field label {
  color: var(--ref-navy-dark);
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 600;
}

.partner-ref-field label span {
  color: #e75239;
}

.partner-ref-field input,
.partner-ref-field select {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dce4ee;
  border-radius: 5px;
  background: var(--ref-white);
  color: var(--ref-ink);
  font-size: 13px !important;
  font-weight: 500;
  padding: 0 17px;
  outline: 0;
}

.partner-ref-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #65758f 50%), linear-gradient(135deg, #65758f 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.partner-ref-form__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin-top: 8px;
}

.partner-ref-captcha {
  display: grid;
  grid-template-columns: 28px 1fr 34px;
  align-items: center;
  gap: 14px;
  min-width: 255px;
  min-height: 72px;
  padding: 0 18px;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #fafafa;
  color: #2e3749;
}

.partner-ref-captcha span {
  width: 26px;
  height: 26px;
  border: 2px solid #b7bdc7;
  background: var(--ref-white);
}

.partner-ref-captcha strong {
  font-size: 14px !important;
  line-height: 1.2;
  font-weight: 500;
}

.partner-ref-captcha i {
  color: #376bd7;
  font-size: 24px;
}

.partner-ref-form button {
  min-width: 205px;
  min-height: 56px;
}

.partner-ref-secure {
  grid-column: 1 / -1;
  margin: -5px 0 0;
  color: #6d778b;
  font-size: 12px !important;
  text-align: center;
}

.partner-ref-secure i {
  margin-right: 6px;
}

@media (max-width: 1180px) {
  .partner-ref-benefit-grid,
  .partner-ref-opportunity-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .partner-ref-eligible-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .partner-ref-process {
    gap: 12px;
  }
}

@media (max-width: 960px) {
  .partner-ref-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .partner-ref-hero__copy {
    max-width: 100%;
    padding: 30px 0 28px;
  }

  .partner-ref-breadcrumb {
    margin-bottom: 28px;
  }

  .partner-ref-hero__media {
    position: relative;
    right: auto;
    width: 100%;
    height: 320px;
    margin-bottom: 30px;
    border-radius: 8px;
  }

  .partner-ref-hero__media::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
  }

  .partner-ref-process,
  .partner-ref-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-ref-process article:not(:last-child)::before {
    display: none;
  }

  .partner-ref-field--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .partner-ref-page {
    width: 100vw;
    max-width: 100vw;
  }

  .partner-ref-page .ref-container {
    width: calc(100vw - 26px) !important;
    max-width: calc(100vw - 26px) !important;
  }

  .partner-ref-hero__copy,
  .partner-ref-eligible-grid,
  .partner-ref-check-panel,
  .partner-ref-benefit-grid,
  .partner-ref-opportunity-grid,
  .partner-ref-process,
  .partner-ref-form,
  .partner-ref-story__inner {
    width: 100%;
    max-width: calc(100vw - 26px);
  }

  .partner-ref-benefit-grid,
  .partner-ref-opportunity-grid,
  .partner-ref-check-panel,
  .partner-ref-process,
  .partner-ref-form,
  .partner-ref-story__inner {
    grid-template-columns: 1fr;
  }

  .partner-ref-hero h1 {
    font-size: 30px !important;
    letter-spacing: -0.6px;
  }

  .partner-ref-hero h2 {
    font-size: 22px !important;
  }

  .partner-ref-hero p {
    font-size: 14px !important;
    line-height: 1.65;
  }

  .partner-ref-section-head h2 {
    font-size: 24px !important;
    line-height: 1.16;
  }

  .partner-ref-section-head {
    width: 100%;
  }

  .partner-ref-page h1,
  .partner-ref-page h2,
  .partner-ref-page h3,
  .partner-ref-page p,
  .partner-ref-page li,
  .partner-ref-page label,
  .partner-ref-page a,
  .partner-ref-page button,
  .partner-ref-page input,
  .partner-ref-page select {
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .partner-ref-hero h1,
  .partner-ref-hero h2,
  .partner-ref-hero p,
  .partner-ref-section-head h2,
  .partner-ref-benefit-grid h3,
  .partner-ref-benefit-grid p,
  .partner-ref-opportunity-grid h3,
  .partner-ref-opportunity-grid p,
  .partner-ref-process h3,
  .partner-ref-process p,
  .partner-ref-story h2,
  .partner-ref-story p {
    display: block;
    width: 100% !important;
    max-width: calc(100vw - 82px) !important;
  }

  .partner-ref-section-head h2,
  .partner-ref-benefit-grid h3,
  .partner-ref-benefit-grid p,
  .partner-ref-opportunity-grid h3,
  .partner-ref-opportunity-grid p,
  .partner-ref-process h3,
  .partner-ref-process p {
    margin-right: auto;
    margin-left: auto;
  }

  .partner-ref-benefit-grid p,
  .partner-ref-opportunity-grid p,
  .partner-ref-check-panel li,
  .partner-ref-field input,
  .partner-ref-field select {
    overflow-wrap: anywhere;
  }

  .partner-ref-actions,
  .partner-ref-actions .ref-btn,
  .partner-ref-story .ref-btn,
  .partner-ref-form button {
    width: 100%;
    min-width: 0 !important;
  }

  .partner-ref-story__inner {
    padding: 28px 22px;
  }

  .partner-ref-form__bottom {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .partner-ref-captcha {
    min-width: 0;
  }
}

.contact-ref-page {
  overflow: hidden;
  background: var(--ref-white);
  color: var(--ref-navy-dark);
}

.contact-ref-hero {
  border-bottom: 1px solid var(--ref-line);
  background: var(--ref-white);
}

.contact-ref-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(410px, 0.46fr) minmax(0, 0.54fr);
  align-items: center;
  min-height: 390px;
}

.contact-ref-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
  min-width: 0;
  padding: 38px 0 36px;
}

.contact-ref-kicker,
.contact-ref-section-head span,
.contact-ref-touch > span {
  display: block;
  margin-bottom: 14px;
  color: var(--ref-orange);
  font-size: 15px !important;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.contact-ref-hero h1 {
  margin: 0 0 17px;
  color: var(--ref-navy-dark);
  font-size: clamp(34px, 2.35vw, 44px) !important;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -1.2px;
}

.contact-ref-hero p {
  max-width: 520px;
  margin: 0 0 17px;
  color: var(--ref-ink);
  font-size: 14px !important;
  line-height: 1.6;
}

.contact-ref-hero ul,
.contact-ref-info ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-ref-hero li,
.contact-ref-info li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ref-ink);
  font-size: 14px !important;
  line-height: 1.35;
  font-weight: 600;
}

.contact-ref-hero li i,
.contact-ref-info li i {
  color: var(--ref-orange);
  font-size: 13px;
}

.contact-ref-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 1010px);
  overflow: hidden;
}

.contact-ref-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--ref-white) 0%, rgba(255,255,255,0.9) 15%, rgba(255,255,255,0.18) 35%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, var(--ref-white) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}

.contact-ref-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-ref-whatsapp-card {
  position: absolute;
  top: 78px;
  right: 38px;
  z-index: 2;
  width: 260px;
  min-height: 210px;
  padding: 25px 25px 24px;
  border-radius: 8px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 16px 38px rgba(0, 31, 77, 0.18);
}

.contact-ref-whatsapp-card h2 {
  margin: 0 0 14px;
  color: var(--ref-white);
  font-size: 18px !important;
  line-height: 1.25;
  font-weight: 700;
}

.contact-ref-whatsapp-card p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px !important;
  line-height: 1.55;
}

.contact-ref-whatsapp-card .ref-btn {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ref-white) !important;
}

.contact-ref-section {
  padding: 34px 0 0;
  background: var(--ref-white);
}

.contact-ref-section-head {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 26px;
  text-align: center;
}

.contact-ref-section-head h2,
.contact-ref-office h2 {
  position: relative;
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: clamp(25px, 2.1vw, 30px) !important;
  line-height: 1.18;
  font-weight: 600;
}

.contact-ref-section-head h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--ref-orange);
}

.contact-ref-section-head p {
  margin: 12px 0 0;
  color: var(--ref-ink);
  font-size: 13px !important;
  line-height: 1.5;
}

.contact-ref-consult__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 405px;
  gap: 24px;
  align-items: start;
  max-width: 1210px;
  margin: 0 auto;
}

.contact-ref-form,
.contact-ref-touch,
.contact-ref-address,
.contact-ref-info article,
.contact-ref-process-wrap,
.contact-ref-faq__grid {
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: var(--ref-white);
  box-shadow: rgba(0, 0, 0, 0.035) 0 6px 24px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;
}

.contact-ref-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  padding: 30px;
}

.contact-ref-field {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.contact-ref-field--wide,
.contact-ref-captcha,
.contact-ref-submit,
.contact-ref-secure {
  grid-column: 1 / -1;
}

.contact-ref-field label {
  color: var(--ref-navy-dark);
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 700;
}

.contact-ref-field label span {
  color: #e75239;
}

.contact-ref-field input,
.contact-ref-field select,
.contact-ref-field textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid #dce4ee;
  border-radius: 5px;
  background: var(--ref-white);
  color: var(--ref-ink);
  font-size: 13px !important;
  font-weight: 500;
  padding: 0 15px;
  outline: 0;
}

.contact-ref-field textarea {
  min-height: 104px;
  padding-top: 15px;
  resize: vertical;
}

.contact-ref-field select,
.contact-ref-phone select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #65758f 50%), linear-gradient(135deg, #65758f 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.contact-ref-phone {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
}

.contact-ref-phone select {
  border-radius: 5px 0 0 5px;
  border-right: 0;
}

.contact-ref-phone input {
  border-radius: 0 5px 5px 0;
}

.contact-ref-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  border: 0;
  border-radius: 5px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  font-size: 15px !important;
  font-weight: 700;
  cursor: pointer;
}

.contact-ref-captcha {
  justify-self: center;
  display: grid;
  grid-template-columns: 28px 1fr 34px;
  align-items: center;
  gap: 14px;
  min-width: 255px;
  min-height: 70px;
  margin-top: 4px;
  padding: 0 18px;
  border: 1px solid #d8dee8;
  border-radius: 4px;
  background: #fafafa;
  color: #2e3749;
}

.contact-ref-captcha span {
  width: 26px;
  height: 26px;
  border: 2px solid #b7bdc7;
  background: var(--ref-white);
}

.contact-ref-captcha strong {
  font-size: 14px !important;
  line-height: 1.2;
  font-weight: 500;
}

.contact-ref-captcha i {
  color: #376bd7;
  font-size: 24px;
}

.contact-ref-secure {
  margin: -6px 0 0;
  color: #65758f;
  font-size: 12px !important;
  text-align: center;
}

.contact-ref-secure i {
  color: var(--ref-orange);
  margin-right: 6px;
}

.contact-ref-success {
  grid-column: 1 / -1;
  margin-bottom: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  background: #e8f7ee;
  color: #1c7a3c;
  font-size: 14px;
  font-weight: 600;
}

.contact-ref-success i {
  margin-right: 8px;
}

.contact-ref-errors {
  grid-column: 1 / -1;
  padding: 12px 18px;
  border-radius: 8px;
  background: #fdeceb;
  color: #b3261e;
  font-size: 13px;
}

.contact-ref-errors ul {
  margin: 0;
  padding-left: 18px;
}

.detail-ref-newsletter__status {
  margin: 0;
  padding: 10px 14px;
  border-radius: 6px;
  background: #e8f7ee;
  color: #1c7a3c;
  font-size: 13px;
  font-weight: 600;
}

.contact-ref-touch {
  padding: 30px;
}

.contact-ref-touch > span {
  margin-bottom: 8px;
  font-size: 13px !important;
}

.contact-ref-touch h2 {
  margin: 0 0 22px;
  color: var(--ref-navy-dark);
  font-size: 25px !important;
  line-height: 1.18;
  font-weight: 600;
}

.contact-ref-touch article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 97px;
  padding: 18px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: var(--ref-white);
}

.contact-ref-touch article + article {
  margin-top: 14px;
}

.contact-ref-touch article > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--ref-navy-dark);
  font-size: 30px;
}

.contact-ref-touch article:nth-of-type(3) > i {
  color: #18c461;
}

.contact-ref-touch strong,
.contact-ref-touch b,
.contact-ref-touch small,
.contact-ref-touch a {
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
}

.contact-ref-touch strong {
  color: var(--ref-ink);
  font-size: 12px !important;
  line-height: 1.2;
  font-weight: 700;
}

.contact-ref-touch b {
  margin-top: 4px;
  color: var(--ref-navy-dark);
  font-size: 15px !important;
  line-height: 1.25;
  font-weight: 800;
}

.contact-ref-touch small {
  margin-top: 4px;
  color: #5d6b83;
  font-size: 11px !important;
  line-height: 1.35;
}

.contact-ref-touch a {
  margin-top: 8px;
  color: var(--ref-navy-dark);
  font-size: 13px !important;
  line-height: 1.2;
  font-weight: 800;
}

.contact-ref-office {
  padding-top: 34px;
}

.contact-ref-office > .ref-container > h2,
.contact-ref-office > .ref-container > p,
.contact-ref-office > .ref-container > .contact-ref-kicker {
  max-width: 1210px;
  margin-right: auto;
  margin-left: auto;
}

.contact-ref-office > .ref-container > h2 {
  margin-bottom: 12px;
}

.contact-ref-office > .ref-container > p {
  margin-top: 0;
  margin-bottom: 28px;
  color: var(--ref-ink);
  font-size: 13px !important;
}

.contact-ref-office__grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
  max-width: 1210px;
  margin: 0 auto;
}

.contact-ref-address {
  padding: 30px;
}

.contact-ref-address article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
}

.contact-ref-address article + article {
  margin-top: 35px;
}

.contact-ref-address i {
  color: var(--ref-orange);
  font-size: 26px;
}

.contact-ref-address h3 {
  margin: 0 0 12px;
  color: var(--ref-navy-dark);
  font-size: 16px !important;
  line-height: 1.25;
  font-weight: 700;
}

.contact-ref-address p {
  margin: 0;
  color: var(--ref-ink);
  font-size: 13px !important;
  line-height: 1.75;
}

.contact-ref-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 215px;
  min-height: 52px;
  margin-top: 30px;
  border: 2px solid var(--ref-navy-dark);
  border-radius: 5px;
  color: var(--ref-navy-dark);
  font-size: 14px !important;
  font-weight: 800;
}

.contact-ref-map {
  overflow: hidden;
  border: 1px solid #dfe6ef;
  border-radius: 8px;
  background: #eef3f7;
}

.contact-ref-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 340px;
}

.contact-ref-info {
  padding: 34px 0 0;
}

.contact-ref-info__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1210px;
}

.contact-ref-info article {
  min-height: 235px;
  padding: 28px;
}

.contact-ref-card-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.contact-ref-card-title > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 2px solid #dfe6ef;
  border-radius: 50%;
  color: var(--ref-navy-dark);
  font-size: 28px;
}

.contact-ref-card-title h3 {
  margin: 0;
  color: var(--ref-orange);
  font-size: 15px !important;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.contact-ref-info dl {
  margin: 0;
}

.contact-ref-info dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid #e6ebf2;
}

.contact-ref-info dt,
.contact-ref-info dd {
  margin: 0;
  color: var(--ref-ink);
  font-size: 13px !important;
  line-height: 1.35;
  font-weight: 500;
}

.contact-ref-info dd {
  color: var(--ref-navy-dark);
}

.contact-ref-info article > p {
  margin: 16px 0 0;
  color: var(--ref-ink);
  font-size: 12px !important;
  line-height: 1.55;
}

.contact-ref-info ul {
  gap: 11px;
}

.contact-ref-social {
  display: flex;
  gap: 16px;
  margin: 20px 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf2;
}

.contact-ref-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  color: var(--ref-white);
  font-size: 20px;
}

.contact-ref-social a.contact-ref-social--linkedin { background: #0a66c2; }
.contact-ref-social a.contact-ref-social--facebook { background: #1877f2; }
.contact-ref-social a.contact-ref-social--youtube { background: #ff0000; }
.contact-ref-social a.contact-ref-social--instagram { background: linear-gradient(135deg, #f58529, #dd2a7b, #515bd4); }

.contact-ref-rating span,
.contact-ref-rating small {
  display: block;
  color: #5d6b83;
  font-size: 12px !important;
  line-height: 1.35;
}

.contact-ref-rating strong {
  display: inline-block;
  margin-right: 10px;
  color: var(--ref-navy-dark);
  font-size: 28px !important;
  line-height: 1.2;
  font-weight: 700;
}

.contact-ref-rating i {
  color: var(--ref-orange);
  font-size: 18px;
}

.contact-ref-process-section {
  padding-top: 34px;
}

.contact-ref-process-wrap {
  padding: 28px 38px 36px;
  border-color: #f0d69d;
}

.contact-ref-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}

.contact-ref-process article {
  position: relative;
  min-width: 0;
  text-align: center;
}

.contact-ref-process article:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 38px;
  left: calc(50% + 46px);
  width: calc(100% - 60px);
  border-top: 2px dotted #b8c3d2;
}

.contact-ref-process article > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  margin-bottom: 18px;
  border: 5px solid #eef3f9;
  border-radius: 50%;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 8px 18px rgba(0, 31, 77, 0.18);
}

.contact-ref-process article > div i {
  font-size: 28px;
}

.contact-ref-process article > span {
  display: inline-block;
  margin-right: 8px;
  color: var(--ref-orange);
  font-size: 28px !important;
  line-height: 1;
  font-weight: 800;
}

.contact-ref-process h3 {
  display: inline;
  margin: 0;
  color: var(--ref-navy-dark);
  font-size: 14px !important;
  line-height: 1.2;
  font-weight: 700;
}

.contact-ref-process p {
  max-width: 160px;
  margin: 8px auto 0;
  color: var(--ref-ink);
  font-size: 12px !important;
  line-height: 1.5;
}

.contact-ref-faq {
  padding-top: 34px;
  padding-bottom: 34px;
}

.contact-ref-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 24px;
  max-width: 1210px;
  margin: 0 auto;
  padding: 22px;
}

.contact-ref-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  align-content: start;
}

.contact-ref-faq-list details {
  border: 1px solid #dfe6ef;
  border-radius: 5px;
  background: var(--ref-white);
}

.contact-ref-faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  color: var(--ref-navy-dark);
  font-size: 13px !important;
  line-height: 1.25;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  list-style: none;
}

.contact-ref-faq-list summary::-webkit-details-marker,
.contact-ref-faq-list summary::marker {
  display: none;
  content: '';
}

.contact-ref-faq-list summary i {
  transition: transform 0.2s ease;
}

.contact-ref-faq-list details[open] summary i {
  transform: rotate(180deg);
}

.contact-ref-faq-list details p {
  margin: 0;
  padding: 0 18px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ref-muted);
  line-height: 1.55;
}

.contact-ref-faq-help {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.contact-ref-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 145px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #f7faff;
  color: var(--ref-navy-dark);
}

.contact-ref-faq-icon i {
  font-size: 58px;
}

.contact-ref-faq-help h3 {
  margin: 0 0 8px;
  color: var(--ref-navy-dark);
  font-size: 16px !important;
  line-height: 1.25;
  font-weight: 700;
}

.contact-ref-faq-help p {
  margin: 0 0 18px;
  color: var(--ref-ink);
  font-size: 12px !important;
  line-height: 1.5;
}

.contact-ref-faq-help .ref-btn {
  min-height: 44px;
  padding: 0 22px;
  color: var(--ref-white) !important;
}

.contact-ref-final {
  padding: 0 0 18px;
  background: var(--ref-white);
}

.contact-ref-final__inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 10px 52px;
  border-radius: 10px;
  background: var(--ref-navy-dark);
  color: var(--ref-white);
  box-shadow: 0 14px 28px rgba(0, 31, 77, 0.18);
}

.contact-ref-final__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,31,77,1), rgba(0,31,77,0.96) 58%, rgba(0,40,94,0.9));
}

.contact-ref-final__inner > * {
  position: relative;
  z-index: 1;
}

.contact-ref-final__inner > img {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

.contact-ref-final h2 {
  margin: 0 0 5px;
  color: var(--ref-white);
  font-size: 18px !important;
  line-height: 1.18;
  font-weight: 600;
}

.contact-ref-final p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px !important;
  line-height: 1.45;
}

.contact-ref-final__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.contact-ref-final__actions .ref-btn {
  min-height: 44px;
  min-width: 172px;
  padding: 0 22px;
  font-size: 12px;
  color: var(--ref-white) !important;
}

.contact-ref-final__actions .ref-btn--white {
  color: var(--ref-navy-dark) !important;
}

@media (max-width: 1180px) {
  .contact-ref-consult__grid,
  .contact-ref-office__grid,
  .contact-ref-faq__grid {
    grid-template-columns: 1fr;
  }

  .contact-ref-info__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-ref-process {
    gap: 12px;
  }
}

@media (max-width: 960px) {
  .contact-ref-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .contact-ref-hero__copy {
    max-width: 100%;
    padding: 34px 0 28px;
  }

  .contact-ref-hero__media {
    position: relative;
    right: auto;
    width: 100%;
    height: 360px;
    margin-bottom: 30px;
    border-radius: 8px;
  }

  .contact-ref-hero__media::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  }

  .contact-ref-whatsapp-card {
    top: auto;
    right: 20px;
    bottom: 20px;
  }

  .contact-ref-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-ref-process article:not(:last-child)::before {
    display: none;
  }

  .contact-ref-final__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contact-ref-page .ref-container {
    width: min(320px, calc(100% - 52px)) !important;
    max-width: 320px !important;
  }

  .contact-ref-page h1,
  .contact-ref-page h2,
  .contact-ref-page h3,
  .contact-ref-page p,
  .contact-ref-page li,
  .contact-ref-page label,
  .contact-ref-page a,
  .contact-ref-page button,
  .contact-ref-page input,
  .contact-ref-page select,
  .contact-ref-page textarea {
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .contact-ref-hero__copy,
  .contact-ref-form,
  .contact-ref-captcha,
  .contact-ref-touch,
  .contact-ref-address,
  .contact-ref-info article,
  .contact-ref-process-wrap,
  .contact-ref-faq__grid,
  .contact-ref-final__inner {
    width: 100%;
    max-width: 320px;
  }

  .contact-ref-hero h1,
  .contact-ref-hero p,
  .contact-ref-section-head h2,
  .contact-ref-section-head p,
  .contact-ref-office h2,
  .contact-ref-office > .ref-container > p,
  .contact-ref-whatsapp-card h2,
  .contact-ref-whatsapp-card p,
  .contact-ref-touch h2,
  .contact-ref-touch b,
  .contact-ref-touch small,
  .contact-ref-address h3,
  .contact-ref-address p,
  .contact-ref-info h3,
  .contact-ref-info p,
  .contact-ref-info li,
  .contact-ref-process h3,
  .contact-ref-process p,
  .contact-ref-faq-help h3,
  .contact-ref-faq-help p,
  .contact-ref-final h2,
  .contact-ref-final p {
    display: block;
    width: 100% !important;
    max-width: 270px !important;
    margin-right: auto;
    margin-left: auto;
  }

  .contact-ref-hero h1 {
    font-size: 30px !important;
    letter-spacing: -0.6px;
  }

  .contact-ref-hero p {
    font-size: 14px !important;
  }

  .contact-ref-section-head {
    width: 100%;
  }

  .contact-ref-section-head h2,
  .contact-ref-office h2 {
    font-size: 24px !important;
  }

  .contact-ref-form,
  .contact-ref-faq-list,
  .contact-ref-faq-help,
  .contact-ref-final__inner,
  .contact-ref-final__actions,
  .contact-ref-info__grid {
    grid-template-columns: 1fr;
  }

  .contact-ref-form,
  .contact-ref-touch,
  .contact-ref-address,
  .contact-ref-process-wrap,
  .contact-ref-faq__grid {
    padding: 22px 18px;
  }

  .contact-ref-whatsapp-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: 292px;
    margin: -80px 16px 20px;
  }

  .contact-ref-hero__media {
    height: auto;
    overflow: visible;
  }

  .contact-ref-hero__media img {
    height: 280px;
    border-radius: 8px;
  }

  .contact-ref-captcha {
    min-width: 0;
    justify-self: stretch;
  }

  .contact-ref-office__grid,
  .contact-ref-consult__grid,
  .contact-ref-faq__grid,
  .contact-ref-process,
  .contact-ref-phone {
    grid-template-columns: 1fr;
  }

  .contact-ref-phone select,
  .contact-ref-phone input {
    border-radius: 5px;
    border: 1px solid #dce4ee;
  }

  .contact-ref-process article > span,
  .contact-ref-process h3 {
    display: block;
  }

  .contact-ref-final__actions .ref-btn,
  .contact-ref-final__actions,
  .contact-ref-submit {
    width: 100%;
    min-width: 0 !important;
  }

  .contact-ref-final__inner {
    padding: 26px 20px;
  }
}
/* Global top spacing reset for Laravel/XAMPP pages. */
html,
body,
body.ref-home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body > .ref-topbar,
body > .topbar {
  margin-top: 0 !important;
}

.ref-topbar,
.topbar {
  position: relative;
  top: 0;
}
/* Formal corporate motion and visual refinement — applies site-wide since
   scroll-reveal (and its per-item stagger) runs on every page, not just Home. */
.animate__animated {
  --animate-duration: 0.72s;
  --animate-delay: 0.04s;
}

.ref-home main,
.ref-home section {
  letter-spacing: 0;
}

.ref-header {
  border-bottom: 3px solid rgb(80, 29, 242);
  box-shadow: 0 6px 22px rgba(0, 31, 77, 0.06);
}

.ref-nav__links a,
.ref-nav__item > a,
.ref-nav__caret {
  font-weight: 700;
}

.ref-btn,
.btn,
button[type="submit"] {
  border-radius: 6px !important;
  box-shadow: 0 10px 22px rgba(52, 118, 254, 0.16);
}

.ref-btn--ghost,
.btn--secondary,
.contact-ref-form button[type="button"] {
  box-shadow: none;
}

.ref-card,
.service-card,
.blog-card,
.image-card,
.contact-card,
.about-ref-card,
.services-ref-card,
.all-ref-service-row,
.blog-ref-featured-card,
.blog-ref-side-card,
.detail-ref-side-card,
.gallery-ref-feature,
.photos-ref-card,
.videos-ref-card,
.legal-ref-item,
.legal-ref-side-card,
.legal-ref-faq-card {
  border-color: #dce5f0 !important;
  box-shadow: 0 10px 30px rgba(0, 31, 77, 0.07) !important;
}

.ref-section-head p,
.section__head p,
.about-ref-section-head p,
.services-ref-hero__copy p,
.all-ref-hero__copy p,
.partner-ref-hero p,
.contact-ref-hero p,
.blog-ref-hero p,
.gallery-ref-hero p,
.legal-ref-hero p {
  color: #43536d !important;
}

/* The WhatsApp card floats inside .contact-ref-hero on a dark navy background,
   so the muted ink color above (meant for the light-background hero copy) isn't
   readable here — keep its own near-white text. */
.contact-ref-hero .contact-ref-whatsapp-card p {
  color: rgba(255, 255, 255, 0.9) !important;
}

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


/* ==========================================================================
   Shared page typography tuning (moved out of per-page <style> blocks)
   ========================================================================== */
main {
        color: var(--ref-ink);
        font-size: 14px;
        line-height: 1.62;
        letter-spacing: 0;
      }

      main :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
        margin-top: 0;
      }

      main :where(h1) {
        color: var(--ref-navy-dark);
        font-size: clamp(34px, 3vw, 50px) !important;
        line-height: 1.14 !important;
        font-weight: 800;
        letter-spacing: 0;
        margin-bottom: 16px;
      }

      main :where(h2) {
        color: var(--ref-navy-dark);
        font-size: clamp(24px, 2vw, 32px) !important;
        line-height: 1.22 !important;
        font-weight: 750;
        letter-spacing: 0;
        margin-bottom: 10px;
      }

      main :where(h3) {
        color: var(--ref-navy-dark);
        font-size: 17px !important;
        line-height: 1.28 !important;
        font-weight: 750;
        letter-spacing: 0;
        margin-bottom: 8px;
      }

      main :where(p, li) {
        color: var(--ref-ink);
        font-size: 14px !important;
        line-height: 1.62 !important;
        font-weight: 500;
      }

      main :where(p) {
        margin-bottom: 12px;
      }

      main :where(ul, ol) {
        margin-bottom: 14px;
      }

      main :where(.eyebrow, [class$="eyebrow"], [class*="-eyebrow"], [class$="kicker"], [class*="-kicker"]) {
        font-size: 12px !important;
        line-height: 1.15 !important;
        letter-spacing: 2px;
        font-weight: 700;
      }

      main :where(.lead) {
        font-size: 16px !important;
        line-height: 1.6 !important;
        max-width: 760px;
      }

      main :where(section) {
        scroll-margin-top: 120px;
      }

      main :where(.section, .ref-section, .gallery-ref-section, .photos-ref-section, .videos-ref-section, .legal-ref-main) {
        padding-top: 32px !important;
        padding-bottom: 36px !important;
      }

      main :where(.ref-section-head, .gallery-ref-head, .legal-ref-section-head) {
        margin-bottom: 22px !important;
      }

      main :where(.ref-btn, .btn, button, input, select, textarea) {
        font-size: 14px !important;
        line-height: 1.35 !important;
        letter-spacing: 0;
      }

      main :where(.ref-btn, .btn) {
        min-height: 44px;
        padding-inline: 20px;
        font-weight: 700;
      }

      main :where(input, select, textarea) {
        font-weight: 500;
      }

      main :where(.ref-card, .all-ref-service-row, .gallery-ref-feature, .photos-ref-card, .videos-ref-card, .legal-ref-item, .legal-ref-side-card, .legal-ref-faq-card) {
        border-radius: 8px;
      }

      main :where(.ref-card, .legal-ref-item, .legal-ref-side-card, .legal-ref-faq-card) {
        font-size: 14px;
      }

      .photos-ref-hero h1,
      .videos-ref-hero h1,
      .legal-ref-hero h1,
      .gallery-ref-hero h1,
      .blog-ref-hero h1,
      .detail-ref-title h1,
      .about-ref-hero h1,
      .services-ref-hero h1,
      .all-ref-hero h1,
      .partner-ref-hero h1,
      .contact-ref-hero h1,
      .ref-hero h1 {
        font-size: clamp(34px, 2.85vw, 46px) !important;
        line-height: 1.16 !important;
        margin-bottom: 14px !important;
      }

      .photos-ref-hero p,
      .videos-ref-hero p,
      .legal-ref-hero p,
      .gallery-ref-hero p,
      .blog-ref-hero p,
      .about-ref-hero p,
      .services-ref-hero p,
      .all-ref-hero p,
      .partner-ref-hero p,
      .contact-ref-hero p,
      .ref-hero p {
        font-size: 16px !important;
        line-height: 1.58 !important;
      }

      .photos-ref-breadcrumb,
      .videos-ref-breadcrumb,
      .legal-ref-breadcrumb {
        margin-bottom: 28px !important;
        font-size: 13px !important;
      }

      .photos-ref-filter a,
      .videos-ref-filter a,
      .gallery-ref-tabs a {
        min-height: 50px !important;
        font-size: 15px !important;
      }

      .legal-ref-item {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
      }

      .legal-ref-no {
        font-size: 23px !important;
      }

      .legal-ref-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
      }

      .photos-ref-newsletter h2,
      .videos-ref-newsletter h2,
      .gallery-ref-final h2,
      .legal-ref-cta h2 {
        font-size: 22px !important;
        line-height: 1.24 !important;
      }

      @media (max-width: 700px) {
        main :where(h1),
        .photos-ref-hero h1,
        .videos-ref-hero h1,
        .legal-ref-hero h1,
        .gallery-ref-hero h1,
        .blog-ref-hero h1,
        .detail-ref-title h1 {
          font-size: 30px !important;
        }

        main :where(h2) {
          font-size: 23px !important;
        }

        main :where(.section, .ref-section, .gallery-ref-section, .photos-ref-section, .videos-ref-section, .legal-ref-main) {
          padding-top: 24px !important;
          padding-bottom: 28px !important;
        }
      }

/* ---- Blog details page ---- */
.detail-ref-main {
        background: var(--ref-white);
      }

      .detail-ref-wrap {
        width: min(1260px, calc(100% - 64px));
        margin: 0 auto;
        padding: 34px 0 30px;
      }

      .detail-ref-breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 28px;
        color: var(--ref-muted);
        font-size: 12px;
        font-weight: 600;
      }

      .detail-ref-breadcrumb a {
        color: var(--ref-orange);
      }

      .detail-ref-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 44px;
        align-items: start;
      }

      .detail-ref-article {
        min-width: 0;
      }

      .detail-ref-cat {
        display: inline-block;
        margin-bottom: 14px;
        color: var(--ref-orange);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.4px;
        text-transform: uppercase;
      }

      .detail-ref-article h1 {
        max-width: 760px;
        margin: 0 0 16px;
        color: var(--ref-navy-dark);
        font-size: clamp(30px, 2.55vw, 42px) !important;
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -1px;
      }

      .detail-ref-lead {
        max-width: 720px;
        margin: 0 0 18px;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.6;
        font-weight: 500;
      }

      .detail-ref-meta {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        margin-bottom: 24px;
        color: var(--ref-ink);
        font-size: 12px;
        font-weight: 600;
      }

      .detail-ref-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .detail-ref-meta i,
      .detail-ref-list i,
      .detail-ref-arrow-list i {
        color: var(--ref-orange);
      }

      .detail-ref-author {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
      }

      .detail-ref-hero-img {
        display: block;
        width: 100%;
        height: clamp(320px, 26vw, 430px);
        margin-bottom: 24px;
        border-radius: 8px;
        object-fit: cover;
        object-position: center center;
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.07);
      }

      .detail-ref-content p {
        margin: 0 0 14px;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.55;
        font-weight: 500;
      }

      .detail-ref-content h2 {
        margin: 24px 0 10px;
        color: var(--ref-navy-dark);
        font-size: 20px !important;
        line-height: 1.25;
        font-weight: 700;
      }

      .detail-ref-list,
      .detail-ref-arrow-list {
        display: grid;
        gap: 7px;
        margin: 0 0 18px;
        padding: 0;
        list-style: none;
        color: var(--ref-ink);
        font-size: 13px;
        line-height: 1.45;
        font-weight: 500;
      }

      .detail-ref-list li,
      .detail-ref-arrow-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
      }

      .detail-ref-table-wrap {
        margin: 12px 0 22px;
        overflow: hidden;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
      }

      .detail-ref-table {
        width: 100%;
        border-collapse: collapse;
        color: var(--ref-ink);
        font-size: 12px;
        line-height: 1.35;
      }

      .detail-ref-table th {
        padding: 10px 13px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        text-align: left;
        font-weight: 700;
      }

      .detail-ref-table td {
        padding: 10px 13px;
        border-top: 1px solid var(--ref-line);
        font-weight: 500;
      }

      .detail-ref-help {
        margin-top: 24px;
      }

      .detail-ref-help .ref-btn {
        margin-top: 4px;
        min-height: 42px;
        padding: 0 20px;
        font-size: 12px;
      }

      .detail-ref-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 30px 0;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 31, 77, 0.05);
      }

      .detail-ref-nav a {
        min-height: 82px;
        padding: 18px 24px;
        color: var(--ref-navy-dark);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 700;
      }

      .detail-ref-nav a + a {
        border-left: 1px solid var(--ref-line);
        text-align: right;
      }

      .detail-ref-nav span {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
      }

      .detail-ref-share {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin: 54px 0 70px;
        color: var(--ref-muted);
        font-size: 12px;
        font-weight: 600;
      }

      .detail-ref-share a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--ref-line);
        border-radius: 50%;
        color: var(--ref-navy-dark);
      }

      .detail-ref-side {
        display: grid;
        gap: 20px;
        position: sticky;
        top: 96px;
      }

      .detail-ref-side-card {
        padding: 24px 24px;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.045);
      }

      .detail-ref-side-card h3 {
        margin: 0 0 18px;
        color: var(--ref-navy-dark);
        font-size: 17px !important;
        line-height: 1.25;
        font-weight: 700;
      }

      .detail-ref-cats,
      .detail-ref-popular,
      .detail-ref-tags {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .detail-ref-cats {
        display: grid;
        gap: 16px;
      }

      .detail-ref-cats li {
        color: var(--ref-navy-dark);
        font-size: 13px;
        font-weight: 700;
      }

      .detail-ref-category-link {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 12px;
        align-items: center;
        color: inherit;
      }

      .detail-ref-cats i,
      .detail-ref-cats strong {
        color: var(--ref-orange);
      }

      .detail-ref-expert {
        position: relative;
        min-height: 192px;
        overflow: hidden;
        padding: 24px 140px 24px 24px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
      }

      .detail-ref-expert h3 {
        max-width: 130px;
        margin: 0 0 12px;
        color: var(--ref-white);
        font-size: 20px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .detail-ref-expert p {
        max-width: 135px;
        margin: 0 0 18px;
        color: rgba(255,255,255,0.9);
        font-size: 12px !important;
        line-height: 1.55;
      }

      .detail-ref-expert .ref-btn {
        position: relative;
        z-index: 2;
        min-height: 38px;
        padding: 0 14px;
        font-size: 11px;
      }

      .detail-ref-expert img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 146px;
        height: 192px;
        object-fit: cover;
        object-position: top center;
      }

      .detail-ref-popular {
        display: grid;
        gap: 16px;
      }

      .detail-ref-popular li {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
      }

      .detail-ref-popular img {
        width: 72px;
        height: 64px;
        border-radius: 7px;
        object-fit: cover;
      }

      .detail-ref-popular a {
        color: var(--ref-navy-dark);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 700;
      }

      .detail-ref-popular small {
        display: block;
        margin-top: 6px;
        color: var(--ref-muted);
        font-size: 11px;
      }

      .detail-ref-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .detail-ref-tags a {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid var(--ref-line);
        border-radius: 6px;
        color: var(--ref-navy-dark);
        font-size: 11px;
        font-weight: 600;
      }

      .detail-ref-newsletter p {
        margin: 0 0 16px;
        color: var(--ref-ink);
        font-size: 12px !important;
        line-height: 1.65;
      }

      .detail-ref-newsletter form {
        display: grid;
        gap: 12px;
      }

      .detail-ref-newsletter label {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 12px;
        border: 1px solid var(--ref-line);
        border-radius: 6px;
        color: var(--ref-muted);
      }

      .detail-ref-newsletter input {
        width: 100%;
        border: 0;
        outline: 0;
        color: var(--ref-ink);
      }

      .detail-ref-newsletter button {
        min-height: 42px;
        border: 0;
        border-radius: 6px;
        background: var(--ref-orange);
        color: var(--ref-white);
        font-weight: 700;
        cursor: pointer;
      }

      .detail-ref-final {
        padding: 0 0 36px;
      }

      .detail-ref-final__inner {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 28px;
        width: min(1450px, calc(100% - 80px));
        margin: 0 auto;
        min-height: 142px;
        padding: 26px 54px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        box-shadow: 0 16px 32px rgba(0, 31, 77, 0.16);
      }

      .detail-ref-final__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 86px;
        height: 86px;
        color: var(--ref-orange);
        font-size: 48px;
      }

      .detail-ref-final h2 {
        margin: 0 0 8px;
        color: var(--ref-white);
        font-size: 28px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .detail-ref-final p {
        margin: 0;
        color: rgba(255,255,255,0.86);
        font-size: 16px !important;
      }

      .detail-ref-final .ref-btn--white {
        color: var(--ref-navy-dark) !important;
      }

      @media (max-width: 1100px) {
        .detail-ref-grid {
          grid-template-columns: 1fr;
        }

        .detail-ref-side {
          position: static;
        }

        .detail-ref-share {
          justify-content: flex-start;
          margin: 0 0 30px;
        }

        .detail-ref-final__inner {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 700px) {
        .detail-ref-wrap,
        .detail-ref-final__inner {
          width: min(100% - 32px, 1450px);
        }

        .detail-ref-grid {
          gap: 34px;
        }

        .detail-ref-article h1 {
          font-size: 32px !important;
        }

        .detail-ref-nav {
          grid-template-columns: 1fr;
        }

        .detail-ref-nav a + a {
          border-left: 0;
          border-top: 1px solid var(--ref-line);
          text-align: left;
        }

        .detail-ref-table {
          min-width: 760px;
        }
      }

/* ---- Blog listing page ---- */
.blog-ref-hero {
        overflow: hidden;
        background: #fff;
        padding: 0px 0 28px;
      }

      .blog-ref-hero__inner {
        display: grid;
        grid-template-columns: 440px minmax(0, 1fr);
        align-items: center;
        gap: 0;
        width: calc(100% - max(40px, calc((100% - 1450px) / 2)));
        max-width: none;
        margin-left: max(40px, calc((100% - 1450px) / 2));
        margin-right: 0;
        min-height: 300px;
        padding: 0;
      }

      .blog-ref-hero__copy {
        position: relative;
        z-index: 2;
      }

      .blog-ref-hero .eyebrow {
        margin-bottom: 14px;
        color: var(--ref-orange);
        font-size: 13px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 1.8px;
      }

      .blog-ref-hero h1 {
        max-width: 390px;
        margin: 0 0 16px;
        color: var(--ref-navy-dark);
        font-size: clamp(32px, 2vw, 38px) !important;
        line-height: 1.14;
        font-weight: 700;
        letter-spacing: -1px;
      }

      .blog-ref-hero .lead {
        max-width: 420px;
        margin: 0 0 22px;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.65;
        font-weight: 500;
      }

      .blog-ref-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 104px;
        width: min(470px, 100%);
        min-height: 48px;
        overflow: hidden;
        border: 1px solid var(--ref-line);
        border-radius: 7px;
        background: var(--ref-white);
        box-shadow: 0 8px 18px rgba(0, 31, 77, 0.06);
      }

      .blog-ref-search__field {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
      }

      .blog-ref-search__field i {
        color: #7b8798;
        font-size: 15px;
      }

      .blog-ref-search input {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        border: 0;
        color: var(--ref-ink);
        font-size: 13px;
        outline: 0;
      }

      .blog-ref-search button {
        min-height: 48px;
        border: 0;
        border-radius: 0;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
      }

      .blog-ref-hero__media {
        position: relative;
        min-height: 300px;
        overflow: hidden;
        background-image: url("../images/site/blog-hero-laptop-hq.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .blog-ref-hero__media::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
          linear-gradient(90deg, var(--ref-white) 0%, rgba(255,255,255,0.82) 11%, rgba(255,255,255,0.28) 30%, rgba(255,255,255,0) 48%),
          linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 80%, rgba(255,255,255,0.28) 100%);
        pointer-events: none;
      }

      .blog-ref-hero__media img {
        display: block;
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center center;
        filter: contrast(1.04) saturate(1.04);
        opacity: 0;
      }

      .blog-ref-featured {
        padding: 34px 0 12px;
        background: var(--ref-white);
      }

      .blog-ref-featured .eyebrow,
      .blog-ref-latest .eyebrow {
        margin-bottom: 24px;
        color: var(--ref-orange);
        font-size: 13px;
        line-height: 1.1;
        font-weight: 700;
        letter-spacing: 1.9px;
      }

      .blog-ref-featured__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        align-items: start;
        gap: 42px;
      }

      .blog-ref-main-column {
        display: grid;
        gap: 34px;
        min-width: 0;
      }

      .blog-ref-featured-card {
        position: relative;
        overflow: hidden;
        min-height: 420px;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-navy-dark);
        box-shadow: 0 10px 24px rgba(0, 31, 77, 0.1);
      }

      .blog-ref-featured-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .blog-ref-featured-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,31,77,0.05) 0%, rgba(0,31,77,0.38) 46%, rgba(0,31,77,0.92) 100%);
      }

      .blog-ref-featured-card__body {
        position: absolute;
        left: 32px;
        right: 32px;
        bottom: 24px;
        z-index: 1;
        color: var(--ref-white);
      }

      .blog-ref-featured-card .tag {
        margin-bottom: 15px;
        background: var(--ref-white);
      }

      .blog-ref-featured-card h2 {
        max-width: 720px;
        margin: 0 0 12px;
        color: var(--ref-white);
        font-size: 28px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .blog-ref-featured-card p,
      .blog-ref-featured-card a {
        color: var(--ref-white) !important;
      }

      .blog-ref-featured-card p {
        max-width: 660px;
        margin-bottom: 20px;
        font-size: 14px !important;
        line-height: 1.6;
      }

      .blog-ref-featured-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        font-size: 13px;
        font-weight: 600;
      }

      .blog-ref-featured-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 16px;
      }

      .blog-ref-sidebar {
        display: grid;
        gap: 26px;
      }

      .blog-ref-side-card {
        padding: 28px 30px;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.04);
      }

      .blog-ref-side-card h3 {
        margin: 0 0 20px;
        color: var(--ref-navy-dark);
        font-size: 16px !important;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
      }

      .blog-ref-categories,
      .blog-ref-popular {
        display: grid;
        gap: 18px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .blog-ref-categories li {
        color: var(--ref-navy-dark);
        font-size: 13px;
        font-weight: 600;
      }

      .blog-ref-category-link {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        color: inherit;
      }

      .blog-ref-category-link.is-active {
        color: var(--ref-orange);
      }

      .blog-ref-categories i {
        color: var(--ref-navy-dark);
        font-size: 15px;
      }

      .blog-ref-category-clear {
        display: inline-block;
        margin-top: 12px;
        color: var(--ref-orange);
        font-size: 12px;
        font-weight: 600;
      }

      .blog-ref-expert {
        position: relative;
        overflow: hidden;
        min-height: 186px;
        padding: 28px 150px 24px 28px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
      }

      .blog-ref-expert h3,
      .blog-ref-expert p {
        position: relative;
        z-index: 1;
        color: var(--ref-white);
      }

      .blog-ref-expert h3 {
        max-width: 150px;
        margin: 0 0 12px;
        font-size: 20px !important;
        line-height: 1.15;
        font-weight: 700;
      }

      .blog-ref-expert p {
        max-width: 145px;
        margin: 0 0 18px;
        font-size: 12px !important;
        line-height: 1.5;
      }

      .blog-ref-expert .ref-btn {
        position: relative;
        z-index: 1;
        min-height: 42px;
        padding: 0 18px;
        font-size: 12px !important;
      }

      .blog-ref-expert img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 145px;
        height: 186px;
        object-fit: cover;
        object-position: center top;
      }

      .blog-ref-popular li {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
      }

      .blog-ref-popular img {
        width: 72px;
        height: 58px;
        border-radius: 6px;
        object-fit: cover;
      }

      .blog-ref-popular a {
        display: block;
        color: var(--ref-navy-dark);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 700;
      }

      .blog-ref-popular small {
        display: block;
        margin-top: 7px;
        color: var(--ref-muted);
        font-size: 11px;
      }

      .blog-ref-latest {
        padding: 0;
        background: var(--ref-white);
      }

      .blog-ref-latest .blog-grid {
        gap: 26px;
      }

      .blog-ref-latest .blog-card {
        border: 0;
        box-shadow: none;
      }

      .blog-ref-latest .blog-card img {
        height: 180px;
        border-radius: 8px;
      }

      .blog-ref-latest .blog-card__body {
        padding: 14px 20px;
      }

      .blog-ref-latest .tag {
        margin-bottom: 12px;
      }

      .blog-ref-latest h3 {
        margin-bottom: 12px;
        font-size: 16px !important;
        line-height: 1.35;
      }

      .blog-ref-latest p {
        margin-bottom: 18px;
        font-size: 13px !important;
        line-height: 1.6;
      }

      .blog-ref-latest-meta {
        color: var(--ref-muted);
        font-size: 12px;
        line-height: 1.4;
      }

      .blog-ref-load {
        display: flex;
        justify-content: center;
        margin-top: 26px;
      }

      .blog-ref-load .ref-btn {
        min-height: 48px;
        padding: 0 24px;
        background: var(--ref-navy-dark);
        box-shadow: none;
      }

      .blog-ref-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .blog-ref-tags a {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--ref-line);
        border-radius: 5px;
        color: var(--ref-navy-dark);
        font-size: 12px;
        font-weight: 600;
      }

      .blog-ref-newsletter {
        padding: 12px 0 34px;
        background: var(--ref-white);
      }

      .blog-ref-newsletter__status {
        grid-column: 3;
        margin: 0;
        padding: 12px 18px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
      }

      .blog-ref-newsletter__inner {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) 420px;
        align-items: center;
        gap: 28px;
        max-width: 1210px;
        min-height: 118px;
        padding: 20px 38px;
        border-radius: 9px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        box-shadow: 0 14px 28px rgba(0, 31, 77, 0.16);
      }

      .blog-ref-newsletter__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 82px;
        height: 82px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        color: var(--ref-orange);
        font-size: 42px;
        background: rgba(255, 255, 255, 0.04);
      }

      .blog-ref-newsletter h2 {
        margin: 0 0 8px;
        color: var(--ref-white);
        font-size: 22px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .blog-ref-newsletter p {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-size: 13px !important;
      }

      .blog-ref-newsletter form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 122px;
        overflow: hidden;
        border-radius: 6px;
        background: var(--ref-white);
      }

      .blog-ref-newsletter label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 16px;
        color: var(--ref-muted);
      }

      .blog-ref-newsletter input {
        width: 100%;
        min-height: 52px;
        border: 0;
        color: var(--ref-ink);
        font-size: 13px;
        outline: 0;
      }

      .blog-ref-newsletter button {
        min-height: 52px;
        border: 0;
        background: var(--ref-orange);
        color: var(--ref-white);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
      }
@media (max-width: 980px) {
        .blog-ref-hero__inner {
          grid-template-columns: 1fr;
          min-height: auto;
          width: calc(100% - 40px);
          margin: 0 auto;
        }

        .blog-ref-hero__media {
          min-height: 280px;
        }

        .blog-ref-hero__media img {
          height: 280px;
        }

        .blog-ref-featured__grid {
          grid-template-columns: 1fr;
        }

        .blog-ref-newsletter__inner {
          grid-template-columns: 1fr;
        }

        .blog-ref-newsletter form {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 560px) {
        .blog-ref-search {
          grid-template-columns: 1fr;
        }

        .blog-ref-search button {
          border-top: 1px solid var(--ref-line);
        }
      }

/* ---- Gallery photos page ---- */
.photos-ref-page {
        background: var(--ref-white);
        color: var(--ref-navy-dark);
      }

      .photos-ref-container {
        width: min(1320px, calc(100% - 88px));
        margin: 0 auto;
      }

      .photos-ref-hero {
        position: relative;
        overflow: hidden;
        padding: 46px 0 34px;
        background: var(--ref-white);
      }

      .photos-ref-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 660px) minmax(640px, 1fr);
        align-items: center;
        gap: 34px;
        width: calc(100% - max(44px, calc((100% - 1320px) / 2)));
        max-width: none;
        margin-left: max(44px, calc((100% - 1320px) / 2));
        margin-right: 0;
      }

      .photos-ref-breadcrumb {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 48px;
        color: var(--ref-navy-dark);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
      }

      .photos-ref-breadcrumb a,
      .photos-ref-breadcrumb span:first-child {
        color: var(--ref-orange);
      }

      .photos-ref-breadcrumb i {
        color: var(--ref-navy-dark);
        font-size: 11px;
      }

      .photos-ref-hero h1 {
        margin: 0 0 18px;
        color: var(--ref-navy-dark);
        font-size: clamp(40px, 3.25vw, 56px) !important;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: 0;
      }

      .photos-ref-hero p {
        max-width: 680px;
        margin: 0;
        color: var(--ref-ink);
        font-size: 22px !important;
        line-height: 1.45;
        font-weight: 500;
      }

      .photos-ref-hero__rule {
        width: min(100%, 680px);
        height: 1px;
        margin-top: 58px;
        background: var(--ref-line);
      }

      .photos-ref-hero__media {
        min-height: 390px;
        margin-right: 0;
        background-image: url("../images/site/gallery-photos-hero-camera-v2.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right center;
        image-rendering: auto;
      }

      .photos-ref-section {
        padding: 8px 0 52px;
      }

      .photos-ref-filter {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 28px;
        margin-bottom: 36px;
      }

      .photos-ref-filter a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 0 18px;
        border: 1px solid #dfe6ef;
        border-radius: 8px;
        background: var(--ref-white);
        color: var(--ref-navy-dark);
        font-size: 17px;
        line-height: 1.1;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.05);
      }

      .photos-ref-filter a:first-child {
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        border-color: var(--ref-navy-dark);
      }

      .photos-ref-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 34px;
      }

      .photos-ref-card {
        position: relative;
      }

      .photos-ref-card__media {
        display: block;
        aspect-ratio: 1.56 / 1;
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
        background-color: #edf3f8;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 10px 26px rgba(0, 31, 77, 0.12);
        object-fit: cover;
      }

      .photos-ref-card__media--event-a { background-image: url("../images/site/services-advisory-consulting-hq.jpg"); background-position: center; }
      .photos-ref-card__media--client-a { background-image: url("../images/site/client-meeting.jpg"); background-position: center; }
      .photos-ref-card__media--event-b { background-image: url("../images/site/about-who-meeting-2x.jpg"); background-position: center; }
      .photos-ref-card__media--speaker { background-image: url("../images/site/about-leader-rohit-hq.jpg"); background-position: center top; }
      .photos-ref-card__media--team-a { background-image: url("../images/site/corp-meeting.jpg"); background-position: center; }
      .photos-ref-card__media--meeting-a { background-image: url("../images/site/team-consult.jpg"); background-position: center; }
      .photos-ref-card__media--handshake { background-image: url("../images/site/become-partner-hero-handshake-hq.jpg"); background-position: center; }
      .photos-ref-card__media--awards { background-image: url("../images/site/all-services-hero-bridge-hq.jpg"); background-position: center; }
      .photos-ref-card__media--team-b { background-image: url("../images/site/services-hero-team-hq.png"); background-position: center; }
      .photos-ref-card__media--workshop-a { background-image: url("../images/site/services-compliance-management-hq.jpg"); background-position: center; }
      .photos-ref-card__media--workshop-b { background-image: url("../images/site/services-company-registration-hq.jpg"); background-position: center; }
      .photos-ref-card__media--meeting-b { background-image: url("../images/site/services-legal-secretarial-hq.jpg"); background-position: center; }
      .photos-ref-card__media--client-b { background-image: url("../images/site/services-gst-taxation-hq.jpg"); background-position: center; }
      .photos-ref-card__media--team-c { background-image: url("../images/site/support-woman.jpg"); background-position: center; }
      .photos-ref-card__media--docs { background-image: url("../images/site/documents.jpg"); background-position: center; }
      .photos-ref-card__media--consult { background-image: url("../images/site/bridge-consult.jpg"); background-position: center; }
      .photos-ref-card__media--group { background-image: url("../images/site/about-who-meeting-hq.png"); background-position: center; }
      .photos-ref-card__media--sign { background-image: url("../images/site/paper-stack.jpg"); background-position: center; }

      .photos-ref-play {
        position: absolute;
        left: 50%;
        top: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        border: 2px solid rgba(255, 255, 255, 0.82);
        border-radius: 50%;
        background: rgba(0, 31, 77, 0.58);
        color: var(--ref-white);
        font-size: 25px;
        transform: translate(-50%, -50%);
      }

      .photos-ref-load {
        display: flex;
        justify-content: center;
        margin: 58px 0 0;
      }

      .photos-ref-newsletter {
        padding: 0 0 40px;
      }

      .photos-ref-newsletter__status {
        grid-column: 3;
        margin: 0;
        padding: 12px 18px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
      }

      .photos-ref-newsletter__inner {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr) 480px;
        align-items: center;
        gap: 34px;
        min-height: 140px;
        padding: 24px 34px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        box-shadow: 0 10px 28px rgba(0, 31, 77, 0.18);
      }

      .photos-ref-newsletter__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 86px;
        height: 86px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 8px;
        color: var(--ref-orange);
        font-size: 46px;
      }

      .photos-ref-newsletter h2 {
        margin: 0 0 9px;
        color: var(--ref-white);
        font-size: 28px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .photos-ref-newsletter p {
        margin: 0;
        color: rgba(255,255,255,0.88);
        font-size: 15px !important;
        line-height: 1.45;
      }

      .photos-ref-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 126px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 8px;
        background: var(--ref-white);
      }

      .photos-ref-form label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
      }

      .photos-ref-form input {
        min-height: 56px;
        border: 0;
        padding: 0 18px;
        color: var(--ref-ink);
        font: inherit;
        outline: 0;
      }

      .photos-ref-form button {
        border: 0;
        background: var(--ref-orange);
        color: var(--ref-white);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }

      .photos-ref-features {
        padding: 0 0 96px;
      }

      .photos-ref-feature-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }

      .photos-ref-feature {
        min-height: 150px;
        padding: 26px 20px;
        border: 1px solid #e0e7f0;
        border-radius: 8px;
        background: var(--ref-white);
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.04);
      }

      .photos-ref-feature i {
        display: block;
        margin-bottom: 14px;
        color: var(--ref-navy-dark);
        font-size: 42px;
      }

      .photos-ref-feature h3 {
        margin: 0 0 8px;
        color: var(--ref-navy-dark);
        font-size: 16px !important;
        line-height: 1.25;
        font-weight: 800;
      }

      .photos-ref-feature p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.45;
      }

      @media (max-width: 1100px) {
        .photos-ref-hero__inner,
        .photos-ref-newsletter__inner {
          grid-template-columns: 1fr;
        }

        .photos-ref-hero__inner {
          width: min(1320px, calc(100% - 88px));
          margin: 0 auto;
        }

        .photos-ref-hero__media {
          min-height: 300px;
        }

        .photos-ref-filter,
        .photos-ref-grid,
        .photos-ref-feature-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 700px) {
        .photos-ref-container {
          width: min(100% - 28px, 1320px);
        }

        .photos-ref-hero {
          padding: 34px 0 34px;
        }

        .photos-ref-hero__inner,
        .photos-ref-filter,
        .photos-ref-grid,
        .photos-ref-feature-grid,
        .photos-ref-form {
          grid-template-columns: 1fr;
        }

        .photos-ref-breadcrumb {
          margin-bottom: 34px;
        }

        .photos-ref-hero h1 {
          font-size: 38px !important;
        }

        .photos-ref-hero p {
          font-size: 18px !important;
        }

        /* The source graphic has a lot of built-in empty space on its left
           (it was composed to sit beside hero text in the 2-column desktop
           layout) — background-size:contain shows that empty space as a
           blank gap once stacked full-width on mobile. Sizing by height
           instead and anchoring right pushes that empty portion off-canvas
           to the left instead of displaying it. */
        .photos-ref-hero__media {
          min-height: 170px;
          background-size: auto 220%;
          background-position: right center;
        }
      }

/* ---- Gallery videos page ---- */
.videos-ref-page {
        background: var(--ref-white);
        color: var(--ref-navy-dark);
      }

      .videos-ref-container {
        width: min(1320px, calc(100% - 88px));
        margin: 0 auto;
      }

      .videos-ref-hero {
        position: relative;
        overflow: hidden;
        padding: 46px 0 34px;
        background: var(--ref-white);
      }

      .videos-ref-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 660px) minmax(640px, 1fr);
        align-items: center;
        gap: 34px;
        width: calc(100% - max(44px, calc((100% - 1320px) / 2)));
        max-width: none;
        margin-left: max(44px, calc((100% - 1320px) / 2));
        margin-right: 0;
      }

      .videos-ref-breadcrumb {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 48px;
        color: var(--ref-navy-dark);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
      }

      .videos-ref-breadcrumb a,
      .videos-ref-breadcrumb span:first-child {
        color: var(--ref-orange);
      }

      .videos-ref-breadcrumb i {
        color: var(--ref-navy-dark);
        font-size: 11px;
      }

      .videos-ref-hero h1 {
        margin: 0 0 18px;
        color: var(--ref-navy-dark);
        font-size: clamp(40px, 3.25vw, 56px) !important;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: 0;
      }

      .videos-ref-hero p {
        max-width: 720px;
        margin: 0;
        color: var(--ref-ink);
        font-size: 22px !important;
        line-height: 1.45;
        font-weight: 500;
      }

      .videos-ref-hero__media {
        min-height: 390px;
        margin-right: 0;
        background-image: url("../images/site/gallery-videos-hero-camera-hq.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right center;
      }

      .videos-ref-section {
        padding: 8px 0 52px;
      }

      .videos-ref-filter {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 28px;
        margin-bottom: 36px;
      }

      .videos-ref-filter a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        padding: 0 18px;
        border: 1px solid #dfe6ef;
        border-radius: 8px;
        background: var(--ref-white);
        color: var(--ref-navy-dark);
        font-size: 17px;
        line-height: 1.15;
        font-weight: 700;
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.05);
      }

      .videos-ref-filter a:first-child {
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        border-color: var(--ref-navy-dark);
      }

      .videos-ref-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 42px;
      }

      .videos-ref-card {
        min-width: 0;
      }

      .videos-ref-thumb {
        position: relative;
        display: block;
        aspect-ratio: 1.62 / 1;
        overflow: hidden;
        border-radius: 8px;
        background-color: #edf3f8;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0 10px 26px rgba(0, 31, 77, 0.12);
      }

      .videos-ref-thumb__image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .videos-ref-thumb--bridge { background-image: linear-gradient(rgba(0,31,77,.16), rgba(0,31,77,.18)), url("../images/site/about-hero-bridge-2x.jpg"); background-position: center; }
      .videos-ref-thumb--business { background-image: url("../images/site/about-leader-rohit-hq.jpg"); background-position: center top; }
      .videos-ref-thumb--gst { background-image: url("../images/site/services-gst-taxation-hq.jpg"); background-position: center; }
      .videos-ref-thumb--trademark { background-image: url("../images/site/services-legal-secretarial-hq.jpg"); background-position: center; }
      .videos-ref-thumb--compliance { background-image: url("../images/site/blog-details-roc-calendar-hq.jpg"); background-position: center; }
      .videos-ref-thumb--expert { background-image: url("../images/site/services-company-registration-hq.jpg"); background-position: center; }
      .videos-ref-thumb--kyc { background-image: url("../images/site/services-roc-compliance-hq.jpg"); background-position: center; }
      .videos-ref-thumb--llp { background-image: url("../images/site/documents.jpg"); background-position: center; }
      .videos-ref-thumb--payroll { background-image: url("../images/site/client-meeting.jpg"); background-position: center; }
      .videos-ref-thumb--rejection { background-image: url("../images/site/services-advisory-consulting-hq.jpg"); background-position: center; }
      .videos-ref-thumb--compare { background-image: url("../images/site/become-partner-hero-handshake-hq.jpg"); background-position: center; }
      .videos-ref-thumb--return { background-image: url("../images/site/finance-desk.jpg"); background-position: center; }
      .videos-ref-thumb--import { background-image: url("../images/site/import-export.jpg"); background-position: center; }
      .videos-ref-thumb--success { background-image: url("../images/site/corp-meeting.jpg"); background-position: center; }
      .videos-ref-thumb--webinar { background-image: url("../images/site/services-compliance-management-hq.jpg"); background-position: center; }

      .videos-ref-play {
        position: absolute;
        left: 50%;
        top: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 70px;
        height: 70px;
        border: 4px solid rgba(255,255,255,0.9);
        border-radius: 50%;
        background: rgba(0, 31, 77, 0.42);
        color: var(--ref-white);
        font-size: 24px;
        transform: translate(-50%, -50%);
      }

      .videos-ref-duration {
        position: absolute;
        right: 13px;
        bottom: 12px;
        min-width: 54px;
        padding: 6px 9px;
        border-radius: 7px;
        background: rgba(0, 0, 0, 0.86);
        color: var(--ref-white);
        font-size: 14px;
        line-height: 1;
        font-weight: 800;
        text-align: center;
      }

      .videos-ref-card h2 {
        margin: 18px 0 12px;
        color: var(--ref-navy-dark);
        font-size: 20px !important;
        line-height: 1.32;
        font-weight: 800;
      }

      .videos-ref-card p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 15px !important;
        line-height: 1.45;
        font-weight: 500;
      }

      .videos-ref-load {
        display: flex;
        justify-content: center;
        margin: 36px 0 0;
      }

      .videos-ref-newsletter {
        padding: 0 0 40px;
      }

      .videos-ref-newsletter__status {
        grid-column: 3;
        margin: 0;
        padding: 12px 18px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
      }

      .videos-ref-newsletter__inner {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr) 480px;
        align-items: center;
        gap: 34px;
        min-height: 140px;
        padding: 24px 34px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        box-shadow: 0 10px 28px rgba(0, 31, 77, 0.18);
      }

      .videos-ref-newsletter__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 86px;
        height: 86px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 8px;
        color: var(--ref-orange);
        font-size: 46px;
      }

      .videos-ref-newsletter h2 {
        margin: 0 0 9px;
        color: var(--ref-white);
        font-size: 28px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .videos-ref-newsletter p {
        margin: 0;
        color: rgba(255,255,255,0.88);
        font-size: 15px !important;
        line-height: 1.45;
      }

      .videos-ref-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 126px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 8px;
        background: var(--ref-white);
      }

      .videos-ref-form label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
      }

      .videos-ref-form input {
        min-height: 56px;
        border: 0;
        padding: 0 18px;
        color: var(--ref-ink);
        font: inherit;
        outline: 0;
      }

      .videos-ref-form button {
        border: 0;
        background: var(--ref-orange);
        color: var(--ref-white);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }

      .videos-ref-features {
        padding: 0 0 96px;
      }

      .videos-ref-feature-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }

      .videos-ref-feature {
        min-height: 150px;
        padding: 26px 20px;
        border: 1px solid #e0e7f0;
        border-radius: 8px;
        background: var(--ref-white);
        text-align: center;
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.04);
      }

      .videos-ref-feature i {
        display: block;
        margin-bottom: 14px;
        color: var(--ref-navy-dark);
        font-size: 42px;
      }

      .videos-ref-feature h3 {
        margin: 0 0 8px;
        color: var(--ref-navy-dark);
        font-size: 16px !important;
        line-height: 1.25;
        font-weight: 800;
      }

      .videos-ref-feature p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.45;
      }

      @media (max-width: 1100px) {
        .videos-ref-hero__inner,
        .videos-ref-newsletter__inner {
          grid-template-columns: 1fr;
        }

        .videos-ref-hero__inner {
          width: min(1320px, calc(100% - 88px));
          margin: 0 auto;
        }

        .videos-ref-hero__media {
          min-height: 300px;
        }

        .videos-ref-filter,
        .videos-ref-grid,
        .videos-ref-feature-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 700px) {
        .videos-ref-container {
          width: min(100% - 28px, 1320px);
        }

        .videos-ref-hero {
          padding: 34px 0;
        }

        .videos-ref-hero__inner,
        .videos-ref-filter,
        .videos-ref-grid,
        .videos-ref-feature-grid,
        .videos-ref-form {
          grid-template-columns: 1fr;
        }

        .videos-ref-breadcrumb {
          margin-bottom: 34px;
        }

        .videos-ref-hero h1 {
          font-size: 38px !important;
        }

        .videos-ref-hero p {
          font-size: 18px !important;
        }

        /* Same fix as .photos-ref-hero__media: crop instead of contain so
           the graphic's built-in left-side empty space doesn't show as a
           blank gap once stacked full-width on mobile. */
        .videos-ref-hero__media {
          min-height: 170px;
          background-size: auto 220%;
          background-position: right center;
        }
      }

/* ---- Gallery page ---- */
.gallery-ref {
        background: var(--ref-white);
      }

      .gallery-ref__container {
        width: min(1450px, calc(100% - 80px));
        margin: 0 auto;
      }

      .gallery-ref-hero {
        position: relative;
        overflow: hidden;
        min-height: 430px;
        background: var(--ref-white);
      }

      .gallery-ref-hero__inner {
        display: grid;
        grid-template-columns: 520px minmax(0, 1fr);
        align-items: center;
        min-height: 430px;
      }

      .gallery-ref-hero__copy {
        position: relative;
        z-index: 2;
        padding: 54px 0;
      }

      .gallery-ref-eyebrow {
        display: block;
        margin: 0 0 16px;
        color: var(--ref-orange);
        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
      }

      .gallery-ref-hero h1 {
        max-width: 520px;
        margin: 0 0 22px;
        color: var(--ref-navy-dark);
        font-size: clamp(42px, 3.2vw, 58px) !important;
        line-height: 1.12;
        font-weight: 700;
        letter-spacing: -1px;
      }

      .gallery-ref-hero p {
        max-width: 520px;
        margin: 0 0 10px;
        color: var(--ref-ink);
        font-size: 18px !important;
        line-height: 1.55;
        font-weight: 500;
      }

      .gallery-ref-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        margin-top: 34px;
      }

      .gallery-ref-hero__visual {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(68vw, 1180px);
        background-image:
          linear-gradient(90deg, var(--ref-white) 0%, rgba(255,255,255,0.92) 8%, rgba(255,255,255,0.2) 27%, rgba(255,255,255,0) 42%),
          linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 76%, rgba(255,255,255,0.24) 100%),
          url("../images/site/about-hero-bridge-2x.jpg");
        background-size: cover;
        background-position: center center;
      }

      .gallery-ref-section {
        padding: 38px 0;
      }

      .gallery-ref-head {
        max-width: 820px;
        margin: 0 auto 30px;
        text-align: center;
      }

      .gallery-ref-head h2 {
        margin: 0 0 12px;
        color: var(--ref-navy-dark);
        font-size: clamp(28px, 2.3vw, 38px) !important;
        line-height: 1.18;
        font-weight: 700;
      }

      .gallery-ref-head p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 16px !important;
        line-height: 1.6;
      }

      .gallery-ref-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 780px;
        margin: 0 auto 34px;
        overflow: hidden;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
      }

      .gallery-ref-tabs a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 13px;
        min-height: 68px;
        color: var(--ref-navy-dark);
        font-size: 18px;
        font-weight: 700;
      }

      .gallery-ref-tabs a:first-child {
        background: var(--ref-navy-dark);
        color: var(--ref-white);
      }

      .gallery-ref-feature {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
        overflow: hidden;
        margin-bottom: 34px;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
        box-shadow: 0 10px 24px rgba(0, 31, 77, 0.06);
      }

      .gallery-ref-feature__media {
        display: block;
        width: 100%;
        height: 360px;
        background: #edf3f8 url("../images/site/about-who-meeting-2x.jpg") center / cover no-repeat;
      }

      .gallery-ref-feature__copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 44px 54px;
      }

      .gallery-ref-feature h3 {
        margin: 0 0 18px;
        color: var(--ref-navy-dark);
        font-size: 34px !important;
        line-height: 1.22;
        font-weight: 700;
      }

      .gallery-ref-feature p {
        margin: 0 0 28px;
        color: var(--ref-ink);
        font-size: 17px !important;
        line-height: 1.65;
      }

      .gallery-ref-slider {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        color: var(--ref-navy-dark);
        font-weight: 700;
      }

      .gallery-ref-dots {
        display: flex;
        gap: 10px;
      }

      .gallery-ref-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d8e0ea;
      }

      .gallery-ref-dots span:nth-child(2) {
        background: var(--ref-navy-dark);
      }

      .gallery-ref-image-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px;
      }

      .gallery-ref-photo__media,
      .gallery-ref-video__media,
      .gallery-ref-event__media {
        display: block;
        width: 100%;
        background-color: #edf3f8;
        background-repeat: no-repeat;
        background-size: cover;
        object-fit: cover;
      }

      .gallery-ref-photo__media {
        height: 178px;
        border-radius: 8px;
        box-shadow: 0 7px 18px rgba(0, 31, 77, 0.08);
        width: 100%;
        object-fit: cover;
      }

      .gallery-ref-photo h3,
      .gallery-ref-event h3 {
        margin: 14px 0 0;
        color: var(--ref-navy-dark);
        font-size: 18px !important;
        line-height: 1.25;
        font-weight: 700;
        text-align: center;
      }


      .gallery-ref-photo__media--team { background-image: url("../images/site/corp-meeting.jpg"); background-position: center; }
      .gallery-ref-photo__media--client { background-image: url("../images/site/client-meeting.jpg"); background-position: center; }
      .gallery-ref-photo__media--event { background-image: url("../images/site/team-consult.jpg"); background-position: center; }
      .gallery-ref-photo__media--award { background-image: url("../images/site/about-leader-rohit-hq.jpg"); background-position: center top; }
      .gallery-ref-photo__media--office { background-image: url("../images/site/services-hero-team-hq.png"); background-position: center; }
      .gallery-ref-photo__media--celebration { background-image: url("../images/site/support-woman.jpg"); background-position: center; }
      .gallery-ref-photo__media--csr { background-image: url("../images/site/import-export.jpg"); background-position: center; }
      .gallery-ref-photo__media--training { background-image: url("../images/site/services-advisory-consulting-hq.jpg"); background-position: center; }
      .gallery-ref-video__media--about { background-image: url("../images/site/corp-meeting.jpg"); background-position: center; }
      .gallery-ref-video__media--compliance { background-image: url("../images/site/team-consult.jpg"); background-position: center; }
      .gallery-ref-video__media--success { background-image: url("../images/site/about-hero-bridge-2x.jpg"); background-position: center; }
      .gallery-ref-video__media--event { background-image: url("../images/site/services-advisory-consulting-hq.jpg"); background-position: center; }
      .gallery-ref-event__media--conclave { background-image: url("../images/site/team-consult.jpg"); background-position: center; }
      .gallery-ref-event__media--partners { background-image: url("../images/site/corp-meeting.jpg"); background-position: center; }
      .gallery-ref-event__media--independence { background-image: url("../images/site/client-meeting.jpg"); background-position: center; }
      .gallery-ref-event__media--csr { background-image: url("../images/site/import-export.jpg"); background-position: center; }
      .gallery-ref-load {
        display: flex;
        justify-content: center;
        margin-top: 30px;
      }

      .gallery-ref-video-grid,
      .gallery-ref-event-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 26px;
      }

      .gallery-ref-video {
        overflow: hidden;
        border: 1px solid var(--ref-line);
        border-radius: 8px;
        background: var(--ref-white);
        box-shadow: 0 8px 20px rgba(0, 31, 77, 0.06);
      }

      .gallery-ref-video__thumb {
        position: relative;
      }

      .gallery-ref-video__media {
        height: 190px;
        width: 100%;
        object-fit: cover;
        background-color: #edf3f8;
      }

      .gallery-ref-play {
        position: absolute;
        left: 50%;
        top: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 68px;
        height: 68px;
        border: 2px solid rgba(255,255,255,0.78);
        border-radius: 50%;
        background: rgba(0, 31, 77, 0.42);
        color: var(--ref-white);
        font-size: 26px;
        transform: translate(-50%, -50%);
      }

      .gallery-ref-duration {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 5px 9px;
        border-radius: 7px;
        background: rgba(0,0,0,0.82);
        color: var(--ref-white);
        font-size: 12px;
        font-weight: 700;
      }

      .gallery-ref-video__body {
        padding: 18px 22px 20px;
      }

      .gallery-ref-video h3 {
        margin: 0 0 8px;
        color: var(--ref-navy-dark);
        font-size: 18px !important;
        line-height: 1.25;
        font-weight: 700;
      }

      .gallery-ref-video p,
      .gallery-ref-event p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 14px !important;
        line-height: 1.5;
      }

      .gallery-ref-event__media {
        height: 145px;
        border-radius: 8px;
      }

      .gallery-ref-event {
        position: relative;
      }

      .gallery-ref-date {
        position: absolute;
        top: 16px;
        left: 16px;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 8px;
        background: var(--ref-white);
        color: var(--ref-navy-dark);
        font-size: 17px;
        line-height: 1.05;
        font-weight: 800;
        text-align: center;
        box-shadow: 0 8px 18px rgba(0,0,0,0.12);
      }

      .gallery-ref-event h3 {
        text-align: left;
      }

      .gallery-ref-event p {
        margin-top: 8px;
      }

      .gallery-ref-stats {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin: 34px auto 30px;
        overflow: hidden;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        box-shadow: 0 10px 26px rgba(0, 31, 77, 0.16);
      }

      .gallery-ref-stats div {
        min-height: 124px;
        padding: 24px 20px;
        text-align: center;
        border-right: 1px solid rgba(255,255,255,0.15);
      }

      .gallery-ref-stats div:last-child {
        border-right: 0;
      }

      .gallery-ref-stats strong {
        display: block;
        color: var(--ref-white);
        font-size: 30px;
        line-height: 1.1;
        font-weight: 800;
      }

      .gallery-ref-stats span {
        display: block;
        margin-top: 8px;
        color: rgba(255,255,255,0.92);
        font-size: 15px;
        line-height: 1.35;
        font-weight: 600;
      }

      .gallery-ref-head--testimonial {
        max-width: 900px;
        margin-bottom: 18px;
      }

      .gallery-ref-head--testimonial h2 {
        font-size: clamp(26px, 2vw, 34px) !important;
        line-height: 1.18;
      }

      .gallery-ref-testimonial {
        position: relative;
        max-width: 1160px;
        min-height: 156px;
        margin: 0 auto;
        padding: 2px 92px 0;
        text-align: center;
      }

      .gallery-ref-testimonial blockquote {
        max-width: 820px;
        margin: 0 auto 13px;
        color: var(--ref-ink);
        font-size: 15px !important;
        line-height: 1.52;
        font-weight: 500;
      }

      .gallery-ref-testimonial__quote {
        position: absolute;
        top: -2px;
        color: var(--ref-navy-dark);
        font-size: 34px;
        line-height: 1;
        font-weight: 900;
      }

      .gallery-ref-testimonial__quote--left {
        left: 132px;
      }

      .gallery-ref-testimonial__quote--right {
        right: 132px;
      }

      .gallery-ref-testimonial__nav {
        position: absolute;
        top: 72px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(0, 31, 77, 0.16);
      }

      .gallery-ref-testimonial__nav--prev {
        left: 0;
      }

      .gallery-ref-testimonial__nav--next {
        right: 0;
      }

      .gallery-ref-testimonial__author {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 auto 10px;
        text-align: left;
      }

      .gallery-ref-testimonial__author img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
      }

      .gallery-ref-testimonial__author strong {
        display: block;
        color: var(--ref-navy-dark);
        font-size: 13px;
        line-height: 1.2;
        font-weight: 800;
      }

      .gallery-ref-testimonial__author span {
        display: block;
        margin-top: 2px;
        color: var(--ref-muted);
        font-size: 11.5px;
        line-height: 1.25;
        font-weight: 500;
      }

      .gallery-ref-testimonial__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .gallery-ref-testimonial__dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d8e0ea;
      }

      .gallery-ref-testimonial__dots span:first-child {
        background: var(--ref-navy-dark);
      }

      .gallery-ref-final {
        padding: 10px 0 42px;
      }

      .gallery-ref-final__inner {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 26px;
        min-height: 106px;
        padding: 18px 42px;
        border-radius: 8px;
        background: var(--ref-navy-dark);
        color: var(--ref-white);
      }

      .gallery-ref-final img {
        width: 74px;
        height: 74px;
        border: 3px solid rgba(255,255,255,0.28);
        border-radius: 50%;
        object-fit: cover;
      }

      .gallery-ref-final h2 {
        margin: 0 0 6px;
        color: var(--ref-white);
        font-size: 26px !important;
        line-height: 1.2;
        font-weight: 700;
      }

      .gallery-ref-final p {
        margin: 0;
        color: rgba(255,255,255,0.88);
        font-size: 15px !important;
      }

      @media (max-width: 1100px) {
        .gallery-ref-hero__inner,
        .gallery-ref-feature,
        .gallery-ref-final__inner {
          grid-template-columns: 1fr;
        }

        .gallery-ref-hero__visual {
          position: relative;
          width: 100%;
          height: 300px;
        }

        .gallery-ref-image-grid,
        .gallery-ref-video-grid,
        .gallery-ref-event-grid,
        .gallery-ref-stats {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 700px) {
        .gallery-ref-testimonial {
          min-height: 178px;
          padding: 2px 42px 0;
        }

        .gallery-ref-testimonial__quote--left {
          left: 46px;
        }

        .gallery-ref-testimonial__quote--right {
          right: 46px;
        }

        .gallery-ref__container {
          width: min(100% - 32px, 1450px);
        }

        .gallery-ref-tabs,
        .gallery-ref-image-grid,
        .gallery-ref-video-grid,
        .gallery-ref-event-grid,
        .gallery-ref-stats {
          grid-template-columns: 1fr;
        }

        .gallery-ref-hero h1 {
          font-size: 34px !important;
        }

        .gallery-ref-feature__copy {
          padding: 28px 24px;
        }
      }

/* ---- Legal pages (privacy-policy + terms-conditions share this block) ---- */
.legal-ref-page {
        background: var(--ref-white);
        color: var(--ref-navy-dark);
      }

      .legal-ref-container {
        width: min(1320px, calc(100% - 80px));
        margin: 0 auto;
      }

      .legal-ref-hero {
        overflow: hidden;
        background: var(--ref-white);
        border-bottom: 1px solid #e6edf4;
      }

      .legal-ref-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
        align-items: center;
        gap: 76px;
        min-height: 300px;
        width: calc(100% - max(40px, calc((100% - 1320px) / 2)));
        max-width: none;
        margin-left: max(40px, calc((100% - 1320px) / 2));
        margin-right: 0;
        padding: 32px 0;
      }

      .legal-ref-breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 34px;
        font-size: 13px;
        line-height: 1;
        font-weight: 700;
      }

      .legal-ref-breadcrumb a,
      .legal-ref-breadcrumb span:first-child {
        color: var(--ref-orange);
      }

      .legal-ref-breadcrumb i {
        color: var(--ref-navy-dark);
        font-size: 10px;
      }

      .legal-ref-hero h1 {
        margin: 0 0 18px;
        color: var(--ref-navy-dark);
        font-size: clamp(34px, 3vw, 48px) !important;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: 0;
      }

      .legal-ref-hero p {
        max-width: 520px;
        margin: 0;
        color: var(--ref-ink);
        font-size: 16px !important;
        line-height: 1.68;
        font-weight: 500;
      }

      .legal-ref-hero__media {
        min-height: 255px;
        border-radius: 22px 0 0 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .legal-ref-hero__media--privacy {
        background-image: url("../images/site/privacy-policy-hero-hq.png");
      }

      .legal-ref-hero__media--terms {
        background-image: url("../images/site/terms-conditions-hero-hq.png");
      }

      .legal-ref-main {
        padding: 42px 0 34px;
      }

      .legal-ref-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 42px;
        align-items: start;
      }

      .legal-ref-layout--terms {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 46px;
      }

      .legal-ref-content {
        border: 1px solid #e1e8f0;
        border-radius: 8px;
        overflow: hidden;
        background: var(--ref-white);
      }

      .legal-ref-item {
        display: grid;
        grid-template-columns: 86px 56px minmax(0, 1fr);
        gap: 18px;
        padding: 28px 30px;
        border-bottom: 1px solid #e7edf4;
      }

      .legal-ref-item:last-child {
        border-bottom: 0;
      }

      .legal-ref-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border: 1px solid #dfe8f2;
        border-radius: 50%;
        color: var(--ref-navy-dark);
        font-size: 24px;
        box-shadow: 0 8px 18px rgba(0, 31, 77, 0.05);
      }

      .legal-ref-no {
        color: var(--ref-navy-dark);
        font-size: 28px;
        line-height: 1.1;
        font-weight: 800;
      }

      .legal-ref-item h2 {
        margin: 0 0 10px;
        color: var(--ref-navy-dark);
        font-size: 18px !important;
        line-height: 1.25;
        font-weight: 800;
      }

      .legal-ref-item p,
      .legal-ref-item li {
        color: var(--ref-ink);
        font-size: 14px !important;
        line-height: 1.68;
        font-weight: 500;
      }

      .legal-ref-item p {
        margin: 0;
      }

      .legal-ref-item ul {
        margin: 10px 0 0 18px;
        padding: 0;
      }

      .legal-ref-note {
        grid-template-columns: 86px minmax(0, 1fr);
        background: #f4f8fc;
      }

      .legal-ref-note .legal-ref-no {
        display: none;
      }

      .legal-ref-sidebar {
        display: grid;
        gap: 24px;
      }

      .legal-ref-side-card {
        padding: 26px 24px;
        border: 1px solid #e0e7f0;
        border-radius: 8px;
        background: var(--ref-white);
        box-shadow: 0 8px 22px rgba(0, 31, 77, 0.05);
      }

      .legal-ref-side-card--dark {
        background: var(--ref-navy-dark);
        color: var(--ref-white);
      }

      .legal-ref-side-card h3 {
        margin: 0 0 20px;
        color: inherit;
        font-size: 20px !important;
        line-height: 1.25;
        font-weight: 800;
      }

      .legal-ref-side-list {
        display: grid;
        gap: 16px;
      }

      .legal-ref-side-list span,
      .legal-ref-side-card a {
        display: flex;
        align-items: center;
        gap: 12px;
        color: inherit;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
      }

      .legal-ref-side-list i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 50%;
        color: var(--ref-orange);
      }

      .legal-ref-side-card a {
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid #e8eef5;
        color: var(--ref-navy-dark);
      }

      .legal-ref-side-card a:last-child {
        border-bottom: 0;
      }

      .legal-ref-trust {
        text-align: center;
        background: #f8fbff;
      }

      .legal-ref-trust i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        margin: 16px auto;
        border: 2px solid #dce7f3;
        border-radius: 50%;
        color: var(--ref-orange);
        font-size: 34px;
      }

      .legal-ref-faq {
        padding: 22px 0 34px;
      }

      .legal-ref-section-head {
        margin-bottom: 22px;
        text-align: center;
      }

      .legal-ref-section-head h2 {
        margin: 0;
        color: var(--ref-navy-dark);
        font-size: 26px !important;
        line-height: 1.2;
        font-weight: 800;
      }

      .legal-ref-section-head span {
        display: block;
        width: 62px;
        height: 3px;
        margin: 10px auto 0;
        border-radius: 999px;
        background: var(--ref-orange);
      }

      .legal-ref-faq-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .legal-ref-faq-card {
        padding: 18px 22px;
        border: 1px solid #dfe7f0;
        border-radius: 8px;
        background: var(--ref-white);
      }

      .legal-ref-faq-card h3 {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin: 0 0 8px;
        color: var(--ref-navy-dark);
        font-size: 15px !important;
        line-height: 1.35;
        font-weight: 800;
      }

      .legal-ref-faq-card h3 i {
        color: var(--ref-orange);
        font-size: 14px;
      }

      .legal-ref-faq-card p {
        margin: 0;
        color: var(--ref-ink);
        font-size: 13px !important;
        line-height: 1.55;
      }

      .legal-ref-cta {
        padding: 0 0 42px;
      }

      .legal-ref-cta__inner {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 26px;
        padding: 18px 28px;
        border: 1px solid #dfe7f0;
        border-radius: 8px;
        background: #f8fbff;
      }

      .legal-ref-cta__inner--dark {
        grid-template-columns: minmax(0, 1fr) auto auto;
        min-height: 144px;
        background-image: linear-gradient(90deg, rgba(0,31,77,0.96), rgba(0,31,77,0.82)), url("../images/site/about-who-meeting-2x.jpg");
        background-size: cover;
        background-position: center;
        color: var(--ref-white);
      }

      .legal-ref-cta img {
        width: 100%;
        height: 128px;
        border-radius: 8px;
        object-fit: cover;
      }

      .legal-ref-cta h2 {
        margin: 0 0 8px;
        color: inherit;
        font-size: 26px !important;
        line-height: 1.22;
        font-weight: 800;
      }

      .legal-ref-cta p {
        margin: 0;
        color: inherit;
        font-size: 14px !important;
        line-height: 1.55;
      }

      @media (max-width: 1100px) {
        .legal-ref-hero__inner,
        .legal-ref-layout,
        .legal-ref-layout--terms,
        .legal-ref-cta__inner,
        .legal-ref-cta__inner--dark {
          grid-template-columns: 1fr;
        }

        .legal-ref-hero__media {
          min-height: 280px;
        }
      }

      @media (max-width: 700px) {
        .legal-ref-container {
          width: min(100% - 28px, 1320px);
        }

        .legal-ref-hero__inner {
          width: calc(100% - 32px);
          max-width: none;
          margin: 0 auto;
        }

        .legal-ref-item,
        .legal-ref-faq-grid {
          grid-template-columns: 1fr;
        }

        .legal-ref-hero h1 {
          font-size: 34px !important;
        }
      }


/* ==========================================================================
   Scroll-reveal visibility guard (moved from layouts/site.blade.php)
   ========================================================================== */
.js-reveal-ready .scroll-reveal {
  opacity: 0;
}

/* =====================================================================
   Live-site migration (calcuttacorporate.com) — new sections & pages
   ===================================================================== */

/* --- Services mega menu --- */
.ref-nav { position: relative; }
.ref-nav__item--mega { position: static; }
.ref-nav__dropdown--mega { position: absolute; top: 100%; left: 0; right: 0; width: auto; min-width: 0; padding: 22px 26px 18px; }
.ref-mega { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; max-height: calc(100vh - 140px); overflow-y: auto; }
.ref-mega__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-mega__col a { display: block; padding: 4px 0; color: var(--ref-ink); font-size: 13px; font-weight: 600; white-space: normal; }
.ref-mega__col a:hover { color: var(--ref-orange); }
.ref-mega__title { display: flex !important; align-items: center; gap: 8px; margin-bottom: 6px; padding-bottom: 8px !important; border-bottom: 1px solid var(--ref-line); color: var(--ref-navy-dark) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .4px; text-transform: uppercase; white-space: normal; }
.ref-mega__title i { flex-shrink: 0; color: var(--ref-orange); }
.ref-mega__all { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--ref-line); color: var(--ref-navy) !important; font-weight: 800; }
/* Step the mega menu down from 6 columns as the nav bar narrows, before the mobile off-canvas menu takes over at 960px */
@media (max-width: 1300px) { .ref-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ref-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .ref-nav__item--mega { position: relative; }
  .ref-nav__dropdown--mega { position: static; padding: 6px 0 10px; }
  .ref-mega { grid-template-columns: 1fr; gap: 10px; max-height: none; overflow-y: visible; }
}

/* --- Video popup (YouTube embed or an uploaded file) --- */
.ref-video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ref-video-modal.is-open {
  display: flex;
}

.ref-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 15, 38, 0.85);
}

.ref-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
}

.ref-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ref-white);
  color: var(--ref-navy-dark);
  font-size: 16px;
  cursor: pointer;
}

.ref-video-modal__body {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--ref-shadow);
}

.ref-video-modal__body iframe,
.ref-video-modal__body video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.videos-ref-card.has-video-source .videos-ref-thumb {
  cursor: pointer;
}

/* --- 404 error page --- */
.error-404 {
  padding: 90px 0 110px;
  text-align: center;
}

.error-404__inner {
  max-width: 720px;
  margin: 0 auto;
}

.error-404__code {
  display: block;
  color: var(--ref-orange);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}

.error-404 h1 {
  margin: 8px 0 14px;
  color: var(--ref-navy-dark);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
}

.error-404__inner > p {
  max-width: 520px;
  margin: 0 auto 32px;
  color: var(--ref-ink);
  font-size: 15px;
  line-height: 1.6;
}

.error-404 .ref-search {
  max-width: 100%;
  padding: 10px 24px;
  margin: 0 0 36px;
}

.error-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 40px;
}

.error-404__quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--ref-line);
}

.error-404__quick a {
  color: var(--ref-navy);
  font-size: 14px;
  font-weight: 700;
}

.error-404__quick a:hover {
  color: var(--ref-orange);
}

@media (max-width: 640px) {
  .error-404 {
    padding: 60px 0 70px;
  }
}

/* --- Non-navigating nav triggers: "Services" / "Gallery" only open their hover menu --- */
.ref-nav__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 80px;
  white-space: nowrap;
  cursor: default;
  font-weight: 700;
}
.ref-nav__label.active::after,
.ref-nav__item:hover .ref-nav__label::after,
.ref-nav__item.is-open .ref-nav__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 3px;
  background: var(--ref-orange);
  border-radius: 99px;
}
@media (max-width: 960px) {
  .ref-nav__label { min-height: 44px; }
  .ref-nav__label.active::after,
  .ref-nav__item:hover .ref-nav__label::after,
  .ref-nav__item.is-open .ref-nav__label::after {
    bottom: 6px;
  }
}

/* --- Shared bits --- */
.ref-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--ref-navy); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.ref-stars--small { display: inline-flex; gap: 2px; margin-bottom: 8px; color: #f5b301; font-size: 12px; }
.ref-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: #1a9c5b; font-size: 12px; font-style: normal; font-weight: 700; }
.ref-reviews-note { margin: 6px 0 0; color: var(--ref-muted); font-size: 14px; }
.ref-reviews-note .ref-stars { color: #f5b301; }
.ref-final-cta__eyebrow { display: block; margin-bottom: 6px; color: var(--ref-orange); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ref-service-grid--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ref-process--three, .services-ref-process--three, .contact-ref-process--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-proof__grid--single { grid-template-columns: 1fr; }
.ref-core-grid article h3 i { margin-right: 6px; color: var(--ref-orange); }
.ref-core-grid article ul li a { color: inherit; }
.ref-core-grid article ul li a:hover { color: var(--ref-orange); }
.about-ref-profile-link { display: inline-block; margin-right: 12px; color: var(--ref-navy); font-weight: 800; }
.partner-ref-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.partner-ref-logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .8; }
.videos-ref-empty { padding: 30px; border: 1px dashed var(--ref-line); border-radius: 8px; text-align: center; }
.videos-ref-empty p { margin: 0 0 16px; }
@media (max-width: 1000px) { .ref-service-grid--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .ref-process--three, .services-ref-process--three, .contact-ref-process--three { grid-template-columns: 1fr; } }

/* --- Feature grids (Why choose us / Who we help) --- */
.ref-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ref-feature-grid article { padding: 26px 24px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); box-shadow: 0 8px 22px rgba(0, 31, 77, .04); }
.ref-feature-grid article i { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 10px; background: rgba(52, 118, 254, .12); color: var(--ref-orange); font-size: 20px; }
.ref-feature-grid article h3 { margin: 0 0 8px; color: var(--ref-navy-dark); font-size: 17px; font-weight: 800; }
.ref-feature-grid article p { margin: 0; color: var(--ref-ink); }
.ref-feature-grid--soft article { background: var(--ref-soft); box-shadow: none; }
@media (max-width: 960px) { .ref-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ref-feature-grid { grid-template-columns: 1fr; } }

/* --- Client logos --- */
.ref-client-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; }
.ref-client-logos div { display: flex; align-items: center; justify-content: center; min-height: 70px; padding: 10px 18px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.ref-client-logos img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .8; transition: .2s; }
.ref-client-logos div:hover img { filter: none; opacity: 1; }

/* --- FAQ grid --- */
.ref-faq-grid, .svc-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.ref-faq-grid details, .svc-faq-grid details { padding: 0 20px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.ref-faq-grid summary, .svc-faq-grid summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; color: var(--ref-navy-dark); font-weight: 800; cursor: pointer; list-style: none; }
.ref-faq-grid summary::-webkit-details-marker, .svc-faq-grid summary::-webkit-details-marker { display: none; }
.ref-faq-grid summary i, .svc-faq-grid summary i { flex-shrink: 0; color: var(--ref-orange); transition: transform .2s; }
.ref-faq-grid details[open] summary i, .svc-faq-grid details[open] summary i { transform: rotate(180deg); }
.ref-faq-grid details p, .svc-faq-grid details p { margin: 0 0 16px; color: var(--ref-ink); }
@media (max-width: 800px) { .ref-faq-grid, .svc-faq-grid { grid-template-columns: 1fr; } }

/* --- Founders (Home) --- */
.ref-founder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ref-founder-grid article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 22px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.ref-founder-grid img { width: 150px; height: 170px; border-radius: 8px; object-fit: cover; object-position: top; }
.ref-founder-grid article > div > span { display: block; color: var(--ref-orange); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ref-founder-grid h3 { margin: 4px 0 8px; color: var(--ref-navy-dark); font-size: 20px; font-weight: 800; }
.ref-founder-grid p { margin: 0; }
.ref-founder-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.ref-founder-links a { color: var(--ref-navy); font-size: 14px; font-weight: 800; }
@media (max-width: 800px) {
  .ref-founder-grid { grid-template-columns: 1fr; }
  .ref-founder-grid article { grid-template-columns: 110px minmax(0, 1fr); }
  .ref-founder-grid img { width: 110px; height: 130px; }
}

/* --- Service detail page --- */
.svc-page { color: var(--ref-ink); }
.svc-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--ref-line); background: linear-gradient(180deg, #f8fafd 0%, #ffffff 100%); }
.svc-hero__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 40px; align-items: center; }
.svc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--ref-muted); font-size: 13px; }
.svc-breadcrumb a { color: var(--ref-orange); font-weight: 700; }
.svc-breadcrumb i { font-size: 11px; }
.svc-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ref-orange); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.svc-hero h1 { margin: 0 0 14px; color: var(--ref-navy-dark); font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1.15; }
.svc-hero__copy > p { max-width: 720px; margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.svc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-hero__aside { display: flex; flex-direction: column; gap: 16px; }
.svc-hero__image { width: 100%; max-height: 320px; border-radius: 10px; object-fit: cover; }
.svc-hero__card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-white); box-shadow: var(--ref-shadow); }
.svc-hero__card strong { color: var(--ref-navy-dark); }
.svc-hero__card a { color: var(--ref-navy); font-weight: 800; }
.svc-section { padding: 46px 0; }
.svc-section:nth-of-type(even) { background: var(--ref-soft); }
.svc-section-head { max-width: 820px; margin: 0 auto 26px; text-align: center; }
.svc-section-head--left { margin-left: 0; text-align: left; }
.svc-section-head span { display: block; margin-bottom: 8px; color: var(--ref-orange); font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.svc-section-head h2 { margin: 0; color: var(--ref-navy-dark); font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; }
.svc-section-head p { margin: 10px 0 0; }
.svc-overview__inner { max-width: 900px; }
.svc-prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.svc-prose ul { margin: 0 0 14px 18px; }
.svc-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc-benefit-grid article { padding: 24px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.svc-benefit-grid article i { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 10px; background: rgba(52, 118, 254, .12); color: var(--ref-orange); font-size: 20px; }
.svc-benefit-grid article h3 { margin: 0 0 6px; color: var(--ref-navy-dark); font-size: 17px; font-weight: 800; }
.svc-benefit-grid article p { margin: 0; }
.svc-step-list { display: grid; gap: 14px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.svc-step-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.svc-step-list__no { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ref-navy); color: #fff; font-weight: 800; }
.svc-step-list h3 { margin: 0 0 4px; color: var(--ref-navy-dark); font-size: 17px; font-weight: 800; }
.svc-step-list p { margin: 0; }
.svc-step-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.svc-extra__items-heading { margin: 18px 0 14px; color: var(--ref-navy-dark); font-size: 19px; font-weight: 800; }
.svc-documents__inner { max-width: 900px; }
.svc-doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.svc-doc-list li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.svc-doc-list i { margin-top: 3px; color: var(--ref-orange); }
.svc-cta { padding: 46px 0; background: var(--ref-navy-dark); color: #fff; }
.svc-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.svc-cta h2 { margin: 0 0 8px; color: #fff; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; }
.svc-cta p { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .82); }
.svc-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc-related-grid a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); color: var(--ref-ink); transition: .2s; }
.svc-related-grid a:hover { border-color: var(--ref-orange); transform: translateY(-2px); }
.svc-related-grid i { color: var(--ref-orange); font-size: 20px; }
.svc-related-grid strong { color: var(--ref-navy-dark); }
.svc-related-grid span { color: var(--ref-muted); font-size: 14px; }
@media (max-width: 960px) {
  .svc-hero__inner { grid-template-columns: 1fr; }
  .svc-benefit-grid, .svc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-step-list--grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .svc-benefit-grid, .svc-related-grid, .svc-doc-list { grid-template-columns: 1fr; }
  .svc-step-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .svc-step-list__no { width: 44px; height: 44px; }
}

/* --- Services page: category listing --- */
.svc-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-category { padding: 22px; border: 1px solid var(--ref-line); border-radius: 8px; background: var(--ref-white); }
.svc-category header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.svc-category header i { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(52, 118, 254, .12); color: var(--ref-orange); font-size: 19px; }
.svc-category h3 { margin: 0 0 4px; color: var(--ref-navy-dark); font-size: 18px; font-weight: 800; }
.svc-category header p { margin: 0; color: var(--ref-muted); font-size: 14px; }
.svc-category ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.svc-category li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; color: var(--ref-ink); font-size: 14px; font-weight: 600; }
.svc-category li a:hover { background: var(--ref-soft); color: var(--ref-navy-dark); }
.svc-category li a i { width: 16px; color: var(--ref-orange); font-size: 13px; }
@media (max-width: 900px) { .svc-category-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .svc-category ul { grid-template-columns: 1fr; } }

/* --- All services: sidebar category nav --- */
.all-ref-cat-nav { display: flex; flex-direction: column; gap: 4px; margin: 18px 0; }
.all-ref-cat-nav h4 { margin: 0 0 6px; color: var(--ref-muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.all-ref-cat-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; color: var(--ref-ink); font-size: 14px; font-weight: 700; }
.all-ref-cat-nav a i { width: 18px; color: var(--ref-orange); }
.all-ref-cat-nav a small { margin-left: auto; color: var(--ref-muted); font-weight: 600; }
.all-ref-cat-nav a:hover, .all-ref-cat-nav a.is-active { background: var(--ref-soft); color: var(--ref-navy-dark); }

/* --- Refer & Earn page --- */
.refer-hero { padding: 54px 0 40px; border-bottom: 1px solid var(--ref-line); background: var(--ref-soft); }
.refer-hero__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 40px; align-items: center; }
.refer-hero h1 { margin: 0 0 6px; color: var(--ref-navy-dark); font-size: clamp(30px, 3vw, 42px); font-weight: 800; }
.refer-hero h2 { margin: 0 0 14px; color: var(--ref-orange); font-size: 20px; font-weight: 800; }
.refer-hero p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; }
.refer-hero__media img { width: 100%; border-radius: 10px; box-shadow: var(--ref-shadow); }
.refer-pill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.refer-pill-list li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--ref-line); border-radius: 999px; background: var(--ref-white); color: var(--ref-navy-dark); font-weight: 700; }
.refer-pill-list i { color: var(--ref-orange); }
.refer-two-col__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.refer-panel { padding: 26px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-white); }
.refer-panel--soft { background: var(--ref-soft); }
.refer-panel h2 { margin: 0 0 14px; color: var(--ref-navy-dark); font-size: 22px; font-weight: 800; }
.refer-panel ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.refer-panel li { display: flex; align-items: flex-start; gap: 10px; }
.refer-panel li i { margin-top: 4px; color: var(--ref-orange); }
.refer-panel__note { margin: 14px 0 0; color: var(--ref-navy); font-weight: 800; }
.refer-form__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: start; }
.refer-quote { margin: 18px 0; padding: 16px 20px; border-left: 4px solid var(--ref-orange); background: var(--ref-soft); color: var(--ref-navy-dark); font-style: italic; font-weight: 800; }
.refer-terms h3 { margin: 18px 0 8px; color: var(--ref-navy-dark); font-size: 16px; }
.refer-terms ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--ref-muted); font-size: 14px; }
.refer-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 26px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-white); box-shadow: var(--ref-shadow); }
.refer-form .contact-ref-field--wide, .refer-form .contact-ref-submit, .refer-form .contact-ref-secure, .refer-form .contact-ref-errors { grid-column: 1 / -1; }
@media (max-width: 900px) { .refer-hero__inner, .refer-two-col__grid, .refer-form__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .refer-form { grid-template-columns: 1fr; } }

/* --- People page --- */
.people-hero { padding: 54px 0 34px; border-bottom: 1px solid var(--ref-line); background: var(--ref-soft); }
.people-hero h1 { margin: 0 0 10px; color: var(--ref-navy-dark); font-size: clamp(30px, 3vw, 42px); font-weight: 800; }
.people-hero p { max-width: 720px; margin: 0; font-size: 16px; }
.people-founder-list { display: grid; gap: 26px; }
.people-founder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; padding: 28px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-white); box-shadow: 0 8px 22px rgba(0, 31, 77, .04); }
.people-founder__photo img { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; object-fit: cover; object-position: top; }
.people-founder__body h3 { margin: 0 0 4px; color: var(--ref-navy-dark); font-size: 26px; font-weight: 800; }
.people-founder__body > strong { display: block; margin-bottom: 14px; color: var(--ref-navy); }
.people-founder__body h4 { margin: 16px 0 10px; color: var(--ref-navy-dark); font-size: 15px; letter-spacing: .5px; text-transform: uppercase; }
.people-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.people-skills li { padding: 7px 12px; border: 1px solid var(--ref-line); border-radius: 999px; background: var(--ref-soft); color: var(--ref-navy-dark); font-size: 13px; font-weight: 700; }
.people-linkedin { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #0a66c2; font-weight: 800; }
.people-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.people-team-grid article { padding: 20px; border: 1px solid var(--ref-line); border-radius: 10px; background: var(--ref-white); text-align: center; }
.people-team-grid img { width: 120px; height: 120px; margin-bottom: 12px; border-radius: 50%; object-fit: cover; }
.people-team-grid h3 { margin: 0; color: var(--ref-navy-dark); font-size: 17px; }
.people-team-grid span { color: var(--ref-muted); font-size: 14px; }
@media (max-width: 900px) {
  .people-founder { grid-template-columns: 1fr; }
  .people-founder__photo img { max-width: 280px; }
  .people-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Blog: live updates + insight teasers --- */
.blog-ref-updates { padding: 40px 0; background: var(--ref-navy-dark); color: #fff; }
.blog-ref-updates__head { margin-bottom: 20px; }
.blog-ref-updates__head h2 { margin: 6px 0 0; color: inherit; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; }
.blog-ref-updates__head p { margin: 8px 0 0; }
.blog-ref-updates .eyebrow { color: var(--ref-orange); }
.blog-ref-updates__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.blog-ref-updates__grid article { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(255, 255, 255, .06); }
.blog-ref-updates__grid h3 { margin: 0; color: #fff; font-size: 15px; line-height: 1.4; }
.blog-ref-updates__grid p { flex: 1; margin: 0; color: rgba(255, 255, 255, .78); font-size: 13px; }
.blog-ref-updates__grid a { color: var(--ref-orange); font-size: 13px; font-weight: 800; }
.blog-ref-updates__note { margin: 14px 0 0; color: rgba(255, 255, 255, .6); font-size: 12px; }
.blog-ref-insights { padding: 44px 0 10px; }
.blog-ref-insights .blog-ref-updates__head h2 { color: var(--ref-navy-dark); }
.blog-ref-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.blog-ref-topics a { padding: 8px 14px; border: 1px solid var(--ref-line); border-radius: 999px; background: var(--ref-white); color: var(--ref-ink); font-size: 13px; font-weight: 700; }
.blog-ref-topics a.is-active, .blog-ref-topics a:hover { border-color: var(--ref-navy-dark); background: var(--ref-navy-dark); color: #fff; }
.blog-ref-insights__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .blog-ref-updates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .blog-ref-updates__grid, .blog-ref-insights__grid { grid-template-columns: 1fr; } }

/* FAQ accordions: keep each card its own height so opening one never stretches its row-mate */
.svc-faq-grid, .ref-faq-grid, .services-ref-faq-grid, .all-ref-faq__grid, .contact-ref-faq-list { align-items: start; }
.svc-faq-grid details, .ref-faq-grid details, .services-ref-faq-grid details, .all-ref-faq__grid details, .contact-ref-faq-list details { align-self: start; height: auto; }

/* Process grids follow their step count (the design's grid is 5 columns; fewer steps shouldn't leave empty tracks) */
.ref-process--3, .services-ref-process--3, .contact-ref-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-process--4, .services-ref-process--4, .contact-ref-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ref-process--2, .services-ref-process--2, .contact-ref-process--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-process--1, .services-ref-process--1, .contact-ref-process--1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) {
  .ref-process--3, .ref-process--4, .services-ref-process--3, .services-ref-process--4, .contact-ref-process--3, .contact-ref-process--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ref-process--2, .ref-process--3, .ref-process--4, .services-ref-process--2, .services-ref-process--3, .services-ref-process--4, .contact-ref-process--2, .contact-ref-process--3, .contact-ref-process--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Founders grid follows the founder count (3-column design, 2 founders shouldn't leave an empty track) */
.about-ref-leaders--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 748px; }
.about-ref-leaders--1 { grid-template-columns: minmax(0, 1fr); max-width: 364px; }
@media (max-width: 960px) {
  .about-ref-leaders--1, .about-ref-leaders--2 { grid-template-columns: 1fr; max-width: 720px; }
}

/* ==========================================================================
   Booking page — calendar + slot-panel widget
   ========================================================================== */
.booking-ref-hero {
  padding: 64px 0 24px;
  text-align: center;
}

.booking-ref-hero__inner {
  max-width: 720px;
  margin: 0 auto;
}

.booking-ref-kicker {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ref-orange);
}

.booking-ref-hero h1 {
  margin: 0 0 14px;
  font-size: 40px;
  font-weight: 800;
  color: var(--ref-navy-dark);
}

.booking-ref-hero p {
  margin: 0;
  color: var(--ref-muted);
  font-size: 16px;
  line-height: 1.6;
}

.booking-ref-widget-section {
  padding: 24px 0 80px;
}

.booking-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 940px;
  margin: 0 auto;
  background: var(--ref-white);
  border: 1px solid var(--ref-line);
  border-radius: 22px;
  box-shadow: var(--ref-shadow);
  overflow: hidden;
}

/* Several elements inside the widget set their own `display` (flex/grid) so
   they lay out correctly when visible — but that same rule, at the same
   specificity as the browser's built-in `[hidden] { display: none }`, wins
   on source order and silently defeats the `hidden` attribute JS toggles.
   This blanket override keeps `hidden` authoritative everywhere in here. */
.booking-widget [hidden] {
  display: none !important;
}

/* Starts as a single centered calendar; once a date is first picked,
   --active docks it to the left and the time/details panel fades in
   beside it (see initBookingWidget in main.js). */
.booking-widget__cal {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 30px 28px 34px;
  transition: max-width 0.45s ease, border-color 0.45s ease;
  border-right: 1px solid transparent;
}

.booking-widget--active .booking-widget__cal {
  max-width: 380px;
  margin: 0;
  border-right-color: var(--ref-line);
}

.booking-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.booking-cal__head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ref-navy-dark);
  text-align: center;
}

.booking-cal__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 40, 94, 0.08);
  color: var(--ref-navy);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.booking-cal__nav:hover:not(:disabled) { background: rgba(0, 40, 94, 0.16); }
.booking-cal__nav:disabled { opacity: 0.35; cursor: not-allowed; }

.booking-cal__weekdays,
.booking-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.booking-cal__weekdays {
  margin-bottom: 6px;
}

.booking-cal__weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ref-muted);
  padding-bottom: 8px;
}

.booking-cal__grid { row-gap: 4px; }

.booking-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 2px auto;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ref-navy-dark);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.booking-day--available {
  background: rgba(0, 40, 94, 0.07);
  color: var(--ref-navy);
}

.booking-day--available:hover { background: rgba(0, 40, 94, 0.14); }

.booking-day--disabled {
  color: #c3cbda;
  cursor: not-allowed;
}

.booking-day--today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ref-orange);
  transform: translateX(-50%);
}

.booking-day--selected,
.booking-day--selected.booking-day--available {
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.booking-day--selected::after { background: var(--ref-white); }

.booking-widget__panel {
  flex: 1 1 380px;
  min-width: 0;
  padding: 30px 32px;
  background: var(--ref-soft);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

.booking-widget--active .booking-widget__panel {
  opacity: 1;
  transform: translateX(0);
}

.booking-step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.booking-step--leaving {
  opacity: 0;
  transform: translateX(-24px);
}

.booking-step--entering {
  opacity: 0;
  transform: translateX(24px);
}

.booking-step--leaving-back {
  opacity: 0;
  transform: translateX(24px);
}

.booking-step--entering-back {
  opacity: 0;
  transform: translateX(-24px);
}

.booking-back-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  color: var(--ref-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.booking-back-link:hover { color: var(--ref-navy); }

.booking-panel__date span {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ref-orange);
  margin-bottom: 4px;
}

.booking-panel__date strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--ref-navy-dark);
}

.booking-panel__slots {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
}

.booking-panel__empty {
  margin: 0;
  font-size: 13px;
  color: var(--ref-muted);
}

.booking-slot {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(0, 40, 94, 0.07);
  color: var(--ref-navy-dark);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.booking-slot:hover:not(:disabled) { background: rgba(0, 40, 94, 0.14); }

.booking-slot--selected {
  background: var(--ref-navy-dark);
  color: var(--ref-white);
}

.booking-slot:disabled {
  background: transparent;
  color: #c3cbda;
  text-decoration: line-through;
  cursor: not-allowed;
}

.booking-panel__continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ref-line);
}

.booking-panel__continue span {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ref-navy-dark);
}

.booking-panel__continue .booking-book-btn {
  width: auto;
  padding: 0 20px;
  min-height: 44px;
}

.booking-panel__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed var(--ref-line);
}

.booking-panel__form .form-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.booking-panel__form label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ref-navy-dark);
}

.booking-panel__form label small {
  font-weight: 500;
  color: var(--ref-muted);
  text-transform: none;
  letter-spacing: 0;
}

.booking-panel__form input,
.booking-panel__form select,
.booking-panel__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: var(--ref-white);
  color: var(--ref-ink);
  font-size: 13.5px;
  font-family: inherit;
}

.booking-panel__form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #65758f 50%), linear-gradient(135deg, #65758f 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.booking-panel__form input:focus,
.booking-panel__form select:focus,
.booking-panel__form textarea:focus {
  outline: none;
  border-color: var(--ref-orange);
}

.booking-panel__error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdecec;
  color: #b3261e;
  font-size: 13px;
}

.booking-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 10px;
  background: var(--ref-orange);
  color: var(--ref-white);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.booking-book-btn:hover:not(:disabled) { background: var(--ref-orange-dark, #2a63d9); }

.booking-book-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.booking-book-btn--booked {
  background: #1c8a4c;
}

.booking-step--success {
  align-items: center;
  text-align: center;
  padding: 20px 0;
}

.booking-step--success i {
  font-size: 40px;
  color: #1c8a4c;
}

.booking-step--success h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--ref-navy-dark);
}

.booking-step--success p {
  margin: 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ref-muted);
}

.booking-ref {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 24px;
  border-radius: 10px;
  background: rgba(0, 40, 94, 0.07);
}

.booking-ref span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ref-muted);
}

.booking-ref strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ref-navy-dark);
}

@media (max-width: 860px) {
  .booking-widget {
    flex-direction: column;
  }

  .booking-widget__cal {
    max-width: 100%;
  }

  .booking-widget--active .booking-widget__cal {
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ref-line);
  }

  .booking-widget__panel {
    flex-basis: auto;
  }
}

@media (max-width: 480px) {
  .booking-ref-hero { padding: 44px 0 18px; }
  .booking-ref-hero h1 { font-size: 28px; }
  .booking-widget__cal, .booking-widget__panel { padding: 22px 18px; }
  .booking-day { width: 34px; height: 34px; font-size: 12.5px; }
  .booking-panel__slots { grid-template-columns: auto auto; }
}
/* Mobile home reference match: CSS-only update from 01_Home_Mobile_10MB.jpg. */
@media (max-width: 640px) {
  body.ref-home {
    background: #ffffff;
  }

  body.ref-home .ref-container {
    width: min(100% - 24px, 1450px);
  }

  body.ref-home .ref-topbar {
    min-height: 38px;
    background: #002457;
  }

  body.ref-home .ref-topbar__inner {
    min-height: 38px;
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0;
    flex-wrap: nowrap;
  }

  body.ref-home .ref-topbar span:first-child {
    display: none !important;
  }

  body.ref-home .ref-topbar span:nth-child(2) {
    order: 2;
  }

  body.ref-home .ref-topbar span:nth-child(3) {
    order: 1;
  }

  body.ref-home .ref-topbar span,
  body.ref-home .ref-topbar a {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    letter-spacing: 0;
  }

  body.ref-home .ref-topbar i {
    font-size: 11px;
  }

  body.ref-home .ref-header {
    position: relative;
    top: auto;
    box-shadow: 0 2px 12px rgba(0, 31, 77, 0.08);
  }

  body.ref-home .ref-nav {
    min-height: 76px;
    gap: 10px;
  }

  body.ref-home .ref-logo {
    min-width: 0;
  }

  body.ref-home .ref-logo img {
    width: 174px !important;
    max-width: 43vw;
    height: auto !important;
    object-fit: contain;
  }

  body.ref-home .ref-logo__text {
    display: none !important;
  }

  body.ref-home .ref-nav__links > .ref-btn {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    white-space: normal;
    text-align: center;
  }

  body.ref-home .ref-nav__toggle {
    width: 36px;
    height: 42px;
    color: #001f55;
    font-size: 26px;
  }

  body.ref-home .ref-hero {
    overflow: hidden;
    border-bottom: 1px solid #e7edf5;
    background: #f6faff;
  }

  body.ref-home .ref-hero__grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 53%) minmax(132px, 47%);
    align-items: stretch;
    min-height: 336px;
    padding: 24px 0 0 12px;
    gap: 0;
  }

  body.ref-home .ref-hero__copy {
    position: relative;
    z-index: 2;
    align-self: start;
    padding: 0 0 18px;
  }

  body.ref-home .ref-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  body.ref-home .ref-hero__copy p {
    max-width: 100%;
    margin: 0;
    color: #233a5e;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    font-weight: 500;
  }

  body.ref-home .ref-actions {
    width: 100%;
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.ref-home .ref-actions .ref-btn {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 800;
    justify-content: center;
  }

  body.ref-home .ref-hero__visual {
    align-self: stretch;
    min-height: 0;
    margin: 0 -12px 0 -22px;
    overflow: visible;
    background: transparent;
  }

  body.ref-home .ref-hero__visual::before {
    background:
      linear-gradient(90deg, #f6faff 0%, rgba(246, 250, 255, 0.88) 16%, rgba(246, 250, 255, 0.3) 36%, rgba(246, 250, 255, 0) 56%),
      linear-gradient(180deg, rgba(246, 250, 255, 0) 62%, #ffffff 100%);
  }

  body.ref-home .ref-hero__visual img {
    width: 100%;
    height: 336px !important;
    object-fit: cover;
    object-position: 50% top;
    filter: saturate(0.95) brightness(1.04) contrast(1.02);
  }

  body.ref-home .ref-trust-card {
    display: none !important;
  }

  body.ref-home .ref-hero-stats {
    width: min(100% - 24px, 1450px);
    min-height: 76px;
    margin: 0 auto 12px;
    padding: 8px 4px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid #dfe7f2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 31, 77, 0.1);
  }

  body.ref-home .ref-hero-stats div,
  body.ref-home .ref-hero-stats div:first-child,
  body.ref-home .ref-hero-stats div:last-child {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    border-right: 1px solid #e5ebf3;
    text-align: center;
  }

  body.ref-home .ref-hero-stats div:last-child {
    border-right: 0;
  }

  body.ref-home .ref-hero-stats i {
    font-size: 21px;
    line-height: 1;
  }

  body.ref-home .ref-hero-stats__icon-img {
    width: 21px;
    height: 21px;
  }

  body.ref-home .ref-hero-stats p {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    font-weight: 600;
  }

  body.ref-home .ref-hero-stats strong {
    display: block;
    margin-bottom: 1px;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 800;
  }

  body.ref-home .ref-section {
    padding: 16px 0;
  }

  body.ref-home .ref-section-head {
    margin-bottom: 10px !important;
    text-align: center;
  }

  body.ref-home .ref-section-head h2 {
    font-size: 17px !important;
    line-height: 1.22 !important;
    font-weight: 800;
  }

  body.ref-home .ref-section-head p,
  body.ref-home .ref-section-head span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  body.ref-home .ref-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  body.ref-home .ref-service-grid article {
    min-height: 112px;
    padding: 12px 5px 10px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 31, 77, 0.06) !important;
  }

  body.ref-home .ref-service-grid article > i {
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    font-size: 24px;
  }

  body.ref-home .ref-service-grid h3 {
    min-height: 30px;
    margin: 0 0 6px;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 800;
  }

  body.ref-home .ref-service-grid p {
    display: none;
  }

  body.ref-home .ref-service-grid a {
    margin-top: 0;
    font-size: 16px !important;
  }

  body.ref-home .ref-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px 14px;
    border-radius: 8px;
    background: #002457;
    box-shadow: 0 10px 22px rgba(0, 31, 77, 0.14);
  }

  body.ref-home .ref-search label {
    grid-column: 1 / -1;
    display: block;
    min-height: auto;
    color: #ffffff;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800;
    text-align: center;
  }

  body.ref-home .ref-search input,
  body.ref-home .ref-search .ref-btn {
    min-height: 42px;
    border-radius: 6px !important;
    font-size: 12px !important;
  }

  body.ref-home .ref-search .ref-btn {
    width: 100%;
    background: #3476fe;
  }

  body.ref-home .ref-trust-strip {
    padding: 10px 0;
    background: #002457;
  }

  body.ref-home .ref-trust-strip__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  body.ref-home .ref-trust-strip__grid div {
    min-height: 58px;
    padding: 0 6px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 0;
    gap: 6px;
  }

  body.ref-home .ref-trust-strip__grid div:last-child {
    border-right: 0;
  }

  body.ref-home .ref-trust-strip i {
    font-size: 22px;
  }

  body.ref-home .ref-trust-strip__icon-img {
    width: 22px;
    height: 22px;
  }

  body.ref-home .ref-trust-strip p,
  body.ref-home .ref-trust-strip strong {
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  body.ref-home .ref-core-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.ref-home .ref-core-grid article {
    min-height: 76px;
    padding: 12px 10px;
    border-radius: 8px;
  }

  body.ref-home .ref-core-grid h3 {
    margin: 0 0 4px;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.ref-home .ref-core-grid li,
  body.ref-home .ref-core-grid a {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
  }

  body.ref-home .ref-core-grid ul {
    margin-bottom: 6px;
  }

  body.ref-home .ref-center-action {
    margin-top: 10px;
  }

  body.ref-home .ref-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  body.ref-home .ref-process::before {
    display: block;
    left: 9%;
    right: 9%;
    top: 30px;
  }

  body.ref-home .ref-process article {
    padding: 0 3px;
  }

  body.ref-home .ref-process article:not(:last-child)::before,
  body.ref-home .ref-process article:not(:last-child)::after {
    display: none;
  }

  body.ref-home .ref-process article > i {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    font-size: 16px;
  }

  body.ref-home .ref-process article > span {
    font-size: 18px;
  }

  body.ref-home .ref-process h3 {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  body.ref-home .ref-process p {
    display: none;
  }

  body.ref-home .ref-proof__grid,
  body.ref-home .ref-case {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.ref-home .ref-case {
    padding: 10px;
  }

  body.ref-home .ref-case img {
    height: 150px;
    border-radius: 7px;
  }

  body.ref-home .ref-testimonial-grid,
  body.ref-home .ref-article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.ref-home .ref-article-grid article img {
    height: 74px;
  }

  body.ref-home .ref-article-grid article div {
    padding: 8px;
  }

  body.ref-home .ref-article-grid h3 {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  body.ref-home .ref-final-cta {
    padding: 8px 0 10px;
  }

  body.ref-home .ref-final-cta__inner {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
  }

  body.ref-home .ref-final-cta__inner img {
    width: 48px;
    height: 48px;
  }

  body.ref-home .ref-final-cta h2 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  body.ref-home .ref-final-cta p {
    font-size: 9px !important;
  }

  body.ref-home .ref-final-cta__inner .ref-actions {
    grid-column: auto;
    display: flex;
    width: auto;
    gap: 7px;
  }

  body.ref-home .ref-final-cta__inner .ref-btn {
    width: auto;
    min-height: 36px;
    padding: 0 10px;
    font-size: 10px !important;
    white-space: nowrap;
  }

  body.ref-home .ref-footer {
    padding: 18px 0 12px;
  }

  body.ref-home .ref-footer__grid {
    grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  body.ref-home .ref-footer .ref-logo img {
    width: 112px !important;
    max-width: 100%;
  }

  body.ref-home .ref-footer h3 {
    margin-bottom: 7px;
    font-size: 9.5px !important;
  }

  body.ref-home .ref-footer p,
  body.ref-home .ref-footer a {
    margin-bottom: 5px;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }

  body.ref-home .ref-footer-social {
    gap: 5px;
    margin-top: 8px;
  }

  body.ref-home .ref-footer-social a {
    width: 20px;
    height: 20px;
  }

  body.ref-home .ref-footer-social a i {
    font-size: 10px;
  }
}

@media (max-width: 420px) {
  body.ref-home .ref-logo img {
    width: 160px !important;
    max-width: 42vw;
  }

  body.ref-home .ref-nav__links > .ref-btn {
    padding: 0 11px;
    font-size: 11px !important;
  }

  body.ref-home .ref-hero__grid {
    grid-template-columns: minmax(0, 54%) minmax(118px, 46%);
    min-height: 314px;
  }

  body.ref-home .ref-hero h1 {
    font-size: clamp(25px, 7.6vw, 30px) !important;
  }

  body.ref-home .ref-hero__copy p {
    font-size: 12px !important;
  }

  body.ref-home .ref-hero__visual img {
    height: 314px !important;
  }

  body.ref-home .ref-service-grid article {
    min-height: 106px;
    padding-inline: 4px;
  }

  body.ref-home .ref-service-grid h3 {
    font-size: 9.5px !important;
  }

  body.ref-home .ref-search {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
}
/* Mobile repair: readable phone layout after reference tuning. */
@media (max-width: 640px) {
  body.ref-home .ref-logo img {
    width: 42px !important;
    max-width: 42px;
    height: 42px !important;
  }

  body.ref-home .ref-logo__text {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
  }

  body.ref-home .ref-header .ref-logo__name {
    display: block;
    color: #002457;
    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 800;
  }

  body.ref-home .ref-header .ref-logo__tagline {
    display: block;
    color: #637089;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  body.ref-home .ref-nav__links > .ref-btn {
    min-height: 38px;
    padding: 0 10px;
    font-size: 10.5px !important;
  }

  body.ref-home .ref-hero__grid {
    grid-template-columns: minmax(0, 56%) minmax(112px, 44%);
    min-height: 300px;
    padding: 20px 0 0 12px;
  }

  body.ref-home .ref-hero h1 {
    font-size: clamp(24px, 7.1vw, 29px) !important;
    line-height: 1.16 !important;
    margin-bottom: 9px;
  }

  body.ref-home .ref-hero__copy p {
    font-size: 11.5px !important;
    line-height: 1.48 !important;
  }

  body.ref-home .ref-actions .ref-btn {
    min-height: 36px;
    font-size: 10.5px !important;
  }

  body.ref-home .ref-hero__visual img {
    height: 300px !important;
    object-position: 25% top;
  }

  body.ref-home .ref-hero-stats {
    min-height: auto;
    margin: -28px auto 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px 2px;
  }

  body.ref-home .ref-hero-stats p {
    font-size: 8.5px !important;
  }

  body.ref-home .ref-hero-stats strong {
    font-size: 10.5px !important;
  }

  /* Reference shows a compact icon-grid (icon + title only, no description,
     arrow-only link) rather than full description cards. 5 columns as drawn
     is too cramped at true phone widths, so 3 here with 2 at <=420px. */
  body.ref-home .ref-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.ref-home .ref-service-grid article {
    min-height: 110px;
    padding: 12px 6px 10px;
    text-align: center;
  }

  body.ref-home .ref-service-grid article > i {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    font-size: 26px;
  }

  body.ref-home .ref-service-grid h3 {
    min-height: 28px;
    margin: 0 0 6px;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  body.ref-home .ref-service-grid p {
    display: none;
  }

  body.ref-home .ref-service-grid a {
    margin-top: 0;
    font-size: 15px !important;
  }

  body.ref-home .ref-search {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  body.ref-home .ref-search label {
    grid-column: 1 / -1;
    font-size: 14px !important;
  }

  body.ref-home .ref-search input {
    min-height: 44px;
    border-radius: 6px !important;
  }

  body.ref-home .ref-search .ref-btn {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  body.ref-home .ref-trust-strip__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  body.ref-home .ref-trust-strip__grid div {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 10px 3px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 0;
    text-align: center;
  }

  body.ref-home .ref-trust-strip__grid div:last-child {
    border-right: 0;
  }

  body.ref-home .ref-trust-strip__grid i,
  body.ref-home .ref-trust-strip__grid img {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  body.ref-home .ref-trust-strip__grid p {
    font-size: 7.5px !important;
    line-height: 1.2 !important;
  }

  body.ref-home .ref-trust-strip__grid strong {
    display: block;
    margin-bottom: 2px;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
  }

  body.ref-home .ref-trust-strip__grid .ref-stars {
    display: none;
  }

  body.ref-home .ref-trust-strip p,
  body.ref-home .ref-trust-strip strong {
    font-size: 10px !important;
  }

  /* .ref-title-row is still on desktop-scale font sizes at mobile widths
     (used for both "What Our Clients Say" and "Knowledge Center"). */
  body.ref-home .ref-title-row {
    gap: 10px;
    margin-bottom: 14px;
  }

  body.ref-home .ref-title-row span {
    margin-bottom: 4px;
    font-size: 11px !important;
  }

  body.ref-home .ref-title-row h2 {
    font-size: 19px !important;
    line-height: 1.25 !important;
  }

  body.ref-home .ref-title-row p {
    margin-top: 6px;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body.ref-home .ref-title-row a {
    font-size: 12px !important;
  }

  body.ref-home .ref-testimonial-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.ref-home .ref-article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  /* One testimonial, centered, matching the reference — the surrounding
     prev/next arrows now step one at a time (see intoSlides($testimonials, 1)
     in the template) instead of jumping by groups of 3. */
  body.ref-home .ref-testimonial-grid article {
    padding: 20px 30px;
    text-align: center;
  }

  body.ref-home .ref-testimonial-grid > article > i {
    font-size: 18px;
  }

  body.ref-home .ref-testimonial-grid p {
    min-height: auto;
    margin: 10px 0 14px;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  body.ref-home .ref-testimonial-grid div {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    text-align: left;
  }

  body.ref-home .ref-testimonial-grid img {
    grid-row: auto;
  }

  body.ref-home .ref-testimonial-grid strong {
    font-size: 12px !important;
  }

  body.ref-home .ref-testimonial-grid small {
    font-size: 10px !important;
  }

  /* Compact horizontal cards, 3 across: title + a condensed one-line summary
     of the highlights (truncated with an ellipsis if it overflows — the full
     list is unchanged in the markup, just visually condensed to fit here;
     the complete list still lives on All Services) instead of a full bullet
     list, with the arrow-only link pinned to the end of the card. */
  body.ref-home .ref-core-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.ref-home .ref-core-grid article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 96px;
    padding: 10px 8px;
    text-align: left;
  }

  body.ref-home .ref-core-grid article > div {
    min-width: 0;
    width: 100%;
  }

  body.ref-home .ref-core-grid h3 {
    margin: 0 0 3px;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
  }

  body.ref-home .ref-core-grid ul {
    display: -webkit-box;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  body.ref-home .ref-core-grid li {
    display: inline;
    padding: 0;
    font-size: 8px !important;
    line-height: 1.3 !important;
    color: var(--ref-muted);
  }

  body.ref-home .ref-core-grid li:not(:last-child)::after {
    content: ", ";
  }

  body.ref-home .ref-core-grid li::marker {
    content: none;
  }

  body.ref-home .ref-core-grid a {
    margin-top: auto;
    font-size: 11px !important;
  }

  /* Horizontal row of 5 numbered icon-circles with a dotted connector,
     matching the reference — scaled down from the desktop version's same
     technique (see .ref-process i/span/::before/::after above) rather than
     the previous stacked-card fallback. */
  body.ref-home .ref-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  body.ref-home .ref-process::before {
    display: none;
  }

  body.ref-home .ref-process article {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0 2px;
    text-align: center;
  }

  /* Line spans icon-edge to icon-edge across one column: from this icon's
     right edge (50% + 16px, icon radius 16px) to the next icon's left edge,
     which is 100% - 32px further along — the maths must scale with the
     32px icon here, not desktop's 82px one. */
  body.ref-home .ref-process article:not(:last-child)::before {
    display: block;
    content: "";
    position: absolute;
    top: 16px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    border-top: 1.5px dotted #9aa8bb;
  }

  body.ref-home .ref-process article > i {
    order: 1;
    position: static;
    width: 32px;
    height: 32px;
    margin: 0 0 6px;
    border-width: 2px;
    font-size: 13px;
    transform: none;
  }

  body.ref-home .ref-process i::after {
    inset: 4px;
  }

  body.ref-home .ref-process article > span {
    order: 2;
    position: static;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 1;
  }

  body.ref-home .ref-process h3 {
    order: 3;
    margin: 0;
    font-size: 8px !important;
    line-height: 1.25 !important;
  }

  body.ref-home .ref-process p {
    display: none;
  }

  body.ref-home .ref-proof__grid {
    grid-template-columns: 1fr;
  }

  /* Compact side-by-side card (small image + text) instead of the desktop
     navy full-bleed card, matching the reference's mobile treatment. */
  body.ref-home .ref-case {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e5ebf3;
    border-radius: 10px;
  }

  body.ref-home .ref-case img {
    order: 1;
    width: 100px;
    height: auto;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
  }

  body.ref-home .ref-case div {
    order: 2;
    padding: 12px;
  }

  body.ref-home .ref-case span {
    color: var(--ref-orange);
    font-size: 9px !important;
    letter-spacing: 0.04em;
  }

  body.ref-home .ref-case h2 {
    margin: 3px 0 6px;
    color: var(--ref-navy-dark);
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  body.ref-home .ref-case ul {
    margin: 0 0 6px;
  }

  body.ref-home .ref-case li {
    color: var(--ref-ink);
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  body.ref-home .ref-case strong {
    margin-bottom: 6px;
    font-size: 9px !important;
    color: var(--ref-orange-dark, #2a63d9);
  }

  body.ref-home .ref-case a {
    display: inline-flex;
    min-height: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ref-navy) !important;
    font-size: 10px !important;
  }

  body.ref-home .ref-article-grid article img {
    height: 70px;
  }

  body.ref-home .ref-testimonial-grid article,
  body.ref-home .ref-article-grid article {
    min-width: 0;
  }

  body.ref-home .ref-article-grid article div {
    padding: 6px 3px;
  }

  body.ref-home .ref-article-grid span {
    margin-top: -14px;
    margin-right: 0;
    font-size: 6.5px !important;
    padding: 3px 6px;
    border-radius: 10px;
  }

  body.ref-home .ref-article-grid small {
    display: block;
    margin-top: 4px;
    font-size: 7px !important;
  }

  body.ref-home .ref-article-grid h3 {
    margin: 3px 0 !important;
    font-size: 8.5px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }

  body.ref-home .ref-article-grid p {
    font-size: 7px !important;
  }

  body.ref-home .ref-final-cta__inner {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px;
  }

  body.ref-home .ref-final-cta__inner .ref-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.ref-home .ref-final-cta__inner .ref-btn {
    width: 100%;
    min-height: 38px;
    font-size: 10.5px !important;
  }

  body.ref-home .ref-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
  }

  body.ref-home .ref-footer__grid > div:first-child,
  body.ref-home .ref-footer__grid > div:last-child {
    grid-column: 1 / -1;
  }

  body.ref-home .ref-footer h3 {
    font-size: 12px !important;
  }

  body.ref-home .ref-footer p,
  body.ref-home .ref-footer a {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 420px) {
  body.ref-home .ref-hero__grid {
    grid-template-columns: minmax(0, 58%) minmax(104px, 42%);
    min-height: 286px;
  }

  body.ref-home .ref-hero h1 {
    font-size: clamp(20px, 6vw, 30px) !important;
  }

  body.ref-home .ref-hero__copy p {
    font-size: 9px !important;
    text-align: justify;
  }

  body.ref-home .ref-hero__visual img {
    height: 333px !important;
  }

  body.ref-home .ref-hero-stats i {
    font-size: 18px;
  }

  body.ref-home .ref-hero-stats__icon-img {
    width: 18px;
    height: 18px;
  }

  body.ref-home .ref-hero-stats p {
    font-size: 7.8px !important;
  }
}

/* Every page had its own hand-tuned mobile button size (min-height ranged
   36-58px across pages, padding 8-27px, font-size 10-18px). Standardizing
   every .ref-btn to one consistent size, per spec. This block is deliberately
   last in the file and !important on every property so it wins over each
   page-specific rule above regardless of that rule's own specificity or
   !important — those rules still control width/margin/order/etc., only
   sizing is unified here. */
@media (max-width: 960px) {
  /* .ref-btn repeated boosts specificity (without an id) past every
     page-specific selector above, including the ones that already carry
     !important on font-size — plain !important alone still loses ties to
     the more specific selector when both sides are !important. */
  .ref-btn.ref-btn.ref-btn.ref-btn.ref-btn {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
  }
}

/* Home's mobile type scale was hand-tuned to match the reference mockups and
   ended up noticeably more compact than every other page (hero h1 ~30-38px
   elsewhere vs Home's ~24-29px; section h2 ~22-30px elsewhere vs Home's
   ~17-19px; hero paragraph ~14-18px elsewhere vs Home's ~9-12px). Bringing
   every other page's hero heading/lead/section-head down to match Home's
   scale instead of leaving Home as the one compact outlier. */
@media (max-width: 960px) {
  .about-ref-hero h1,
  .services-ref-hero h1,
  .all-ref-hero h1,
  .partner-ref-hero h1,
  .contact-ref-hero h1,
  .photos-ref-hero h1,
  .videos-ref-hero h1,
  .legal-ref-hero h1,
  .gallery-ref-hero h1,
  .blog-ref-hero h1,
  .detail-ref-title h1,
  .detail-ref-article h1,
  .booking-ref-hero h1,
  .people-hero h1,
  .refer-hero h1,
  .svc-hero h1 {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .about-ref-hero p,
  .services-ref-hero p,
  .services-ref-hero__copy p,
  .all-ref-hero p,
  .all-ref-hero__copy p,
  .partner-ref-hero p,
  .contact-ref-hero p,
  .photos-ref-hero p,
  .videos-ref-hero p,
  .legal-ref-hero p,
  .gallery-ref-hero p,
  .blog-ref-hero p,
  .booking-ref-hero p,
  .people-hero p,
  .refer-hero p {
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  .about-ref-section-head h2,
  .all-ref-section-head h2,
  .contact-ref-section-head h2,
  .legal-ref-section-head h2,
  .partner-ref-section-head h2,
  .services-ref-section-head h2,
  .svc-section-head h2 {
    font-size: 18px !important;
  }
}

/* The topbar's font-size is contested by a `--cc-font-body` !important rule
   further up the file — this beats it purely by coming later in source
   order at equal specificity, matching Home's compact topbar on every page. */
@media (max-width: 640px) {
  .ref-topbar span,
  .ref-topbar a {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 600;
    letter-spacing: 0;
  }
}

/* Site-wide button color change to #3476fe, on every page and at every
   width (desktop and mobile) — only the solid/primary .ref-btn (buttons
   also carrying --small are still solid-style, just smaller, so they're
   included). The --white/--light/--navy/--ghost variants are genuinely
   different secondary button styles and are excluded on purpose, along with
   unrelated orange accents (icons, tags, badges) elsewhere on the site.
   Repeated-class selector + !important beats every page-specific
   background/box-shadow override found on .ref-btn above. */
.ref-btn.ref-btn.ref-btn.ref-btn.ref-btn:not(.ref-btn--white):not(.ref-btn--light):not(.ref-btn--navy):not(.ref-btn--ghost) {
  background: #3476fe !important;
  box-shadow: 0 12px 22px rgba(52, 118, 254, 0.22) !important;
}

.ref-btn.ref-btn.ref-btn.ref-btn.ref-btn:not(.ref-btn--white):not(.ref-btn--light):not(.ref-btn--navy):not(.ref-btn--ghost):hover {
  background: #2a63d9 !important;
}

.ref-nav__links > .ref-btn i {
  font-size: 30px;
}

/* Footer text sizing was contested by two other typography systems in this
   file (--site-card-title-size for h3, --cc-font-body for p/a), which won
   on every page except Home (Home has its own !important overrides). Home's
   values are the intended compact scale — matching every page to it. */
@media (max-width: 640px) {
  .ref-footer.ref-footer.ref-footer.ref-footer.ref-footer h3 {
    font-size: 12px !important;
  }

  .ref-footer.ref-footer.ref-footer.ref-footer.ref-footer p,
  .ref-footer.ref-footer.ref-footer.ref-footer.ref-footer a {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .ref-footer-social {
    gap: 5px;
    margin-top: 8px;
  }

  .ref-footer-social a {
    width: 20px;
    height: 20px;
  }

  .ref-footer-social a i {
    font-size: 10px;
  }

  .ref-footer {
    padding: 18px 0 12px;
  }

  /* Hero images ranged from 170px to 330px tall across pages, some using
     object-fit:fill (stretching/distorting the photo instead of cropping).
     Standardizing every page's hero photo to match Home's ~300px height. */
  .about-ref-hero__media img,
  .all-ref-hero__media img,
  .partner-ref-hero__media img,
  .contact-ref-hero__media img,
  .refer-hero__media img,
  .blog-ref-hero__media img,
  .svc-hero__image {
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* These four pages render their hero photo as a background-image div
     (not a real <img>), and it was sitting flush against the screen edges
     with square corners — unlike every other page's rounded, inset "framed
     photo" card. Blog and Legal were also sitting asymmetrically (a left
     gutter but none on the right) because their width/position math never
     accounted for the mobile single-column collapse. Forcing an explicit
     symmetric width here fixes both issues at once. */
  .photos-ref-hero__media,
  .videos-ref-hero__media,
  .legal-ref-hero__media,
  .blog-ref-hero__media {
    border-radius: 8px !important;
  }

  /* Reorder the About hero to match the reference mockup: heading/lead read
     first, then the photo, then the action buttons — instead of the buttons
     sitting between the text and the photo. .about-ref-hero__copy gets
     display:contents so its own children become direct grid items of
     .about-ref-hero__inner, sitting alongside .about-ref-hero__media, and
     can then be ordered against it directly. */
  .about-ref-hero__copy {
    display: contents;
  }

  .about-ref-hero__copy > .about-ref-kicker {
    order: 1;
  }

  .about-ref-hero__copy > h1 {
    order: 2;
  }

  .about-ref-hero__copy > p {
    order: 3;
  }

  .about-ref-hero__media {
    order: 4;
  }

  .about-ref-hero__copy > .about-ref-actions {
    order: 5;
    margin-top: 0;
  }

  .about-ref-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .about-ref-actions .ref-btn {
    width: 100%;
    white-space: normal;
  }

  /* Same reorder for Become Partner: breadcrumb hidden, heading/subheading/
     lead read first, then the photo, then the action buttons. */
  .partner-ref-breadcrumb {
    display: none;
  }

  .partner-ref-hero__copy {
    display: contents;
  }

  .partner-ref-hero__copy > h1 {
    order: 1;
  }

  .partner-ref-hero__copy > h2 {
    order: 2;
  }

  .partner-ref-hero__copy > p {
    order: 3;
  }

  .partner-ref-hero__media {
    order: 4;
  }

  .partner-ref-hero__copy > .partner-ref-actions {
    order: 5;
    margin-top: 0;
  }

  .partner-ref-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .partner-ref-actions .ref-btn {
    width: 100%;
    white-space: normal;
  }

  /* Same reorder for All Services. */
  .all-ref-hero__copy {
    display: contents;
  }

  .all-ref-hero__copy > .all-ref-kicker {
    order: 1;
  }

  .all-ref-hero__copy > h1 {
    order: 2;
  }

  .all-ref-hero__copy > p {
    order: 3;
  }

  .all-ref-hero__media {
    order: 4;
  }

  .all-ref-hero__copy > .all-ref-actions {
    order: 5;
    margin-top: 0;
  }

  .all-ref-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }

  .all-ref-actions .ref-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  /* Same reorder for Refer & Earn. Its action row pairs one text button with
     an icon-only WhatsApp circle (not two text buttons like the pages
     above), so it keeps its existing flex layout instead of switching to a
     2-column grid — scoped to .refer-hero__copy so it doesn't touch
     service-detail, which reuses the same .svc-breadcrumb/.svc-actions
     classes. */
  .refer-hero__copy .svc-breadcrumb {
    display: none;
  }

  /* .refer-hero__inner's 40px gap was meant for the desktop 2-column
     gutter — once display:contents promotes .refer-hero__copy's children
     into it directly, that same gap lands between every stacked item
     (h1-h2, h2-p, etc.), stacking on top of their own margins. */
  .refer-hero__inner {
    gap: 0;
  }

  /* This gradient fade exists so hero text stays readable when it overlaps
     the bleeding desktop image — at mobile the photo is now a separate,
     fully-contained card below the text (no overlap), so the fade just
     shows as an odd white haze across the photo. Turning it off wherever
     the same reorder was applied. */
  .about-ref-hero__media::before,
  .partner-ref-hero__media::before,
  .all-ref-hero__media::before,
  .contact-ref-hero__media::before {
    display: none;
  }

  .refer-hero__copy {
    display: contents;
  }

  .refer-hero__copy > h1 {
    order: 1;
  }

  .refer-hero__copy > h2 {
    order: 2;
  }

  .refer-hero__copy > p {
    order: 3;
  }

  .refer-hero__media {
    order: 4;
  }

  .refer-hero__copy > .svc-actions {
    order: 5;
    margin-top: 0;
  }
}

.ref-nav__toggle .fa-bars {
  font-size: 25px !important;
  color: #3476fd;
}

/* Header logo size ranged 36-174px across pages/breakpoints (Home had its
   own bespoke values, other pages used smaller generic ones). Standardizing
   every page's header logo to 60x60 at mobile. Repeated-class selector +
   !important beats every page-specific override above regardless of its
   own specificity. */
@media (max-width: 640px) {
  .ref-header.ref-header .ref-logo img {
    width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
  }

  .ref-footer.ref-footer .ref-logo img {
    width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
  }

  /* The stat number/label here were stuck at clamp(30px,2.4vw,42px) and
     var(--cc-font-body) via a later !important rule elsewhere — beating it
     requires being later in the file too, since both are single-class
     selectors of equal specificity. */
  .about-ref-stats__grid strong {
    font-size: 22px !important;
  }

  .about-ref-stats__grid span {
    font-size: 11px !important;
  }
}

/* Section-level vertical rhythm audit: every page below had its content
   sections still running desktop-sized top/bottom padding at mobile widths
   (34-96px), while Home's equivalent sections were hand-compacted to a
   24px/28px baseline. Bringing every page's sections to that same baseline.
   Repeated-class selector + !important beats each page's own rule above,
   regardless of that rule's specificity, since this block is last in file. */
@media (max-width: 640px) {
  .svc-section.svc-section,
  .svc-cta.svc-cta,
  .about-ref-who.about-ref-who,
  .about-ref-stats.about-ref-stats,
  .about-ref-journey.about-ref-journey,
  .about-ref-choose.about-ref-choose,
  .about-ref-leadership.about-ref-leadership,
  .about-ref-testimonials.about-ref-testimonials,
  .partner-ref-benefits.partner-ref-benefits,
  .partner-ref-opportunities.partner-ref-opportunities,
  .partner-ref-process-section.partner-ref-process-section,
  .partner-ref-story.partner-ref-story,
  .partner-ref-form-section.partner-ref-form-section,
  .contact-ref-consult.contact-ref-consult,
  .contact-ref-office.contact-ref-office,
  .contact-ref-info.contact-ref-info,
  .contact-ref-process-section.contact-ref-process-section,
  .contact-ref-faq.contact-ref-faq,
  .photos-ref-newsletter.photos-ref-newsletter,
  .videos-ref-newsletter.videos-ref-newsletter,
  .photos-ref-features.photos-ref-features,
  .videos-ref-features.videos-ref-features,
  .legal-ref-faq.legal-ref-faq,
  .legal-ref-cta.legal-ref-cta,
  .blog-ref-featured.blog-ref-featured,
  .detail-ref-wrap.detail-ref-wrap,
  .detail-ref-final.detail-ref-final,
  .all-ref-services.all-ref-services {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  /* Hero blocks on these pages are plain centered/split text headers (not
     Home's unique image-bleed hero), so they follow the same 24/28 baseline
     rather than Home's special-cased 0/0. */
  .people-hero.people-hero,
  .refer-hero.refer-hero,
  .svc-hero.svc-hero,
  .booking-ref-hero.booking-ref-hero,
  .booking-ref-widget-section.booking-ref-widget-section {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  /* Contact's "Talk to a specialist" closing banner (.contact-ref-final) was
     running its own larger sizing (58px photo, 18px heading, 26px padding)
     instead of matching Home/About's already-compacted .ref-final-cta
     (48px photo, 12px heading, 12px padding). Matching it exactly so this
     banner looks and sits identically right before the footer on every
     page that has it. */
  .contact-ref-final.contact-ref-final {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .contact-ref-final__inner.contact-ref-final__inner {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .contact-ref-final__inner.contact-ref-final__inner > img {
    width: 48px !important;
    height: 48px !important;
  }

  .contact-ref-final.contact-ref-final h2 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .contact-ref-final.contact-ref-final p {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  .contact-ref-final .ref-whatsapp-icon {
    width: 44px !important;
    height: 44px !important;
  }

  /* .ref-final-cta h2 was being reset to var(--cc-font-section-title) (28px)
     by a later !important rule elsewhere in this file — same specificity,
     so whichever comes last in the file wins regardless of which was
     "meant" to apply. Being last here, with matching specificity, settles
     it for good on every page that uses .ref-final-cta (Home, About). */
  .ref-final-cta.ref-final-cta h2 {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* WhatsApp icon + Book a Slot button: no gap between them, pair centered
     in the row (Home and About share this markup/CSS). */
  .ref-final-cta__inner .ref-actions,
  body.ref-home .ref-final-cta__inner .ref-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .ref-final-cta__inner .ref-actions .ref-btn,
  body.ref-home .ref-final-cta__inner .ref-actions .ref-btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 640px) {
  /* .contact-ref-hero__media img was forced to height:300px !important
     (for the hero photo) elsewhere in this file. Since that's a bare
     descendant selector, it also matches the WhatsApp icon's own <img>
     nested inside .contact-ref-whatsapp-card further down the same media
     block, stretching a 56px round icon into a tall green bar. Pin the
     icon's own square size and circular shape back with higher specificity. */
  .contact-ref-whatsapp-card .ref-whatsapp-icon img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
  }
}

/* Contact's closing CTA actions row must match Home/About's exactly:
   WhatsApp icon + white "Book a Slot" button, no gap, centered as a pair —
   not a full-width solid button with the icon squeezed to one side. An
   earlier rule (scoped up to max-width:720px) forces the button to
   width:100%, so this has to cover the same range to fully replace it. */
@media (max-width: 720px) {
  .contact-ref-final__actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .contact-ref-final__actions .ref-btn {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* Two earlier rules (at max-width:960px and max-width:720px) collapse
   .contact-ref-final__inner to a single column, stacking the photo above
   the heading/text instead of keeping them side by side like Home/About's
   .ref-final-cta__inner does. Put the photo back in its own narrow column
   next to the text, and let the actions row still span the full width
   below both. */
@media (max-width: 960px) {
  .contact-ref-final__inner.contact-ref-final__inner {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .contact-ref-final__inner.contact-ref-final__inner > img {
    width: 48px !important;
    height: 48px !important;
  }

  .contact-ref-final__actions {
    grid-column: 1 / -1 !important;
  }
}

/* Contact's closing banner was carrying its own smaller desktop text
   (18px/12px, hardcoded) instead of matching Home/About's .ref-final-cta
   (which uses the shared section-title scale for h2, ~29px, and inherits
   14px body text for p). Only the mobile sizes were brought in line
   earlier — bring the desktop ones in line too. */
.contact-ref-final.contact-ref-final h2 {
  font-size: var(--cc-font-section-title) !important;
}

.contact-ref-final.contact-ref-final p {
  font-size: 14px !important;
}

@media (max-width: 640px) {
  .contact-ref-final.contact-ref-final h2 {
    font-size: 12px !important;
  }

  .contact-ref-final.contact-ref-final p {
    font-size: 9px !important;
  }
}

/* Footer copyright line: its own full-width bar below the main footer,
   instead of sitting inline in the first column, and sized to match the
   nav menu's link size (14px) instead of the smaller body-text size. */
.ref-footer-bottom {
  padding: 14px 0;
  background: var(--ref-navy-dark);
}

.ref-footer-bottom p {
  margin: 0;
  color: var(--ref-white);
  font-size: 14px !important;
  text-align: center;
}

.ref-footer.ref-footer.ref-footer.ref-footer.ref-footer p,
.ref-footer.ref-footer.ref-footer.ref-footer.ref-footer a {
  font-size: 14px !important;
}