/* =========================================================
   SELECTED WORK PAGE
   Page-specific rules only.
   The shared landing-page stylesheet remains the visual base.
   ========================================================= */


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

.nav-current {
  color: var(--ink) !important;
}


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

.work-hero {
  grid-template-columns: minmax(0, 900px);
  min-height: 700px;
  align-content: start;
}

.work-hero-inner {
  width: 100%;
  max-width: 900px;
}

.work-hero h1 {
  line-height: 1.04;
  padding-bottom: 0.08em;
}

.work-hero .gradient-text {
  padding-bottom: 0.2em;
}

.work-hero-copy {
  max-width: 760px;

  color: var(--ink);

  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
}

.work-hero-actions {
  max-width: 470px;
}

.work-capability-strip {
  max-width: 800px;
  justify-content: flex-start;
}

.work-eyebrow {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 22px;
  padding: 7px 11px;

  border: 1px solid rgba(95, 41, 199, 0.12);
  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(14, 210, 218, 0.10),
      rgba(95, 41, 199, 0.10)
    );

  color: var(--violet);

  font-family: "Manrope", sans-serif;

  font-size: 0.7rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}


/* =========================================================
   INTRO
   ========================================================= */

.work-intro {
  padding-top: var(--section-gap);
}

.work-intro-grid {
  display: grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  gap: 100px;

  align-items: start;
}

.work-intro-grid h2 {
  margin-bottom: 0;

  font-size: clamp(2.3rem, 4vw, 4.4rem);
  line-height: 1.08;
}

.work-intro-grid > p {
  max-width: 540px;

  margin: 0;
  padding-top: 7px;

  color: var(--muted);

  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
  line-height: 1.62;
}


/* =========================================================
   PROJECTS
   ========================================================= */

.projects {
  margin-top: var(--section-gap);
  padding-top: var(--section-split-gap);

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

.project {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, 0.86fr);

  gap: 48px;

  align-items: stretch;

  padding:
    48px
    0;

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

.project:first-of-type {
  padding-top: 22px;
}

.project-copy {
  min-width: 0;

  /*
    IMPORTANT:
    styles.css already defines .project-copy with large padding.
    Reset the full shorthand here; changing padding-right alone
    leaves the inherited top/left/bottom padding in place.
  */
  padding: 0 20px 0 0;
}

.project-topline {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  /* All three badges share the same top edge. */
  align-items: flex-start;

  margin: 0 0 26px;
}

.project-index {
  display: grid;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  margin: 0;

  place-items: center;

  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 4px 12px rgba(17, 20, 27, 0.05);

  font-family: "Manrope", sans-serif;

  font-size: 0.68rem;
  font-weight: 800;
}

.project-meta {
  /*
    styles.css also uses .project-meta and gives it a bottom margin.
    Reset that inherited rule so this badge aligns with the index.
  */
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  margin: 0;

  padding:
    6px
    9px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: #fff;

  color: #777d87;

  font-size: 0.65rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.project-specialist {
  display: inline-flex;
  align-items: center;

  min-height: 28px;

  margin: 0;

  padding:
    6px
    9px;

  border-radius: 999px;

  background: #f0ebfb;
  color: var(--violet);

  font-size: 0.62rem;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.project-copy h2 {
  max-width: 760px;

  margin-bottom: 20px;

  font-size: clamp(2.1rem, 3.6vw, 4rem);
  line-height: 1.06;
}

.project-copy > p {
  max-width: 740px;

  color: var(--muted);

  font-size: clamp(1.1rem, 1.2vw, 1.4rem);
  line-height: 1.62;
}

.project-copy > p + p {
  margin-top: 18px;
}

.project-lead {
  color: var(--ink) !important;

  font-weight: 600;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 24px;
}

.project-tags span {
  padding:
    6px
    9px;

  border: 1px solid rgba(17, 20, 27, 0.09);
  border-radius: 8px;

  background: rgba(255, 255, 255, 0.72);

  color: #5c616c;

  font-size: 0.7rem;
  font-weight: 700;

  line-height: 1.3;
}


/* =========================================================
   PROJECT ACTIONS
   ========================================================= */

.project-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;
}

.project-button {
  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  min-height: 48px;

  padding:
    0
    18px;

  border: 1px solid rgba(17, 20, 27, 0.12);
  border-radius: 999px;

  background: #fff;

  box-shadow:
    0 7px 20px rgba(17, 20, 27, 0.05);

  color: var(--ink);

  font-size: 0.84rem;
  font-weight: 800;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.project-button-primary {
  border-color: var(--ink);

  background: var(--ink);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {

  .project-button:hover {
    transform: translateY(-2px);

    background: var(--ink);
    color: #fff;

    box-shadow:
      0 12px 26px rgba(17, 20, 27, 0.12);
  }

  .project-button-primary:hover {
    background: #262a32;
  }

}


/* =========================================================
   SHARED PROJECT VISUAL
   ========================================================= */

.project-visual {
  min-width: 0;

  /*
    styles.css gives .project-visual a 22px margin.
    The Selected Work page needs the visual flush with its grid line.
  */
  margin: 0;

  overflow: hidden;

  border-radius: 22px;

  background: #151821;
  color: #fff;

  box-shadow:
    0 18px 50px rgba(17, 20, 27, 0.12);
}

.project-visual-toolbar {
  display: flex;

  align-items: center;

  gap: 6px;

  padding:
    14px
    16px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-visual-toolbar > span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #59606c;
}

.project-visual-toolbar small {
  margin-left: 7px;

  color: #8f95a1;
}


/* =========================================================
   ENTITY RESOLUTION ENGINE VISUAL
   ========================================================= */

.er-project-visual {
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(14, 210, 218, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 84% 75%,
      rgba(95, 41, 199, 0.20),
      transparent 37%
    ),
    #151821;
}

.engine-flow {
  display: flex;
  flex-direction: column;

  gap: 13px;

  min-height: 455px;

  justify-content: center;

  padding:
    28px
    30px
    20px;
}

.engine-inputs {
  display: grid;

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

  gap: 8px;
}

.engine-input {
  min-width: 0;

  padding:
    13px
    12px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.055);
}

.engine-input span,
.engine-stage small,
.engine-output small {
  display: block;

  color: #9298a4;

  font-size: 0.58rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.engine-input strong {
  display: block;

  overflow: hidden;

  margin-top: 5px;

  font-size: 0.75rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-arrow {
  text-align: center;

  color: #6d7480;

  font-size: 1.05rem;
}

.engine-stage {
  padding:
    16px
    18px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.06);
}

.engine-stage strong {
  display: block;

  margin-top: 6px;

  font-size: 1rem;
}

.engine-stage-highlight {
  border-color: rgba(95, 41, 199, 0.38);

  background:
    linear-gradient(
      90deg,
      rgba(14, 210, 218, 0.10),
      rgba(95, 41, 199, 0.13)
    );
}

.engine-probabilities {
  display: flex;

  gap: 7px;

  margin-top: 12px;
}

.engine-probabilities span {
  flex: 1;

  padding:
    6px
    8px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.07);

  color: #c9cdd4;

  font-size: 0.72rem;
  font-weight: 800;

  text-align: center;
}

.engine-output {
  display: grid;

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

  gap: 14px;

  align-items: center;

  margin:
    0
    20px
    20px;

  padding:
    16px
    18px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 15px;

  background: rgba(255, 255, 255, 0.055);

  text-align: center;
}

.engine-output strong {
  display: block;

  margin-top: 4px;

  font-size: 1.1rem;
}


/* =========================================================
   THESIS RESULTS
   ========================================================= */

.thesis-results {
  align-self: stretch;

  overflow: hidden;

  padding:
    30px;

  border: 1px solid rgba(95, 41, 199, 0.15);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 88% 80%,
      rgba(95, 41, 199, 0.08),
      transparent 35%
    ),
    radial-gradient(
      circle at 12% 18%,
      rgba(14, 210, 218, 0.08),
      transparent 32%
    ),
    #fafafa;
}

.results-kicker {
  margin-bottom: 12px;

  color: var(--violet);

  font-size: 0.68rem;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.results-header h3 {
  max-width: 480px;

  margin-bottom: 30px;

  font-size: 1.55rem;
  line-height: 1.12;
}

.result-flow {
  display: grid;

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

  gap: 14px;

  align-items: center;

  margin-bottom: 14px;
}

.result-metric {
  padding:
    22px
    16px;

  border: 1px solid var(--line);
  border-radius: 16px;

  background: #fff;

  text-align: center;
}

.result-metric-highlight {
  border-color: rgba(95, 41, 199, 0.2);

  background:
    linear-gradient(
      135deg,
      rgba(14, 210, 218, 0.06),
      rgba(95, 41, 199, 0.08)
    ),
    #fff;
}

.result-metric small {
  display: block;

  color: #8b9099;

  font-size: 0.62rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.result-metric strong {
  display: block;

  margin-top: 7px;

  font-size: 2rem;
}

.result-arrow {
  color: #8b9099;

  font-size: 1.15rem;
}

.result-reduction {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;
  padding:
    16px
    18px;

  border-radius: 14px;

  background: var(--ink);
  color: #fff;
}

.result-reduction span {
  color: #aeb3bc;

  font-size: 0.64rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.result-reduction strong {
  font-size: 1.55rem;
}

.thesis-results > p {
  margin:
    22px
    0
    0;

  color: var(--muted);

  font-size: 0.96rem;
  line-height: 1.58;
}


/* =========================================================
   LISBON VISUAL
   ========================================================= */

.lisbon-visual {
  align-self: stretch;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  min-height: 560px;

  border: 1px solid var(--line);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(95, 41, 199, 0.06),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 86%,
      rgba(14, 210, 218, 0.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(14, 210, 218, 0.025),
      rgba(95, 41, 199, 0.035)
    ),
    #fafafa;
}

.lisbon-visual-header {
  display: flex;

  align-items: start;
  justify-content: space-between;

  gap: 20px;

  padding:
    26px
    28px
    22px;

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

.lisbon-visual-header small {
  display: block;

  color: var(--violet);

  font-size: 0.62rem;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.lisbon-visual-header strong {
  display: block;

  max-width: 320px;

  margin-top: 5px;

  font-size: 1.45rem;
  line-height: 1.15;
}

.lisbon-visual-header > span {
  flex: 0 0 auto;

  padding:
    6px
    9px;

  border: 1px solid var(--line);
  border-radius: 8px;

  background: #fff;

  color: #777d87;

  font-size: 0.7rem;
  font-weight: 800;
}


/* =========================================================
   LISBON PIPELINE
   ========================================================= */

.lisbon-pipeline {
  display: flex;
  flex-direction: column;

  gap: 0;

  padding:
    24px
    28px
    18px;
}

.lisbon-stage {
  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr);

  gap: 13px;

  align-items: center;

  padding:
    11px
    12px;

  border: 1px solid rgba(17, 20, 27, 0.08);
  border-radius: 13px;

  background: rgba(255, 255, 255, 0.78);
}

.lisbon-stage-highlight {
  border-color: rgba(95, 41, 199, 0.18);

  background:
    linear-gradient(
      90deg,
      rgba(14, 210, 218, 0.075),
      rgba(95, 41, 199, 0.085)
    ),
    #fff;
}

.lisbon-stage-index {
  display: grid;

  width: 34px;
  height: 34px;

  place-items: center;

  border: 1px solid rgba(17, 20, 27, 0.10);
  border-radius: 10px;

  background: #fff;

  color: var(--ink);

  font-family: "Manrope", sans-serif;

  font-size: 0.62rem;
  font-weight: 800;
}

.lisbon-stage-copy {
  min-width: 0;
}

.lisbon-stage-copy small {
  display: block;

  color: var(--violet);

  font-size: 0.58rem;
  font-weight: 800;

  letter-spacing: 0.09em;
}

.lisbon-stage-copy strong {
  display: block;

  margin-top: 3px;

  font-size: 0.91rem;
  line-height: 1.2;
}

.lisbon-stage-copy span {
  display: block;

  margin-top: 3px;

  color: #777d87;

  font-size: 0.69rem;
  line-height: 1.4;
}

.lisbon-stage-arrow {
  height: 15px;

  color: #a4a9b1;

  font-size: 0.78rem;
  line-height: 15px;

  text-align: center;
}


/* =========================================================
   LISBON OUTPUT METRICS
   ========================================================= */

.lisbon-output-grid {
  display: grid;

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

  gap: 8px;

  padding:
    0
    28px
    12px;
}

.lisbon-output-metric {
  padding:
    14px
    10px;

  border: 1px solid var(--line);
  border-radius: 13px;

  background: #fff;

  text-align: center;
}

.lisbon-output-metric small {
  display: block;

  color: #8a909a;

  font-size: 0.56rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.lisbon-output-metric strong {
  display: block;

  margin-top: 4px;

  font-size: 1.35rem;
}

.lisbon-output-metric strong span {
  font-size: 0.68rem;
}


/* =========================================================
   LISBON INSIGHT
   ========================================================= */

.lisbon-insight {
  margin:
    4px
    28px
    26px;

  padding:
    14px
    15px;

  border-radius: 13px;

  background: var(--ink);
  color: #fff;
}

.lisbon-insight > small {
  display: block;

  margin-bottom: 9px;

  color: #aeb3bc;

  font-size: 0.57rem;
  font-weight: 800;

  letter-spacing: 0.08em;
}

.lisbon-insight > div {
  display: flex;
  flex-wrap: wrap;

  gap:
    6px
    12px;
}

.lisbon-insight span {
  font-size: 0.72rem;
  font-weight: 700;
}


/* =========================================================
   WORK PRINCIPLES
   ========================================================= */

.work-principles {
  margin-top: var(--section-gap);
  padding-top: var(--section-split-gap);

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

.work-principles-title {
  max-width: 900px;

  margin-bottom: 40px;

  font-size: clamp(2.3rem, 4vw, 4.4rem);
  line-height: 1.08;
}

.work-principles-grid {
  display: grid;

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

  gap: 18px;
}

.work-principle {
  min-width: 0;

  padding:
    26px;

  border: 1px solid var(--line);
  border-radius: var(--radius-md);

  background: #fff;

  box-shadow:
    0 5px 14px rgba(17, 20, 27, 0.05);
}

.work-principle-number {
  margin-bottom: 24px;

  color: #9499a3;

  font-family: "Manrope", sans-serif;

  font-size: 0.7rem;
  font-weight: 800;
}

.work-principle-label {
  margin-bottom: 12px;

  color: var(--violet);

  font-family: "Manrope", sans-serif;

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.1em;
}

.work-principle h3 {
  margin-bottom: 10px;

  font-size: 1.3rem;
  line-height: 1.18;
}

.work-principle p {
  margin: 0;

  color: var(--muted);

  font-size: 0.98rem;
  line-height: 1.58;
}


/* =========================================================
   CONTACT
   ========================================================= */

.work-principles + .contact {
  margin-top: var(--section-gap);
}


/* =========================================================
   PROJECT ALIGNMENT — DESKTOP
   ========================================================= */

@media (min-width: 981px) {

  /*
    Turn the left .project-copy wrapper into a layout-transparent
    container. Its children can then participate directly in the
    parent project grid, which lets the right panel align to an
    exact row (metadata or H2) instead of an estimated pixel offset.
  */
  .project > .project-copy {
    display: contents;
  }

  .project {
    column-gap: 48px;
    row-gap: 0;

    align-items: start;
  }

  .project > .project-copy > * {
    grid-column: 1;
    min-width: 0;
  }


  /* -------------------------------------------------------
     PROJECT 01
     Metadata row ↔ top edge of Entity Resolution visual
     ------------------------------------------------------- */

  .project-featured .project-topline {
    grid-row: 1;
  }

  .project-featured .project-copy > h2 {
    grid-row: 2;
  }

  .project-featured .project-copy > .project-lead {
    grid-row: 3;
  }

  .project-featured .project-copy > p:not(.project-lead) {
    grid-row: 4;
  }

  .project-featured .project-tags {
    grid-row: 5;
  }

  .project-featured .project-actions {
    grid-row: 6;
  }

  .project-featured > .project-visual {
    grid-column: 2;
    grid-row: 1 / 7;

    align-self: start;

    margin: 0;
  }


  /* -------------------------------------------------------
     PROJECT 02
     Thesis results ↔ top edge of thesis H2
     ------------------------------------------------------- */

  .thesis-project .project-topline {
    grid-row: 1;
  }

  .thesis-project .project-copy > h2 {
    grid-row: 2;
  }

  .thesis-project .project-copy > .project-lead {
    grid-row: 3;
  }

  .thesis-project .project-copy > p:not(.project-lead) {
    grid-row: 4;
  }

  .thesis-project .project-tags {
    grid-row: 5;
  }

  .thesis-project .project-copy > .project-button {
    grid-row: 6;

    justify-self: start;
  }

  .thesis-project > .thesis-results {
    grid-column: 2;
    grid-row: 2 / 7;

    align-self: start;

    margin: 0;
  }


  /* -------------------------------------------------------
     PROJECT 03
     Lisbon visual ↔ top edge of project H2
     ------------------------------------------------------- */

  .lisbon-project .project-topline {
    grid-row: 1;
  }

  .lisbon-project .project-copy > h2 {
    grid-row: 2;
  }

  .lisbon-project .project-copy > .project-lead {
    grid-row: 3;
  }

  /* The Lisbon section currently contains three regular
     paragraphs after the lead. Keep them in document order. */
  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(2) {
    grid-row: 4;
  }

  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(3) {
    grid-row: 5;
  }

  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(4) {
    grid-row: 6;
  }

  .lisbon-project .project-tags {
    grid-row: 7;
  }

  .lisbon-project .project-actions {
    grid-row: 8;
  }

  .lisbon-project > .lisbon-visual {
    grid-column: 2;
    grid-row: 2 / 9;

    align-self: start;

    margin: 0;
  }

}


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

@media (max-width: 980px) {

  .work-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 640px;
  }

  .work-hero-inner {
    max-width: 760px;
  }

  .work-intro-grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 32px;
  }

  .project {
    grid-template-columns: minmax(0, 1fr);

    gap: 30px;
  }

  .project > .project-copy {
    display: block;
  }

  .project-copy {
    padding: 0;
  }

  .project > .project-copy > * {
    grid-column: auto;
    grid-row: auto;
  }

  .project-featured > .project-visual,
  .thesis-project > .thesis-results,
  .lisbon-project > .lisbon-visual {
    grid-column: auto;
    grid-row: auto;

    margin: 0;
  }

  .er-project-visual,
  .thesis-results,
  .lisbon-visual {
    min-height: 430px;
  }

  .work-principles-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}


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

@media (max-width: 680px) {

  .work-hero {
    grid-template-columns: minmax(0, 1fr);

    min-height: auto;

    gap: 0;

    padding:
      112px
      18px
      56px;
  }

  .work-hero-inner,
  .work-hero h1,
  .work-hero-copy {
    max-width: none;
  }

  .work-hero h1 {
    line-height: 1.04;
    padding-bottom: 0.1em;
  }

  .work-hero-actions {
    max-width: none;
  }

  .work-capability-strip {
    max-width: none;

    justify-content: center;
  }

  .work-eyebrow {
    margin-left: 10px;
    margin-bottom: 16px;

    font-size: 0.64rem;
  }


  /* Intro */

  .work-intro {
    padding-top: var(--section-gap);
  }

  .work-intro-grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 24px;
  }

  .work-intro-grid h2,
  .work-principles-title {
    font-size: clamp(2.05rem, 9.5vw, 2.65rem);
    line-height: 1.06;
  }

  .work-intro-grid > p {
    max-width: none;

    padding-top: 0;

    font-size: clamp(1.1rem, 1.2vw, 1.4rem);
    line-height: 1.62;
  }


  /* Projects */

  .projects {
    margin-top: var(--section-gap);
    padding-top: var(--section-split-gap);
  }

  .project {
    grid-template-columns: minmax(0, 1fr);

    gap: 28px;

    padding:
      38px
      0;
  }

  .project:first-of-type {
    padding-top: 18px;
  }

  .project-copy {
    padding: 0;
  }

  .project-topline {
    margin-bottom: 22px;
  }

  .project-index {
    width: 38px;
    height: 38px;

    font-size: 0.8rem;
  }

  .project-copy h2 {
    max-width: none;

    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.05;
  }

  .project-copy > p {
    max-width: none;

    font-size: clamp(1.1rem, 1.2vw, 1.4rem);
    line-height: 1.6;
  }

  

  .project-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-button {
    width: fit-content;
    max-width: 100%;
  }


  /* ER visual */

  .er-project-visual {
    min-height: 0;

    border-radius: 18px;
  }

  .engine-flow {
    min-height: 390px;

    padding:
      24px
      18px
      18px;
  }

  .engine-inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .engine-input {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 16px;
  }

  .engine-input strong {
    margin-top: 0;
  }

  .engine-output {
    margin:
      0
      14px
      14px;
  }


  /* Thesis */

  .thesis-results {
    min-height: 0;

    padding:
      24px;

    border-radius: 18px;
  }

  .results-header h3 {
    font-size: 1.4rem;
  }

  .result-flow {
    gap: 9px;
  }

  .result-metric {
    padding:
      18px
      10px;
  }

  .result-metric strong {
    font-size: 1.65rem;
  }

  .result-reduction strong {
    font-size: 1.35rem;
  }


  /* Lisbon */

  .lisbon-visual {
    min-height: 0;

    border-radius: 18px;
  }

  .lisbon-visual-header {
    padding:
      22px
      22px
      20px;
  }

  .lisbon-visual-header strong {
    max-width: 245px;

    font-size: 1.28rem;
  }

  .lisbon-pipeline {
    padding:
      20px
      22px
      16px;
  }

  .lisbon-stage {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 12px;

    padding:
      10px;
  }

  .lisbon-stage-index {
    width: 32px;
    height: 32px;

    font-size: 0.68rem;
  }

  .lisbon-stage-copy strong {
    font-size: 0.9rem;
  }

  .lisbon-stage-copy span {
    font-size: 0.68rem;
  }

  .lisbon-output-grid {
    padding:
      0
      22px
      10px;
  }

  .lisbon-output-metric {
    padding:
      13px
      8px;
  }

  .lisbon-output-metric strong {
    font-size: 1.25rem;
  }

  .lisbon-insight {
    margin:
      4px
      22px
      22px;
  }


  /* Principles */

  .work-principles {
    margin-top: var(--section-gap);
    padding-top: var(--section-split-gap);
  }

  .work-principles-title {
    margin-bottom: 28px;
  }

  .work-principles-grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 14px;
  }

  .work-principle {
    padding:
      22px
      24px;

    border-radius: 18px;
  }

  .work-principle-number {
    margin-bottom: 18px;

    font-size: 0.8rem;
  }

  .work-principle-label {
    font-size: 1rem;
  }

  .work-principle h3 {
    font-size: 1.2rem;
  }

  .work-principle p {
    font-size: 0.94rem;
  }

  .work-principles + .contact {
    margin-top: 22px;
  }

}


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

@media (max-width: 420px) {

  .work-hero {
    padding-right: 14px;
    padding-left: 14px;
  }

  .thesis-results {
    padding:
      22px;
  }

  .result-metric strong {
    font-size: 1.5rem;
  }

  .result-reduction {
    padding:
      14px
      15px;
  }

  .project-button {
    font-size: 0.8rem;
  }

  .lisbon-visual-header {
    gap: 12px;
  }

  .lisbon-visual-header strong {
    max-width: 205px;

    font-size: 1.15rem;
  }

  .lisbon-pipeline {
    padding-right: 18px;
    padding-left: 18px;
  }

  .lisbon-output-grid {
    padding-right: 18px;
    padding-left: 18px;
  }

  .lisbon-insight {
    margin-right: 18px;
    margin-left: 18px;
  }

  .project-button-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

}


/* =========================================================
   SELECTED WORK — MOBILE CONTENT ORDER
   ========================================================= */

@media (max-width: 680px) {

  /*
    On mobile, flatten .project-copy into the parent project grid.
    This allows the visual element — which is a sibling of
    .project-copy in the HTML — to be inserted between specific
    text elements without changing desktop markup or behavior.
  */

  .project > .project-copy {
    display: contents;
  }

  .project {
    display: grid;
    grid-template-columns: minmax(0, 1fr);

    column-gap: 0;
    row-gap: 0;
  }

  .project > .project-copy > *,
  .project > .project-visual,
  .project > .thesis-results,
  .project > .lisbon-visual {
    grid-column: 1;
    min-width: 0;
  }


  /* -------------------------------------------------------
     Shared mobile metadata
     Keep project index / meta / specialist information at
     the top, then begin the requested content order.
     ------------------------------------------------------- */

  .project .project-topline {
    grid-row: 1;

    margin-bottom: 22px;
  }

  .project .project-copy > h2 {
    grid-row: 2;

    margin-bottom: 24px;
  }


  /* =======================================================
     PROJECT 01 — WEB APPLICATION
     Requested order:
     Title
     Visual
     Lead
     Skill tags
     Paragraph
     Open live project CTA
     Entity Resolution service CTA
     ======================================================= */

  .project-featured > .project-visual {
    grid-row: 3;

    margin:
      0
      0
      26px;

    align-self: start;
  }

  .project-featured .project-copy > .project-lead {
    grid-row: 4;

    margin:
      0
      0
      20px;
  }

  .project-featured .project-tags {
    grid-row: 5;

    margin:
      0
      0
      22px;
  }

  .project-featured .project-copy > p:not(.project-lead) {
    grid-row: 6;

    margin:
      0
      0
      24px;
  }

  .project-featured .project-actions {
    grid-row: 7;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    margin-top: 0;
  }

  .project-featured .project-actions .project-button:nth-child(1) {
    order: 1;
  }

  .project-featured .project-actions .project-button:nth-child(2) {
    order: 2;
  }


  /* =======================================================
     PROJECT 02 — MASTER'S THESIS
     Requested order:
     Title
     Lead
     Visual
     Paragraph
     Skill tags
     Discuss a project CTA
     ======================================================= */

  .thesis-project .project-copy > .project-lead {
    grid-row: 3;

    margin:
      0
      0
      24px;
  }

  .thesis-project > .thesis-results {
    grid-row: 4;

    margin:
      0
      0
      26px;

    align-self: start;
  }

  .thesis-project .project-copy > p:not(.project-lead) {
    grid-row: 5;

    margin:
      0
      0
      22px;
  }

  .thesis-project .project-tags {
    grid-row: 6;

    margin:
      0
      0
      24px;
  }

  .thesis-project .project-copy > .project-button {
    grid-row: 7;

    justify-self: start;

    margin: 0;
  }


  /* =======================================================
     PROJECT 03 — INDEPENDENT PROJECT
     Requested order:
     Title
     Lead
     Visual
     Remaining paragraphs
     Skill tags
     CTA block
     ======================================================= */

  .lisbon-project .project-copy > .project-lead {
    grid-row: 3;

    margin:
      0
      0
      24px;
  }

  .lisbon-project > .lisbon-visual {
    grid-row: 4;

    margin:
      0
      0
      26px;

    align-self: start;
  }

  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(2) {
    grid-row: 5;
  }

  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(3) {
    grid-row: 6;
  }

  .lisbon-project .project-copy > p:not(.project-lead):nth-of-type(4) {
    grid-row: 7;
  }

  .lisbon-project .project-copy > p:not(.project-lead) {
    margin:
      0
      0
      18px;
  }

  .lisbon-project .project-tags {
    grid-row: 8;

    margin:
      4px
      0
      24px;
  }

  .lisbon-project .project-actions {
    grid-row: 9;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    margin-top: 0;
  }

}


/* =========================================================
   SELECTED WORK — SMALL MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 420px) {

  .project-featured > .project-visual,
  .thesis-project > .thesis-results,
  .lisbon-project > .lisbon-visual {
    margin-bottom: 24px;
  }

  .project-featured .project-tags,
  .thesis-project .project-tags,
  .lisbon-project .project-tags {
    margin-bottom: 22px;
  }

}