/* ==========================================================================
   The material, the FAQ, the kraft close, the footer.
   ========================================================================== */

/* ---------- Why acrylic: a drawing of one clear panel ---------- */

.qc-material { padding: var(--top, var(--section)) var(--gutter) var(--section); }
.qc-material__head { max-width: var(--max); margin: 0 auto; }
.qc-material__head h2 { margin: 0.6rem 0 1rem; }
.qc-material__head p { color: var(--mist); max-width: 40ch; font-size: 1.1rem; }

.qc-material__drawing {
	position: relative;
	display: grid;
	place-items: center;
	max-width: var(--max);
	min-height: clamp(420px, 62svh, 640px);
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	perspective: 1300px;
}
.qc-material__panel {
	position: relative;
	width: min(40vw, 520px);
	aspect-ratio: 5 / 3.6;
	container-type: inline-size;
	border-radius: 5px;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.08));
	box-shadow: 30px 50px 70px -30px rgba(0, 0, 0, 0.75);
	transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)) rotateZ(-2deg);
	transition: transform 1000ms var(--ease-out);
}
.qc-material__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	transform: translate(9px, 10px);
	background: linear-gradient(135deg, rgba(235, 202, 180, 0.5), rgba(235, 202, 180, 0.08) 60%);
	box-shadow: inset 0 0 0 1px rgba(235, 202, 180, 0.5);
}
.qc-material__panel .qc-glass { background-position: calc(var(--gx, 0.6) * 100%) 50%; transition: background-position 600ms var(--ease-out); }
.qc-material__panel .qc-bolts { --b: 16px; --o: 5cqi; }
.qc-material__mark { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); opacity: 0.18; }

.qc-callout {
	position: absolute;
	display: grid;
	gap: 0.3rem;
	width: min(24vw, 270px);
}
.qc-callout__text { font: 400 clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem)/1.2 var(--f-display); }
.qc-callout .qc-micro { color: var(--edge); opacity: 1; }
.qc-callout__line { position: absolute; top: 0.55rem; height: 1px; width: clamp(40px, 7vw, 120px); background: rgba(251, 246, 241, 0.45); }
.qc-callout__line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--edge); }
.qc-callout--tl { left: 0; top: 6%; }
.qc-callout--ml { left: 0; top: 44%; }
.qc-callout--bl { left: 4%; bottom: 4%; }
.qc-callout--tr { right: 0; top: 10%; text-align: right; justify-items: end; }
.qc-callout--mr { right: 0; top: 56%; text-align: right; justify-items: end; }
.qc-callout--tl .qc-callout__line,
.qc-callout--ml .qc-callout__line,
.qc-callout--bl .qc-callout__line { left: 100%; margin-left: 0.75rem; }
.qc-callout--tl .qc-callout__line::after,
.qc-callout--ml .qc-callout__line::after,
.qc-callout--bl .qc-callout__line::after { right: -3px; }
.qc-callout--tr .qc-callout__line,
.qc-callout--mr .qc-callout__line { right: 100%; margin-right: 0.75rem; }
.qc-callout--tr .qc-callout__line::after,
.qc-callout--mr .qc-callout__line::after { left: -3px; }

.qc-motion .qc-material:not(.is-in) .qc-callout { opacity: 0; }
.qc-motion .qc-material.is-in .qc-callout { animation: qc-fade 500ms var(--ease-out) calc(300ms + var(--c, 0) * 120ms) both; }
.qc-motion .qc-material.is-in .qc-callout__line { animation: qc-line 600ms var(--ease-cut) calc(200ms + var(--c, 0) * 120ms) both; transform-origin: inherit; }
.qc-callout:nth-child(2) { --c: 1; }
.qc-callout:nth-child(3) { --c: 2; }
.qc-callout:nth-child(4) { --c: 3; }
.qc-callout:nth-child(5) { --c: 4; }

@media (max-width: 900px) {
	.qc-material__drawing { display: block; min-height: 0; }
	.qc-material__panel { width: min(78vw, 420px); margin: 1rem auto 3rem; }
	.qc-material__callouts { display: grid; gap: 1.1rem; }
	.qc-callout { position: relative; inset: auto !important; width: auto; text-align: left !important; justify-items: start !important; padding: 1rem 0 0 1.5rem; border-top: 1px solid var(--ink-line); }
	.qc-callout__line { left: 0 !important; right: auto !important; margin: 0 !important; top: 1.55rem; width: 0.9rem; }
	.qc-callout__line::after { display: none; }
}

/* ---------- FAQ ---------- */

.qc-material__faq,
.qc-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	max-width: var(--max);
	margin: clamp(4rem, 8vw, 6rem) auto 0;
	align-items: start;
}
.qc-faq { padding: var(--section) var(--gutter); background: var(--paper); color: var(--ink); }
.qc-faq__grid { margin-top: 0; }
.qc-faq__title { max-width: 12ch; }
.qc-faq__list { border-bottom: 1px solid var(--ink-line); }
.qc-faq .qc-faq__list { border-color: var(--paper-line); }
.qc-faq__item { border-top: 1px solid var(--ink-line); interpolate-size: allow-keywords; }
.qc-faq .qc-faq__item { border-color: var(--paper-line); }
.qc-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 60px;
	padding: 1rem 0;
	font-weight: 600;
	font-size: 1.075rem;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
.qc-faq__q::-webkit-details-marker { display: none; }
.qc-faq__q .qc-icon { transition: transform var(--t-mid) var(--ease-cut); }
.qc-faq__item[open] .qc-faq__q .qc-icon { transform: rotate(45deg); }
.qc-faq__a { padding: 0 3rem 1.5rem 0; max-width: 62ch; opacity: 0.8; }
.qc-faq__a strong { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
	.qc-faq__item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--t-mid) var(--ease-cut), content-visibility var(--t-mid) allow-discrete;
	}
	.qc-faq__item[open]::details-content { block-size: auto; }
}
@media (max-width: 860px) {
	.qc-material__faq,
	.qc-faq__grid { grid-template-columns: 1fr; }
}

/* ---------- The kraft close ---------- */

.qc-close { position: relative; overflow: hidden; }
.qc-close__paper { position: relative; padding: clamp(5rem, 10vw, 9rem) var(--gutter); }
.qc-close__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 2.5rem clamp(2rem, 6vw, 6rem);
	align-items: end;
	max-width: var(--max);
	margin-inline: auto;
}
.qc-close__title {
	font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 12ch;
	color: var(--white);
}
.qc-close__text { max-width: 44ch; font-size: 1.1rem; }
.qc-close__list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.qc-close__list[hidden] { display: none; }
.qc-close__list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.75rem 0.35rem 0.35rem; border-radius: 3px; background: rgba(51, 32, 27, 0.28); font-size: 0.85rem; font-weight: 600; }
.qc-close__list .qc-mini { width: 40px; }
.qc-close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 2rem; }
.qc-close__phone { color: var(--white); font-weight: 600; text-underline-offset: 0.3em; }
.qc-close__office { margin-top: 2rem; font-size: 0.925rem; opacity: 0.9; }
.qc-close__office a { color: var(--white); }

/* The corner of the backing paper lifts: peel it to start. */
.qc-close__corner {
	--peel: 64px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: var(--peel);
	height: var(--peel);
	background: linear-gradient(225deg, var(--ink) 0 50%, transparent 50%);
	transition: width 700ms var(--ease-mount), height 700ms var(--ease-mount);
}
.qc-close__corner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(225deg, transparent 50%, #e6d4c9 50%, #c9aa9a 80%, #a88676);
	filter: drop-shadow(-6px 6px 8px rgba(0, 0, 0, 0.35));
}
.qc-close__corner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(225deg, rgba(235, 202, 180, 0.55) 0 1px, transparent 2px 50%, transparent 50%);
}
.qc-close:has(.qc-close__actions a:hover) .qc-close__corner,
.qc-close:has(.qc-close__actions a:focus-visible) .qc-close__corner { --peel: 150px; }
@media (max-width: 781px) {
	.qc-close__grid { grid-template-columns: 1fr; }
	.qc-close__corner { --peel: 44px; }
}

/* ---------- Footer ---------- */

.qc-footer { background: var(--ink); color: var(--mist); font-size: 0.95rem; }
.qc-footer a:not(.qc-btn) { color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.qc-footer a:not(.qc-btn):hover { text-decoration: underline; text-underline-offset: 0.2em; }
.qc-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) repeat(3, minmax(0, 2fr));
	gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
	max-width: var(--max);
	margin-inline: auto;
	padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 3rem;
}
.qc-footer__logo { width: 180px; height: auto; }
.qc-footer__line { margin: 1.25rem 0 1.75rem; max-width: 30ch; }
.qc-footer__title { margin-bottom: 0.9rem; font: 600 0.8rem/1.2 var(--f-text); letter-spacing: 0.02em; color: var(--edge); }
.qc-footer ul { display: grid; gap: 0.45rem; }
.qc-footer__col--cats ul { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.qc-footer__address { font-style: normal; margin-bottom: 0.6rem; }
.qc-footer__col p + p { margin-top: 0.5rem; }
.qc-footer__social { margin-top: 1.25rem; }
.qc-footer__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	max-width: var(--max);
	margin-inline: auto;
	padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--ink-line);
	font-size: 0.85rem;
	opacity: 0.8;
}
@media (max-width: 1100px) {
	.qc-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qc-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .qc-footer__inner { grid-template-columns: 1fr; } }