/* ── Trust Strip ── */
.service-trust-strip {
  background: var(--navy);
  padding: 22px 0;
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 0;
}
.service-trust-strip .container {
  position: relative;
}
.service-trust-strip .trust-strip-inner {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0 8px;
}
.service-trust-strip .trust-strip-inner::-webkit-scrollbar { display: none; }
.service-trust-strip .trust-item {
  min-width: 220px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
}
.service-trust-strip .trust-icon {
  width: 44px;
  height: 44px;
  background: rgba(200,16,46,0.15);
  border: 1px solid rgba(200,16,46,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
  font-size: 1.1rem;
}
.service-trust-strip .trust-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.service-trust-strip .trust-text span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}
.service-trust-strip .trust-arrow { display: none; }

@media (max-width: 768px) {
  .service-trust-strip .trust-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(10,31,68,0.92);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    z-index: 20;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  .service-trust-strip .trust-prev { left: -4px; }
  .service-trust-strip .trust-next { right: -4px; }
}

@media (min-width: 769px) {
  .service-trust-strip .trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    overflow: visible;
    padding: 0;
  }
  .service-trust-strip .trust-item {
    min-width: 0;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    background: transparent;
    padding: 10px 28px;
  }
  .service-trust-strip .trust-item:last-child { border-right: none; }
}

/* ── Global section rhythm ── */
.service-intro,
.service-detail,
.eeat-section,
.process-section,
.documents-section,
.comparison-section,
#service-faq.faq,
#service-contact.cta-banner {
  padding: 56px 0;
}
@media (min-width: 769px) {
  .service-intro,
  .service-detail,
  .eeat-section,
  .process-section,
  .documents-section,
  .comparison-section,
  #service-faq.faq,
  #service-contact.cta-banner {
    padding: 90px 0;
  }
}

.service-intro { background: var(--white); }
.service-detail { background: var(--white); }
.eeat-section { background: var(--off-white); }
.process-section { background: var(--white); }
.documents-section { background: var(--off-white); }
.comparison-section { background: var(--white); }

/* ── Section Head ── */
.services-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.services-head .section-subtitle { margin: 0 auto; }
@media (min-width: 769px) {
  .services-head { margin-bottom: 52px; }
}

/* ── Intro Section ── */
.refined-service-intro-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 900px) {
  .refined-service-intro-inner {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,0.92fr);
    gap: 52px;
    align-items: center;
  }
}
.refined-intro-copy p,
.service-two-col p {
  color: var(--text-body);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 18px;
}
.refined-intro-lead {
  font-size: 1.08rem;
  color: var(--text-dark);
}
.refined-intro-btn { margin-top: 10px; }

.refined-intro-panel {
  background: var(--navy);
  color: var(--white);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.refined-intro-panel::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  right: 0;
  top: 0;
  background: rgba(184,150,46,0.18);
  border-radius: 0 0 0 100%;
}
.refined-panel-heading,
.refined-authority-list,
.refined-intro-note {
  position: relative;
  z-index: 1;
}
.refined-panel-heading span {
  display: block;
  color: var(--gold-light);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  margin-bottom: 8px;
}
.refined-panel-heading strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 22px;
}
.refined-authority-list {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.refined-authority-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
}
.refined-authority-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold-light);
  font-weight: 900;
}
.refined-intro-note {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 18px;
  color: rgba(255,255,255,0.78);
  line-height: 1.7;
}
@media (min-width: 769px) {
  .refined-intro-panel {
    border-radius: var(--radius-lg);
    padding: 34px;
  }
  .refined-panel-heading strong { font-size: 1.6rem; }
}

/* ── Service Cards Grid ── */
.service-card-grid,
.enhanced-service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 540px) {
  .service-card-grid,
  .enhanced-service-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (min-width: 1100px) {
  .service-card-grid,
  .enhanced-service-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 22px;
  }
}

.deep-card {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.deep-card .service-thumb {
  position: relative;
  height: 180px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: 0;
  overflow: hidden;
}
@media (min-width: 769px) {
  .deep-card .service-thumb { height: 200px; }
}
.deep-card .service-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.deep-card:hover .service-thumb img { transform: scale(1.06); }
.deep-card .service-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,14,30,0.08) 0%, rgba(10,31,68,0.55) 55%, rgba(6,14,30,0.88) 100%);
  z-index: 1;
}
.deep-card .service-thumb h3 {
  position: absolute;
  bottom: 16px;
  left: 18px;
  right: 18px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold-light);
  margin-bottom: 0;
  z-index: 2;
}
.deep-card:hover .service-thumb h3 { color: var(--white); }
.deep-card .card-inner {
  padding: 18px 22px 22px;
}
.deep-card p {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 0;
}
.deep-card .read-more-link { padding-top: 14px; }

.deep-card,
.process-card,
.faq-item,
.doc-columns > div {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #f0f4fb 60%, #e8eef8 100%);
  border: 1px solid rgba(10,31,68,.08);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: 0 12px 30px rgba(10,31,68,.06);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.deep-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--red));
  transition: left .45s ease;
}
.deep-card:hover::before { left: 0; }

.deep-card:hover,
.process-card:hover,
.faq-item:hover,
.doc-columns > div:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(184,150,46,0.55);
}

.service-card-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: inherit;
}

.service-thumb {
  width: 100%;
  height: 140px;
  border-radius: 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(10,31,68,0.08), rgba(200,16,46,0.05)), var(--off-white);
  border: 1px solid rgba(10,31,68,0.08);
  overflow: hidden;
}
.service-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.service-card-link:hover .service-thumb img { transform: scale(1.08); }

.deep-card h3,
.process-card h3,
.doc-columns h3,
.faq-item h3 {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 12px;
}
.deep-card p,
.process-card p,
.doc-columns li,
.faq-item p {
  color: var(--text-body);
  line-height: 1.75;
}

.read-more-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-weight: 800;
  font-size: 0.92rem;
}

/* ── Why Best Section ── */
.why-best-premium { background: var(--off-white); }
.why-best-panel {
  position: relative;
  overflow: hidden;
  min-height: 690px;
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(10,31,68,0.12);
}
@media (min-width: 769px) {
  .why-best-panel { border-radius: 34px; }
}

.why-best-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.why-best-bg img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right center;
}
.why-best-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.why-best-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: 32px 20px 290px;
}
@media (min-width: 540px) {
  .why-best-content { padding: 36px 28px 310px; }
}
@media (min-width: 769px) {
  .why-best-content { padding: 48px 36px 150px; }
  .why-best-panel { min-height: 690px; }
}
@media (min-width: 1100px) {
  .why-best-content { padding: 58px 48px 130px; }
}
.why-best-content .section-title {
  max-width: 720px;
  margin-bottom: 22px;
}
.why-best-content > p {
  max-width: 620px;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--text-body);
}

.why-best-rank {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
  margin-top: 36px;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 540px) {
  .why-best-rank {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 42px 16px;
  }
}
@media (min-width: 1100px) {
  .why-best-rank {
    grid-template-columns: repeat(4, minmax(0,1fr));
    width: 850px;
    max-width: calc(100vw - 120px);
    gap: 14px;
    margin-top: 42px;
  }
}

.why-best-rank div {
  position: relative;
  min-height: auto;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(10,31,68,0.06);
  border-radius: 20px;
  padding: 62px 16px 20px;
  box-shadow: 0 16px 38px rgba(10,31,68,0.08);
  backdrop-filter: blur(12px);
  text-align: center;
}
@media (min-width: 769px) {
  .why-best-rank div { min-height: 220px; }
}
@media (min-width: 1100px) {
  .why-best-rank div { min-height: 250px; }
}

.why-best-icon {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  border: 2px solid var(--gold);
  box-shadow: 0 12px 28px rgba(10,31,68,0.18);
  font-size: 1.65rem;
}
.why-best-rank strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 1.12rem;
  line-height: 1.25;
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.why-best-rank strong::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  margin: 12px auto 0;
}
.why-best-rank p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.88rem;
  line-height: 1.6;
}

.why-best-trust-strip {
  position: absolute;
  z-index: 4;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  box-shadow: 0 18px 40px rgba(10,31,68,0.22);
}
.why-best-trust-strip div {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  font-size: 0.88rem;
  border-right: 1px solid rgba(212,175,55,0.45);
}
.why-best-trust-strip div:last-child { border-right: none; }
.why-best-trust-strip i { color: var(--gold); font-size: 1.55rem; }

@media (min-width: 480px) {
  .why-best-trust-strip { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 769px) {
  .why-best-trust-strip {
    left: 18px; right: 18px; bottom: 18px;
    grid-template-columns: repeat(4,1fr);
  }
  .why-best-trust-strip div { min-height: 82px; font-size: 1rem; gap: 14px; }
}

@media (max-width: 768px) {
  .why-best-trust-strip {
    left: 12px;
    right: 12px;
    bottom: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 16px;
  }

  .why-best-trust-strip div {
    min-width: 0;
    min-height: 68px;
    padding: 10px 8px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    text-align: center;
    line-height: 1.25;
    border-right: 1px solid rgba(212,175,55,0.28);
    border-bottom: 1px solid rgba(212,175,55,0.28);
  }

  .why-best-trust-strip div:nth-child(2n) {
    border-right: none;
  }

  .why-best-trust-strip div:nth-child(3),
  .why-best-trust-strip div:nth-child(4) {
    border-bottom: none;
  }

  .why-best-trust-strip i {
    font-size: 1.28rem;
  }

  .why-best-trust-strip span {
    display: block;
    max-width: 100%;
  }
}

.why-best-fade {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.96) 50%,
      rgba(255,255,255,0.78) 70%,
      rgba(255,255,255,0.32) 100%);
}
@media (min-width: 769px) {
  .why-best-fade {
    background:
      linear-gradient(90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.98) 34%,
        rgba(255,255,255,0.90) 48%,
        rgba(255,255,255,0.56) 62%,
        rgba(255,255,255,0.12) 76%,
        rgba(255,255,255,0) 100%),
      linear-gradient(180deg,
        rgba(255,255,255,0.92) 0%,
        rgba(255,255,255,0.20) 45%,
        rgba(255,255,255,0.90) 100%);
    backdrop-filter: blur(0.5px);
  }
}

/* ── Process Grid ── */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 540px) {
  .process-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px) {
  .process-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
}
.process-card {
  padding: 24px;
  border-radius: 22px;
}
@media (min-width: 769px) {
  .process-card { padding: 28px; border-radius: var(--radius-lg); }
}
.process-card span {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--navy);
  color: var(--gold-light);
  border-radius: 50%;
  font-weight: 900;
  margin-bottom: 18px;
}

/* ── Documents Section ── */
.documents-section {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: var(--white);
}
.documents-section .section-label { color: var(--gold-light); }
.documents-section .section-title { color: var(--white); }
.documents-section .section-subtitle { color: rgba(255,255,255,0.78); }

.doc-columns,
.themed-doc-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 540px) {
  .doc-columns,
  .themed-doc-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px) {
  .doc-columns,
  .themed-doc-columns { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
}

.doc-columns > div,
.themed-doc-columns > div {
  padding: 24px;
  border-radius: 20px;
}
@media (min-width: 769px) {
  .doc-columns > div,
  .themed-doc-columns > div { padding: 28px; border-radius: var(--radius-lg); }
}

.documents-section .doc-columns > div,
.documents-section .themed-doc-columns > div {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: none;
}
.documents-section .doc-columns h3,
.documents-section .themed-doc-columns h3 { color: var(--white); }
.documents-section .doc-columns li,
.documents-section .themed-doc-columns li { color: rgba(255,255,255,0.82); }

.doc-columns ul { display: grid; gap: 9px; }
.doc-columns li { position: relative; padding-left: 22px; }
.doc-columns li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
}

.documents-mini-cta {
  margin-top: 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.documents-mini-cta span { color: rgba(255,255,255,0.82); font-size: 1rem; }
.documents-mini-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: 60px;
  text-decoration: none;
  transition: background var(--trans);
}
.documents-mini-cta a:hover { background: var(--red-hover); }
@media (min-width: 769px) {
  .documents-mini-cta {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 34px;
  }
}

/* ── Comparison Table ── */
.comparison-table {
  border: 1px solid var(--grey-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--white);
}
.comparison-row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--grey-light);
}
.comparison-row:last-child { border-bottom: none; }
.comparison-row > div { padding: 14px 16px; font-size: 0.94rem; line-height: 1.55; }
.comparison-row.head { display: none; }
.comparison-row > div:first-child {
  font-weight: 800;
  color: var(--navy);
  background: var(--off-white);
  border-bottom: 2px solid var(--gold);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comparison-row > div:nth-child(2)::before {
  content: 'Basic Provider: ';
  font-weight: 800;
  color: var(--grey);
}
.comparison-row > div:nth-child(3)::before {
  content: '✓ Shakespeare LT: ';
  font-weight: 900;
  color: var(--red);
}

@media (min-width: 769px) {
  .comparison-table { border-radius: var(--radius-lg); }
  .comparison-row {
    display: grid;
    grid-template-columns: 0.7fr 1fr 1.2fr;
    border-bottom: 1px solid var(--grey-light);
  }
  .comparison-row.head { display: grid; }
  .comparison-row.head > div {
    background: var(--navy);
    color: var(--white);
    font-weight: 900;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
  }
  .comparison-row > div { padding: 18px 20px; font-size: 1rem; }
  .comparison-row > div:first-child {
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: none;
  }
  .comparison-row > div:nth-child(2)::before { content: ''; }
  .comparison-row > div:nth-child(3)::before { content: ''; }
  .comparison-row:not(.head) > div:nth-child(3) { color: var(--navy); font-weight: 700; }
}

/* ── FAQ Grid ── */
.faq-grid.service-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 769px) {
  .faq-grid.service-faq-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
    margin-top: 36px;
  }
}
.faq-item {
  padding: 22px 20px;
  border-radius: 20px;
}
@media (min-width: 769px) {
  .faq-item { padding: 28px; border-radius: var(--radius-lg); }
}
.faq-item h3 { font-size: 1.05rem; margin-bottom: 10px; }
@media (min-width: 769px) { .faq-item h3 { font-size: 1.15rem; } }

/* ── CTA Banner ── */
.service-final-cta .cta-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 769px) {
  .service-final-cta .cta-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
}
.service-final-cta .cta-banner-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}
.service-final-cta .cta-banner-actions a { justify-content: center; }
@media (min-width: 769px) {
  .service-final-cta .cta-banner-actions {
    display: flex;
    flex-direction: row;
    width: auto;
    min-width: 280px;
    flex-shrink: 0;
  }
}
@media (max-width: 400px) {
  .service-final-cta .cta-banner-actions { grid-template-columns: 1fr; }
}

/* ── Service Hero Lock ── */
#service-home.hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
}
#service-home .hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(6,14,30,0.97) 0%,
    rgba(10,31,68,0.92) 35%,
    rgba(10,31,68,0.55) 60%,
    rgba(10,31,68,0.10) 100%
  );
}
#service-home .hero-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#service-home .hero-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: 1;
  filter: none;
  transform: none;
  max-width: none;
}
#service-home.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gold), transparent);
  z-index: 2;
}
#service-home .hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 80px 24px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
#service-home .hero-content { max-width: 580px; }
#service-home h1 {
  max-width: 610px;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: normal;
  color: var(--white);
  margin-bottom: 24px;
}
#service-home h1 .accent { color: var(--red); font-style: italic; }
#service-home .hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 480px;
}
#service-home .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
#service-home .hero-actions .btn-primary { background: var(--red); }
#service-home .hero-actions .btn-primary:hover { background: var(--red-hover); }
#service-home .hero-actions .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); }
#service-home .hero-actions .btn-outline:hover { background: rgba(255,255,255,0.1); color: var(--white); border-color: var(--white); }

@media (max-width: 768px) {
  #service-home.hero { min-height: auto; padding: 72px 0 52px; align-items: flex-end; border-radius: 0; }
  #service-home .hero-bg { background: linear-gradient(180deg, rgba(6,14,30,0.30) 0%, rgba(10,31,68,0.82) 48%, rgba(10,31,68,0.94) 100%); }
  #service-home .hero-image-placeholder img { object-position: 62% center; opacity: 0.32; max-width: none; }
  #service-home .hero-inner { min-height: auto; display: block; }
  #service-home .hero-content { max-width: 100%; }
  #service-home h1 { font-size: clamp(2.1rem, 10vw, 3.05rem); line-height: 1.1; margin-bottom: 18px; letter-spacing: normal; max-width: 100%; }
  #service-home .hero-desc { font-size: 1rem; line-height: 1.72; margin-bottom: 24px; max-width: 100%; }
  #service-home .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #service-home .hero-actions .btn-primary,
  #service-home .hero-actions .btn-outline { justify-content: center; width: 100%; padding: 14px 12px; font-size: 0.78rem; }
}
@media (max-width: 480px) {
  #service-home.hero { padding-top: 58px; }
  #service-home .hero-actions { grid-template-columns: 1fr; }
}

/* ── Misc ── */
.service-faq-grid { margin-top: 36px; }
.service-final-cta { margin-top: 0; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* =========================================================
   PREMIUM MOBILE SCROLL ANIMATIONS
   Only triggers on screens ≤ 768px.
   Respects prefers-reduced-motion.
   No changes to header, nav, hero, footer.
   ========================================================= */

/* Base hidden state — only on mobile */
@media (max-width: 768px) {
  /* Sections: slide up + fade */
  .service-intro,
  .service-detail,
  .eeat-section,
  .process-section,
  .documents-section,
  .comparison-section,
  #service-faq.faq,
  #service-contact.cta-banner {
    --anim-ready: 0;
  }

  /* Individual animatable elements */
  .sp-anim {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sp-anim.sp-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays for children */
  .sp-anim[data-delay="1"] { transition-delay: 0.05s; }
  .sp-anim[data-delay="2"] { transition-delay: 0.12s; }
  .sp-anim[data-delay="3"] { transition-delay: 0.19s; }
  .sp-anim[data-delay="4"] { transition-delay: 0.26s; }
  .sp-anim[data-delay="5"] { transition-delay: 0.33s; }
  .sp-anim[data-delay="6"] { transition-delay: 0.40s; }
  .sp-anim[data-delay="7"] { transition-delay: 0.47s; }
  .sp-anim[data-delay="8"] { transition-delay: 0.54s; }
  .sp-anim[data-delay="9"] { transition-delay: 0.61s; }
  .sp-anim[data-delay="10"] { transition-delay: 0.68s; }
  .sp-anim[data-delay="11"] { transition-delay: 0.75s; }
  .sp-anim[data-delay="12"] { transition-delay: 0.82s; }

  /* Section heading — slight scale in */
  .sp-anim-head {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition:
      opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sp-anim-head.sp-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Left slide for text panels */
  .sp-anim-left {
    opacity: 0;
    transform: translateX(-22px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sp-anim-left.sp-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Right slide for panels */
  .sp-anim-right {
    opacity: 0;
    transform: translateX(22px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .sp-anim-right.sp-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Gold line accent — width reveal */
  .gold-line-reveal {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .sp-visible .gold-line-reveal,
  .gold-line-reveal.sp-visible {
    transform: scaleX(1);
  }

  /* Comparison row — fast fade stagger */
  .sp-anim-row {
    opacity: 0;
    transform: translateX(-14px);
    transition:
      opacity 0.45s ease,
      transform 0.45s ease;
  }
  .sp-anim-row.sp-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Floating badge — gentle pulse on entry */
  @keyframes sp-badge-in {
    0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
    70%  { opacity: 1; transform: scale(1.04) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .sp-anim-badge {
    opacity: 0;
  }
  .sp-anim-badge.sp-visible {
    animation: sp-badge-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
}

/* Honour reduced motion — disable all animations */
@media (prefers-reduced-motion: reduce) {
  .sp-anim,
  .sp-anim-head,
  .sp-anim-left,
  .sp-anim-right,
  .sp-anim-row,
  .sp-anim-badge,
  .gold-line-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   SERVICE PAGE — SMALL-SCREEN NON-SCROLL MICRO-INTERACTIONS
   Scope: mobile only. Navigation styles untouched.
   ========================================================= */
@media (max-width: 768px) {
  #service-home h1,
  .service-intro .section-title,
  .services-head .section-title,
  .why-best-panel .section-title,
  #service-contact h2 {
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  .refined-intro-copy p,
  .refined-intro-panel,
  .deep-card,
  .why-best-panel,
  .process-card,
  .themed-doc-columns > div,
  .doc-columns > div,
  .documents-mini-cta,
  .comparison-row,
  #service-faq .faq-item,
  #service-contact .cta-banner-inner {
    position: relative;
    isolation: isolate;
  }

  .refined-intro-panel,
  .deep-card,
  .why-best-panel,
  .process-card,
  .themed-doc-columns > div,
  .doc-columns > div,
  .documents-mini-cta,
  .comparison-row,
  #service-faq .faq-item,
  #service-contact .cta-banner-inner {
    overflow: hidden;
  }

  .refined-intro-panel::after,
  .deep-card::after,
  .why-best-panel::after,
  .process-card::after,
  .themed-doc-columns > div::after,
  .doc-columns > div::after,
  .documents-mini-cta::after,
  #service-faq .faq-item::after,
  #service-contact .cta-banner-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(circle at 100% 0, rgba(184,150,46,.13), transparent 34%),
      linear-gradient(135deg, rgba(200,16,46,.08), transparent 42%);
    pointer-events: none;
  }

  .refined-intro-panel > *,
  .deep-card > *,
  .why-best-panel > *,
  .process-card > *,
  .themed-doc-columns > div > *,
  .doc-columns > div > *,
  .documents-mini-cta > *,
  #service-faq .faq-item > *,
  #service-contact .cta-banner-inner > * {
    position: relative;
    z-index: 1;
  }

  .refined-intro-panel:active,
  .deep-card:active,
  .why-best-rank div:active,
  .process-card:active,
  .themed-doc-columns > div:active,
  .doc-columns > div:active,
  .documents-mini-cta:active,
  .comparison-row:not(.head):active,
  #service-faq .faq-item:active,
  .service-card-link:active {
    transform: translateY(-2px) scale(.992);
  }

  .refined-authority-list li,
  .rank-list li,
  .why-best-rank div {
    border-radius: 16px;
  }

  .refined-authority-list li:active,
  .rank-list li:active {
    background: rgba(255,255,255,.07);
  }

  .process-card::before {
    box-shadow: 0 0 0 8px rgba(184,150,46,.10);
  }

  .comparison-table {
    -webkit-overflow-scrolling: touch;
  }

  .comparison-row:not(.head)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 99px;
    background: var(--gold);
    opacity: .72;
  }

  .sp-anim,
  .sp-anim-head,
  .sp-anim-left,
  .sp-anim-right,
  .sp-anim-row,
  .sp-anim-badge,
  .animate-on-scroll,
  .animate-fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
    animation: none !important;
  }
}

@media (max-width: 420px) {
  .refined-intro-panel,
  .deep-card,
  .why-best-panel,
  .process-card,
  .documents-mini-cta,
  #service-faq .faq-item {
    border-radius: 22px;
  }
}


/* =========================================================
   SERVICE FAQ — CONTACT-PAGE LOOK ON SMALL SCREENS
   Scope: small screens only. Mobile navigation styles untouched.
   ========================================================= */
@media (max-width: 768px) {
  #service-faq.faq {
    background: var(--off-white);
  }

  #service-faq .faq-grid.service-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
  }

  #service-faq .faq-item {
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--white) !important;
    border: 1px solid rgba(10,31,68,0.08) !important;
    box-shadow: none !important;
    overflow: hidden;
    transform: none !important;
  }

  #service-faq .faq-item::before,
  #service-faq .faq-item::after {
    display: none !important;
  }

  #service-faq .faq-item h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 !important;
    padding: 20px 24px;
    font-size: 0.98rem !important;
    line-height: 1.35;
    background: var(--white);
  }

  #service-faq .faq-item h3::after {
    content: '+';
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    background: rgba(184,150,46,0.10);
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1;
  }

  #service-faq .faq-item p {
    margin: 0;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--grey-light);
    font-size: 0.92rem;
    line-height: 1.75;
  }
}

/* =========================================================
   REQUESTED REFINEMENT — SERVICE FAQ ICON-ONLY TOGGLE
   Scope: all screens, service FAQ only.
   ========================================================= */
#service-faq .faq-item.faq-toggle-ready h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#service-faq .faq-toggle-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  background: rgba(184,150,46,0.10);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(10,31,68,0.06);
  transition: background var(--trans), color var(--trans), transform var(--trans);
}

#service-faq .faq-toggle-icon::before {
  content: '−';
}

#service-faq .faq-item.is-collapsed .faq-toggle-icon::before {
  content: '+';
}

#service-faq .faq-toggle-icon:hover,
#service-faq .faq-toggle-icon:focus-visible {
  background: var(--gold);
  color: var(--white);
  outline: none;
  transform: scale(1.04);
}

#service-faq .faq-item.is-collapsed p {
  display: none;
}

#service-faq .faq-item h3::after {
  content: none !important;
  display: none !important;
}