/*
 * INNER-EXPERIENCE-001: «المشروعات والكميات», on this page only. The home page's language with this page's job: a navy
 * intro with the page's stops, a board for the scope of work, the works, a sheet for preparing a request and
 * the request itself. The air line here does not run one rail down the page: it holds a margin for one
 * stop and crosses to the other margin at the seam to the next, and it ends at the request.
 */
.proj-page { --lx: calc(var(--gutter) / 2); }
.proj-page h2 { letter-spacing: 0; text-wrap: balance; }
.proj-page .about-eyebrow { margin: 0 0 8px; color: var(--link); font-weight: 600; font-size: 15px; }
.proj-page :is(#proj-services, #proj-works, #proj-prepare, #proj-contact) { scroll-margin-block-start: var(--header-h, 64px); }
.proj-num { color: var(--link); font: 600 14px/1 var(--font-en); }
@media (min-width: 1200px) { .proj-page { --lx: 3.333%; } }

/* Intro. */
.proj-hero { position: relative; overflow: hidden; overflow: clip; background: var(--primary); color: #E0E5F7; padding-block-end: 28px; }
.proj-hero .breadcrumb ol, .proj-hero .breadcrumb li + li::before { color: #C6CBE7; }
.proj-hero a { color: var(--white); }
.proj-hero :focus-visible { outline-color: var(--white); }
.proj-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block-start: 8px; }
.proj-hero h1 { margin: 0; color: var(--white); font-size: 34px; line-height: 1.26; letter-spacing: 0; text-wrap: balance; }
.proj-hero .stripe { width: 72px; margin-block-start: 18px; }
.proj-hero .lead { margin: 18px 0 0; max-width: 36rem; color: #E0E5F7; font-size: 17px; line-height: 1.85; }
.proj-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 24px 0 0; }
.proj-hero .button { background: var(--white); color: var(--primary); }
.proj-hero .button:hover { background: #E6EDFC; color: var(--primary); }
.proj-hero .text-link, .proj-hero .text-link:hover { color: var(--white); }
.proj-hero .hero-note { margin: 16px 0 0; color: #C6CBE7; font-size: 15px; }
.proj-direct { margin: 4px 0 0; color: #C6CBE7; font-size: 15px; }
.proj-direct a { display: inline-flex; align-items: center; min-height: 44px; font: 700 17px/1 var(--font-en); text-underline-offset: 5px; }
.proj-figure { position: relative; height: 230px; margin: 0; background: #2A2380; clip-path: polygon(0 0, calc(100% - 48px) 0, 100% 48px, 100% 100%, 48px 100%, 0 calc(100% - 48px)); }
.proj-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.proj-figure.is-empty::before { content: ""; position: absolute; inset: 20%; background: var(--motif) center / contain no-repeat; opacity: .12; }
.proj-guide { margin-block-start: 28px; border-block-start: 1px solid rgba(255, 255, 255, .25); }
.proj-guide ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proj-guide a { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 600; text-decoration: none; }
.proj-guide a:hover { text-decoration: underline; text-underline-offset: 5px; }
.proj-guide span { color: #A9D4FF; font: 600 13px/1 var(--font-en); }
@media (min-width: 768px) {
	.proj-hero h1 { font-size: 44px; }
	.proj-figure { height: 340px; }
	.proj-guide ol { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
	.proj-hero { padding-block-end: 12px; }
	.proj-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 16px 24px; }
	.proj-hero h1 { font-size: clamp(42px, 3.8vw, 52px); }
	.proj-hero .lead { font-size: 19px; }
	.proj-figure { height: 420px; clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 72px, 100% 100%, 72px 100%, 0 calc(100% - 72px)); }
	.proj-guide { margin-block-start: 16px; }
}

/* The line: a run down one margin, a node where it arrives, a seam across to the other. */
.proj-stop { position: relative; view-timeline: --leg block; }
.leg { position: absolute; inset: 0; pointer-events: none; }
.leg i { position: absolute; display: block; background: var(--accent); }
.leg-run { inset-block: 0; width: 2px; transform-origin: top; }
.leg-node { inset-block-start: -6px; width: 12px; height: 12px; transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(0, 117, 244, .16); }
.leg-seam { inset-block-end: 0; inset-inline: var(--lx); height: 2px; }
.leg.is-start .leg-run { inset-inline-start: var(--lx); }
.leg.is-start .leg-node { inset-inline-start: calc(var(--lx) - 5px); }
.leg.is-start .leg-seam { transform-origin: right; }
.leg.is-end .leg-run { inset-inline-end: var(--lx); }
.leg.is-end .leg-node { inset-inline-end: calc(var(--lx) - 5px); }
.leg.is-end .leg-seam { transform-origin: left; }

.proj-head { max-width: 44rem; margin-block-end: 28px; }
.proj-head h2 { margin: 0; }
.proj-head .lead { margin: 12px 0 0; color: var(--muted); font-size: 17px; line-height: 1.85; }
@media (min-width: 1024px) { .proj-head { margin-block-end: 44px; } }

/* Scope of work. */
.proj-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.proj-choices { min-width: 0; margin: 0; padding: 0; border: 0; border-block-start: 1px solid var(--border); }
.proj-choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding-block: 8px; padding-inline: 12px; border-block-end: 1px solid var(--border); color: var(--primary); font-weight: 600; font-size: 17px; line-height: 1.4; cursor: pointer; transition: background-color var(--t-fast) linear, color var(--t-fast) linear; }
.proj-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.proj-choice:hover { background: var(--surface); }
.proj-choice:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.proj-choice:has(:checked) { background: var(--primary); color: var(--white); }
.proj-choice:has(:checked) .proj-num { color: #A9D4FF; }
.proj-stage { display: grid; min-width: 0; }
.proj-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 20px; background: var(--surface); border-block-start: 4px solid var(--accent); }
.proj-panel + .proj-panel { margin-block-start: 16px; }
.proj-panel h3 { margin: 0; font-size: 22px; color: var(--primary); }
.proj-panel-text p { margin: 8px 0 0; line-height: 1.85; }
.proj-useful-title { margin: 0 0 4px; color: var(--link); font-weight: 600; font-size: 15px; }
.proj-useful p:last-child { margin: 0; color: var(--muted); line-height: 1.85; }
.proj-panel-action { margin: 0; }
.proj-art { display: block; width: 100%; height: auto; max-height: 190px; overflow: visible; fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.proj-art .art-ground { stroke: var(--border); }
.proj-art .art-top { fill: #E3E9F6; }
.proj-art .art-side { fill: var(--white); }
.proj-art .art-duct, .proj-art .art-flange { fill: #EDF3FC; }
.proj-art .art-fan { stroke-dasharray: 3 4; }
.proj-art .art-air { stroke: var(--accent); }
.proj-art .art-dot { fill: var(--accent); stroke: none; }
.proj-art .art-flow { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.proj-note { margin: 20px 0 0; max-width: 46rem; color: var(--muted); font-size: 15px; line-height: 1.8; }
@supports selector(:has(*)) {
	.proj-stage > .proj-panel { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity var(--t-fast) linear; }
	.proj-board:not(:has(.proj-choices)) .proj-panel,
	.proj-board:has([value="central"]:checked) [data-group="central"],
	.proj-board:has([value="ceiling"]:checked) [data-group="ceiling"],
	.proj-board:has([value="split"]:checked) [data-group="split"],
	.proj-board:has([value="duct"]:checked) [data-group="duct"],
	.proj-board:has([value="care"]:checked) [data-group="care"] { visibility: visible; opacity: 1; }
}
@media (min-width: 900px) {
	.proj-board { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: stretch; }
	.proj-board:not(:has(.proj-choices)) { grid-template-columns: minmax(0, 1fr); }
	.proj-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 16px 32px; padding: 32px; }
	.proj-panel-text, .proj-useful, .proj-panel-action { grid-column: 1; }
	.proj-panel-action { align-self: end; }
	.proj-art { grid-column: 2; grid-row: 1 / span 3; align-self: center; max-height: 280px; }
}

/* Works: stay short, and let the line pass beside them. */
.proj-page .band.proj-works { background: var(--surface); }
.proj-works .band-head { margin-block-end: 28px; }
.proj-works .band-link { min-height: 44px; display: inline-flex; align-items: center; }
.proj-works .project-card .card-body { padding-inline: 16px; }
@media (min-width: 768px) { .proj-works .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .proj-works .cards { gap: 32px; } }

/* Preparing a request. */
.proj-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.proj-items { border-block-start: 2px solid var(--primary); }
.proj-item { border-block-end: 1px solid var(--border); }
.proj-item summary, .proj-q summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-block: 12px; color: var(--primary); font-weight: 600; font-size: 18px; line-height: 1.45; cursor: pointer; list-style: none; }
.proj-item summary::-webkit-details-marker, .proj-q summary::-webkit-details-marker { display: none; }
.proj-item summary::after, .proj-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; }
.proj-item[open] summary::after, .proj-q[open] summary::after { transform: rotate(-135deg); }
.proj-item summary:hover, .proj-q summary:hover { color: var(--link); }
.proj-item-body { padding-block-end: 20px; padding-inline-start: 30px; }
.proj-line + .proj-line { margin-block-start: 12px; }
.proj-line h3 { margin: 0; font-size: 16px; color: var(--primary); }
.proj-line p { margin: 2px 0 0; color: var(--muted); line-height: 1.8; }
.proj-line-action { margin: 8px 0 0; }
.proj-line-action a { display: inline-flex; align-items: center; min-height: 44px; }
.proj-faq { padding: 20px; background: var(--surface); }
.proj-faq h3 { margin: 0 0 4px; font-size: 20px; color: var(--primary); }
.proj-q + .proj-q { border-block-start: 1px solid var(--border); }
.proj-q summary { font-size: 16px; }
.proj-q p { margin: 0 0 16px; color: var(--muted); line-height: 1.8; }
@media (min-width: 1024px) {
	.proj-sheet.has-both { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
	.proj-faq { padding: 28px; }
}

/* The end of the line. */
.proj-page .band.proj-closing { position: relative; overflow: hidden; overflow: clip; container-type: inline-size; view-timeline: --closing block; background: var(--primary); color: #E0E5F7; }
.proj-closing { --line: #7CC0FF; --cx: calc(var(--gutter) / 2); }
.proj-closing .about-eyebrow { color: #A9D4FF; }
.proj-closing h2 { margin: 0; color: var(--white); }
.proj-closing-head { margin-block-end: 28px; }
.proj-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.proj-option { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; align-items: center; min-height: 96px; padding: 16px 18px; border: 2px solid rgba(255, 255, 255, .5); color: var(--white); text-decoration: none; transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear; }
.proj-option:hover { color: var(--white); border-color: var(--line); }
.proj-option h3 { margin: 0; font-size: 18px; line-height: 1.45; color: inherit; }
.proj-option-help { font-size: 15px; line-height: 1.6; color: #D6DCF2; }
.proj-option-link { font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.proj-option-link.is-number { font: 700 21px/1.3 var(--font-en); text-decoration: none; }
.proj-icon { grid-row: 1 / span 3; width: 40px; height: 40px; color: #A9D4FF; overflow: visible; }
.proj-option.is-chat .proj-icon { color: #6FD79B; }
.proj-option.is-main { padding: 20px 18px; background: var(--white); border-color: var(--white); color: var(--primary); }
.proj-option.is-main:hover { color: var(--primary); border-color: var(--line); box-shadow: 0 0 0 2px var(--line); }
.proj-option.is-main h3 { font-size: 21px; }
.proj-option.is-main .proj-option-help { color: var(--muted); }
.proj-option.is-main .proj-icon { color: var(--accent); }
.proj-option-action { justify-self: start; margin-block-start: 8px; padding: 10px 20px; background: var(--primary); color: var(--white); font-weight: 600; font-size: 16px; }
.proj-page .proj-option:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.proj-option.is-main::before { content: ""; position: absolute; inset-block: -1600px 50%; inset-inline-start: calc(-2px - var(--cx)); width: 2px; background: var(--line); transform-origin: top; pointer-events: none; }
.proj-option.is-main::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: calc(-2px - var(--cx)); width: var(--cx); height: 2px; background: var(--line); transform-origin: right; pointer-events: none; }
.proj-end-node { position: absolute; inset-block-start: calc(50% - 5px); inset-inline-start: calc(-7px - var(--cx)); width: 12px; height: 12px; background: var(--line); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(124, 192, 255, .22); pointer-events: none; }
.proj-options:has(.proj-option:hover) .is-main::before, .proj-options:has(.proj-option:focus-visible) .is-main::before { opacity: .55; }
.proj-options:has(.is-main:hover) .is-main::before, .proj-options:has(.is-main:focus-visible) .is-main::before { opacity: 1; }
@media (min-width: 900px) {
	.proj-closing { --edge: calc(var(--gutter) + max(0px, (100cqw - var(--wrap) - 2 * var(--gutter)) / 2)); }
	.proj-closing-head { margin-block-end: 40px; }
	.proj-options { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: 20px; }
	.proj-option { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 24px; min-height: 240px; }
	.proj-icon { grid-row: auto; margin-block-end: 8px; }
	.proj-option.is-main { padding: 28px 32px; }
	.proj-option.is-main h3 { font-size: 26px; }
	.proj-option-action { margin-block-start: auto; }
	.proj-option-link { align-self: end; }
}
@media (min-width: 1200px) { .proj-closing { --cx: calc(var(--edge) - 3.333cqw); } }

/* Short responses to a choice. */
@media (prefers-reduced-motion: no-preference) {
	.proj-board:has([value="central"]:checked) [data-group="central"] .art-flow,
	.proj-board:has([value="ceiling"]:checked) [data-group="ceiling"] .art-flow,
	.proj-board:has([value="split"]:checked) [data-group="split"] .art-flow,
	.proj-board:has([value="duct"]:checked) [data-group="duct"] .art-flow,
	.proj-board:has([value="care"]:checked) [data-group="care"] .art-flow { animation: proj-flow .6s ease-out both; }
	.proj-option:is(:hover, :focus-visible) .ic-move { animation: proj-nudge .36s ease-out; }
	@keyframes proj-flow { from { stroke-dashoffset: 1; } }
	@keyframes proj-nudge { 40% { transform: translateX(-3px); } }

	/* The tip of the line follows the middle of the screen; opening further down shows it already drawn. */
	@supports (animation-timeline: view()) {
		.leg-run { animation: leg-down linear both; animation-timeline: --leg; animation-range: cover 72vh cover calc(100% - 50vh); }
		.leg-node { animation: leg-node linear both; animation-timeline: --leg; animation-range: cover 62vh cover 72vh; }
		.leg-seam { animation: leg-across linear both; animation-timeline: --leg; animation-range: cover calc(100% - 50vh) cover calc(100% - 28vh); }
		.proj-option.is-main::before { animation: leg-down linear both; animation-timeline: --closing; animation-range: entry 0% entry 55%; }
		.proj-end-node { animation: leg-node linear both; animation-timeline: --closing; animation-range: entry 50% entry 62%; }
		.proj-option.is-main::after { animation: leg-across linear both; animation-timeline: --closing; animation-range: entry 60% entry 78%; }
		@keyframes leg-down { from { transform: scaleY(0); } }
		@keyframes leg-across { from { transform: scaleX(0); } }
		@keyframes leg-node { from { opacity: 0; } }
	}
}