.sp-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: clamp(300px, 31vw, 470px); background: linear-gradient(100deg, #fdfdfd 0%, #f8f5fe 55%, #f1ebfc 100%); }
.sp-hero__art { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: url("../assets/img/sp-hero-skyline.webp") right center / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); pointer-events: none; }
.sp-hero__inner { position: relative; padding-block: clamp(36px, 4vw, 60px); }
.sp-hero__copy { max-width: min(560px, 46%); }
.sp-hero h1 { font-size: clamp(54px, 6.9vw, 104px); line-height: .95; font-weight: 800; letter-spacing: -.045em; color: var(--black); }
.sp-hero__tag { margin-top: 14px; font-size: clamp(17px, 1.65vw, 25px); line-height: 1.25; color: var(--ink); font-weight: 500; }
.sp-hero__text { margin-top: 14px; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.5; color: var(--ink-soft); }
.sp-hero .ex-actions { margin-top: 24px; }
.sp-script { position: absolute; margin: 0; font-family: "Mrs Saint Delafield", "Snell Roundhand", cursive; line-height: .95; transform: rotate(-9deg); transform-origin: left bottom; }
.sp-script span { display: block; }
.sp-script span + span { margin-left: .5em; }
.sp-heart { display: block; width: .55em; margin: .15em 0 0 3.4em; }
.sp-script--hero { right: clamp(10px, 1.6vw, 28px); top: clamp(18px, 2.4vw, 40px); white-space: nowrap; font-size: clamp(24px, 2.7vw, 42px); color: #3d2a9b; }
.sp-script--cta { right: clamp(14px, 5vw, 90px); top: 50%; translate: 0 -55%; font-size: clamp(34px, 4.2vw, 68px); color: var(--purple-deep); }
.sp-sec { position: relative; overflow: hidden; border-bottom: 1px solid #efecf5; background: #fff; }
.sp-sec:nth-of-type(even) { background: linear-gradient(100deg, #fdfcff 0%, #f8f5fe 100%); }
.sp-sec::after { content: ""; position: absolute; right: -8%; top: -40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(179, 77, 255, .09), transparent 68%); pointer-events: none; }
.sp-sec__inner { position: relative; z-index: 1; max-width: 1330px; margin-inline: auto; padding: clamp(24px, 2.6vw, 38px) var(--gutter) clamp(26px, 2.8vw, 42px); }
.sp-sec__head { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.sp-sec h2 { flex: 0 0 auto; font-size: clamp(24px, 3.3vw, 50px); line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--black); }
.sp-sec__rule { flex: 1 1 40px; height: 1px; background: var(--purple-deep); opacity: .8; min-width: 24px; }
.sp-sec__tag { flex: 0 0 auto; margin: 0; font-size: clamp(10px, .95vw, 14px); font-weight: 800; letter-spacing: .2em; color: var(--purple-deep); white-space: nowrap; }
.sp-sec__text { margin-top: 10px; font-size: clamp(14px, 1.2vw, 17.5px); color: var(--ink-soft); }
.sp-sec__row { display: grid; grid-template-columns: minmax(0, 1fr) clamp(110px, 14vw, 200px); align-items: center; gap: clamp(12px, 2vw, 32px); margin-top: clamp(16px, 1.8vw, 26px); }
.sp-sec__icon { display: block; justify-self: center; width: clamp(80px, 11vw, 160px); color: var(--purple-deep); opacity: .92; }
.sp-sec__icon svg { display: block; width: 100%; height: auto; }
.sp-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.3vw, 20px); }
.sp-grid--1, .sp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 82%; }
.sp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-grid--4, .sp-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-card { background: #fff; border: 1px solid #ece9f2; border-radius: 12px; box-shadow: 0 8px 22px rgba(60, 30, 110, .06); }
.sp-photo { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--purple); background: #ececee; flex: 0 0 auto; }
.sp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-card h3 { font-size: clamp(15px, 1.38vw, 21px); line-height: 1.2; font-weight: 800; letter-spacing: -.015em; color: var(--black); }
.sp-card p { margin: 0; font-size: clamp(12px, 1vw, 15px); line-height: 1.4; color: var(--ink-soft); }
.sp-card h3 + p { margin-top: 5px; }
.sp-card--stack { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(14px, 1.5vw, 22px) clamp(8px, 1vw, 14px) clamp(14px, 1.6vw, 24px); }
.sp-card--stack .sp-photo { width: min(72%, 176px); }
.sp-card--stack .sp-card__body { margin-top: clamp(10px, 1.1vw, 16px); }
.sp-card--row { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); padding: clamp(14px, 1.6vw, 24px) clamp(14px, 1.9vw, 30px); }
.sp-card--row .sp-photo { width: clamp(78px, 9.4vw, 148px); }
.sp-card--row .sp-card__body { min-width: 0; }
.sp-cta { position: relative; overflow: hidden; background: linear-gradient(100deg, #f8f5fe 0%, #f1ebfc 55%, #ecdffb 100%); }
.sp-cta__art { position: absolute; inset: 0; pointer-events: none; }
.sp-cta__art::before { content: ""; position: absolute; right: -6%; top: -30%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(179, 77, 255, .18), rgba(179, 77, 255, .05) 70%); }
.sp-cta__art::after { content: ""; position: absolute; left: 30%; top: -60%; width: 70%; height: 180%; border-radius: 50%; border: 1px solid rgba(133, 40, 252, .1); }
.sp-cta__inner { position: relative; padding-block: clamp(30px, 3.6vw, 56px); }
.sp-cta h2 { font-size: clamp(34px, 4.7vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; color: var(--black); }
.sp-cta__inner p:not(.sp-script) { margin-top: 10px; font-size: clamp(16px, 1.7vw, 26px); color: var(--ink); }
.sp-cta__actions { margin-top: 22px; gap: 12px; }
.sp-cta__actions .btn { padding: 13px 30px; font-size: 14.5px; gap: 8px; }
@media (max-width: 1000px) {
.sp-hero__copy { max-width: 52%; }
.sp-hero__art { width: 56%; }
.sp-sec__tag { letter-spacing: .14em; }
.sp-sec__head { flex-wrap: wrap; row-gap: 6px; }
.sp-sec__rule { display: none; }
.sp-sec__tag { flex: 1 1 100%; order: 3; }
}
@media (max-width: 860px) {
.sp-hero { min-height: 0; flex-direction: column; align-items: stretch; }
.sp-hero__art { position: relative; order: 2; width: 100%; height: clamp(180px, 46vw, 300px); background-position: 60% center; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
.sp-hero__inner { padding-block: 36px 8px; }
.sp-hero__copy { max-width: 620px; }
.sp-script--hero { display: none; }
.sp-hero .ex-actions .btn { flex: 1 1 auto; }
.sp-sec__row { grid-template-columns: minmax(0, 1fr); }
.sp-sec__icon { display: none; }
.sp-grid--1, .sp-grid--2 { max-width: none; }
.sp-grid--4, .sp-grid--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-script--cta { position: static; translate: none; margin-top: 18px; font-size: 40px; transform: rotate(-6deg); }
}
@media (max-width: 560px) {
.sp-hero h1 { font-size: 54px; }
.sp-hero .ex-actions .btn { flex: 1 1 100%; }
.sp-grid--1, .sp-grid--2, .sp-grid--3, .sp-grid--4, .sp-grid--8 { grid-template-columns: minmax(0, 1fr); }
.sp-card--stack { flex-direction: row; text-align: left; gap: 16px; padding: 14px 16px; }
.sp-card--stack .sp-photo { width: 84px; }
.sp-card--stack .sp-card__body { margin-top: 0; }
.sp-card--row .sp-photo { width: 84px; }
.sp-card h3 { font-size: 17px; } .sp-card p { font-size: 13.5px; }
.sp-sec h2 { font-size: 28px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.sp-sec__tag { white-space: normal; font-size: 11px; }
.sp-cta__actions .btn { flex: 1 1 100%; }
}