.availability-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
  margin-top: 1.65rem;
  padding: .78rem .9rem .68rem;
  border: 1px solid rgba(112,216,189,.24);
  background: rgba(112,216,189,.055);
  color: var(--muted);
  font: 700 .67rem/1.35 var(--mono);
  letter-spacing: .07em;
}

.availability-state {
  color: var(--signal);
  white-space: nowrap;
}

.availability-state i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(112,216,189,.72);
}

.hero-actions {
  align-items: center;
}

.hero-project-link {
  margin-left: .25rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .06em;
}

.hero-project-link:hover,
.hero-project-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}

.nav-lang {
  min-width: 2.3rem;
  text-align: center;
  color: var(--signal) !important;
}

.footer-language {
  color: var(--signal);
  font: 700 .62rem/1 var(--mono);
  letter-spacing: .09em;
  text-decoration: none;
}

.footer-language:hover,
.footer-language:focus-visible {
  color: var(--ink);
}

.area-grid-hiring {
  grid-template-columns: repeat(3, 1fr);
}

.area-grid-hiring .area-card {
  min-height: 300px;
}

.language-card {
  padding: 1.35rem;
  border: 1px solid rgba(112,216,189,.24);
  background: linear-gradient(145deg, rgba(20,24,32,.92), rgba(11,13,16,.95));
}

.language-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: .78rem 0 .68rem;
  border-top: 1px solid var(--line);
}

.language-row:first-of-type {
  border-top: 0;
}

.language-row span {
  color: var(--muted);
  font: 700 .68rem/1.2 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.language-row strong {
  font-size: .86rem;
  font-weight: 600;
  text-align: right;
}

.project-diagram-menelao {
  background:
    linear-gradient(rgba(112,216,189,.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,216,189,.034) 1px, transparent 1px),
    radial-gradient(circle at 48% 42%, rgba(112,216,189,.12), transparent 25rem),
    #0c1015;
  background-size: 44px 44px, 44px 44px, auto, auto;
}

.project-diagram-menelao .diagram-caption {
  color: var(--signal);
}

.hiring-project-grid .project-card {
  min-height: 390px;
}

.hiring-project-grid .text-link {
  margin-top: 1.4rem;
}

.hiring-project-grid .card-footer {
  margin-top: auto;
}

.case-study-link {
  display: inline-flex;
  width: fit-content;
  margin-right: 1rem;
  color: var(--signal) !important;
  font-weight: 700;
}

.repo-secondary-link {
  display: inline-flex;
  width: fit-content;
  color: var(--muted) !important;
  font-size: .68rem !important;
  opacity: .82;
}

.project-copy .case-study-link,
.project-copy .repo-secondary-link {
  margin-top: 1.15rem;
}

.project-copy .repo-secondary-link {
  margin-left: .85rem;
}

.hiring-project-grid .case-study-link,
.hiring-project-grid .repo-secondary-link {
  margin-top: 1rem;
}

/* The audiovisual portfolio remains associated in structured data, but it does not
   compete with the IT hiring flow inside this landing page. */
.contact-line-muted,
.site-footer .footer-link:not(.footer-language) {
  display: none;
}

@media (max-width: 1120px) {
  .area-grid-hiring {
    grid-template-columns: 1fr 1fr;
  }

  .area-grid-hiring .area-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .area-grid-hiring {
    grid-template-columns: 1fr;
  }

  .area-grid-hiring .area-card:last-child {
    grid-column: auto;
  }

  /* Case-study pages intentionally keep only the essential actions in the
     fixed header on small screens. The brand returns to the portfolio; language
     switch and CV remain available without relying on JavaScript. */
  .case-page .site-header {
    gap: .75rem;
  }

  .case-page .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .case-page .site-nav a {
    display: none;
    padding: .55rem .6rem .48rem;
    border: 1px solid var(--line);
  }

  .case-page .site-nav .nav-lang,
  .case-page .site-nav .nav-cv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
}

@media (max-width: 620px) {
  .availability-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-project-link {
    width: 100%;
    margin: .35rem 0 0;
    padding-top: .3rem;
  }

  .language-row {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .language-row strong {
    text-align: left;
  }

  .project-copy .case-study-link,
  .project-copy .repo-secondary-link,
  .hiring-project-grid .case-study-link,
  .hiring-project-grid .repo-secondary-link {
    display: flex;
    margin: .75rem 0 0;
  }
}

/* STEP 01 — HERO ART DIRECTION
   A quieter editorial surface with a more deliberate systems diagram. */
.hero {
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
  column-gap: clamp(2rem, 4vw, 5rem);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 840px;
}

.hero-copy::before {
  content: "01 / PROFILE ENTRY";
  position: absolute;
  top: clamp(1.4rem, 4vw, 3.5rem);
  right: clamp(1rem, 4vw, 4rem);
  color: rgba(241,237,228,.24);
  font: 700 .58rem/1 var(--mono);
  letter-spacing: .14em;
}

.eyebrow {
  max-width: 690px;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(241,237,228,.1);
}

.hero h1 {
  max-width: 780px;
  font-size: clamp(4.5rem, 8.8vw, 8.65rem);
  line-height: .79;
}

.hero h1 span {
  -webkit-text-stroke-width: 1px;
  opacity: .88;
}

.hero-role {
  max-width: 690px;
  margin-top: 2rem;
  font-size: clamp(1.18rem, 1.85vw, 1.72rem);
  line-height: 1.25;
}

.hero-summary {
  max-width: 630px;
  line-height: 1.7;
}

.availability-strip {
  max-width: 690px;
  margin-top: 1.45rem;
  padding: .72rem 0 .62rem 1rem;
  border: 0;
  border-left: 2px solid rgba(112,216,189,.62);
  background: linear-gradient(90deg, rgba(112,216,189,.07), transparent 78%);
}

.hero-actions {
  margin-top: 1.8rem;
}

.hero .button-primary {
  min-width: 176px;
  box-shadow: 0 10px 34px rgba(218,59,50,.12);
}

.hero-meta {
  max-width: 730px;
  gap: 0;
  margin-top: 2.45rem;
  padding-top: 0;
  border-top: 1px solid rgba(241,237,228,.1);
  border-bottom: 1px solid rgba(241,237,228,.08);
}

.hero-meta div {
  min-width: 0;
  padding: 1rem 1rem .95rem 0;
}

.hero-meta div + div {
  padding-left: 1rem;
  border-left: 1px solid rgba(241,237,228,.08);
}

.hero-system {
  min-height: 650px;
  margin: clamp(2.2rem, 5vh, 4rem) 0;
  border-color: rgba(241,237,228,.18);
  background:
    linear-gradient(rgba(109,168,216,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,168,216,.025) 1px, transparent 1px),
    radial-gradient(circle at 51% 48%, rgba(112,216,189,.075), transparent 24rem),
    linear-gradient(155deg, rgba(18,23,30,.78), rgba(8,10,13,.97));
  background-size: 52px 52px, 52px 52px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(109,168,216,.025), 0 30px 90px rgba(0,0,0,.18);
}

.hero-system::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 46px 34px;
  pointer-events: none;
  background:
    linear-gradient(var(--blue), var(--blue)) left top / 34px 1px no-repeat,
    linear-gradient(var(--blue), var(--blue)) left top / 1px 34px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 34px 1px no-repeat,
    linear-gradient(var(--blue), var(--blue)) right bottom / 1px 34px no-repeat;
  opacity: .25;
}

.hero-system::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(112,216,189,.07), transparent 26%),
    linear-gradient(115deg, transparent 48%, rgba(109,168,216,.025) 49%, rgba(109,168,216,.025) 51%, transparent 52%);
}

.system-head,
.system-foot {
  padding-inline: 1.15rem;
  font-size: .61rem;
  letter-spacing: .12em;
}

.system-head {
  border-bottom-color: rgba(241,237,228,.09);
}

.system-foot {
  border-top-color: rgba(241,237,228,.09);
}

.system-map {
  min-height: 548px;
}

.system-map path {
  stroke: rgba(109,168,216,.34);
  stroke-width: 1.15;
  stroke-dasharray: 3 9;
  animation-duration: 18s;
}

.system-map path:nth-child(2),
.system-map path:nth-child(3) {
  stroke: rgba(112,216,189,.28);
}

.system-map circle {
  r: 6px;
}

.node {
  width: 164px;
  padding: .7rem .8rem .68rem .95rem;
  border: 0;
  border-left: 2px solid rgba(241,237,228,.22);
  background: linear-gradient(90deg, rgba(11,13,16,.94), rgba(11,13,16,.48) 76%, transparent);
  box-shadow: none;
}

.node::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 1px;
  background: currentColor;
  opacity: .16;
}

.node span {
  font-size: .56rem;
  letter-spacing: .12em;
}

.node strong {
  margin-top: .28rem;
  font-size: .78rem;
  letter-spacing: .12em;
}

.node small {
  margin-top: .42rem;
  color: rgba(158,163,170,.76);
  font-size: .6rem;
  letter-spacing: .03em;
}

.node-a {
  top: 12%;
  left: 8%;
  border-left-color: rgba(112,216,189,.72);
}
.node-a span { color: var(--signal); }

.node-b {
  top: 18%;
  right: 7%;
  border-left-color: rgba(109,168,216,.72);
}
.node-b span { color: var(--blue); }

.node-c {
  bottom: 17%;
  left: 7%;
  border-left-color: rgba(241,237,228,.42);
}
.node-c span { color: rgba(241,237,228,.7); }

.node-d {
  bottom: 11%;
  right: 9%;
  border-left-color: rgba(218,59,50,.76);
}
.node-d span { color: var(--accent-bright); }

.core {
  width: 142px;
  border-color: rgba(112,216,189,.46);
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(112,216,189,.08) 50%, transparent 50.5%),
    linear-gradient(transparent 49.5%, rgba(112,216,189,.08) 50%, transparent 50.5%),
    rgba(9,12,15,.94);
  box-shadow:
    0 0 0 1px rgba(112,216,189,.06),
    0 0 0 14px rgba(112,216,189,.018),
    0 24px 70px rgba(0,0,0,.3);
}

.core::before,
.core::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: rgba(112,216,189,.42);
}

.core::before {
  width: 24px;
  height: 1px;
  left: -12px;
  top: 50%;
}

.core::after {
  width: 1px;
  height: 24px;
  top: -12px;
  left: 50%;
}

.core span {
  font-size: 2.5rem;
  letter-spacing: -.06em;
}

.core small {
  max-width: 104px;
  margin-top: .55rem;
  color: rgba(158,163,170,.76);
  font-size: .5rem;
  letter-spacing: .1em;
}

@media (max-width: 1120px) {
  .hero {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .hero-copy {
    max-width: 920px;
  }

  .hero-copy::before {
    right: 0;
  }

  .hero-system {
    min-height: 590px;
    margin-top: 0;
  }

  .system-map {
    min-height: 500px;
  }
}

@media (max-width: 620px) {
  .hero-copy::before {
    display: none;
  }

  .eyebrow {
    padding-bottom: .75rem;
  }

  .hero-role {
    margin-top: 1.65rem;
  }

  .hero-summary {
    line-height: 1.62;
  }

  .availability-strip {
    padding-left: .8rem;
  }

  .hero-meta {
    border-bottom: 0;
  }

  .hero-meta div {
    padding: .85rem 0;
  }

  .hero-meta div + div {
    padding-left: 0;
    border-left: 0;
  }

  .hero-system {
    min-height: 520px;
    margin-top: .5rem;
  }

  .hero-system::before {
    inset: 42px 18px;
  }

  .system-map {
    min-height: 435px;
  }

  .node {
    width: 118px;
    padding: .58rem .45rem .54rem .62rem;
  }

  .node strong {
    font-size: .64rem;
  }

  .node small {
    font-size: .52rem;
  }

  .node-a,
  .node-c {
    left: 3%;
  }

  .node-b,
  .node-d {
    right: 3%;
  }

  .core {
    width: 104px;
  }

  .core span {
    font-size: 2rem;
  }
}

/* STEP 02 — LANDING PAGE RHYTHM
   Alternate density, surface and scale so the page reads as one editorial system. */
.profile,
.areas-section,
.experience-section,
.projects-section,
.stack-section,
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.profile > *,
.areas-section > *,
.experience-section > *,
.projects-section > *,
.stack-section > *,
.contact > * {
  position: relative;
  z-index: 1;
}

.profile::before,
.areas-section::before,
.experience-section::before,
.projects-section::before,
.stack-section::before,
.contact::before {
  position: absolute;
  z-index: 0;
  top: clamp(2rem, 5vw, 4.5rem);
  right: clamp(1.2rem, 5vw, 5.5rem);
  color: rgba(241,237,228,.025);
  font: 700 clamp(6rem, 15vw, 13rem)/.7 var(--mono);
  letter-spacing: -.08em;
  pointer-events: none;
}

.profile::before { content: "01"; }
.areas-section::before { content: "02"; }
.experience-section::before { content: "03"; }
.projects-section::before { content: "04"; }
.stack-section::before { content: "05"; }
.contact::before { content: "06"; }

.profile {
  padding-top: clamp(6.5rem, 10vw, 10rem);
  padding-bottom: clamp(7rem, 11vw, 10.5rem);
  border-top-color: rgba(241,237,228,.18);
  background:
    radial-gradient(circle at 86% 28%, rgba(109,168,216,.045), transparent 25rem),
    linear-gradient(180deg, rgba(16,19,25,.22), transparent 48%);
}

.areas-section {
  padding-top: clamp(5rem, 7vw, 7rem);
  padding-bottom: clamp(6rem, 8vw, 8rem);
  border-top-color: rgba(241,237,228,.07);
  background:
    linear-gradient(90deg, rgba(112,216,189,.018), transparent 42%),
    rgba(8,10,13,.16);
}

.experience-section {
  padding-top: clamp(7rem, 11vw, 10.5rem);
  padding-bottom: clamp(7rem, 11vw, 10rem);
  border-top-color: rgba(241,237,228,.18);
  background:
    radial-gradient(circle at 13% 35%, rgba(218,59,50,.035), transparent 25rem),
    linear-gradient(180deg, rgba(20,24,32,.18), rgba(11,13,16,.02));
}

.projects-section {
  padding-top: clamp(6rem, 9vw, 8.5rem);
  padding-bottom: clamp(7.5rem, 11vw, 10.5rem);
  border-top-color: rgba(241,237,228,.08);
  background:
    radial-gradient(circle at 84% 16%, rgba(112,216,189,.04), transparent 28rem),
    rgba(9,12,16,.18);
}

.stack-section {
  padding-top: clamp(5rem, 7vw, 7rem);
  padding-bottom: clamp(6rem, 8vw, 8rem);
  border-top-color: rgba(241,237,228,.16);
}

.contact {
  padding-top: clamp(7.5rem, 12vw, 11rem);
  padding-bottom: clamp(7.5rem, 12vw, 11rem);
  border-top-color: rgba(241,237,228,.08);
  background:
    linear-gradient(120deg, rgba(218,59,50,.035), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(109,168,216,.035), transparent 26rem);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 380px);
  align-items: end;
  gap: clamp(2rem, 7vw, 7rem);
}

.section-heading h2 {
  max-width: 900px;
}

.section-heading > p {
  max-width: 380px;
  padding-left: 1.1rem;
  border-left: 1px solid rgba(241,237,228,.12);
  line-height: 1.7;
}

.section-index {
  margin-bottom: 1.15rem;
  font-size: .67rem;
  letter-spacing: .16em;
}

.areas-section .section-heading,
.stack-section .section-heading {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.experience-section .section-heading,
.projects-section .section-heading {
  margin-bottom: clamp(4rem, 7vw, 6.5rem);
}

.projects-section .section-heading h2,
.experience-section .section-heading h2 {
  font-size: clamp(2.6rem, 5.4vw, 5.25rem);
}

.stack-section .section-heading h2 {
  font-size: clamp(2.15rem, 4.4vw, 4.2rem);
}

@media (max-width: 860px) {
  .section-heading {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1.25rem;
  }

  .section-heading > p {
    max-width: 620px;
  }

  .profile::before,
  .areas-section::before,
  .experience-section::before,
  .projects-section::before,
  .stack-section::before,
  .contact::before {
    top: 2.6rem;
    right: 1rem;
    font-size: clamp(5.5rem, 22vw, 9rem);
  }
}

@media (max-width: 620px) {
  .profile,
  .areas-section,
  .experience-section,
  .projects-section,
  .stack-section,
  .contact {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .section-heading > p {
    padding-left: .85rem;
  }

  .profile::before,
  .areas-section::before,
  .experience-section::before,
  .projects-section::before,
  .stack-section::before,
  .contact::before {
    opacity: .7;
  }
}

/* STEP 03 — PROFILE PORTRAIT
   Treat the portrait as editorial evidence rather than a separate card. */
.profile-copy .lead {
  max-width: 900px;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.profile-detail-grid {
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
}

.profile-detail-grid .profile-columns {
  position: relative;
  max-width: 760px;
  gap: 1.8rem;
  padding-left: 1.4rem;
}

.profile-detail-grid .profile-columns::before {
  content: "";
  position: absolute;
  top: .2rem;
  bottom: .2rem;
  left: 0;
  width: 1px;
  background: linear-gradient(var(--accent), rgba(218,59,50,.06));
}

.profile-detail-grid .profile-columns p:first-child {
  color: #cbc8c1;
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
}

.profile-photo-card {
  width: min(100%, 390px);
  justify-self: end;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-photo-card::before {
  content: "PORTRAIT / GB-01";
  position: absolute;
  z-index: 3;
  top: -1.8rem;
  left: 0;
  color: rgba(241,237,228,.38);
  font: 700 .58rem/1 var(--mono);
  letter-spacing: .14em;
}

.profile-photo-card::after {
  inset: 0;
  border: 1px solid rgba(241,237,228,.13);
  background:
    linear-gradient(180deg, transparent 54%, rgba(11,13,16,.9) 100%),
    linear-gradient(90deg, rgba(218,59,50,.08), transparent 38%);
  box-shadow:
    -18px 18px 0 -17px rgba(218,59,50,.74),
    20px -20px 0 -19px rgba(109,168,216,.62);
}

.profile-photo-card img {
  aspect-ratio: 3 / 4;
  object-position: center 20%;
  filter: saturate(.7) contrast(1.045) brightness(.94);
}

.profile-photo-card figcaption {
  left: 1rem;
  right: 1rem;
  bottom: .85rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(241,237,228,.16);
  color: rgba(241,237,228,.76);
  font-size: .56rem;
  letter-spacing: .11em;
}

.profile-photo-card figcaption span:last-child {
  color: var(--signal);
}

@media (max-width: 1020px) {
  .profile-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 3rem;
  }
}

@media (max-width: 760px) {
  .profile-detail-grid {
    grid-template-columns: 1fr;
  }

  .profile-photo-card {
    width: min(82vw, 360px);
    justify-self: start;
    margin-top: 1.5rem;
  }
}

/* STEP 04 — PROFESSIONAL FIT FLOWS
   Each role family gets a distinct process signal instead of a generic card treatment. */
.area-grid-hiring .area-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  padding: 1.4rem 1.45rem 1.35rem;
  border-color: rgba(241,237,228,.09);
  background: linear-gradient(155deg, rgba(18,22,28,.72), rgba(10,12,15,.9));
}

.area-grid-hiring .area-card::before {
  position: absolute;
  top: 4.25rem;
  left: 1.45rem;
  right: 1.45rem;
  color: rgba(241,237,228,.54);
  font: 700 .59rem/1.4 var(--mono);
  letter-spacing: .1em;
  white-space: nowrap;
}

.area-grid-hiring .area-card::after {
  content: "";
  position: absolute;
  top: 5.9rem;
  left: 1.45rem;
  right: 1.45rem;
  height: 1px;
  opacity: .55;
}

.area-grid-hiring .area-card:nth-child(1)::before {
  content: "INCIDENT  01  →  DIAGNOSE  02  →  RESOLVE  03";
}
.area-grid-hiring .area-card:nth-child(1)::after {
  background: linear-gradient(90deg, var(--signal) 0 7%, rgba(112,216,189,.18) 7% 45%, var(--signal) 45% 52%, rgba(112,216,189,.18) 52% 91%, var(--signal) 91% 100%);
}

.area-grid-hiring .area-card:nth-child(2)::before {
  content: "NEED  01  →  PRIORITY  02  →  DELIVERY  03";
}
.area-grid-hiring .area-card:nth-child(2)::after {
  background: linear-gradient(90deg, var(--blue) 0 7%, rgba(109,168,216,.18) 7% 45%, var(--blue) 45% 52%, rgba(109,168,216,.18) 52% 91%, var(--blue) 91% 100%);
}

.area-grid-hiring .area-card:nth-child(3)::before {
  content: "SYSTEM  01  →  VERIFY  02  →  AUTOMATE  03";
}
.area-grid-hiring .area-card:nth-child(3)::after {
  background: linear-gradient(90deg, var(--accent-bright) 0 7%, rgba(218,59,50,.18) 7% 45%, var(--accent-bright) 45% 52%, rgba(218,59,50,.18) 52% 91%, var(--accent-bright) 91% 100%);
}

.area-grid-hiring .area-card h3 {
  margin: 6.3rem 0 1rem;
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
}

.area-grid-hiring .area-card p {
  line-height: 1.65;
}

.area-grid-hiring .area-card .card-footer {
  margin-top: auto;
  padding-top: 1.8rem;
  color: rgba(241,237,228,.5);
  font-size: .59rem;
  letter-spacing: .12em;
}

.area-grid-hiring .area-card:nth-child(1) .card-top span:last-child { color: var(--signal); }
.area-grid-hiring .area-card:nth-child(2) .card-top span:last-child { color: var(--blue); }
.area-grid-hiring .area-card:nth-child(3) .card-top span:last-child { color: var(--accent-bright); }

.area-grid-hiring .area-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241,237,228,.18);
  background: linear-gradient(155deg, rgba(22,27,34,.84), rgba(11,13,16,.94));
}

@media (max-width: 620px) {
  .area-grid-hiring .area-card::before {
    font-size: .53rem;
    letter-spacing: .055em;
  }

  .area-grid-hiring .area-card h3 {
    margin-top: 6rem;
  }
}

/* STEP 05 — EXPERIENCE + CREDENTIALS
   Make company and role the dominant scan path; turn the side column into one credential sheet. */
.experience-layout {
  grid-template-columns: minmax(0, 1.58fr) minmax(300px, .42fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.experience-timeline::before {
  left: 5.65rem;
  background: linear-gradient(to bottom, var(--signal), rgba(109,168,216,.42), rgba(218,59,50,.55));
  opacity: .48;
}

.experience-role {
  grid-template-columns: 4.7rem 1fr;
  gap: 2.4rem;
  padding: 1.75rem 0 1.65rem;
  border-bottom-color: rgba(241,237,228,.08);
  transition: background .2s ease, padding .2s ease;
}

.experience-role:first-child {
  border-top-color: rgba(241,237,228,.1);
}

.experience-role::before {
  left: 5.31rem;
  top: 2.12rem;
  width: 8px;
  height: 8px;
  border-color: rgba(112,216,189,.62);
  background: #0b0d10;
  box-shadow: 0 0 0 5px rgba(112,216,189,.018);
}

.experience-role:hover {
  background: linear-gradient(90deg, rgba(241,237,228,.018), transparent 72%);
}

.experience-date {
  padding-top: .15rem;
  color: rgba(158,163,170,.68);
  font-size: .61rem;
  line-height: 1.35;
  letter-spacing: .11em;
}

.experience-company {
  align-items: flex-end;
  margin-bottom: .55rem;
}

.experience-company strong {
  font-size: clamp(1.65rem, 2.7vw, 2.7rem);
  line-height: .92;
  letter-spacing: -.048em;
}

.experience-company span {
  padding-bottom: .12rem;
  color: rgba(112,216,189,.72);
  font-size: .58rem;
  letter-spacing: .12em;
}

.experience-title {
  margin-bottom: .72rem;
  color: #d9d5cd;
  font: 700 .75rem/1.35 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.experience-role p:last-child {
  max-width: 700px;
  color: rgba(158,163,170,.9);
  line-height: 1.68;
}

.experience-side {
  top: 94px;
  gap: 0;
  border-top: 1px solid rgba(241,237,228,.14);
  border-bottom: 1px solid rgba(241,237,228,.14);
  background: rgba(10,12,15,.46);
}

.experience-side .credential-card,
.experience-side .language-card {
  padding: 1.4rem 1.25rem 1.35rem;
  border: 0;
  border-bottom: 1px solid rgba(241,237,228,.08);
  background: transparent;
}

.experience-side > :last-child {
  border-bottom: 0;
}

.experience-side .credential-label {
  margin-bottom: 1.35rem;
  color: rgba(158,163,170,.62);
  font-size: .57rem;
  letter-spacing: .13em;
}

.experience-side .credential-card strong {
  margin-bottom: .55rem;
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  line-height: 1;
}

.experience-side .credential-card p {
  color: rgba(158,163,170,.82);
  font-size: .86rem;
  line-height: 1.55;
}

.experience-side .credential-year {
  margin-top: 1rem;
  border: 0;
  border-left: 2px solid var(--signal);
  padding: .35rem 0 .28rem .65rem;
  color: var(--signal);
  font-size: .58rem;
}

.experience-side .training-list {
  gap: .38rem;
}

.experience-side .training-list span {
  padding: .33rem .42rem .28rem;
  border-color: rgba(241,237,228,.1);
  font-size: .55rem;
}

.experience-side .language-row {
  padding: .72rem 0 .62rem;
  border-top-color: rgba(241,237,228,.08);
}

.experience-side .language-row strong {
  color: #d8d4cc;
  font-size: .79rem;
}

@media (max-width: 980px) {
  .experience-layout {
    grid-template-columns: 1fr;
  }

  .experience-side {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(241,237,228,.1);
  }

  .experience-side .credential-card,
  .experience-side .language-card {
    border-bottom: 0;
    border-right: 1px solid rgba(241,237,228,.08);
  }

  .experience-side > :last-child {
    border-right: 0;
  }
}

@media (max-width: 700px) {
  .experience-timeline::before {
    left: .25rem;
  }

  .experience-role {
    grid-template-columns: 1fr;
    gap: .65rem;
    padding-left: 1.55rem;
  }

  .experience-role::before {
    left: -.08rem;
    top: 2rem;
  }

  .experience-date {
    order: 2;
  }

  .experience-company {
    align-items: flex-start;
    flex-direction: column;
    gap: .35rem;
  }

  .experience-side {
    grid-template-columns: 1fr;
  }

  .experience-side .credential-card,
  .experience-side .language-card {
    border-right: 0;
    border-bottom: 1px solid rgba(241,237,228,.08);
  }
}

/* STEP 06 — PROJECT VISUAL SYSTEM
   Turn the landing projects into technical diagrams first, prose second. */
.project-feature {
  grid-template-columns: 1fr 1.08fr;
  border-color: rgba(241,237,228,.13);
  background: linear-gradient(145deg, rgba(18,22,28,.82), rgba(10,12,15,.94));
  box-shadow: 0 34px 90px rgba(0,0,0,.16);
}

.project-diagram-menelao {
  min-height: 600px;
  border-right-color: rgba(241,237,228,.08);
  background:
    linear-gradient(rgba(112,216,189,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,216,189,.025) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(112,216,189,.105), transparent 20rem),
    linear-gradient(150deg, #0d1217, #090b0e);
  background-size: 52px 52px, 52px 52px, auto, auto;
}

.project-diagram-menelao::before {
  content: "VERIFICATION MODEL / X-A-B";
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  color: rgba(158,163,170,.5);
  font: 700 .56rem/1 var(--mono);
  letter-spacing: .12em;
}

.project-diagram-menelao .storage {
  width: 118px;
  border-color: rgba(241,237,228,.16);
  background: rgba(8,11,14,.9);
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.project-diagram-menelao .storage-a {
  top: 18%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-color: rgba(241,237,228,.3);
}

.project-diagram-menelao .storage-b {
  top: auto;
  bottom: 20%;
  left: 12%;
  right: auto;
  border-color: rgba(109,168,216,.5);
}

.project-diagram-menelao .storage-c {
  bottom: 20%;
  left: auto;
  right: 12%;
  border-color: rgba(112,216,189,.5);
}

.project-diagram-menelao .storage-d {
  top: 47%;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  color: var(--signal);
  border-color: rgba(112,216,189,.58);
  background: rgba(9,13,15,.95);
}

.project-diagram-menelao .flow {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112,216,189,.64), transparent);
}

.project-diagram-menelao .flow-1 {
  width: 1px;
  height: 29%;
  top: 28%;
  left: 50%;
  background: linear-gradient(transparent, rgba(112,216,189,.68), transparent);
}

.project-diagram-menelao .flow-2 {
  width: 41%;
  top: 57%;
  left: 49.5%;
  transform: rotate(143deg);
}

.project-diagram-menelao .flow-3 {
  width: 41%;
  top: 57%;
  left: 50.5%;
  transform: rotate(37deg);
}

.project-diagram-menelao .diagram-caption {
  right: 1.3rem;
  bottom: 1.2rem;
  color: var(--signal);
  font-size: .58rem;
  letter-spacing: .13em;
}

.project-copy {
  padding: clamp(2.5rem, 5vw, 5.2rem);
}

.project-copy h3 {
  font-size: clamp(2.8rem, 5.1vw, 5.2rem);
}

.hiring-project-grid .project-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 1.4rem 1.4rem 1.3rem;
  border-color: rgba(241,237,228,.09);
  background: linear-gradient(155deg, rgba(17,21,27,.72), rgba(9,11,14,.92));
}

.hiring-project-grid .project-card::before {
  position: absolute;
  top: 4rem;
  left: 1.4rem;
  right: 1.4rem;
  color: rgba(241,237,228,.55);
  font: 700 .56rem/1.45 var(--mono);
  letter-spacing: .085em;
}

.hiring-project-grid .project-card::after {
  content: "";
  position: absolute;
  top: 5.7rem;
  left: 1.4rem;
  right: 1.4rem;
  height: 1px;
  opacity: .5;
}

.hiring-project-grid .project-card:nth-child(1)::before {
  content: "BROWSER  →  SESSION STATE  →  AUTH  →  SYNC";
}
.hiring-project-grid .project-card:nth-child(1)::after {
  background: linear-gradient(90deg, var(--blue), rgba(109,168,216,.15) 33%, var(--signal) 66%, rgba(112,216,189,.18));
}

.hiring-project-grid .project-card:nth-child(2)::before {
  content: "WEATHER + MOBILITY + DOCS  →  OPS HUB";
}
.hiring-project-grid .project-card:nth-child(2)::after {
  background: linear-gradient(90deg, var(--signal), rgba(112,216,189,.15) 52%, var(--accent-bright));
}

.hiring-project-grid .project-card:nth-child(3)::before {
  content: "APP / DATA  →  BACKUP  →  RECOVERY";
}
.hiring-project-grid .project-card:nth-child(3)::after {
  background: linear-gradient(90deg, rgba(241,237,228,.42), rgba(109,168,216,.18), var(--blue));
}

.hiring-project-grid .project-card h3 {
  margin: 6.2rem 0 1rem;
  font-size: clamp(1.7rem, 2.45vw, 2.55rem);
}

.hiring-project-grid .project-card p {
  line-height: 1.65;
}

.hiring-project-grid .project-card .card-footer {
  color: rgba(241,237,228,.46);
  font-size: .57rem;
}

.hiring-project-grid .project-card:nth-child(1) .card-top span:last-child { color: var(--blue); }
.hiring-project-grid .project-card:nth-child(2) .card-top span:last-child { color: var(--signal); }
.hiring-project-grid .project-card:nth-child(3) .card-top span:last-child { color: rgba(241,237,228,.62); }

@media (max-width: 1120px) {
  .project-feature {
    grid-template-columns: 1fr;
  }

  .project-diagram-menelao {
    min-height: 500px;
    border-right: 0;
    border-bottom: 1px solid rgba(241,237,228,.08);
  }
}

@media (max-width: 620px) {
  .project-diagram-menelao {
    min-height: 390px;
  }

  .project-diagram-menelao .storage {
    width: 94px;
  }

  .hiring-project-grid .project-card::before {
    font-size: .5rem;
    letter-spacing: .045em;
  }
}