/* ================================================================
   services.css — Typography & visual-balance refinements
   Loaded after styles.css; all rules here override the base.
   ================================================================ */

/* ── Column proportions: image 46 / content 54 ──────────────── */
.svc-panel {
  grid-template-columns: 46fr 54fr;
  max-width: 1260px;
  min-height: 500px;
}

/* ── Service title: 30-34px (was clamp 34-52px) ─────────────── */
.svc-panel-body h2 {
  font-size: clamp(28px, 2.6vw, 34px);
  margin-bottom: 0;
  line-height: 1.1;
  color: var(--ivory);
}

/* ── Content area: comfortable reading width, balanced padding ─ */
.svc-panel-body {
  padding: 52px 60px 52px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-content-group {
  max-width: 460px;          /* readable measure; overrides 82% */
  width: 100%;
}

/* ── Eyebrow label: 11px, stronger contrast, better tracking ── */
.svc-content-group .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--champagne);
  opacity: 1;
  margin-bottom: 10px;
}

/* ── Gold-rule spacing: tighter between title and checklist ──── */
.svc-section .gold-rule-left {
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

/* ── Checklist: 16px / 1.7, warmer opacity, larger icons ─────── */
.svc-checklist {
  margin: 0;
  gap: 11px;
}
.svc-checklist li {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(248, 242, 234, 0.82);    /* ~82% warm ivory */
  gap: 12px;
  align-items: flex-start;
}
.svc-checklist li svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--gold);
}

/* ── Body description text (engagement has none, kept for parity) */
.svc-panel-body > .svc-content-group > p:not(.svc-price) {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(248, 242, 234, 0.82);
}

/* ── Price: keep Cormorant seriffed display, trim spacing ─────── */
.svc-price {
  font-size: clamp(19px, 1.7vw, 22px);
  margin: 18px 0 0;
  color: var(--gold);
}

/* ── Upgrade box: better padding, text sizes and contrast ─────── */
.svc-upgrade {
  padding: 18px 22px;
  margin: 18px 0 0;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.03);
}
.svc-upgrade .eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--champagne);
  margin-bottom: 8px;
}
.svc-upgrade strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--ivory);
  display: block;
  margin-bottom: 10px;
}
.svc-upgrade p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(248, 242, 234, 0.78);
  margin: 0 0 8px;
}
.svc-upgrade p:last-child { margin-bottom: 0; }

/* ── WhatsApp button: explicit 12px label, comfortable spacing ── */
.svc-panel-body .btn {
  font-size: 12px;
  letter-spacing: 0.09em;
  margin-top: 22px;
}

/* ── Outstation, Trial and Disclaimer body text ───────────────── */
.bg-cocoa .container p,
.bg-espresso .container p {
  font-size: 15px;
  line-height: 1.7;
}

/* ── Outstation price ─────────────────────────────────────────── */
.bg-cocoa .container .card-price,
.bg-cocoa .container p.card-price {
  font-size: 22px;
  margin-top: 16px;
}

/* Pricing disclaimer note */
.svc-disclaimer {
  font-size: 14px;
  line-height: 1.7;
  color: var(--taupe);
}

/* ── Page hero lead: improve readability ─────────────────────── */
.page-hero-lead {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(117, 100, 94, 0.95);   /* slightly warmer than --taupe */
  margin-top: 18px;
  max-width: 520px;
}

/* ── Responsive: tablet 768-1100 ─────────────────────────────── */
@media (max-width: 1100px) {
  .svc-panel { min-height: 460px; }
  .svc-panel-body { padding: 44px 44px 44px 48px; }
  .svc-content-group { max-width: 420px; }
  .svc-panel-body h2 { font-size: clamp(26px, 2.8vw, 32px); }
}
@media (max-width: 1024px) {
  .svc-panel-body { padding: 40px 36px 40px 44px; }
}

/* ── Responsive: mobile stack ────────────────────────────────── */
@media (max-width: 768px) {
  .svc-panel { grid-template-columns: 1fr; }
  .svc-panel-body {
    padding: 36px 28px;
    order: 1 !important;
    justify-content: flex-start;
  }
  .svc-content-group { max-width: 100%; }
  .svc-checklist li { font-size: 15px; }
  .svc-panel-body h2 { font-size: clamp(26px, 5vw, 32px); }
}
@media (max-width: 480px) {
  .svc-panel-body { padding: 28px 20px; }
  .svc-checklist li { font-size: 15px; line-height: 1.65; }
}