/* ShineCraft public website */
html { scroll-behavior: smooth; }
body.front { background: #fff; color: #1b1b1f; font-size: 1rem; }
body.front.dark-page { background: var(--sc-black); }

/* ---------- navbar ---------- */
.site-nav { background: rgba(17, 17, 17, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); transition: padding .25s; }
.site-nav .navbar-brand img { height: 44px; }
.site-nav .nav-link { color: rgba(255, 255, 255, .78); font-weight: 500; padding: .5rem .9rem !important; position: relative; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; }
.site-nav .nav-link.active::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: 2px; height: 2px; background: var(--sc-red); border-radius: 2px; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .3); }
.site-nav .navbar-toggler-icon { filter: invert(1); }
.top-strip { background: var(--sc-red); color: #fff; font-size: .85rem; }
.top-strip a { color: #fff; text-decoration: none; }

.btn-book { background: var(--sc-red); color: #fff; border: 0; border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; box-shadow: 0 8px 22px rgba(215, 38, 46, .35); transition: transform .2s, box-shadow .2s, background .2s; }
.btn-book:hover { background: var(--sc-red-light); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(215, 38, 46, .45); }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; }
.btn-ghost:hover { background: #fff; color: var(--sc-black); }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(1100px 520px at 85% 10%, rgba(215, 38, 46, .55), transparent 60%), radial-gradient(800px 500px at 0% 100%, rgba(215, 38, 46, .25), transparent 60%), linear-gradient(160deg, #0b0b0c 0%, #1b1b1f 100%); color: #fff; overflow: hidden; padding: 5.5rem 0 7rem; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 38px); pointer-events: none; }
.hero h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.08; font-weight: 700; }
.hero h1 .accent { color: var(--sc-red-light); position: relative; }
.hero .lead { color: rgba(255, 255, 255, .75); max-width: 34rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; }
.hero-badge i { color: var(--sc-red-light); }
.hero-car { position: relative; }
.hero-car svg { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); animation: floaty 6s ease-in-out infinite; }
.hero-ring { position: absolute; inset: 8% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(215, 38, 46, .55), transparent); filter: blur(30px); z-index: 0; }
.hero-car svg { position: relative; z-index: 1; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-stats { margin-top: -3.2rem; position: relative; z-index: 3; }
.stat-card { background: #fff; border-radius: 1.1rem; box-shadow: 0 18px 50px rgba(17, 17, 17, .14); padding: 1.4rem 1.2rem; text-align: center; height: 100%; border-bottom: 3px solid var(--sc-red); }
.stat-card .num { font-family: var(--sc-font-head); font-weight: 700; font-size: 2rem; color: var(--sc-black); line-height: 1; }
.stat-card .lbl { color: #6b6b73; font-size: .88rem; margin-top: .35rem; }

/* ---------- sections ---------- */
.section { padding: 5rem 0; }
.section-soft { background: var(--sc-grey); }
.section-dark { background: linear-gradient(160deg, #111 0%, #1d1d21 100%); color: #fff; }
.eyebrow { color: var(--sc-red); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--sc-red); }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; margin: .5rem 0 1rem; }
.section-sub { color: #6b6b73; max-width: 38rem; }
.section-dark .section-sub { color: rgba(255, 255, 255, .65); }

/* ---------- service cards ---------- */
.svc-card { position: relative; background: #fff; border: 1px solid #ececef; border-radius: 1.1rem; padding: 1.6rem; height: 100%; transition: transform .25s, box-shadow .25s, border-color .25s; display: flex; flex-direction: column; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--sc-red); transition: width .35s; }
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(17, 17, 17, .12); border-color: transparent; }
.svc-card:hover::before { width: 100%; }
.svc-icon { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(215, 38, 46, .12), rgba(215, 38, 46, .04)); color: var(--sc-red); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; }
.svc-card h5 { font-size: 1.12rem; }
.svc-card p { color: #6b6b73; font-size: .93rem; flex: 1; }
.svc-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .9rem; border-top: 1px dashed #e4e4e8; }
.svc-price { font-family: var(--sc-font-head); font-weight: 700; font-size: 1.15rem; color: var(--sc-black); }
.svc-price small { color: #85858d; font-weight: 400; font-size: .75rem; }
.svc-dur { color: #85858d; font-size: .82rem; }
.chip { display: inline-block; background: rgba(215, 38, 46, .08); color: var(--sc-red-dark); padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.cat-pills .btn { border-radius: 999px; font-weight: 600; font-size: .9rem; }
.cat-pills .btn.active { background: var(--sc-red); border-color: var(--sc-red); color: #fff; }

/* ---------- offers strip ---------- */
.offer-strip { background: linear-gradient(90deg, var(--sc-red-dark), var(--sc-red), var(--sc-red-light)); color: #fff; }
.offer-strip .marq { display: flex; gap: 3rem; white-space: nowrap; animation: marq 28s linear infinite; padding: .65rem 0; font-weight: 600; font-size: .95rem; }
.offer-strip .marq-wrap { overflow: hidden; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.offer-card { background: #fff; border-radius: 1.2rem; overflow: hidden; border: 1px solid #eee; height: 100%; display: flex; flex-direction: column; }
.offer-card .top { background: linear-gradient(135deg, var(--sc-black), var(--sc-charcoal)); color: #fff; padding: 1.6rem; position: relative; }
.offer-card .top::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: var(--sc-red); opacity: .85; }
.offer-card .off { font-family: var(--sc-font-head); font-size: 2.4rem; font-weight: 700; line-height: 1; position: relative; z-index: 1; }
.coupon { border: 2px dashed var(--sc-red); color: var(--sc-red); border-radius: .6rem; padding: .35rem .8rem; font-weight: 700; letter-spacing: .08em; display: inline-block; }

/* ---------- process steps ---------- */
.step { text-align: center; position: relative; padding: 0 1rem; }
.step .n { width: 64px; height: 64px; border-radius: 50%; background: var(--sc-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sc-font-head); font-weight: 700; font-size: 1.4rem; box-shadow: 0 0 0 8px rgba(215, 38, 46, .15); margin-bottom: 1rem; }
.section-dark .step p { color: rgba(255, 255, 255, .65); }

/* ---------- before / after slider ---------- */
.ba { position: relative; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; background: #222; user-select: none; touch-action: pan-y; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); }
.ba .handle::after { content: '\F284'; font-family: bootstrap-icons; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--sc-red); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.ba .tag { position: absolute; top: 12px; padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; background: rgba(17, 17, 17, .75); color: #fff; }
.ba .tag.b { left: 12px; } .ba .tag.a { right: 12px; background: var(--sc-red); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-placeholder { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .35); font-size: 3rem; }

/* ---------- testimonials ---------- */
.testi { background: #fff; border-radius: 1.1rem; padding: 1.6rem; height: 100%; border: 1px solid #ececef; position: relative; }
.testi::before { content: '\201C'; position: absolute; right: 18px; top: -6px; font-size: 5rem; font-family: Georgia, serif; color: var(--sc-red); opacity: .18; }
.testi .stars { color: #f5a623; font-size: .85rem; }

/* ---------- cta ---------- */
.cta-band { background: linear-gradient(120deg, var(--sc-red-dark), var(--sc-red) 60%, var(--sc-red-light)); color: #fff; border-radius: 1.5rem; padding: 3rem 2rem; position: relative; overflow: hidden; }
.cta-band::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 36px solid rgba(255, 255, 255, .12); }

/* ---------- page header ---------- */
.page-head { background: radial-gradient(700px 300px at 90% 0%, rgba(215, 38, 46, .5), transparent 65%), linear-gradient(160deg, #0b0b0c, #1d1d21); color: #fff; padding: 4rem 0 3.4rem; }
.page-head h1 { font-weight: 700; }
.page-head .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .4); --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .65); }
.page-head .breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--sc-black); color: rgba(255, 255, 255, .7); padding: 4rem 0 0; }
.site-footer h6 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.site-footer a:hover { color: var(--sc-red-light); }
.site-footer .social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: inline-flex; align-items: center; justify-content: center; margin-right: .4rem; transition: .2s; }
.site-footer .social a:hover { background: var(--sc-red); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 3rem; padding: 1.2rem 0; font-size: .85rem; }

.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; box-shadow: 0 10px 28px rgba(37, 211, 102, .5); text-decoration: none; animation: pulse 2.4s infinite; }
.wa-float:hover { color: #fff; transform: scale(1.08); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
.to-top { position: fixed; right: 24px; bottom: 90px; z-index: 1040; width: 42px; height: 42px; border-radius: 50%; background: var(--sc-charcoal); color: #fff; border: 0; display: none; align-items: center; justify-content: center; }
.to-top.show { display: flex; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-car svg, .offer-strip .marq, .wa-float { animation: none; } }

/* ---------- booking wizard ---------- */
.wizard-steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 2rem; }
.wizard-steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 21px; height: 3px; background: #e5e5ea; z-index: 0; }
.wizard-steps .ws { position: relative; z-index: 1; text-align: center; flex: 1; font-size: .82rem; color: #8a8a93; font-weight: 600; }
.wizard-steps .ws .dot { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 3px solid #e5e5ea; display: flex; align-items: center; justify-content: center; margin: 0 auto .35rem; font-weight: 700; transition: .25s; }
.wizard-steps .ws.active { color: var(--sc-red); }
.wizard-steps .ws.active .dot { border-color: var(--sc-red); color: var(--sc-red); box-shadow: 0 0 0 6px rgba(215, 38, 46, .12); }
.wizard-steps .ws.done .dot { background: var(--sc-red); border-color: var(--sc-red); color: #fff; }
.wiz-panel { display: none; animation: fadeUp .35s; }
.wiz-panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vt-card { border: 2px solid #e8e8ec; border-radius: 1rem; padding: 1.1rem .6rem; text-align: center; cursor: pointer; transition: .2s; background: #fff; height: 100%; }
.vt-card i { font-size: 2rem; color: #9a9aa3; display: block; margin-bottom: .3rem; transition: .2s; }
.vt-card:hover { border-color: var(--sc-red-light); transform: translateY(-3px); }
.vt-card.selected { border-color: var(--sc-red); background: rgba(215, 38, 46, .05); }
.vt-card.selected i { color: var(--sc-red); }
.svc-pick { border: 2px solid #e8e8ec; border-radius: 1rem; padding: 1rem 1.1rem; cursor: pointer; transition: .2s; display: flex; gap: .9rem; align-items: center; background: #fff; height: 100%; }
.svc-pick:hover { border-color: var(--sc-red-light); }
.svc-pick.selected { border-color: var(--sc-red); background: rgba(215, 38, 46, .05); }
.svc-pick .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cfcfd6; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; }
.svc-pick.selected .tick { background: var(--sc-red); border-color: var(--sc-red); }
.slot-btn { border: 2px solid #e8e8ec; border-radius: .75rem; padding: .55rem .4rem; text-align: center; font-weight: 600; font-size: .9rem; cursor: pointer; background: #fff; transition: .2s; width: 100%; }
.slot-btn:hover:not(:disabled) { border-color: var(--sc-red); color: var(--sc-red); }
.slot-btn.selected { background: var(--sc-red); border-color: var(--sc-red); color: #fff; }
.slot-btn:disabled { background: #f4f4f6; color: #b4b4bb; text-decoration: line-through; cursor: not-allowed; }
.summary-card { position: sticky; top: 96px; background: #fff; border: 1px solid #ececef; border-radius: 1.2rem; box-shadow: 0 14px 40px rgba(17, 17, 17, .08); overflow: hidden; }
.summary-card .head { background: var(--sc-black); color: #fff; padding: 1rem 1.3rem; }
.summary-card .body { padding: 1.2rem 1.3rem; }
.summary-card .line { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .92rem; }
.summary-card .total { border-top: 2px dashed #e3e3e8; margin-top: .6rem; padding-top: .8rem; font-family: var(--sc-font-head); font-weight: 700; font-size: 1.25rem; }
.bk-success { width: 92px; height: 92px; border-radius: 50%; background: var(--sc-green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 3rem; box-shadow: 0 0 0 12px rgba(30, 158, 90, .15); }

.form-card { background: #fff; border: 1px solid #ececef; border-radius: 1.2rem; padding: 2rem; box-shadow: 0 14px 40px rgba(17, 17, 17, .06); }
.contact-box { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.contact-box .ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(215, 38, 46, .1); color: var(--sc-red); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.timeline-track { position: relative; padding-left: 1.6rem; }
.timeline-track::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: #e4e4e8; }
.timeline-track .tl { position: relative; padding-bottom: 1rem; color: #8a8a93; }
.timeline-track .tl::before { content: ''; position: absolute; left: -1.6rem; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #d2d2d9; }
.timeline-track .tl.done { color: #1b1b1f; }
.timeline-track .tl.done::before { background: var(--sc-red); border-color: var(--sc-red); }

/* ================= v2.1 photo-rich redesign ================= */
.hero-photo { background: none; padding: 6rem 0 8rem; isolation: isolate; }
.hero-photo::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--hero) center/cover no-repeat; transform: scale(1.05); animation: kenburns 24s ease-in-out infinite alternate; }
.hero-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 10, 12, .96) 0%, rgba(10, 10, 12, .82) 45%, rgba(120, 12, 18, .55) 100%), radial-gradient(900px 500px at 90% 0%, rgba(215, 38, 46, .45), transparent 60%); }
@keyframes kenburns { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.18) translate3d(-1.5%, -1%, 0); } }
.hero-photo h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); text-shadow: 0 6px 30px rgba(0, 0, 0, .45); }
.hero-photo h1 .accent { background: linear-gradient(90deg, #ff6a70, #D7262E 60%, #ff9a9e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.collage { position: relative; height: 520px; }
.collage .ph { position: absolute; margin: 0; border-radius: 1.4rem; overflow: hidden; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); transition: transform .5s; }
.collage .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage .ph1 { width: 58%; height: 66%; left: 0; top: 6%; transform: rotate(-4deg); z-index: 2; }
.collage .ph2 { width: 52%; height: 46%; right: 0; top: 0; transform: rotate(5deg); }
.collage .ph3 { width: 50%; height: 44%; right: 6%; bottom: 0; transform: rotate(-2deg); z-index: 3; }
.collage:hover .ph1 { transform: rotate(-2deg) translateY(-6px); } .collage:hover .ph2 { transform: rotate(3deg) translateY(-6px); } .collage:hover .ph3 { transform: rotate(0) translateY(-6px); }
.float-chip { position: absolute; z-index: 5; display: flex; gap: .7rem; align-items: center; background: rgba(255, 255, 255, .96); color: #111; padding: .65rem 1rem; border-radius: 1rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: floaty 5s ease-in-out infinite; }
.float-chip i { width: 38px; height: 38px; border-radius: 12px; background: var(--sc-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.float-chip strong { display: block; font-size: .92rem; line-height: 1.1; } .float-chip small { color: #6b6b73; font-size: .75rem; }
.float-chip.c1 { left: -4%; bottom: 8%; } .float-chip.c2 { right: -2%; top: 52%; animation-delay: -2.5s; }

.hero-stats .stat-card { border: 0; border-bottom: 3px solid var(--sc-red); backdrop-filter: blur(10px); }
.hero-stats .stat-card .num { background: linear-gradient(135deg, #111, #D7262E); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* service cards with photos */
.svc-card.has-img { padding: 0; border: 0; box-shadow: 0 10px 30px rgba(17, 17, 17, .08); }
.svc-card.has-img::before { display: none; }
.svc-img { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.svc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.svc-card.has-img:hover .svc-img img { transform: scale(1.09); }
.svc-cat { position: absolute; left: 14px; top: 14px; z-index: 2; background: var(--sc-red); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; padding: .3rem .75rem; border-radius: 999px; text-transform: uppercase; }
.svc-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.svc-card.has-img:hover { box-shadow: 0 26px 55px rgba(215, 38, 46, .22); }

/* split feature */
.split-feature { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: 1.8rem; overflow: hidden; background: #fff; box-shadow: 0 30px 70px rgba(17, 17, 17, .13); }
.sf-img { min-height: 480px; background-size: cover; background-position: center; position: relative; }
.sf-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(215, 38, 46, .25)); }
.sf-tag { position: absolute; left: 20px; bottom: 20px; z-index: 2; background: rgba(17, 17, 17, .8); color: #fff; padding: .55rem 1rem; border-radius: 999px; font-weight: 600; backdrop-filter: blur(8px); }
.sf-body { padding: 3rem; }
.mini-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(215, 38, 46, .1); color: var(--sc-red); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }

/* process with photo */
.process-bg { position: relative; isolation: isolate; }
.process-bg::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--pb) center/cover fixed; }
.process-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 10, 12, .93), rgba(40, 8, 10, .9)); }
.step.glass { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 1.4rem; padding: 2rem 1.3rem; backdrop-filter: blur(10px); height: 100%; transition: transform .3s, background .3s; }
.step.glass:hover { transform: translateY(-8px); background: rgba(215, 38, 46, .18); }

/* masonry */
.masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1rem; }
.masonry .mi { position: relative; border-radius: 1.2rem; overflow: hidden; display: block; }
.masonry .mi.tall { grid-row: span 2; } .masonry .mi.wide { grid-column: span 2; }
.masonry img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.masonry .mi:hover img { transform: scale(1.1); }
.masonry .mi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .75)); opacity: .85; transition: .3s; }
.masonry .mi span { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-weight: 600; font-family: var(--sc-font-head); transform: translateY(6px); transition: .3s; }
.masonry .mi:hover span { transform: none; }
.masonry .mi:hover::after { background: linear-gradient(180deg, rgba(215, 38, 46, .1) 30%, rgba(165, 22, 29, .85)); }

/* cta + page head with photos */
.cta-photo { background: none; position: relative; isolation: isolate; padding: 4rem 2.5rem; }
.cta-photo::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--cb) center/cover; }
.cta-photo::after { z-index: -1; right: auto; left: 0; bottom: auto; top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: linear-gradient(100deg, rgba(120, 12, 18, .95), rgba(215, 38, 46, .82) 55%, rgba(10, 10, 12, .6)); }
.page-head { position: relative; isolation: isolate; padding: 5.5rem 0 4.5rem; background: none; }
.page-head::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--ph) center/cover; }
.page-head::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10, 10, 12, .95), rgba(10, 10, 12, .75) 55%, rgba(215, 38, 46, .5)); }
.photo-frame { border-radius: 1.6rem; overflow: hidden; box-shadow: 0 30px 60px rgba(17, 17, 17, .2); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 991px) { .split-feature { grid-template-columns: 1fr; } .sf-img { min-height: 260px; } .sf-body { padding: 2rem 1.4rem; } .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .process-bg::before { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .hero-photo::before, .float-chip { animation: none; } }

@media (max-width: 767px) {
  .hero-photo { padding: 3.5rem 0 6rem; }
  .hero { padding: 3.2rem 0 5.5rem; }
  .section { padding: 3.4rem 0; }
  .wizard-steps .ws span.t { display: none; }
  .form-card { padding: 1.3rem; }
  .summary-card { position: static; }
}

/* ---------- star rating ---------- */
.star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: center; gap: .35rem; }
.star-rating input { position: absolute; opacity: 0; pointer-events: none; }
.star-rating label { font-size: 2.6rem; line-height: 1; color: #dcdce2; cursor: pointer; transition: color .15s, transform .2s; padding: 0 .1rem; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #f5a623; }
.star-rating label:hover { transform: scale(1.25) rotate(-6deg); }
.star-rating input:checked + label { animation: starpop .35s; }
.star-rating input:focus-visible + label { outline: 2px solid var(--sc-red); border-radius: 6px; }
@keyframes starpop { 50% { transform: scale(1.4); } }
.rate-text { min-height: 1.6rem; font-weight: 600; color: #8a8a93; font-family: var(--sc-font-head); }
.rate-text.on { color: var(--sc-red); }
@media (max-width: 480px) { .star-rating label { font-size: 2.1rem; } }

.map-card { border-radius: 1.2rem; overflow: hidden; box-shadow: 0 16px 40px rgba(17,17,17,.12); border: 1px solid #ececef; margin-top: 1rem; }
.map-card iframe { width: 100%; height: 100%; }