/* ════════════════════════════════════════════════════════════
   VIP Concierge & Personalized Care Page Styles
   ════════════════════════════════════════════════════════════ */

/* ─── Font Awesome 7 Pro (Regular) ─────────────────────────── */
@font-face {
  font-family: 'Font Awesome 7 Pro';
  src: url("../fonts/Font Awesome 7 Pro-Regular-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.fa {
  font-family: 'Font Awesome 7 Pro';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Page wrapper — escapes Astra's max-width container ────── */
.vip-concierge-content {
  display: block;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

:root {
  --background: 220 20% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --primary: 216 100% 22%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 216 45% 94%;
  --primary-tint: 205 70% 72%;
  --accent: 140 61% 28%; /* #1D7239 */
  --accent-foreground: 0 0% 100%;
  --muted: 220 20% 96%;
  --muted-foreground: 220 10% 46%;
  --border: 220 15% 90%;
  --info: 199 88% 50%;
  --success: 152 60% 38%;
  --destructive: 0 75% 48%;
  --destructive-soft: 0 80% 96%;
  --surface: 220 30% 96%;
  --surface-warm: 38 40% 97%;
  --radius: 8px;
  --shadow-sm: 0 1px 2px 0 hsl(216 100% 22% / .05);
  --shadow-md: 0 4px 12px -2px hsl(216 100% 22% / .08);
  --shadow-lg: 0 14px 40px -12px hsl(216 100% 22% / .25);
  --shadow-menu: 0 24px 48px -16px hsl(216 100% 22% / .25);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin-bottom: 12px;
}
.breadcrumb a:hover { color: hsl(var(--primary)); }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }
.breadcrumb .current { color: hsl(var(--accent)); }

/* ─── Shared buttons ───────────────────────────────────────── */
.hs-btn {
  height: 46px; padding: 0 22px;
  border-radius: 8px;
  font: 600 13.5px/1 var(--font-sans);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .2s, background .2s, border-color .2s;
}
.hs-btn--accent {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  box-shadow: var(--shadow-sm);
}
.hs-btn--accent:hover { filter: brightness(1.08); }
.hs-btn--ghost {
  background: transparent;
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--border));
}
.hs-btn--ghost:hover { background: hsl(var(--primary-light)); border-color: hsl(var(--primary) / .25); }
.hs-btn--ghost-light {
  background: transparent;
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary-foreground) / .4);
}
.hs-btn--ghost-light:hover { background: hsl(var(--primary-foreground) / .1); border-color: hsl(var(--primary-foreground) / .6); }

/* ─── Shared section scaffolding ───────────────────────────── */
.sec { padding: 72px 200px; }
.sec__inner { max-width: 1040px; margin: 0 auto; }
.sec--muted { background: hsl(var(--surface)); }
.sec__head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.sec__eyebrow {
  font-size: 12px; font-weight: 600;
  color: hsl(var(--accent));
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.sec__title {
  margin: 0 0 14px;
  font: 600 clamp(1.75rem, 3vw, 2.375rem)/1.15 var(--font-sans);
  color: hsl(var(--foreground));
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sec__sub {
  margin: 0;
  font-size: 17px; line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
@media (max-width: 1200px) { .sec { padding: 56px 40px; } }
@media (max-width: 760px) { .sec { padding: 48px 24px; } }

/* ─── Hero (full-bleed scrim, straight bottom) ─────────────── */
.hero {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center;
  padding: 72px 200px;
  background: hsl(var(--primary));
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background-image: url('../images/care-centre-heart-BS_zDFVw.jpg');
  background-size: cover; background-position: center;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, hsl(var(--foreground) / .88) 0%, hsl(var(--foreground) / .65) 45%, hsl(var(--foreground) / .25) 100%),
    linear-gradient(0deg, hsl(var(--foreground) / .45), transparent 60%);
}
.hero__inner { position: relative; max-width: 1180px; margin: 0 auto; width: 100%; }
.hero__eyebrow {
  font-size: 12px; font-weight: 600;
  color: hsl(var(--primary-tint));
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 {
  margin: 0 0 18px;
  font: 600 clamp(2.25rem, 4.8vw, 3.5rem)/1.05 var(--font-sans);
  color: hsl(var(--primary-foreground));
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
}
.hero p {
  margin: 0 0 28px;
  font-size: 17px; line-height: 1.6;
  color: hsl(var(--primary-foreground) / .85);
  max-width: 58ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero__pills {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 13px/1.3 var(--font-sans);
  color: hsl(var(--primary-foreground) / .92);
}
.hero__pill .fa { color: hsl(var(--accent)); font-size: 14px; }
@media (max-width: 1200px) { .hero { padding: 64px 40px; } }
@media (max-width: 760px) { .hero { padding: 56px 24px; min-height: 0; } }

/* ─── Two-column intro (What is …) ─────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.split__copy h2 {
  margin: 0 0 18px;
  font: 600 clamp(1.75rem, 3vw, 2.375rem)/1.15 var(--font-sans);
  color: hsl(var(--foreground));
  letter-spacing: -0.025em; text-wrap: balance;
}
.split__copy p {
  margin: 0 0 16px;
  font-size: 16px; line-height: 1.65;
  color: hsl(var(--muted-foreground));
}
.feat-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px;
}
.feat-list li { position: relative; padding-left: 32px; }
.feat-list li .fa {
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 9999px;
  background: hsl(var(--accent) / 0.14); color: hsl(var(--accent));
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
.feat-list__text { font-size: 14.5px; line-height: 1.55; color: hsl(var(--foreground)); }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .feat-list { grid-template-columns: 1fr; } }

/* ─── Offer grid (What We Offer) ───────────────────────────── */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.offer-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 30px 28px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.offer-card:hover {
  border-color: hsl(var(--accent) / .5);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.offer-card__icon {
  width: 52px; height: 52px; border-radius: 9999px;
  border: 1px solid hsl(var(--accent) / .45);
  background: hsl(var(--primary-light));
  color: hsl(var(--accent));
  display: grid; place-items: center;
  font-size: 19px;
  margin-bottom: 20px;
}
.offer-card h3 {
  margin: 0 0 8px;
  font: 600 18px/1.3 var(--font-sans);
  color: hsl(var(--primary));
  letter-spacing: -0.01em;
}
.offer-card p {
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
@media (max-width: 880px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .offer-grid { grid-template-columns: 1fr; } }

/* ─── How It Works (steps) ─────────────────────────────────── */
.hiw__lede {
  text-align: center; max-width: 620px; margin: 0 auto 44px;
}
.hiw__lede-strong {
  margin: 0 0 12px;
  font: 600 20px/1.3 var(--font-sans);
  color: hsl(var(--primary));
  letter-spacing: -0.01em;
}
.hiw__lede p { margin: 0; font-size: 16px; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; align-items: stretch;
}
.step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 28px 18px;
  margin: 0 8px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.step:hover {
  border-color: hsl(var(--accent) / .5);
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.step__arrow {
  align-self: center;
  color: hsl(var(--accent));
  font-size: 16px;
  display: grid; place-items: center;
}
.step__icon-wrap { position: relative; margin-bottom: 16px; }
.step__icon {
  width: 56px; height: 56px; border-radius: 9999px;
  border: 1px solid hsl(var(--accent) / .45);
  background: hsl(var(--primary-light));
  color: hsl(var(--accent));
  display: grid; place-items: center;
  font-size: 20px;
}
.step__num {
  position: absolute; right: -6px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 9999px;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font: 600 11px/1 var(--font-sans);
  display: grid; place-items: center;
  border: 2px solid hsl(var(--card));
}
.step h3 {
  margin: 0 0 10px;
  font: 600 16px/1.25 var(--font-sans);
  color: hsl(var(--primary));
  letter-spacing: -0.01em;
}
.step p { margin: 0; font-size: 13px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.steps--connected {
  display: flex; flex-wrap: nowrap; align-items: stretch;
}
.steps--connected .step { flex: 1; }
@media (max-width: 980px) {
  .steps--connected { flex-wrap: wrap; justify-content: center; }
  .steps--connected .step { flex: 1 1 40%; margin: 8px; }
  .step__arrow { display: none; }
}
@media (max-width: 560px) {
  .steps--connected .step { flex: 1 1 100%; }
}

/* ─── Where We Care (image label cards) ────────────────────── */
.place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.place-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.place-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: hsl(var(--primary-light)); }
.place-card__media img { width: 100%; height: 100%; object-fit: cover; }
.place-card__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: hsl(var(--primary) / .92);
  color: hsl(var(--primary-foreground));
  font: 600 16px/1.3 var(--font-sans);
  padding: 14px 20px;
  letter-spacing: -0.01em;
}
.place-card__body { padding: 26px 24px; }
.place-card__body p {
  margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  position: relative; padding-left: 28px;
  font-size: 14.5px; line-height: 1.5;
  color: hsl(var(--foreground));
}
.check-list li::before {
  content: "\f00c"; font-family: 'Font Awesome 7 Pro';
  position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 9999px;
  background: hsl(var(--accent) / 0.14); color: hsl(var(--accent));
  font-size: 10px; display: grid; place-items: center;
}
@media (max-width: 880px) { .place-grid { grid-template-columns: 1fr; } }

/* ─── Why Nakasero (checklist + photo) ─────────────────────── */
.why-split { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,.9fr); gap: 56px; align-items: center; }
.why-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px;
}
.why-list li { position: relative; padding-left: 32px; }
.why-list li .fa {
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 9999px;
  background: hsl(var(--accent) / 0.14); color: hsl(var(--accent));
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
.why-list__title { display: block; font: 600 14.5px/1.4 var(--font-sans); color: hsl(var(--foreground)); margin-bottom: 4px; }
.why-list__desc { display: block; font-size: 13px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.why-photo { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; background: hsl(var(--primary-light)); }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) {
  .why-split { grid-template-columns: 1fr; gap: 40px; }
  .why-photo { max-width: 480px; aspect-ratio: 16/10; }
}
@media (max-width: 560px) { .why-list { grid-template-columns: 1fr; } }

/* ─── 24/7 Support (intro + 2x2 grid) ──────────────────────── */
.support-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.support-intro__icon {
  width: 56px; height: 56px; border-radius: 9999px;
  border: 1px solid hsl(var(--accent) / .45);
  background: hsl(var(--primary-light));
  color: hsl(var(--accent));
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.support-intro h2 {
  margin: 0 0 14px;
  font: 600 clamp(1.75rem, 3vw, 2.375rem)/1.15 var(--font-sans);
  color: hsl(var(--foreground));
  letter-spacing: -0.025em; text-wrap: balance;
}
.support-intro p { margin: 0; font-size: 16px; line-height: 1.65; color: hsl(var(--muted-foreground)); }
.support-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.support-mini__item {
  display: flex; align-items: center; gap: 14px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 20px;
}
.support-mini__icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: hsl(var(--primary-light)); color: hsl(var(--accent));
  display: grid; place-items: center; font-size: 15px;
}
.support-mini__label { font: 600 14px/1.35 var(--font-sans); color: hsl(var(--foreground)); }
@media (max-width: 980px) { .support-split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 420px) { .support-mini { grid-template-columns: 1fr; } }

/* ─── CTA · Minimal (navy band) ────────────────────────────── */
.cta-min {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 40px 200px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-min::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, hsl(var(--accent) / .35), transparent 60%),
    radial-gradient(ellipse at 20% -10%, hsl(var(--primary-tint) / .2), transparent 50%);
  pointer-events: none;
}
.cta-min__inner { max-width: 720px; margin: 0 auto; position: relative; }
.cta-min__eyebrow {
  font-size: 12px; font-weight: 600;
  color: hsl(var(--primary-tint));
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.cta-min h2 {
  margin: 0 0 16px;
  font: 600 clamp(2.25rem, 4.5vw, 3.25rem)/1.1 var(--font-sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cta-min p {
  margin: 0 0 36px;
  font-size: 17px; line-height: 1.6;
  color: hsl(var(--primary-foreground) / .8);
  max-width: 56ch;
  margin-left: auto; margin-right: auto;
}
.cta-min__actions {
  display: inline-flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: center;
}
.cta-min__primary {
  height: 56px; padding: 0 32px;
  border-radius: 9999px;
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font: 600 15px/1 var(--font-sans);
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; gap: 12px;
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.cta-min__primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-lg); }
.cta-min__primary:active { transform: translateY(1px); }
.cta-min__ghost {
  height: 56px; padding: 0 28px;
  border-radius: 9999px;
  background: transparent;
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary-foreground) / .35);
  font: 600 15px/1 var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .2s, border-color .2s;
}
.cta-min__ghost:hover { background: hsl(var(--primary-foreground) / .1); border-color: hsl(var(--primary-foreground) / .55); }
@media (max-width: 1200px) {
  .cta-min { padding-left: 40px; padding-right: 40px; }
}