/* ==================================================
   CAN BUS NETWORK SIMULATION & DIAGNOSTICS
   PROJECT PAGE
================================================== */


/* ==================================================
   PAGE
================================================== */

.can-page {

  width: min(
    1200px,
    calc(100% - 80px)
  );

  margin: 0 auto;

  font-family: var(--font-main);

  color: var(--text-main);
}



/* ==================================================
   HERO
================================================== */

.can-hero {

  padding:
    var(--space-24)
    0
    var(--space-64);

  text-align: center;

  border-top:
    1px solid var(--accent);

  border-bottom:
    1px solid var(--accent);
}


.can-eyebrow,
.can-kicker {

  margin:
    0
    0
    var(--space-12);

  font-size:
    var(--font-10);

  letter-spacing:
    3px;

  text-transform:
    uppercase;

  color:
    var(--accent);
}


.can-hero h1 {

  margin: 0;

  font-size:
    var(--font-62);

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -2px;
}


.can-hero h1 span {

  color:
    var(--accent);

  font-style:
    italic;

  font-weight:
    400;
}


.can-hero-copy {

  max-width:
    760px;

  margin:
    var(--space-24)
    auto
    0;

  font-size:
    var(--font-16);

  line-height:
    1.7;

  color:
    var(--text-muted);
}



/* ==================================================
   HERO LINKS
================================================== */

.project-links {

  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    var(--space-16);

  margin-top:
    var(--space-32);
}


.project-link {

  padding:
    var(--space-12)
    var(--space-24);

  border:
    1px solid var(--accent);

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  text-decoration:
    none;

  color:
    var(--accent);

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.project-link:hover {

  background:
    var(--accent);

  color:
    var(--white);

  transform:
    translateY(-2px);
}


.project-link-primary {

  background:
    var(--accent);

  color:
    var(--white);
}



/* ==================================================
   EXECUTIVE SUMMARY
================================================== */

.can-summary {

  display:
    grid;

  grid-template-columns:
    1.35fr
    0.65fr;

  gap:
    var(--space-80);

  padding:
    var(--space-80)
    0;

  border-bottom:
    1px solid var(--light-grey);
}


.can-summary-copy h2,
.can-question h2,
.can-section-heading h2,
.can-section-copy h2,
.can-result h2,
.can-limitations h2,
.can-takeaways h2,
.technical-case-header h2,
.github-cta h2 {

  margin:
    0
    0
    var(--space-24);

  font-size:
    var(--font-30);

  font-weight:
    500;

  line-height:
    1.25;
}


.can-summary-copy > p:not(.can-kicker),
.can-question > p:last-child,
.can-section-copy > p,
.can-section-heading > p:last-child,
.can-result-copy > p,
.can-limitations > p:not(.can-kicker),
.github-cta p:not(.can-kicker) {

  font-size:
    var(--font-16);

  line-height:
    1.8;

  color:
    var(--text-muted);

  text-align:
    justify;
}

/* ==================================================
   INTEGRATED VALIDATION — SECTION CONTAINER FIX
================================================== */

.integrated-validation-section {
  display: block;

  width: 100%;

  padding:
    var(--space-96)
    0;

  border-top:
    1px solid var(--light-grey);
}


/* ==================================================
   FULL SECTION WRAPPER
================================================== */

.integrated-validation-section .iv2-wrapper {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;
}


/* ==================================================
   HEADER
================================================== */

.integrated-validation-section .iv2-header {
  width: 100%;
  max-width: 850px;

  margin:
    0
    0
    var(--space-48);
}


.integrated-validation-section .iv2-header h2 {
  margin:
    var(--space-12)
    0
    var(--space-24);

  font-size:
    var(--font-30);

  font-weight: 500;

  line-height: 1.2;
}


.integrated-validation-section .iv2-header > p:last-child {
  margin: 0;

  max-width: 800px;

  font-size:
    var(--font-16);

  line-height: 1.8;

  color:
    var(--text-muted);

  text-align: justify;
}


/* ==================================================
   MAIN CONTENT
   LEFT TEXT + RIGHT IMAGE
================================================== */

.integrated-validation-section .iv2-main {
  display: grid;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr);

  gap:
    var(--space-64);

  width: 100%;

  align-items: center;
}


/* ==================================================
   LEFT COLUMN
================================================== */

.integrated-validation-section .iv2-left {
  display: flex;

  flex-direction: column;

  gap:
    var(--space-32);

  width: 100%;
}


.integrated-validation-section .iv2-block {
  width: 100%;
  max-width: none;
}


.integrated-validation-section .iv2-block h3 {
  margin:
    0
    0
    var(--space-12);

  font-size:
    var(--font-18);

  font-weight: 500;

  line-height: 1.3;
}


.integrated-validation-section .iv2-block p {
  margin: 0;

  font-size:
    var(--font-14);

  line-height: 1.75;

  color:
    var(--text-muted);

  text-align: justify;
}


/* ==================================================
   DIAGNOSTIC LOGIC
================================================== */

.integrated-validation-section .iv2-logic {
  width: 100%;
  max-width: none;

  padding:
    var(--space-24);

  border-left:
    3px solid var(--accent);

  background:
    var(--off-white);
}


.integrated-validation-section .iv2-logic span {
  display: block;

  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  color:
    var(--accent);
}


.integrated-validation-section .iv2-logic p {
  margin: 0;

  font-size:
    var(--font-18);

  line-height: 1.5;

  color:
    var(--text-main);
}


/* ==================================================
   RIGHT IMAGE
================================================== */

.integrated-validation-section .iv2-figure {
  width: 100%;

  margin: 0;
}


.integrated-validation-section .iv2-figure img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  background:
    var(--white);

  border:
    1px solid var(--light-grey);
}


.integrated-validation-section .iv2-figure figcaption {
  margin-top:
    var(--space-12);

  padding-top:
    var(--space-12);

  border-top:
    1px solid var(--light-grey);

  font-size:
    var(--font-10);

  line-height: 1.6;

  color:
    var(--text-muted);
}


/* ==================================================
   FAULT CODE BAR
   SPANS FULL WIDTH OF BOTH COLUMNS
================================================== */

.integrated-validation-section .iv2-codes {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin-top:
    var(--space-64);

  border-top:
    1px solid var(--text-main);

  border-bottom:
    1px solid var(--light-grey);
}


.integrated-validation-section .iv2-code {
  min-width: 0;

  padding:
    var(--space-24)
    var(--space-24)
    var(--space-32);

  border-right:
    1px solid var(--light-grey);
}


.integrated-validation-section .iv2-code:last-child {
  border-right: 0;
}


.integrated-validation-section .iv2-code strong {
  display: block;

  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-36);

  font-weight: 400;

  line-height: 1;

  color:
    var(--accent);
}


.integrated-validation-section .iv2-code span {
  display: block;

  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-10);

  line-height: 1.3;

  letter-spacing:
    1px;

  color:
    var(--text-muted);
}


.integrated-validation-section .iv2-code p {
  margin: 0;

  max-width: 190px;

  font-size:
    var(--font-12);

  line-height: 1.5;

  color:
    var(--text-muted);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .integrated-validation-section .iv2-main {
    grid-template-columns:
      1fr;

    gap:
      var(--space-48);
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

  .integrated-validation-section {
    padding:
      var(--space-64)
      0;
  }


  .integrated-validation-section .iv2-codes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .integrated-validation-section .iv2-code:nth-child(2) {
    border-right: 0;
  }


  .integrated-validation-section .iv2-code:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--light-grey);
  }

}

/* ==================================================
   PROJECT METADATA
================================================== */

.can-meta {

  border-top:
    1px solid var(--text-main);
}


.can-meta div {

  display:
    grid;

  grid-template-columns:
    95px
    1fr;

  gap:
    var(--space-16);

  padding:
    var(--space-16)
    0;

  border-bottom:
    1px solid var(--light-grey);
}


.can-meta span {

  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--accent);
}


.can-meta p {

  margin:
    0;

  font-size:
    var(--font-14);
}



/* ==================================================
   ENGINEERING QUESTION
================================================== */

.can-question {

  max-width:
    920px;

  padding:
    var(--space-80)
    0;
}


.can-question h2 {

  font-size:
    var(--font-36);
}



/* ==================================================
   COMMON SECTION HEADINGS
================================================== */

.can-section-heading {

  max-width:
    780px;

  margin-bottom:
    var(--space-48);
}


.can-index {

  margin:
    0
    0
    var(--space-8);

  font-size:
    var(--font-12);

  color:
    var(--text-muted);
}



/* ==================================================
   WORKFLOW
================================================== */

.can-workflow,
.can-network-table,
.can-diagnostics,
.can-takeaways,
.model-showcase,
.final-result,
.diagnostic-chain-section {

  padding:
    var(--space-80)
    0;

  border-top:
    1px solid var(--light-grey);
}


.can-process-grid,
.diagnostic-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    var(--space-24);
}


.can-process-grid article,
.diagnostic-grid article {

  padding:
    var(--space-24)
    0;

  border-top:
    2px solid var(--accent);
}


.can-process-grid span,
.diagnostic-grid span {

  font-size:
    var(--font-12);

  color:
    var(--accent);
}


.can-process-grid h3,
.diagnostic-grid h3 {

  margin:
    var(--space-16)
    0
    var(--space-12);

  font-size:
    var(--font-18);

  font-weight:
    500;
}


.can-process-grid p,
.diagnostic-grid p {

  margin:
    0;

  font-size:
    var(--font-14);

  line-height:
    1.65;

  color:
    var(--text-muted);
}



/* ==================================================
   STANDARD TWO COLUMN SECTION
================================================== */

.can-section {

  display:
    grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap:
    var(--space-80);

  align-items:
    center;

  padding:
    var(--space-96)
    0;

  border-top:
    1px solid var(--light-grey);
}



/* ==================================================
   EQUATIONS
================================================== */

.can-equation {

  margin-top:
    var(--space-24);

  padding:
    var(--space-24);

  background:
    var(--off-white);

  border-left:
    3px solid var(--accent);
}


.can-equation span {

  display:
    block;

  margin-bottom:
    var(--space-8);

  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--accent);
}


.can-equation strong {

  font-size:
    var(--font-18);

  font-weight:
    500;

  line-height:
    1.6;
}



/* ==================================================
   ECU ARCHITECTURE
================================================== */

.can-architecture {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    var(--space-16);
}


.ecu-card {

  min-height:
    150px;

  padding:
    var(--space-24);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid var(--light-grey);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}


.ecu-card:hover {

  transform:
    translateY(-4px);

  border-color:
    var(--accent);
}


.ecu-card > span {

  font-size:
    var(--font-12);

  color:
    var(--accent);
}


.ecu-card strong {

  font-size:
    var(--font-18);

  font-weight:
    500;
}


.ecu-card small {

  color:
    var(--text-muted);
}



/* ==================================================
   COMMUNICATION MATRIX
================================================== */

.can-table-wrap {

  overflow-x:
    auto;
}


.can-network-table table {

  width:
    100%;

  min-width:
    720px;

  border-collapse:
    collapse;
}


.can-network-table th {

  padding:
    var(--space-12)
    var(--space-16);

  text-align:
    left;

  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  border-bottom:
    1px solid var(--text-main);
}


.can-network-table td {

  padding:
    var(--space-16);

  font-size:
    var(--font-14);

  color:
    var(--text-muted);

  border-bottom:
    1px solid var(--light-grey);
}



/* ==================================================
   TECHNICAL CASE STUDIES
================================================== */

.technical-case {

  padding:
    var(--space-96)
    0;

  border-top:
    1px solid var(--light-grey);
}


.technical-case-header {

  max-width:
    820px;

  margin-bottom:
    var(--space-48);
}


.technical-case-header > p:not(.can-kicker):not(.can-index) {

  font-size:
    var(--font-16);

  line-height:
    1.8;

  color:
    var(--text-muted);

  text-align:
    justify;
}


.technical-case-grid {

  display:
    grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap:
    var(--space-64);

  align-items:
    center;
}


.technical-case-text h3 {

  margin:
    var(--space-32)
    0
    var(--space-12);

  font-size:
    var(--font-18);

  font-weight:
    500;
}


.technical-case-text h3:first-child {

  margin-top:
    0;
}


.technical-case-text p {

  margin:
    0
    0
    var(--space-16);

  font-size:
    var(--font-14);

  line-height:
    1.75;

  color:
    var(--text-muted);

  text-align:
    justify;
}



/* ==================================================
   ENGINEERING VALUES
================================================== */

.engineering-value {

  margin:
    var(--space-24)
    0;

  padding:
    var(--space-24);

  border-left:
    3px solid var(--accent);

  background:
    var(--off-white);
}


.engineering-value span {

  display:
    block;

  margin-bottom:
    var(--space-8);

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  color:
    var(--accent);
}


.engineering-value strong {

  font-size:
    var(--font-24);

  font-weight:
    400;
}



/* ==================================================
   ENGINEERING CHAIN
================================================== */

.engineering-chain {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--space-12);

  margin-top:
    var(--space-32);
}


.engineering-chain span {

  padding:
    var(--space-12)
    var(--space-16);

  border:
    1px solid var(--light-grey);

  font-size:
    var(--font-10);

  letter-spacing:
    0.7px;
}


.engineering-chain b {

  color:
    var(--accent);

  font-weight:
    400;
}



/* ==================================================
   TECHNICAL POINTS
================================================== */

.technical-point {

  display:
    grid;

  grid-template-columns:
    36px
    1fr;

  gap:
    var(--space-16);

  margin-top:
    var(--space-24);

  padding-top:
    var(--space-16);

  border-top:
    1px solid var(--light-grey);
}


.technical-point > span {

  color:
    var(--accent);

  font-size:
    var(--font-12);
}


.technical-point h3 {

  margin:
    0
    0
    var(--space-8);
}



/* ==================================================
   PROJECT FIGURES
================================================== */

.project-figure {

  margin:
    0;
}


.project-figure img {

  display:
    block;

  width:
    100%;

  height:
    auto;

  border:
    1px solid var(--light-grey);

  background:
    var(--white);
}


.project-figure figcaption {

  margin-top:
    var(--space-12);

  padding-top:
    var(--space-12);

  border-top:
    1px solid var(--light-grey);

  font-size:
    var(--font-10);

  line-height:
    1.5;

  letter-spacing:
    0.4px;

  color:
    var(--text-muted);
}


.project-figure-wide {

  width:
    100%;
}



/* ==================================================
   CAN SIGNAL FLOW
================================================== */

.can-flow {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    var(--space-12);

  margin-top:
    var(--space-48);

  padding:
    var(--space-48)
    var(--space-24);

  background:
    var(--off-white);
}


.can-flow span {

  padding:
    var(--space-12)
    var(--space-16);

  border:
    1px solid var(--light-grey);

  background:
    var(--white);

  font-size:
    var(--font-12);
}


.can-flow b {

  color:
    var(--accent);

  font-weight:
    400;
}



/* ==================================================
   MULTI ECU NETWORK
================================================== */

.network-diagram {

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  gap:
    var(--space-24);

  align-items:
    center;
}


.network-column {

  display:
    grid;

  gap:
    var(--space-12);
}


.network-column span {

  padding:
    var(--space-16);

  border:
    1px solid var(--light-grey);

  font-size:
    var(--font-12);
}


.network-arrow {

  font-size:
    var(--font-30);

  color:
    var(--accent);
}


.logger-card {

  min-height:
    230px;

  padding:
    var(--space-32);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    2px solid var(--accent);
}


.logger-card small,
.logger-card span {

  color:
    var(--text-muted);
}


.logger-card strong {

  margin:
    var(--space-16)
    0;

  font-size:
    var(--font-24);

  font-weight:
    500;
}



/* ==================================================
   NETWORK METRICS
================================================== */

.can-metrics {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  border-top:
    1px solid var(--accent);

  border-bottom:
    1px solid var(--accent);
}


.can-metrics article {

  padding:
    var(--space-48)
    var(--space-24);

  text-align:
    center;

  border-right:
    1px solid var(--light-grey);
}


.can-metrics article:last-child {

  border-right:
    0;
}


.can-metrics strong {

  display:
    block;

  margin-bottom:
    var(--space-8);

  font-size:
    var(--font-52);

  font-weight:
    300;

  color:
    var(--accent);
}


.can-metrics span {

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;
}



/* ==================================================
   DIAGNOSTIC CHAIN
================================================== */

.diagnostic-chain {

  max-width:
    720px;

  display:
    grid;

  margin:
    0 auto;
}


.diagnostic-chain span {

  padding:
    var(--space-16)
    var(--space-24);

  border:
    1px solid var(--light-grey);

  font-size:
    var(--font-12);

  letter-spacing:
    1px;

  text-align:
    center;
}


.diagnostic-chain i {

  width:
    1px;

  height:
    var(--space-16);

  margin:
    0 auto;

  background:
    var(--accent);
}



/* ==================================================
   DIAGNOSTIC MANAGER
================================================== */

.can-result {

  display:
    grid;

  grid-template-columns:
    0.8fr
    1.2fr;

  gap:
    var(--space-80);

  padding:
    var(--space-96)
    0;

  border-top:
    1px solid var(--light-grey);
}


.fault-codes {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    var(--space-12);

  margin-top:
    var(--space-32);
}


.fault-codes span {

  padding:
    var(--space-16);

  background:
    var(--off-white);

  font-size:
    var(--font-14);
}


.fault-codes b {

  display:
    inline-block;

  min-width:
    24px;

  color:
    var(--accent);
}



/* ==================================================
   MODEL LIMITATIONS
================================================== */

.can-limitations {

  max-width:
    900px;

  padding:
    var(--space-80)
    0;

  border-top:
    1px solid var(--light-grey);
}



/* ==================================================
   KEY TAKEAWAYS
================================================== */

.can-takeaways {

  display:
    grid;

  grid-template-columns:
    0.75fr
    1.25fr;

  gap:
    var(--space-80);
}


.can-takeaway-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    var(--space-24);
}


.can-takeaway-grid article {

  display:
    grid;

  grid-template-columns:
    36px
    1fr;

  gap:
    var(--space-12);

  padding-top:
    var(--space-16);

  border-top:
    1px solid var(--light-grey);
}


.can-takeaway-grid span {

  font-size:
    var(--font-12);

  color:
    var(--accent);
}


.can-takeaway-grid p {

  margin:
    0;

  font-size:
    var(--font-14);

  line-height:
    1.65;
}



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

.github-cta {

  display:
    grid;

  grid-template-columns:
    1fr
    auto;

  gap:
    var(--space-64);

  align-items:
    center;

  margin:
    var(--space-32)
    0;

  padding:
    var(--space-48);

  background:
    var(--off-white);

  border-left:
    3px solid var(--accent);
}


.github-cta > div {

  max-width:
    700px;
}


.github-button {

  padding:
    var(--space-16)
    var(--space-24);

  border:
    1px solid var(--accent);

  text-decoration:
    none;

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  color:
    var(--accent);

  white-space:
    nowrap;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.github-button:hover {

  background:
    var(--accent);

  color:
    var(--white);

  transform:
    translateY(-2px);
}



/* ==================================================
   PROJECT NAVIGATION
================================================== */

.can-project-nav {

  display:
    flex;

  justify-content:
    space-between;

  gap:
    var(--space-24);

  padding:
    var(--space-48)
    0
    var(--space-64);
}


.can-project-nav a {

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  color:
    var(--dark-grey);

  text-decoration:
    none;

  transition:
    color 0.25s ease;
}


.can-project-nav a:hover {

  color:
    var(--accent);
}



/* ==================================================
   SCROLL REVEAL
================================================== */

.reveal {

  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity
    0.8s
    cubic-bezier(0.22, 1, 0.36, 1),

    transform
    0.8s
    cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity,
    transform;
}


.reveal.is-visible {

  opacity:
    1;

  transform:
    translateY(0);
}



/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {

  .reveal {

    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }

}



/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .can-page {

    width:
      min(
        100% - 48px,
        1200px
      );
  }


  .can-summary,
  .can-section,
  .can-result,
  .can-takeaways,
  .technical-case-grid {

    grid-template-columns:
      1fr;

    gap:
      var(--space-48);
  }


  .can-process-grid,
  .diagnostic-grid,
  .can-metrics {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .github-cta {

    grid-template-columns:
      1fr;
  }


  .github-button {

    width:
      fit-content;
  }


  .can-metrics article:nth-child(2) {

    border-right:
      0;
  }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

  .can-page {

    width:
      calc(100% - 32px);
  }


  .can-hero {

    padding-bottom:
      var(--space-48);
  }


  .can-hero h1 {

    font-size:
      var(--font-36);

    letter-spacing:
      -1px;
  }


  .can-hero-copy {

    font-size:
      var(--font-14);
  }


  .can-question h2 {

    font-size:
      var(--font-24);
  }


  .can-summary,
  .can-workflow,
  .can-network-table,
  .can-diagnostics,
  .can-section,
  .can-result,
  .can-limitations,
  .can-takeaways,
  .technical-case,
  .model-showcase,
  .final-result,
  .diagnostic-chain-section {

    padding-top:
      var(--space-48);

    padding-bottom:
      var(--space-48);
  }


  .can-process-grid,
  .diagnostic-grid,
  .can-architecture,
  .can-metrics,
  .can-takeaway-grid,
  .fault-codes {

    grid-template-columns:
      1fr;
  }


  .can-metrics article {

    border-right:
      0;

    border-bottom:
      1px solid var(--light-grey);
  }


  .can-metrics article:last-child {

    border-bottom:
      0;
  }


  .network-diagram {

    grid-template-columns:
      1fr;
  }


  .network-arrow {

    transform:
      rotate(90deg);

    text-align:
      center;
  }


  .engineering-chain {

    flex-direction:
      column;

    align-items:
      stretch;
  }


  .engineering-chain b {

    transform:
      rotate(90deg);

    text-align:
      center;
  }


  .project-links {

    flex-direction:
      column;

    align-items:
      center;
  }


  .github-cta {

    padding:
      var(--space-32)
      var(--space-24);
  }


  .can-project-nav {

    flex-direction:
      column;
  }

}


/* ==================================================
   MATLAB VALIDATION — OVERVIEW
================================================== */

.matlab-validation {
  overflow: hidden;
}


.validation-overview {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    var(--space-64);

  align-items:
    end;

  margin-bottom:
    var(--space-48);
}


.validation-intro {
  max-width: 500px;
}


.validation-label {
  margin:
    0
    0
    var(--space-8);

  font-size:
    var(--font-10);

  letter-spacing:
    1.5px;

  color:
    var(--accent);
}


.validation-intro h3 {
  margin:
    0
    0
    var(--space-16);

  font-size:
    var(--font-20);

  font-weight:
    500;
}


.validation-intro > p:last-child {
  margin: 0;

  font-size:
    var(--font-14);

  line-height:
    1.7;

  color:
    var(--text-muted);

  text-align:
    justify;
}



/* ==================================================
   TEST VALUES
================================================== */

.validation-values {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-top:
    1px solid var(--text-main);

  border-bottom:
    1px solid var(--light-grey);
}


.validation-value {
  padding:
    var(--space-24);

  border-right:
    1px solid var(--light-grey);
}


.validation-value:last-child {
  border-right: 0;
}


.validation-value span {
  display: block;

  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--text-muted);
}


.validation-value strong {
  display: inline;

  font-size:
    var(--font-30);

  font-weight:
    400;

  color:
    var(--accent);
}


.validation-value small {
  margin-left:
    var(--space-4);

  font-size:
    var(--font-12);

  color:
    var(--text-muted);
}



/* ==================================================
   VALIDATION PROCESS
================================================== */

.validation-chain {
  display:
    grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr auto 1fr;

  align-items:
    center;

  gap:
    var(--space-12);

  margin-bottom:
    var(--space-48);
}


.validation-step {
  min-height:
    110px;

  padding:
    var(--space-16);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid var(--light-grey);
}


.validation-step > span {
  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-10);

  color:
    var(--accent);
}


.validation-step strong {
  margin-bottom:
    var(--space-8);

  font-size:
    var(--font-12);

  font-weight:
    500;

  letter-spacing:
    0.8px;
}


.validation-step small {
  font-size:
    var(--font-10);

  line-height:
    1.5;

  color:
    var(--text-muted);
}


.validation-step-pass {
  border-color:
    var(--accent);
}


.validation-arrow {
  font-size:
    var(--font-20);

  color:
    var(--accent);
}



/* ==================================================
   CAN PAYLOAD
================================================== */

.payload-result {
  display:
    grid;

  grid-template-columns:
    auto 1fr;

  gap:
    var(--space-48);

  align-items:
    center;

  margin-bottom:
    var(--space-48);

  padding:
    var(--space-24);

  background:
    var(--off-white);

  border-left:
    3px solid var(--accent);
}


.payload-label {
  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--accent);
}


.payload-result p {
  margin:
    var(--space-8)
    0
    0;

  font-size:
    var(--font-14);

  color:
    var(--text-muted);
}


.payload-bytes {
  display:
    grid;

  grid-template-columns:
    repeat(8, 1fr);

  gap:
    var(--space-8);
}


.payload-bytes span {
  padding:
    var(--space-12)
    var(--space-8);

  text-align:
    center;

  border:
    1px solid var(--light-grey);

  background:
    var(--white);

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size:
    var(--font-14);
}



/* ==================================================
   MATLAB CODE + RESULT
================================================== */

.matlab-code-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(260px, 0.65fr);

  gap:
    var(--space-32);

  align-items:
    start;
}


.matlab-code-layout .code-window {
  min-width: 0;
}



/* ==================================================
   VALIDATION RESULT
================================================== */

.validation-result {
  padding:
    var(--space-32);

  border-top:
    3px solid var(--accent);

  background:
    var(--off-white);
}


.validation-status {
  margin:
    var(--space-16)
    0;

  font-size:
    var(--font-44);

  font-weight:
    300;

  letter-spacing:
    -1px;

  color:
    var(--accent);
}


.validation-result h3 {
  margin:
    0
    0
    var(--space-16);

  font-size:
    var(--font-18);

  font-weight:
    500;
}


.validation-result > p:not(.validation-label) {
  margin:
    0;

  font-size:
    var(--font-14);

  line-height:
    1.7;

  color:
    var(--text-muted);
}



/* ==================================================
   PASS CHECKS
================================================== */

.result-checks {
  margin-top:
    var(--space-32);

  border-top:
    1px solid var(--light-grey);
}


.result-checks div {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    var(--space-16);

  padding:
    var(--space-12)
    0;

  border-bottom:
    1px solid var(--light-grey);
}


.result-checks span,
.result-checks strong {
  font-size:
    var(--font-10);

  letter-spacing:
    0.7px;
}


.result-checks span {
  color:
    var(--text-muted);
}


.result-checks strong {
  color:
    var(--accent);
}



/* ==================================================
   ENGINEERING NOTE
================================================== */

.validation-note {
  margin-top:
    var(--space-32);

  padding-top:
    var(--space-24);

  border-top:
    1px solid var(--text-main);
}


.validation-note > span {
  display: block;

  margin-bottom:
    var(--space-12);

  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--accent);
}


.validation-note p {
  margin: 0;

  font-size:
    var(--font-12);

  line-height:
    1.7;

  color:
    var(--text-muted);

  text-align:
    left;
}



/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1000px) {

  .matlab-code-layout {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 900px) {

  .validation-overview {
    grid-template-columns:
      1fr;

    gap:
      var(--space-32);
  }


  .validation-chain {
    grid-template-columns:
      1fr;
  }


  .validation-arrow {
    transform:
      rotate(90deg);

    text-align:
      center;
  }

}


@media (max-width: 600px) {

  .validation-values {
    grid-template-columns:
      1fr;
  }


  .validation-value {
    border-right:
      0;

    border-bottom:
      1px solid var(--light-grey);
  }


  .validation-value:last-child {
    border-bottom:
      0;
  }


  .payload-result {
    grid-template-columns:
      1fr;

    gap:
      var(--space-24);
  }


  .payload-bytes {
    grid-template-columns:
      repeat(4, 1fr);
  }


  .validation-result {
    padding:
      var(--space-24);
  }

}/* ==================================================
   MATLAB CODE WINDOW
================================================== */

.code-window {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  background: #f7f7f7;

  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--light-grey);
}


/* HEADER */

.code-window-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding:
    var(--space-16)
    var(--space-20);

  background: #f1f1f1;

  border-bottom: 1px solid var(--light-grey);
}


.code-window-title {
  display: flex;
  align-items: center;

  gap: var(--space-16);
}


.code-language {
  font-size: var(--font-10);

  font-weight: 600;

  letter-spacing: 1.4px;

  color: var(--accent);
}


.code-filename {
  font-size: var(--font-10);

  color: var(--text-muted);
}


.code-stage {
  font-size: var(--font-10);

  letter-spacing: 1px;

  color: var(--text-muted);
}


/* CODE */

.code-window pre {
  margin: 0;

  padding:
    var(--space-24)
    var(--space-24)
    var(--space-32);

  overflow-x: auto;

  background: #f7f7f7;
}


.code-window code {
  display: block;

  font-family:
    "Courier New",
    Courier,
    monospace;

  font-size: 12px;

  line-height: 1.65;

  color: #222;

  white-space: pre;
}


.code-comment {
  color: #315a7d;
}


/* FOOTER */

.code-window-footer {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    var(--space-12)
    var(--space-20);

  background: #f1f1f1;

  border-top: 1px solid var(--light-grey);
}


.code-window-footer span {
  font-size: var(--font-10);

  letter-spacing: 1px;

  color: var(--text-muted);
}

.plausibility-results {
  display: grid;
  gap: var(--space-32);
  align-self: center;
}

.plausibility-results .project-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==================================================
   FAULT CODE STATES
================================================== */

.fault-code-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top:
    var(--space-32);

  border-top:
    1px solid var(--text-main);

  border-bottom:
    1px solid var(--light-grey);
}


.fault-code-item {
  display: flex;

  flex-direction:
    column;

  gap:
    var(--space-8);

  padding:
    var(--space-24);

  border-right:
    1px solid var(--light-grey);
}


.fault-code-item:last-child {
  border-right: 0;
}


.fault-code-item strong {
  font-size:
    var(--font-30);

  font-weight:
    400;

  color:
    var(--accent);
}


.fault-code-item span {
  font-size:
    var(--font-10);

  letter-spacing:
    1px;

  color:
    var(--text-muted);
}


@media (max-width: 700px) {

  .fault-code-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .fault-code-item:nth-child(2) {
    border-right: 0;
  }

}

/* ==================================================
   INTEGRATED VALIDATION
================================================== */

.integrated-validation-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: var(--space-64);

  align-items: center;

  margin-top: var(--space-48);
}


/* ==================================================
   LEFT — ENGINEERING EXPLANATION
================================================== */

.integrated-validation-text {
  display: flex;

  flex-direction: column;

  gap: var(--space-32);

  min-width: 0;
}


.integrated-validation-block h3 {
  margin:
    0
    0
    var(--space-12);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 1.3;

  color: var(--text-main);
}


.integrated-validation-block p {
  margin: 0;

  max-width: 500px;

  font-size: var(--font-14);

  line-height: 1.7;

  color: var(--text-muted);
}


/* ==================================================
   DIAGNOSTIC LOGIC BOX
================================================== */

.integrated-validation-note {
  margin: 0;
}


.integrated-validation-note p {
  margin:
    var(--space-8)
    0
    0;

  font-size: var(--font-18);

  line-height: 1.5;

  color: var(--text-main);
}


/* ==================================================
   RIGHT — VALIDATION IMAGE
================================================== */

.integrated-validation-figure {
  width: 100%;

  margin: 0;

  align-self: center;
}


.integrated-validation-figure img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;

  background: var(--white);
}


.integrated-validation-figure figcaption {
  margin-top: var(--space-12);

  padding-top: var(--space-12);

  border-top:
    1px solid var(--light-grey);

  font-size: var(--font-10);

  line-height: 1.6;

  color: var(--text-muted);
}


/* ==================================================
   FAULT CODE STATES
   SPANS UNDER BOTH COLUMNS
================================================== */

.integrated-fault-codes {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin-top: var(--space-64);

  border-top:
    1px solid var(--text-main);

  border-bottom:
    1px solid var(--light-grey);
}


.integrated-fault-item {
  min-width: 0;

  padding:
    var(--space-24)
    var(--space-24)
    var(--space-32);

  border-right:
    1px solid var(--light-grey);
}


.integrated-fault-item:last-child {
  border-right: 0;
}


.integrated-fault-item strong {
  display: block;

  margin-bottom: var(--space-12);

  font-size: var(--font-36);

  font-weight: 400;

  line-height: 1;

  color: var(--accent);
}


.integrated-fault-item span {
  display: block;

  margin-bottom: var(--space-12);

  font-size: var(--font-10);

  letter-spacing: 1.2px;

  color: var(--text-muted);
}


.integrated-fault-item p {
  margin: 0;

  max-width: 220px;

  font-size: var(--font-12);

  line-height: 1.5;

  color: var(--text-muted);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {

  .integrated-validation-grid {
    grid-template-columns: 1fr;

    gap: var(--space-48);
  }


  .integrated-validation-block p {
    max-width: 650px;
  }


  .integrated-fault-codes {
    margin-top: var(--space-48);
  }

}


@media (max-width: 650px) {

  .integrated-fault-codes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .integrated-fault-item:nth-child(2) {
    border-right: 0;
  }


  .integrated-fault-item:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--light-grey);
  }

}
/* ==================================================
   INTEGRATED VALIDATION — FINAL LAYOUT
================================================== */


/* --------------------------------------------------
   HEADER
-------------------------------------------------- */

.iv-header {
  width: 100%;

  margin-bottom: var(--space-48);
}


.iv-header h2 {
  max-width: 850px;

  margin:
    var(--space-12)
    0
    var(--space-24);

  font-size: var(--font-30);

  font-weight: 500;

  line-height: 1.15;
}


.iv-header > p:last-child {
  max-width: 850px;

  margin: 0;

  font-size: var(--font-14);

  line-height: 1.7;

  color: var(--text-muted);
}


/* ==================================================
   MAIN TWO-COLUMN AREA
================================================== */

.iv-main {
  display: grid;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr);

  gap: var(--space-64);

  width: 100%;

  align-items: center;
}


/* ==================================================
   LEFT — ANALYSIS
================================================== */

.iv-analysis {
  display: flex;

  flex-direction: column;

  gap: var(--space-32);

  min-width: 0;
}


.iv-analysis-block {
  width: 100%;
}


.iv-analysis-block h3 {
  margin:
    0
    0
    var(--space-12);

  font-size: var(--font-18);

  font-weight: 500;

  line-height: 1.3;
}


.iv-analysis-block p {
  max-width: 500px;

  margin: 0;

  font-size: var(--font-14);

  line-height: 1.7;

  color: var(--text-muted);
}


/* ==================================================
   DIAGNOSTIC LOGIC
================================================== */

.iv-equation {
  padding:
    var(--space-24);

  border-left:
    3px solid var(--accent);

  background:
    var(--soft-grey);
}


.iv-equation span {
  display: block;

  margin-bottom: var(--space-12);

  font-size: var(--font-10);

  letter-spacing: 1.5px;

  color: var(--accent);
}


.iv-equation p {
  margin: 0;

  font-size: var(--font-18);

  line-height: 1.5;

  color: var(--text-main);
}


/* ==================================================
   RIGHT — IMAGE
================================================== */

.iv-figure {
  width: 100%;

  min-width: 0;

  margin: 0;
}


.iv-figure img {
  display: block;

  width: 100%;

  height: auto;

  object-fit: contain;

  background: var(--white);

  border:
    1px solid var(--light-grey);
}


.iv-figure figcaption {
  margin-top: var(--space-12);

  padding-top: var(--space-12);

  border-top:
    1px solid var(--light-grey);

  font-size: var(--font-10);

  line-height: 1.6;

  color: var(--text-muted);
}


/* ==================================================
   FAULT CODES — FULL WIDTH UNDER BOTH COLUMNS
================================================== */

.iv-codes {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin-top: var(--space-64);

  border-top:
    1px solid var(--text-main);

  border-bottom:
    1px solid var(--light-grey);
}


.iv-code {
  min-width: 0;

  min-height: 150px;

  padding:
    var(--space-24);

  border-right:
    1px solid var(--light-grey);
}


.iv-code:last-child {
  border-right: 0;
}


.iv-code strong {
  display: block;

  margin-bottom: var(--space-12);

  font-size: var(--font-36);

  font-weight: 400;

  line-height: 1;

  color: var(--accent);
}


.iv-code span {
  display: block;

  margin-bottom: var(--space-12);

  font-size: var(--font-10);

  line-height: 1.3;

  letter-spacing: 1px;

  color: var(--text-muted);
}


.iv-code p {
  max-width: 200px;

  margin: 0;

  font-size: var(--font-12);

  line-height: 1.5;

  color: var(--text-muted);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .iv-main {
    grid-template-columns: 1fr;

    gap: var(--space-48);
  }


  .iv-analysis-block p {
    max-width: 650px;
  }


  .iv-codes {
    margin-top: var(--space-48);
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

  .iv-codes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .iv-code:nth-child(2) {
    border-right: 0;
  }


  .iv-code:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--light-grey);
  }

}


/* ==================================================
   INTEGRATED VALIDATION V2
   ISOLATED FROM ALL PREVIOUS IV STYLES
================================================== */

.iv2-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}


/* ==================================================
   HEADER
================================================== */

.iv2-header {
  display: block !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 0 var(--space-48) 0 !important;
}

.iv2-header h2 {
  margin: var(--space-12) 0 var(--space-24) !important;
  max-width: 850px !important;

  font-size: var(--font-30) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.iv2-header > p:last-child {
  margin: 0 !important;
  max-width: 850px !important;

  font-size: var(--font-14) !important;
  line-height: 1.7 !important;
  color: var(--text-muted) !important;
}


/* ==================================================
   TWO COLUMNS
================================================== */

.iv2-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.25fr) !important;

  gap: var(--space-64) !important;

  width: 100% !important;

  align-items: center !important;
}


/* ==================================================
   LEFT
================================================== */

.iv2-left {
  display: flex !important;
  flex-direction: column !important;

  gap: var(--space-32) !important;

  width: 100% !important;
  min-width: 0 !important;
}


.iv2-block {
  display: block !important;

  width: 100% !important;
  max-width: 520px !important;
}


.iv2-block h3 {
  margin: 0 0 var(--space-12) !important;

  font-size: var(--font-18) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}


.iv2-block p {
  margin: 0 !important;

  font-size: var(--font-14) !important;
  line-height: 1.7 !important;

  color: var(--text-muted) !important;
}


/* ==================================================
   DIAGNOSTIC LOGIC
================================================== */

.iv2-logic {
  display: block !important;

  width: 100% !important;
  max-width: 520px !important;

  box-sizing: border-box !important;

  padding:
    var(--space-20)
    var(--space-24) !important;

  border-left:
    3px solid var(--accent) !important;

  background:
    #f5f5f5 !important;
}


.iv2-logic span {
  display: block !important;

  margin-bottom: var(--space-12) !important;

  font-size: var(--font-10) !important;

  letter-spacing: 1.5px !important;

  color: var(--accent) !important;
}


.iv2-logic p {
  margin: 0 !important;

  font-size: var(--font-18) !important;
  line-height: 1.5 !important;

  color: var(--text-main) !important;
}


/* ==================================================
   RIGHT IMAGE
================================================== */

.iv2-figure {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
}


.iv2-figure img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  object-fit: contain !important;

  background: #fff !important;

  border:
    1px solid var(--light-grey) !important;
}


.iv2-figure figcaption {
  display: block !important;

  width: 100% !important;

  margin-top: var(--space-12) !important;
  padding-top: var(--space-12) !important;

  border-top:
    1px solid var(--light-grey) !important;

  font-size: var(--font-10) !important;
  line-height: 1.6 !important;

  color: var(--text-muted) !important;
}


/* ==================================================
   FULL-WIDTH 0 / 1 / 2 / 3
================================================== */

.iv2-codes {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  margin-top: var(--space-64) !important;

  border-top:
    1px solid var(--text-main) !important;

  border-bottom:
    1px solid var(--light-grey) !important;
}


.iv2-code {
  display: block !important;

  min-width: 0 !important;

  box-sizing: border-box !important;

  padding:
    var(--space-24)
    var(--space-24)
    var(--space-32) !important;

  border-right:
    1px solid var(--light-grey) !important;
}


.iv2-code:last-child {
  border-right: 0 !important;
}


.iv2-code strong {
  display: block !important;

  margin-bottom: var(--space-12) !important;

  font-size: var(--font-36) !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  color: var(--accent) !important;
}


.iv2-code span {
  display: block !important;

  margin-bottom: var(--space-12) !important;

  font-size: var(--font-10) !important;
  line-height: 1.3 !important;

  letter-spacing: 1px !important;

  color: var(--text-muted) !important;
}


.iv2-code p {
  margin: 0 !important;

  max-width: 220px !important;

  font-size: var(--font-12) !important;
  line-height: 1.5 !important;

  color: var(--text-muted) !important;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {

  .iv2-main {
    grid-template-columns: 1fr !important;
    gap: var(--space-48) !important;
  }

  .iv2-block,
  .iv2-logic {
    max-width: 650px !important;
  }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

  .iv2-codes {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}

/* ==================================================
   DESIGN PROJECTS HEADER — FLOAT IN
================================================== */

.projects-header {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.projects-header.header-visible {
  opacity: 1;
  transform: translateY(0);
}
.cae-project-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 52px;
}

.cae-project-nav a {
  font-size: var(--font-10);
  letter-spacing: 1.5px;
  color: #555;
  text-decoration: none;
}

.cae-project-nav a:hover {
  color: var(--accent);
}