/* ============================================================
   About — career landing page styles
   Builds on css/case-study.css. Classes are prefixed .ab-.
   Neutral palette with the portfolio's white/black button system.
   ============================================================ */

.ab-page {
  --cs-gradient: linear-gradient(90deg, #8a8f98 0%, #ffffff 50%, #8a8f98 100%);
  --cs-accent: #ffffff;
  --ab-accent: #c7f36b;          /* single highlight, used sparingly */
}
:root[color-scheme="light"] .ab-page { --cs-accent: #111111; }

/* ------ Hero ------ */
.ab-hero { position: relative; overflow: hidden; }
.ab-hero > .mxd-container { position: relative; z-index: 1; }
.ab-grid-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: flex; justify-content: space-evenly; }
.ab-grid-lines span { width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.06) 70%, transparent); }
.ab-hero__row { align-items: center; }
.ab-eyebrow {
  display: inline-flex; align-items: center; gap: 1rem;
  margin: 0 0 2.4rem;
  color: var(--t-medium);
  font: normal 600 1.3rem/1 var(--_font-accent);
  text-transform: uppercase; letter-spacing: 0.08rem;
}
.ab-eyebrow__dot {
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--ab-accent);
  box-shadow: 0 0 0 0 rgba(199, 243, 107, 0.6);
  animation: ab-live 2.4s ease-out infinite;
}
@keyframes ab-live { 0% { box-shadow: 0 0 0 0 rgba(199, 243, 107, 0.6); } 100% { box-shadow: 0 0 0 1.2rem rgba(199, 243, 107, 0); } }
.ab-hero__title {
  margin: 0;
  color: var(--t-bright);
  font: normal 500 clamp(4.2rem, 6.2vw, 8.8rem)/1.14 var(--_font-default);
  letter-spacing: -0.1rem;
  max-width: 16ch;
}
.ab-role {
  margin: 3rem 0 0;
  color: var(--t-bright);
  font: normal 600 clamp(1.8rem, 1.6vw, 2.4rem)/1.3 var(--_font-default);
}
/* Split-line masks clip descenders (g, comma); give each line room below the baseline */
.ab-hero__title .line { padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ab-hero__intro {
  max-width: 60rem;
  margin: 1.2rem 0 0;
  color: var(--t-medium);
  font: normal 400 1.8rem/1.55 var(--_font-default);
}
.ab-capline {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin: 2.8rem 0 0; padding: 0; list-style: none;
}
.ab-capline li {
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--cs-line);
  border-radius: 99px;
  color: var(--t-bright);
  font: normal 600 1.2rem/1 var(--_font-accent);
  text-transform: uppercase;
}
.ab-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-top: 3.6rem; }
@media only screen and (min-width: 1200px) { .ab-actions { align-items: center; } }

.ab-portrait { position: relative; margin: 5rem 0 0; max-width: 46rem; }
@media only screen and (min-width: 1200px) { .ab-portrait { margin: 0 0 0 auto; } }
.ab-portrait__frame {
  overflow: hidden;
  aspect-ratio: 990 / 1320;
  border-radius: var(--cs-radius);
  background: var(--base-tint);
}
.ab-portrait__frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.6s ease; }
.ab-portrait:hover .ab-portrait__frame img { filter: grayscale(0); }
.ab-portrait__tag {
  position: absolute; left: 1.6rem; bottom: 1.6rem; right: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.ab-portrait__tag span {
  padding: 0.7rem 1.2rem;
  border-radius: 99px;
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(8px);
  color: #fff;
  font: normal 600 1.1rem/1 var(--_font-accent);
  text-transform: uppercase;
}
.ab-meta { margin-top: 6rem; }
@media only screen and (min-width: 1200px) { .ab-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------ Bio ------ */
.ab-bio p { margin: 0 0 2rem; color: var(--t-medium); font: normal 400 1.7rem/1.6 var(--_font-default); }
.ab-bio p:last-child { margin-bottom: 0; color: var(--t-bright); }
.ab-intro { max-width: 48rem; margin-top: 2rem; }
@media only screen and (min-width: 1200px) { .ab-intro { margin-top: 5.4rem; } }

.ab-brands { padding: 3rem 0 0; border-top: 1px solid var(--cs-line); }
.ab-brands__label { margin: 0 0 2rem; color: var(--t-medium); font: normal 600 1.2rem/1 var(--_font-accent); text-transform: uppercase; }
.ab-logos { margin-top: 1rem; }
.ab-logos .mxd-clients__item { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.ab-logos .mxd-clients__logo img { width: 120px; height: 120px; }
.ab-brands__note { margin: 2rem 0 0; }

/* ------ Agency value ------ */
.ab-help {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin: 0; padding: 0; list-style: none; counter-reset: ab-help;
}
@media only screen and (min-width: 768px)  { .ab-help { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media only screen and (min-width: 1200px) { .ab-help { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-help__item {
  position: relative;
  padding: 2.4rem 2.2rem 2.6rem;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: var(--base-tint);
  counter-increment: ab-help;
  transition: border-color 0.3s ease, transform 0.4s var(--cs-ease);
}
.ab-help__item::before {
  content: counter(ab-help, decimal-leading-zero);
  display: block; margin-bottom: 2.4rem;
  color: var(--t-medium); font: normal 600 1.2rem/1 var(--_font-accent);
}
.ab-help__item:hover { border-color: var(--t-medium); transform: translateY(-4px); }
.ab-help__item h3 { margin: 0 0 0.8rem; color: var(--t-bright); font: normal 600 2rem/1.2 var(--_font-default); letter-spacing: -0.04rem; }
.ab-help__item p { margin: 0; color: var(--t-medium); font: normal 400 1.5rem/1.5 var(--_font-default); }

/* ------ Looking for ------ */
.ab-office { margin: 0 0 1.6rem; }
.ab-office__frame { overflow: hidden; aspect-ratio: 1400 / 788; border-radius: var(--cs-radius); background: var(--base-tint); }
.ab-office__frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.6s ease; }
.ab-office:hover .ab-office__frame img { filter: grayscale(0); }
.ab-target { padding: 2.6rem; border-radius: var(--cs-radius); background: var(--t-bright); color: var(--base); }
.ab-target__label { margin: 0 0 1rem; color: inherit; opacity: 0.7; font: normal 600 1.2rem/1 var(--_font-accent); text-transform: uppercase; }
.ab-target__label--also { margin-top: 3rem; color: var(--t-medium); opacity: 1; }
.ab-target__role { margin: 0; color: inherit; font: normal 600 clamp(2.4rem, 2.6vw, 3.4rem)/1.15 var(--_font-default); letter-spacing: -0.08rem; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.ab-chips li { padding: 0.9rem 1.4rem; border: 1px solid var(--cs-line); border-radius: 99px; color: var(--t-bright); font: normal 500 1.4rem/1 var(--_font-default); }

/* ------ Photo marquee ------ */
.ab-marquee { padding: 2rem 0 4rem; }
.ab-marquee .marquee__image { border: 0; border-radius: 0; }
.ab-marquee .marquee__image img { border-radius: 0; filter: grayscale(1); transition: filter 0.5s ease, transform 0.6s ease; }
.ab-marquee .marquee__image:hover img { filter: grayscale(0); }

/* ------ Let.s talk interactive CTA
   Night: white panel, black text, black service blocks.
   Day:   flipped to a black panel, white text, white blocks. ------ */
.ab-promo .mxd-promo { background-color: #fff; border-radius: 0; overflow: hidden; }
.ab-promo .object.object-permanent { background-color: #0f0f0f; }
.ab-promo .object.object-permanent p { color: #fff; }
.ab-promo .mxd-promo__caption h2,
.ab-promo .mxd-promo__caption h2.permanent { color: #0f0f0f; }
.ab-promo .btn-line-permanent,
.ab-promo .btn-line-permanent .btn-caption { color: #0f0f0f; border-color: #0f0f0f; }
:root[color-scheme="light"] .ab-promo .mxd-promo { background-color: #0f0f0f; }
:root[color-scheme="light"] .ab-promo .object.object-permanent { background-color: #fff; }
:root[color-scheme="light"] .ab-promo .object.object-permanent p { color: #0f0f0f; }
:root[color-scheme="light"] .ab-promo .mxd-promo__caption h2,
:root[color-scheme="light"] .ab-promo .mxd-promo__caption h2.permanent { color: #fff; }
:root[color-scheme="light"] .ab-promo .btn-line-permanent,
:root[color-scheme="light"] .ab-promo .btn-line-permanent .btn-caption { color: #fff; border-color: #fff; }

/* ============================================================
   / 03 Experience, Skills & Education (.ab-bg)
   Monochrome by default; logos take their brand colour on hover/focus.
   All content is visible without interaction or JavaScript.
   ============================================================ */
.ab-page .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ab-bg { --ab-line: var(--cs-line); }
/* Featured Work pins and fades (pinSpacing: false); the section after it must slide over it opaquely */
.ab-bg, .ab-look { position: relative; z-index: 2; background-color: var(--base); }
.ab-bg__side { padding-bottom: 5rem; }
@media only screen and (min-width: 1200px) {
  .ab-bg__side { position: sticky; top: 12rem; padding: 0 5rem 0 0; }
}
.ab-bg__title {
  margin: 2rem 0 0;
  color: var(--t-bright);
  font: normal 500 clamp(3.4rem, 3.6vw, 5.6rem)/1.05 var(--_font-default);
  letter-spacing: -0.12rem;
}
.ab-bg__intro { margin: 2rem 0 0; color: var(--t-medium); font: normal 400 1.7rem/1.6 var(--_font-default); }
.ab-bg__nav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 3.2rem 0 0; }
@media only screen and (min-width: 1200px) { .ab-bg__nav { flex-direction: column; gap: 0; border-top: 1px solid var(--ab-line); } }
.ab-bg__nav a {
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 4.4rem; padding: 0 1.6rem;
  border: 1px solid var(--ab-line); border-radius: 99px;
  color: var(--t-medium); text-decoration: none;
  font: normal 500 1.5rem/1.2 var(--_font-default);
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.ab-bg__nav a span { color: var(--t-medium); font: normal 600 1.1rem/1 var(--_font-accent); }
@media only screen and (min-width: 1200px) {
  .ab-bg__nav a { padding: 1.4rem 0; border: 0; border-bottom: 1px solid var(--ab-line); border-radius: 0; min-height: 0; }
  .ab-bg__nav a::after { content: ""; margin-left: auto; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--t-bright); transform: scale(0); transition: transform 0.4s var(--cs-ease); }
  .ab-bg__nav a[aria-current="true"]::after { transform: scale(1); }
}
.ab-bg__nav a:hover, .ab-bg__nav a:focus-visible, .ab-bg__nav a[aria-current="true"] { color: var(--t-bright); }
.ab-bg__nav a:focus-visible { outline: 2px solid var(--t-bright); outline-offset: 3px; }
.ab-bg__legend { margin: 2.4rem 0 0; color: var(--t-medium); font: normal 400 1.3rem/1.6 var(--_font-default); }
.ab-bg__legend strong { color: var(--t-bright); font-weight: 600; }

.ab-bg__block { scroll-margin-top: 10rem; }
.ab-bg__block + .ab-bg__block { margin-top: 8rem; }
.ab-bg__subtitle {
  margin: 0 0 3rem; padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--ab-line);
  color: var(--t-bright);
  font: normal 500 clamp(2.6rem, 2.4vw, 3.4rem)/1.1 var(--_font-default);
  letter-spacing: -0.06rem;
}
.ab-bg__note { margin: -1.6rem 0 2.4rem; color: var(--t-medium); font: normal 400 1.5rem/1.5 var(--_font-default); }

/* Skill groups */
.ab-group { padding: 0 0 5.6rem; scroll-margin-top: 10rem; }
.ab-group__head { display: grid; grid-template-columns: 4.4rem 1fr; gap: 0 1.2rem; padding-top: 2.4rem; border-top: 1px solid var(--ab-line); }
.ab-group:first-of-type .ab-group__head { border-top: 0; padding-top: 0; }
.ab-group__num { color: var(--t-medium); font: normal 600 1.2rem/2.8rem var(--_font-accent); }
.ab-group__title { margin: 0; color: var(--t-bright); font: normal 600 2.4rem/1.2 var(--_font-default); letter-spacing: -0.04rem; }
.ab-group__lead { margin: 0.6rem 0 0; color: var(--t-medium); font: normal 400 1.5rem/1.5 var(--_font-default); }
.ab-caps { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.ab-caps li { padding: 0.7rem 1.2rem; border: 1px solid var(--ab-line); border-radius: 99px; color: var(--t-bright); font: normal 500 1.3rem/1.2 var(--_font-default); }
.ab-caps--muted li { color: var(--t-medium); }
.ab-caps--small { margin-top: 1.4rem; }
.ab-caps--small li { padding: 0.5rem 1rem; font-size: 1.2rem; color: var(--t-medium); }
@media only screen and (min-width: 768px) { .ab-group .ab-caps, .ab-group .ab-skills, .ab-group .ab-proof, .ab-group .ab-langs { margin-left: 5.6rem; } }

/* Skill tiles */
.ab-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
@media only screen and (max-width: 419px) { .ab-skills { grid-template-columns: 1fr; } }
@media only screen and (min-width: 992px) { .ab-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-skill {
  display: flex; flex-direction: column;
  padding: 2rem 2rem 2.2rem;
  border: 1px solid var(--ab-line);
  border-radius: var(--cs-radius);
  background: var(--base-tint);
  transition: border-color 0.4s ease, transform 0.5s var(--cs-ease);
}
.ab-skill__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.ab-skill__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; flex: 0 0 auto;
  color: var(--t-bright);
  transition: color 0.45s ease, transform 0.5s var(--cs-ease);
}
.ab-skill__logo svg { width: 100%; height: 100%; display: block; }
.ab-skill__logo--wide { width: 8.8rem; height: 4.4rem; }
.ab-skill__logo--wide svg { transform: scale(1.9); }
.ab-skill__logo--mono {
  border: 1.5px solid currentColor; border-radius: 1.2rem;
  font: normal 700 1.4rem/1 var(--_font-accent); letter-spacing: -0.02rem;
}
.ab-skill__level {
  padding: 0.4rem 0.8rem; border: 1px solid var(--ab-line); border-radius: 99px;
  color: var(--t-medium); font: normal 600 1rem/1.2 var(--_font-accent); text-transform: uppercase; text-align: right;
}
.ab-skill[data-level="prev"] { background: transparent; }
.ab-skill[data-level="learn"] .ab-skill__level { color: var(--t-bright); border-color: var(--ab-accent, #c7f36b); }
.ab-skill__name { margin: 0; color: var(--t-bright); font: normal 600 1.8rem/1.25 var(--_font-default); }
.ab-skill__desc { margin: 0.6rem 0 0; color: var(--t-medium); font: normal 400 1.4rem/1.5 var(--_font-default); }
.ab-skill__used { margin: auto 0 0; padding-top: 1.4rem; color: var(--t-medium); font: normal 400 1.3rem/1.5 var(--_font-default); }
.ab-skill__used span { color: var(--t-medium); font: normal 600 1.1rem/1 var(--_font-accent); text-transform: uppercase; margin-right: 0.4rem; }
.ab-skill__used a, .ab-exp__links a { color: var(--t-bright); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3rem; }
.ab-skill:hover, .ab-skill:focus-within { border-color: var(--t-medium); }
.ab-skill:hover .ab-skill__logo, .ab-skill:focus-within .ab-skill__logo { color: var(--brand, var(--t-bright)); transform: translateY(-2px); }
/* Light yellow/amber marks keep an edge on light backgrounds */
:root[color-scheme="light"] .ab-skill:hover .ab-skill__logo svg,
:root[color-scheme="light"] .ab-skill:focus-within .ab-skill__logo svg { filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.55)); }

/* Web apps evidence list */
.ab-proof { margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ab-line); }
.ab-proof li { border-bottom: 1px solid var(--ab-line); }
.ab-proof a { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding: 1.8rem 0; text-decoration: none; }
@media only screen and (min-width: 768px) { .ab-proof a { grid-template-columns: 18rem 1fr auto; align-items: baseline; gap: 2rem; } .ab-proof a::after { content: "\2192"; color: var(--t-medium); transition: transform 0.4s var(--cs-ease), color 0.3s ease; } }
.ab-proof__name { color: var(--t-bright); font: normal 600 1.7rem/1.3 var(--_font-default); }
.ab-proof__what { color: var(--t-medium); font: normal 400 1.5rem/1.5 var(--_font-default); }
.ab-proof a:hover::after, .ab-proof a:focus-visible::after { transform: translateX(4px); color: var(--t-bright); }
.ab-proof a:hover .ab-proof__what, .ab-proof a:focus-visible .ab-proof__what { color: var(--t-bright); }

.ab-group--quiet .ab-group__title { font-size: 2rem; }
.ab-langs { margin: 2.4rem 0 0; }
.ab-langs div { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding: 1.4rem 0; border-top: 1px solid var(--ab-line); }
@media only screen and (min-width: 768px) { .ab-langs div { grid-template-columns: 20rem 1fr; } }
.ab-langs dt { color: var(--t-medium); font: normal 600 1.2rem/1.6 var(--_font-accent); text-transform: uppercase; }
.ab-langs dd { margin: 0; color: var(--t-bright); font: normal 500 1.5rem/1.5 var(--_font-default); }

/* Experience timeline */
.ab-exp { position: relative; margin: 0; padding: 0; list-style: none; --ab-exp-progress: 1; }
.ab-exp::before {
  content: ""; position: absolute; top: 0.8rem; bottom: 0.8rem; left: 0.5rem; width: 1px;
  background: linear-gradient(var(--t-medium), var(--t-medium)) top / 100% calc(var(--ab-exp-progress) * 100%) no-repeat, var(--ab-line);
}
.ab-exp__item { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.6rem; padding: 0 0 4.4rem 3.6rem; }
.ab-exp__item:last-child { padding-bottom: 0; }
.ab-exp__item::before {
  content: ""; position: absolute; left: 0; top: 0.5rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1px solid var(--t-medium); background: var(--base);
}
.ab-exp__item:first-child::before { background: var(--t-bright); border-color: var(--t-bright); }
@media only screen and (min-width: 768px) { .ab-exp__item { grid-template-columns: 18rem 1fr; gap: 3rem; } }
.ab-exp__dates { margin: 0; color: var(--t-medium); font: normal 600 1.3rem/1.6 var(--_font-accent); text-transform: uppercase; }
.ab-exp__company { margin: 0; color: var(--t-bright); font: normal 600 2.4rem/1.2 var(--_font-default); letter-spacing: -0.04rem; }
.ab-exp__role { margin: 0.4rem 0 0; color: var(--t-bright); font: normal 400 1.6rem/1.45 var(--_font-default); }
.ab-exp__desc { max-width: 60rem; margin: 1.2rem 0 0; color: var(--t-medium); font: normal 400 1.5rem/1.6 var(--_font-default); }
.ab-exp__links { margin: 1.2rem 0 0; color: var(--t-medium); font: normal 400 1.4rem/1.6 var(--_font-default); }
.ab-exp__links span { font: normal 600 1.1rem/1 var(--_font-accent); text-transform: uppercase; margin-right: 0.4rem; }

/* Education */
.ab-edu { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media only screen and (min-width: 768px) { .ab-edu { grid-template-columns: 1fr 1fr; } }
.ab-edu__item { padding: 2.4rem; border: 1px solid var(--ab-line); border-radius: var(--cs-radius); background: var(--base-tint); }
.ab-edu__dates { margin: 0 0 3.2rem; color: var(--t-medium); font: normal 600 1.3rem/1 var(--_font-accent); }
.ab-edu__school { margin: 0; color: var(--t-bright); font: normal 600 2.8rem/1.1 var(--_font-default); letter-spacing: -0.06rem; }
.ab-edu__program { margin: 0.8rem 0 0; color: var(--t-medium); font: normal 400 1.5rem/1.5 var(--_font-default); }

/* Continuing education */
.ab-learn { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ab-line); }
.ab-learn__item { display: flex; gap: 1.6rem; align-items: baseline; padding: 1.8rem 0; border-bottom: 1px solid var(--ab-line); }
.ab-learn__dot { flex: 0 0 auto; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--ab-accent, #c7f36b); transform: translateY(-0.1rem); }
.ab-learn__title { margin: 0; color: var(--t-bright); font: normal 600 1.8rem/1.3 var(--_font-default); }
.ab-learn__meta { margin: 0.3rem 0 0; color: var(--t-medium); font: normal 400 1.4rem/1.5 var(--_font-default); }

/* Résumé CTA */
.ab-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 3rem; margin-top: 6rem; padding: 2.8rem; border: 1px solid var(--ab-line); border-radius: var(--cs-radius); }
.ab-resume__text { margin: 0; color: var(--t-bright); font: normal 500 1.8rem/1.45 var(--_font-default); }

@media (prefers-reduced-motion: reduce) {
  .ab-skill, .ab-skill__logo, .ab-bg__nav a, .ab-bg__nav a::after, .ab-proof a::after { transition: none; }
}
@media (forced-colors: active) { .ab-exp::before { background: CanvasText; } }

/* ------ Reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .ab-eyebrow__dot { animation: none; }
  .ab-help__item, .ab-portrait__frame img { transition: none; }
}