/*
 * CASA R&E components, ported from Main.dc.html's stylesheet (class c-x -> casa-x). Token-bound: every value is a
 * custom property from global.css. Breakpoints as in Main: 1100 (facts), 1023 (tablet), 1000 (header), 767 (phone).
 */

/* ------------------------------------------------------------------ icons + leaf sprig */
.casa-icon { flex: none; }
.casa-ico { width: var(--size-26); height: var(--size-26); flex: none; }
.casa-ico-sm { width: var(--size-20); height: var(--size-20); flex: none; }
.casa-leaf { position: absolute; pointer-events: none; fill: none; color: var(--color-leaf); z-index: 2; stroke-width: 12; }
.casa-leaf--ivory { color: var(--color-ivory); }
.casa-leaf--hero { width: var(--size-230); height: var(--size-308); left: calc(-1 * var(--size-104)); bottom: calc(-1 * var(--size-60)); }
.casa-leaf--img { width: var(--size-190); height: var(--size-254); right: var(--size-28); bottom: calc(-1 * var(--size-60)); transform: scaleX(-1); }
.casa-leaf--cta { width: var(--size-200); height: var(--size-268); left: var(--size-28); bottom: calc(-1 * var(--size-64)); }
.casa-leaf--soft { color: var(--color-leaf); opacity: 0.18; z-index: 0; stroke-width: 14; }
.casa-leaf--why { width: var(--size-120); height: var(--size-161); left: calc(-1 * var(--size-20)); top: var(--size-24); transform: rotate(50deg); }
.casa-leaf--why2 { width: var(--size-120); height: var(--size-161); right: calc(-1 * var(--size-20)); top: var(--size-24); transform: scaleX(-1) rotate(50deg); }
.casa-leaf--foot { width: var(--size-200); height: var(--size-268); right: calc(-1 * var(--size-60)); top: var(--size-66); transform: scaleX(-1) rotate(50deg); }
.casa-has-leaf { position: relative; overflow: hidden; }
.casa-has-leaf > :not(.casa-leaf) { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ buttons (Main .c-btn: label + arrow block) */
.casa-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--size-22); min-height: var(--button-height); padding: 0 0 0 var(--size-24); border: 0; border-radius: var(--button-radius); overflow: hidden; background: var(--button-bg); color: var(--button-text); font: var(--font-weight-semibold) var(--size-16)/var(--size-20) var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--duration-base) var(--ease); }
.casa-arr { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; width: var(--button-height); flex: none; background: var(--button-arrow-bg); transition: background-color var(--duration-base) var(--ease); }
.casa-arr svg { width: var(--size-20); height: var(--size-20); transition: transform var(--duration-base) var(--ease); }
.casa-btn:hover { background: var(--button-bg-hover); color: var(--button-text); }
.casa-btn:hover .casa-arr { background: var(--button-arrow-bg-hover); }
.casa-btn:hover .casa-arr svg { transform: translateX(var(--size-3)); }
.casa-btn--soft { background: var(--button-soft-bg); color: var(--button-soft-text); }
.casa-btn--soft .casa-arr { background: var(--button-soft-arrow-bg); color: var(--button-soft-arrow-text); }
.casa-btn--soft:hover { background: var(--button-soft-arrow-bg); color: var(--button-soft-text); }
.casa-btn--soft:hover .casa-arr { background: var(--button-soft-arrow-bg-hover); }
.casa-btn--sm { min-height: var(--button-height-sm); padding-left: var(--size-20); gap: var(--size-18); }
.casa-btn--sm .casa-arr { width: var(--button-height-sm); }
.casa-btn--block { width: 100%; }
.casa-btn--plain { padding: 0 var(--size-24); justify-content: center; }
.casa-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.casa-btn.is-loading { padding-right: var(--size-24); gap: var(--size-12); justify-content: center; }
.casa-btn-spinner { width: var(--size-18); height: var(--size-18); border: var(--size-2) solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: casa-spin 0.8s linear infinite; }
@keyframes casa-spin { to { transform: rotate(360deg); } }
.casa-actions { display: flex; flex-wrap: wrap; gap: var(--size-14); align-items: center; }
.casa-link { display: inline-flex; align-items: center; min-height: var(--size-48); padding: 0; border: 0; background: none; font: var(--font-weight-semibold) var(--size-16)/var(--size-20) var(--font-sans); color: var(--color-primary); text-decoration: underline; text-underline-offset: var(--size-6); text-decoration-thickness: var(--size-1); cursor: pointer; }
.casa-link:hover { color: var(--color-primary-hover); }
.casa-link--light, .casa-link--light:hover { color: var(--color-on-dark); }
.casa-tbc { display: inline-block; padding: var(--size-1) var(--size-8); background: var(--color-tint); border-radius: var(--radius-4); font-size: var(--size-14); font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* ------------------------------------------------------------------ photos */
.casa-photo { position: relative; margin: 0; }
.casa-photo img { width: 100%; }
.casa-photo--fill { position: absolute; inset: 0; }
.casa-photo--fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.casa-photo-label { position: absolute; left: var(--size-14); bottom: var(--size-14); z-index: 1; padding: var(--size-3) var(--size-10); background: var(--color-ivory-alpha-94); border-radius: var(--radius-6); font-size: var(--size-12); line-height: var(--size-18); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.casa-photo-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--size-32); text-align: center; font-size: var(--size-15); line-height: var(--size-23); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ header (Main .c-head) */
.casa-header { position: relative; z-index: 20; background: var(--color-surface); }
.casa-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--size-24); max-width: var(--size-1440); margin: 0 auto; padding: var(--size-8) var(--size-48); }
.casa-logo { display: inline-flex; line-height: 0; }
.casa-logo img { height: var(--logo-height); width: auto; }
.casa-nav-list { display: flex; align-items: center; gap: var(--size-2); margin: 0; padding: 0; list-style: none; }
.casa-nav-item { position: relative; }
.casa-nav-link { display: inline-flex; align-items: center; gap: var(--size-6); min-height: var(--size-48); padding: 0 var(--size-12); white-space: nowrap; border: 0; border-radius: var(--radius-8); background: none; font: var(--font-weight-semibold) var(--size-15)/var(--size-20) var(--font-sans); color: var(--color-text); text-decoration: none; cursor: pointer; transition: background-color var(--duration-base) var(--ease); }
.casa-nav-link:hover { background: var(--color-bg); color: var(--color-text); }
.casa-nav-link.is-active { color: var(--color-primary); background: var(--color-bg); }
.casa-nav-link .casa-icon { width: var(--size-14); height: var(--size-14); transition: transform var(--duration-base) var(--ease); }
.casa-nav-item--dd.is-open .casa-nav-link .casa-icon { transform: rotate(180deg); }
.casa-dd { position: absolute; left: 0; top: 100%; width: var(--dropdown-width); padding: var(--size-10); background: var(--color-surface); border-radius: var(--radius-12); box-shadow: var(--shadow-panel); }
.casa-dd-list { list-style: none; margin: 0; padding: 0; }
.casa-dd-link { display: flex; align-items: center; gap: var(--size-12); min-height: var(--size-48); padding: var(--size-8) var(--size-12); border-radius: var(--radius-8); font: var(--font-weight-semibold) var(--size-15)/var(--size-20) var(--font-sans); color: var(--color-text); text-decoration: none; }
.casa-dd-link:hover, .casa-dd-link:focus-visible { background: var(--color-bg); color: var(--color-text); }
.casa-dd-link .casa-icon { color: var(--color-primary); }
.casa-head-r { display: flex; align-items: center; gap: var(--size-20); }
.casa-mbar { display: none; align-items: center; gap: var(--size-8); }
.casa-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--size-48); min-height: var(--size-48); padding: 0; border: 0; border-radius: var(--radius-8); background: var(--color-bg); color: var(--color-text); cursor: pointer; }
.casa-menu-btn .casa-icon--close, .casa-menu-btn[aria-expanded="true"] .casa-icon--menu { display: none; }
.casa-menu-btn[aria-expanded="true"] .casa-icon--close { display: block; }
.casa-mpanel { background: var(--color-surface); padding: var(--size-8) var(--size-20) var(--size-28); box-shadow: var(--shadow-sheet); }
.casa-mnav, .casa-msub { list-style: none; margin: 0; padding: 0; }
.casa-mnav-link { display: flex; align-items: center; min-height: var(--size-52); padding: 0 var(--size-12); border-radius: var(--radius-8); font: var(--font-weight-semibold) var(--size-17)/var(--size-22) var(--font-sans); color: var(--color-text); text-decoration: none; }
.casa-mnav-link:hover { background: var(--color-bg); color: var(--color-text); }
.casa-mnav-link[aria-current] { color: var(--color-primary); }
.casa-mgroup { margin: var(--size-8) 0; padding: var(--size-8); background: var(--color-bg); border-radius: var(--radius-10); }
.casa-mgroup-title { margin: var(--size-4) var(--size-10) var(--size-6); font: var(--font-weight-regular) var(--size-22)/var(--size-28) var(--font-display); color: var(--color-text); }
.casa-msub-link { display: flex; align-items: center; gap: var(--size-10); min-height: var(--size-48); padding: 0 var(--size-10); border-radius: var(--radius-8); font: var(--font-weight-medium) var(--size-16)/var(--size-22) var(--font-sans); color: var(--color-text); text-decoration: none; }
.casa-msub-link .casa-icon { color: var(--color-primary); }
.casa-msub-link:hover { background: var(--color-tint); color: var(--color-text); }
.casa-mpanel > .casa-btn { width: 100%; margin-top: var(--size-16); }
.casa-mpanel-note { margin: var(--size-12) var(--size-12) 0; font-size: var(--size-14); line-height: var(--size-22); color: var(--color-text-muted); }
@media (max-width: 1000px) {
	.casa-nav { display: none; }
	.casa-head-r > .casa-btn { display: none; }
	.casa-mbar { display: flex; }
}
@media (min-width: 1001px) {
	.casa-mpanel { display: none !important; }
}

/* ------------------------------------------------------------------ hero (Main .c-hero) */
.casa-hero { padding: var(--size-72) 0 var(--size-88); }
.casa-hero--plain { padding-bottom: var(--size-48); }
.casa-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--size-64); align-items: center; }
.casa-hero h1 { margin: 0 0 var(--size-24); font: var(--font-weight-regular) var(--size-55)/var(--size-60) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--color-text); text-wrap: balance; }
.casa-hero--home h1 { font-size: var(--size-65); line-height: var(--size-70); }
.casa-hero-body { margin: 0 0 var(--size-36); font-size: var(--size-20); line-height: var(--size-32); max-width: var(--measure-hero); }
.casa-hero--plain .casa-hero-body { margin: 0; }
.casa-hero-media { position: relative; border-radius: var(--radius-20); aspect-ratio: var(--hero-media-ratio); background: var(--color-tint); }
.casa-hero-media .casa-photo { position: absolute; inset: 0; }
.casa-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-20); }
.casa-badge { position: absolute; top: var(--size-28); right: var(--size-28); z-index: 1; width: var(--badge-size); height: var(--badge-size); margin: 0; border-radius: var(--radius-pill); background: var(--color-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--size-16); box-shadow: var(--shadow-badge); }
.casa-badge strong { font: var(--font-weight-regular) var(--size-30)/var(--size-31) var(--font-display); color: var(--color-primary); }
.casa-badge span { font-size: var(--size-12); line-height: var(--size-16); font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* ------------------------------------------------------------------ walnut panel + service cards (Main .c-panel-dark) */
.casa-panel-dark { background: var(--color-dark); color: var(--color-on-dark); border-radius: var(--radius-24); padding: var(--panel-pad); }
.casa-panel-dark .casa-h2 { color: var(--color-on-dark); }
.casa-panel-dark .casa-sub { color: var(--color-on-dark-muted); }
.casa-panel-dark > .casa-h2 { margin-bottom: var(--size-32); }
.casa-svc-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--size-48); align-items: stretch; margin-bottom: var(--size-24); }
.casa-svc-intro { display: flex; flex-direction: column; justify-content: center; }
.casa-svc-intro .casa-sub { margin-bottom: var(--size-32); }
.casa-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--color-card); border-radius: var(--radius-16); overflow: hidden; text-decoration: none; color: var(--color-text); transition: transform var(--duration-base) var(--ease); }
.casa-feat:hover { transform: translateY(calc(-1 * var(--size-2))); color: var(--color-text); }
.casa-feat-img { position: relative; min-height: var(--size-300); }
.casa-feat-body { padding: var(--size-36) var(--size-32); display: flex; flex-direction: column; justify-content: center; gap: var(--size-12); }
.casa-feat-body h3 { margin: 0; font: var(--font-weight-regular) var(--size-35)/var(--size-40) var(--font-display); }
.casa-feat-body p { margin: 0; font-size: var(--size-17); line-height: var(--size-27); color: var(--color-text-muted); }
.casa-pill { align-self: flex-start; padding: var(--size-4) var(--size-12); border-radius: var(--radius-pill); background: var(--color-tint); font-size: var(--size-13); line-height: var(--size-18); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.casa-more { font: var(--font-weight-semibold) var(--size-15)/var(--size-20) var(--font-sans); color: var(--color-primary); }
.casa-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-20); margin: 0; padding: 0; list-style: none; }
.casa-card { display: flex; flex-direction: column; height: 100%; padding: var(--size-10); background: var(--color-dark-raised); border-radius: var(--radius-16); text-decoration: none; color: var(--color-on-dark); transition: background-color var(--duration-base) var(--ease); }
.casa-card:hover { background: var(--color-walnut-hover); color: var(--color-on-dark); }
.casa-card-img { position: relative; aspect-ratio: var(--card-ratio); border-radius: var(--radius-10); overflow: hidden; background: var(--color-walnut-soft); }
.casa-card-img img { transition: transform var(--duration-slow) var(--ease); }
.casa-card:hover .casa-card-img img { transform: scale(1.04); }
.casa-card-body { display: flex; flex-direction: column; gap: var(--size-10); flex: 1; padding: var(--size-20) var(--size-14) var(--size-6); }
.casa-card h3 { margin: 0; font: var(--font-weight-regular) var(--size-25)/var(--size-30) var(--font-display); color: var(--color-on-dark); }
.casa-card p { margin: 0; font-size: var(--size-17); line-height: var(--size-27); color: var(--color-on-dark-muted); flex: 1; }
.casa-card-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--size-12); margin-top: var(--size-10); }
.casa-card-more { font: var(--font-weight-semibold) var(--size-15)/var(--size-20) var(--font-sans); color: var(--color-accent-on-dark); }
.casa-card-arr { display: inline-flex; align-items: center; justify-content: center; width: var(--size-44); height: var(--size-44); flex: none; border-radius: var(--radius-8); background: var(--color-walnut-soft); color: var(--color-on-dark); transition: background-color var(--duration-base) var(--ease); }
.casa-card:hover .casa-card-arr { background: var(--color-action); }

/* ------------------------------------------------------------------ why (Main .c-why-grid) */
.casa-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--size-24); margin: var(--size-56) 0 0; padding: 0; list-style: none; }
.casa-why-item { text-align: center; padding: var(--size-36) var(--size-24); background: var(--color-card); border-radius: var(--radius-16); }
.casa-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--size-52); height: var(--size-52); flex: none; border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-primary); }
.casa-why-item .casa-dot { width: var(--size-64); height: var(--size-64); margin-bottom: var(--size-20); }
.casa-why-item h3 { margin: 0 0 var(--size-8); font: var(--font-weight-regular) var(--size-23)/var(--size-27) var(--font-display); }
.casa-why-item p { margin: 0; font-size: var(--size-17); line-height: var(--size-27); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ split (Main .c-split) */
.casa-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: var(--color-tint); border-radius: var(--radius-24); overflow: hidden; }
.casa-split--dark { background: var(--color-dark); color: var(--color-on-dark); }
.casa-split-img { position: relative; min-height: var(--size-480); background: var(--color-sand-deep); overflow: hidden; }
.casa-split-copy { padding: var(--size-64); align-self: center; }
.casa-split--dark .casa-p { color: var(--color-on-dark-muted); }
.casa-split-after { margin-bottom: var(--size-28); }
.casa-ticks { list-style: none; margin: var(--size-28) 0 var(--size-36); padding: 0; display: grid; gap: var(--size-14); }
.casa-ticks:last-child { margin-bottom: 0; }
.casa-ticks li { display: flex; gap: var(--size-14); align-items: flex-start; font-size: var(--size-17); line-height: var(--size-27); font-weight: var(--font-weight-medium); }
.casa-tick { display: inline-flex; align-items: center; justify-content: center; width: var(--size-28); height: var(--size-28); flex: none; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-white); }
.casa-tick svg { width: var(--size-16); height: var(--size-16); }
.casa-split--dark .casa-tick { background: var(--color-action); }

/* ------------------------------------------------------------------ facts band (Main .c-facts) */
.casa-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--size-32); row-gap: var(--size-20); align-items: center; margin: 0; padding: var(--size-52) var(--size-40); list-style: none; background: var(--color-dark); border-radius: var(--radius-24); }
.casa-fact { position: relative; text-align: center; font: var(--font-weight-regular) clamp(var(--size-24), 2vw, var(--size-30))/1.2 var(--font-display); color: var(--color-on-dark); }
.casa-fact-leaf { position: absolute; left: calc(-1 * var(--size-28)); top: 50%; width: var(--size-22); height: var(--size-34); margin-top: calc(-1 * var(--size-17)); fill: none; stroke: var(--color-leaf-gold); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1100px) {
	.casa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--size-28); }
	.casa-fact-leaf { display: none; }
}

/* ------------------------------------------------------------------ steps (Main .c-steps) */
.casa-steps { list-style: none; padding: 0; margin: var(--size-56) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-24); }
.casa-step { padding: var(--size-36) var(--size-32) var(--size-40); background: var(--color-card); border-radius: var(--radius-16); }
.casa-step-label { display: block; margin-bottom: var(--size-4); font-size: var(--size-14); line-height: var(--size-20); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.casa-step h3 { margin: 0 0 var(--size-10); font: var(--font-weight-regular) var(--size-25)/var(--size-29) var(--font-display); }
.casa-step p { margin: 0; font-size: var(--size-17); line-height: var(--size-27); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ reviews (Main .c-rev) */
.casa-reviews-head { margin-bottom: var(--size-48); }
.casa-rev { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--size-24); align-items: stretch; }
.casa-rev--single { grid-template-columns: minmax(0, 1fr); }
.casa-rev-img { position: relative; min-height: var(--size-360); border-radius: var(--radius-20); overflow: hidden; }
.casa-rev-main { display: flex; flex-direction: column; justify-content: center; gap: var(--size-20); margin: 0; padding: var(--size-48); background: var(--color-card); border-radius: var(--radius-20); }
.casa-rev-main blockquote { margin: 0; font: var(--font-weight-regular) var(--size-30)/var(--size-38) var(--font-display); }
.casa-rev-main blockquote p, .casa-rev-small blockquote p { margin: 0; }
.casa-rev-main figcaption { margin: 0; font-size: var(--size-16); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.casa-qmark { font: var(--font-weight-regular) var(--size-70)/var(--size-46) var(--font-display); color: var(--color-action); height: var(--size-40); }
.casa-rev-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-24); margin-top: var(--size-24); }
.casa-rev-small { margin: 0; padding: var(--size-32); background: var(--color-card); border-radius: var(--radius-16); }
.casa-rev-small blockquote { margin: 0 0 var(--size-14); font: var(--font-weight-regular) var(--size-21)/var(--size-28) var(--font-display); }
.casa-rev-small figcaption { font-size: var(--size-14); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ gallery (Main .c-gal) */
.casa-gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--gallery-row); gap: var(--size-20); margin: var(--size-48) 0 0; padding: 0; list-style: none; }
.casa-gal > li { position: relative; background: var(--color-tint); border-radius: var(--radius-16); overflow: hidden; }
.casa-gal > .casa-wide { grid-column: span 2; grid-row: span 2; }

/* ------------------------------------------------------------------ coverage (Main .c-cover) */
.casa-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--size-40); align-items: center; padding: var(--size-44) var(--size-56); background: var(--color-card); border-radius: var(--radius-20); }
.casa-cover h2 { margin: 0 0 var(--size-6); font: var(--font-weight-regular) var(--size-32)/var(--size-37) var(--font-display); }
.casa-cover p { margin: 0; color: var(--color-text-muted); }

/* ------------------------------------------------------------------ FAQ (Main .c-faq) */
.casa-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--size-72); }
.casa-faq-list { display: grid; gap: var(--size-12); align-content: start; }
.casa-faq-item { background: var(--color-card); border-radius: var(--radius-14); padding: 0 var(--size-28); transition: background-color var(--duration-base) var(--ease); }
.casa-faq-item[open] { background: var(--color-tint); }
.casa-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--size-24); min-height: var(--size-72); font: var(--font-weight-semibold) var(--size-17)/var(--size-24) var(--font-sans); }
.casa-faq-item summary::-webkit-details-marker { display: none; }
.casa-faq-item summary::after { content: "+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--size-32); height: var(--size-32); border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-white); font: var(--font-weight-medium) var(--size-20)/1 var(--font-sans); }
.casa-faq-item[open] summary::after { content: "\2212"; }
.casa-faq-answer p { margin: 0 0 var(--size-24); max-width: var(--measure-faq); }

/* ------------------------------------------------------------------ CTA band (Main .c-cta) */
.casa-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--color-dark); color: var(--color-on-dark); border-radius: var(--radius-24); overflow: hidden; }
.casa-cta--single { grid-template-columns: minmax(0, 1fr); }
.casa-cta-copy { padding: var(--size-72) var(--size-64); align-self: center; }
.casa-cta h2 { margin: 0 0 var(--size-16); font: var(--font-weight-regular) var(--size-51)/var(--size-57) var(--font-display); color: var(--color-on-dark); max-width: var(--measure-cta-title); }
.casa-cta p { margin: 0 0 var(--size-32); font-size: var(--size-19); line-height: var(--size-30); color: var(--color-on-dark-muted); max-width: var(--measure-cta); }
.casa-cta-img { position: relative; min-height: var(--size-340); overflow: hidden; }

/* ------------------------------------------------------------------ contact rows (Main .c-contacts) */
.casa-contacts { display: grid; gap: var(--size-12); margin: 0; padding: 0; list-style: none; }
.casa-contact { display: flex; justify-content: space-between; align-items: center; gap: var(--size-16); min-height: var(--size-64); padding: var(--size-16) var(--size-22); background: var(--color-card); border-radius: var(--radius-12); font-weight: var(--font-weight-semibold); color: var(--color-text); text-decoration: none; }
a.casa-contact:hover { background: var(--color-tint); color: var(--color-text); }
.casa-contact--tbc { cursor: not-allowed; }
.casa-contact-label { display: flex; align-items: center; gap: var(--size-12); }
.casa-contact .casa-icon { color: var(--color-primary); }
.casa-contact-value { font-weight: var(--font-weight-semibold); font-size: var(--size-14); color: var(--color-text-muted); }
.casa-aside .casa-contact { background: var(--color-bg); }
.casa-talk-intro { margin-bottom: var(--size-16); }
.casa-talk .casa-btn { margin-top: var(--size-8); }

/* ------------------------------------------------------------------ quote layout (Main .c-qwrap) */
.casa-quote-wrap { display: flex; flex-wrap: wrap; gap: var(--size-32); align-items: flex-start; }
.casa-quote-main { flex: 999 1 var(--size-560); min-width: 0; background: var(--color-surface); border-radius: var(--radius-20); padding: var(--size-48); }
.casa-quote-aside { flex: 1 1 var(--size-300); min-width: 0; display: flex; flex-direction: column; gap: var(--size-20); }
.casa-aside { background: var(--color-card); border-radius: var(--radius-16); padding: var(--size-32); }
.casa-aside--dark { background: var(--color-dark); color: var(--color-on-dark); }
.casa-aside h2 { margin: 0 0 var(--size-12); font: var(--font-weight-regular) var(--size-23)/var(--size-27) var(--font-display); }
.casa-aside ol { margin: 0; padding-left: var(--size-20); display: grid; gap: var(--size-8); font-size: var(--size-17); line-height: var(--size-27); }
.casa-aside p { margin: 0; font-size: var(--size-17); line-height: var(--size-27); }
.casa-aside .casa-small { margin-top: var(--size-14); font-size: var(--size-14); line-height: var(--size-22); color: var(--color-text-muted); }
.casa-aside--dark .casa-small { color: var(--color-on-dark-muted); }

/* ------------------------------------------------------------------ form controls (Main quote view) */
.casa-progress-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--size-8); margin: 0 0 var(--size-12); padding: 0; list-style: none; }
.casa-progress-bar li { height: var(--size-6); border-radius: var(--radius-4); background: var(--color-bg); }
.casa-progress-bar li.is-done { background: var(--color-primary); }
.casa-progress-bar li.is-current { background: var(--color-action); }
.casa-progress-label { margin: 0 0 var(--size-28); font-size: var(--size-15); line-height: var(--size-22); color: var(--color-text-muted); }
.casa-progress-label strong { color: var(--color-text); }
.casa-fields { display: grid; gap: var(--size-28); }
.casa-field { display: grid; gap: var(--size-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.casa-field > legend, .casa-label { padding: 0; font: var(--font-weight-semibold) var(--size-15)/var(--size-22) var(--font-sans); color: var(--color-text); }
fieldset.casa-field > legend { margin-bottom: var(--size-8); }
.casa-req { font-weight: var(--font-weight-medium); font-size: var(--size-14); color: var(--color-text-muted); }
.casa-hint { margin: 0; font-size: var(--size-14); line-height: var(--size-21); color: var(--color-text-muted); }
.casa-msg { display: flex; align-items: flex-start; gap: var(--size-6); margin: 0; font: var(--font-weight-semibold) var(--size-14)/var(--size-20) var(--font-sans); color: var(--color-error); }
.casa-msg .casa-icon { display: none; }
.casa-input { width: 100%; min-height: var(--size-56); padding: var(--size-14) var(--size-16); border: 0; border-bottom: var(--size-2) solid var(--color-input-line); border-radius: var(--radius-8) var(--radius-8) 0 0; background: var(--color-bg); font: var(--font-weight-medium) var(--size-16)/var(--size-24) var(--font-sans); color: var(--color-text); transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.casa-input:hover { background: var(--color-linen-hover); }
.casa-input:focus { background: var(--color-surface); border-bottom-color: var(--color-text); }
.casa-input[aria-invalid="true"], .has-error .casa-input { border-bottom-color: var(--color-error); background: var(--color-error-soft); }
textarea.casa-input { min-height: var(--size-132); resize: vertical; }
textarea.casa-input--short { min-height: var(--size-104); }
.casa-input--narrow { max-width: var(--size-280); }
.casa-input--medium { max-width: var(--size-360); }
.casa-select-wrap { position: relative; }
.casa-select-wrap select { appearance: none; -webkit-appearance: none; padding-right: var(--size-44); cursor: pointer; }
.casa-select-wrap .casa-icon { position: absolute; right: var(--size-16); top: 50%; width: var(--size-16); height: var(--size-16); margin-top: calc(-1 * var(--size-8)); color: var(--color-primary); pointer-events: none; }
.casa-cond { display: grid; gap: var(--size-24); margin: 0; padding: var(--size-28); border: 0; background: var(--color-card); border-radius: var(--radius-12); min-width: 0; }
.casa-cond > legend { float: left; width: 100%; margin: 0 0 var(--size-24); padding: 0; font: var(--font-weight-regular) var(--size-19)/var(--size-26) var(--font-display); color: var(--color-text); }
.casa-cond > legend + * { clear: both; }
.casa-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-24); }
.casa-choices { display: flex; flex-wrap: wrap; gap: var(--size-12); }
.casa-choice { position: relative; display: inline-flex; align-items: center; min-height: var(--size-52); padding: 0 var(--size-22); border-radius: var(--radius-8); background: var(--color-bg); font-weight: var(--font-weight-semibold); font-size: var(--size-16); cursor: pointer; transition: background-color var(--duration-base) var(--ease); }
.casa-choice:hover { background: var(--color-linen-hover); }
.casa-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; } /* allow-raw: visually hidden radio */
.casa-choice-dot { display: none; }
.casa-choice:has(input:checked) { background: var(--color-primary); color: var(--color-white); }
.casa-choice:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.casa-drop { display: grid; justify-items: start; gap: var(--size-12); padding: var(--size-32); background: var(--color-card); border-radius: var(--radius-12); }
.casa-drop > .casa-icon { display: none; }
.casa-drop-title { margin: 0; font: var(--font-weight-regular) var(--size-21)/var(--size-27) var(--font-display); }
.casa-file-btn { position: relative; overflow: hidden; padding: 0 var(--size-24); }
.casa-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.casa-file-btn:focus-within { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.casa-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-140), 1fr)); gap: var(--size-12); }
.casa-thumb { position: relative; border-radius: var(--radius-12); overflow: hidden; background: var(--color-bg); }
.casa-thumb img, .casa-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.casa-thumb-name { display: block; padding: var(--size-8) var(--size-10); font-size: var(--size-12); line-height: var(--size-16); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casa-thumb-remove { position: absolute; top: var(--size-8); right: var(--size-8); width: var(--size-44); height: var(--size-44); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-on-dark); font: var(--font-weight-semibold) var(--size-20)/1 var(--font-sans); cursor: pointer; }
.casa-thumb-remove:hover { background: var(--color-primary); }

/* alerts: error summary (Main .c-errbox), success (Main .c-prod), draft notice (Main .c-draft) */
.casa-alert { margin: 0 0 var(--size-32); padding: var(--size-20) var(--size-24); border-radius: var(--radius-12); }
.casa-alert > .casa-icon { display: none; }
.casa-alert-title { margin: 0 0 var(--size-8); font-weight: var(--font-weight-semibold); }
.casa-alert p:last-child { margin-bottom: 0; }
.casa-alert--error { background: var(--color-error-soft); color: var(--color-error); }
.casa-alert--error ul { margin: 0; padding-left: var(--size-20); }
.casa-alert--error a { color: var(--color-error); font-weight: var(--font-weight-semibold); }
.casa-alert--success { background: var(--color-bg); color: var(--color-text); }
.casa-alert--success .casa-alert-title { margin: 0; font-weight: var(--font-weight-regular); }
.casa-alert--info { max-width: var(--size-760); background: var(--color-info-soft); color: var(--color-text); }
.casa-alert--info .casa-alert-title { margin-bottom: var(--size-4); color: var(--color-info); }
.casa-alert:focus { outline: none; }
.casa-alert:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* ------------------------------------------------------------------ legal (Main .c-legal) */
.casa-legal-card { background: var(--color-card); border-radius: var(--radius-20); padding: var(--size-56); }
.casa-legal-card h1 { margin: 0 0 var(--size-28); font: var(--font-weight-regular) var(--size-49)/var(--size-57) var(--font-display); }
.casa-legal-card h2 { margin: var(--size-40) 0 var(--size-12); font: var(--font-weight-regular) var(--size-25)/var(--size-31) var(--font-display); }
.casa-legal-card p { max-width: var(--size-680); margin: 0; }
.casa-legal-card p + p { margin-top: var(--size-12); }
.casa-legal-card .casa-alert { margin: 0; }

/* ------------------------------------------------------------------ footer (Main .c-foot) */
.casa-footer { background: var(--color-surface); padding: var(--size-72) 0 var(--size-36); }
.casa-footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--size-48); }
.casa-footer-h { margin: 0 0 var(--size-14); font: var(--font-weight-regular) var(--size-19)/var(--size-26) var(--font-display); color: var(--color-text); }
.casa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-2); }
.casa-footer a { display: inline-flex; align-items: center; min-height: var(--size-36); color: var(--color-text); text-decoration: none; font-size: var(--size-15); }
.casa-footer a:hover { color: var(--color-primary); text-decoration: underline; }
.casa-footer .casa-footer-logo { display: inline-flex; min-height: 0; line-height: 0; }
.casa-footer-logo img { height: var(--footer-logo-height); width: auto; }
.casa-footer-strap { margin: var(--size-16) 0 0; max-width: var(--measure-strap); color: var(--color-text-muted); }
.casa-footer-contact { margin: 0; font-size: var(--size-16); line-height: var(--size-30); color: var(--color-text-muted); }
.casa-footer-contact a { display: inline; min-height: 0; font-size: inherit; color: var(--color-text-muted); }
.casa-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--size-16); margin-top: var(--size-48); padding: var(--size-16) var(--size-20); background: var(--color-bg); border-radius: var(--radius-12); font-size: var(--size-14); color: var(--color-text-muted); }
.casa-footer-base p { margin: 0; }
.casa-footer-base ul { display: flex; flex-wrap: wrap; gap: var(--size-24); }
.casa-footer-base a, .casa-footer-base button { min-height: var(--size-24); font-size: var(--size-14); color: var(--color-text-muted); text-decoration: none; }
.casa-footer-base a:hover, .casa-footer-base button:hover { color: var(--color-primary); text-decoration: underline; }
.casa-footer-base button { padding: 0; border: 0; background: none; cursor: pointer; }

/* ------------------------------------------------------------------ sticky CTA (Main .c-sticky) */
.casa-sticky { display: none; }

/* ------------------------------------------------------------------ consent banner (not designed: BDC-09; Main's palette) */
.casa-consent { position: fixed; left: var(--size-16); bottom: var(--size-16); z-index: 30; width: min(calc(100% - 2 * var(--size-16)), var(--size-560)); padding: var(--size-24); background: var(--color-surface); border-radius: var(--radius-16); box-shadow: var(--shadow-panel); }
.casa-consent h2 { margin: 0 0 var(--size-8); font: var(--font-weight-regular) var(--size-23)/var(--size-27) var(--font-display); }
.casa-consent p { font-size: var(--size-15); line-height: var(--size-23); }
.casa-consent .casa-actions { gap: var(--size-10); }

/* ------------------------------------------------------------------ tablet (Main max-width 1023) */
@media (max-width: 1023px) {
	.casa-hero-grid, .casa-svc-top, .casa-split, .casa-rev, .casa-cta, .casa-faq-grid { grid-template-columns: minmax(0, 1fr); }
	.casa-hero-grid { gap: var(--size-40); }
	.casa-hero h1 { font-size: var(--size-44); line-height: var(--size-49); }
	.casa-hero--home h1 { font-size: var(--size-51); line-height: var(--size-57); }
	.casa-leaf--hero { left: var(--size-16); bottom: calc(-1 * var(--size-56)); width: var(--size-180); height: var(--size-241); }
	.casa-cards, .casa-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.casa-split-copy, .casa-cta-copy { padding: var(--size-48) var(--size-40); }
	.casa-cover { grid-template-columns: minmax(0, 1fr); }
	.casa-faq-grid { gap: var(--size-40); }
	.casa-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ phone (Main max-width 767) */
@media (max-width: 767px) {
	.casa-header-inner { padding: var(--size-8) var(--size-20); }
	.casa-mbar .casa-btn { padding-left: var(--size-14); gap: var(--size-12); min-height: var(--size-48); }
	.casa-mbar .casa-arr { width: var(--size-44); }
	.casa-hero { padding: var(--size-32) 0 var(--size-48); }
	.casa-hero h1, .casa-hero--home h1 { font-size: var(--size-37); line-height: var(--size-42); margin-bottom: var(--size-16); }
	.casa-hero-body { font-size: var(--size-18); line-height: var(--size-29); margin-bottom: var(--size-28); }
	.casa-hero-media { order: 2; border-radius: var(--radius-16); }
	.casa-hero-media img { border-radius: var(--radius-16); }
	.casa-badge { top: var(--size-16); right: var(--size-16); }
	.casa-badge strong { font-size: var(--size-25); line-height: var(--size-26); }
	.casa-panel-dark { padding: var(--size-28) var(--size-20); border-radius: var(--radius-20); }
	.casa-feat { grid-template-columns: minmax(0, 1fr); }
	.casa-feat-img { min-height: var(--size-220); }
	.casa-feat-body { padding: var(--size-24); }
	.casa-feat-body h3 { font-size: var(--size-30); line-height: var(--size-35); }
	.casa-cards, .casa-why-grid, .casa-steps, .casa-rev-more, .casa-pair { grid-template-columns: minmax(0, 1fr); }
	.casa-facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--size-14); padding: var(--size-32) var(--size-20); border-radius: var(--radius-20); }
	.casa-fact { font-size: var(--size-26); }
	.casa-split { border-radius: var(--radius-20); }
	.casa-split-img { min-height: var(--size-260); }
	.casa-split-copy, .casa-cta-copy { padding: var(--size-32) var(--size-24); }
	.casa-rev-main { padding: var(--size-28) var(--size-24); }
	.casa-rev-main blockquote { font-size: var(--size-23); line-height: var(--size-31); }
	.casa-rev-img { min-height: var(--size-240); }
	.casa-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.casa-cover { padding: var(--size-28) var(--size-24); }
	.casa-cta { border-radius: var(--radius-20); }
	.casa-cta h2 { font-size: var(--size-35); line-height: var(--size-40); }
	.casa-cta-img { min-height: var(--size-220); }
	.casa-quote-main { padding: var(--size-28) var(--size-20); }
	.casa-legal-card { padding: var(--size-28) var(--size-20); }
	.casa-legal-card h1 { font-size: var(--size-35); line-height: var(--size-42); }
	.casa-footer-grid { grid-template-columns: minmax(0, 1fr); }
	.casa-actions .casa-btn, .casa-cta .casa-btn, .casa-form-nav .casa-btn, .casa-cover .casa-btn, .casa-talk .casa-btn { width: 100%; }
	.casa-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: var(--size-10) var(--size-16) calc(var(--size-10) + env(safe-area-inset-bottom)); background: var(--color-surface); box-shadow: var(--shadow-up); }
	.casa-sticky .casa-btn { width: 100%; }
	body.has-sticky-cta { padding-bottom: var(--sticky-cta-space); }
	.has-sticky-cta .casa-consent { bottom: calc(var(--sticky-cta-space) + var(--size-8)); }
	.casa-leaf--hero { width: var(--size-120); height: var(--size-161); left: var(--size-12); bottom: calc(-1 * var(--size-40)); }
	.casa-leaf--img, .casa-leaf--cta { width: var(--size-130); height: var(--size-174); }
	.casa-leaf--why, .casa-leaf--why2 { display: none; }
	.casa-leaf--foot { width: var(--size-130); height: var(--size-174); right: calc(-1 * var(--size-40)); top: var(--size-24); }
	.casa-p, .casa-card p, .casa-why-item p, .casa-step p, .casa-feat-body p, .casa-ticks li, .casa-aside p, .casa-aside ol { font-size: var(--size-16); line-height: var(--size-26); }
}

@media (prefers-reduced-motion: reduce) {
	.casa-btn:hover .casa-arr svg, .casa-feat:hover, .casa-card:hover .casa-card-img img { transform: none; }
}

/* ------------------------------------------------------------------ page-specific spacing from Main */
.casa-why { padding-top: var(--size-64); }
.casa-h1 { margin: 0 0 var(--size-28); font: var(--font-weight-regular) var(--size-49)/var(--size-57) var(--font-display); }
