/* CoastLife shared components: child hero, child close, lifecycle cards.
   Converted from the Child Hero / Child Close / Lifecycle Cards canvases. */

/* ---------- Child hero ---------- */
.clh { position: relative; background: #0B1218; overflow: hidden; }
.clh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.clh-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,24,.75) 0%, rgba(11,18,24,.5) 50%, rgba(11,18,24,.85) 100%); }
.clh-inner { position: relative; max-width: 860px; margin: 0 auto; text-align: center; padding: 64px 24px 60px; color: #fff; }
.clh-crumb { font-size: 13px; color: #A8C3D1; margin-bottom: 16px; }
.clh-crumb a { color: #A8C3D1; text-decoration: none; }
.clh-crumb a:hover { color: #7FD4F0; }
.clh-crumb span { color: #F6FAFC; }
.clh-chip { display: inline-block; font-family: Sora, sans-serif; font-weight: 700; font-size: 14px; background: #FDF1E4; color: #B4570F; border-radius: 999px; padding: 8px 18px; margin-bottom: 14px; }
.clh h1 { font-family: Sora, sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 42px); letter-spacing: -.03em; line-height: 1.1; margin: 0; text-shadow: 0 2px 24px rgba(11,18,24,.5); animation: clhUp .9s cubic-bezier(.2,.7,.2,1) both; }
.clh-sub { font-size: 17px; line-height: 1.65; color: #DCE8EE; max-width: 640px; margin: 18px auto 0; animation: clhUp .9s cubic-bezier(.2,.7,.2,1) .12s both; }
.clh-actions { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; animation: clhUp .9s cubic-bezier(.2,.7,.2,1) .2s both; }
.clh-trust { font-size: 13.5px; color: #A8C3D1; margin-top: 18px; }
.clh-trust .stars { color: #F5B44E; letter-spacing: 2px; }
@keyframes clhUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .clh h1, .clh-sub, .clh-actions { animation: none; } }

/* ---------- Child close ---------- */
.clc-bridge { background: #0B1218; color: #F6FAFC; }
.clc-bridge-in { max-width: 1280px; margin: 0 auto; padding: 30px 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.clc-bridge-t { font-size: 15.5px; color: #A8C3D1; }
.clc-bridge-in a { font-family: Sora, sans-serif; font-weight: 600; font-size: 14.5px; color: #7FD4F0; text-decoration: none; }
.clc-bridge-in a:hover { color: #F6FAFC; }
.clc { background: #F6FAFC; text-align: center; padding: 68px 24px 80px; }
.clc h2 { font-family: Sora, sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.02em; margin: 0 0 26px; color: #10222E; }
.clc-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.clc-life { max-width: 1240px; margin: 60px auto 0; text-align: left; }
.clc-kicker { font-family: Sora, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #086B8E; margin-bottom: 12px; }
.btn-ghost-light { border: 1.5px solid #0C9ED0; color: #086B8E; }
.btn-ghost-light:hover { background: #E4F3F9; }

/* ---------- Lifecycle cards ---------- */
.lcg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lcg-card { position: relative; display: block; background: #fff; border: 1px solid #DCE8EE; border-radius: 14px; padding: 26px 24px; color: #10222E; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.lcg-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(11,18,24,.12); color: #10222E; }
.lcg-here { position: absolute; top: -10px; left: 12px; font-family: Sora, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: #0C9ED0; color: #fff; border-radius: 999px; padding: 5px 12px; pointer-events: none; }
.lcg-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lcg-n { font-family: Sora, sans-serif; font-weight: 700; font-size: 14px; color: #0C9ED0; }
.lcg-chip { font-family: Sora, sans-serif; font-weight: 600; font-size: 12px; background: #FDF1E4; color: #B4570F; border-radius: 999px; padding: 5px 12px; }
.lcg-t { font-family: Sora, sans-serif; font-weight: 700; font-size: 21px; margin: 8px 0 6px; }
.lcg-q { font-size: 15px; color: #4E6B7B; font-style: italic; }
.lcg-l { font-family: Sora, sans-serif; font-weight: 600; font-size: 14px; color: #0C9ED0; margin-top: 16px; }
@media (max-width: 900px) { .lcg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lcg { grid-template-columns: 1fr; } }

/* ---------- Questionnaire (qnn) ---------- */
.qnn-intro { margin-bottom: 28px; }
.qnn-intro p { color: #4E6B7B; line-height: 1.7; }
.qnn-reassure { font-size: 13.5px; color: #4E6B7B; margin-top: 14px; }
.qf-form h2 { font-family: Sora, sans-serif; font-size: 20px; margin: 30px 0 14px; color: #10222E; }
.qnn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qnn-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.qnn-group legend { font-family: var(--f-head); font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 10px; }
.qnn-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.qnn-copy { font-size: 14px; line-height: 1.65; color: #4E6B7B; margin: 0; }
.qnn-copy strong { color: #10222E; }
.qnn-details { font-size: 14px; color: #4E6B7B; }
.qnn-details summary { cursor: pointer; font-family: var(--f-head); font-weight: 600; color: var(--water-deep); }
.qnn-details ol, .qnn-details p { margin: 10px 0 0; line-height: 1.65; }
.qnn-terms { background: #F6FAFC; border: 1px solid #DCE8EE; border-radius: 12px; padding: 18px 20px; }
@media (max-width: 640px) { .qnn-row { grid-template-columns: 1fr; } }

/* ---------- Long-form service pages (svx-, inc/service-page.php) ---------- */
.svx-answer { background: var(--card); border: 1.5px solid var(--water); border-radius: 14px; padding: 22px 26px; margin: 0 0 48px; max-width: 820px; }
.svx-answer .k { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--water-deep); margin-bottom: 8px; }
.svx-answer p { font-size: 17px; line-height: 1.7; color: var(--ink); margin: 0; }
.svx-lead { font-size: 16.5px; line-height: 1.75; color: var(--ink-mid); max-width: 820px; margin: 0 0 28px; }
.svx-lead a, .svx-p a, .svx-note a { font-weight: 600; }
.svx-cards { display: grid; gap: 16px; }
.svx-cols-2 { grid-template-columns: repeat(2, 1fr); }
.svx-cols-3 { grid-template-columns: repeat(3, 1fr); }
.svx-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 24px 26px; }
.section.white .svx-card { background: var(--ground); }
.svx-card .t { font-family: var(--f-head); font-weight: 700; font-size: 17.5px; color: var(--ink); }
.svx-card .d { font-size: 15px; line-height: 1.65; color: var(--ink-mid); margin-top: 8px; }
.svx-card .d a { font-weight: 600; }
.svx-note { font-size: 15px; line-height: 1.7; color: var(--ink-mid); margin: 26px 0 0; max-width: 900px; }
.svx-table-wrap { overflow-x: auto; margin-top: 32px; max-width: 920px; }
.svx-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border: 1px solid var(--rule); }
.svx-table caption { text-align: left; font-family: var(--f-head); font-weight: 700; font-size: 16px; padding: 0 0 12px; }
.svx-table th, .svx-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.svx-table thead th { font-family: var(--f-head); font-weight: 700; background: var(--ground); }
.svx-table tbody th { font-family: var(--f-head); font-weight: 600; color: var(--ink); white-space: nowrap; }
.svx-table td { color: var(--ink-mid); }
.svx-table tbody tr:last-child th, .svx-table tbody tr:last-child td { border-bottom: none; }
.svx-steps { margin: 8px 0 0; padding-left: 22px; max-width: 820px; }
.svx-steps li { font-size: 15.5px; line-height: 1.7; color: var(--ink-mid); margin-bottom: 10px; }
.svx-steps .t { font-family: var(--f-head); font-weight: 700; color: var(--ink); }
.svx-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.svx-split:not(:has(.svx-photo)) { grid-template-columns: 1fr; }
.svx-split.flip > :first-child { order: 2; }
.svx-p { font-size: 16px; line-height: 1.75; color: var(--ink-mid); margin: 0 0 14px; }
.svx-photo { width: 100%; height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.svx-slot { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 24px; background: repeating-linear-gradient(45deg, var(--ground), var(--ground) 12px, #EAF3F7 12px, #EAF3F7 24px); border: 2px dashed var(--water); color: var(--ink-mid); }
.svx-slot .k { font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--water-deep); }
.svx-slot .f { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--ink); }
.svx-slot .d { font-size: 14px; line-height: 1.5; }
.svx-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.svx-gallery .svx-photo { height: 240px; }
.svx-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; font-size: 15px; font-weight: 600; }
.svx-area { font-size: 14.5px; color: var(--ink-mid); margin: 20px 0 0; line-height: 1.7; }
@media (max-width: 900px) {
	.svx-cols-3, .svx-cols-2, .svx-gallery { grid-template-columns: 1fr; }
	.svx-split { grid-template-columns: 1fr; gap: 28px; }
	.svx-split.flip > :first-child { order: 0; }
}
@media (max-width: 540px) { .svx-photo { height: 240px; } .svx-answer p { font-size: 16px; } }