/* Car valuation page (/services/estimation).
   Scoped under .est so nothing here can reach the rest of #services.
   Visual language follows the site: red #e2001a, the "def" face, white cards on
   #f6f6f6, plus the dark glow panel introduced by the "sell your car" page. */

.est {
	--est-red:      #e2001a;
	--est-red-dark: #b00014;
	--est-gold:     #ffc857;
	--est-ink:      #101820;
	--est-text:     #2a2a2a;
	--est-muted:    #8c8c8c;
	--est-line:     #e7e7e7;
	--est-radius:   18px;
	--est-shadow:   0 18px 40px -28px rgba(16, 24, 32, .55);
	--est-shadow-lg:0 30px 70px -40px rgba(16, 24, 32, .7);

	width: 100%;
	float: left;
	color: var(--est-text);
	font-family: "def", Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.est *,
.est *::before,
.est *::after { box-sizing: border-box; }

/* ============================================================ hero =========== */

.est__hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--est-radius);
	padding: 3.4rem 2.5rem 3.8rem;
	min-height: 21rem;
	/* The text sits in the middle of the taller photo, not stuck to its top. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	/* No tint over the photo: its left side, where the text sits, is dark enough
	   for white type on its own. */
	background: #1f1f1f url("/media/images/site/estimation.webp") center / cover no-repeat;
	color: #fff;
	isolation: isolate;
}

.est__hero h1 {
	margin: 0 0 .8rem;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	color: #fff;
	font-family: "def", Arial, Helvetica, sans-serif;
	font-weight: 700;
}
.est__lead {
	max-width: 40rem;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
	font-weight: 400;
	color: rgba(255, 255, 255, .8);
}

.est__hero-mark {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.2rem;
	padding: .35rem .9rem .35rem .7rem;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 100px;
	background: rgba(255, 255, 255, .06);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .85);
}
.est__hero-mark::before {
	content: "";
	width: .5rem; height: .5rem;
	border-radius: 50%;
	background: var(--est-gold);
	box-shadow: 0 0 0 0 rgba(255, 200, 87, .7);
	animation: estPulse 2.4s ease-out infinite;
}

@keyframes estPulse {
	0%   { box-shadow: 0 0 0 0 rgba(255, 200, 87, .7); }
	70%  { box-shadow: 0 0 0 .55rem rgba(255, 200, 87, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 200, 87, 0); }
}

/* ============================================================ the form ======= */

.est__card {
	position: relative;
	z-index: 2;
	margin: -1.5rem 1.6rem 1.6rem;
	padding: 1.9rem;
	/* Grey behind the fields, so the white selects and buttons stand out on it. */
	background: #f1f2f4;
	border-radius: var(--est-radius);
	box-shadow: var(--est-shadow-lg);
}

.est__grid {
	display: grid;
	/* brand(2) + model(2) + year(1) + fuel(1) */
	grid-template-columns: repeat(6, 1fr);
	gap: 1rem;
}
.est__grid--4     { grid-template-columns: repeat(4, 1fr); margin-top: 1rem; }
.est__field--wide { grid-column: span 2; }

.est__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.est__label {
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #6f6f6f;
}

.est__select {
	width: 100%;
	height: 3.2rem;
	padding: 0 2.4rem 0 1rem;
	border: 1.5px solid var(--est-line);
	border-radius: 12px;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238c8c8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center / .72rem;
	font-family: inherit;
	font-size: .97rem;
	font-weight: 500;
	color: var(--est-text);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.est__select:hover:not(:disabled) { border-color: #cfcfcf; }
.est__select:focus {
	outline: none;
	border-color: var(--est-red);
	box-shadow: 0 0 0 4px rgba(226, 0, 26, .12);
}
.est__select:disabled {
	background-color: #fafafa;
	color: #b5b5b5;
	cursor: not-allowed;
}

/* the mileage box: same shell as a select, minus the dropdown arrow */
.est__num {
	background-image: none;
	padding-right: 1rem;
	cursor: text;
}
.est__num::-webkit-outer-spin-button,
.est__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est__num { -moz-appearance: textfield; }

/* Searchable combobox: replaces the native select for brand and model, which
   carry 140+ options each. The native element stays as the value holder. */
.est__combo        { position: relative; }
.est__combo select {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	height: 0;
	/* it stays in the DOM as the value holder, but must not be selectable -
	   otherwise copying the page yields every choice twice. */
	-webkit-user-select: none;
	user-select: none;
}
.est__combo-input  { cursor: text; }
/* short lists behave as a plain dropdown: no typing, no caret */
.est__combo-input--fixed { cursor: pointer; caret-color: transparent; }
.est__combo-list {
	position: absolute;
	z-index: 30;
	top: calc(100% + .4rem);
	left: 0;
	right: 0;
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--est-line);
	border-radius: 12px;
	box-shadow: 0 20px 45px -25px rgba(16, 24, 32, .5);
	animation: estDrop .16s ease-out;
}
.est__combo-list[hidden] { display: none; }

@keyframes estDrop {
	from { opacity: 0; transform: translateY(-.4rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.est__combo-list li {
	padding: .58rem .75rem;
	border-radius: 8px;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .12s, color .12s;
}
.est__combo-list li:hover,
.est__combo-list li.is-active { background: #fdf0f1; color: var(--est-red-dark); }
.est__combo-list li.is-empty  { color: var(--est-muted); cursor: default; }
.est__combo-list::-webkit-scrollbar       { width: 8px; }
.est__combo-list::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 8px; }

.est__more { margin-top: 1.3rem; }
.est__more > summary {
	/* Centred as a pill of its own width; text-align on <details> would also
	   centre every label in the filter grid that opens below it. */
	display: flex;
	width: fit-content;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 2.9rem;
	padding: 0 1.3rem 0 1rem;
	border: 1.5px solid var(--est-line);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	font-size: .88rem;
	font-weight: 600;
	color: var(--est-red);
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
	transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.est__more > summary:hover        { border-color: #e6bcc1; background: #fffafa; }
.est__more > summary:focus-visible {
	outline: none;
	border-color: var(--est-red);
	box-shadow: 0 0 0 4px rgba(226, 0, 26, .12);
}
.est__more[open] > summary        { border-color: #dcdcdc; background: #fafafa; }
.est__more > summary::-webkit-details-marker { display: none; }
/* A CSS hex escape eats the space that terminates it, so "\2212 " rendered as a
   bare minus glued to the label. The flex gap sidesteps the problem entirely. */
.est__more > summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem; height: 1.3rem;
	border-radius: 50%;
	background: #fdf0f1;
	font-size: .95rem;
	line-height: 1;
	transition: transform .2s, background-color .2s;
}
.est__more[open] > summary::before { content: "\2212"; transform: rotate(180deg); }
.est__more[open] > .est__grid      { animation: estFade .25s ease-out; }

@keyframes estFade {
	from { opacity: 0; transform: translateY(-.4rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------ condition of the car ----- */

.est__cond {
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--est-line);
}
.est__cond-ttl {
	margin: 0 0 1.1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--est-ink);
}
/* Only the diagram lives here now; the condition dropdowns joined the grid
   above so all eight read as one list instead of two separate blocks. */
.est__cond-grid { display: flex; justify-content: center; }

.est__body-hint {
	margin: .3rem 0 .8rem;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--est-muted);
}
.est__body-count {
	margin: .7rem 0 0;
	font-size: .8rem;
	font-weight: 600;
	color: var(--est-muted);
	text-align: center;
}
.est__body-count.is-on { color: var(--est-red); }

/* Paint type: two pills, one choice. The native radio stays underneath for the
   keyboard and screen readers; the pill is what the eye reads. */
.est__paint {
	display: flex;
	gap: .5rem;
	margin: 0 0 .9rem;
}
.est__paint-opt { position: relative; flex: 1; cursor: pointer; }
.est__paint-opt input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.est__paint-opt span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	padding: 0 .8rem;
	border: 1.5px solid var(--est-line);
	border-radius: 10px;
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	color: var(--est-text);
	text-align: center;
	transition: border-color .18s, background-color .18s, color .18s;
}
.est__paint-opt:hover span { border-color: #cfcfcf; }
.est__paint-opt input:checked + span {
	border-color: var(--est-red);
	background: #fdf0f1;
	color: var(--est-red-dark);
}
.est__paint-opt input:focus-visible + span { box-shadow: 0 0 0 4px rgba(226, 0, 26, .12); }

.est__car {
	display: block;
	width: auto;
	max-width: 100%;
	/* Height-capped rather than width-capped: at 2.3:1 a full-width car would
	   tower over the four fields beside it. */
	max-height: 320px;
	margin: 0 auto;
	filter: drop-shadow(0 8px 16px rgba(16, 24, 32, .14));
}

/* Line-art, the way an inspection sheet draws a car: thin consistent strokes,
   panels left almost white so the drawing reads, colour only where marked. */
.est__car-trim   { fill: none; }
.est__car-tyre   { fill: #23272c; stroke: #16191c; stroke-width: 1.5; }
.est__car-rim    { fill: #cfd5db; stroke: #9aa2aa; stroke-width: 1.4; }
.est__car-spoke  { fill: none;    stroke: #8a929a; stroke-width: 1.3; }
.est__car-mirror { fill: #fff;    stroke: #8d959e; stroke-width: 1.8; }

/* the body under the panels, so the seams read as gaps rather than holes */
.est__car-shell   { fill: #fff; }
.est__car-outline { fill: none; stroke: #7f878f; stroke-width: 2.4; pointer-events: none; }

.est__car-zone {
	fill: #fbfcfd;
	stroke: #c2c9d0;
	stroke-width: 1.6;
	cursor: pointer;
	transition: fill .15s;
}
.est__car-zone:hover { fill: #eef1f4; }
.est__car-zone:focus-visible {
	outline: none;
	fill: #e6edf5;
	stroke: var(--est-red);
	stroke-width: 3;
}
/* marked panels: red enough to read at a glance on a small diagram */
.est__car-zone.is-hit       { fill: rgba(226, 0, 26, .72); stroke: var(--est-red-dark); }
.est__car-zone.is-hit:hover { fill: rgba(226, 0, 26, .85); }

.est__car-detail { pointer-events: none; }
.est__car-glass  { fill: url(#estGlassGrad); stroke: #9aa4ae; stroke-width: 1.4; }
.est__car-glass--side { fill: #b9c6d3; stroke: #9aa4ae; stroke-width: 1.2; }
/* the glasshouse drawn as one continuous outline, windscreen to rear screen */
.est__car-house  { fill: none; stroke: #8d959e; stroke-width: 1.8; }
.est__car-seam   { fill: none; stroke: #c2c9d0; stroke-width: 1.5; stroke-linecap: round; }
.est__car-handle { fill: #aeb6be; }
.est__car-grille { fill: #eef1f4; stroke: #8d959e; stroke-width: 1.5; }
.est__car-lamp   { fill: #fdf3d4; stroke: #b9a86e; stroke-width: 1.4; }
.est__car-lamp--rear { fill: #f6dede; stroke: #c08c8c; }

.est__actions {
	display: flex;
	gap: .8rem;
	/* centred on the same axis as the diagram and its "no area marked" line,
	   so the whole lower half of the card reads as one column */
	justify-content: center;
	align-items: center;
	margin-top: 1.7rem;
}

.est__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.2rem;
	padding: 0 2.2rem;
	border: 1.5px solid transparent;
	border-radius: 12px;
	font-family: inherit;
	font-size: .97rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	transition: transform .18s, box-shadow .18s, background-color .18s, border-color .18s;
}
.est__btn--main {
	background: linear-gradient(135deg, var(--est-red) 0%, var(--est-red-dark) 100%);
	color: #fff;
	box-shadow: 0 12px 26px -14px rgba(226, 0, 26, .85);
}
.est__btn--main:hover:not(:disabled) {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -14px rgba(226, 0, 26, .95);
}
.est__btn--main:active:not(:disabled) { transform: translateY(0); }
.est__btn--main:disabled {
	/* A shade darker than the grey card, or the idle button vanishes into it. */
	background: #dcdfe3;
	color: #8f959c;
	box-shadow: none;
	cursor: not-allowed;
}
/* light sweep across the button on hover */
.est__btn--main::after {
	content: "";
	position: absolute;
	top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: skewX(-20deg);
}
.est__btn--main:hover:not(:disabled)::after { animation: estSweep .7s ease-out; }

@keyframes estSweep {
	from { left: -60%; }
	to   { left: 130%; }
}

.est__btn--ghost       { background: #fff; border-color: var(--est-line); color: var(--est-text); }
.est__btn--ghost:hover { border-color: #c9c9c9; background: #fafafa; }

.est__status { margin: 1rem 0 0; font-size: .9rem; color: var(--est-muted); min-height: 1.25rem; }
.est__status.is-error { color: var(--est-red); }
/* a filter was ignored to get an answer - a caution, not a failure */
.est__status.is-warn  { color: #a3730a; }
.est__status.is-busy::after {
	content: "";
	display: inline-block;
	vertical-align: -2px;
	margin-left: .5rem;
	width: .85rem; height: .85rem;
	border: 2px solid #e0e0e0;
	border-top-color: var(--est-red);
	border-radius: 50%;
	animation: estSpin .7s linear infinite;
}

@keyframes estSpin { to { transform: rotate(360deg); } }

/* ============================================================ result ======== */

.est__result {
	display: grid;
	grid-template-columns: minmax(15rem, 20rem) 1fr;
	gap: 1.8rem;
	margin: 0 1.6rem 1.6rem;
	padding: 1.9rem;
	background: #fff;
	border-radius: var(--est-radius);
	box-shadow: var(--est-shadow);
}
.est__result[hidden] { display: none; }
.est__result.is-in   { animation: estRise .45s cubic-bezier(.16, .84, .44, 1) both; }

@keyframes estRise {
	from { opacity: 0; transform: translateY(1.4rem); }
	to   { opacity: 1; transform: translateY(0); }
}

.est__price-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.8rem 1.5rem;
	border-radius: 14px;
	background: linear-gradient(150deg, #c40017 0%, #8d000f 60%, #5f000a 100%);
	color: #fff;
	overflow: hidden;
}
/* Centred so the light sits behind the number rather than off in a corner. */
.est__price-box::before {
	content: "";
	position: absolute;
	width: 18rem; height: 18rem;
	top: -8rem; left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: rgba(240, 70, 85, .4);
	filter: blur(45px);
}

.est__result-label {
	position: relative;
	display: block;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
	margin-bottom: .5rem;
}
.est__chart-box .est__result-label { color: var(--est-muted); }

/* Two figures side by side; the import country decides which one is the answer
   and which is context, so the quiet one is dimmed rather than hidden. */
.est__prices {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem 1.6rem;
}
.est__price-cell {
	padding: .3rem .2rem;
	opacity: .45;
	transition: opacity .25s;
}
.est__price-cell.is-lead { opacity: 1; }
.est__price-cap {
	display: block;
	margin-bottom: .15rem;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.est__price-cell.is-lead .est__price-cap { color: var(--est-gold); }

.est__price {
	position: relative;
	font-family: "def", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.05;
	color: #fff;
	white-space: nowrap;
}
.est__price-cell.is-lead .est__price { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
.est__price i { font-style: normal; font-size: .55em; color: var(--est-gold); margin-left: .15em; }

.est__deduct {
	position: relative;
	margin-top: .9rem;
	font-size: .78rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}
.est__deduct:empty { display: none; }
.est__deduct b { display: block; font-weight: 600; color: rgba(255, 255, 255, .8); }

.est__meta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: 1rem; }
.est__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .75rem;
	border-radius: 100px;
	font-size: .76rem;
	font-weight: 600;
	background: rgba(255, 255, 255, .18);
	color: #fff;
}
/* On a red ground the tinted pills of the dark theme turned muddy, so the pill
   is neutral and the dot carries the confidence level. */
.est__badge::before {
	content: "";
	width: .45rem; height: .45rem;
	border-radius: 50%;
	background: #8bf0ae;
}
.est__badge.is-medium::before { background: var(--est-gold); }
.est__badge.is-low::before    { background: #ffd2d2; }


/* ------------------------------------------------------------- the chart --- */

.est__tabs {
	display: inline-flex;
	gap: .25rem;
	margin-bottom: 1rem;
	padding: .25rem;
	border-radius: 100px;
	background: #f4f4f5;
}
.est__tab {
	appearance: none;
	border: 0;
	padding: .5rem 1.05rem;
	border-radius: 100px;
	background: transparent;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: #6f6f6f;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .18s, color .18s, box-shadow .18s;
}
.est__tab:hover  { color: var(--est-text); }
.est__tab.is-on  {
	background: #fff;
	color: var(--est-red);
	box-shadow: 0 2px 8px -3px rgba(16, 24, 32, .35);
}
.est__tab[hidden] { display: none; }

.est__hint {
	margin: 0 0 .9rem;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--est-muted);
}
.est__hint:empty { display: none; }

.est__chart      { width: 100%; }
.est__chart svg  { width: 100%; height: auto; display: block; overflow: visible; }
.est__chart-grid { stroke: #f0f0f0; stroke-width: 1; }
.est__chart-area { fill: url(#estFadeGrad); }
.est__chart-line {
	fill: none;
	stroke: var(--est-red);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.est__chart-line.is-drawing {
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
	animation: estDraw 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes estDraw { to { stroke-dashoffset: 0; } }

.est__chart-dot {
	fill: #fff;
	stroke: var(--est-red);
	stroke-width: 2;
	opacity: 0;
	animation: estPop .3s ease-out forwards;
	transition: r .15s;
}
.est__chart-dot.is-current { fill: var(--est-red); stroke: #fff; stroke-width: 2.5; }
.est__chart-dot.is-active  { fill: var(--est-red); }
.est__chart-halo {
	fill: none;
	stroke: var(--est-red);
	stroke-width: 2;
	animation: estHalo 2.2s ease-out infinite;
}

@keyframes estPop {
	from { opacity: 0; transform: scale(.2); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes estHalo {
	0%   { r: 5;  opacity: .55; }
	70%  { r: 15; opacity: 0; }
	100% { r: 15; opacity: 0; }
}

.est__chart-hit  { fill: transparent; cursor: pointer; }
.est__chart-lbl  { font-size: 11px; font-weight: 600; fill: #7a7a7a; font-family: "def", Arial, sans-serif; }

.est__chart-wrap { position: relative; }
.est__tip {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, -140%);
	padding: .45rem .75rem;
	border-radius: 10px;
	background: var(--est-ink);
	color: #fff;
	font-size: .8rem;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8);
	animation: estFade .15s ease-out;
}
.est__tip::after {
	content: "";
	position: absolute;
	left: 50%; bottom: -4px;
	width: 8px; height: 8px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--est-ink);
}
.est__tip[hidden] { display: none; }
.est__tip b { display: block; font-weight: 400; font-size: .72rem; color: rgba(255, 255, 255, .55); }

.est__note { grid-column: 1 / -1; margin: 0; font-size: .76rem; line-height: 1.5; color: var(--est-muted); }

/* loading skeleton, shown in place of the result while the request is in flight */
.est__skeleton {
	display: grid;
	grid-template-columns: minmax(15rem, 20rem) 1fr;
	gap: 1.8rem;
	margin: 0 1.6rem 1.6rem;
	padding: 1.9rem;
	background: #fff;
	border-radius: var(--est-radius);
	box-shadow: var(--est-shadow);
}
.est__skeleton[hidden] { display: none; }
.est__skeleton span {
	display: block;
	border-radius: 14px;
	background: linear-gradient(90deg, #f2f2f2 25%, #e9e9e9 37%, #f2f2f2 63%);
	background-size: 400% 100%;
	animation: estShimmer 1.3s ease-in-out infinite;
}
.est__skeleton .est__sk-price { height: 11rem; }
.est__skeleton .est__sk-chart { height: 11rem; }

@keyframes estShimmer {
	from { background-position: 100% 50%; }
	to   { background-position: 0 50%; }
}

/* ============================================================ CTA =========== */

.est__cta {
	position: relative;
	display: flex;
	/* Text on top, the button right under it - one column above the cars. */
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.2rem;
	margin: 0 1.6rem;
	padding: 2.6rem 2rem;
	min-height: 17rem;
	border-radius: var(--est-radius);
	/* Just the photo. The dark fallback keeps the white text readable while it loads. */
	background: #2b2b2b url("/media/images/site/estimation-2.webp") right center / cover no-repeat;
	overflow: hidden;
}
.est__cta h2 { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 700; color: #fff; font-family: "def", Arial, sans-serif; }
.est__cta p  { margin: 0; font-size: .92rem; line-height: 1.5; color: #fff; max-width: 42rem; }
/* ============================================================ responsive ==== */

@media (max-width: 1024px) {
	.est__hero       { padding: 2.6rem 1.8rem 2.8rem; min-height: 18rem; }
	.est__grid        { grid-template-columns: repeat(2, 1fr); }
	.est__grid--4     { grid-template-columns: repeat(2, 1fr); }
	.est__field--wide{ grid-column: span 1; }
	.est__result,
	.est__skeleton   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.est__hero     { padding: 2.2rem 1.3rem 2.3rem; min-height: 16rem; border-radius: 14px; }
	.est__card,
	.est__result,
	.est__skeleton { margin-left: .6rem; margin-right: .6rem; padding: 1.2rem; }
	.est__cta      {
		margin-left: .6rem;
		margin-right: .6rem;
		padding: 1.6rem 1.3rem;
		min-height: 14rem;
		/* On a phone the text runs across the whole photo, light parts included,
		   so the picture is dimmed a little to keep the white type readable. */
		background:
			linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
			#2b2b2b url("/media/images/site/estimation-2.webp") center / cover no-repeat;
	}
	/* Two per row, not one: a dozen stacked fields turned the form into a page
	   of its own and pushed the button below the fold. */
	.est__grid,
	.est__grid--4  { grid-template-columns: repeat(2, 1fr); gap: .6rem; }

	/* Half the width each, so the shell tightens to match and the caption is
	   allowed to run onto a second line. The select is pinned to the bottom of
	   its cell: without that, a one-line caption and a two-line one beside it
	   leave the two boxes at different heights. */
	.est__field  { justify-content: flex-end; }
	.est__label  { font-size: .7rem; letter-spacing: .03em; }
	.est__select {
		height: 2.9rem;
		padding: 0 1.9rem 0 .7rem;
		font-size: .9rem;
		background-position: right .55rem center;
	}
	.est__num    { padding-right: .7rem; }

	/* Brand and model carry 140+ entries each, and half a phone is no width to
	   read them in. Their popups spill over both columns - the left one opens
	   rightwards, the right one leftwards, so neither leaves the card. */
	.est__grid > .est__field:nth-child(1) .est__combo-list { right: auto; width: calc(200% + .6rem); }
	.est__grid > .est__field:nth-child(2) .est__combo-list { left: auto;  width: calc(200% + .6rem); }

	.est__actions  { flex-direction: column-reverse; }
	.est__btn      { width: 100%; }
	.est__cta .est__btn { width: 100%; }

	/* Full-width, centred, same footprint as the buttons below it. The flex goes
	   on the summary itself: on <details> it turns summary and the filter grid
	   into two side-by-side columns. */
	.est__more > summary { display: flex; width: 100%; height: 3.2rem; padding: 0 1rem; }

	.est__tabs { display: flex; width: 100%; }
	.est__tab  { flex: 1; padding: .55rem .5rem; font-size: .78rem; }

	/* The svg is drawn at phone geometry here (see drawChart), so these are
	   very close to their rendered pixel size. */
	.est__chart-lbl { font-size: 13px; }
	.est__tip       { font-size: .85rem; }
}

/* Motion here is decoration; none of it carries meaning. */
@media (prefers-reduced-motion: reduce) {
	.est *,
	.est *::before,
	.est *::after {
		animation: none !important;
		transition: none !important;
	}
	.est__chart-line.is-drawing { stroke-dashoffset: 0; }
	.est__chart-dot             { opacity: 1; }
}