/* ==========================================================
   Lawrence Neke | Portfolio
   Palette: black, grey, lime.
   Lime is used the way hi-vis vinyl is used on signage: in solid
   blocks and marks, never as a soft glow. Condensed heavy type
   comes from road and industrial signage.

   Contents
   1. Tokens and base       8. Process
   2. Header and nav        9. Experience, highlights
   3. Buttons              10. Skills
   4. Hero                 11. Contact
   5. Sections             12. Footer
   6. About                13. Project modal
   7. Work                 14. Motion (gated) and reduced motion
   ========================================================== */

/* ---------- 1. Tokens and base ---------- */

:root {
  color-scheme: dark;

  --black: #000000;
  --surface: #131313;
  --surface-2: #1C1C1C;
  --line: #2B2B2B;
  --grey: #9A9A9A;
  --text: #D2D2D2;
  --white: #F5F5F5;
  --lime: #C6F432;
  --lime-hover: #DBFF5C;

  /* Diagonal hatching: the empty state for any missing cover */
  --hatch: repeating-linear-gradient(135deg, transparent 0 9px, rgba(245, 245, 245, 0.045) 9px 10px);

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 2px;
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Condensed display type. The fallbacks are narrow faces, so if the web
     font is slow or blocked the hero name still fits instead of clipping. */
  --display: "Archivo", "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium Cond", "Helvetica Neue", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
  background: var(--black);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}



[hidden] { display: none !important; }

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--white); }
main:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -64px;
  z-index: 100;
  background: var(--lime);
  color: var(--black);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--radius);
  transition: top 0.15s;
}
.skip:focus { top: 12px; }

/* ---------- 2. Header and nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video fills the container nicely without distorting */
  display: block;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: var(--lime);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: var(--radius);
  transition: transform 0.2s var(--ease);
}
.brand:hover .brand-mark { transform: scale(1.06); }
.brand-name {
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s, box-shadow 0.15s;
}
.nav a:hover {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--white);
}
.nav a[aria-current="true"] {
  color: var(--lime);
  box-shadow: inset 0 -2px 0 var(--lime);
}
.nav .nav-cta {
  background: var(--lime);
  color: var(--black);
  border: 1.5px solid var(--lime);
  padding: 8px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}
.nav .nav-cta:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
  box-shadow: none;
}

.menu-btn {
  display: none;
  align-items: center;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  background: none;
  color: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.menu-btn:hover { border-color: var(--lime); color: var(--lime); }
.menu-btn[aria-expanded="true"] { background: var(--lime); border-color: var(--lime); color: var(--black); }

@media (max-width: 860px) {
  .menu-btn { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--line);
    padding: 4px var(--pad) 22px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav a:hover,
  .nav a[aria-current="true"] { box-shadow: none; }
  .nav .nav-cta {
    margin-top: 18px;
    text-align: center;
    padding: 15px;
  }
}

/* ---------- 3. Buttons ----------
   One system: a hi-vis block wipes across on hover, like vinyl
   being laid onto a panel. Colours come from custom properties so
   the lime contact block only has to override tokens. */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: var(--white);
  --btn-fill: var(--lime);
  --btn-fg-hover: var(--black);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background:
    linear-gradient(var(--btn-fill), var(--btn-fill)) no-repeat 0 0 / 0% 100%,
    var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: background-size 0.3s var(--ease), color 0.2s, border-color 0.2s;
}
.btn:hover {
  background-size: 100% 100%, auto;
  color: var(--btn-fg-hover);
  border-color: var(--btn-fill);
}
.btn:active { transform: translateY(1px); }

.btn.primary {
  --btn-bg: var(--lime);
  --btn-fg: var(--black);
  --btn-bd: var(--lime);
  --btn-fill: var(--white);
  --btn-fg-hover: var(--black);
}

/* ---------- 4. Hero ---------- */

.hero {
  padding-block: clamp(36px, 5.5vw, 72px) clamp(44px, 6vw, 80px);
  
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 44px clamp(32px, 6vw, 88px);
  align-items: center;
}

.name {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 11.5vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
}
.name .ln {
  display: block;
  overflow: hidden;
  padding-block: 0.02em;
}
.name .ln > span { display: block; }

.role {
  display: inline-block;
  background: var(--lime);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 87%;
  font-weight: 800;
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  line-height: 1.2;
  padding: 9px 16px;
  margin-top: 24px;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  max-width: 32em;
  margin-top: 24px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Portrait: crop marks sit outside the frame, so the frame (not the
   wrapper) does the clipping. */
.portrait {
  position: relative;
  margin: 10px;
}
.portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--hatch), var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.mark {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 0 solid var(--lime);
  pointer-events: none;
  z-index: 2;
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
.mark.tl { top: -10px;    left: -10px;  border-top-width: 4px;    border-left-width: 4px; }
.mark.tr { top: -10px;    right: -10px; border-top-width: 4px;    border-right-width: 4px; }
.mark.bl { bottom: -10px; left: -10px;  border-bottom-width: 4px; border-left-width: 4px; }
.mark.br { bottom: -10px; right: -10px; border-bottom-width: 4px; border-right-width: 4px; }

@media (hover: hover) {
  .portrait:hover .portrait-frame { border-color: var(--lime); }
  .portrait:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.05); }
  .portrait:hover .mark { width: 42px; height: 42px; }
}

.proj-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.3rem;
  padding: 0.18em 0.5em;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  background: #111;
  border-radius: 999px;
}

/* Empty state: a solid hi-vis plate with the monogram */
.portrait.noimg .portrait-frame {
  display: grid;
  place-items: center;
  background: var(--lime);
  border-color: var(--lime);
}
.portrait.noimg .portrait-frame::after {
  content: "LN";
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  color: var(--black);
}

.facts {
  margin-top: 24px;
  margin-inline: 10px;
  border-bottom: 1px solid var(--line);
}
.facts > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.facts dt { color: var(--grey); font-size: 0.92rem; }
.facts dd { color: var(--white); font-weight: 600; line-height: 1.35; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(44px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border-left: 1px solid var(--line);
}
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats li::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px;
  width: 36px; height: 4px;
  background: var(--lime);
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.stats li:first-child::before { left: 0; }
.stat-n {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  line-height: 1;
  color: var(--white);
}
.stat-l {
  margin-top: 10px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}
.stat-s {
  margin-top: 2px;
  color: var(--grey);
  font-size: 0.92rem;
  line-height: 1.4;
  max-width: 16em;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .name { font-size: clamp(3.5rem, 19vw, 8rem); }
  .hero-side { max-width: 420px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(3)::before { left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .actions .btn { flex: 1 1 100%; }
}

/* ---------- 5. Sections ---------- */

.section { padding-block: clamp(56px, 7.5vw, 104px); }
.section.alt { background: var(--surface); }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 16px clamp(24px, 5vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 4.5vw, 48px);
}
.sec-head h2,
.contact-info h2 {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 6.5vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
}
.sec-head h2::before,
.contact-info h2::before {
  content: "";
  display: block;
  width: 56px; height: 6px;
  background: var(--lime);
  margin-bottom: 20px;
  transform-origin: left center;
  transition: transform 0.6s var(--ease);
}
.sec-head p {
  color: var(--grey);
  max-width: 36em;
  font-size: 1.05rem;
}

@media (max-width: 760px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 6. About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 6vw, 96px);
  align-items: start;
}
.about-copy p {
  max-width: 36em;
  font-size: 1.1rem;
  line-height: 1.65;
}
.about-copy p + p { margin-top: 1.1em; }

.studio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.studio-links .btn { font-size: 0.95rem; padding: 10px 20px; }

.capabilities { border-bottom: 1px solid var(--line); }
.capabilities > div {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.capabilities dt {
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}
.capabilities dd {
  color: var(--grey);
  margin-top: 6px;
  font-size: 0.98rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .about { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 7. Work ---------- */

/* Sticky so the filters stay reachable while scrolling a long grid */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin: 0 calc(var(--pad) * -1) clamp(24px, 3.5vw, 36px);
  padding: 12px var(--pad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover {
  border-color: var(--lime);
  color: var(--white);
}
.chip .count {
  min-width: 1.9em;
  padding: 2px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--surface-2);
  color: var(--grey);
  transition: background 0.15s, color 0.15s;
}
.chip[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--black);
}
.chip[aria-pressed="true"] .count {
  background: var(--black);
  color: var(--lime);
}
.chip:not([aria-pressed="true"]):hover .count { color: var(--white); }

.filter-status {
  color: var(--grey);
  font-size: 0.92rem;
  white-space: nowrap;
}

@media (max-width: 719px) {
  /* Single scrolling row keeps the sticky bar short */
  .filter-bar { padding-block: 8px; }
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: -4px;
    padding: 4px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  /* Still announced to screen readers; the chip counts cover sighted users */
  .filter-status {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 24px;
}
.proj { scroll-margin-top: 150px; }

.proj-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.proj-btn:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 6px;
}

.proj figure {
  position: relative;
  aspect-ratio: 404 / 316;
  overflow: hidden;
  background: var(--hatch), var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color 0.2s;
}
.proj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease, transform 0.55s var(--ease);
}
.proj figure.is-loading img { opacity: 0; }

/* "View" tag: a lime block unmasked from the left on hover/focus */
.proj-btn::after {
  content: "View";
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  padding: 9px 13px;
  background: var(--lime);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 87%;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.25s var(--ease);
  pointer-events: none;
}
.proj-btn:focus-visible::after { clip-path: inset(0); }
.proj-btn:focus-visible figure { border-color: var(--lime); }
.proj-btn:focus-visible .proj-title { color: var(--lime); }

@media (hover: hover) {
  .proj-btn:hover::after { clip-path: inset(0); }
  .proj-btn:hover figure { border-color: var(--lime); }
  .proj-btn:hover img { transform: scale(1.04); }
  .proj-btn:hover .proj-title { color: var(--lime); }
}

.proj-title {
  display: block;
  margin-top: 14px;
  color: var(--white);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  transition: color 0.15s;
}
.proj-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--grey);
}
.proj-cat::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  background: var(--lime);
}

/* Empty state for a cover that could not load: hatching, a faint
   monogram and the title on a solid lime plate. */
.noimg-plate {
  position: absolute;
  left: 0; bottom: 0;
  max-width: 92%;
  padding: 10px 14px;
  background: var(--lime);
  color: var(--black);
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.proj figure.noimg::before,
.modal-media.noimg::before {
  content: "LN";
  position: absolute;
  top: 6px; right: 14px;
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 6.5rem;
  line-height: 1;
  color: rgba(245, 245, 245, 0.06);
  pointer-events: none;
}

.work-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 36px);
  border-top: 1px solid var(--line);
}

@media (max-width: 960px) {
  .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .proj-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-foot .btn { flex: 1 1 100%; }
}

/* ---------- 8. Process ---------- */

.process {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}

.steps { border-bottom: 1px solid var(--line); }
.step {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  line-height: 1.2;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 20px 18px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.step:hover { color: var(--white); background: var(--surface-2); }
.step[aria-selected="true"] { background: var(--lime); color: var(--black); }
/* Inset rings: the tabs sit flush, and lime on lime would vanish */
.step:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.step[aria-selected="true"]:focus-visible { outline-color: var(--black); }
.step .n {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  font-size: 1.5em;
  min-width: 0.9em;
  line-height: 1;
}

.panels h3 {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 0.98;
  margin-bottom: 16px;
}
.panels [role="tabpanel"] p {
  font-size: 1.1rem;
  max-width: 34em;
  line-height: 1.65;
}

.track { margin-top: 40px; }
.track-bar {
  height: 8px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.track-fill {
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}
.track-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--grey);
}

@media (max-width: 860px) {
  .process { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9. Experience, highlights ---------- */

.exp { border-bottom: 1px solid var(--line); }
.exp li {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: 8px clamp(20px, 4vw, 48px);
  padding: 26px 14px;
  border-top: 1px solid var(--line);
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow 0.25s var(--ease);
}
/* Set by script.js for the row nearest the middle of the screen */
.exp li.is-focus { box-shadow: inset 3px 0 0 var(--lime); }

.exp .when {
  color: var(--grey);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}
.exp .when.is-current {
  justify-self: start;
  align-self: start;
  background: var(--lime);
  color: var(--black);
  padding: 2px 8px;
}
.exp h3 {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
}
.exp-role p {
  color: var(--grey);
  margin-top: 4px;
  font-size: 0.95rem;
}
.exp .desc {
  max-width: 38em;
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .exp li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .exp .when { margin-bottom: 2px; }
}

.highlights-block {
  margin-top: clamp(48px, 7vw, 88px);
  padding-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--line);
}

.sub {
  font-family: var(--display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
  margin: 0 0 22px;
}
.highlights-block .results + .sub { margin-top: clamp(36px, 5vw, 52px); }

.results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 4vw, 40px);
}
.results li {
  border-top: 4px solid var(--lime);
  padding-top: 16px;
  color: var(--grey);
  font-size: 0.98rem;
  line-height: 1.5;
}
.results strong {
  display: block;
  color: var(--white);
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.partners a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.partners a:hover {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--black);
}

@media (max-width: 860px) {
  .results { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 10. Skills ---------- */

.skill-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px clamp(24px, 4vw, 56px);
  margin-bottom: clamp(44px, 6vw, 72px);
}
.skill-groups h3 {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--white);
  margin-bottom: 4px;
}
.skill-groups li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.skill-groups li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 8px;
  height: 8px;
  background: var(--lime);
}

@media (max-width: 860px) {
  .skill-groups { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------- 11. Contact ---------- */

.contact-section { padding-top: 0; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 44px clamp(32px, 6vw, 96px);
  background: var(--lime);
  color: var(--black);
  padding: clamp(24px, 5vw, 72px);
}
.contact :focus-visible { outline-color: var(--black); }
.contact h2 { color: var(--black); }
.contact-info h2::before { background: var(--black); }
.contact-info > p {
  margin-top: 18px;
  max-width: 30em;
  font-size: 1.1rem;
  line-height: 1.55;
}

.details { margin-top: 30px; }
.details li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(10, 10, 10, 0.25);
  font-weight: 600;
}
.details li:last-child { border-bottom: 1px solid rgba(10, 10, 10, 0.25); }
.details li > span:first-child {
  font-weight: 500;
  font-size: 0.95rem;
  opacity: 0.7;
}
.details a { overflow-wrap: anywhere; }
.details a,
.social a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.details a:hover,
.social a:hover { text-decoration-thickness: 3px; }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 26px;
  font-weight: 600;
}

.field + .field { margin-top: 20px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.field input,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--white);
  background: var(--black);
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus,
.field textarea:focus { border-color: var(--white); }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}
.field textarea { resize: vertical; min-height: 140px; }
.field [aria-invalid="true"] { box-shadow: 0 0 0 3px var(--white); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.contact .btn {
  --btn-fg: var(--black);
  --btn-bd: var(--black);
  --btn-fill: var(--black);
  --btn-fg-hover: var(--lime);
}
.contact .btn.primary {
  --btn-bg: var(--black);
  --btn-fg: var(--lime);
  --btn-bd: var(--black);
  --btn-fill: var(--white);
  --btn-fg-hover: var(--black);
}
.form-hint {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.8;
}
.form-note {
  margin-top: 10px;
  min-height: 1.6em;
  font-size: 0.98rem;
  font-weight: 700;
}
/* Errors read as a black signage plate on the lime block */
.form-note[data-state="error"] {
  display: inline-block;
  padding: 8px 12px;
  background: var(--black);
  color: var(--lime);
}

@media (max-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .form-actions .btn { flex: 1 1 100%; }
  .details li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- 12. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 28px 44px;
  font-size: 0.95rem;
  color: var(--grey);
}
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
.foot a {
  color: var(--white);
  font-weight: 600;
  text-underline-offset: 4px;
}
.foot a:hover { color: var(--lime); }

/* ---------- 13. Project modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.modal:not([hidden]) { display: grid; }
.modal.is-open { opacity: 1; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(980px, 100%);
  max-height: 90vh;
  max-height: min(90dvh, 860px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(18px);
  transition: transform 0.3s var(--ease);
}
.modal.is-open .modal-panel { transform: none; }
.modal-panel:focus { outline: none; }
/* Hi-vis strip across the top edge */
.modal-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--lime);
  z-index: 3;
  transform-origin: left center;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--white);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal-close:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--black);
}

.modal-scroll {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  width: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.modal-media {
  position: relative;
  min-height: 340px;
  background: var(--hatch), var(--surface-2);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.modal-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.modal-media.is-loading img { opacity: 0; }
.modal-media .noimg-plate { font-size: clamp(1.2rem, 2.6vw, 1.7rem); padding: 12px 16px; }

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 4vw, 44px);
  padding-top: clamp(40px, 5vw, 56px);
}
.modal-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  font-weight: 700;
  font-size: 0.95rem;
}
.modal-cat::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--lime);
}
.modal-body h3 {
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.02;
  padding-right: 44px;
}
.modal-desc {
  flex: 1;
  font-size: 1.05rem;
  line-height: 1.6;
}
.modal-body > .btn { align-self: flex-start; margin-top: 6px; }

.modal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.modal-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  background: none;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.modal-step:hover { border-color: var(--lime); color: var(--lime); }
.modal-count {
  color: var(--grey);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  /* Bottom sheet */
  .modal { padding: 0; place-items: end stretch; }
  .modal-panel {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-inline: 0;
    border-bottom: 0;
    transform: translateY(40px);
  }
  .modal-scroll { grid-template-columns: minmax(0, 1fr); }
  .modal-media {
    min-height: 0;
    aspect-ratio: 404 / 316;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .modal-close { background: var(--black); }
  .modal-body { padding: 24px var(--pad) 28px; }
  .modal-body h3 { padding-right: 0; }
  .modal-body > .btn { align-self: stretch; }
}

/* Scroll lock. --sbw (set by script.js) stops the page shifting sideways
   when the scrollbar disappears. */
body.modal-open {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

/* ---------- 14. Motion ----------
   Everything below only applies when html has the .motion class
   (set in <head>, and only when the visitor has not asked for reduced
   motion). Without it, every element simply sits in its final state. */

@keyframes rise    { from { transform: translateY(105%); } }
@keyframes wipe    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes bar     { from { transform: scaleX(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes drop    { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: no-preference) {
  /* The one orchestrated moment: name, role plate, portrait */
  .name .ln > span { animation: rise 0.9s var(--ease) both; }
  .name .ln:nth-child(2) > span { animation-delay: 0.12s; }
  .role { animation: wipe 0.6s 0.35s var(--ease) both; }
  .portrait-frame { animation: wipe-up 0.8s 0.2s var(--ease) both; }

  .nav[data-open="true"] { animation: drop 0.22s var(--ease); }

  .panel-in { animation: fade-up 0.35s var(--ease) both; }

  .modal.is-open .modal-panel::before { animation: bar 0.5s 0.1s var(--ease) both; }
  .modal-panel.is-swap .modal-media { animation: wipe 0.4s var(--ease) both; }
  .modal-panel.is-swap .modal-body > *:not(.modal-nav) { animation: fade-up 0.3s var(--ease) both; }
}

/* Lime bars draw in the first time they scroll into view */
html.motion .sec-head:not(.is-in) h2::before,
html.motion .stats:not(.is-in) li::before { transform: scaleX(0); }
html.motion .stats li:nth-child(2)::before { transition-delay: 0.08s; }
html.motion .stats li:nth-child(3)::before { transition-delay: 0.16s; }
html.motion .stats li:nth-child(4)::before { transition-delay: 0.24s; }

/* Project covers are unmasked left to right, staggered by column.
   Replayed when a filter is applied. */
html.motion .proj:not(.is-in) figure { clip-path: inset(0 100% 0 0); }
html.motion .proj.is-in figure {
  animation: wipe 0.7s var(--ease) both;
  animation-delay: calc(var(--col, 0) * 80ms);
}

/* Reduced motion: belt and braces for anything the flag above missed */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}