/* ==========================================================================
   Cortex — front page
   Loaded only on the front page. Reads from tokens.css; no literal colours.
   ========================================================================== */

.cx-home { padding: 0; }

/* --- hero ----------------------------------------------------------------
   Sized to its content, not to the viewport. A 100vh opener pushes the
   catalogue out of the first frame, which is the thing worth seeing.      */

.cx-hero {
  border-bottom: 1px solid var(--cx-line);
  padding: var(--cx-s8) 0 var(--cx-s7);
  position: relative;
  overflow: hidden;
}
.cx-hero-inner {
  display: grid;
  gap: var(--cx-s6);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 860px) {
  .cx-hero-inner { grid-template-columns: 1.35fr .65fr; }
}

.cx-hero-title {
  font-family: var(--cx-sans);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.01;
  letter-spacing: 0.012em;
  text-wrap: balance;
  margin: var(--cx-s3) 0 var(--cx-s4);
  text-transform: uppercase;
}
.cx-hero-lede {
  color: var(--cx-text-mut);
  font-size: var(--cx-t-md);
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: var(--cx-s5);
}
.cx-hero-cta { display: flex; gap: var(--cx-s3); flex-wrap: wrap; }

.cx-hero-mark { color: var(--cx-gold); justify-self: center; }
.cx-hero-mark svg { width: clamp(9rem, 22vw, 15rem); height: auto; display: block; }
@media (max-width: 859px) { .cx-hero-mark { display: none; } }

/* --- trust strip ---------------------------------------------------------
   Four facts, one hairline grid. Figures are mono and tabular so they line
   up with every other number on the site.                                 */

.cx-trust { border-bottom: 1px solid var(--cx-line); }
.cx-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--cx-line);
  max-width: var(--cx-wrap);
  margin-inline: auto;
}
@media (min-width: 720px) { .cx-trust-grid { grid-template-columns: repeat(4, 1fr); } }

.cx-trust-grid div {
  background: var(--cx-bg);
  padding: var(--cx-s5) var(--cx-s5);
}
.cx-trust-grid b {
  display: block;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-lg);
  font-weight: 500;
  color: var(--cx-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--cx-s1);
}
.cx-trust-grid span {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
}

/* --- sections ------------------------------------------------------------ */

.cx-section { padding: var(--cx-s8) 0 0; }
.cx-section:last-of-type { padding-bottom: var(--cx-s8); }

.cx-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cx-s4);
  flex-wrap: wrap;
  margin-bottom: var(--cx-s5);
  padding-bottom: var(--cx-s3);
  border-bottom: 1px solid var(--cx-line);
}
.cx-section-head h2 {
  font-size: var(--cx-t-xl);
  margin: 0;
}
.cx-section-head a {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
}

/* --- compound classes ---------------------------------------------------- */

.cx-class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cx-s4);
}
@media (min-width: 900px) { .cx-class-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-class {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 13rem;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  overflow: hidden;
  background: var(--cx-bg-alt);
  text-decoration: none;
  transition: border-color 160ms ease;
}
.cx-class:hover { border-color: var(--cx-gold); text-decoration: none; }

.cx-class-art { position: absolute; inset: 0; }
.cx-class-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms ease;
  filter: grayscale(.25) contrast(1.05);
}
.cx-class:hover .cx-class-art img { transform: scale(1.04); }
/* Keep the label readable whatever the photograph does behind it. */
.cx-class-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--cx-bg) 4%, rgba(10,10,12,.72) 38%, rgba(10,10,12,.15) 100%);
}
.cx-class-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cx-s3);
  width: 100%;
  padding: var(--cx-s4);
}
.cx-class:hover { background: var(--cx-panel); text-decoration: none; }
.cx-class-name {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text);
  line-height: 1.5;
}
.cx-class-count {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  color: var(--cx-gold);
  font-variant-numeric: tabular-nums;
}

/* --- featured grid -------------------------------------------------------
   Inherits the archive grid from shop.css, which is also loaded here.    */

.cx-home-grid { margin-bottom: 0 !important; }

.cx-admin-note {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  line-height: 1.7;
  color: var(--cx-text-dim);
  border: 1px dashed var(--cx-line);
  border-radius: var(--cx-radius);
  padding: var(--cx-s4);
  max-width: none;
}

/* Certificates are a reason to make contact, not a badge — so that tile is a
   link and reads as one. */
.cx-trust-link {
  text-decoration: none;
  transition: background 120ms ease;
}
.cx-trust-link:hover { background: var(--cx-panel); text-decoration: none; }
.cx-trust-link span { color: var(--cx-gold); }

/* --- hero artwork --------------------------------------------------------
   The photograph is decorative — every word in the hero is real text beside
   it, not baked into the image. alt is empty for that reason.             */

/* Artwork spans the whole hero and the copy sits on it, the way the previous
   site did it — not a framed picture in a column. */
.cx-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cx-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* Darken the left so the lockup and copy stay legible over it. */
.cx-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--cx-bg) 6%, rgba(10,10,12,.82) 34%, rgba(10,10,12,.30) 62%, rgba(10,10,12,.55) 100%),
    linear-gradient(to bottom, rgba(10,10,12,.5) 0%, transparent 25%, transparent 72%, var(--cx-bg) 100%);
}
@media (max-width: 819px) {
  .cx-hero-bg img { object-position: 72% center; }
  .cx-hero-bg::after {
    background: linear-gradient(to bottom, rgba(10,10,12,.72) 0%, rgba(10,10,12,.88) 55%, var(--cx-bg) 100%);
  }
}

/* ==========================================================================
   Hero — brand lockup, tagline, points, artwork
   ========================================================================== */

.cx-hero-lockup {
  width: min(340px, 72%);
  height: auto;
  display: block;
  margin: 0 0 var(--cx-s4);
  border-radius: var(--cx-radius);
}

.cx-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--cx-s6);
}
.cx-hero-points li {
  font-size: var(--cx-t-base);
  line-height: 1.75;
  color: var(--cx-text-mut);
}

.cx-hero-cta { margin-top: var(--cx-s2); }

/* ==========================================================================
   Trust bar — one bordered strip, four marks, hairline dividers
   ========================================================================== */

.cx-trust-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-bg-alt);
  overflow: hidden;
}
@media (min-width: 900px) { .cx-trust-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cx-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cx-s3);
  padding: var(--cx-s5) var(--cx-s4);
  border-right: 1px solid var(--cx-line);
  border-bottom: 1px solid var(--cx-line);
}
.cx-trust-item:nth-child(2n) { border-right: 0; }
.cx-trust-item:nth-child(n+3) { border-bottom: 0; }
@media (min-width: 900px) {
  .cx-trust-item { border-bottom: 0; }
  .cx-trust-item:nth-child(2n) { border-right: 1px solid var(--cx-line); }
  .cx-trust-item:last-child { border-right: 0; }
}

.cx-trust-icon { color: var(--cx-gold); flex: none; display: block; }
.cx-trust-icon svg { width: 26px; height: 26px; display: block; }

.cx-trust-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cx-trust-text b {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-md);
  font-weight: 700;
  color: var(--cx-text);
  line-height: 1.1;
}
.cx-trust-text span {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-text-dim);
}

/* ==========================================================================
   Featured compounds — a preview, not the whole catalogue
   ========================================================================== */

.cx-feature-head {
  display: flex;
  align-items: center;
  gap: var(--cx-s4);
  margin-bottom: var(--cx-s5);
}
.cx-feature-head h2 {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  font-weight: 500;
  letter-spacing: var(--cx-track-eyebrow);
  text-transform: uppercase;
  color: var(--cx-gold);
  margin: 0;
  white-space: nowrap;
}
.cx-rule-line { flex: 1; height: 1px; background: var(--cx-line); }

.cx-carousel { position: relative; }

.cx-car-track {
  display: flex;
  gap: var(--cx-s4);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--cx-s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.cx-car-track::-webkit-scrollbar { display: none; }

.cx-car-item {
  flex: 0 0 auto;
  width: 46%;
  scroll-snap-align: start;
}
@media (min-width: 700px)  { .cx-car-item { width: 30%; } }
@media (min-width: 1024px) { .cx-car-item { width: 23%; } }
@media (min-width: 1280px) { .cx-car-item { width: 18.5%; } }

.cx-car-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--cx-line);
  border-radius: var(--cx-radius);
  background: var(--cx-bg);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease;
}
.cx-car-item a:hover { border-color: var(--cx-gold); background: var(--cx-panel); text-decoration: none; }

.cx-car-media { display: block; background: var(--cx-bg-alt); }
.cx-car-media img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.cx-car-name {
  font-family: var(--cx-sans);
  font-size: var(--cx-t-sm);
  font-weight: 600;
  color: var(--cx-text);
  line-height: 1.3;
  padding: var(--cx-s4) var(--cx-s4) var(--cx-s1);
}
.cx-car-mass {
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cx-text-dim);
  padding: 0 var(--cx-s4) var(--cx-s4);
}
.cx-car-cta {
  margin-top: auto;
  font-family: var(--cx-mono);
  font-size: var(--cx-t-xs);
  letter-spacing: var(--cx-track-label);
  text-transform: uppercase;
  color: var(--cx-gold);
  border-top: 1px solid var(--cx-line);
  padding: var(--cx-s3) var(--cx-s4);
}

.cx-car-btn {
  position: absolute;
  top: 38%;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--cx-line);
  border-radius: 50%;
  background: var(--cx-bg);
  color: var(--cx-gold);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.cx-car-btn:hover { border-color: var(--cx-gold); background: var(--cx-panel); }
.cx-car-prev { left: calc(var(--cx-s6) * -1); }
.cx-car-next { right: calc(var(--cx-s6) * -1); }
@media (min-width: 1100px) { .cx-car-btn { display: block; } }

.cx-feature-all { text-align: center; margin: var(--cx-s6) 0 0; }

.cx-hero-copy { max-width: 34rem; }