/* ==========================================================================
   Prestige Detailing — FAQ accordion (pd-faq)
   Figma: 73:4063 (rows, closed) · 73:4064 (row, open). Frame 1408 wide.
   Rendered inside #wrap_all, so every rule is paired: ".pd-faq .x" + "#top #wrap_all .pd-faq .x".
   Self-contained: carries its own copy of pd-main-nav's shared tokens and the
   .pd-nav-t cap trim, so it never depends on the nav stylesheet being current.
   No !important, no margin/padding shorthands.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-faq-btt  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-faq-btb  { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
.pd-faq {
	/* Shared site tokens — same values as pd-main-nav */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-faq-row: #242222;                      /* closed row */
	--pd-faq-row-open: rgba(255, 255, 255, 0.08);
	--pd-faq-line: rgba(255, 255, 255, 0.2);    /* 1px frame, drawn as an inset shadow */
	--pd-faq-tick: #fff;                        /* corner brackets */
	--pd-faq-tick-len: 8px;
	--pd-faq-tick-w: 2px;
	--pd-faq-red: #d60c0c;
	--pd-faq-dim: rgba(255, 255, 255, 0.72);
	--pd-faq-speed: 0.35s;

	/* Margins: inline --pd-faq-mt / --pd-faq-mb from the panel; the ramp only writes -now */
	--pd-faq-mt-now: var(--pd-faq-mt, 0px);
}

/* Geometry ramps with the SECTION's width (container units, resolved on each child):
   the design's number at 1408 and a floor for phones. */
.pd-faq .pd-faq__list,
#top #wrap_all .pd-faq .pd-faq__list {
	--pd-faq-px: clamp(20px, calc(56 * 100cqi / 1408), 56px);     /* 56 */
	--pd-faq-py: clamp(24px, calc(40 * 100cqi / 1408), 40px);     /* 40 */
	--pd-faq-gap: clamp(32px, calc(64 * 100cqi / 1408), 64px);    /* 64: header → answer cap */
	--pd-faq-pb: clamp(32px, calc(56 * 100cqi / 1408), 56px);     /* 56: answer → bottom, open */
	--pd-faq-num-w: clamp(44px, calc(181 * 100cqi / 1408), 181px);/* 181 */
	--pd-faq-num-fs: clamp(16px, calc(22 * 100cqi / 1408), 22px); /* 22 */
	--pd-faq-q-fs: clamp(20px, calc(32 * 100cqi / 1408), 32px);   /* 32 */
	--pd-faq-icon: clamp(24px, calc(32 * 100cqi / 1408), 32px);   /* 32 */
	--pd-faq-icon-gap: clamp(16px, calc(24 * 100cqi / 1408), 24px);
}

@media (max-width: 1199px) {
	.pd-faq.pd-faq--scale { --pd-faq-mt-now: calc(var(--pd-faq-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-faq.pd-faq--scale { --pd-faq-mt-now: calc(var(--pd-faq-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav ---------- */
.pd-faq .pd-nav-t,
#top #wrap_all .pd-faq .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-faq { --pd-fb: 1; }
}

/* ---------- Section ---------- */
.pd-faq,
#top #wrap_all .pd-faq {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	container-type: inline-size;
	container-name: pd-faq;
	margin-top: var(--pd-faq-mt-f, var(--pd-faq-mt-now));
	margin-bottom: var(--pd-faq-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.pd-faq .pd-faq__list,
#top #wrap_all .pd-faq .pd-faq__list {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Row ----------
   The frame is an inset shadow (takes no space); rows overlap by its 1px so neighbours share one line.
   The corner brackets are one pseudo-element painting 8 bars as backgrounds — no markup. */
.pd-faq .pd-faq__item,
#top #wrap_all .pd-faq .pd-faq__item {
	position: relative;
	display: block;
	box-sizing: border-box;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	background-color: var(--pd-faq-row);
	box-shadow: inset 0 0 0 1px var(--pd-faq-line);
	transition: background-color var(--pd-faq-speed) ease;
}

.pd-faq .pd-faq__item + .pd-faq__item,
#top #wrap_all .pd-faq .pd-faq__item + .pd-faq__item {
	margin-top: -1px;
}

/* Closed: an L bracket in each corner, flush inside the frame (Figma 73:4091–4102). */
.pd-faq .pd-faq__item::before,
#top #wrap_all .pd-faq .pd-faq__item::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)), linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)),
		linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)), linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)),
		linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)), linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)),
		linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick)), linear-gradient(var(--pd-faq-tick), var(--pd-faq-tick));
	background-repeat: no-repeat;
	background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
	background-size:
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), var(--pd-faq-tick-len) var(--pd-faq-tick-w),
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), var(--pd-faq-tick-len) var(--pd-faq-tick-w),
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), var(--pd-faq-tick-len) var(--pd-faq-tick-w),
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), var(--pd-faq-tick-len) var(--pd-faq-tick-w);
}

/* ---------- Open visuals: .is-open (script), or [open] where the script has not mounted ---------- */
.pd-faq .pd-faq__item.is-open,
.pd-faq:not(.pd-faq--ready) .pd-faq__item[open],
#top #wrap_all .pd-faq .pd-faq__item.is-open,
#top #wrap_all .pd-faq:not(.pd-faq--ready) .pd-faq__item[open] {
	background-color: var(--pd-faq-row-open);
}

/* Open: vertical ticks only, straddling the frame 1px out and 2px past it (Figma 73:4080–4083). */
.pd-faq .pd-faq__item.is-open::before,
.pd-faq:not(.pd-faq--ready) .pd-faq__item[open]::before,
#top #wrap_all .pd-faq .pd-faq__item.is-open::before,
#top #wrap_all .pd-faq:not(.pd-faq--ready) .pd-faq__item[open]::before {
	top: -2px;
	right: -1px;
	bottom: -2px;
	left: -1px;
	background-size:
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), 0 0,
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), 0 0,
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), 0 0,
		var(--pd-faq-tick-w) var(--pd-faq-tick-len), 0 0;
}

/* ---------- Header (the <summary>) ---------- */
.pd-faq .pd-faq__q,
#top #wrap_all .pd-faq .pd-faq__q {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: calc(var(--pd-faq-icon) + 2 * var(--pd-faq-py));
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: var(--pd-faq-py);
	padding-bottom: var(--pd-faq-py);
	padding-left: var(--pd-faq-px);
	padding-right: var(--pd-faq-px);
	border-width: 0;
	border-style: none;
	border-radius: 0;
	list-style: none;
	cursor: pointer;
	color: #fff;
	background-color: transparent;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.pd-faq .pd-faq__q::-webkit-details-marker,
#top #wrap_all .pd-faq .pd-faq__q::-webkit-details-marker {
	display: none;
}

.pd-faq .pd-faq__q::marker,
#top #wrap_all .pd-faq .pd-faq__q::marker {
	content: "";
}

.pd-faq .pd-faq__q:focus-visible,
#top #wrap_all .pd-faq .pd-faq__q:focus-visible {
	outline: 2px solid var(--pd-faq-red);
	outline-offset: -2px;
}

.pd-faq .pd-faq__num,
#top #wrap_all .pd-faq .pd-faq__num {
	--fs: var(--pd-faq-num-fs);
	--lh: 32px;
	flex: 0 0 var(--pd-faq-num-w);
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	color: var(--pd-faq-dim);
	white-space: nowrap;
}

.pd-faq .pd-faq__title,
#top #wrap_all .pd-faq .pd-faq__title {
	--fs: var(--pd-faq-q-fs);
	--lh: calc(var(--pd-faq-q-fs) * 0.5 + 16px);   /* 32/32 at the design width, 20/26 on phones */
	flex: 1 1 auto;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	font-family: var(--pd-nav-font);
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background-color: transparent;
	overflow-wrap: break-word;
	transition: color 0.2s ease;
}

/* The Question-tag choice must not change the look — only the document outline. */
.pd-faq .pd-faq__title::before,
.pd-faq .pd-faq__title::after,
#top #wrap_all .pd-faq .pd-faq__title::before,
#top #wrap_all .pd-faq .pd-faq__title::after {
	content: none;
}

.pd-faq .pd-faq__icon,
#top #wrap_all .pd-faq .pd-faq__icon {
	position: relative;
	flex: 0 0 var(--pd-faq-icon);
	display: block;
	width: var(--pd-faq-icon);
	height: var(--pd-faq-icon);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: var(--pd-faq-icon-gap);
	margin-right: 0;
	color: var(--pd-faq-red);
}

.pd-faq .pd-faq__svg,
#top #wrap_all .pd-faq .pd-faq__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.pd-faq .pd-faq__v,
#top #wrap_all .pd-faq .pd-faq__v {
	transform-box: view-box;
	transform-origin: 16px 16px;
	transform: scaleY(1);
	transition: transform var(--pd-faq-speed) ease;
}

/* plus → minus: the vertical stroke folds away */
.pd-faq .pd-faq__item.is-open .pd-faq__v,
.pd-faq:not(.pd-faq--ready) .pd-faq__item[open] .pd-faq__v,
#top #wrap_all .pd-faq .pd-faq__item.is-open .pd-faq__v,
#top #wrap_all .pd-faq:not(.pd-faq--ready) .pd-faq__item[open] .pd-faq__v {
	transform: scaleY(0);
}

/* ---------- Answer ----------
   panel (grid 0fr ↔ 1fr) > clip (no padding: a padded box in a 0fr track never reaches 0) > answer (padding). */
.pd-faq .pd-faq__panel,
#top #wrap_all .pd-faq .pd-faq__panel {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	transition: grid-template-rows var(--pd-faq-speed) ease;
}

.pd-faq.pd-faq--ready .pd-faq__item:not(.is-open) .pd-faq__panel,
#top #wrap_all .pd-faq.pd-faq--ready .pd-faq__item:not(.is-open) .pd-faq__panel {
	grid-template-rows: 0fr;
}

.pd-faq .pd-faq__clip,
#top #wrap_all .pd-faq .pd-faq__clip {
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.pd-faq .pd-faq__answer,
#top #wrap_all .pd-faq .pd-faq__answer {
	display: flow-root;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: calc(var(--pd-faq-gap) - var(--pd-faq-py));
	padding-bottom: var(--pd-faq-pb);
	padding-left: var(--pd-faq-px);
	padding-right: var(--pd-faq-px);
}

/* Body: the client's rich text. 16/24, 72% white; a blank line (24) between blocks. */
.pd-faq .pd-faq__body,
#top #wrap_all .pd-faq .pd-faq__body {
	display: flow-root;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-family: var(--pd-nav-font);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--pd-faq-dim);
	overflow-wrap: break-word;
}

.pd-faq .pd-faq__body > *,
#top #wrap_all .pd-faq .pd-faq__body > * {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.pd-faq .pd-faq__body > * + *,
#top #wrap_all .pd-faq .pd-faq__body > * + * {
	margin-top: 24px;
}

.pd-faq .pd-faq__body :is(p, li, h2, h3, h4, h5, h6, blockquote, span, strong, em, b, i),
#top #wrap_all .pd-faq .pd-faq__body :is(p, li, h2, h3, h4, h5, h6, blockquote, span, strong, em, b, i) {
	font-family: var(--pd-nav-font);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
}

.pd-faq .pd-faq__body :is(p, li, blockquote),
#top #wrap_all .pd-faq .pd-faq__body :is(p, li, blockquote) {
	font-weight: 400;
	padding-top: 0;
	padding-bottom: 0;
}

.pd-faq .pd-faq__body :is(strong, b, h2, h3, h4, h5, h6),
#top #wrap_all .pd-faq .pd-faq__body :is(strong, b, h2, h3, h4, h5, h6) {
	font-weight: 500;
	color: #fff;
}

.pd-faq .pd-faq__body :is(ul, ol),
#top #wrap_all .pd-faq .pd-faq__body :is(ul, ol) {
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1.25em;
	padding-right: 0;
}

.pd-faq .pd-faq__body ul,
#top #wrap_all .pd-faq .pd-faq__body ul { list-style: disc outside; }

.pd-faq .pd-faq__body ol,
#top #wrap_all .pd-faq .pd-faq__body ol { list-style: decimal outside; }

.pd-faq .pd-faq__body li,
#top #wrap_all .pd-faq .pd-faq__body li {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.pd-faq .pd-faq__body a,
#top #wrap_all .pd-faq .pd-faq__body a {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-style: none;
	color: #fff;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
	transition: color 0.2s ease;
}

.pd-faq .pd-faq__body a:hover,
.pd-faq .pd-faq__body a:focus-visible,
#top #wrap_all .pd-faq .pd-faq__body a:hover,
#top #wrap_all .pd-faq .pd-faq__body a:focus-visible {
	color: var(--pd-faq-red);
	text-decoration-line: underline;
}

.pd-faq .pd-faq__body img,
#top #wrap_all .pd-faq .pd-faq__body img {
	max-width: 100%;
	height: auto;
	border-width: 0;
	border-style: none;
	border-radius: 0;
}

/* Cap trim on the body's first and last leaves — a paragraph, or a list's first/last item — never the container (§7.2). */
.pd-faq .pd-faq__body > p:first-child,
.pd-faq .pd-faq__body > p:last-child,
.pd-faq .pd-faq__body > :is(ul, ol):first-child > li:first-child,
.pd-faq .pd-faq__body > :is(ul, ol):last-child > li:last-child,
#top #wrap_all .pd-faq .pd-faq__body > p:first-child,
#top #wrap_all .pd-faq .pd-faq__body > p:last-child,
#top #wrap_all .pd-faq .pd-faq__body > :is(ul, ol):first-child > li:first-child,
#top #wrap_all .pd-faq .pd-faq__body > :is(ul, ol):last-child > li:last-child {
	--fs: 16px;
	--lh: 24px;
	--pd-faq-btt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-faq-btb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	text-box-edge: cap alphabetic;
}

.pd-faq .pd-faq__body > p:first-child,
.pd-faq .pd-faq__body > :is(ul, ol):first-child > li:first-child,
#top #wrap_all .pd-faq .pd-faq__body > p:first-child,
#top #wrap_all .pd-faq .pd-faq__body > :is(ul, ol):first-child > li:first-child {
	text-box-trim: trim-start;
	text-box: trim-start cap alphabetic;
	margin-top: calc(-1 * var(--pd-faq-btt));
}

.pd-faq .pd-faq__body > p:last-child,
.pd-faq .pd-faq__body > :is(ul, ol):last-child > li:last-child,
#top #wrap_all .pd-faq .pd-faq__body > p:last-child,
#top #wrap_all .pd-faq .pd-faq__body > :is(ul, ol):last-child > li:last-child {
	text-box-trim: trim-end;
	text-box: trim-end cap alphabetic;
	margin-bottom: calc(-1 * var(--pd-faq-btb));
}

.pd-faq .pd-faq__body > p:first-child:last-child,
.pd-faq .pd-faq__body > :is(ul, ol):first-child:last-child > li:first-child:last-child,
#top #wrap_all .pd-faq .pd-faq__body > p:first-child:last-child,
#top #wrap_all .pd-faq .pd-faq__body > :is(ul, ol):first-child:last-child > li:first-child:last-child {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

/* ---------- Hover (real pointers) ---------- */
@media (hover: hover) {
	.pd-faq .pd-faq__item:not(.is-open) .pd-faq__q:hover .pd-faq__title,
	#top #wrap_all .pd-faq .pd-faq__item:not(.is-open) .pd-faq__q:hover .pd-faq__title {
		color: var(--pd-faq-dim);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pd-faq .pd-faq__item,
	.pd-faq .pd-faq__panel,
	.pd-faq .pd-faq__v,
	.pd-faq .pd-faq__title,
	#top #wrap_all .pd-faq .pd-faq__item,
	#top #wrap_all .pd-faq .pd-faq__panel,
	#top #wrap_all .pd-faq .pd-faq__v,
	#top #wrap_all .pd-faq .pd-faq__title {
		transition-duration: 0s;
	}
}