/* Premium polish, same flow as the Jamilah Jewel demo.
   Each sample sets its own --p-dark and --p-light in brand.css; this file
   only uses the variables, so it is identical in every folder. */

/* --- type scale --------------------------------------------------- */
@media (min-width: 761px) { body { font-size: 18px; } }
.eyebrow { font-size: .8rem; letter-spacing: .14em; }
h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.12; }
.section .heading p, .section p { max-width: 65ch; }
.card p, .points p, .quote p { font-size: 16px; line-height: 1.6; }
@media (min-width: 761px) { .card p, .points p, .quote p { font-size: 16.5px; } }
.card h3, .points h3 { font-family: var(--font-display), Georgia, serif; font-size: 1.3rem; font-weight: 650; }

/* --- spacing: 96 desktop / 64 tablet / 48 phone --------------------- */
@media (max-width: 600px) { .section { padding: 48px 0; } }

/* --- header: tinted surface, accent hairline ----------------------- */
.site-header { background: var(--p-hdr); border-bottom-color: var(--p-hairline); }
.mark { background: var(--p-dark); color: var(--p-light); }

/* --- full hero: dark, image on the right on desktop ---------------- */
body:not(.hero-split):not(.hero-type) .hero { min-height: 86svh; display: flex; align-items: center; background: var(--p-dark); }
.hero-inner { width: 100%; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.06; letter-spacing: -.025em; max-width: 14ch; }
.hero-sub { font-size: clamp(17px, 1.6vw, 19.5px); max-width: 46ch; }
body:not(.hero-split) .hero-media ~ .hero-inner .eyebrow { color: var(--p-light); opacity: 1; }
body:not(.hero-split) .hero-media ~ .hero-inner .btn:not(.ghost) { background: var(--p-light); color: var(--p-dark); }
@media (hover: hover) and (pointer: fine) {
  body:not(.hero-split) .hero-media ~ .hero-inner .btn:not(.ghost):hover { filter: brightness(1.08); }
}
@media (min-width: 761px) {
  body:not(.hero-split):not(.hero-type) .hero-media { left: 36%; }
  body:not(.hero-split):not(.hero-type) .hero-media::after {
    background: linear-gradient(90deg, var(--p-dark) 0%, var(--p-fade) 30%, transparent 100%);
  }
}
@media (max-width: 760px) {
  body:not(.hero-split):not(.hero-type) .hero-media::after {
    background: linear-gradient(180deg, var(--p-scrim) 0%, var(--p-scrim-soft) 50%, var(--p-scrim) 100%);
  }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* --- split hero: lift the photo ----------------------------------- */
.hero-split .hero-media { box-shadow: var(--shadow-lift); }

/* --- cards and quotes: quiet lift on hover ------------------------- */
.card, .quote { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .quote:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}

/* --- dark closing band ------------------------------------------- */
.cta { background: var(--p-dark); }
.cta h2 { color: #fff; }
.cta p { color: rgba(255, 255, 255, .78); }
.cta .btn { background: var(--p-light); color: var(--p-dark); }
@media (hover: hover) and (pointer: fine) { .cta .btn:hover { filter: brightness(1.08); } }