/* ==========================================================================
   PDC Visa International — homepage stylesheet
   Loaded after styles.css and site.css. styles.css keeps the shared header,
   footer, form and button primitives, site.css quiets them for the redesign,
   and this file lays out the homepage sections only.
   ========================================================================== */

:root {
  --hp-h1: clamp(2.5rem, 1.55rem + 3.4vw, 4rem);
  --hp-h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.625rem);
  --hp-section: clamp(3.25rem, 2rem + 4vw, 5.5rem);
}

/* ------------------------------------------------------------ Section shells */
.hp-section { padding-block: var(--hp-section); }
.hp-section--tint { background: var(--hp-surface); }
.hp-section--line { border-top: 1px solid var(--hp-line); }

.hp-head { max-width: 760px; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.hp-head--center { margin-inline: auto; text-align: center; }
.hp-head--split {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  max-width: none;
}
.hp-head--split > div { max-width: 680px; }
.hp-head--split .link-cta { flex: none; white-space: nowrap; }
.hp-title { font-size: var(--hp-h2); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.hp-lead { margin-top: 14px; font-size: 1.125rem; line-height: 1.65; color: var(--muted); }
.hp-note { margin-top: 24px; font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* Check list shared by service cards and packages */
.hp-check { display: grid; gap: 10px; }
.hp-check li { position: relative; padding-left: 30px; line-height: 1.55; color: var(--ink); }
.hp-check li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-100) var(--hp-check) center / 12px no-repeat;
}

/* ------------------------------------------------------------------- Hero */
/* Copy sits on the left over a background video; a pale veil fades the footage out
   under the text so it stays readable, and the subject of the clip shows on the right. */
.hp-hero { background: var(--hp-surface); }
.hp-hero__stage { position: relative; isolation: isolate; overflow: hidden; background: #E6EDF2; }
.hp-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hp-hero__bg img, .hp-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center;
}
/* On wide screens the footage is anchored left and drawn 25% wider than the stage, which
   pushes the centred subject of the clip to the right, clear of the headline. */
@media (min-width: 768px) {
  .hp-hero__bg img, .hp-hero__video { width: 140%; object-position: center 30%; }
}
@media (min-width: 1024px) {
  .hp-hero__bg img, .hp-hero__video { width: 125%; }
}
.hp-hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.hp-hero__video.is-ready { opacity: 1; }
.hp-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(248, 247, 252, .82) 0%, rgba(248, 247, 252, .72) 34%,
    rgba(248, 247, 252, .42) 50%, rgba(248, 247, 252, .1) 64%, rgba(248, 247, 252, 0) 76%);
}
.hp-hero__inner {
  display: flex; align-items: center;
  min-height: clamp(520px, 68vh, 660px);
  padding-block: calc(var(--header-h) + clamp(2rem, 1.25rem + 2.5vw, 3.5rem)) clamp(3rem, 1.75rem + 4vw, 5rem);
}
/* The header floats over the hero footage and only gets its white background once the page scrolls. */
.site-header--overlay:not(.is-stuck) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.hp-hero__copy { max-width: 600px; }
/* The play/pause control stays in the DOM for script.js but is hidden by request; the video
   still pauses automatically for prefers-reduced-motion and when the hero scrolls off-screen. */
.hp-hero .hero__video-toggle { display: none !important; }
.hp-hero__title { font-size: var(--hp-h1); line-height: 1.06; letter-spacing: -.015em; }
.hp-hero__lead { margin-top: 20px; max-width: 36ch; font-size: 1.1875rem; line-height: 1.65; color: var(--hp-text-soft); }
.hp-hero__lead-mobile { display: none; }
.hp-hero__tagline { margin-top: 14px; font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-style: italic; line-height: 1.3; color: var(--magenta-600); }
.hp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hp-hero__contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  margin-top: 14px; font-size: .9375rem; color: var(--muted);
}
.hp-hero__contact a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-weight: 600; color: var(--brand-900);
}
.hp-hero__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hp-hero__contact .ico { width: 18px; height: 18px; }

/* Trust row under the hero */
.hp-trust { border-top: 1px solid var(--hp-line); }
.hp-trust__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px; padding-block: 22px; }
.hp-trust__list li { display: flex; gap: 14px; align-items: flex-start; }
.hp-trust__list .ico { width: 26px; height: 26px; margin-top: 2px; color: var(--brand-800); }
.hp-trust__list strong { display: block; font-size: 1rem; font-weight: 600; color: var(--brand-950); }
.hp-trust__list span { font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* --------------------------------------------------------------- Services */
.hp-services { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.5vw, 32px); }
.hp-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.hp-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--hp-surface); }
.hp-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: clamp(20px, 2.2vw, 30px); }
.hp-kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-800); }
.hp-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.hp-card__body > p:not(.hp-kicker) { font-size: 1.0625rem; line-height: 1.65; color: var(--muted); }
.hp-card .hp-check { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--hp-line); }
.hp-card .link-cta { margin-top: auto; padding-top: 12px; }
/* Three services in a row; the middle card carries a statement panel instead of a photo. */
.hp-services--three { grid-template-columns: repeat(3, 1fr); }
.hp-card__media--statement { display: grid; place-items: center; background: var(--brand-950); }
.hp-card__media--statement span { font-family: var(--font-head); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-style: italic; color: #fff; }

.hp-services__more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem); padding: 12px 22px;
  border: 1px solid var(--hp-line); border-radius: 14px;
}
.hp-services__more strong { font-size: .9375rem; font-weight: 600; color: var(--brand-950); }
.hp-services__more ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.hp-services__more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9375rem; color: var(--brand-900);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #CBC6E6;
}
.hp-services__more a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- Journey */
.hp-journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2vw, 30px); }
.hp-journey--four { grid-template-columns: repeat(4, 1fr); }
.hp-journey li { padding-top: 20px; border-top: 2px solid #D8D4EA; }
.hp-journey__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 50%; background: var(--brand-900); color: #fff; font-size: .9375rem; font-weight: 600;
}
.hp-journey h3 { font-size: 1.25rem; margin-bottom: 8px; }
.hp-journey p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }

/* ---------------------------------------------------- Split (image + copy) */
.hp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: stretch; }
/* The photo fills the height of the copy beside it, so the two columns end together. */
.hp-split__media { position: relative; min-height: 400px; }
.hp-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--hp-radius); }
.hp-split__content { max-width: 560px; align-self: center; }
/* Portrait crop of the lifestyle photo: keep the hammock (right of centre in the source) in frame. */
#eligibility .hp-split__media img { object-position: 58% center; }
.hp-split__content .btn { margin-top: 26px; }
.hp-split--reverse .hp-split__media { order: 2; }

.hp-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hp-line);
}
.hp-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.hp-facts .ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--brand-800); }
.hp-facts--criteria li { font-size: .9375rem; color: var(--muted); }
.hp-facts--criteria strong { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; color: var(--brand-950); }

/* -------------------------------------------------------------- Locations */
.hp-locations { background: #F4F7F6; }
.hp-locations .hp-head { max-width: 720px; }
.hp-locations__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.hp-location {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  aspect-ratio: 1; border-radius: 8px; background: var(--brand-950);
  box-shadow: 0 10px 24px rgba(24, 29, 51, .09);
}
.hp-location::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 18, 35, .04) 20%, rgba(10, 22, 39, .28) 52%, rgba(8, 31, 38, .92) 100%);
}
.hp-location img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hp-location:first-child img { object-position: 50% 48%; }
.hp-location:nth-child(2) img { object-position: 64% center; }
.hp-location:nth-child(3) img { object-position: 58% center; }
.hp-location:nth-child(4) img { object-position: 50% center; }
.hp-location__content {
  position: absolute; inset: auto 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(16px, 2vw, 22px); color: #fff;
}
.hp-location__tag {
  display: inline-flex; align-items: center; min-height: 26px; margin-bottom: 10px; padding: 4px 10px;
  border-radius: 999px; background: #F0C94A; color: var(--brand-950);
  font-size: .6875rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: uppercase;
}
.hp-location h3 {
  max-width: 100%; color: #fff; font-family: var(--font-body);
  font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); font-weight: 600; line-height: 1.25; letter-spacing: 0;
  text-wrap: balance;
}
.hp-location p {
  max-width: 30ch; margin-top: 6px; color: rgba(255, 255, 255, .92);
  font-size: .8125rem; line-height: 1.5; text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}
.hp-locations__actions { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 36px); }

/* ----------------------------------------------------------------- Guides */
.hp-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); }
.hp-guide {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
  transition: border-color .2s var(--ease);
}
.hp-guide:hover { border-color: #B9B2DE; }
.hp-guide__media { position: relative; aspect-ratio: 16 / 10; background: var(--hp-surface); }
.hp-guide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-guide__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 24px; }
.hp-guide__tag { margin-bottom: 12px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-800); }
.hp-guide h3 { font-size: 1.25rem; line-height: 1.35; }
.hp-guide h3 a { color: var(--brand-950); }
.hp-guide h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-guide h3 a:focus-visible::after { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.hp-guide p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.hp-guide__cta { margin-top: auto; padding-top: 18px; font-size: .9375rem; font-weight: 600; color: var(--brand-900); }

.hp-topics {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 24px 48px; align-items: start;
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding: clamp(20px, 2.5vw, 30px);
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.hp-topics h3 { font-size: 1.25rem; }
.hp-topics > div > p { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.hp-topics ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.hp-topics li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--hp-line);
  font-size: 1rem; color: var(--ink);
}
.hp-topics li a:hover { color: var(--brand-900); }
.hp-topics li a span { color: var(--brand-800); }

/* ---------------------------------------------------------------- Why PDC */
.hp-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 28px; }
.hp-pillar .ico { width: 26px; height: 26px; margin-bottom: 14px; color: var(--brand-800); }
.hp-pillar h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; margin-bottom: 6px; }
.hp-pillar p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.hp-why__cta { margin-top: 26px; }

/* --------------------------------------------------------------- Packages */
.hp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.hp-plan {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px);
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.hp-plan--featured { border-color: var(--brand-900); box-shadow: inset 0 0 0 1px var(--brand-900); }
.hp-plan .hp-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 26px; margin-bottom: 12px; }
.hp-plan__flag {
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand-100); color: var(--brand-900);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.hp-plan h3 { font-size: 1.5rem; }
.hp-plan__for { margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.hp-plan .hp-check { margin: 16px 0 20px; padding-top: 16px; border-top: 1px solid var(--hp-line); font-size: .9375rem; }
.hp-plan .hp-check strong { font-weight: 600; color: var(--brand-950); }
.hp-plan__foot { display: grid; gap: 10px; margin-top: auto; }
.hp-plan__meta { font-size: .875rem; text-align: center; color: var(--muted); }

.hp-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--hp-line);
}
.hp-steps li { display: flex; gap: 16px; align-items: flex-start; }
.hp-steps__num {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--brand-900); color: #fff; font-size: .9375rem; font-weight: 600;
}
.hp-steps strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; color: var(--brand-950); }
.hp-steps p { font-size: .9375rem; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------ Eligibility check */
.hp-qualify { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.hp-qualify__item {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.2vw, 26px);
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.hp-qualify__big { font-family: var(--font-head); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.1; color: var(--brand-900); }
.hp-qualify__item h3 { margin-top: 4px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; }
.hp-qualify__item p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.hp-qualify__item--ask { justify-content: space-between; gap: 18px; background: var(--brand-950); border-color: var(--brand-950); }
.hp-qualify__item--ask p { font-size: 1.0625rem; line-height: 1.55; color: #fff; }
.hp-qualify__item--ask .btn { width: 100%; }
#eligibility .hp-head { max-width: 820px; }
#eligibility .hp-note { margin-top: 12px; }

/* ----------------------------------------------------- Planning from home */
.hp-pains { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.hp-pains .hp-title { font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.25rem); }
.hp-pains__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.hp-pains__list li { padding-top: 16px; border-top: 2px solid #D8D4EA; }
.hp-pains__list h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; }
.hp-pains__list p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }

@media (max-width: 1023px) {
  .hp-qualify { grid-template-columns: 1fr 1fr; }
  .hp-pains { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hp-qualify, .hp-pains__list { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------- Visa options */
/* Same table treatment as .pg-table on the inner pages. */
.hp-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.hp-table { width: 100%; border-collapse: collapse; font-size: .9875rem; }
.hp-table th, .hp-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hp-line); line-height: 1.5; }
.hp-table thead th { background: var(--hp-surface); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-800); }
.hp-table tbody th { width: 22%; font-weight: 600; color: var(--brand-950); }
.hp-table td { color: var(--hp-text-soft); }
.hp-table td:last-child { font-weight: 600; color: var(--brand-900); }
.hp-table tbody tr:last-child th, .hp-table tbody tr:last-child td { border-bottom: 0; }
#options .hp-note { margin-top: 16px; }

/* ------------------------------------------------------------------- FAQ */
.hp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hp-faq .hp-head { margin-bottom: 0; }
.hp-faq .link-cta { margin-top: 24px; }
.hp-faq__list { border-top: 1px solid var(--hp-line); }
.hp-faq details { border-bottom: 1px solid var(--hp-line); }
.hp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; color: var(--brand-950);
}
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid #CBC6E6; border-radius: 50%; color: var(--brand-900);
  font-size: 1.25rem; font-weight: 400; line-height: 1;
}
.hp-faq details[open] summary::after { content: "\2212"; }
.hp-faq details p { max-width: 60ch; padding: 0 0 22px; line-height: 1.7; color: var(--muted); }

/* --------------------------------------------------------- Client voices */
/* One horizontal scroller, no JS: 4.5 cards fit the container on desktop and 2.5 on
   phones, so the cut card is the affordance that says "there is more this way".
   The track is padded to the container's own edges, which keeps the first card in
   line with the heading above it while the last card can run off the screen. */
.hp-voices { --voice-gap: clamp(14px, 1.4vw, 20px); }
/* The run lives inside the container, so 4.5 cards span the same width as the
   heading above and the half card is cut at the container's own right edge. */
.hp-voices__scroller {
  margin-top: clamp(1.25rem, 2vw, 2rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
/* A mouse can drag the run; while it does, snapping and text selection get out of
   the way, and the pointer says so. Touch keeps the browser's own scrolling. */
@media (hover: hover) and (pointer: fine) {
  .hp-voices__scroller { cursor: grab; }
}
.hp-voices__scroller.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}
.hp-voices__scroller::-webkit-scrollbar { display: none; }
.hp-voices__scroller:focus-visible { outline-offset: -3px; }
.hp-voices__track {
  display: flex;
  gap: var(--voice-gap);
  padding-block: 2px 6px;
}
/* Prev / next, because a mouse cannot move a horizontal track without Shift. */
.hp-voices__tools { display: flex; align-items: center; gap: 20px; }
.hp-voices__arrows { display: flex; gap: 8px; }
.hp-voices__arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid #CBC6E6; border-radius: 50%; background: #fff;
  color: var(--brand-900); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease);
}
.hp-voices__arrow:hover:not(:disabled) { border-color: var(--brand-900); background: var(--brand-100); }
.hp-voices__arrow:disabled { opacity: .35; cursor: default; }
.hp-voices__arrow .ico { width: 18px; height: 18px; stroke-width: 2; }
.hp-voice {
  flex: 0 0 calc((100% - var(--voice-gap) * 4) / 4.5);
  min-width: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(16px, 1.6vw, 22px);
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.hp-voice__tag {
  align-self: flex-start;
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand-100); color: var(--brand-900);
  font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.hp-voice__stars { display: flex; gap: 2px; }
.hp-voice__stars svg { width: 14px; height: 14px; fill: var(--magenta-500); }
.hp-voice__text { flex: 1; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.hp-voice__text::before { content: "\201C"; }
.hp-voice__text::after { content: "\201D"; }
.hp-voice__person { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hp-line); }
.hp-voice__avatar {
  position: relative;
  flex: none; width: 40px; height: 40px;
  border-radius: 50%; background: var(--brand-100);
  box-shadow: 0 0 0 1px var(--hp-line);
}
.hp-voice__avatar > img {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover;
}
/* The client's home country, as a flag badge on the portrait. A circular crop of a
   3:2 flag, ringed in the card background so it remains distinct from the photo. */
.hp-voice__flag {
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px; overflow: hidden;
  border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--hp-line);
}
.hp-voice__flag svg { width: 100%; height: 100%; display: block; }
.hp-voice__who { display: grid; gap: 1px; min-width: 0; }
.hp-voice__who strong { font-size: .875rem; color: var(--brand-950); }
.hp-voice__who em { font-size: .75rem; font-style: normal; line-height: 1.4; color: var(--muted); }
.hp-voices__note { margin-top: clamp(1rem, 1.6vw, 1.5rem); font-size: .8125rem; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------------- CTA */
.hp-cta { display: grid; grid-template-columns: 1fr 1fr; background: var(--brand-950); }
.hp-cta__panel { display: flex; align-items: center; justify-content: flex-end; padding: clamp(2.75rem, 4.5vw, 4.5rem) clamp(24px, 4vw, 56px); }
.hp-cta__content { width: 100%; max-width: 520px; color: #fff; }
.hp-cta__content h2 { font-size: var(--hp-h2); line-height: 1.15; color: #fff; }
.hp-cta__content p { max-width: 40ch; margin-top: 18px; font-size: 1.125rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.hp-cta__content .btn { margin-top: 26px; }
.hp-cta__media { position: relative; min-height: 340px; }
.hp-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- Consultation */
#consultation .consult__formWrap { border-radius: var(--hp-radius); box-shadow: none; }
#consultation .channel:hover { transform: none; box-shadow: none; }
#consultation .channel__text strong { font-size: .9375rem; }
#consultation .channel__text em { font-size: .8125rem; }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1023px) {
  .hp-hero__inner { min-height: clamp(520px, 64vh, 640px); }
  .hp-hero__copy { max-width: 560px; }
  .hp-hero__veil {
    background: linear-gradient(90deg,
      rgba(248, 247, 252, .86) 0%, rgba(248, 247, 252, .8) 50%,
      rgba(248, 247, 252, .5) 78%, rgba(248, 247, 252, .2) 100%);
  }
  .hp-trust__list { grid-template-columns: 1fr 1fr; }
  .hp-head--split { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hp-services { grid-template-columns: 1fr; }

  .hp-journey { grid-template-columns: 1fr; gap: 0; }
  .hp-journey li {
    display: grid; grid-template-columns: 44px 1fr; gap: 4px 20px; align-items: start;
    padding: 20px 0; border-top: 1px solid var(--hp-line);
  }
  .hp-journey li:last-child { border-bottom: 1px solid var(--hp-line); }
  .hp-journey__num { grid-row: 1 / 3; margin: 0; }
  .hp-journey h3 { margin: 0; padding-top: 8px; }

  .hp-split, .hp-why, .hp-faq, .hp-topics { grid-template-columns: 1fr; }
  .hp-split--reverse .hp-split__media { order: 0; }
  .hp-split__media { min-height: 0; aspect-ratio: 16 / 10; }
  .hp-split__content { max-width: 640px; }

  .hp-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-location { aspect-ratio: 4 / 3; }

  .hp-guides { grid-template-columns: 1fr; }
  .hp-guide { flex-direction: row; }
  .hp-guide__media { flex: none; width: 38%; aspect-ratio: auto; }

  .hp-plans { grid-template-columns: 1fr; }
  .hp-steps { grid-template-columns: 1fr; }

  /* Tablets sit between the two counts: 3.5 cards. */
  .hp-voice { flex-basis: calc((100% - var(--voice-gap) * 3) / 3.5); }
  .hp-voices__tools { width: 100%; justify-content: space-between; }

  .hp-cta { grid-template-columns: 1fr; }
  .hp-cta__media { order: -1; min-height: 300px; }
  .hp-cta__panel { justify-content: flex-start; padding-inline: var(--gutter); }
}

@media (max-width: 767px) {
  :root { --hp-section: 2.75rem; }
  /* Phones: the film fills the top of the screen edge to edge, and the copy rests on a
     soft white fade at the bottom, so the couple stays visible above the headline. */
  .hp-hero__stage { display: flex; flex-direction: column; min-height: min(84vh, 660px); background: #F3F6F7; }
  .hp-hero__bg { position: absolute; inset: 0; }
  .hp-hero__bg img, .hp-hero__video { width: 100%; object-position: 57% 28%; }
  .hp-hero__veil {
    background: linear-gradient(180deg,
      rgba(248, 247, 252, .16) 0%, rgba(248, 247, 252, .08) 28%,
      rgba(248, 247, 252, .66) 50%, rgba(248, 247, 252, .95) 64%, #F8F7FC 100%);
  }
  .hp-hero__inner {
    flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 0; padding-block: calc(var(--header-h) + 36vh) 1.75rem;
  }
  .hp-hero__copy { max-width: none; }
  .hp-hero__copy .eyebrow { margin-bottom: 12px; font-size: .75rem; }
  .hp-hero__title { font-size: clamp(2rem, 9.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.01em; }
  .hp-hero__title > span { display: inline; }
  .hp-hero__lead { max-width: 30ch; margin-top: 14px; font-size: 1.0625rem; line-height: 1.6; }
  .hp-hero__lead-full { display: none; }
  .hp-hero__lead-mobile { display: inline; }
  .hp-hero__tagline { margin-top: 10px; }
  .hp-hero__actions { margin-top: 24px; }
  .hp-hero__actions .btn { width: 100%; }
  .hp-hero__contact { display: none; }     /* the floating contact widget covers this on phones */
  /* Phones: 2.5 cards. Swiping is natural here, so the arrows step aside. */
  .hp-voice { flex-basis: calc((100% - var(--voice-gap) * 2) / 2.5); }
  .hp-voices__arrows { display: none; }
  .hp-voice { gap: 9px; padding: 13px; }
  .hp-voice__text { font-size: .8125rem; line-height: 1.55; }
  .hp-voice__stars svg { width: 12px; height: 12px; }
  .hp-voice__person { gap: 8px; padding-top: 10px; }
  .hp-voice__avatar { width: 32px; height: 32px; }
  .hp-voice__flag { right: -2px; bottom: -2px; width: 14px; height: 14px; }
  .hp-voice__who strong { font-size: .8125rem; }
  .hp-voice__who em { font-size: .6875rem; }

  .hp-trust__list { grid-template-columns: 1fr; gap: 12px; padding-block: 18px; }
  .hp-services__more { flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 18px 8px; }
  .hp-facts, .hp-pillars, .hp-topics ul { grid-template-columns: 1fr; }
  .hp-table th, .hp-table td { padding: 12px 14px; font-size: .9375rem; }
  .hp-guide { flex-direction: column; }
  .hp-guide__media { width: auto; aspect-ratio: 16 / 10; }
  .hp-topics { padding: 20px; }
  .hp-cta__media { min-height: 220px; }
}

@media (max-width: 559px) {
  .hp-locations__grid { grid-template-columns: 1fr; gap: 14px; }
  .hp-location { aspect-ratio: 16 / 10; }
  .hp-location__content { padding: 18px; }
  .hp-location p { font-size: .8125rem; }
}