/* ==========================================================================
   Programmatic Master Frame — design system
   TyreDeck fork: dark studio theme. Everything structural (grid, spacing,
   component shapes) stays the same as the base framework so other niches
   on the portfolio keep working unmodified — only the :root palette and a
   handful of TyreDeck-specific components (logo, hero photo, vehicle
   selector, size explainer) are new.
   ========================================================================== */

:root {
	--pe-accent: #E4132C;       /* TyreDeck red */
	--pe-accent-dark: #B00E22;
	--pe-ink: #F5F5F3;          /* body text — near-white on dark bg */
	--pe-ink-soft: #9A9A96;
	--pe-paper: #0B0B0C;        /* page background — near-black */
	--pe-paper-soft: #17171A;   /* card/panel background */
	--pe-border: #2A2A2D;
	--pe-success: #4FBF8C;
	--pe-radius: 10px;
	--pe-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
	--pe-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pe-font-head: 'Archivo', var(--pe-font-body);
	--pe-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--pe-max-width: 960px;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--pe-font-body);
	color: var(--pe-ink);
	background: var(--pe-paper);
	line-height: 1.55;
	font-size: 16px;
}

.pt-container { max-width: var(--pe-max-width); margin: 0 auto; padding: 0 20px; }

/* Header */
.pt-site-header { border-bottom: 1px solid var(--pe-border); padding: 16px 0; }
.pt-header-inner { display: flex; align-items: center; justify-content: space-between; }
.pt-logo {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--pe-font-head); font-weight: 900; font-size: 1.1rem;
	color: var(--pe-ink); text-decoration: none; letter-spacing: -0.01em;
}
.pt-logo-mark { display: block; width: 38px; height: 22px; object-fit: contain; }
.pt-nav a { margin-left: 18px; color: var(--pe-ink-soft); text-decoration: none; font-size: 0.95rem; }
.pt-nav a:hover { color: var(--pe-ink); }

/* Breadcrumb */
.pt-breadcrumb { font-size: 0.85rem; color: var(--pe-ink-soft); margin: 18px 0 6px; }
.pt-breadcrumb a { color: var(--pe-ink-soft); text-decoration: none; }
.pt-breadcrumb a:hover { color: var(--pe-ink); }
.pt-breadcrumb span { margin: 0 6px; }

/* Hero */
.pe-hero { margin: 8px 0 20px; font-family: var(--pe-font-head); }
.pe-hero h1 { font-weight: 900; font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.05; margin: 0 0 10px; letter-spacing: -0.01em; }
.pe-hero-sub { color: var(--pe-ink-soft); margin: 0; font-family: var(--pe-font-body); }

/* Hero photo band — studio tyre photography, dark gradient so text stays
   readable regardless of which photo gets swapped in per niche/service */
.pe-hero--photo {
	position: relative;
	padding: 40px 24px;
	border-radius: var(--pe-radius);
	overflow: hidden;
	background-color: var(--pe-paper);
	background-image:
		radial-gradient(ellipse 70% 60% at 75% 40%, rgba(228,19,44,0.16), transparent 60%),
		linear-gradient(100deg, rgba(11,11,12,0.97) 0%, rgba(11,11,12,0.75) 45%, rgba(11,11,12,0.25) 100%),
		url('../img/hero-tyre.jpg');
	background-size: cover;
	background-position: center right;
}
/* NOTE: assets/img/hero-tyre.jpg does not exist in this package — this
   sandbox's network egress blocks Unsplash, so the file couldn't be
   downloaded and bundled here. Two options before this goes live:
   1. Download the studio tyre shot yourself and save it at that exact
      path (source used in the mockups: unsplash.com/photos/CTwQiFlpgrM,
      free Unsplash License, no attribution required), or
   2. License/shoot your own tyre photography and use that instead —
      recommended for production anyway so the site isn't dependent on
      an external CDN staying up. Same applies to any other photography
      you add to service cards etc. */
.pe-hero--photo .pe-hero-inner { max-width: 62ch; }

.pe-intro { max-width: 70ch; }

/* Calculator */
.pe-calculator {
	background: var(--pe-paper-soft);
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius);
	padding: 24px;
	margin: 32px 0;
}
.pe-calculator h2 { font-family: var(--pe-font-head); font-weight: 900; font-size: 1.3rem; margin: 0; }
.pe-calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 16px 0; }
.pe-calc-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.pe-calc-field input, .pe-calc-field select {
	font-family: var(--pe-font-mono);
	font-size: 1rem;
	padding: 10px 12px;
	background: var(--pe-paper);
	color: var(--pe-ink);
	border: 1px solid var(--pe-border);
	border-radius: 8px;
	font-weight: 600;
}
.pe-calculator .pe-calc-field select:focus,
.pe-calculator .pe-calc-field input:focus { outline: none; border-color: var(--pe-accent); }
.pe-calc-result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	background: var(--pe-paper);
	border: 1px dashed var(--pe-accent);
	border-radius: 8px;
	padding: 16px;
	margin-top: 8px;
}
.pe-calc-result-label { color: var(--pe-ink-soft); font-size: 0.9rem; }
.pe-calc-result-value { font-family: var(--pe-font-head); font-size: 1.9rem; font-weight: 900; color: var(--pe-accent); }

/* Vehicle selector */
.pe-vehicles { margin: 32px 0; }
.pe-vehicles h2 { font-family: var(--pe-font-head); font-weight: 900; font-size: 1.2rem; margin: 0 0 4px; }
.pe-vehicles-sub { color: var(--pe-ink-soft); font-size: 0.9rem; margin: 0 0 16px; }
.pe-vehicle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.pe-vehicle-card {
	background: var(--pe-paper-soft);
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius);
	padding: 18px 12px;
	text-align: center;
	color: var(--pe-ink-soft);
	cursor: pointer;
	font-family: var(--pe-font-body);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.pe-vehicle-card:hover { border-color: var(--pe-ink-soft); }
.pe-vehicle-card.is-active { border-color: var(--pe-accent); background: #1E1416; color: var(--pe-ink); }
.pe-vehicle-card svg { width: 68px; height: 36px; margin-bottom: 8px; color: currentColor; }
.pe-vehicle-card.is-active svg { color: var(--pe-accent); }
.pe-vehicle-name { display: block; font-weight: 700; font-size: 0.9rem; color: var(--pe-ink); }
.pe-vehicle-sub { display: block; font-family: var(--pe-font-mono); font-size: 0.72rem; margin-top: 2px; }

/* Number plate lookup — styled loosely on the real UK plate format
   (yellow, black uppercase mono) since that's instantly recognisable as
   "type your reg here" to any UK driver; the national plate colour
   scheme itself isn't proprietary, it's the DVLA-mandated standard. */
.pe-plate-lookup { margin-bottom: 20px; }
.pe-plate-label {
	display: block; font-size: 0.85rem; color: var(--pe-ink-soft); margin-bottom: 8px;
}
.pe-plate-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.pe-plate-input-wrap {
	display: flex; align-items: stretch; background: #FFD600; border-radius: 6px;
	overflow: hidden; border: 2px solid #1A1A1A;
}
.pe-plate-flag {
	background: #003399; color: #fff; font-weight: 700; font-size: 0.7rem;
	display: flex; align-items: center; justify-content: center; padding: 0 8px;
	font-family: var(--pe-font-body);
}
.pe-plate-input-wrap input {
	border: none; background: transparent; font-family: 'Charles Wright', var(--pe-font-mono);
	font-weight: 700; font-size: 1.1rem; letter-spacing: 0.08em; color: #1A1A1A;
	padding: 10px 14px; text-transform: uppercase; min-width: 140px;
}
.pe-plate-input-wrap input:focus { outline: none; background: #FFE55C; }
.pe-plate-status { font-size: 0.82rem; color: var(--pe-ink-soft); margin: 8px 0 0; min-height: 1.2em; }
.pe-plate-status.is-error { color: var(--pe-accent); }

/* Tyre size explainer */
.pe-size-explainer { margin: 40px 0; }
.pe-size-explainer h2 { font-family: var(--pe-font-head); font-weight: 900; font-size: 1.3rem; margin: 0 0 4px; }
.pe-size-explainer-sub { color: var(--pe-ink-soft); font-size: 0.9rem; margin: 0 0 20px; }
.pe-size-code {
	display: flex; justify-content: center;
	font-family: var(--pe-font-mono); font-weight: 700;
	font-size: clamp(1.4rem, 5vw, 2.2rem);
	margin-bottom: 24px; flex-wrap: wrap; gap: 2px;
}
.pe-size-code span { padding: 2px 4px; border-bottom: 3px solid var(--pe-border); }
.pe-size-code .c1 { border-color: #E4132C; }
.pe-size-code .c2 { border-color: #E48013; }
.pe-size-code .c3 { border-color: #E4C913; }
.pe-size-code .c4 { border-color: #4FBF8C; }
.pe-size-code .c5 { border-color: #4F9BBF; }
.pe-size-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pe-size-card { background: var(--pe-paper-soft); border: 1px solid var(--pe-border); border-radius: 8px; padding: 14px; border-top: 3px solid var(--pe-border); }
.pe-size-card.c1 { border-top-color: #E4132C; }
.pe-size-card.c2 { border-top-color: #E48013; }
.pe-size-card.c3 { border-top-color: #E4C913; }
.pe-size-card.c4 { border-top-color: #4FBF8C; }
.pe-size-card.c5 { border-top-color: #4F9BBF; }
.pe-size-val { font-family: var(--pe-font-mono); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.pe-size-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pe-ink-soft); margin-bottom: 6px; }
.pe-size-card p { font-size: 0.78rem; color: var(--pe-ink-soft); margin: 0; line-height: 1.4; }

/* Affiliate disclosure — deliberately visible, not styled to disappear */
.pe-affiliate-disclosure {
	font-size: 0.82rem;
	color: var(--pe-ink-soft);
	background: var(--pe-paper-soft);
	border-left: 3px solid var(--pe-accent);
	padding: 10px 14px;
	border-radius: 4px;
	margin: 20px 0;
}

/* Comparison table */
.pe-comparison { margin: 32px 0; }
.pe-comparison h2 { font-family: var(--pe-font-head); font-weight: 900; margin-bottom: 12px; }
.pe-table-scroll { overflow-x: auto; border: 1px solid var(--pe-border); border-radius: var(--pe-radius); }
.pe-comparison-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--pe-paper-soft); }
.pe-comparison-table th, .pe-comparison-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--pe-border); font-size: 0.92rem; }
.pe-comparison-table thead th { background: #1C1C20; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pe-ink-soft); }
.pe-provider-name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pe-provider-name img { border-radius: 4px; }

/* CTA buttons */
.pe-cta-btn {
	display: inline-block;
	background: var(--pe-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-family: var(--pe-font-head);
	padding: 12px 20px;
	border-radius: 8px;
	transition: background 0.15s ease, transform 0.1s ease;
	white-space: nowrap;
}
.pe-cta-btn:hover { background: var(--pe-accent-dark); transform: translateY(-1px); }
.pe-cta-btn--sm { padding: 8px 14px; font-size: 0.85rem; }

.pe-cta-block { margin: 32px 0; }
.pe-cta-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: linear-gradient(135deg, var(--pe-accent) 0%, var(--pe-accent-dark) 100%);
	color: #fff;
	border-radius: var(--pe-radius);
	padding: 24px;
	box-shadow: var(--pe-shadow);
}
.pe-cta-card h3 { margin: 0 0 4px; font-size: 1.15rem; font-family: var(--pe-font-head); }
.pe-cta-card p { margin: 0; opacity: 0.9; font-size: 0.9rem; }
.pe-cta-card .pe-cta-btn { background: #fff; color: var(--pe-accent-dark); flex-shrink: 0; }
.pe-cta-card .pe-cta-btn:hover { background: #eee; }

/* Local stats */
.pe-local-stats { margin: 32px 0; }
.pe-local-stats h2 { font-family: var(--pe-font-head); font-weight: 900; }
.pe-stat-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; padding: 0; margin: 12px 0 0; }
.pe-stat-grid li {
	background: var(--pe-paper-soft);
	border: 1px solid var(--pe-border);
	border-radius: 8px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pe-stat-value { font-weight: 700; font-size: 1.1rem; font-family: var(--pe-font-mono); }
.pe-stat-label { font-size: 0.78rem; color: var(--pe-ink-soft); text-transform: uppercase; letter-spacing: 0.02em; }

/* Nearby / internal links */
.pe-nearby { margin: 32px 0 8px; }
.pe-nearby h2 { font-family: var(--pe-font-head); font-weight: 900; }
.pe-nearby-link {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 12px;
	background: var(--pe-paper-soft);
	border: 1px solid var(--pe-border);
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--pe-ink-soft);
	text-decoration: none;
}
.pe-nearby-link:hover { border-color: var(--pe-accent); color: var(--pe-ink); }

/* Footer */
.pt-site-footer { border-top: 1px solid var(--pe-border); margin-top: 48px; padding: 24px 0; color: var(--pe-ink-soft); font-size: 0.85rem; }

/* Mobile conversion optimisation: sticky CTA on small screens */
@media (max-width: 640px) {
	.pe-cta-card { flex-direction: column; align-items: stretch; text-align: center; }
	.pe-calc-form { grid-template-columns: 1fr 1fr; }
	.pe-hero--photo { padding: 28px 18px; }
}

/* ==========================================================================
   Homepage-only sections
   ========================================================================== */

.pe-hero--home { margin-top: 8px; }
.pe-eyebrow {
	font-family: var(--pe-font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--pe-accent); margin-bottom: 12px;
}
.pe-accent-text { color: var(--pe-accent); }

.pe-search-band {
	margin-top: 24px; background: rgba(23,23,26,0.9);
	border: 1px solid var(--pe-border); border-radius: var(--pe-radius);
	padding: 16px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
}
.pe-search-field { flex: 1; min-width: 160px; }
.pe-search-field label {
	display: block; font-family: var(--pe-font-mono); font-size: 0.68rem;
	text-transform: uppercase; letter-spacing: 0.06em; color: var(--pe-ink-soft); margin-bottom: 6px;
}
.pe-search-field select {
	width: 100%; font-family: var(--pe-font-mono); font-size: 0.9rem; font-weight: 600;
	padding: 10px 10px; background: var(--pe-paper); color: var(--pe-ink);
	border: 1px solid var(--pe-border); border-radius: 8px;
}
.pe-search-field select:focus { outline: none; border-color: var(--pe-accent); }
.pe-search-band .pe-cta-btn { border: none; cursor: pointer; font-size: 0.95rem; }

/* How-it-works / process section */
.pe-process { margin: 48px 0; }
.pe-process-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: center; }
.pe-process-photo {
	height: 260px; border-radius: var(--pe-radius); background: var(--pe-paper-soft);
	background-image: url('../img/hero-tyre.jpg'); background-size: cover; background-position: center;
	border: 1px solid var(--pe-border);
	/* NOTE: same missing hero-tyre.jpg as the geo-page hero — see comment
	   near .pe-hero--photo above. Falls back to plain panel colour if the
	   image is absent, so this never renders visibly "broken". */
}
.pe-process-logo { width: 120px; height: auto; margin-bottom: 16px; }
.pe-process-text h2 { font-family: var(--pe-font-head); font-weight: 900; font-size: 1.5rem; line-height: 1.15; margin: 0 0 12px; }
.pe-process-text p { color: var(--pe-ink-soft); margin: 0 0 18px; }
.pe-process-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: pe-step; }
.pe-process-steps li {
	font-size: 0.92rem; padding-left: 30px; position: relative; counter-increment: pe-step;
}
.pe-process-steps li::before {
	content: counter(pe-step, decimal-leading-zero);
	position: absolute; left: 0; top: 0;
	font-family: var(--pe-font-mono); font-weight: 700; color: var(--pe-accent); font-size: 0.85rem;
}

@media (max-width: 720px) {
	.pe-process-grid { grid-template-columns: 1fr; }
	.pe-process-photo { height: 180px; }
}

/* Service grid */
.pe-service-grid-section { margin: 48px 0 56px; }
.pe-service-grid-section h2 { font-family: var(--pe-font-head); font-weight: 900; font-size: 1.3rem; margin: 0 0 16px; }
.pe-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pe-service-card {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--pe-paper-soft); border: 1px solid var(--pe-border); border-radius: 10px;
	padding: 16px 18px; text-align: left; cursor: pointer; color: var(--pe-ink);
	font-family: var(--pe-font-body); font-size: 0.95rem; font-weight: 600;
	transition: border-color 0.15s ease;
}
.pe-service-card:hover { border-color: var(--pe-accent); }
.pe-service-arrow { color: var(--pe-accent); font-weight: 700; }
.pe-service-grid-hint { margin-top: 14px; font-size: 0.82rem; color: var(--pe-ink-soft); }

/* Cookie consent banner */
.pe-consent-banner {
	position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
	max-width: 560px; margin: 0 auto;
	background: var(--pe-paper-soft); border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius); box-shadow: var(--pe-shadow);
	padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; font-size: 0.85rem; color: var(--pe-ink-soft);
}
.pe-consent-banner p { margin: 0; }
.pe-consent-banner a { color: var(--pe-ink); }
.pe-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.pe-consent-actions button[data-consent-reject] {
	background: transparent; border: 1px solid var(--pe-border); color: var(--pe-ink-soft);
	border-radius: 8px; padding: 8px 14px; font-size: 0.85rem; cursor: pointer; font-family: var(--pe-font-body);
}
.pe-consent-actions button[data-consent-reject]:hover { border-color: var(--pe-ink-soft); }

/* TyreDeck photographic design */
:root{--td-bg:#05080d;--td-panel:#0b131e;--td-white:#f5f7fa;--td-blue:#22a7ff;--td-red:#ef1728;--td-muted:#9aa9b8;--td-line:rgba(65,164,230,.28)}
body{background:var(--td-bg);color:var(--td-white)}.pt-container{width:min(1380px,calc(100% - 48px))}.pt-site-header{position:sticky;top:0;z-index:50;background:rgba(3,7,12,.87);border-bottom:1px solid var(--td-line);backdrop-filter:blur(20px)}.pt-header-inner{height:88px}.pt-logo-full{width:135px;height:76px;object-fit:contain}.pt-nav{margin-left:auto}.pt-nav a{color:#cbd4de}.pt-header-cta,.pe-cta-btn{background:linear-gradient(135deg,#ff2638,#a7000d);color:#fff;border:1px solid rgba(255,55,70,.5);border-radius:8px;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 0 28px rgba(239,23,40,.18)}
.pe-geo-page{width:min(1440px,100%);padding-top:0}.pe-hero{position:relative;isolation:isolate;min-height:630px;padding:clamp(60px,8vw,115px);display:flex;align-items:center;overflow:hidden;background:#05090e;color:#fff;border-bottom:1px solid var(--td-line)}.pe-hero:before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}.pe-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,5,9,.98),rgba(2,5,9,.76) 38%,rgba(2,5,9,.15) 72%),linear-gradient(0deg,rgba(3,7,12,.92),transparent 45%)}.pe-hero--home:before,.pe-hero--car:before{background-image:url('../img/hero-car.webp')}.pe-hero--hatchback:before{background-image:url('../img/hatchback.webp')}.pe-hero--suv:before{background-image:url('../img/suv.webp')}.pe-hero--van:before{background-image:url('../img/van.webp')}.pe-hero--mobile:before{background-image:url('../img/mobile-fitting.webp')}.pe-hero--workshop:before{background-image:url('../img/workshop.webp')}.pe-hero--tyre:before{background-image:url('../img/tyre-macro.webp')}.pe-hero-inner{width:min(780px,65%)}.pe-eyebrow{color:var(--td-blue);font-family:"JetBrains Mono";letter-spacing:.14em}.pe-hero h1{font-size:clamp(58px,7vw,104px);line-height:.92;letter-spacing:-.065em;text-shadow:0 8px 35px #000}.pe-accent-text{color:var(--td-red)}.pe-hero-sub{font-size:23px;color:#dce4ec}.pe-search-band{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;width:min(950px,100%);padding:14px;background:rgba(5,12,20,.88);border:1px solid rgba(34,167,255,.65);border-radius:18px;backdrop-filter:blur(20px);box-shadow:0 25px 70px rgba(0,0,0,.45)}.pe-search-field{border-color:var(--td-line)}.pe-search-field select{background:#08111b;color:#fff}.pe-photo-grid{width:min(1240px,calc(100% - 48px));margin:55px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.pe-photo-grid article{min-height:340px;padding:24px;display:flex;align-items:end;border:1px solid var(--td-line);border-radius:16px;background-size:cover;background-position:center;position:relative;overflow:hidden}.pe-photo-grid article:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#03070c,transparent 70%)}.pe-photo-grid h3{position:relative;z-index:1;font:800 26px Archivo}.photo-mobile{background-image:url('../img/mobile-fitting.webp')}.photo-workshop{background-image:url('../img/workshop.webp')}.photo-tyre{background-image:url('../img/tyre-macro.webp')}
.pe-process-grid,.pe-service-grid-section{color:var(--td-white)}.pe-process-photo{background-image:url('../img/tyre-macro.webp');background-size:cover;background-position:center;border:1px solid var(--td-line);border-radius:18px}.pe-process-text p,.pe-service-grid-hint{color:var(--td-muted)}.pe-service-card,.pe-intro,.pe-calculator,.pe-vehicles,.pe-size-explainer,.pe-comparison,.pe-cta-block,.pe-local-stats,.pe-nearby,.pe-affiliate-disclosure{background:linear-gradient(145deg,#101b28,#070d15);color:#fff;border:1px solid var(--td-line);border-radius:18px}.pe-service-card:hover{border-color:var(--td-blue);background:#122234}.pe-calculator select,.pe-calculator input{background:#050c14;color:#fff;border-color:var(--td-line)}.pe-calc-result,.pe-cta-card{background:#050b12;border:1px solid var(--td-line)}.pe-comparison-table th,.pe-comparison-table td{border-color:var(--td-line)}.pe-service-photo{width:min(1050px,calc(100% - 48px));min-height:420px;margin:30px auto;padding:45px;display:flex;align-items:end;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--td-line);border-radius:18px;background-size:cover;background-position:center}.pe-service-photo:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#03070c,transparent 75%)}.pe-service-photo--hatchback{background-image:url('../img/hatchback.webp')}.pe-service-photo--suv{background-image:url('../img/suv.webp')}.pe-service-photo--van{background-image:url('../img/van.webp')}.pe-service-photo--mobile{background-image:url('../img/mobile-fitting.webp')}.pe-service-photo--workshop{background-image:url('../img/workshop.webp')}.pe-service-photo--tyre{background-image:url('../img/tyre-macro.webp')}.pe-service-photo--car{background-image:url('../img/hero-car.webp')}.pe-service-photo span{color:var(--td-blue);font:700 10px "JetBrains Mono";letter-spacing:.14em}.pe-service-photo h2{font:900 clamp(38px,5vw,62px) Archivo;margin:5px 0}.pt-site-footer{background:#020407;color:var(--td-muted);border-top:1px solid var(--td-line)}.pt-footer-logo{width:130px;height:auto}
@media(max-width:850px){.pe-hero-inner{width:100%}.pe-hero:after{background:linear-gradient(90deg,rgba(2,5,9,.94),rgba(2,5,9,.58)),linear-gradient(0deg,#03070c,transparent)}.pe-search-band{grid-template-columns:1fr}.pe-photo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pt-container{width:calc(100% - 24px)}.pt-logo-full{width:105px}.pt-header-cta{font-size:0;padding:11px}.pe-hero{min-height:620px;padding:60px 20px}.pe-hero h1{font-size:50px}.pe-photo-grid{width:calc(100% - 24px);grid-template-columns:1fr}.pe-service-photo{width:calc(100% - 24px);padding:25px}}