/*
	Phoenix Evolution Cars — site stylesheet.

	Ported verbatim from the approved static markup ( themes/temporary/index.html ).
	Plain CSS, no build step: edit this file directly.

	Contents
		1.  Design tokens and base elements
		2.  Layout primitives ( shell, grid, grain, section rhythm )
		3.  Shared elements ( eyebrow, button )
		4.  Header, mobile menu, language switcher
		5.  Sections, in page order
		6.  Footer
		7.  Request modal
		8.  Scroll reveal
		9.  Contrast pass
		10. Responsive
		11. WordPress specifics
		12. Adjustments to the ported design
		13. Catalog — the vehicle-category term archive
		14. Contact page
		15. Contact Form 7 forms
		16. Client area
		17. Page not found
*/

/* ---------------------------------------------------------------------------
	1.  Design tokens and base elements
--------------------------------------------------------------------------- */

:root {
  --void: #050505;
  --carbon: #141416;
  --graphite: #1b1b1e;
  --ink: #efede8;
  --muted: #aaa8a3;
  --line: rgba(255, 255, 255, .17);
  --line-soft: rgba(255, 255, 255, .10);
  --gold: #c9a56d;
  --gold-pale: #e0c392;
  --bronze-line: rgba(201, 165, 109, .40);
  --bronze-soft: rgba(201, 165, 109, .13);
  --gutter: clamp(1.25rem, 3.15vw, 4.5rem);
  --header: 5.4rem;

  /* Display stack. Barlow Condensed ships latin / latin-ext / vietnamese only,
     so Cyrillic ( ru, kk, ky ) never resolves to it and used to fall back to a
     full-width system sans. Oswald carries cyrillic + cyrillic-ext at matching
     proportions and is picked up per glyph, leaving Latin on Barlow. */
  --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scroll-padding-top: var(--header); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open,
body.modal-open { overflow: hidden; }
::selection { background: var(--gold); color: #080808; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { max-width: 100%; }
figure { margin: 0; }

body h1, body h2, body h3, body h4, body h5, body h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body h1 { font-size: clamp(4.5rem, 10.7vw, 12.75rem); }
body h2 { font-size: clamp(3.75rem, 7.2vw, 8.75rem); }
body h3 { font-size: clamp(2.15rem, 3.15vw, 4rem); }
body h4 { font-size: clamp(1.7rem, 2.1vw, 2.6rem); }
body h5 { font-size: clamp(1.35rem, 1.5vw, 1.85rem); }
body h6 { font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0; }
p + p { margin-top: 1.1em; }

:focus-visible {
  outline: 2px solid var(--gold-pale);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
	2.  Layout primitives
--------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--gold);
  color: #050505;
  padding: .8rem 1rem;
  font-weight: 700;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-shell {
  width: calc(100% - (var(--gutter) * 2));
  max-width: 1860px;
  margin-inline: auto;
  position: relative;
}

.site-grid {
  position: relative;
  border-left: 1px solid var(--bronze-line);
  border-right: 1px solid var(--bronze-line);
}
/* A grid item is min-width:auto by default, so it refuses to shrink below the
   longest word it holds and pushes its row wider than the shell. Latin never
   reached that limit; the Cyrillic translations do. */
.site-grid > *,
.reason > *,
.faq-question > *,
.vehicle-type > * { min-width: 0; }
.faq__intro, .faq__list { min-width: 0; }

.grain { isolation: isolate; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ---------------------------------------------------------------------------
	3.  Shared elements
--------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .68rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.eyebrow::before {
  content: '';
  width: 2.35rem;
  height: 1px;
  background: currentColor;
}

.button {
  min-height: 3.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.button svg { width: 1rem; height: 1rem; transition: transform .25s ease; }
.button:hover svg { transform: translate(3px, -3px); }
.button--gold { background: var(--gold); color: #080808; border-color: var(--gold); }
.button--gold:hover { background: var(--gold-pale); border-color: var(--gold-pale); }
.button--line { color: var(--ink); border-color: rgba(255,255,255,.35); background: rgba(6,6,6,.18); }
.button--line:hover { background: var(--ink); border-color: var(--ink); color: #080808; }

.section-pad { padding-block: clamp(6rem, 10vw, 11rem); }
.section-rule { border-top: 1px solid var(--bronze-line); }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
	4.  Header, mobile menu, language switcher
--------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(4,4,4,.94), rgba(4,4,4,.76));
  box-shadow: 0 1rem 3rem rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color .25s ease, transform .25s ease;
}
.header__inner {
  height: var(--header);
  display: grid;
  grid-template-columns: 2.15fr 5fr 3.4fr;
  align-items: stretch;
}
.brand {
  display: flex;
  align-items: center;
  padding-inline: 1.25rem;
  border-right: 1px solid var(--line);
}
.brand img { width: min(8.75rem, 100%); height: 3.65rem; object-fit: contain; object-position: left center; }
.nav { display: flex; align-items: stretch; }
.nav a {
  display: flex;
  align-items: center;
  padding-inline: clamp(.8rem, 1.25vw, 1.65rem);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(239,237,232,.76);
  transition: color .2s ease, background-color .2s ease;
}
.nav a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.header__actions { display: flex; justify-content: flex-end; border-left: 1px solid var(--line); }
.language-switcher { position: relative; display: flex; border-right: 1px solid var(--line); }
.language-switcher__button {
  min-width: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0 .85rem;
  border: 0;
  background: transparent;
  color: rgba(239,237,232,.78);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
}
.language-switcher__button svg { width: .7rem; transition: transform .2s ease; }
.language-switcher__button[aria-expanded='true'] svg { transform: rotate(180deg); }
.language-menu {
  position: absolute;
  top: 100%;
  right: -1px;
  width: 10rem;
  padding: .45rem;
  border: 1px solid var(--line);
  background: #080808;
  visibility: hidden;
  opacity: 0;
  transform: translateY(.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.language-menu.is-open { visibility: visible; opacity: 1; transform: none; }
.language-menu a { display: flex; justify-content: space-between; padding: .7rem .75rem; color: rgba(239,237,232,.72); font-size: .65rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.language-menu a:hover, .language-menu a[aria-current='true'] { background: var(--gold); color: #050505; }
.account-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-inline: 1rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  color: rgba(239,237,232,.76);
}
.account-link svg { width: 1rem; }
.header__cta { min-width: 11.25rem; border: 0; }
.menu-toggle { display: none; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0 1.2rem; }
.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
.mobile-menu { display: none; }
.menu-backdrop { display: none; }

/* ---------------------------------------------------------------------------
	5.  Sections, in page order
--------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 49rem;
  height: max(49rem, 100svh);
  overflow: hidden;
  background: #050505;
}
.hero__media, .hero__overlay { position: absolute; inset: 0; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.hero__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,.58) 0, rgba(0,0,0,.08) 40%, rgba(0,0,0,.83) 100%),
    linear-gradient(90deg, rgba(0,0,0,.7) 0, rgba(0,0,0,.12) 52%, rgba(0,0,0,.35) 100%);
}
.hero__content { height: 100%; display: flex; align-items: flex-end; padding: calc(var(--header) + 8rem) 1.25rem 3.25rem; }
.hero__layout { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: end; }
.hero__copy { grid-column: 1 / span 9; }
.hero__copy .eyebrow { display: flex; margin-bottom: 1.5rem; line-height: 1.5; }
/* Keep accents such as the breve in Й clear of the eyebrow above the title. */
.hero__copy h1 { max-width: 100%; padding-top: .14em; }
.hero__copy h1 span { display: block; color: transparent; -webkit-text-stroke: 1px rgba(239,237,232,.8); }
.hero__intro {
  grid-column: 1 / span 4;
  margin-top: 2.2rem;
  padding-left: calc(8.333% + 1rem);
  color: rgba(239,237,232,.72);
  font-size: clamp(.94rem, 1.05vw, 1.12rem);
  line-height: 1.7;
}
.hero__buttons { grid-column: 6 / span 5; display: flex; align-items: center; gap: .75rem; margin-top: 2.2rem; }
.hero__buttons .button { flex: 1; }
.hero__index {
  position: absolute;
  right: 1.25rem;
  bottom: 3.55rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(239,237,232,.6);
  writing-mode: vertical-rl;
}
.hero__index::before { content: ''; width: 1px; height: 4.5rem; background: var(--gold); }
.manifesto { background: var(--carbon); }
.manifesto__lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 0 1.25rem 5rem; }
.manifesto__label { grid-column: 1 / span 2; padding-top: .75rem; }
.manifesto__heading { grid-column: 3 / span 9; }
.manifesto__heading .outline { color: transparent; -webkit-text-stroke: 1px rgba(201,165,109,.7); }
.manifesto__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.manifesto__visual {
  grid-column: 1 / span 7;
  position: relative;
  min-height: 40rem;
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.manifesto__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.7) contrast(1.08); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.manifesto__visual:hover img { transform: scale(1.025); }
.manifesto__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.68)); }
.manifesto__caption { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: flex; justify-content: space-between; color: rgba(239,237,232,.67); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.manifesto__content { grid-column: 8 / -1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem, 4vw, 5.5rem) clamp(1.25rem, 3vw, 4rem); }
.manifesto__content > p { max-width: 31rem; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.65; color: rgba(239,237,232,.76); }
.proof-list { margin: 4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.proof-list li { min-height: 4.9rem; display: grid; grid-template-columns: 3rem 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.proof-list span:first-child { color: var(--gold); font-family: var(--font-display); font-size: 1.25rem; }
.proof-list span:last-child { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.categories { background: #080808; }
.categories__head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 0; padding: 0 1.25rem 4rem; }
.categories__head h2 { grid-column: 1 / span 8; }
.categories__head p { grid-column: 9 / span 3; align-self: end; max-width: 27rem; color: var(--muted); font-size: .95rem; }
.categories__panel { display: block; min-height: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vehicle-list { margin: 0; padding: 0; list-style: none; }
.vehicle-list li { border-bottom: 1px solid var(--line); }
.vehicle-list li:last-child { border-bottom: 0; }
.vehicle-type {
  position: relative;
  width: 100%;
  min-height: 9.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.vehicle-type:hover, .vehicle-type.is-active { background: var(--gold); color: #080808; }
.vehicle-type__name { min-width: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 6rem); font-weight: 600; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; overflow-wrap: break-word; }
.vehicle-type svg { width: 1.15rem; height: 1.15rem; }
.vehicle-type.is-active { z-index: 2; }
.vehicle-type:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.vehicle-type__preview {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(4rem, 14vw, 17rem);
  width: clamp(15rem, 28vw, 30rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: #050505;
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-45%) rotate(-4deg) scale(.92);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .25s;
}
.vehicle-type__preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vehicle-type.is-active .vehicle-type__preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) rotate(-4deg) scale(1);
}
@media (max-width: 600px) {
  .vehicle-type__preview { right: 2.8rem; width: 44%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vehicle-type, .vehicle-type__preview { transition: none; }
  .vehicle-type__preview, .vehicle-type.is-active .vehicle-type__preview { transform: translateY(-50%); }
}

.visual-note { position: absolute; z-index: 2; left: 1.25rem; bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; color: rgba(239,237,232,.65); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.visual-note::before { content:''; width: 2rem; height: 1px; background: var(--gold); }

.why { overflow: hidden; background: var(--carbon); }
.why__top { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); padding: 0 1.25rem 5rem; }
.why__top .eyebrow { grid-column: 1 / span 2; align-self: start; }
.why__top h2 { grid-column: 3 / span 8; }
.why__top p { grid-column: 10 / -1; align-self: end; color: var(--muted); }
.reason-list { border-top: 1px solid var(--line); }
.reason {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  min-height: 11rem;
  border-bottom: 1px solid var(--line);
  transition: background-color .25s ease;
}
.reason:hover { background: rgba(255,255,255,.025); }
.reason h3 { grid-column: 1 / span 6; align-self: center; padding: 2rem 0 2rem 1.25rem; font-size: clamp(2.4rem, 4.4vw, 5.5rem); }
.reason p { grid-column: 8 / span 3; align-self: center; padding: 2rem 0; color: var(--muted); font-size: .92rem; }
.reason__mark { grid-column: 12; align-self: center; justify-self: center; font-family: var(--font-display); font-size: 2rem; color: rgba(201,165,109,.5); }

.cta-wrap { padding-block: var(--gutter); background: #050505; }
.cta {
  position: relative;
  min-height: 40rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090909;
}
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 44%; filter: brightness(.72) contrast(1.1); }
.cta::before { content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(0,0,0,.84) 0, rgba(0,0,0,.2) 64%), linear-gradient(0deg, rgba(0,0,0,.82), transparent 55%); }
.cta__content { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: end; padding: clamp(2rem,4vw,4.5rem) 1.25rem; }
.cta__text { grid-column: 1 / span 9; }
.cta__text h2 { max-width: 15ch; }
.cta__text p { max-width: 48rem; margin-top: 1.8rem; color: rgba(239,237,232,.7); }
.cta__action { grid-column: 10 / span 3; }
.cta__action .button { width: 100%; }

.inventory { background: #080808; }
.inventory__head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); align-items: end; padding: 0 1.25rem 4rem; }
.inventory__title { grid-column: 1 / span 8; container-type: inline-size; }
.inventory__title h2 { padding-top:.12em; font-size:clamp(2.6rem,11cqw,8.75rem); overflow-wrap:break-word; }
.inventory__title .eyebrow { margin-bottom: 1.5rem; }
.inventory__all { grid-column: 10 / -1; justify-self: stretch; }
.inventory__all .button { width: 100%; }
.inventory-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); border-top: 1px solid var(--line); }
.vehicle-card { grid-column: span 4; display: flex; flex-direction: column; min-height: 35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0a0a0b; }
.vehicle-card:nth-child(3n) { border-right: 0; }
.vehicle-card--feature { grid-column: span 8; }
.vehicle-card--feature + .vehicle-card { grid-column: span 4; }
.vehicle-card__media { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #030303; }
.vehicle-card--feature .vehicle-card__media { aspect-ratio: 2/1; }
.vehicle-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.vehicle-card:hover .vehicle-card__media img { transform: scale(1.035); filter: brightness(1.12); }
.vehicle-card__badge { position: absolute; top: 0; left: 0; padding: .7rem .85rem; background: var(--gold); color:#050505; font-size:.59rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vehicle-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem 1.25rem; }
.vehicle-card__meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.vehicle-card h3 { margin-top: 1rem; font-size: clamp(2.25rem, 3.25vw, 4.1rem); }
.vehicle-card__foot { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.vehicle-card__price { font-family:var(--font-display); font-size:1.8rem; line-height:1; letter-spacing:-.02em; }
.vehicle-card__price small { display:block; margin-bottom:.45rem; font-family:'Manrope',sans-serif; font-size:.55rem; color:var(--muted); letter-spacing:.16em; text-transform:uppercase; }
.vehicle-card__request { min-height:2.8rem; display:inline-flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 .85rem; border:1px solid rgba(255,255,255,.28); border-radius:0; background:transparent; color:var(--ink); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.vehicle-card__request:hover { background:var(--gold); border-color:var(--gold); color:#050505; }
.vehicle-card__request svg { width:.9rem; height:.9rem; }

.process { background: var(--carbon); }
.process__head { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); padding: 0 1.25rem 5rem; }
.process__head h2 { grid-column: 1 / span 7; }
.process__head p { grid-column: 9 / span 3; align-self: end; color: var(--muted); }
/* Every step is three rows of one shared grid — number, heading, text — taken
   over by the step as a subgrid. The heading row is as tall as the tallest
   heading in the line of steps and the text row as tall as the longest text,
   so headings start on one line and texts on another whatever their length.
   --step-top-space keeps the open space above the headings of the design. */
.process__steps { --step-top-space: 9rem; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-auto-rows: minmax(var(--step-top-space),auto) auto auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step { display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; padding:1.35rem 1.25rem; border-right:1px solid var(--line); transition:background-color .25s ease,color .25s ease; }
.step:last-child { border-right:0; }
.step:hover { background:var(--gold); color:#080808; }
.step__top { align-self:start; display:flex; justify-content:space-between; align-items:center; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
.step__line { width:2rem; height:1px; background:currentColor; opacity:.4; }
.step h3 { align-self:start; font-size:clamp(2rem,2.7vw,3.5rem); }
.step p { align-self:start; margin-top:1rem; color:var(--muted); font-size:.86rem; line-height:1.65; transition:color .25s; }
.step:hover p { color:rgba(5,5,5,.67); }

.reviews { background:#070707; }
.reviews__layout { display:grid; grid-template-columns:4fr 8fr; min-height:42rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reviews__aside { display:flex; flex-direction:column; justify-content:space-between; padding:2rem 1.25rem; border-right:1px solid var(--line); }
.reviews__aside h2 { font-size:clamp(3.5rem,6.4vw,7.75rem); }
.reviews__controls { display:flex; gap:.6rem; }
.slider-btn { width:3.8rem; height:3.8rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s,color .2s; }
.slider-btn:hover { background:var(--gold); color:#050505; }
.slider-btn svg { width:1rem; height:1rem; }
.reviews__viewport { overflow:hidden; }
.reviews__track { height:100%; display:flex; touch-action:pan-y pinch-zoom; }
.review { flex:0 0 100%; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(2rem,5vw,6rem); }
.review__quote { max-width:23ch; font-family:var(--font-display); font-size:clamp(2.25rem,4vw,5rem); font-weight:500; line-height:1.05; letter-spacing:-.025em; text-transform:uppercase; }
.review__quote::before { content:'“'; display:block; margin-bottom:1rem; color:var(--gold); font-size:1.3em; line-height:.5; }
.review__person { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding-top:2rem; border-top:1px solid var(--line); }
.review__name { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.review__detail { margin-top:.35rem; color:var(--muted); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; }
.review__count { font-family:var(--font-display); font-size:1.2rem; color:var(--gold); }

.faq { background:var(--carbon); }
.faq__layout { display:grid; grid-template-columns:4fr 8fr; }
.faq__intro { padding:0 2rem 0 1.25rem; }
.faq__intro p { max-width:26rem; margin-top:2rem; color:var(--muted); }
.faq__list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%; min-height:7.2rem; display:grid; grid-template-columns:1fr 2rem; align-items:center; gap:1rem; padding:1rem 1.25rem; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.faq-question__text { overflow-wrap:break-word; font-family:var(--font-display); font-size:clamp(1.45rem,2.2vw,2.7rem); font-weight:600; line-height:1.05; letter-spacing:-.02em; text-transform:uppercase; }
.faq-question__icon { position:relative; width:1.2rem; height:1.2rem; }
.faq-question__icon::before,.faq-question__icon::after { content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:currentColor; transition:transform .25s; }
.faq-question__icon::after { transform:rotate(90deg); }
.faq-question[aria-expanded='true'] .faq-question__icon::after { transform:rotate(0); }
.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.faq-answer > div { overflow:hidden; }
.faq-answer p { max-width:46rem; padding:0 1.25rem; color:var(--muted); font-size:.92rem; }
.faq-item.is-open .faq-answer { grid-template-rows:1fr; }
.faq-item.is-open .faq-answer p { padding-bottom:2rem; }

/* ---------------------------------------------------------------------------
	6.  Footer
--------------------------------------------------------------------------- */

.footer { background:#030303; border-top:1px solid var(--line); }
.footer__top { display:grid; grid-template-columns:5fr 2fr 2fr 3fr; min-height:25rem; }
.footer__brand,.footer__column { padding:2rem 1.25rem; border-right:1px solid var(--line); }
.footer__column:last-child { border-right:0; }
.footer__brand { display:flex; flex-direction:column; justify-content:space-between; }
.footer__brand img { width:13rem; height:7.5rem; object-fit:contain; object-position:left top; }
.footer__brand p { max-width:27rem; color:var(--muted); font-size:.9rem; }
.footer__title { margin-bottom:2rem; color:var(--muted); font-size:.61rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.footer__links { display:flex; flex-direction:column; align-items:flex-start; gap:.95rem; }
.footer__links a { font-size:.76rem; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.footer__links a:hover { color:var(--gold); }
.footer__bottom { min-height:5rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem 1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; }
.footer__credit a { color:inherit; text-decoration:none; }
.footer__credit a:hover,.footer__credit a:focus-visible { color:var(--gold); }

/* ---------------------------------------------------------------------------
	7.  Request modal
--------------------------------------------------------------------------- */

.modal {
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:var(--gutter);
  visibility:hidden;
  opacity:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
  transition:opacity .25s ease,visibility .25s ease;
}
.modal.is-open { visibility:visible; opacity:1; }
.modal__dialog { width:min(64rem,100%); max-height:calc(100svh - (var(--gutter) * 2)); overflow:auto; display:grid; grid-template-columns:4fr 6fr; border:1px solid rgba(255,255,255,.18); background:#0a0a0b; box-shadow:0 30px 120px rgba(0,0,0,.65); transform:translateY(1rem); transition:transform .25s ease; }
.modal.is-open .modal__dialog { transform:translateY(0); }
.modal__intro { position:relative; min-height:100%; padding:2rem; overflow:hidden; background:#050505; }
.modal__intro img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; }
.modal__intro::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.88)); }
.modal__intro-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.modal__intro h2 { font-size:clamp(3rem,5vw,5rem); }
.modal__intro p { color:rgba(239,237,232,.68); font-size:.83rem; }
.modal__form { padding:2rem; }
.modal__form-top { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; margin-bottom:2rem; }
.modal__form-top p { color:var(--muted); font-size:.75rem; }
.modal-close { width:2.8rem; height:2.8rem; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; }
.modal-close svg { width:1.1rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field--full { grid-column:1 / -1; }
.field label { font-size:.58rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(239,237,232,.68); }
.field input,.field select,.field textarea { width:100%; border:1px solid var(--line); border-radius:0; background:#111113; color:var(--ink); padding:.9rem 1rem; outline:none; }
.field input,.field select { height:3.5rem; }
.field textarea { min-height:7rem; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--gold); }
.form-submit { width:100%; margin-top:1rem; }
.form-note { margin-top:1rem; color:var(--muted); font-size:.6rem; line-height:1.5; }

/* ---------------------------------------------------------------------------
	8.  Scroll reveal
--------------------------------------------------------------------------- */

[data-reveal] { opacity:0; transform:translateY(2rem); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
	9.  Contrast pass — graphite section rhythm with restrained bronze framing
--------------------------------------------------------------------------- */

/* Contrast pass: graphite section rhythm with restrained bronze framing. */
.manifesto,
.why,
.process,
.faq { background:#141416; }
.categories,
.inventory { background:#0c0c0e; }
.reviews { background:#101012; }
.manifesto__body,
.categories__panel,
.reason-list,
.inventory-grid,
.process__steps,
.reviews__layout,
.faq__list {
  border-color:var(--bronze-line);
}
.vehicle-card,
.step,
.reason,
.reviews__aside,
.faq-item {
  border-color:rgba(201,165,109,.25);
}
.vehicle-card {
  background:#111113;
  border-right-color:rgba(201,165,109,.52) !important;
  border-bottom-color:rgba(201,165,109,.52) !important;
  box-shadow:none;
  transition:border-color .25s ease;
}
.vehicle-card:hover {
  border-right-color:rgba(224,195,146,.76) !important;
  border-bottom-color:rgba(224,195,146,.76) !important;
}
.vehicle-card__media {
  border-bottom:1px solid rgba(201,165,109,.30);
}
.manifesto,
.why,
.process {
  background-color:#18181b;
  background-image:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.065),transparent 34rem),
    linear-gradient(112deg,transparent 8%,rgba(255,255,255,.035) 32%,transparent 52%,rgba(201,165,109,.028) 76%,transparent),
    repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.045) 1px 3px,transparent 3px 8px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.40'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,10px 10px,220px 220px;
  background-blend-mode:normal,normal,overlay,soft-light;
}
.cta { border-color:var(--bronze-line); }
.footer { border-top-color:var(--bronze-line); }

/* ---------------------------------------------------------------------------
	10. Responsive
--------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .header__inner { grid-template-columns:2fr 5.7fr 2.3fr; }
  .account-link { display:none; }
  .header__actions { justify-content:stretch; }
  .header__cta { width:100%; min-width:0; }
  .nav a { padding-inline:.8rem; font-size:.61rem; }
  .process__steps { --step-top-space:7rem; grid-template-columns:repeat(3,1fr); }
  .step { border-bottom:1px solid var(--line); }
  .step:nth-child(3) { border-right:0; }
  .step:nth-last-child(-n+2) { border-bottom:0; }
  .footer__top { grid-template-columns:4fr 2fr 2fr; }
  .footer__column:last-child { grid-column:1 / -1; min-height:11rem; border-top:1px solid var(--line); border-right:0; }
}

@media (max-width: 900px) {
  :root { --header:4.6rem; }
  .header__inner { grid-template-columns:1fr auto auto; }
  .brand { border-right:0; }
  .brand img { width:8rem; height:3.5rem; }
  .nav { display:none; }
  /* The header keeps the language switcher at every width — the rest of the
     actions move into the drawer. The switcher sits between the logo and the
     burger, so its divider moves to the left edge and the burger's own
     border-left supplies the one on the right. */
  .header__actions { border-left:0; }
  .header__actions .account-link,
  .header__actions .header__cta { display:none; }
  .language-switcher { border-right:0; border-left:1px solid var(--line); }
  .language-switcher__button { min-width:4rem; padding-inline:.9rem; }
  .header .menu-toggle { display:grid; place-items:center; }
  .menu-backdrop { position:fixed; inset:0; z-index:45; display:block; background:rgba(0,0,0,.7); visibility:hidden; opacity:0; transition:opacity .3s ease,visibility .3s; }
  .menu-backdrop.is-open { visibility:visible; opacity:1; }
  .mobile-menu { position:fixed; top:0; right:0; bottom:0; z-index:50; width:min(88vw,28rem); display:flex; flex-direction:column; padding:1.25rem clamp(1.25rem,5vw,2rem) 2rem; overflow-y:auto; border-left:1px solid var(--line); background:#080808; box-shadow:-2rem 0 5rem rgba(0,0,0,.45); visibility:hidden; transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.75,.2,1),visibility .38s; }
  .mobile-menu.is-open { visibility:visible; transform:none; }
  .mobile-menu__top { display:flex; align-items:center; justify-content:space-between; min-height:3.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; }
  .mobile-menu__close { width:2.8rem; height:2.8rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); cursor:pointer; }
  .mobile-menu__close svg { width:1rem; }
  .mobile-menu__links { display:flex; flex-direction:column; margin-top:0; padding-top:2rem; }
  .mobile-menu__links > a { display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:clamp(2.2rem,9vw,4rem); font-weight:600; line-height:1; letter-spacing:-.02em; text-decoration:none; text-transform:uppercase; }
  .mobile-menu__links > a::after { content:'↗'; color:var(--gold); font-size:1rem; }
  .mobile-menu .button { margin-top:1.5rem; font-family:'Manrope',sans-serif; font-size:.7rem; }
  .mobile-language { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--muted); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; }
  .mobile-language__options { display:flex; gap:.45rem; }
  .mobile-language__options a { min-width:2.8rem; padding:.6rem .7rem; border:1px solid var(--line); color:var(--ink); text-align:center; text-decoration:none; }
  .mobile-language__options a[aria-current='true'] { background:var(--gold); border-color:var(--gold); color:#050505; }
  .hero { min-height:42rem; height:100svh; }
  .hero__content { align-items:center; padding:calc(var(--header) + 2rem) 1.25rem 2rem; }
  .hero__copy { grid-column:1 / -1; }
  .hero__copy .eyebrow { align-items:flex-start; margin-bottom:1rem; line-height:1.5; }
  .hero__copy .eyebrow::before { flex:none; margin-top:.5em; }
  .hero__intro { grid-column:1 / span 7; padding-left:0; }
  .hero__buttons { grid-column:1 / span 10; }
  .manifesto__label { grid-column:1 / -1; margin-bottom:2rem; }
  .manifesto__heading { grid-column:1 / -1; }
  .manifesto__visual { grid-column:1 / -1; min-height:32rem; border-right:0; }
  .manifesto__content { grid-column:1 / -1; border-top:1px solid var(--line); }
  .categories__head h2 { grid-column:1 / -1; }
  .categories__head p { grid-column:6 / -1; margin-top:2rem; }
  .categories__panel { grid-template-columns:1fr; }
  .vehicle-list { border-right:0; }
  .vehicle-type { min-height:7.4rem; }
  .why__top .eyebrow { grid-column:1 / -1; margin-bottom:2rem; }
  .why__top h2 { grid-column:1 / span 9; }
  .why__top p { grid-column:9 / -1; }
  .reason h3 { grid-column:1 / span 7; }
  .reason p { grid-column:8 / span 4; }
  .cta__text { grid-column:1 / span 9; }
  .cta__action { grid-column:9 / -1; margin-top:2rem; }
  .inventory__title { grid-column:1 / span 9; }
  .inventory__all { grid-column:9 / -1; }
  .vehicle-card,.vehicle-card--feature,.vehicle-card--feature + .vehicle-card { grid-column:span 6; border-right:1px solid var(--line); }
  .vehicle-card:nth-child(3n) { border-right:1px solid var(--line); }
  .vehicle-card:nth-child(2n) { border-right:0; }
  .process__head h2 { grid-column:1 / span 8; }
  .process__head p { grid-column:9 / -1; }
  .reviews__layout { grid-template-columns:1fr; }
  .reviews__aside { min-height:22rem; border-right:0; border-bottom:1px solid var(--line); }
  .review { min-height:35rem; }
  .faq__layout { grid-template-columns:1fr; }
  .faq__intro { padding:0 1.25rem 4rem; }
  .footer__top { grid-template-columns:2fr 1fr 1fr; }
  .modal__dialog { grid-template-columns:1fr; }
  .modal__intro { min-height:16rem; }
}

@media (max-width: 640px) {
  :root { --gutter:1rem; }
  body { line-height:1.65; }
  body h1 { font-size:clamp(4.1rem,21vw,6.7rem); }
  body h2 { font-size:clamp(3.5rem,17vw,5.75rem); }
  .header__inner { height:var(--header); }
  .brand { padding-inline:.9rem; }
  .brand img { width:7rem; }
  .hero__content { align-items:center; padding:calc(var(--header) + 1.5rem) .9rem 1.5rem; }
  .hero__media video { object-position:50% center; }
  .hero__overlay { background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.05) 33%,rgba(0,0,0,.92) 83%); }
  .hero__copy .eyebrow { align-items:flex-start; margin-bottom:1.15rem; line-height:1.5; }
  .hero__copy .eyebrow::before { flex:none; margin-top:.5em; }
  .hero__copy h1 { max-width:100%; font-size:clamp(2.35rem,12.5vw,4.8rem); }
  .hero__intro { grid-column:1 / -1; margin-top:1.5rem; max-width:29rem; }
  .hero__buttons { grid-column:1 / -1; flex-direction:column; align-items:stretch; gap:.5rem; margin-top:1.5rem; }
  .hero__buttons .button { width:100%; flex:none; }
  .hero__index { display:none; }
  .section-pad { padding-block:5.5rem; }
  .manifesto__lead,.categories__head,.why__top,.inventory__head,.process__head { padding-inline:.9rem; }
  .manifesto__lead { padding-bottom:3.5rem; }
  .manifesto__visual { min-height:23rem; }
  .manifesto__content { padding:2rem .9rem; }
  .categories__head p { grid-column:1 / -1; }
  .categories__panel { min-height:0; }
  .vehicle-type { grid-template-columns:1fr auto; min-height:6.25rem; padding-inline:.9rem; }
  .vehicle-type__name { font-size:2.3rem; }
  .why__top h2,.why__top p { grid-column:1 / -1; }
  .why__top p { margin-top:1.5rem; }
  .reason { grid-template-columns:1fr 2rem; padding:1.5rem .9rem; }
  .reason h3,.reason p,.reason__mark { grid-column:auto; padding:0; }
  .reason h3 { align-self:start; font-size:2.5rem; }
  .reason p { grid-column:1 / -1; margin-top:1rem; }
  .reason__mark { grid-row:1; grid-column:2; }
  .cta { min-height:35rem; }
  .cta__content { padding:2rem .9rem; }
  .cta__text,.cta__action { grid-column:1 / -1; }
  .cta__action { margin-top:1.5rem; }
  .inventory__title,.inventory__all { grid-column:1 / -1; }
  .inventory__all { margin-top:1.5rem; }
  .vehicle-card,.vehicle-card--feature,.vehicle-card--feature + .vehicle-card { grid-column:1 / -1; min-height:31rem; border-right:0 !important; }
  .vehicle-card--feature .vehicle-card__media { aspect-ratio:16/10; }
  .process__head h2,.process__head p { grid-column:1 / -1; }
  .process__head p { margin-top:1.5rem; }
  .process__steps { --step-top-space:5rem; grid-template-columns:1fr; }
  .step,.step:nth-child(3),.step:nth-last-child(-n+2) { padding-inline:.9rem; border-right:0; border-bottom:1px solid var(--line); }
  .step:last-child { border-bottom:0; }
  .reviews__aside { min-height:19rem; padding-inline:.9rem; }
  .review { min-height:31rem; padding:2rem .9rem; }
  .review__quote { font-size:2.25rem; }
  .faq__intro { padding-inline:.9rem; }
  .faq-question { min-height:6rem; grid-template-columns:1fr 1.2rem; padding-inline:.9rem; }
  .faq-answer p { padding-left:.9rem; padding-right:.9rem; }
  .footer__top { grid-template-columns:1fr 1fr; }
  .footer__brand { grid-column:1 / -1; min-height:0; gap:1.5rem; border-right:0; border-bottom:1px solid var(--line); }
  .footer__column { border-right:1px solid var(--line); }
  .footer__column:nth-child(3) { border-right:0; }
  .footer__column:last-child { grid-column:1 / -1; }
  .footer__bottom { align-items:flex-start; flex-direction:column; padding-inline:.9rem; }
  .modal { padding:.5rem; }
  .modal__dialog { max-height:calc(100svh - 1rem); }
  .modal__intro { min-height:12rem; padding:1.25rem; }
  .modal__intro p { display:none; }
  .modal__form { padding:1.25rem; }
  .form-grid { grid-template-columns:1fr; }
  .field--full { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------------
	11. WordPress specifics
--------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
	12. Adjustments to the ported design

	The static markup only ever showed one variant of a few blocks. These rules
	cover the variants the fields make possible.
--------------------------------------------------------------------------- */

/* The hero background can be an image as well as a video. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}

/* A vehicle card thumbnail is a link, so the anchor has to carry the box. */
.vehicle-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}

/* A vehicle card title always takes exactly two lines, so the specs and the
   foot of neighbouring cards line up; a longer title is cut with "...".
   Line height 1 rather than the heading default of .92, because the clamp
   hides overflow and .92 would crop the tails of Cyrillic letters (Д, Щ, Ц). */
.vehicle-card h3 {
  display: -webkit-box;
  height: 2em;
  overflow: hidden;
  line-height: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* A vehicle card title is a link. */
.vehicle-card h3 a { text-decoration: none; }
.vehicle-card h3 a:hover { color: var(--gold); }

/* The first specs of a vehicle, under its title. Set like the meta row of the
   approved design; a long value is cut at two lines so every card keeps the
   same rhythm. The wide feature card has room for all four in one row. */
.vehicle-card__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.5rem 0 0;
}
.vehicle-card--feature .vehicle-card__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vehicle-card__spec {
  min-width: 0;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.vehicle-card__spec dt {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vehicle-card__spec dd {
  display: -webkit-box;
  margin: .4rem 0 0;
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
@media (max-width: 640px) {
  .vehicle-card--feature .vehicle-card__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
	13. Catalog — the vehicle-category term archive

	Ported from themes/temporary/catalog.html. The filter row is rendered as
	links to the other term archives, so the button rules apply to <a> too.
--------------------------------------------------------------------------- */

.catalog-hero {
  position: relative;
  /* Was a fixed height, which clipped the heading in every language whose
     words are longer than English: the content is bottom aligned, so what did
     not fit went off the top and under the header. Same height when the
     heading is short, room to grow when it is not. */
  min-height: clamp(44rem, 78svh, 60rem);
  overflow: hidden;
  background: #050505;
}
.catalog-hero__media,
.catalog-hero__overlay { position:absolute; inset:0; }
.catalog-hero__media img { width:100%; height:100%; object-fit:cover; object-position:center 48%; filter:contrast(1.06) brightness(.78); }
.catalog-hero__overlay { background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.08) 35%,rgba(0,0,0,.9)),linear-gradient(90deg,rgba(0,0,0,.74),transparent 65%); }
.catalog-hero__content { min-height:clamp(44rem,78svh,60rem); display:flex; align-items:flex-end; padding:calc(var(--header) + 5rem) 1.25rem 3rem; }
.catalog-hero__layout { width:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.catalog-hero__title { grid-column:1 / span 9; container-type:inline-size; }
/* This block had no gap under its eyebrow at all, unlike every other
   section. It only looked right in English: at line-height .92 the line box
   is 92% of the font size while the capitals are 93%, so capitals already
   sit a hair above it, and an accent ( Ó, Ñ ) reaches 27% of the font size
   higher still. The gap is the same 1.5rem the other sections use, plus a
   little in em so it grows with the heading rather than staying at 24px
   under a 142px capital. */
.catalog-hero__title .eyebrow { margin-bottom:1.5rem; }
.catalog-hero__title h1 { max-width:14ch; padding-top:.12em; font-size:clamp(3.4rem,10cqw,9.5rem); text-wrap:balance; overflow-wrap:break-word; }
.catalog-hero__title h1 span { display:block; color:transparent; -webkit-text-stroke:1px rgba(239,237,232,.72); }
.catalog-hero__summary { grid-column:1 / span 4; margin-top:2rem; padding-left:calc(8.333% + 1rem); color:rgba(239,237,232,.72); font-size:clamp(.9rem,1vw,1.08rem); }
.catalog-hero__status { grid-column:10 / -1; align-self:end; padding:1.4rem 1.25rem; border:1px solid var(--line); background:rgba(5,5,5,.42); }
.catalog-hero__status strong { display:block; font-family:var(--font-display); font-size:clamp(2.5rem,4vw,5rem); line-height:.9; font-weight:600; letter-spacing:-.03em; }
.catalog-hero__status span { display:block; margin-top:.65rem; color:var(--muted); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; }

.catalog-listing { background:#080808; }
/* The listing opens the catalog page, so it clears the fixed header itself. */
.catalog-listing.section-pad { padding-top:calc(var(--header) + clamp(3.5rem,6vw,7rem)); }
.catalog-listing__head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; padding:0 1.25rem 4rem; }
.catalog-listing__title { grid-column:1 / span 8; container-type:inline-size; }
/* Sized in cqw — a share of the column it sits in — so the same heading
   keeps the same proportion of its column at every viewport, and a long
   word in another language cannot grow past the grid rule beside it.
   The heading is the page H1 — the term name, or "The collection." — and a
   name too long for its column is stepped down by data-fit-text. */
.catalog-listing__title h1 { padding-top:.12em; font-size:clamp(2.6rem,11cqw,8.75rem); overflow-wrap:break-word; }
.catalog-listing__title .eyebrow { margin-bottom:1.5rem; }
.catalog-listing__intro { grid-column:9 / span 3; color:var(--muted); font-size:.92rem; }
.catalog-filter { display:grid; grid-template-columns:2.4fr 9.6fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.catalog-filter__label { display:flex; align-items:center; justify-content:space-between; min-height:5.25rem; padding:1rem 1.25rem; border-right:1px solid var(--line); color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.catalog-filter__label strong { color:var(--gold); font-family:var(--font-display); font-size:1.25rem; font-weight:600; letter-spacing:0; }
.catalog-filter__options { display:flex; overflow-x:auto; scrollbar-width:none; }
.catalog-filter__options::-webkit-scrollbar { display:none; }
.catalog-filter__button { flex:1 0 auto; min-width:9rem; padding:0 1.2rem; border:0; border-right:1px solid var(--line); border-radius:0; background:transparent; color:rgba(239,237,232,.65); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; cursor:pointer; transition:background .2s,color .2s; }
.catalog-filter__button:last-child { border-right:0; }
.catalog-filter__button:hover { color:var(--ink); background:rgba(255,255,255,.035); }
/* The filters are links to the other term archives, so the active state is
   aria-current rather than the aria-pressed of the static mockup. */
.catalog-filter__button[aria-pressed='true'],
.catalog-filter__button[aria-current='page'] { background:var(--gold); color:#050505; }
.catalog-filter__button { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.catalog-results { display:flex; align-items:center; justify-content:space-between; min-height:4.2rem; padding:0 1.25rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; }
.catalog-results strong { color:var(--ink); font-weight:600; }
.catalog-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px; padding:1px 0; background:var(--line); }
.catalog-grid .vehicle-card { grid-column:span 4; min-height:34rem; border:0 !important; }
.catalog-grid[data-visible-count='2'] .vehicle-card { grid-column:span 6; }
.catalog-grid[data-visible-count='1'] .vehicle-card { grid-column:1 / -1; }
.catalog-grid .vehicle-card[hidden] { display:none; }
.catalog-grid .vehicle-card.is-entering { animation:catalog-card-in .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes catalog-card-in { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:none; } }
.catalog-empty { display:none; grid-column:1 / -1; min-height:22rem; place-items:center; padding:3rem; background:#0a0a0b; color:var(--muted); text-align:center; }
.catalog-empty.is-visible { display:grid; }

/* Contrast pass, catalog additions */
.catalog-listing {
  background-color:#0c0c0e;
  background-image:none;
}
.process {
  background-color:#09090b;
  background-image:none;
}
.catalog-hero__status,
.catalog-filter,
.catalog-filter__label,
.catalog-filter__button,
.catalog-results { border-color:rgba(201,165,109,.28); }
.catalog-grid {
  gap:0;
  padding:0;
  background:transparent;
  box-shadow:0 -1px var(--bronze-line),0 1px var(--bronze-line);
}
.catalog-grid .vehicle-card {
  border-right:1px solid rgba(201,165,109,.52) !important;
  border-bottom:1px solid rgba(201,165,109,.52) !important;
  box-shadow:none;
}
.catalog-grid .vehicle-card:hover {
  border-right-color:rgba(224,195,146,.76) !important;
  border-bottom-color:rgba(224,195,146,.76) !important;
}

@media (max-width: 900px) {
  .catalog-hero { min-height:clamp(40rem,72svh,60rem); }
  .catalog-hero__content { min-height:clamp(40rem,72svh,60rem); padding:calc(var(--header) + 3rem) 1.25rem 2rem; }
  .catalog-hero__title { grid-column:1 / -1; }
  .catalog-hero__summary { grid-column:1 / span 7; padding-left:0; }
  .catalog-hero__status { grid-column:9 / -1; }
  .catalog-listing__title { grid-column:1 / span 8; }
  .catalog-listing__intro { grid-column:9 / -1; }
  .catalog-filter { grid-template-columns:1fr; }
  .catalog-filter__label { min-height:4rem; border-right:0; border-bottom:1px solid var(--line); }
  .catalog-filter__button { min-height:4.6rem; }
  .catalog-grid .vehicle-card { grid-column:span 6; }

}

@media (max-width: 640px) {
  .catalog-hero { min-height:max(40rem,100svh); }
  .catalog-hero__content { min-height:max(40rem,100svh); align-items:center; padding:calc(var(--header) + 1.5rem) .9rem 1.5rem; }
  .catalog-hero__title h1 { max-width:100%; font-size:clamp(2.5rem,13vw,4.6rem); }
  .catalog-hero__summary { grid-column:1 / -1; margin-top:1.4rem; }
  .catalog-hero__status { grid-column:1 / span 7; margin-top:1.4rem; padding:1rem; }
  .catalog-listing__head { padding-inline:.9rem; }
  .catalog-listing__title,.catalog-listing__intro { grid-column:1 / -1; }
  .catalog-listing__intro { margin-top:1.5rem; }
  .catalog-filter__label,.catalog-results { padding-inline:.9rem; }
  .catalog-filter__button { min-width:8rem; padding-inline:1rem; }
  .catalog-grid .vehicle-card,
  .catalog-grid[data-visible-count='2'] .vehicle-card,
  .catalog-grid[data-visible-count='1'] .vehicle-card { grid-column:1 / -1; min-height:31rem; }

}

/* Pagination for the catalog listing — not part of the static mockup. */
.catalog-listing .page-numbers {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.catalog-listing .page-numbers a,
.catalog-listing .page-numbers span {
  min-width: 3rem;
  min-height: 3rem;
  display: grid;
  place-items: center;
  padding: 0 .75rem;
  border: 1px solid var(--bronze-line);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.catalog-listing .page-numbers a:hover { background: rgba(255,255,255,.04); }
.catalog-listing .page-numbers .current {
  background: var(--gold);
  border-color: var(--gold);
  color: #050505;
}

/* ---------------------------------------------------------------------------
	14. Contact page

	Ported from themes/temporary/contact.html.
--------------------------------------------------------------------------- */

.contact-hero { position:relative; min-height:44rem; height:78svh; max-height:60rem; overflow:hidden; background:#050505; }
.contact-hero__media,.contact-hero__overlay { position:absolute; inset:0; }
.contact-hero__media img { width:100%; height:100%; object-fit:cover; object-position:center 45%; filter:brightness(.62) contrast(1.12); }
.contact-hero__overlay { background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.12) 35%,rgba(0,0,0,.9)),linear-gradient(90deg,rgba(0,0,0,.82),transparent 70%); }
.contact-hero__content { height:100%; display:flex; align-items:flex-end; padding:calc(var(--header) + 5rem) 1.25rem 3rem; }
.contact-hero__layout { width:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.contact-hero__title { grid-column:1 / span 9; }
.contact-hero__title h1 { max-width:9ch; font-size:clamp(4.75rem,9.2vw,11.5rem); }
.contact-hero__title h1 span { display:block; color:transparent; -webkit-text-stroke:1px rgba(239,237,232,.72); }
.contact-hero__summary { grid-column:1 / span 4; margin-top:2rem; padding-left:calc(8.333% + 1rem); color:rgba(239,237,232,.72); font-size:clamp(.9rem,1vw,1.08rem); }
.contact-hero__action { grid-column:9 / -1; align-self:end; margin-top:2rem; }

.contact-directory { background:#080808; }
.contact-directory__head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; padding:0 1.25rem 4.5rem; }
.contact-directory__head > div { grid-column:1 / span 8; }
.contact-directory__head .eyebrow { margin-bottom:1.5rem; }
.contact-directory__head > p { grid-column:9 / span 3; color:var(--muted); font-size:.92rem; }
.contact-board { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1px; padding:1px 0; background:var(--line); }
.contact-cell { grid-column:span 4; min-height:24rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; padding:1.5rem 1.25rem; background:#0a0a0b; }
.contact-cell--wide { grid-column:span 6; min-height:20rem; }
.contact-cell__index { color:var(--gold); font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.contact-cell h3 { margin-bottom:1.25rem; font-size:clamp(2rem,3vw,3.8rem); }
.contact-cell__value { display:inline-block; color:var(--ink); font-family:var(--font-display); font-size:clamp(1.75rem,3vw,3.7rem); font-style:normal; font-weight:500; line-height:1.05; letter-spacing:-.025em; text-decoration:none; text-transform:uppercase; overflow-wrap:anywhere; }
.contact-cell a.contact-cell__value:hover { color:var(--gold); }
.contact-cell__arrow { position:absolute; top:1.25rem; right:1.25rem; color:var(--gold); font-size:1.2rem; text-decoration:none; }
.contact-cell__note { margin-top:1.25rem; color:var(--muted); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.contact-link-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
.contact-link-list a { min-height:3.5rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:var(--ink); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.contact-link-list a span { color:var(--gold); }
.contact-link-list a:hover { color:var(--gold); }

.office { background:var(--carbon); }
.office__layout { display:grid; grid-template-columns:4fr 8fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.office__details { min-height:38rem; display:flex; flex-direction:column; justify-content:space-between; padding:2rem 1.25rem; border-right:1px solid var(--line); }
.office__details h2 { margin-top:1.5rem; font-size:clamp(3.5rem,6vw,7rem); }
.office__meta { display:flex; flex-direction:column; gap:1.25rem; }
.office__meta > div { padding-top:1rem; border-top:1px solid var(--line); }
.office__meta span { display:block; margin-bottom:.45rem; color:var(--muted); font-size:.59rem; letter-spacing:.14em; text-transform:uppercase; }
.office__meta strong { font-size:.76rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
.office__map { position:relative; min-height:38rem; overflow:hidden; background:#0d0d0e; }
.office__map iframe { width:100%; height:100%; min-height:38rem; border:0; filter:grayscale(1) invert(.9) contrast(.82); opacity:.78; }
.office__map::after { content:''; position:absolute; inset:0; pointer-events:none; border:1px solid rgba(201,165,109,.2); box-shadow:inset 0 0 8rem rgba(0,0,0,.4); }
.office__map-label { position:absolute; z-index:2; left:1rem; right:1rem; bottom:1rem; display:flex; justify-content:space-between; padding:.8rem 1rem; border:1px solid var(--line); background:rgba(5,5,5,.76); color:var(--gold-pale); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; }

.contact-form-section { background:#070707; }
.contact-form-layout { display:grid; grid-template-columns:4fr 8fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.contact-form-intro { min-height:46rem; display:flex; flex-direction:column; justify-content:space-between; padding:2rem 1.25rem; border-right:1px solid var(--line); background:linear-gradient(180deg,#0b0b0c,#080808); }
.contact-form-intro h2 { margin-top:1.5rem; font-size:clamp(3.8rem,6vw,7rem); }
.contact-form-intro > p { max-width:27rem; color:var(--muted); }
.contact-form-intro__note { padding-top:1rem; border-top:1px solid var(--line); }
.contact-form-intro__note span { display:block; margin-bottom:.5rem; color:var(--muted); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; }
.contact-form-intro__note strong { color:var(--gold-pale); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
.contact-form-panel { display:flex; align-items:center; padding:clamp(2rem,5vw,6rem); }
.contact-form-panel form { width:100%; }
.contact-form-submit { width:100%; margin-top:1rem; }
.contact-form-status { min-height:1.4rem; margin-top:1rem; color:var(--gold-pale); font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; }

/* Contrast pass, contact additions */
.office {
  background-color:#18181b;
  background-image:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.065),transparent 34rem),
    linear-gradient(112deg,transparent 8%,rgba(255,255,255,.035) 32%,transparent 52%,rgba(201,165,109,.028) 76%,transparent),
    repeating-linear-gradient(115deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.045) 1px 3px,transparent 3px 8px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.40'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,10px 10px,220px 220px;
  background-blend-mode:normal,normal,overlay,soft-light;
}
.contact-directory {
  background-color:#0c0c0e;
  background-image:none;
}
.contact-form-section {
  background-color:#101012;
  background-image:none;
}
.contact-form-intro { background:linear-gradient(180deg,#171719,#111113); }
.office__map::after { border-color:rgba(201,165,109,.38); }

@media (max-width: 900px) {
  .contact-hero { height:72svh; min-height:40rem; }
  .contact-hero__content { padding:calc(var(--header) + 3rem) 1.25rem 2rem; }
  .contact-hero__title { grid-column:1 / -1; }
  .contact-hero__summary { grid-column:1 / span 7; padding-left:0; }
  .contact-hero__action { grid-column:9 / -1; }
  .contact-directory__head > div { grid-column:1 / span 8; }
  .contact-directory__head > p { grid-column:9 / -1; }
  .contact-cell,.contact-cell--wide { grid-column:span 6; }
  .office__layout,.contact-form-layout { grid-template-columns:1fr; }
  .office__details,.contact-form-intro { min-height:28rem; border-right:0; border-bottom:1px solid var(--line); }
  .office__map,.office__map iframe { min-height:32rem; }
  .contact-form-panel { padding:3rem 1.25rem; }
}

@media (max-width: 640px) {
  .contact-hero { height:100svh; min-height:42rem; }
  .contact-hero__content { align-items:center; padding:calc(var(--header) + 1.5rem) .9rem 1.5rem; }
  .contact-hero__title h1 { max-width:100%; font-size:clamp(3rem,15.5vw,4.8rem); }
  .contact-hero__summary,.contact-hero__action { grid-column:1 / -1; }
  .contact-hero__summary { margin-top:1.4rem; }
  .contact-hero__action { margin-top:1.4rem; }
  .contact-directory__head { padding-inline:.9rem; }
  .contact-directory__head > div,.contact-directory__head > p { grid-column:1 / -1; }
  .contact-directory__head > p { margin-top:1.5rem; }
  .contact-cell,.contact-cell--wide { grid-column:1 / -1; min-height:20rem; padding-inline:.9rem; }
  .contact-cell__value { font-size:clamp(1.65rem,8vw,2.5rem); }
  .office__details,.contact-form-intro { min-height:27rem; padding-inline:.9rem; }
  .office__map,.office__map iframe { min-height:26rem; }
  .contact-form-panel { padding:2rem .9rem; }
}

/* ---------------------------------------------------------------------------
	15. Contact Form 7 forms

	The forms carry their own pec-cf7 classes, written in the Contact Form 7
	editor. The look is the one the static mockup gave the modal and contact
	forms; only the class names differ.

	Autop is switched off in inc/cf7--forms.php, so the markup is exactly what
	the form template says — labels, rows and an action block, no <p> or <br>.
--------------------------------------------------------------------------- */

.pec-cf7 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Two fields side by side. */
.pec-cf7__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* The label wraps its own field, so it is the column. */
.pec-cf7__label {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: rgba(239, 237, 232, .68);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pec-cf7__label--full { grid-column: 1 / -1; }

/* Contact Form 7 wraps every control in this span. */
.pec-cf7 .wpcf7-form-control-wrap { display: block; }

/* The field must not inherit the label typography. */
.pec-cf7__field {
  width: 100%;
  height: 3.5rem;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #111113;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  transition: border-color .2s ease;
}
.pec-cf7__field:focus { border-color: var(--gold); }
.pec-cf7__field::placeholder { color: var(--muted); }
.pec-cf7__field option { background: #111113; color: var(--ink); }

.pec-cf7__textarea {
  height: auto;
  min-height: 7rem;
  line-height: 1.6;
  resize: vertical;
}

/* The vehicle the request is about. It is information rather than something to
   fill in, so it reads as a stated value, not as a disabled input. */
.pec-cf7__field--readonly {
  border-color: rgba(198,160,106,.45);
  background: rgba(198,160,106,.08);
  color: var(--ink);
  font-weight: 600;
  cursor: default;
}
.pec-cf7__field--readonly:focus { border-color: rgba(198,160,106,.45); }

.pec-cf7__actions { margin-top: .5rem; }

/* A submit input cannot hold the arrow of .button, so it is a solid bar. */
.pec-cf7__submit {
  width: 100%;
  min-height: 3.75rem;
  padding: 0 1.25rem;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: var(--gold);
  color: #080808;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.pec-cf7__submit:hover {
  background: var(--gold-pale);
  border-color: var(--gold-pale);
}
.pec-cf7__submit:disabled {
  opacity: .55;
  cursor: default;
}

/* Plugin chrome. */
.wpcf7 form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--gold); color: var(--gold); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #b4483c; color: #d98177; }
.wpcf7-not-valid-tip {
  margin-top: .4rem;
  color: #d98177;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: none;
}
.wpcf7-spinner { display: block; margin: .75rem auto 0; }
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 640px) {
  .pec-cf7__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
	16. Client area

	Ported from the approved account mockup, rule for rule. Left out: the
	tracking card and its steps, which the client area does not have — tracking
	lives with the carrier and the order row links to it.

	The sign in screen has no mockup of its own. It is the contact form layout
	of section 14 with the form classes of section 15, so it needs little here
	beyond the messages and the links under the form.
--------------------------------------------------------------------------- */

.account-main { padding-top:var(--header); }
.account-hero {
  position:relative;
  overflow:hidden;
  background-color:#09090b;
  background-image:
radial-gradient(circle at 76% 18%,rgba(201,165,109,.10),transparent 30rem),
  linear-gradient(118deg,transparent 5%,rgba(255,255,255,.025) 38%,transparent 60%);
}
.account-hero__inner { min-height:40rem; padding:clamp(5.5rem,9vw,9rem) 1.25rem 0; }
.account-hero__top { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.account-hero__copy { grid-column:1 / span 9; }
.account-hero__copy .eyebrow { margin-bottom:1.5rem; }
.account-hero__copy h1 { max-width:9ch; font-size:clamp(5rem,8.8vw,10.5rem); }
.account-hero__copy h1 span {
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,165,109,.75);
}
.account-hero__profile {
  grid-column:10 / -1;
  min-height:11rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.25rem;
  border-top:1px solid var(--bronze-line);
  border-left:1px solid var(--bronze-line);
  background:rgba(18,18,20,.72);
}
.account-hero__profile-label,
.account-stat dt,
.order-kicker,
.order-meta dt,
.invoice-summary dt {
  color:var(--muted);
  font-size:.59rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.account-hero__profile strong {
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw,3.7rem);
  font-weight:600;
  line-height:.95;
  text-transform:uppercase;
}
.account-hero__profile-meta { color:var(--gold-pale); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
.account-hero__profile-meta a { color:inherit; overflow-wrap:anywhere; }
.account-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:clamp(4rem,8vw,7rem) 0 0;
  border-top:1px solid var(--bronze-line);
}
.account-stat {
  min-height:9rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  margin:0;
  padding:1.25rem;
  border-right:1px solid rgba(201,165,109,.28);
  background:rgba(13,13,15,.72);
}
.account-stat:last-child { border-right:0; }
.account-stat dd {
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4vw,4.5rem);
  font-weight:600;
  line-height:.85;
  text-transform:uppercase;
}
.account-section-head {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:end;
  padding:0 1.25rem clamp(3.5rem,6vw,5.5rem);
}
.account-section-head > div { grid-column:1 / span 8; }
.account-section-head .eyebrow { margin-bottom:1.4rem; }
.account-section-head > p { grid-column:9 / span 3; color:var(--muted); font-size:.9rem; }
.account-orders { background:#09090b; }
.orders-toolbar {
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  border-top:1px solid var(--bronze-line);
  border-bottom:1px solid var(--bronze-line);
}
.orders-toolbar__count { display:flex; align-items:center; padding:1rem 1.25rem; color:var(--muted); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; }
.orders-toolbar__count strong { margin-right:.4rem; color:var(--ink); }
.order-filters { display:flex; }
.order-filter {
  min-width:8.5rem;
  min-height:4.5rem;
  padding:0 1rem;
  border:0;
  border-left:1px solid rgba(201,165,109,.28);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.order-filter:hover { color:var(--ink); }
.order-filter[aria-pressed='true'] { background:var(--gold); color:#080808; }
.order-list { border-bottom:1px solid var(--bronze-line); }
.order-row {
  min-height:10rem;
  display:grid;
  grid-template-columns:1.1fr 3fr 1.35fr 1.2fr 1.15fr;
  align-items:center;
  border-bottom:1px solid rgba(201,165,109,.28);
  background:#101012;
}
.order-row:last-child { border-bottom:0; }
.order-row[hidden] { display:none; }
.order-row > * { min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:1.25rem; border-right:1px solid var(--line); }
.order-row > *:last-child { border-right:0; }
.order-id { color:var(--gold-pale); font-family:var(--font-display); font-size:1.35rem; font-weight:600; }
.order-vehicle strong { font-family:var(--font-display); font-size:clamp(1.8rem,2.5vw,3.1rem); font-weight:600; line-height:1; text-transform:uppercase; }
.order-vehicle span,
  .order-value dd { margin-top:.55rem; color:var(--muted); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; }
.order-meta,
  .order-value { margin:0; }
.order-meta dd,
  .order-value dd { margin:.55rem 0 0; }
.order-state { color:var(--gold-pale); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.order-state--delivered { color:#a7b2a5; }
.order-action { align-items:stretch; }
.order-action .button { width:100%; min-height:3.2rem; padding-inline:.85rem; font-size:.59rem; }
.orders-empty { display:none; min-height:16rem; place-items:center; color:var(--muted); text-align:center; }
.orders-empty.is-visible { display:grid; }
.account-invoices {
  background-color:#151517;
  background-image:
radial-gradient(circle at 85% 12%,rgba(255,255,255,.045),transparent 30rem),
  repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 1px,transparent 1px 8px);
}
.invoice-layout { display:grid; grid-template-columns:4fr 8fr; border-top:1px solid var(--bronze-line); border-bottom:1px solid var(--bronze-line); }
.invoice-summary { min-height:31rem; display:flex; flex-direction:column; justify-content:space-between; margin:0; padding:2rem 1.25rem; border-right:1px solid var(--bronze-line); background:#101012; }
.invoice-summary__amount dd { margin:.7rem 0 0; color:var(--gold-pale); font-family:var(--font-display); font-size:clamp(3.5rem,6vw,7rem); font-weight:600; line-height:.9; }
.invoice-summary__meta { display:grid; gap:1rem; }
.invoice-summary__meta > div { padding-top:1rem; border-top:1px solid var(--line); }
.invoice-summary dd { margin:.45rem 0 0; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.invoice-table-wrap { overflow-x:auto; background:#0d0d0f; }
.invoice-table { width:100%; min-width:47rem; border-collapse:collapse; }
.invoice-table th {
  height:4.2rem;
  padding:0 1rem;
  border-bottom:1px solid var(--bronze-line);
  color:var(--muted);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.14em;
  text-align:left;
  text-transform:uppercase;
}
.invoice-table td { height:8rem; padding:1rem; border-bottom:1px solid rgba(201,165,109,.25); font-size:.72rem; }
.invoice-table tr:last-child td { border-bottom:0; }
.invoice-number { color:var(--gold-pale); font-family:var(--font-display); font-size:1.25rem; font-weight:600; }
.invoice-amount { font-family:var(--font-display); font-size:1.7rem; font-weight:600; }
.invoice-status { font-size:.61rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.invoice-status--due { color:var(--gold-pale); }
.invoice-status--paid { color:#a7b2a5; }
.invoice-download {
  min-height:2.8rem;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 .8rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
}
.invoice-download:hover { border-color:var(--gold); color:var(--gold-pale); }

@media (max-width: 900px) {
  .account-hero__copy { grid-column:1 / span 8; }
  .account-hero__profile { grid-column:9 / -1; }
  .account-section-head > div { grid-column:1 / span 8; }
  .account-section-head > p { grid-column:9 / -1; }
  .order-row { grid-template-columns:1fr 2.4fr 1.3fr 1.2fr; }
  .order-value { display:none; }
  .invoice-layout { grid-template-columns:1fr; }
  .invoice-summary { min-height:23rem; border-right:0; border-bottom:1px solid var(--bronze-line); }
}
@media (max-width: 640px) {
  .account-main { padding-top:var(--header); }
  .account-hero__inner { min-height:0; padding:4.5rem .9rem 0; }
  .account-hero__top { display:block; }
  .account-hero__copy h1 { max-width:100%; font-size:clamp(3.2rem,16vw,5.25rem); }
  .account-hero__profile { min-height:9rem; margin-top:3rem; border-left:0; }
  .account-stats { grid-template-columns:1fr; margin-top:3rem; }
  .account-stat { min-height:7rem; border-right:0; border-bottom:1px solid rgba(201,165,109,.28); }
  .account-stat:last-child { border-bottom:0; }
  .account-section-head { display:block; padding:0 .9rem 3rem; }
  .account-section-head > p { margin-top:1.5rem; }
  .orders-toolbar { align-items:stretch; flex-direction:column; }
  .orders-toolbar__count { min-height:4rem; }
  .order-filters { overflow-x:auto; border-top:1px solid var(--bronze-line); scrollbar-width:none; }
  .order-filters::-webkit-scrollbar { display:none; }
  .order-filter { flex:1 0 7.5rem; border-left:0; border-right:1px solid rgba(201,165,109,.28); }
  .order-row { grid-template-columns:1fr 1fr; padding:1rem 0; }
  .order-row > * { min-height:5rem; padding:.9rem; border-right:0; }
  .order-row > *:nth-child(odd) { border-right:1px solid var(--line); }
  .order-vehicle { grid-column:1 / -1; grid-row:1; border-right:0 !important; border-bottom:1px solid var(--line); }
  .order-id { grid-column:1; grid-row:2; }
  .order-meta { grid-column:2; grid-row:2; }
  .order-action { grid-column:1 / -1; border-top:1px solid var(--line); }
  .invoice-summary { min-height:22rem; padding:1.5rem .9rem; }
  .invoice-table-wrap { scrollbar-width:thin; }
}

/* Sign out, under the greeting. */
.account-signout {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.account-signout:hover { color: var(--gold); }

/* The sign in screen's heading is the page's h1; the contact form sizes an h2. */
.account-auth .contact-form-intro h1 {
  margin-top: 1.5rem;
  font-size: clamp(3.8rem, 6vw, 7rem);
}

/* A message and a form stacked in the panel of the contact form layout. */
.account-auth .contact-form-panel {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 1.25rem;
}
.account-auth-message {
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  font-size: .78rem;
}
.account-auth-message--error { border-color: rgba(214, 120, 110, .55); color: #f0c2bb; }
.account-auth-message--success { border-color: var(--bronze-line); color: var(--gold-pale); }
.account-auth-form__remember {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
  font-size: .8rem;
}
.account-auth-form__switch {
  align-self: flex-start;
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.account-auth-form__switch:hover { color: var(--gold); }

/* The mockup's download control is a <button>; here it is a link. */
.invoice-download { text-decoration: none; }
.invoice-download:hover { border-color: var(--gold); color: var(--gold-pale); }

/* ---------------------------------------------------------------------------
	17. Page not found

	The approved markup has no 404 screen. It borrows the front page hero —
	grain, bronze grid, content anchored to the bottom, a heading with an
	outlined second line, the summary and buttons on the same columns — and
	sets the error code beside the heading in large figures, outlined in
	bronze the way the manifesto outlines its heading. Below 900px there is no
	room beside the heading, so the figures move above it.
--------------------------------------------------------------------------- */

.not-found {
  position:relative;
  overflow:hidden;
  background-color:#050505;
  background-image:
    radial-gradient(circle at 78% 52%,rgba(201,165,109,.11),transparent 32rem),
    linear-gradient(118deg,transparent 5%,rgba(255,255,255,.025) 38%,transparent 60%);
}
.not-found__content {
  min-height:max(49rem,100svh);
  display:flex;
  align-items:flex-end;
  padding:calc(var(--header) + 5rem) 1.25rem 3.25rem;
}
.not-found__layout { width:100%; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:end; }
.not-found__title { grid-column:1 / span 7; grid-row:1; }
.not-found__title .eyebrow { margin-bottom:1.5rem; }
.not-found__title h1 { padding-top:.12em; }
.not-found__title h1 span { display:block; color:transparent; -webkit-text-stroke:1px rgba(239,237,232,.8); }
/* Sized so the three figures fill the five columns beside the heading and
   stand about as tall as it does. */
.not-found__code {
  grid-column:8 / -1;
  grid-row:1;
  justify-self:end;
  font-family:var(--font-display);
  font-size:clamp(9rem,27vw,32rem);
  font-weight:600;
  line-height:.8;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,165,109,.6);
  user-select:none;
}
.not-found__summary {
  grid-column:1 / span 4;
  grid-row:2;
  margin-top:2.2rem;
  padding-left:calc(8.333% + 1rem);
  color:rgba(239,237,232,.72);
  font-size:clamp(.94rem,1.05vw,1.12rem);
}
.not-found__buttons { grid-column:6 / span 5; grid-row:2; display:flex; align-items:center; gap:.75rem; margin-top:2.2rem; }
.not-found__buttons .button { flex:1; }

@media (max-width: 900px) {
  .not-found__content { align-items:center; padding:calc(var(--header) + 2rem) 1.25rem 2rem; }
  .not-found__code { grid-column:1 / -1; grid-row:1; margin-bottom:2.5rem; font-size:clamp(8rem,40vw,20rem); }
  .not-found__title { grid-column:1 / -1; grid-row:2; }
  .not-found__summary { grid-column:1 / span 7; grid-row:3; padding-left:0; }
  .not-found__buttons { grid-column:1 / span 10; grid-row:4; }
}

@media (max-width: 640px) {
  .not-found__content { min-height:max(40rem,100svh); padding:calc(var(--header) + 1.5rem) .9rem 1.5rem; }
  .not-found__code { margin-bottom:2rem; font-size:clamp(6.5rem,40vw,12rem); }
  .not-found__summary { grid-column:1 / -1; max-width:29rem; margin-top:1.5rem; }
  .not-found__buttons { grid-column:1 / -1; flex-direction:column; align-items:stretch; gap:.5rem; margin-top:1.5rem; }
  .not-found__buttons .button { width:100%; flex:none; }
}