/* CAMS Service Pages — everything is scoped under .cams-sp so the Divi theme can't restyle it (and it can't restyle Divi). */

/* ---------- colour styles (same palette as CAMS Hero Banner / Project Gallery) ---------- */
.cams-sp,
.cams-sp [data-cams-style="navy"] {
	--dk: #2C3E5E; --dk2: #243350; --dkfg: #FFFFFF; --dkmuted: #C3CCDB; --dkline: rgba(255,255,255,.14);
	--acc: #F5A623; --accfg: #1D2A40; --accdk: #F5A623; --draw: #F5A623;
	--lt: #F4F6F9; --lt2: #E9EDF3; --card: #FFFFFF; --ink: #1D2A40; --inkm: #53627A; --ltline: rgba(44,62,94,.14);
	--accink: #8A5600; --grid: rgba(255,255,255,.07);
}
.cams-sp[data-cams-style="light"],
.cams-sp [data-cams-style="light"] {
	--dk: #E9EDF3; --dk2: #DDE3EC; --dkfg: #1D2A40; --dkmuted: #53627A; --dkline: rgba(44,62,94,.16);
	--acc: #F5A623; --accfg: #1D2A40; --accdk: #8A5600; --draw: #2C3E5E;
	--lt: #FFFFFF; --lt2: #F4F6F9; --card: #F7F8FA; --ink: #1D2A40; --inkm: #53627A; --ltline: rgba(44,62,94,.14);
	--accink: #8A5600; --grid: rgba(44,62,94,.06);
}
.cams-sp[data-cams-style="charcoal"],
.cams-sp [data-cams-style="charcoal"] {
	--dk: #1E1F22; --dk2: #17181A; --dkfg: #F4F1EA; --dkmuted: #B5B0A6; --dkline: rgba(217,164,65,.22);
	--acc: #D9A441; --accfg: #17181A; --accdk: #D9A441; --draw: #D9A441;
	--lt: #F6F3EC; --lt2: #EDE8DE; --card: #FFFFFF; --ink: #1E1F22; --inkm: #5C574E; --ltline: rgba(30,31,34,.12);
	--accink: #7A5410; --grid: rgba(244,241,234,.05);
}

/* ---------- backgrounds set the local text colours ---------- */
.cams-sp-bg-plain { background: var(--lt); --fg: var(--ink); --muted: var(--inkm); --line: var(--ltline); --eye: var(--accink); --surface: var(--card); --secbg: var(--lt); }
.cams-sp-bg-tint  { background: var(--lt2); --fg: var(--ink); --muted: var(--inkm); --line: var(--ltline); --eye: var(--accink); --surface: var(--card); --secbg: var(--lt2); }
.cams-sp-bg-dark  { background: var(--dk); --fg: var(--dkfg); --muted: var(--dkmuted); --line: var(--dkline); --eye: var(--accdk); --surface: var(--dk2); --secbg: var(--dk); }

/* ---------- base and Divi-proofing ---------- */
body .cams-sp { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body .cams-sp *, body .cams-sp *::before, body .cams-sp *::after { box-sizing: border-box; }
body .cams-sp h1, body .cams-sp h2, body .cams-sp h3,
body .cams-sp p, body .cams-sp ul, body .cams-sp ol, body .cams-sp li, body .cams-sp figure { margin: 0; padding: 0; }
body .cams-sp h1, body .cams-sp h2, body .cams-sp h3 { font-family: "Manrope", system-ui, sans-serif; color: var(--fg); letter-spacing: -.015em; text-wrap: balance; text-transform: none; }
body .cams-sp ul, body .cams-sp ol { list-style: none; }
body .cams-sp img { max-width: 100%; height: auto; display: block; }
body .cams-sp a { color: inherit; }
body .cams-sp a:focus-visible, body .cams-sp button:focus-visible, body .cams-sp summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.cams-sp-sec { position: relative; overflow: hidden; color: var(--fg); padding: clamp(64px, 8vw, 96px) 0; }
/* Two blocks in a row on the same background share one gap instead of two. */
.cams-sp-bg-plain + .cams-sp-bg-plain:not([data-cams-style]),
.cams-sp-bg-tint + .cams-sp-bg-tint:not([data-cams-style]) { padding-top: 0; }
.cams-sp-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.cams-sp--full .cams-sp-sec { width: var(--cams-vw, 100vw); max-width: none; margin-left: calc(50% - var(--cams-vw, 100vw) / 2); }
.cams-sp-acc { font-style: normal; color: var(--eye); }

/* ---------- shared pieces ---------- */
body .cams-sp .cams-sp-eyebrow { font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--eye); display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.cams-sp-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
body .cams-sp .cams-sp-h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; font-weight: 800; }
body .cams-sp .cams-sp-h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; }
body .cams-sp .cams-sp-h3 { font-size: 18px; line-height: 1.3; font-weight: 800; }
body .cams-sp .cams-sp-intro { color: var(--muted); font-size: 16px; max-width: 62ch; }
.cams-sp-intro a, .cams-sp-card-text a, .cams-sp-faq-a a, .cams-sp-body a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cams-sp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.cams-sp-head-main { display: flex; flex-direction: column; gap: 14px; max-width: 680px; flex: 1 1 420px; }
.cams-sp-head-aside { flex: 0 1 auto; max-width: 100%; }
.cams-sp-head-aside .cams-sp-intro { max-width: 46ch; font-size: 15px; }

.cams-sp-btns { display: flex; flex-wrap: wrap; gap: 12px; }
body .cams-sp .cams-sp-btn { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.2; padding: 13px 22px; min-height: 44px; border-radius: var(--cams-btn-r, 4px); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform .15s ease, background-color .2s, color .2s; }
body .cams-sp .cams-sp-btn:hover { transform: translateY(-1px); }
body .cams-sp .cams-sp-btn--main { background: var(--acc); color: var(--accfg); border: 1.5px solid var(--acc); }
body .cams-sp .cams-sp-btn--line { border: 1.5px solid var(--line); color: var(--fg); background: transparent; }
body .cams-sp .cams-sp-btn--line:hover { border-color: var(--acc); }

.cams-sp-grid-bg { position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.cams-sp-grid-bg--rev { -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 70%); mask-image: linear-gradient(270deg, transparent 0%, #000 70%); }

.cams-sp-ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* line drawings */
.cams-sp-dwg { width: 100%; height: 100%; display: block; }
.cams-sp-dwg .d { stroke: var(--draw); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cams-sp-dwg .d2 { stroke: var(--dkmuted); fill: none; stroke-width: 1; opacity: .7; }
.cams-sp-dwg .t { fill: var(--dkmuted); font: 500 9.5px "Inter", sans-serif; letter-spacing: .06em; }
.cams-sp-dwg .t2 { opacity: .7; }
.cams-sp-dwg .fl { fill: var(--draw); opacity: .12; }
.cams-sp-bg-plain .cams-sp-dwg .d2, .cams-sp-bg-tint .cams-sp-dwg .d2 { stroke: var(--dkmuted); }

/* ---------- hero ---------- */
.cams-sp-t-hero { padding: 0; }
.cams-sp-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cams-sp-brand { font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--fg); }
.cams-sp-top-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
body .cams-sp .cams-sp-tel { color: var(--fg); font-weight: 500; text-decoration: none; }
body .cams-sp .cams-sp-comm { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; min-height: 36px; border-radius: var(--cams-pill-r, 999px); border: 1.5px solid var(--acc); text-decoration: none; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12.5px; color: var(--fg); transition: background-color .2s, color .2s; }
.cams-sp-comm .cams-sp-ico { color: var(--eye); }
body .cams-sp .cams-sp-comm:hover { background: var(--acc); color: var(--accfg); }
body .cams-sp .cams-sp-comm:hover .cams-sp-ico { color: var(--accfg); }

.cams-sp-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding: clamp(40px, 6vw, 64px) 0 52px; }
.cams-sp-hero-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cams-sp-hero-row--solo .cams-sp-hero-copy { max-width: 820px; }
body .cams-sp .cams-sp-lede { font-size: 17px; color: var(--muted); max-width: 56ch; }
.cams-sp-hero-copy .cams-sp-btns { margin-top: 4px; }
.cams-sp-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--muted); padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--line); }
.cams-sp-trust strong { color: var(--fg); font-weight: 600; }
body .cams-sp .cams-sp-trust a { text-decoration: none; }
.cams-sp-stars { position: relative; display: inline-block; color: var(--line); letter-spacing: 1px; }
.cams-sp-bg-dark .cams-sp-stars { color: rgba(127,127,127,.45); }
.cams-sp-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--acc); }

.cams-sp-sheet { flex: 1 1 380px; min-width: 0; position: relative; border: 1px solid var(--line); border-radius: var(--cams-r2, 4px); background: var(--surface); aspect-ratio: 4 / 3; overflow: hidden; }
.cams-sp-sheet-img { width: 100%; height: 100% !important; object-fit: cover; }
.cams-sp-tag { position: absolute; right: 0; bottom: 0; display: flex; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--dk); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cams-sp-tag span { padding: 5px 10px; }
.cams-sp-tag span + span { border-left: 1px solid var(--line); color: var(--fg); }

.cams-sp-jump { position: relative; border-top: 1px solid var(--line); background: var(--dk); }
.cams-sp-jump .cams-sp-in { display: flex; flex-wrap: wrap; gap: 0 32px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; }
body .cams-sp .cams-sp-jump a { padding: 16px 0; min-height: 44px; color: var(--muted); text-decoration: none; transition: color .2s; }
body .cams-sp .cams-sp-jump a:hover { color: var(--fg); }
.cams-sp-jump-n { font-size: 12px; opacity: .8; }
body .cams-sp .cams-sp-jump .cams-sp-jump-cta { color: var(--eye); }
.cams-sp-banner { position: relative; }

/* ---------- cards ---------- */
.cams-sp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
body .cams-sp .cams-sp-pill { appearance: none; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.2; padding: 10px 16px; min-height: 44px; border-radius: var(--cams-pill-r, 999px); border: 1.5px solid var(--line); background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s, color .2s, border-color .2s; }
.cams-sp-pill span { font-size: 11.5px; opacity: .75; }
body .cams-sp .cams-sp-pill:hover { border-color: var(--fg); color: var(--fg); }
body .cams-sp .cams-sp-pill.is-on { background: var(--fg); border-color: var(--fg); color: var(--lt); }
body .cams-sp .cams-sp-bg-dark .cams-sp-pill.is-on { color: var(--dk); }

.cams-sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
@media (min-width: 900px) {
	.cams-sp-cols-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cams-sp-cols-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .cams-sp-cols-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cams-sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s; }
.cams-sp-card:hover { border-color: var(--acc); transform: translateY(-2px); }
.cams-sp-card[hidden] { display: none; }
.cams-sp-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cams-sp-card-ico { width: 46px; height: 46px; border-radius: var(--cams-r2, 4px); background: var(--dk); color: var(--accdk); display: grid; place-items: center; }
.cams-sp-bg-dark .cams-sp-card-ico { background: var(--dk); border: 1px solid var(--line); }
.cams-sp-card-img { width: calc(100% + 52px) !important; max-width: none !important; margin: -26px -26px 0; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--cams-r, 6px) var(--cams-r, 6px) 0 0; }
.cams-sp-card-grp { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
body .cams-sp .cams-sp-card-text { font-size: 14.5px; color: var(--muted); }
.cams-sp-ticks { padding-top: 14px !important; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cams-sp-ticks li { display: flex; gap: 10px; align-items: baseline; }
.cams-sp-ticks li::before { content: ""; width: 6px; height: 6px; background: var(--acc); flex: none; transform: translateY(-2px); }
body .cams-sp .cams-sp-more { margin-top: auto; padding-top: 6px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--fg); }
body .cams-sp .cams-sp-more:hover { color: var(--eye); }

/* ---------- text + picture ---------- */
.cams-sp-split { display: flex; flex-wrap: wrap; overflow: hidden; }
.cams-sp-split--boxed { border: 1px solid var(--line); border-radius: var(--cams-r, 6px); background: var(--surface); }
.cams-sp-split--right .cams-sp-split-pic { order: 2; }
.cams-sp-split-pic { flex: 1 1 360px; min-height: 240px; display: flex; }
.cams-sp-split-dwg { flex: 1; display: grid; place-items: center; padding: 32px; background-color: var(--dk2); --grid: rgba(127,140,160,.12);
	background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.cams-sp-split-dwg .cams-sp-dwg { max-width: 340px; height: auto; }
.cams-sp-split-img { width: 100%; height: 100% !important; object-fit: cover; }
.cams-sp-split-copy { flex: 1 1 440px; padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.cams-sp-split:not(.cams-sp-split--boxed) .cams-sp-split-copy { padding-block: 8px; }
.cams-sp-split-copy .cams-sp-head { margin-bottom: 0; }
.cams-sp-split-copy .cams-sp-h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.cams-sp-split--solo .cams-sp-split-copy { padding: clamp(28px, 4vw, 44px); }

/* ---------- steps ---------- */
.cams-sp-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--line); counter-reset: none; }
body .cams-sp .cams-sp-step { padding: 26px 24px 30px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cams-sp-step-n { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 13px; color: var(--eye); letter-spacing: .1em; }
body .cams-sp .cams-sp-step p { font-size: 14px; color: var(--muted); }

/* ---------- photos ---------- */
.cams-sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 230px; gap: 16px; }
.cams-sp-tile { position: relative; overflow: hidden; border-radius: var(--cams-r, 6px); background: var(--dk2); }
.cams-sp-tile:first-child { grid-row: span 2; }
.cams-sp-tile a { display: block; height: 100%; }
.cams-sp-tile-img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .4s ease; }
.cams-sp-tile:hover .cams-sp-tile-img { transform: scale(1.03); }
.cams-sp-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 14px; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #FFFFFF; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px; }
.cams-sp-tile figcaption span { font-weight: 500; opacity: .85; }
.cams-sp-embed { position: relative; }

/* ---------- points ---------- */
.cams-sp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--fg); }
.cams-sp-point { padding: 26px 26px 10px 0; display: flex; flex-direction: column; gap: 10px; }
.cams-sp-point-ico { color: var(--eye); }
body .cams-sp .cams-sp-point p { font-size: 14.5px; color: var(--muted); }

/* ---------- numbers ---------- */
.cams-sp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.cams-sp-stat { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 2px solid var(--acc); }
.cams-sp-stat-n { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.cams-sp-stat-l { font-size: 14.5px; color: var(--muted); }

/* ---------- questions ---------- */
.cams-sp-faq-wrap { display: flex; flex-wrap: wrap; gap: 48px; }
.cams-sp-faq-wrap > .cams-sp-head { flex: 1 1 300px; margin: 0; align-items: flex-start; }
.cams-sp-faqs { flex: 2 1 520px; min-width: 0; border-top: 1px solid var(--line); }
.cams-sp-faq { border-bottom: 1px solid var(--line); }
body .cams-sp .cams-sp-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; min-height: 44px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 17px; color: var(--fg); }
.cams-sp-faq summary::-webkit-details-marker { display: none; }
.cams-sp-plus { flex: none; fill: none; stroke: var(--eye); stroke-width: 2; stroke-linecap: round; transition: transform .2s; }
.cams-sp-faq[open] .cams-sp-plus { transform: rotate(45deg); }
body .cams-sp .cams-sp-faq-a p { padding: 0 40px 24px 0; color: var(--muted); font-size: 15px; }

/* ---------- call to action ---------- */
.cams-sp-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 40px; }
.cams-sp-cta-main { flex: 1 1 520px; display: flex; flex-direction: column; gap: 4px; }
.cams-sp-cta-main .cams-sp-head { margin-bottom: 20px; }
.cams-sp-cta-main .cams-sp-h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; }
.cams-sp-contact { flex: 0 1 340px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--cams-r, 6px); background: var(--surface); }
body .cams-sp .cams-sp-contact a { padding: 18px 22px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; color: var(--fg); }
.cams-sp-contact a + a { border-top: 1px solid var(--line); }
.cams-sp-contact span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cams-sp-contact strong { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.cams-sp-acc-t { color: var(--eye); }

/* ---------- text ---------- */
.cams-sp-text { max-width: 760px; }
.cams-sp-text--center { margin: 0 auto; text-align: center; }
.cams-sp-text--center .cams-sp-head-main { align-items: center; margin: 0 auto; }
.cams-sp-text .cams-sp-head { margin-bottom: 20px; }
.cams-sp-body { color: var(--muted); font-size: 16px; }
body .cams-sp .cams-sp-body p + p { margin-top: 1em; }


/* ---------- anything hidden stays hidden, whatever the theme says ---------- */
.cams-sp [hidden] { display: none !important; }

/* ---------- sample BOQ sheet (hero) ---------- */
.cams-sp-boq { flex: 1 1 460px; min-width: 0; border: 1px solid var(--line); border-radius: var(--cams-r2, 4px); background: var(--surface); }
.cams-sp-boq-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cams-sp-boq-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cams-sp-boq-badge { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--eye); border: 1px solid var(--eye); border-radius: 3px; padding: 2px 6px; }
.cams-sp-boq-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 0 8px; border-bottom: 1px solid var(--line); }
body .cams-sp .cams-sp-boq-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12.5px; line-height: 1.3; padding: 11px 12px; min-height: 42px; color: var(--muted); }
body .cams-sp .cams-sp-boq-tab:hover { color: var(--fg); }
body .cams-sp .cams-sp-boq-tab.is-on { color: var(--fg); border-bottom-color: var(--acc); }
body .cams-sp .cams-sp-boq table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 13px; font-variant-numeric: tabular-nums; table-layout: auto; }
body .cams-sp .cams-sp-boq th, body .cams-sp .cams-sp-boq td { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--fg); background: none; font-weight: 400; }
body .cams-sp .cams-sp-boq th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
body .cams-sp .cams-sp-boq td:first-child, body .cams-sp .cams-sp-boq td:last-child { color: var(--muted); }
body .cams-sp .cams-sp-boq .cams-sp-num { text-align: right; }
body .cams-sp .cams-sp-boq-note { padding: 12px 14px; font-size: 12px; color: var(--muted); }

/* ---------- option picker ---------- */
.cams-sp-pick-btns { margin: -8px 0 24px; }
.cams-sp-pick-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; }
.cams-sp-pick-col { padding: 28px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--line); }
.cams-sp-pick-col--last { border-right: 0; background: var(--lt); }
.cams-sp-bg-tint .cams-sp-pick-col--last, .cams-sp-bg-dark .cams-sp-pick-col--last { background: transparent; }
.cams-sp-pick-h { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--eye); }
body .cams-sp .cams-sp-pick-title { font-size: 22px; }
body .cams-sp .cams-sp-pick-col p { color: var(--muted); font-size: 15px; }
.cams-sp-pick-list { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.cams-sp-pick-list li { display: flex; gap: 10px; align-items: baseline; }
.cams-sp-pick-list li::before { content: ""; width: 6px; height: 6px; background: var(--acc); flex: none; transform: translateY(-2px); }
.cams-sp-pick-list li.is-tick::before { content: "✓"; width: auto; height: auto; background: none; color: var(--eye); font-weight: 700; transform: none; }
.cams-sp-pick-col--last .cams-sp-btn { margin-top: auto; align-self: flex-start; }

/* ---------- fee calculator ---------- */
.cams-sp-calc { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; background: var(--surface); }
.cams-sp-calc-in { flex: 1 1 480px; min-width: 0; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.cams-sp-calc-in .cams-sp-head { margin-bottom: 0; }
.cams-sp-calc-in .cams-sp-h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.cams-sp-calc-segs { display: flex; flex-wrap: wrap; gap: 12px; }
.cams-sp-seg { display: inline-flex; gap: 2px; border: 1.5px solid var(--line); border-radius: var(--cams-pill-r, 999px); padding: 3px; }
body .cams-sp .cams-sp-seg button { appearance: none; background: none; border: 0; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.2; padding: 10px 16px; min-height: 40px; border-radius: var(--cams-pill-r, 999px); color: var(--muted); }
body .cams-sp .cams-sp-seg button.is-on { background: var(--fg); color: var(--surface); }
.cams-sp-calc-total { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--fg); }
body .cams-sp .cams-sp-calc input { font-family: "Manrope", sans-serif; color: var(--fg); background: var(--lt); border: 1.5px solid var(--line); border-radius: var(--cams-r2, 4px); padding: 10px 14px; min-height: 44px; margin: 0; box-shadow: none; max-width: 100%; }
body .cams-sp .cams-sp-calc input:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
body .cams-sp .cams-sp-calc [data-total] { font-size: 22px; font-weight: 700; width: 220px; }
.cams-sp-calc-fhead, .cams-sp-calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; gap: 8px; align-items: center; }
.cams-sp-calc-fhead { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cams-sp-calc-rows { display: flex; flex-direction: column; gap: 8px; }
body .cams-sp .cams-sp-calc-name { font: 600 15px "Inter", sans-serif; background: var(--surface); min-width: 0; width: 100%; }
body .cams-sp .cams-sp-calc-area { font-weight: 700; font-size: 17px; width: 100%; }
body .cams-sp .cams-sp-calc-rm { appearance: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); border-radius: var(--cams-r2, 4px); padding: 0; }
body .cams-sp .cams-sp-calc-rm:hover { color: var(--fg); background: var(--lt); }
.cams-sp-calc-rm svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body .cams-sp .cams-sp-calc-add { appearance: none; background: none; border: 0; cursor: pointer; align-self: flex-start; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; color: var(--eye); padding: 10px 2px; min-height: 44px; margin-top: 4px; }
body .cams-sp .cams-sp-calc-sum { font-size: 14px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--line); }
body .cams-sp .cams-sp-calc-other { font-size: 13.5px; color: var(--muted); }
.cams-sp-calc-out { position: relative; flex: 1 1 340px; background: var(--dk); color: var(--dkfg); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 8px; --grid: rgba(255,255,255,.07); }
.cams-sp-calc-out > * { position: relative; }
.cams-sp-calc-out .cams-sp-grid-bg { position: absolute; -webkit-mask-image: none; mask-image: none; }
.cams-sp-calc-label { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accdk); }
.cams-sp-calc-fee { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(38px, 4.6vw, 54px); line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cams-sp-calc-usd { font-size: 16px; color: var(--dkmuted); font-variant-numeric: tabular-nums; }
body .cams-sp .cams-sp-calc-small { font-size: 12.5px; color: var(--dkmuted); padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--dkline); }
.cams-sp-calc-out .cams-sp-btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 640px) {
	.cams-sp-path-steps li { grid-template-columns: 28px minmax(0, 1fr); }
	.cams-sp-path-steps a { grid-column: 2; }
	.cams-sp-calc-fhead, .cams-sp-calc-row { grid-template-columns: minmax(0, 1fr) 110px 44px; }
	.cams-sp-pick-col { border-right: 0; border-bottom: 1px solid var(--line); }
}


/* ---------- where are you starting? ---------- */
.cams-sp-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 16px; }
body .cams-sp .cams-sp-path { border-radius: var(--cams-r, 6px); padding: 18px 20px; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--surface); border: 1.5px solid var(--line); color: var(--fg); }
body .cams-sp .cams-sp-path:hover { border-color: var(--fg); }
body .cams-sp .cams-sp-path.is-on { background: var(--fg); border-color: var(--fg); color: var(--surface); }
.cams-sp-path .cams-sp-path-l { font-size: 16.5px; font-weight: 800; opacity: 1; }
.cams-sp-path .cams-sp-path-s { font-family: "Inter", sans-serif; font-weight: 400; font-size: 13.5px; color: var(--muted); opacity: 1; }
.cams-sp-path.is-on .cams-sp-path-s { color: inherit; opacity: .8; }
.cams-sp-path-panel { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); padding: 28px; }
.cams-sp-path-ans { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
body .cams-sp .cams-sp-path-ans p { color: var(--muted); font-size: 15px; }
.cams-sp-path-steps { flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; }
body .cams-sp .cams-sp-path-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--lt); border-radius: var(--cams-r2, 4px); }
body .cams-sp .cams-sp-bg-tint .cams-sp-path-steps li { background: var(--lt2); }
body .cams-sp .cams-sp-bg-dark .cams-sp-path-steps li { background: var(--dk); border: 1px solid var(--line); }
.cams-sp-path-n { width: 26px; height: 26px; border-radius: 50%; background: var(--fg); color: var(--surface); display: grid; place-items: center; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 12px; }
.cams-sp-path-t { font-size: 14.5px; font-weight: 600; }
body .cams-sp .cams-sp-path-steps a { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13.5px; color: var(--eye); text-decoration: none; white-space: nowrap; }

/* ---------- house plans ---------- */
.cams-sp-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
body .cams-sp .cams-sp-plan { padding: 0; gap: 0; overflow: hidden; text-decoration: none; color: var(--fg); }
.cams-sp-plan-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--lt2); height: auto !important; }
.cams-sp-plan-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.cams-sp-plan-name { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 18px; }
.cams-sp-plan-facts { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cams-sp-plans-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
body .cams-sp .cams-sp-plans-foot p { font-size: 13px; color: var(--muted); }

/* ---------- reviews ---------- */
.cams-sp-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.cams-sp-review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.cams-sp-review-stars { color: var(--acc); letter-spacing: 2px; }
.cams-sp-review-off { color: var(--line); }
.cams-sp-bg-dark .cams-sp-review-off { color: rgba(127,127,127,.45); }
body .cams-sp .cams-sp-review blockquote { margin: 0; padding: 0; border: 0; font-size: 15.5px; font-style: normal; color: var(--fg); quotes: none; }
.cams-sp-review blockquote::before, .cams-sp-review blockquote::after { content: none; }
.cams-sp-review figcaption { margin-top: auto; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; }
.cams-sp-review figcaption span { font-weight: 500; color: var(--muted); }
.cams-sp-review-rating { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14.5px; }

/* ---------- text + checklist ---------- */
.cams-sp-split-list { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px !important; background-color: var(--dk); color: var(--dkfg); font-size: 15px;
	background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 32px 32px; }
.cams-sp-split-list li { display: flex; gap: 12px; }
.cams-sp-split-list li::before { content: "✓"; color: var(--accdk); font-weight: 700; }


/* ---------- design styles: Blueprint (default), Showcase, Ledger — set per page or per block ---------- */
.cams-sp-sec[data-cams-design="showcase"] { --cams-r: 16px; --cams-r2: 10px; --cams-btn-r: 999px; --cams-pill-r: 999px; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-eyebrow::before { display: none; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-card,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-review,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-split--boxed,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-calc,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-pick-panel,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-path-panel { border-color: transparent; box-shadow: 0 14px 36px rgba(29, 42, 64, .09); }
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-card,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-review { box-shadow: none; border-color: var(--line); }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-grid-bg { display: none; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-sheet,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-boq { border-radius: 18px; overflow: hidden; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-card-ico { border-radius: 12px; }

.cams-sp-sec[data-cams-design="ledger"] { --cams-r: 0; --cams-r2: 0; --cams-btn-r: 0; --cams-pill-r: 0; }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-eyebrow::before { width: 8px; height: 8px; background: var(--acc); }
body .cams-sp .cams-sp-sec[data-cams-design="ledger"] .cams-sp-h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -.025em; }
body .cams-sp .cams-sp-sec[data-cams-design="ledger"] .cams-sp-h1 { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -.03em; }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-card,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-review { border-top: 3px solid var(--acc); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-split--boxed,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-calc,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-pick-panel,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-path-panel { border-color: var(--fg); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-card-ico { background: transparent; border: 1.5px solid var(--acc); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-points { border-top-width: 3px; }

/* =====================================================================
   Interactive blocks (from the Showcase and Ledger designs).
   They follow the page's colour style and design style like every block.
   ===================================================================== */
body .cams-sp .cams-sp-h2--big { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; }
body .cams-sp .cams-sp-sec[data-cams-design="ledger"] .cams-sp-h2--big { font-size: clamp(38px, 5.4vw, 70px); line-height: 1.02; }

/* small choice buttons */
.cams-sp-opts { display: flex; flex-wrap: wrap; gap: 6px; }
body .cams-sp .cams-sp-opt { appearance: none; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; padding: 9px 13px; min-height: 40px; border-radius: var(--cams-r2, 4px); border: 1.5px solid var(--line); background: transparent; color: var(--muted); display: inline-flex; align-items: center; transition: background-color .2s, color .2s, border-color .2s; }
body .cams-sp .cams-sp-opt:hover { border-color: var(--fg); color: var(--fg); }
body .cams-sp .cams-sp-opt.is-on { background: var(--fg); border-color: var(--fg); color: var(--surface); }

/* arrows */
.cams-sp-arrs { display: flex; gap: 8px; }
body .cams-sp .cams-sp-arr { appearance: none; cursor: pointer; width: 44px; height: 44px; padding: 0; border-radius: var(--cams-pill-r, 999px); border: 1.5px solid var(--line); background: transparent; color: var(--fg); display: grid; place-items: center; transition: border-color .2s; }
body .cams-sp .cams-sp-arr:hover { border-color: var(--fg); }
.cams-sp-arr svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- service explorer ---------- */
.cams-sp-xp { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; }
.cams-sp-xp-list { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
body .cams-sp .cams-sp-xp-tab { appearance: none; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 48px; border: 0; border-radius: var(--cams-r2, 4px); background: transparent; text-align: left; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--muted); transition: background-color .2s, color .2s; }
.cams-sp-xp-tab .cams-sp-ico { flex: none; }
body .cams-sp .cams-sp-xp-tab:hover { background: var(--line); color: var(--fg); }
body .cams-sp .cams-sp-xp-tab.is-on { background: var(--dk); color: var(--dkfg); }
.cams-sp-xp-tab.is-on .cams-sp-ico { color: var(--accdk); }
body .cams-sp .cams-sp-bg-dark .cams-sp-xp-tab.is-on { background: var(--acc); color: var(--accfg); }
.cams-sp-bg-dark .cams-sp-xp-tab.is-on .cams-sp-ico { color: var(--accfg); }
.cams-sp-xp-panels { flex: 2 1 560px; min-width: 0; display: flex; }
.cams-sp-xp-panel { flex: 1; display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; }
.cams-sp-xp-pic { flex: 1 1 280px; min-height: 280px; background: var(--lt2); display: grid; place-items: center; position: relative; }
.cams-sp-bg-tint .cams-sp-xp-pic { background: var(--lt); }
.cams-sp-bg-dark .cams-sp-xp-pic { background: var(--dk); }
.cams-sp-xp-img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.cams-sp-xp-ico { width: 120px; height: 120px; border-radius: var(--cams-r, 6px); background: var(--dk); color: var(--accdk); display: grid; place-items: center; }
.cams-sp-bg-dark .cams-sp-xp-ico { background: var(--dk2); border: 1px solid var(--line); }
.cams-sp-xp-ico .cams-sp-ico { stroke-width: 1.2; }
.cams-sp-xp-copy { flex: 1 1 300px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
body .cams-sp .cams-sp-xp-title { font-size: 26px; line-height: 1.2; }
body .cams-sp .cams-sp-xp-copy p { color: var(--muted); font-size: 15.5px; }
.cams-sp-xp-copy .cams-sp-btn { align-self: flex-start; margin-top: auto; }

/* ---------- journey ---------- */
.cams-sp-jr-line { position: relative; display: flex; overflow-x: auto; padding: 2px 0 6px; margin-bottom: 28px; scrollbar-width: thin; }
.cams-sp-jr-line::before { content: ""; position: absolute; left: 48px; right: 48px; top: 10px; height: 2px; background: var(--line); min-width: calc(var(--cams-n, 6) * 96px - 96px); }
body .cams-sp .cams-sp-jr-tab { appearance: none; cursor: pointer; position: relative; flex: 1 1 0; min-width: 96px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px; background: none; border: 0; text-align: center; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--muted); }
body .cams-sp .cams-sp-jr-tab:hover, body .cams-sp .cams-sp-jr-tab.is-on { color: var(--fg); }
.cams-sp-jr-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fg); background: var(--secbg, var(--lt)); transition: transform .2s, background-color .2s; }
.cams-sp-jr-tab.is-done .cams-sp-jr-dot { background: var(--fg); }
.cams-sp-jr-tab.is-on .cams-sp-jr-dot { background: var(--acc); border-color: var(--acc); transform: scale(1.25); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-jr-dot { border-radius: 0; }
.cams-sp-jr-panel { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; }
.cams-sp-jr-copy { flex: 2 1 420px; padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 12px; }
body .cams-sp .cams-sp-jr-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
body .cams-sp .cams-sp-jr-copy p { color: var(--muted); font-size: 16px; max-width: 60ch; }
.cams-sp-jr-copy .cams-sp-btn { align-self: flex-start; margin-top: 6px; }
.cams-sp-jr-side { flex: 1 1 240px; background: var(--dk); color: var(--dkfg); padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.cams-sp-bg-dark .cams-sp-jr-side { background: var(--dk); border-left: 1px solid var(--line); }
.cams-sp-jr-k { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cams-sp-jr-side .cams-sp-jr-k { color: var(--dkmuted); }
.cams-sp-jr-v { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 20px; line-height: 1.3; }
.cams-sp-jr-v--acc { color: var(--accdk); }

/* ---------- two-way choice ---------- */
.cams-sp-head--wide .cams-sp-head-main { max-width: 900px; }
.cams-sp-ch { display: flex; flex-wrap: wrap; gap: 12px; }
.cams-sp-ch-panel { position: relative; overflow: hidden; flex: 1 1 340px; min-width: 0; min-height: 420px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; background: var(--dk2); color: var(--dkfg); border: 1px solid var(--dkline); border-radius: var(--cams-r, 6px); transition: flex-grow .45s ease; }
.cams-sp-bg-dark .cams-sp-ch-panel { border-color: var(--line); }
.cams-sp-ch-bg { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; opacity: .16; filter: grayscale(1); pointer-events: none; }
body .cams-sp .cams-sp-ch-pick { appearance: none; cursor: pointer; position: relative; background: none; border: 0; padding: 0; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 10px; min-height: 44px; }
.cams-sp-ch-eye { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accdk); }
.cams-sp-ch-title { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); line-height: 1; letter-spacing: -.02em; }
.cams-sp-ch-more { position: relative; display: flex; flex-direction: column; gap: 18px; }
.cams-sp-ch-items { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: var(--dkmuted); }
.cams-sp-ch-more .cams-sp-btn { align-self: flex-start; }
.cams-sp-ch-panel:not(.is-on) .cams-sp-ch-title { opacity: .75; }
.cams-sp-ch + .cams-sp-trust { margin-top: 20px; border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
	.cams-sp-ch { flex-wrap: nowrap; }
	.cams-sp-ch-panel { flex: 1 1 0; }
	.cams-sp-ch-panel.is-on { flex-grow: 2; }
}

/* ---------- house plan finder and estimate finder ---------- */
.cams-sp-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.cams-sp-pf--top { align-items: flex-start; }
.cams-sp-pf-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cams-sp-pf-copy .cams-sp-head { margin-bottom: 0; }
.cams-sp-pf-copy .cams-sp-trust { margin-top: 0; }
.cams-sp-pf-side { flex: 1 1 480px; min-width: 0; position: relative; }
.cams-sp-pf-photo { width: 100%; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; border-radius: var(--cams-r, 6px); }
.cams-sp-pf-box, .cams-sp-fd-box { --fg: var(--ink); --muted: var(--inkm); --line: var(--ltline); --surface: var(--card); --eye: var(--accink);
	position: relative; background: var(--card); color: var(--ink); border: 1px solid var(--ltline); border-radius: var(--cams-r, 6px); box-shadow: 0 18px 40px rgba(29, 42, 64, .12); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cams-sp-fd-box { padding: clamp(22px, 3vw, 28px); gap: 22px; }
.cams-sp-pf-side.has-photo .cams-sp-pf-box { margin: -110px 20px 0 auto; max-width: 400px; }
.cams-sp-pf-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
body .cams-sp .cams-sp-pf-top .cams-sp-h3 { font-size: 18px; color: var(--ink); }
.cams-sp-pf-count { font-size: 12.5px; color: var(--muted); }
body .cams-sp .cams-sp-pf-hit { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; text-decoration: none; background: var(--lt2); border-radius: var(--cams-r2, 4px); padding: 8px; color: var(--ink); transition: transform .2s; }
body .cams-sp .cams-sp-pf-hit:hover { transform: translateY(-1px); }
.cams-sp-pf-hit img { width: 92px; height: 69px !important; object-fit: cover; border-radius: var(--cams-r2, 4px); }
.cams-sp-pf-hit > span { display: flex; flex-direction: column; min-width: 0; }
.cams-sp-pf-hit strong { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 800; }
.cams-sp-pf-hit span span { font-size: 12.5px; color: var(--muted); }
body .cams-sp .cams-sp-pf-more { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--accink); }
body .cams-sp .cams-sp-pf-none { font-size: 13.5px; color: var(--muted); background: var(--lt2); border-radius: var(--cams-r2, 4px); padding: 12px; }
.cams-sp-pf-none a { color: var(--ink); font-weight: 700; }

.cams-sp-fd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
.cams-sp-fd-tile { border-top: 3px solid var(--acc); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.cams-sp-fd-tile:nth-child(3n+2) { border-top-color: var(--fg); }
.cams-sp-fd-tile:nth-child(3n) { border-top-color: var(--muted); }
.cams-sp-fd-tile strong { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 800; }
.cams-sp-fd-tile span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.cams-sp-fd-q { display: flex; flex-direction: column; gap: 10px; }
.cams-sp-fd-ql { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; }
.cams-sp-fd-res { border-radius: var(--cams-r2, 4px); background: var(--dk); color: var(--dkfg); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
body .cams-sp .cams-sp-fd-res .cams-sp-h3 { font-size: 22px; color: var(--dkfg); }
body .cams-sp .cams-sp-fd-res p { font-size: 14.5px; color: var(--dkmuted); }
body .cams-sp .cams-sp-fd-res .cams-sp-fd-note { color: var(--dkfg); background: rgba(245, 166, 35, .14); border-left: 3px solid var(--acc); padding: 10px 12px; font-size: 14px; }
.cams-sp-fd-note a { color: var(--accdk); font-weight: 700; }
body .cams-sp .cams-sp-fd-reset { appearance: none; background: none; border: 0; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; padding: 12px 6px; min-height: 44px; color: var(--dkmuted); }
body .cams-sp .cams-sp-fd-reset:hover { color: var(--dkfg); }
body .cams-sp .cams-sp-fd-empty { border: 1.5px dashed var(--line); border-radius: var(--cams-r2, 4px); padding: 18px 20px; font-size: 14px; color: var(--muted); }

/* ---------- featured plan ---------- */
.cams-sp-fp-panel { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; }
.cams-sp-fp-img { flex: 3 1 480px; min-width: 0; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; background: var(--lt2); display: block; }
.cams-sp-fp-copy { flex: 2 1 320px; padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; }
body .cams-sp .cams-sp-fp-name { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
body .cams-sp .cams-sp-fp-copy p { color: var(--muted); font-size: 15.5px; }
.cams-sp-fp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cams-sp-fp-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cams-sp-fp-v { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 20px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.cams-sp-fp-copy .cams-sp-btn { align-self: flex-start; margin-top: auto; }
.cams-sp-fp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
body .cams-sp .cams-sp-fp-thumb { appearance: none; cursor: pointer; padding: 0; width: 72px; height: 54px; border: 2px solid transparent; border-radius: var(--cams-r2, 4px); overflow: hidden; opacity: .6; background: var(--lt2); transition: opacity .2s, border-color .2s; }
body .cams-sp .cams-sp-fp-thumb:hover { opacity: .9; }
body .cams-sp .cams-sp-fp-thumb.is-on { border-color: var(--acc); opacity: 1; }
.cams-sp-fp-thumb img { width: 100%; height: 100% !important; object-fit: cover; }
body .cams-sp .cams-sp-fp-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------- bill-by-bill explorer ---------- */
.cams-sp-bl { display: flex; flex-wrap: wrap; gap: 48px; }
.cams-sp-bl-head { flex: 1 1 300px; }
.cams-sp-bl-head .cams-sp-head { margin: 0; }
.cams-sp-bl-list { flex: 2 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cams-sp-bill { border: 1px solid var(--line); border-radius: var(--cams-r2, 4px); background: var(--surface); overflow: hidden; }
body .cams-sp .cams-sp-bill-btn { appearance: none; cursor: pointer; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; min-height: 44px; background: none; border: 0; text-align: left; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--fg); }
.cams-sp-bill-btn svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.cams-sp-bill.is-open .cams-sp-bill-btn svg { transform: rotate(180deg); }
.cams-sp-bill-no { color: var(--eye); margin-right: 10px; }
.cams-sp-bill-in { border-top: 1px solid var(--line); padding: 4px 22px 14px; }
body .cams-sp .cams-sp-bill-in table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
body .cams-sp .cams-sp-bill-in th, body .cams-sp .cams-sp-bill-in td { padding: 9px 8px 9px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--fg); background: none; font-weight: 400; }
body .cams-sp .cams-sp-bill-in th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
body .cams-sp .cams-sp-bill-in td:first-child, body .cams-sp .cams-sp-bill-in td:last-child { color: var(--muted); }
body .cams-sp .cams-sp-bill-in .cams-sp-num { text-align: right; padding-right: 14px; }
body .cams-sp .cams-sp-bill-note { font-size: 12px; color: var(--muted); padding-top: 10px; }

/* ---------- quick request ---------- */
.cams-sp-rq { --fg: var(--dkfg); --muted: var(--dkmuted); --line: var(--dkline); --eye: var(--accdk);
	background: var(--dk); color: var(--dkfg); border-radius: var(--cams-r, 6px); padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 36px; position: relative; overflow: hidden; }
.cams-sp-bg-dark .cams-sp-rq { background: var(--dk2); border: 1px solid var(--line); }
.cams-sp-rq-copy { flex: 1 1 340px; min-width: 0; }
.cams-sp-rq-copy .cams-sp-head { margin: 0; }
.cams-sp-rq-form { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cams-sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body .cams-sp .cams-sp-chip { appearance: none; cursor: pointer; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.2; padding: 11px 16px; min-height: 44px; border-radius: var(--cams-pill-r, 999px); border: 1.5px solid var(--dkline); border-color: color-mix(in srgb, var(--dkfg) 35%, transparent); background: transparent; color: var(--dkfg); display: inline-flex; align-items: center; gap: 8px; transition: background-color .2s, border-color .2s, color .2s; }
body .cams-sp .cams-sp-chip:hover { border-color: var(--dkfg); }
body .cams-sp .cams-sp-chip.is-on { background: var(--acc); border-color: var(--acc); color: var(--accfg); }
.cams-sp-chip svg { display: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cams-sp-chip.is-on svg { display: block; }
.cams-sp-rq-place { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
body .cams-sp .cams-sp-rq-place select { font: 600 15px "Inter", sans-serif; padding: 12px 14px; min-height: 44px; border-radius: var(--cams-r2, 4px); border: 0; color: var(--ink); background-color: #FFFFFF; max-width: 320px; width: 100%; margin: 0; box-shadow: none; }
.cams-sp-rq-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cams-sp-rq-count { font-size: 13.5px; color: var(--dkmuted); }

/* ---------- reviews: slider and name tabs ---------- */
.cams-sp-rv--slider { max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cams-sp-rv--slider .cams-sp-head { justify-content: center; margin: 0; }
.cams-sp-rv--slider .cams-sp-head-main { align-items: center; flex-basis: auto; }
.cams-sp-rv-stage { width: 100%; }
.cams-sp-rv-panel figure { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cams-sp-rv--slider .cams-sp-review-stars { font-size: 22px; letter-spacing: 3px; }
body .cams-sp .cams-sp-rv-panel blockquote { margin: 0; padding: 0; border: 0; quotes: none; font-family: "Manrope", sans-serif; font-style: normal; font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--fg); letter-spacing: -.01em; }
.cams-sp-rv-panel blockquote::before, .cams-sp-rv-panel blockquote::after { content: none; }
.cams-sp-rv-panel figcaption { font-weight: 600; }
.cams-sp-rv-panel figcaption span { color: var(--muted); font-weight: 400; }
.cams-sp-rv-nav { display: flex; gap: 12px; align-items: center; }
.cams-sp-rv-pos { font-size: 13px; color: var(--muted); min-width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.cams-sp-rv-foot .cams-sp-btn { font-size: 14px; }
.cams-sp-rv--names { max-width: 1000px; display: flex; flex-direction: column; gap: 28px; }
.cams-sp-rv--names .cams-sp-head { margin: 0; }
body .cams-sp .cams-sp-rv--names blockquote { font-weight: 800; font-size: clamp(24px, 3vw, 38px); line-height: 1.25; text-align: left; }
.cams-sp-rv--names .cams-sp-rv-panel figure { align-items: flex-start; }
.cams-sp-rv-tabs { display: flex; flex-wrap: wrap; gap: 4px 28px; border-top: 1px solid var(--line); }
body .cams-sp .cams-sp-rv-who { appearance: none; cursor: pointer; background: none; border: 0; border-top: 2px solid transparent; margin-top: -1px; padding: 12px 0; min-height: 44px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; color: var(--muted); }
body .cams-sp .cams-sp-rv-who:hover { color: var(--fg); }
body .cams-sp .cams-sp-rv-who.is-on { color: var(--fg); border-top-color: var(--acc); }
.cams-sp-rv-st { color: var(--acc); letter-spacing: 1px; }

/* ---------- design styles for the interactive blocks ---------- */
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-xp-panel,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-jr-panel,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-fp-panel,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-bill { border-color: transparent; box-shadow: 0 14px 36px rgba(29, 42, 64, .09); }
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-xp-panel,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-jr-panel,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-fp-panel,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-bill { box-shadow: none; border-color: var(--line); }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-rq { border-radius: 22px; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-opt { border-radius: 8px; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-pf-photo { border-radius: 18px; }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-xp-ico { border-radius: 24px; }

.cams-sp-sec[data-cams-design="ledger"] .cams-sp-xp-panel,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-jr-panel,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-fp-panel { border-color: var(--fg); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-pf-box,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-fd-box { box-shadow: none; border-color: var(--ink); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-bill { border-left: 3px solid var(--acc); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-xp-tab.is-on { box-shadow: inset 3px 0 0 var(--acc); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-rq { border-top: 3px solid var(--acc); }

@media (max-width: 640px) {
	.cams-sp-pf { gap: 32px; }
	.cams-sp-pf-side.has-photo .cams-sp-pf-box { margin: -56px 10px 0; }
	.cams-sp-ch-panel { min-height: 0; padding-top: 72px; }
	.cams-sp-xp-pic { min-height: 200px; }
	.cams-sp-bill-btn { padding: 16px; }
	.cams-sp-bill-in { padding: 4px 12px 12px; overflow-x: auto; }
	.cams-sp-fd-tiles { gap: 8px; }
	.cams-sp-fp-img { flex-basis: 100%; }
}

/* ---------- project spotlight ---------- */
.cams-sp-sl-stage { position: relative; }
.cams-sp-sl-panel { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; }
.cams-sp-sl-pic { position: relative; flex: 1 1 100%; min-width: 0; background: var(--lt2); }
.cams-sp-sl-panel.is-rich .cams-sp-sl-pic { flex: 3 1 480px; }
.cams-sp-sl-img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto !important; object-fit: cover; background: var(--lt2); }
.cams-sp-sl-panel.is-rich .cams-sp-sl-img { aspect-ratio: 4 / 3; height: 100% !important; }
.cams-sp-sl-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px clamp(20px, 3vw, 32px) clamp(18px, 3vw, 28px); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); color: #FFFFFF; display: flex; flex-direction: column; gap: 6px; }
body .cams-sp .cams-sp-sl-cap .cams-sp-h3 { color: #FFFFFF; font-size: clamp(22px, 2.6vw, 30px); }
body .cams-sp .cams-sp-sl-cap .cams-sp-pick-h { color: #FFFFFF; opacity: .85; }
.cams-sp-sl-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.cams-sp-sl-bar .cams-sp-fp-thumbs { margin-top: 0; flex: 1 1 auto; min-width: 0; }
.cams-sp-fp-thumb[hidden] { display: none !important; }

/* ---------- before / after ---------- */
.cams-sp-cm-tabs { margin: -8px 0 20px; }
.cams-sp-cm-panel figure { display: flex; flex-direction: column; gap: 10px; }
.cams-sp-cm-panel figcaption { font-size: 14px; color: var(--muted); }
.cams-sp-cm { position: relative; overflow: hidden; border-radius: var(--cams-r, 6px); background: var(--lt2); user-select: none; touch-action: pan-y; }
.cams-sp-cm-after { display: block; width: 100%; height: auto !important; }
.cams-sp-cm-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.cams-sp-cm-bimg { width: 100%; height: 100% !important; object-fit: cover; }
.cams-sp-cm-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); pointer-events: none; }
.cams-sp-cm-knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: var(--cams-pill-r, 999px); background: #FFFFFF; color: #1D2A40; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.cams-sp-cm-knob svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cams-sp-cm-tag { position: absolute; top: 14px; padding: 5px 10px; border-radius: var(--cams-r2, 4px); background: rgba(0, 0, 0, .55); color: #FFFFFF; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.cams-sp-cm-tag--l { left: 14px; }
.cams-sp-cm-tag--r { right: 14px; }
body .cams-sp .cams-sp-cm-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cams-sp-cm:focus-within .cams-sp-cm-knob { outline: 3px solid var(--acc); outline-offset: 2px; }

/* ---------- team ---------- */
.cams-sp-pps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.cams-sp-pp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); overflow: hidden; display: flex; flex-direction: column; }
.cams-sp-pp-img { display: block; width: 100%; aspect-ratio: 4 / 4; height: auto !important; object-fit: cover; background: var(--lt2); }
.cams-sp-pp-ini { display: grid; place-items: center; background: var(--dk); color: var(--accdk); font-family: "Manrope", sans-serif; font-weight: 800; font-size: 56px; letter-spacing: .02em; }
.cams-sp-bg-dark .cams-sp-pp-ini { background: var(--dk2); }
.cams-sp-pp-ico .cams-sp-ico { stroke-width: 1.2; }
.cams-sp-pp-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.cams-sp-pp-role { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--eye); }
body .cams-sp .cams-sp-pp-body p { font-size: 14.5px; color: var(--muted); margin-top: 6px; }

/* ---------- contact & hours ---------- */
.cams-sp-ct { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.cams-sp-ct-ways { flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; }
body .cams-sp .cams-sp-ct-way { display: grid; grid-template-columns: 46px minmax(0, 1fr) 16px; gap: 14px; align-items: center; padding: 16px 18px; min-height: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); text-decoration: none; color: var(--fg); transition: border-color .2s, transform .2s; }
body .cams-sp .cams-sp-ct-way:hover { border-color: var(--acc); transform: translateY(-1px); }
.cams-sp-ct-way > .cams-sp-ico { width: 46px; height: 46px; padding: 11px; border-radius: var(--cams-r2, 4px); background: var(--dk); color: var(--accdk); }
.cams-sp-bg-dark .cams-sp-ct-way > .cams-sp-ico { background: var(--dk); border: 1px solid var(--line); }
.cams-sp-ct-way.is-wa > .cams-sp-ico { background: #1F9D55; color: #FFFFFF; }
.cams-sp-ct-way > span { display: flex; flex-direction: column; min-width: 0; }
.cams-sp-ct-k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cams-sp-ct-way strong { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.cams-sp-ct-go { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cams-sp-ct-side { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cams-sp-ct-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cams-sp-ct-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cams-sp-ct-live { display: inline-flex; align-items: center; gap: 7px; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12.5px; padding: 5px 11px; border-radius: var(--cams-pill-r, 999px); background: var(--line); color: var(--muted); }
.cams-sp-ct-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cams-sp-ct-live.is-open { background: rgba(31, 157, 85, .14); color: #1B7F46; }
.cams-sp-bg-dark .cams-sp-ct-live.is-open { color: #5ED193; }
.cams-sp-ct-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cams-sp-ct-row span { color: var(--muted); }
.cams-sp-ct-row strong { font-weight: 600; text-align: right; }
.cams-sp-ct-addr { display: flex; gap: 10px; align-items: flex-start; padding-top: 6px; }
.cams-sp-ct-addr .cams-sp-ico { color: var(--eye); flex: none; margin-top: 2px; }
body .cams-sp .cams-sp-ct-addr address { font-style: normal; font-size: 15px; line-height: 1.5; margin: 0; }
body .cams-sp .cams-sp-ct-note { font-size: 13.5px; color: var(--muted); }
.cams-sp-ct-card .cams-sp-btn { align-self: flex-start; }
.cams-sp-ct-map { flex: 1 1 auto; min-height: 260px; border-radius: var(--cams-r, 6px); overflow: hidden; border: 1px solid var(--line); background: var(--lt2); }
.cams-sp-ct-map iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }

/* ---------- price calculator ---------- */
.cams-sp-pc-wrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cams-sp-pc-wrap .cams-sp-pc { flex: 2 1 640px; }
.cams-sp-pc .cams-sp-calc-in { flex-basis: 400px; }
.cams-sp-pc .cams-sp-calc-out { flex-basis: 260px; }
.cams-sp-pc-table { flex: 1 1 300px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--cams-r, 6px); padding: 8px 20px 16px; }
body .cams-sp .cams-sp-pc-table table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
body .cams-sp .cams-sp-pc-table th, body .cams-sp .cams-sp-pc-table td { padding: 10px 6px 10px 0; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--fg); background: none; font-weight: 500; }
body .cams-sp .cams-sp-pc-table thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
body .cams-sp .cams-sp-pc-table .cams-sp-num { text-align: right; }
body .cams-sp .cams-sp-pc-table p { font-size: 12.5px; color: var(--muted); padding-top: 10px; }
.cams-sp-pc-nums { display: flex; flex-wrap: wrap; gap: 16px; }
.cams-sp-pc-num { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; flex: 1 1 160px; }
body .cams-sp .cams-sp-pc-num input { font-size: 20px; font-weight: 700; width: 140px; }
body .cams-sp .cams-sp-pc-num small { font-weight: 400; font-size: 12.5px; color: var(--muted); }

.cams-sp-sec[data-cams-design="showcase"] .cams-sp-sl-panel,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-pp,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-ct-way,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-ct-card,
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-pc-table { border-color: transparent; box-shadow: 0 14px 36px rgba(29, 42, 64, .09); }
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-sl-panel,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-pp,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-ct-way,
.cams-sp-sec.cams-sp-bg-dark[data-cams-design="showcase"] .cams-sp-ct-card { box-shadow: none; border-color: var(--line); }
.cams-sp-sec[data-cams-design="showcase"] .cams-sp-ct-way > .cams-sp-ico { border-radius: 50%; }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-sl-panel,
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-ct-card { border-color: var(--fg); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-pp { border-top: 3px solid var(--acc); }
.cams-sp-sec[data-cams-design="ledger"] .cams-sp-ct-way { border-left: 3px solid var(--acc); }

@media (max-width: 640px) {
	.cams-sp-sl-bar { flex-wrap: wrap; }
	.cams-sp-ct-card { padding: 18px; }
	.cams-sp-pc-wrap .cams-sp-pc { flex-basis: 100%; }
	body .cams-sp .cams-sp-pc-num input { width: 100%; }
	.cams-sp-pps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cams-sp-pp-ini { font-size: 40px; }
	.cams-sp-pp-body { padding: 14px; }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
	.cams-sp-in { padding: 0 16px; }
	.cams-sp-crumb { display: none; }
	.cams-sp-hero-row { gap: 32px; }
	.cams-sp-sheet { order: -1; aspect-ratio: 16 / 10; flex-basis: 100%; }
	.cams-sp-jump .cams-sp-in { gap: 0 20px; }
	.cams-sp-tiles { grid-auto-rows: 200px; }
	.cams-sp-tile:first-child { grid-row: auto; }
	.cams-sp-split-copy { flex-basis: 100%; }
	.cams-sp-faq-a p { padding-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cams-sp *, .cams-sp *::before, .cams-sp *::after { transition: none !important; }
}

/* Price calculator: big totals (J$19,200) stay on one line. */
.cams-sp-pc .cams-sp-calc-fee { white-space: nowrap; font-size: clamp(30px, 4.2vw, 52px); overflow-wrap: normal; word-break: keep-all; }