/* The homepage uses the reference service cards, with linked photos and detail navigation. */
.service-card.v2 .svc-media { display: block; flex-shrink: 0; }
.svc-detail-link {
  align-self: flex-start; display: inline-flex; gap: 7px; align-items: center;
  margin: 0 0 12px; color: #26261e; font-size: 13px; font-weight: 720;
}
.svc-detail-link svg { width: 16px; height: 16px; color: #926500; }
.svc-detail-link:hover, .svc-body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-card.v2 .service-actions { align-items: stretch; }
.service-card.v2 .mini-link { min-height: 40px; }
.service-card.v2 .mini-link.wa { color: #086636; }
.detail-page { background: #fff; }
.detail-page a:focus-visible, .detail-page button:focus-visible, .services-grid a:focus-visible {
  outline: 3px solid #c78500; outline-offset: 3px;
}
.detail-intro {
  color: #fff; background: radial-gradient(75% 115% at 85% -15%, #403416 0%, transparent 75%), var(--grad-dark);
  position: relative; padding: 26px 0 64px; overflow: hidden;
}
.detail-intro::after {
  content: ""; position: absolute; inset: auto 0 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffc400 30%, #ffb400 65%, transparent);
}
.detail-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px;
  color: #d2d2cc; font-size: 13px; line-height: 1.5; margin-bottom: 31px;
}
.detail-crumb a:hover { color: #ffc400; }
.detail-crumb [aria-current] { color: #f1c95e; }
.detail-crumb span[aria-hidden] { color: #a9a8a2; }
.detail-layout { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.detail-copy { min-width: 0; }
.detail-copy .eyebrow { margin-bottom: 17px; font-size: 11px; }
.detail-copy .eyebrow svg { width: 16px; height: 16px; }
.detail-copy h1 { font-size: clamp(40px, 4.65vw, 68px); letter-spacing: -.045em; color: #fff; line-height: 1.07; overflow-wrap: break-word; }
.detail-copy p { color: #d8d7d2; font-size: 18px; line-height: 1.65; margin: 21px 0 26px; max-width: 48ch; }
.detail-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-ctas a { font-size: 15px; padding: 0 21px; }
.detail-ctas .btn-wa { color: #092819; background: linear-gradient(120deg, #5be38a, #25ce6a); }
.detail-photo {
  background: #20201f; margin: 0; position: relative; overflow: hidden;
  border-radius: var(--r-hero); border: 1px solid #ffffff40; box-shadow: 0 20px 50px -23px #000;
}
.detail-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.detail-photo figcaption {
  display: inline-flex; align-items: center; gap: 7px; position: absolute; bottom: 17px; left: 17px;
  border-radius: 999px; padding: 7px 13px; max-width: calc(100% - 34px);
  background: #ffc400; color: #18170b; font-size: 12px; font-weight: 750;
}
.detail-photo figcaption svg { width: 16px; height: 16px; }
.detail-info { background: var(--c-bg-soft); padding: 65px 0 73px; }
.detail-info-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: clamp(34px, 6vw, 85px); align-items: start; }
.detail-kicker { font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: #735500; font-size: 12px; }
.detail-guidance h2 { font-size: clamp(27px, 3.1vw, 43px); line-height: 1.13; max-width: 25ch; margin: 12px 0 15px; }
.detail-guidance p { color: #4c5360; max-width: 61ch; }
.detail-related { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 24px; border-top: 1px solid #d9dce1; padding-top: 15px; }
.detail-related a, .detail-itinerary > a { font-size: 14px; font-weight: 690; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.detail-related a { color: #363e49; padding: 6px 0; }
.detail-related svg, .detail-itinerary > a svg { width: 17px; height: 17px; flex: 0 0 auto; }
.detail-related a:hover, .detail-itinerary > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail-itinerary { border: 1px solid #e2e4e8; border-radius: var(--r-card); background: #fff; padding: 23px 26px; box-shadow: var(--sh-md); }
.detail-itinerary h2 { font-size: 20px; }
.detail-itinerary ol { margin: 18px 0 16px; list-style: none; }
.detail-itinerary li { position: relative; padding-left: 24px; line-height: 1.4; }
.detail-itinerary li:first-child { padding-bottom: 16px; }
.detail-itinerary li::before { content: ""; position: absolute; top: 6px; left: 0; width: 10px; height: 10px; border: 2px solid #ba8808; border-radius: 100%; background: #fff; }
.detail-itinerary li:last-child::before { background: #ffc400; border-color: #be8c0c; }
.detail-itinerary li:first-child::after { content: ""; position: absolute; top: 18px; left: 4px; height: calc(100% - 14px); border-left: 1px dashed #b0ad9e; }
.detail-itinerary small, .detail-itinerary strong { display: block; }
.detail-itinerary small { color: #656a73; font-size: 12px; }
.detail-itinerary strong { margin-top: 2px; font-size: 15px; }
.detail-itinerary > a { border-top: 1px solid #e5e7ea; padding: 13px 0 0; width: 100%; color: #0d6834; }
.detail-itinerary > a svg:last-child { margin-left: auto; }
@media (max-width: 992px) {
  .detail-page .nav-bar { position: relative; background: #121214; border-bottom: 1px solid #ffbf003d; }
  .detail-intro { padding: 20px 0 47px; }
  .detail-layout { gap: 28px; }
  .detail-copy p { font-size: 16px; }
}
@media (max-width: 740px) {
  .detail-crumb { font-size: 12px; gap: 4px 7px; margin: 0 0 20px; }
  .detail-layout, .detail-info-grid { grid-template-columns: minmax(0,1fr); }
  .detail-copy h1 { font-size: clamp(33px, 7.4vw, 49px); max-width: 20ch; }
  .detail-copy p { margin: 14px 0 20px; }
  .detail-copy .eyebrow { margin-bottom: 11px; }
  .detail-intro { padding: 17px 0 30px; }
  .detail-ctas a { padding: 0 13px; height: 48px; gap: 6px; font-size: 14px; }
  .detail-photo { border-radius: 20px; }
  .detail-photo img { max-height: 380px; }
  .detail-info { padding: 33px 0 42px; }
  .detail-itinerary { padding: 20px; }
}
@media (max-width: 360px) {
  .detail-ctas a { padding: 0 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-page *, .detail-page *::before, .detail-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}