/* Homepage — rebuilt to match samarthivf.com (Elementor page 1886). Measurements in comments are from
   the live site at a 1440px viewport. */

.sv-sec--tight { margin-top: -10px; }
.sv-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sv-mt29 { margin-top: 29px; }
.sv-mt30 { margin-top: 30px; }
.sv-w60 { width: 60%; margin-top: 2px; }
.sv-w50 { width: 50%; margin-top: 0; }
.sv-eyebrow--light { color: var(--sv-ghost); }
.sv-title--light { color: #fff; }
.sv-center .sv-title { margin-bottom: 20px; }

/* 1. Hero — box 1405×693 (77vh), left 874 with 100px padding, right image 511 */
.hx { display: flex; min-height: 77vh; background: var(--hx-bg, url('/wp-content/uploads/2026/01/7240.jpg')) center / cover no-repeat; }
.hx-l { position: relative; flex: 1 1 auto; display: flex; align-items: center; padding: 100px; }
.hx-l::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0.14; border-radius: 25px 0 0 25px; }
.hx-col { position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 674px; padding: 10px; }
.hx-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px; background: var(--sv-ghost); border: 1px solid var(--sv-line); border-radius: 10px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.65; color: var(--sv-slate); }
.hx-badge svg { width: 14px; height: 14px; fill: var(--sv-purple); }
.hx-title { font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: 500; line-height: 45px; color: var(--sv-purple); margin: 0; }
.hx-title span { display: block; color: var(--sv-violet); font-weight: 700; }
.hx-rule { display: flex; align-items: center; gap: 4px; margin-top: -8px; }
.hx-rule::before { content: ''; width: 14px; height: 3px; background: radial-gradient(circle, var(--sv-accent) 1.4px, transparent 1.6px) 0 0 / 5px 3px repeat-x; }
.hx-rule i { width: 100px; height: 3px; background: var(--sv-accent); border-radius: 2px; }
.hx-intro { position: relative; width: 95%; padding: 15px 15px 15px 20px; border-left: 5px solid var(--sv-purple); border-radius: 15px; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 15px; color: var(--sv-slate); }
.hx-intro p { margin: 0; }
.hx-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.hx-r { flex: 0 0 36.37%; background: var(--hx-photo, url('/img/wp/2026/03/New-SIVF-Brand-image.png.webp')) top center / cover no-repeat; border-radius: 0 25px 25px 0; }

/* 2. Treatment strip — redesigned (not a copy of live): heading block on the left, a swipeable row of
   treatment cards on the right with round arrows and a progress bar. */
.ts { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: center; padding: 26px 0 26px 30px; background: radial-gradient(120% 140% at 0% 0%, #fae8ff 0%, var(--sv-ghost) 55%); border: 1px solid #ece6fb; }
.ts-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ts-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-violet); }
.ts-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--sv-violet); }
.ts-title { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--sv-purple); }
.ts-title span { display: block; color: var(--sv-violet); }
.ts-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--sv-purple); text-decoration: none; }
.ts-all svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.3s; }
.ts-all:hover svg { transform: translateX(4px); }
.ts-nav { display: flex; align-items: center; gap: 10px; margin-top: 14px; width: 100%; }
.ts-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(86, 48, 132, 0.25); background: #fff; color: var(--sv-purple); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s; }
.ts-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ts-btn:hover:not(:disabled) { background: var(--sv-purple); border-color: var(--sv-purple); color: #fff; }
.ts-btn:disabled { opacity: 0.35; cursor: default; }
.ts-progress { flex: 1; height: 3px; border-radius: 3px; background: rgba(86, 48, 132, 0.12); overflow: hidden; }
.ts-progress i { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--sv-grad); transition: width 0.3s, margin-left 0.3s; }
.ts-track { list-style: none; margin: 0; padding: 6px 30px 10px 4px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 4px; scrollbar-width: none; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 48px), transparent 100%); }
.ts-track::-webkit-scrollbar { display: none; }
.ts-track li { flex: 0 0 214px; scroll-snap-align: start; }
.ts-card { position: relative; height: 100%; min-height: 168px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 18px 16px; border-radius: 20px; background: #fff; border: 1px solid #ece6fb; box-shadow: 0 6px 18px -12px rgba(86, 48, 132, 0.35); text-decoration: none; overflow: hidden; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.35s; }
.ts-card::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--sv-grad); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.ts-card:hover, .ts-card:focus-visible { transform: translateY(-4px); border-color: rgba(139, 43, 137, 0.35); box-shadow: 0 16px 30px -16px rgba(86, 48, 132, 0.45); }
.ts-card:hover::after, .ts-card:focus-visible::after { transform: scaleX(1); }
.ts-n { position: absolute; top: 14px; right: 16px; font-family: 'K2D', sans-serif; font-size: 13px; font-weight: 700; color: rgba(86, 48, 132, 0.28); }
.ts-ico { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 14px; background: var(--sv-grad); box-shadow: 0 8px 16px -8px rgba(139, 43, 137, 0.6); transition: transform 0.35s; }
.ts-ico svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ts-card:hover .ts-ico { transform: rotate(-6deg) scale(1.05); }
.ts-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; color: #1d1530; }
.ts-line { font-family: 'Archivo', sans-serif; font-size: 13px; line-height: 1.4; color: #6b6680; }
.ts-go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 5px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: var(--sv-violet); opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; }
.ts-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ts-card:hover .ts-go, .ts-card:focus-visible .ts-go { opacity: 1; transform: none; }
@media (hover: none) { .ts-go { opacity: 1; transform: none; } }

/* 3. Why choose us — two 615-wide columns */
.wy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wy-l { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 10px; }
.wy-l .sv-eyebrow { margin: 0; }
.wy-h { width: 73.277%; margin-top: -18px; padding-right: 10px; }
.wy-text { margin: 0 0 -10px; font-size: 15px; }
.wy-cards { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.wy-card { display: flex; align-items: flex-start; gap: 15px; min-height: 85px; padding: 10px; background: var(--sv-ghost); border-radius: 15px; box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.36); flex-direction: row; justify-content: flex-start; align-content: center; flex-wrap: wrap; transition: transform 0.3s; }
.wy-card { align-items: center; }
.wy-card:hover { transform: translateX(8px); }
.wy-ico { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--sv-purple); }
.wy-ico--ghost { background: var(--sv-ghost); }
.wy-ico svg { width: 32px; height: 32px; }
.wy-card h3 { margin: 5px 5px 5px 0; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.3; color: #000; }
.wy-card p { margin: -2px 0 0; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.65; color: #000; }
.wy-btn svg { width: 30px; height: 30px; }
.wy-r { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 100%; }
.wy-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 4. Photo banner — 50vh, fixed background, accent overlay 15% */
.bn { min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--bn-photo, url('/img/wp/2026/06/2150795796.jpg.webp')) center / cover no-repeat; }
.bn::before { content: ''; position: absolute; inset: 0; background: var(--sv-accent); opacity: 0.15; }
@media (min-width: 1025px) { .bn { background-attachment: fixed; } }
.bn-h { position: relative; padding: 10px 20px; border-radius: 50px; box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10.5px); backdrop-filter: blur(10.5px); font-family: 'Montserrat', sans-serif; font-size: 35px; font-weight: 400; line-height: 1.3; color: var(--sv-ghost); text-align: center; }
.bn-h strong { font-weight: 700; }

/* 5. Services — dark box */
.sv-night { background: var(--sv-night); padding: 0 20px 30px; }
.sv-night .smth-services-wrap { text-align: left; }

/* 6. Specialists — 3 × 397 cards, image 320×356, floating name card */
.sp .sv-eyebrow { margin-bottom: 20px; }
.sp .sv-title { margin-top: -20px; }
.sp { padding-bottom: 10px; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-bottom: 20px; padding: 0 10px; }
.sp-card { display: flex; flex-direction: column; align-items: center; }
.sp-img { overflow: hidden; border-radius: 25px 25px 0 0; }
.sp-img img { display: block; width: auto; height: 356px; object-fit: cover; transition: transform 0.6s; }
.sp-card:hover .sp-img img { transform: scale(1.1); }
.sp-body { position: relative; width: 75%; height: 124px; margin-top: -50px; padding: 14px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); text-align: center; transition: height 0.4s ease; }
.sp-card:hover .sp-body { height: 320px; }
.sp-body h3 svg { width: 18px; height: 18px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-body h3 { font-family: 'K2D', sans-serif; font-size: 20px; font-weight: 700; line-height: 26px; color: var(--sv-purple); margin: 0 0 10px; }
.sp-body p { margin: 0; font-family: 'Archivo', sans-serif; font-size: 14px; line-height: 19px; color: var(--sv-slate); opacity: 0; transition: opacity 0.3s; }
.sp-card:hover .sp-body p, .sp-card:focus-within .sp-body p { opacity: 1; }
/* NMC: qualifications and registration stay visible under every doctor's name. */
.sp-body p.sp-reg { margin: 0 0 10px; font-size: 12px; line-height: 16px; color: #6b6680; opacity: 1; }
.sp-btn { margin-bottom: 30px; }

/* 7. Centres + map */
.ct { min-height: 53vh; display: flex; align-items: center; background: var(--sv-ghost); border: 1px solid var(--sv-purple); padding: 10px 0; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; padding: 0 10px; }
.ct-l { padding: 10px; }

/* 8. Appointment */
.bk { background: var(--sv-ghost); padding: 50px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.bk-h { width: 73.277%; max-width: 916px; margin-top: -18px; font-size: 43px; font-weight: 900; text-align: center; }
.bk-w { width: 100%; max-width: 1225px; padding: 0 10px; }

/* 9. Baby arc */
.arc { position: relative; min-height: 251px; border-bottom: 10px solid var(--sv-purple); border-radius: 286px; box-shadow: 0 67px 44px -65px rgba(114, 101, 131, 0.5); }
.arc-img { position: absolute; top: 0; left: 0; right: 0; min-height: 287px; background: var(--arc-photo, url('/img/wp/2026/01/brand-baby-.png.webp')) center / contain no-repeat; }

/* 10. FAQ — left 340 (sticky), right 840 */
.fq { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; }
.fq-l { flex: 0 0 340px; position: sticky; top: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; margin-top: 10px; }
.fq-eyebrow { margin: 5px 0 0; font-size: 14px; color: var(--sv-soft); }
.fq-eyebrow::before { background: var(--sv-soft); }
.fq-h { margin-top: -20px; font-size: 37px; }
.fq-sub { margin: -10px 0 0; font-family: 'Archivo', sans-serif; font-size: 14px; color: var(--sv-ink); }
.fq-r { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 28px 10px 10px; }
.fq-item { border-radius: 15px; background: #fff; box-shadow: 0 4px 11px -6px rgba(95, 45, 162, 0.5); }
.fq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 30px; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 400; line-height: 24px; color: var(--sv-ink); background: #f7f9fb; border-radius: 15px; }
.fq-item[open] summary { border-radius: 15px 15px 0 0; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item[open] summary { color: var(--sv-purple); }
.fq-item summary:hover { color: #4f4f55; }
.fq-ico { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 8v10h10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 8v10h10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fq-item[open] .fq-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fq-a { padding: 10px 30px; font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 24px; color: var(--sv-slate); }
.fq-a p { margin: 0; }

/* 4b. How IVF works (added 29 Oct 2026) — same ground and card language as the rest of the page */
.hw { padding: 50px 20px 40px; background: radial-gradient(90% 120% at 0% 0%, #fae8ff 0%, var(--sv-ghost) 55%); border: 1px solid #ece6fb; }
.hw-head { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 34px; text-align: center; }
.hw-intro { margin: 0; font-family: 'Archivo', sans-serif; font-size: 15px; line-height: 1.6; color: var(--sv-slate); }
.hw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: hw; }
.hw-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px 22px; border-radius: 20px; background: #fff; border: 1px solid #ece6fb; box-shadow: 0 6px 18px -12px rgba(86, 48, 132, 0.35); transition: transform 0.35s, box-shadow 0.35s; }
.hw-step:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(86, 48, 132, 0.45); }
.hw-n { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--sv-grad); font-family: 'K2D', sans-serif; font-size: 18px; font-weight: 700; color: #fff; box-shadow: 0 8px 16px -8px rgba(139, 43, 137, 0.6); }
.hw-when { margin: 0; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-violet); }
.hw-step h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1d1530; }
.hw-step p:last-child { margin: 0; font-family: 'Archivo', sans-serif; font-size: 14px; line-height: 1.6; color: var(--sv-slate); }
.hw-note { margin: 26px 0 0; font-family: 'Archivo', sans-serif; font-size: 12.5px; font-style: italic; color: #6b6680; text-align: center; }

/* 6b. Your first visit (added 29 Oct 2026) — five steps joined by a line */
.fv { display: flex; flex-direction: column; align-items: center; padding: 20px 10px 10px; }
.fv-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 36px; text-align: center; }
.fv-steps { list-style: none; position: relative; margin: 0 0 34px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.fv-steps::before { content: ''; position: absolute; left: 10%; right: 10%; top: 26px; height: 2px; background: linear-gradient(90deg, #ece6fb, var(--sv-violet), #ece6fb); }
.fv-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fv-n { position: relative; width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; background: #fff; border: 2px solid #ece6fb; font-family: 'K2D', sans-serif; font-size: 18px; font-weight: 700; color: var(--sv-purple); box-shadow: 0 6px 16px -10px rgba(86, 48, 132, 0.5); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.fv-step:hover .fv-n { background: var(--sv-grad); border-color: transparent; color: #fff; }
.fv-step h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: #1d1530; }
.fv-step p { margin: 0; font-family: 'Archivo', sans-serif; font-size: 13.5px; line-height: 1.55; color: var(--sv-slate); }

/* 8b. Latest articles (added 29 Oct 2026) */
.lb { padding: 20px 10px 10px; }
.lb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 26px; }
.lb-head .sv-eyebrow { margin-bottom: 8px; }
.lb-all { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: var(--sv-purple); text-decoration: none; white-space: nowrap; }
.lb-all svg { width: 22px; height: 22px; fill: currentColor; transition: transform 0.3s; }
.lb-all:hover svg { transform: translateX(4px); }
.lb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lb-card { height: 100%; display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid #ece6fb; overflow: hidden; text-decoration: none; box-shadow: 0 6px 18px -12px rgba(86, 48, 132, 0.35); transition: transform 0.35s, box-shadow 0.35s; }
.lb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -16px rgba(86, 48, 132, 0.45); }
.lb-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sv-ghost); }
.lb-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.lb-card:hover .lb-img img { transform: scale(1.06); }
.lb-txt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.lb-cat { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-violet); }
.lb-title { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; line-height: 1.35; color: #1d1530; }
.lb-meta { margin-top: auto; padding-top: 8px; font-family: 'Archivo', sans-serif; font-size: 12.5px; color: #6b6680; }

/* Tablet (Elementor ≤1024) */
@media (max-width: 1024px) {
  .hx { min-height: 58vh; }
  .hx-l { padding: 20px 20px 20px 35px; }
  .hx-col { max-width: 370px; }
  .hx-r { flex-basis: 40%; background-size: 511px auto; background-position: -31px -3px; }
  .ts { grid-template-columns: 210px minmax(0, 1fr); gap: 20px; padding-left: 22px; }
  .ts-title { font-size: 22px; }
  .wy-h { width: 100%; }
  /* Navya: one column and the whole video shown (it was cropped to fill the tall column) */
  .wy { grid-template-columns: 1fr; }
  .wy-r { min-height: 0; }
  .wy-video { position: static; width: 100%; height: auto; max-height: 460px; object-fit: contain; }
  .hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .fv-steps::before { display: none; }
  .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-grid li:nth-child(3) { display: none; }
}

/* Mobile (Elementor ≤767) */
@media (max-width: 767px) {
  .hx { flex-direction: column; }
  .hx-l { padding: 20px; }
  .hx-l::before { border-radius: 25px 25px 0 0; }
  .hx-title { font-size: 27px; line-height: 1.1em; }
  .hx-rule i { width: 84px; height: 2px; }
  .hx-intro { width: 100%; padding: 13px; }
  .hx-btns { flex-direction: column; align-items: flex-start; }
  .hx-r { flex: none; min-height: 522px; margin-top: -48px; border-radius: 25px; background-image: var(--hx-photo-phone, url('/img/wp/2026/03/New-SIVF-Brand-image.1.png.webp')); background-size: cover; background-position: 0 0; }
  .wy { grid-template-columns: 1fr; gap: 0; }
  .wy-l { padding: 13px; }
  .wy-h { margin-top: 0; font-size: 24px; }
  .wy-r { min-height: 0; }
  .wy-video { max-height: 340px; }
  /* Treatment strip: heading on top, then a swipe row with one and a bit cards in view */
  .ts { grid-template-columns: 1fr; gap: 16px; padding: 22px 0 18px 18px; }
  .ts-head { padding-right: 18px; }
  .ts-title span { display: inline; }
  .ts-nav { margin-top: 6px; }
  .ts-track { padding-right: 18px; }
  .ts-track li { flex-basis: 70%; }
  .hw { padding: 34px 14px 26px; }
  .hw-grid, .lb-grid { grid-template-columns: 1fr; gap: 14px; }
  .lb-grid li:nth-child(3) { display: block; }
  .lb-head { flex-direction: column; align-items: flex-start; }
  .fv-steps { grid-template-columns: 1fr; row-gap: 22px; text-align: left; }
  .fv-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; }
  .fv-n { grid-row: span 2; margin: 0; }
  .fv-step h3 { padding-top: 4px; }
  .sv-title { font-size: 24px; }
  .sv-w60, .sv-w50 { width: 100%; margin-top: 0; }
  .bn { min-height: 31vh; align-items: flex-end; }
  .bn::before { opacity: 0.21; }
  .bn-h { font-size: 15px; }
  .sv-night { padding: 20px; }
  .sp-grid { grid-template-columns: 1fr; }
  .sp-img img { height: 268px; }
  .sp-body { width: 86%; margin-top: -19px; padding: 9px; }
  .sp-card:hover .sp-body { height: 314px; }
  .ct-grid { grid-template-columns: 1fr; }
  .bk-h { width: 100%; margin-top: 0; font-size: 24px; }
  .arc { border-radius: 248px; }
  .arc-img { min-height: 191px; }
  .fq { flex-direction: column; }
  .fq-l { position: static; flex-basis: auto; width: 100%; }
  .fq-h { margin-top: 0; font-size: 24px; }
  .fq-sub { font-size: 15px; line-height: 1.2em; }
  .fq-r { width: 100%; padding-top: 0; }
  .fq-item summary { font-size: 12px; line-height: 1.3em; }
}