/*
 * INNER-EXPERIENCE-004: «المنازل والأفراد», on this page only. Calmer and warmer than the projects page: a light intro
 * with the home image in a soft frame, a board of three needs that answers in place, the home services as one row
 * that goes from devices to air to care, a few devices, the information and questions, and an ending where the call
 * and WhatsApp lead. One line in the margin joins the board to the ending.
 */
.homes-page { --lx: calc(var(--gutter) / 2); --warm: #F7F4EE; }
@media (min-width: 1200px) { .homes-page { --lx: 3.333%; } }
.homes-page h2 { letter-spacing: 0; text-wrap: balance; }
.homes-eyebrow { margin: 0 0 8px; color: var(--link); font-weight: 600; font-size: 15px; }
#homes-need { scroll-margin-block-start: var(--header-h, 64px); }

/* Intro. */
.homes-hero { background: var(--warm); padding-block-end: 32px; }
.homes-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block-start: 4px; }
.homes-hero h1 { margin: 0; font-size: 32px; line-height: 1.3; text-wrap: balance; }
.homes-hero .stripe { width: 64px; margin-block-start: 14px; }
.homes-hero .lead { margin: 16px 0 0; max-width: 34rem; font-size: 17px; line-height: 1.9; }
.homes-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 24px 0 0; }
.homes-hero .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.homes-figure { position: relative; margin: 0; height: 240px; overflow: hidden; border-radius: 0 0 0 64px; background: var(--primary); }
.homes-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.homes-figure.is-empty::before { content: ""; position: absolute; inset: 22%; background: var(--motif) center / contain no-repeat; opacity: .12; }
@media (min-width: 768px) { .homes-hero h1 { font-size: 42px; } .homes-figure { height: 340px; } }
@media (min-width: 1024px) {
	.homes-hero { padding-block-end: 48px; }
	.homes-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
	.homes-hero-grid.no-image { grid-template-columns: minmax(0, 1fr); }
	.homes-hero h1 { font-size: clamp(40px, 3.6vw, 50px); }
	.homes-hero .lead { font-size: 19px; }
	.homes-figure { height: 440px; border-radius: 0 0 0 120px; }
}

/* The flow and its line. */
.homes-flow { position: relative; view-timeline: --homes block; }
.homes-rail { position: absolute; inset-block: 0; inset-inline-start: var(--lx); width: 2px; background: var(--accent); transform-origin: top; pointer-events: none; }
.homes-page .band { padding-block: 56px; }
@media (min-width: 1024px) { .homes-page .band { padding-block: 88px; } }

/* «كيف نقدر نساعدك؟» */
.homes-need h2 { margin: 0 0 24px; }
.homes-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.homes-choices { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; }
.homes-choices:has(> label:nth-of-type(2):last-of-type) { --n: 2; }
.homes-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 12px 8px; border: 2px solid var(--border); background: var(--white); color: var(--primary); font-weight: 600; font-size: 15px; line-height: 1.35; text-align: center; cursor: pointer; transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear, color var(--t-fast) linear; }
.homes-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.homes-choice-icon { width: 34px; height: 34px; color: var(--accent); }
.homes-choice:hover { border-color: var(--primary); }
.homes-choice:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.homes-choice:has(:checked) { border-color: var(--primary); background: var(--primary); color: var(--white); }
.homes-choice:has(:checked) .homes-choice-icon { color: #A9D4FF; }
.homes-stage { display: grid; min-width: 0; }
.homes-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 20px; background: var(--warm); border-block-start: 4px solid var(--accent); }
.homes-panel + .homes-panel { margin-block-start: 16px; }
.homes-panel h3 { margin: 0; font-size: 22px; color: var(--primary); }
.homes-panel-text p { margin: 8px 0 0; line-height: 1.85; }
.homes-panel-action { margin: 16px 0 0; }
.homes-guide { padding: 16px; background: var(--white); }
.homes-guide-title { margin: 0 0 6px; color: var(--link); font-weight: 600; font-size: 15px; }
.homes-guide ul { margin: 0; padding-inline-start: 18px; }
.homes-guide li { line-height: 1.8; color: var(--text); }
.homes-guide li + li { margin-block-start: 6px; }
.homes-guide-note { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.homes-art { display: block; width: 100%; height: auto; max-height: 180px; fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.homes-art .art-floor { fill: #EFE9DE; stroke: #D9CFBD; }
.homes-art .art-wall { fill: #FFFFFF; stroke: #D9CFBD; }
.homes-art .art-top { fill: #E3E9F6; }
.homes-art .art-side { fill: var(--white); }
.homes-art .art-fan { stroke-dasharray: 3 4; }
.homes-art .art-air, .homes-art .art-pipe { stroke: var(--accent); }
.homes-art .art-dot { fill: var(--accent); stroke: none; }
.homes-art .art-flow { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.homes-unsure { margin: 20px 0 0; max-width: 46rem; color: var(--muted); line-height: 1.85; }
.homes-unsure strong { color: var(--primary); }
.homes-unsure a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@supports selector(:has(*)) {
	.homes-stage > .homes-panel { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-fast) linear; }
	.homes-board:not(:has(.homes-choices)) .homes-panel,
	.homes-board:has([value="device"]:checked) [data-need="device"],
	.homes-board:has([value="install"]:checked) [data-need="install"],
	.homes-board:has([value="care"]:checked) [data-need="care"] { visibility: visible; opacity: 1; }
}
@media (min-width: 900px) {
	.homes-board { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; }
	.homes-board:not(:has(.homes-choices)) { grid-template-columns: minmax(0, 1fr); }
	.homes-choices { grid-template-columns: minmax(0, 1fr); align-content: start; }
	.homes-choice { flex-direction: row; justify-content: flex-start; min-height: 72px; padding-inline: 16px; font-size: 17px; text-align: start; }
	.homes-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 20px 32px; padding: 32px; }
	.homes-panel-text { grid-column: 1; grid-row: 1; }
	.homes-guide { grid-column: 1; grid-row: 2; align-self: start; }
	.homes-art { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-height: 300px; }
}

/* Home services: devices, then air, then care, on one line. */
.homes-services { background: var(--white); }
.homes-services h2 { margin: 0 0 28px; }
.homes-svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-block-start: 1px solid var(--border); }
.homes-svc li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border-block-end: 1px solid var(--border); }
.homes-svc-icon { grid-row: 1 / span 2; width: 40px; height: 40px; color: var(--accent); }
.homes-svc h3 { margin: 0; font-size: 18px; color: var(--primary); }
.homes-svc p { margin: 0; color: var(--muted); line-height: 1.75; }
@media (min-width: 1024px) {
	.homes-svc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; border: 0; padding-block-start: 30px; }
	.homes-svc::before { content: ""; position: absolute; }
	.homes-svc li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0 0; border: 0; border-block-start: 2px solid var(--primary); }
	.homes-svc li.is-duct { border-block-start-color: var(--accent); }
	.homes-svc li.is-care { border-block-start-style: dashed; }
	.homes-svc-icon { grid-row: auto; }
}

/* Devices: a few, like the home page's, in this page's frame. */
.homes-devices { background: var(--warm); }
.homes-devices-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-block-end: 28px; }
.homes-devices-head h2 { margin: 0; }
.homes-devices-head .lead { margin: 10px 0 0; max-width: 40rem; color: var(--muted); font-size: 16px; line-height: 1.8; }
.homes-devices-head .band-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.homes-dev-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.homes-dev { display: flex; flex-direction: column; padding: 16px; background: var(--white); border-block-end: 3px solid var(--primary); }
.homes-dev-media { position: relative; aspect-ratio: 4 / 3; margin-block-end: 14px; background: var(--surface); }
.homes-dev-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.homes-dev-media.is-drawn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--primary); }
.homes-dev-media.is-drawn svg { width: 96px; height: 96px; }
.homes-dev-media.is-drawn span { color: var(--muted); font-size: 14px; }
.homes-dev-brand { margin: 0; color: var(--link); font-size: 14px; font-weight: 600; }
.homes-dev h3 { margin: 2px 0 0; font-size: 19px; line-height: 1.45; color: var(--primary); overflow-wrap: anywhere; }
.homes-dev-model { margin: 2px 0 0; color: var(--muted); font: 500 14px/1.6 var(--font-en); overflow-wrap: anywhere; }
.homes-dev-specs { margin: 12px 0 0; display: grid; gap: 4px; }
.homes-dev-specs div { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px; border-block-end: 1px solid var(--border); font-size: 14px; }
.homes-dev-specs dt { color: var(--muted); }
.homes-dev-specs dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.homes-dev-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: auto 0 0; padding-block-start: 14px; }
.homes-dev-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 600px) { .homes-dev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .homes-dev-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .homes-dev-list:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Information and questions. */
.homes-info { background: var(--white); }
.homes-info-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.homes-info h2 { margin: 0 0 12px; font-size: 26px; }
.homes-info-text p { margin: 0; max-width: 40rem; line-height: 1.9; }
.homes-info-note { margin-block-start: 12px !important; color: var(--muted); font-size: 15px; }
.homes-faq { padding: 20px; background: var(--warm); }
.homes-q + .homes-q { border-block-start: 1px solid #E2D9C8; }
.homes-q summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-block: 10px; color: var(--primary); font-weight: 600; cursor: pointer; list-style: none; }
.homes-q summary::-webkit-details-marker { display: none; }
.homes-q summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline-start: auto; border-block-end: 2px solid var(--accent); border-inline-end: 2px solid var(--accent); transform: rotate(45deg); transition: transform var(--t-fast) linear; }
.homes-q[open] summary::after { transform: rotate(-135deg); }
.homes-q p { margin: 0 0 16px; color: var(--muted); line-height: 1.8; }
@media (min-width: 1024px) { .homes-info.has-both .homes-info-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: start; } .homes-faq { padding: 28px; } }

/* The ending: the line arrives; call and WhatsApp lead, the request stays clear. */
.homes-page .band.homes-end { position: relative; overflow: hidden; overflow: clip; container-type: inline-size; view-timeline: --homes-end block; background: var(--primary); color: #E0E5F7; --line: #7CC0FF; --cx: calc(var(--gutter) / 2); }
.homes-end-head { position: relative; margin-block-end: 28px; }
.homes-end-head::before { content: ""; position: absolute; inset-block: -1600px calc(100% - 22px); inset-inline-start: calc(-1 * var(--cx)); width: 2px; background: var(--line); transform-origin: top; pointer-events: none; }
.homes-end-head::after { content: ""; position: absolute; inset-block-start: 21px; inset-inline-start: calc(-1 * var(--cx)); width: calc(var(--cx) - 6px); height: 2px; background: var(--line); transform-origin: right; pointer-events: none; }
.homes-end-node { position: absolute; inset-block-start: 17px; inset-inline-start: calc(-4px - var(--cx)); width: 10px; height: 10px; background: var(--line); transform: rotate(45deg); }
.homes-end h2 { margin: 0; color: var(--white); font-size: 28px; line-height: 1.4; }
.homes-end-head p { margin: 10px 0 0; max-width: 38rem; color: #E0E5F7; line-height: 1.85; }
.homes-end-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.homes-end-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: center; min-height: 96px; padding: 16px 18px; background: var(--white); border: 2px solid var(--white); color: var(--primary); text-decoration: none; transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear; }
.homes-end-card:hover { color: var(--primary); box-shadow: 0 0 0 2px var(--line); }
.homes-end-card svg { grid-row: 1 / span 2; width: 40px; height: 40px; color: var(--accent); }
.homes-end-card.is-chat svg { color: #128C4A; }
.homes-end-label { font-weight: 700; font-size: 18px; }
.homes-end-card bdi { font: 700 22px/1.3 var(--font-en); }
.homes-end-msg { color: var(--muted); font-size: 14px; line-height: 1.6; }
.homes-end-request { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 2px solid rgba(255, 255, 255, .7); color: var(--white); font-weight: 600; text-decoration: none; }
.homes-end-request:hover { color: var(--white); border-color: var(--white); background: rgba(255, 255, 255, .08); }
.homes-end a:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.homes-end .wa-install, .homes-end .wa-care { display: none; }
@supports selector(:has(*)) {
	.homes-page:has([name="homes-need"][value="install"]:checked) .homes-end .wa-install,
	.homes-page:has([name="homes-need"][value="care"]:checked) .homes-end .wa-care { display: grid; }
	.homes-page:has([name="homes-need"][value="install"]:checked) .homes-end .wa-device,
	.homes-page:has([name="homes-need"][value="care"]:checked) .homes-end .wa-device { display: none; }
}
@media (min-width: 900px) {
	.homes-page .band.homes-end { --edge: calc(var(--gutter) + max(0px, (100cqw - var(--wrap) - 2 * var(--gutter)) / 2)); }
	.homes-end-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px; }
	.homes-end h2 { font-size: 34px; }
	.homes-end-head::before { inset-block-end: calc(100% - 26px); }
	.homes-end-head::after { inset-block-start: 25px; }
	.homes-end-node { inset-block-start: 21px; }
}
@media (min-width: 1200px) { .homes-page .band.homes-end { --cx: calc(var(--edge) - 3.333cqw); } }

@media (prefers-reduced-motion: no-preference) {
	.homes-board:has([value="device"]:checked) [data-need="device"] .art-flow,
	.homes-board:has([value="install"]:checked) [data-need="install"] .art-flow,
	.homes-board:has([value="care"]:checked) [data-need="care"] .art-flow { animation: homes-flow .6s ease-out both; }
	.homes-choice:has(:checked) .homes-choice-icon { animation: homes-pick .3s ease-out; }
	@keyframes homes-flow { from { stroke-dashoffset: 1; } }
	@keyframes homes-pick { 40% { transform: translateY(-3px); } }
	@supports (animation-timeline: view()) {
		.homes-rail { animation: homes-down linear both; animation-timeline: --homes; animation-range: cover 30vh cover calc(100% - 50vh); }
		.homes-svc li, .homes-dev-list > li { animation: homes-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
		.homes-end-head::before { animation: homes-down linear both; animation-timeline: --homes-end; animation-range: entry 0% entry 40%; }
		.homes-end-head::after { animation: homes-across linear both; animation-timeline: --homes-end; animation-range: entry 40% entry 60%; }
		.homes-end-node { animation: homes-node linear both; animation-timeline: --homes-end; animation-range: entry 36% entry 46%; }
		@keyframes homes-down { from { transform: scaleY(0); } }
		@keyframes homes-across { from { transform: scaleX(0); } }
		@keyframes homes-node { from { opacity: 0; } }
		@keyframes homes-rise { from { opacity: .35; translate: 0 20px; } }
	}
}