@charset "UTF-8";
/* ---------------------------------------------------------- */
/* ---------------------------------------------------------- */
/* Accent colours — the single source of truth for every component colour.
   Exposed as CSS custom properties in main.scss (:root); Rust components
   reference them as var(--accent-*) / var(--service-*) / var(--career-*)
   instead of hardcoding values. */
/* Green is unique again now that the sports section is cyan; the brighter
   green also matches the SVG's #22c55e accent and holds its own between the
   dark neighbouring cards (the crimson experiment vanished among them). */
/* Surfaces and lines on the dark ground */
/* Font sizes are written as raw rem values at the point of use
   (0.8rem / 1rem / 1.5rem / 2rem); there is no font-size token scale. */
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: -1;
}

.bordered {
  --border-width: 1px;
  border-radius: 1.5rem;
  position: relative;
  height: fit-content;
  width: fit-content;
}
.bordered .bordered-backdrop {
  pointer-events: none;
  position: absolute;
  inset: -12px;
  border-radius: calc(1.5rem + 12px);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 12px solid transparent;
  mask: linear-gradient(white) content-box, linear-gradient(white) padding-box;
  mask-composite: intersect;
}
.bordered .bordered-glow {
  pointer-events: none;
  inset: -2px;
  border-radius: calc(1.5rem + 2px);
  border: 2px solid white;
  position: absolute;
  filter: blur(5px);
  mask: linear-gradient(white) content-box, linear-gradient(white) padding-box;
  mask-composite: intersect;
}
.bordered .bordered-inner {
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  text-align: center;
  position: relative;
}
.bordered .bordered-inner::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--border-width) solid transparent;
  filter: blur(5px);
  background: linear-gradient(hsl(220, 10%, 60%), hsl(220, 10%, 45%)) border-box;
  mask: linear-gradient(white) border-box, linear-gradient(white) padding-box;
  mask-composite: subtract;
}

a {
  color: hsl(0, 0%, 80%);
  text-decoration: none;
}

ul {
  margin-left: 1rem;
}

img {
  transition: opacity 0.2s ease-in-out, scale 0.2s ease-in-out;
}
img:hover {
  opacity: 1;
  scale: 110%;
}

:focus-visible {
  outline: 2px solid hsl(0, 0%, 75%);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

* {
  margin: 0;
  padding: 0;
  position: relative;
}

.header {
  position: absolute;
  width: 100%;
  height: 5vh;
  z-index: 2;
  /* Folded in from the former components/header.scss so the menu keeps its
     exact rendering — that file duplicated this selector (audit 2026-09-18). */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 0.5rem;
}
.header .header-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}
.header .header-content .navbar-item {
  text-decoration: none;
  padding: 1rem;
}
.header .header-content .navbar-logo {
  position: absolute;
  display: block;
  left: 10px;
  height: 4rem;
  width: 10rem;
}

.timed-button {
  border-radius: 2000vmin;
  --border-width: 1px;
  position: relative;
  height: fit-content;
  width: fit-content;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.timed-button .timed-button-backdrop {
  position: absolute;
  inset: -12px;
  border-radius: 2000vmin;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 12px solid transparent;
  mask: linear-gradient(white) content-box, linear-gradient(white) padding-box;
  mask-composite: intersect;
}
.timed-button .timed-button-glow {
  inset: 0;
  border-radius: 2000vmin;
  position: absolute;
  filter: blur(10px);
  background-image: linear-gradient(transparent, 90%, hsl(0, 0%, 75%), hsl(0, 0%, 75%));
  mask: linear-gradient(white) content-box, linear-gradient(white) padding-box;
  mask-composite: intersect;
}
.timed-button .timed-button-inner {
  border-radius: 2000vmin;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  text-align: center;
  position: relative;
  padding: 1rem;
}
.timed-button .timed-button-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--border-width) solid transparent;
  filter: blur(2px);
  background: linear-gradient(hsl(0, 0%, 75%), 20%, hsl(220, 10%, 15%), hsl(220, 10%, 10%)) border-box;
  mask: linear-gradient(white) border-box, linear-gradient(white) padding-box;
  mask-composite: subtract;
}
.timed-button p {
  padding: 0rem 1rem;
  font-size: 1.5rem;
}
.timed-button:not(.timed-button-inactive):hover {
  transform: translateY(-2px);
  filter: brightness(1.35);
}

.timed-button-inactive {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.footer {
  width: 100%;
  margin-top: 4rem;
  background-color: hsl(220, 10%, 15%);
  display: grid;
  place-items: center;
  padding: 1.5rem 0;
}
.footer > div {
  max-width: 80rem;
  padding: 0 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  font-size: 0.8rem;
}
.footer > div .footer-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 8rem;
}
.footer > div .footer-item * {
  margin: 0;
  padding: 0;
}
.footer > div .footer-item .title {
  font-weight: bold;
}

.glassy-box {
  --border-width: 1px;
  backdrop-filter: blur(5px);
  background-color: var(--glass-colour);
  position: relative;
}
.glassy-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--border-width) solid transparent;
  filter: blur(5px);
  background: linear-gradient(hsl(220, 10%, 60%), hsl(0, 0%, 70%)) border-box;
  mask: linear-gradient(white) border-box, linear-gradient(white) padding-box;
  mask-composite: subtract;
}

.tags {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.tag {
  position: relative;
  border-radius: 1rem;
  border: 1px solid hsl(220, 10%, 45%);
  background: linear-gradient(90deg, hsl(220, 10%, 15%), hsl(220, 10%, 20%));
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Structural guarantee: a page's content `p` rules must never resize
     tag text (some callers wrap the label in a <p>). */
}
.tag p {
  font-size: inherit;
  margin: 0;
}
.tag.tag--coloured {
  background: color-mix(in srgb, var(--glow) 14%, transparent);
  border-color: color-mix(in srgb, var(--glow) 35%, transparent);
  /* Lightened toward white so the text passes WCAG AA on the dark background
     even for dark section colours; the hue identity stays. */
  color: color-mix(in srgb, var(--glow) 55%, white);
}

.career-step-list {
  display: flex;
  flex-direction: column;
}
.career-step-list .career-step-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.5rem 0;
}
.career-step-list .career-step {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0;
}
.career-step-list .career-step .career-step-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.career-step-list .career-step .career-step-header .career-step-name {
  font-weight: 600;
  color: hsl(0, 0%, 100%);
  font-size: 1rem;
}
.career-step-list .career-step .career-step-header .career-step-name a {
  color: inherit;
  text-decoration: none;
}
.career-step-list .career-step .career-step-header .career-step-name a:hover {
  text-decoration: underline;
}
.career-step-list .career-step .career-step-header .career-step-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2000vmin;
}
.career-step-list .career-step .career-step-desc {
  font-size: 0.8rem;
  color: hsl(0, 0%, 70%);
  margin: 0;
}
.career-step-list .career-step .career-step-achievement {
  font-size: 0.8rem;
  font-style: italic;
  color: hsl(140, 55%, 60%);
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.career-step-list .career-step .career-step-achievement::before {
  content: "↗";
  flex-shrink: 0;
}

/* RotationProgress (common): thin bar over auto-advancing content. The fill's CSS
   animation is the rotation clock (the component advances on `animationend`), so
   pausing it freezes both. Placement and `--rotation-progress-colour` are set per
   context by the owner (stylesheet or the component's `colour` prop). */
.rotation-progress {
  --rotation-progress-colour: hsl(0, 0%, 70%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(8rem, 50%);
  height: 2px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
}
.rotation-progress.is-hidden {
  opacity: 0;
}
.rotation-progress .rotation-progress-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2000vmin;
  background: hsl(from var(--rotation-progress-colour) h s l/0.2);
  transition: background-color 0.3s ease;
}
.rotation-progress .rotation-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--rotation-progress-colour);
  transition: background-color 0.3s ease;
  transform: scaleX(0);
  transform-origin: left center;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.rotation-progress .rotation-progress-fill.cycle-a {
  animation-name: rotation-progress-a;
}
.rotation-progress .rotation-progress-fill.cycle-b {
  animation-name: rotation-progress-b;
}
.rotation-progress .rotation-progress-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  color: var(--rotation-progress-colour);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rotation-progress .rotation-progress-pause svg {
  width: 0.8rem;
  height: 0.8rem;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
.rotation-progress.is-paused {
  /* Cut a gap in the bar so the glyph sits in it rather than on top of it. */
}
.rotation-progress.is-paused .rotation-progress-fill {
  animation-play-state: paused;
}
.rotation-progress.is-paused .rotation-progress-track {
  mask: linear-gradient(90deg, #000 calc(50% - 0.75rem), transparent calc(50% - 0.75rem), transparent calc(50% + 0.75rem), #000 calc(50% + 0.75rem));
}
.rotation-progress.is-paused .rotation-progress-pause {
  opacity: 1;
}

/* Two identical keyframes: switching between them restarts the fill. */
@keyframes rotation-progress-a {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes rotation-progress-b {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.aboutpage {
  width: 100%;
  padding: 6rem 0 3rem;
}
.aboutpage .aboutpage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.aboutpage .aboutpage-content h2 {
  font-size: clamp(2rem, 4vw + 1.25rem, 3rem);
  color: hsl(0, 0%, 70%);
  margin: 1rem;
  max-width: 45rem;
  text-align: center;
}
.aboutpage .aboutpage-content h2 span {
  color: hsl(0, 0%, 100%);
  font-weight: bold;
  font-style: italic;
}
.aboutpage .aboutpage-content .about-bio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3rem;
  max-width: 60rem;
  width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
}
.aboutpage .aboutpage-content .about-bio .about-bio-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aboutpage .aboutpage-content .about-bio .about-bio-text p {
  color: hsl(0, 0%, 70%);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  text-align: left;
}
.aboutpage .aboutpage-content .about-bio .about-bio-image {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.aboutpage .aboutpage-content .about-bio .about-bio-image img {
  width: 120%;
  height: 120%;
  object-fit: cover;
  margin: -10%;
}
.aboutpage .aboutpage-content .about-bio .about-bio-links {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.aboutpage .aboutpage-content .about-bio .about-bio-links .bio-link-icon {
  width: 24px;
  height: 24px;
  display: block;
  filter: invert(1);
}
@media (max-width: 40em) {
  .aboutpage .aboutpage-content .about-bio {
    flex-direction: column;
  }
  .aboutpage .aboutpage-content .about-bio .about-bio-image {
    width: 120px;
    height: 120px;
  }
  .aboutpage .aboutpage-content .about-bio .about-bio-links {
    flex-direction: row;
  }
}
.aboutpage .aboutpage-content .bio-expander {
  max-width: 60rem;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-heading {
  margin: 0;
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-heading button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: hsl(0, 0%, 90%);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  transition: color 0.2s;
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-heading button:hover {
  color: hsl(0, 0%, 100%);
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-heading .bio-expander-chevron {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .aboutpage .aboutpage-content .bio-expander .bio-expander-heading .bio-expander-chevron {
    transition: none;
  }
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .aboutpage .aboutpage-content .bio-expander .bio-expander-panel {
    transition: none;
  }
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-panel .bio-expander-clip {
  overflow: hidden;
  min-height: 0;
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-panel .bio-expander-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 2rem 1.5rem;
}
.aboutpage .aboutpage-content .bio-expander .bio-expander-panel .bio-expander-body p {
  color: hsl(0, 0%, 70%);
  line-height: 1.7;
  margin: 0;
  text-align: left;
}
.aboutpage .aboutpage-content .bio-expander.is-open .bio-expander-chevron {
  transform: rotate(180deg);
}
.aboutpage .aboutpage-content .bio-expander.is-open .bio-expander-panel {
  grid-template-rows: 1fr;
}
.aboutpage .aboutpage-content .career-section {
  max-width: 60rem;
  width: 100%;
}
.aboutpage .aboutpage-content .career-section .career-carousel {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  /* Progress bar (common RotationProgress) spanning the top
     padding band above the timeline (which starts at 1.5rem),
     inset to line up with the timeline's 1.5rem side padding. */
}
.aboutpage .aboutpage-content .career-section .career-carousel .rotation-progress {
  top: 0.75rem;
  --rotation-progress-colour: color-mix(in oklab, #EF9F27, black 15%);
  left: 1.5rem;
  right: 1.5rem;
  width: auto;
  transform: none;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.5rem 0;
  width: 100%;
  box-sizing: border-box;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-main {
  display: flex;
  flex-direction: row;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment:not(.timeline-gap) {
  min-width: 2.25rem;
}
@container (max-width: 4rem) {
  .aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-date {
    visibility: hidden;
  }
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 10px;
  background: hsl(0, 0%, 75%);
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-segment-bar {
  display: block;
  height: 1rem;
  width: 100%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  border-top: 2px solid hsl(0, 0%, 75%);
  padding: 0;
  transition: border-color 0.2s;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-segment-bar:hover {
  border-color: hsl(from hsla(210, 80%, 50%, 0.4) h s l/0.4);
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-segment-bar.is-active {
  border-top: 3px solid hsla(210, 80%, 50%, 0.4);
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-segment-bar.is-upcoming {
  border-top-style: dashed;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-segment .timeline-date {
  display: flex;
  flex-direction: column;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-style: italic;
  color: hsl(0, 0%, 70%);
  line-height: 1.3;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-gap {
  border-top: 2px dashed hsl(from hsl(0, 0%, 75%) h s l/0.3);
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip {
  position: relative;
  height: 1.5rem;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip .timeline-strip-bar {
  position: absolute;
  top: 0;
  height: 1.35rem;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border: none;
  cursor: pointer;
  border-radius: 2000vmin;
  font-size: 0.8rem;
  color: hsl(0, 0%, 90%);
  background: linear-gradient(90deg, hsl(from hsla(210, 80%, 50%, 0.4) h s l/0.5), hsl(from hsla(210, 80%, 50%, 0.4) h s l/0.25));
  transition: box-shadow 0.2s;
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip .timeline-strip-bar.is-ongoing {
  border-radius: 2000vmin 0 0 2000vmin;
  background: linear-gradient(90deg, hsl(from hsla(210, 80%, 50%, 0.4) h s l/0.5), hsl(from hsla(210, 80%, 50%, 0.4) h s l/0));
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip .timeline-strip-bar:hover, .aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip .timeline-strip-bar.is-active {
  box-shadow: 0 0 10px hsl(from hsla(210, 80%, 50%, 0.4) h s l/0.6);
  color: hsl(0, 0%, 100%);
}
.aboutpage .aboutpage-content .career-section .career-carousel .timeline .timeline-strip .timeline-strip-bar .timeline-strip-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides {
  display: grid;
  width: 100%;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide {
  grid-area: 1/1;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide {
    transition: none;
  }
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 1rem;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card {
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: 14rem;
  flex-shrink: 0;
  border-radius: 0.7rem 0 0 0.7rem;
  --glass-colour: hsla(210, 80%, 30%, 0.4);
  gap: 0.75rem;
  padding: 1.25rem;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .resume-card-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  font-size: 0.8rem;
  color: hsl(0, 0%, 90%);
  text-wrap: wrap;
  text-align: left;
  margin: 0;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .resume-card-row svg {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .company {
  font-weight: bold;
  font-size: 1rem;
  color: hsl(0, 0%, 100%);
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .description {
  font-style: italic;
  font-size: 0.8rem;
  color: hsl(0, 0%, 80%);
  align-items: flex-start;
  text-align: left;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .description svg {
  margin-top: 0.15em;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card .tags {
  margin-top: auto;
}
.aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-details {
  flex: 1;
  text-wrap: wrap;
  padding: 1.25rem;
  border-radius: 0 0.7rem 0.7rem 0;
  color: hsl(0, 0%, 70%);
  line-height: 1.7;
  --glass-colour: hsla(0, 0%, 10%, 0.6);
}
@media (max-width: 45em) {
  .aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item {
    flex-direction: column;
  }
  .aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-card {
    max-width: 100%;
    min-width: unset;
    border-radius: 0.7rem 0.7rem 0 0;
  }
  .aboutpage .aboutpage-content .career-section .career-carousel .carousel-slides .carousel-slide .resume-item .resume-details {
    border-radius: 0 0 0.7rem 0.7rem;
  }
}
.aboutpage .aboutpage-content .skillsection {
  width: 100%;
  max-width: 60rem;
  box-sizing: border-box;
}
.aboutpage .aboutpage-content .skillsection .group-label {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 40px 0 16px;
  align-items: center;
}
.aboutpage .aboutpage-content .skillsection .group-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.aboutpage .aboutpage-content .skillsection .group-label h3 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(220, 10%, 60%);
  font-weight: 600;
  margin: 0;
}
.aboutpage .aboutpage-content .skillsection .group-label .line {
  flex: 1;
  height: 1px;
  background: hsl(220, 10%, 15%);
}
.aboutpage .aboutpage-content .skillsection .grid {
  display: grid;
  /* minmax(0, 1fr) keeps the columns equal-width regardless of card
     content; plain 1fr lets wide content stretch its own column. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 62.5em) {
  .aboutpage .aboutpage-content .skillsection .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 35em) {
  .aboutpage .aboutpage-content .skillsection .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing {
  position: relative;
  overflow: hidden;
  /* .bordered defaults to width: fit-content — fill the grid
     column instead so all cards are equal. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  min-height: 7rem;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .blob {
  position: absolute;
  height: 50%;
  aspect-ratio: 0.7;
  border-radius: 50%;
  filter: blur(50px);
  top: -10%;
  right: -10%;
  opacity: 0.8;
  overflow: hidden;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content .icon-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 2rem;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content .icon-row .about-icon {
  width: 38px;
  height: 38px;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid hsl(220, 10%, 15%);
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content .icon-row .about-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--glow);
  fill: none;
  stroke-width: 1.7;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content h4 {
  font-size: 1rem;
  margin: 0 0 4px;
  margin-left: 2rem;
  margin-right: 2rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
  text-align: left;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content .detail {
  font-size: 0.8125rem;
  color: hsl(220, 10%, 60%);
  margin-left: 2rem;
  margin-right: 2rem;
  position: relative;
  z-index: 1;
  text-align: left;
}
.aboutpage .aboutpage-content .skillsection .grid .about-listing .about-listing-content .date {
  font-size: 0.75rem;
  /* $gray-500, not 600: at this size the darker grey
     measured 4.15:1 on the near-black ground — below
     the 4.5:1 AA bar for small text (and this class
     also styles ProjectCard link labels). */
  color: hsl(220, 10%, 60%);
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  text-align: left;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 1.5rem;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 4px;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card .about-listing {
  height: 100%;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card .about-listing .bordered-inner {
  height: 100%;
  box-sizing: border-box;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card .about-listing,
.aboutpage .aboutpage-content .skillsection .grid .project-card .blob {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card:hover .about-listing, .aboutpage .aboutpage-content .skillsection .grid .project-card:focus-visible .about-listing {
  transform: translateY(-3px);
}
.aboutpage .aboutpage-content .skillsection .grid .project-card:hover .blob, .aboutpage .aboutpage-content .skillsection .grid .project-card:focus-visible .blob {
  opacity: 1;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card .project-link-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.aboutpage .aboutpage-content .skillsection .grid .project-card .project-link-label .external-arrow {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  /* Same AA-safe section-colour mix as .tag--coloured, so the
     arrow reads as "this is a link" without failing contrast. */
  stroke: color-mix(in srgb, var(--glow) 55%, white);
  fill: none;
  stroke-width: 2;
}
@media (prefers-reduced-motion: reduce) {
  .aboutpage .aboutpage-content .skillsection .grid .project-card .about-listing,
  .aboutpage .aboutpage-content .skillsection .grid .project-card .blob {
    transition: none;
  }
}

.landingpage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
}
.landingpage .landingpage-background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}
.landingpage .landingpage-background .blob1 {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%);
  background-color: #881066;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 2000vmin;
  opacity: 0.5;
  mask: radial-gradient(circle at 50% -40%, transparent, 70%, rgba(255, 255, 255, 0.7333333333));
}
.landingpage .landingpage-background .blob2 {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  background-color: #0000ff;
  height: 20%;
  aspect-ratio: 2;
  border-radius: 2000vmin;
  opacity: 0.6;
  mask: radial-gradient(circle at 50% -40%, transparent, 70%, rgba(255, 255, 255, 0.7333333333));
}
.landingpage .landingpage-background .blob3 {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background-color: #40ccff;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 2000vmin;
  opacity: 0.5;
  mask: radial-gradient(circle at 50% 100%, transparent, 90%, rgba(255, 255, 255, 0.7333333333));
}
.landingpage .landingpage-background .blur {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(50px);
}
.landingpage .landingpage-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 6rem 1rem 1rem;
  /* The wrap is the pointer hitbox for pausing rotation — the parent column's
     align-items: center keeps it shrunk to the subline's own size. */
}
.landingpage .landingpage-content .tags {
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.landingpage .landingpage-content .buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.landingpage .landingpage-content h1 {
  font-size: clamp(2rem, 4vw + 1.25rem, 3rem);
  font-weight: bold;
  margin: 1rem;
  color: hsl(0, 0%, 100%);
  max-width: 45rem;
  text-align: center;
}
.landingpage .landingpage-content .hero-subline-wrap {
  /* Pull the subline against the headline it belongs to, countering
     the content column's 2rem gap. */
  margin: -1.5rem 1rem 0;
  /* Progress bar (common RotationProgress) in the gap between the
     headline and the subline. */
}
.landingpage .landingpage-content .hero-subline-wrap .rotation-progress {
  top: -0.7rem;
  --rotation-progress-colour: color-mix(in oklab, #881066, #0000ff);
}
.landingpage .landingpage-content .hero-subline-wrap .hero-subline {
  font-size: 1.25rem;
  color: hsl(0, 0%, 80%);
  max-width: 45rem;
  text-align: center;
  margin: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.landingpage .landingpage-content .hero-subline-wrap .hero-subline.fading {
  opacity: 0;
  transform: translateY(-15px);
}
.landingpage .scroll-hint {
  align-self: center;
  color: hsl(0, 0%, 100%);
  opacity: 0.5;
  font-size: 2rem;
  padding: 1.5rem 3rem;
  animation: scroll-bounce 1.8s ease-in-out infinite;
  cursor: pointer;
}
@keyframes scroll-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.9;
  }
}
.landingpage .trusted-by-row {
  width: 100%;
}
@media (max-width: 85em) {
  .landingpage .trusted-by-row {
    border-top: 1px solid hsl(220, 10%, 60%);
  }
}
.landingpage .trusted-by-row .border-box {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 5rem;
  --border-width: 1px;
}
.landingpage .trusted-by-row .border-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: var(--border-width) solid transparent;
  background: linear-gradient(90deg, hsl(220, 10%, 60%), hsl(0, 0%, 70%), hsl(220, 10%, 60%)) border-box;
  mask: linear-gradient(white) border-box, linear-gradient(white) padding-box;
  mask-composite: subtract;
}
.landingpage .trusted-by-row .border-box p {
  font-weight: bold;
  /* The label never breaks into "Trusted / by" beside the row. */
  white-space: nowrap;
  flex-shrink: 0;
}
.landingpage .trusted-by-row .border-box .trusted-by-items {
  display: flex;
  flex-direction: row;
  /* The row must survive any width/logo count: wrap instead of
     overflowing while waiting for the stacked-layout breakpoint. */
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.landingpage .trusted-by-row .border-box .trusted-by-items .trusted-by {
  text-decoration: none;
}
.landingpage .trusted-by-row .border-box .trusted-by-items .trusted-by .trusted-by-picture {
  height: 20px;
}
@media (max-width: 85em) {
  .landingpage .trusted-by-row .border-box {
    flex-direction: column;
    align-items: center;
    margin: 1rem 1.5rem 0;
    gap: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .landingpage .trusted-by-row .border-box::before {
    display: none;
  }
  .landingpage .trusted-by-row .border-box .trusted-by-items {
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: center;
  }
}

.productpage {
  width: 100%;
  padding: 6rem 0 3rem;
}
.productpage .productpage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
.productpage .productpage-content h2 {
  font-size: clamp(2rem, 4vw + 1.25rem, 3rem);
  color: hsl(0, 0%, 70%);
  margin: 1rem;
  max-width: 45rem;
  text-align: center;
}
.productpage .productpage-content h2 span {
  color: hsl(0, 0%, 100%);
  font-weight: bold;
  font-style: italic;
}
.productpage .productpage-content .product-listings {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 2rem;
}
.productpage .productpage-content .product-listings .product-listing {
  position: relative;
  max-width: 54rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
}
.productpage .productpage-content .product-listings .product-listing .blob {
  position: absolute;
  height: 120%;
  aspect-ratio: 0.7;
  border-radius: 50%;
  transform: rotate(40deg);
  filter: blur(50px);
  top: -10%;
  left: 50%;
  opacity: 0.5;
  overflow: hidden;
}
.productpage .productpage-content .product-listings .product-listing .product-listing-picture {
  /* Decorative layer: no hover zoom (defaults.scss img:hover),
     no pointer interception. */
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
}
.productpage .productpage-content .product-listings .product-listing .product-listing-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem;
  margin-top: 5rem;
}
.productpage .productpage-content .product-listings .product-listing .product-listing-content h3 {
  text-align: left;
  margin: 0;
  font-size: 1.5rem;
}
.productpage .productpage-content .product-listings .product-listing .product-listing-content > p {
  text-align: left;
  font-size: 1rem;
}

.reviewpage {
  width: 100%;
  padding: 6rem 0 3rem;
}
.reviewpage .reviewpage-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  /* State-driven carousel: the ReviewCarousel component (WASM) marks one
     slide `.is-active` and the previous one `.is-leaving`; the wipe and
     shimmer are single-run animations triggered by those class changes, so
     they start on the same frame. Hit-testing follows plain static rules on
     the active slide — no keyframe involvement. */
  /* No z-index: -1 here — with the global `* { position: relative }`, a
     negative z-index sinks the whole box below its transparent ancestors,
     which then intercept every pointer event (text selection included). */
}
.reviewpage .reviewpage-content h2 {
  font-size: clamp(2rem, 4vw + 1.25rem, 3rem);
  color: hsl(0, 0%, 70%);
  margin: 1rem;
  max-width: 45rem;
  text-align: center;
}
.reviewpage .reviewpage-content h2 span {
  color: hsl(0, 0%, 100%);
  font-weight: bold;
  font-style: italic;
}
.reviewpage .reviewpage-content .linkedin-recommendations-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(0, 0%, 70%);
  font-size: 0.8rem;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.reviewpage .reviewpage-content .linkedin-recommendations-link:hover {
  opacity: 1;
}
.reviewpage .reviewpage-content .linkedin-recommendations-link .linkedin-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  opacity: inherit;
}
.reviewpage .reviewpage-content .review-listings {
  position: relative;
  overflow: hidden;
  /* Progress bar (common RotationProgress) spanning the card's empty
     top band, inset to the content's 2rem margin; content starts at
     5rem. */
  /* The mask lives on the full-size listing (height: 100% of the slide),
     NOT on the inner content div: background/mask percentages resolve
     against the element's own box, so the mask and the shimmer overlay
     must share the same box or their 300% canvases move at different
     speeds. */
}
.reviewpage .reviewpage-content .review-listings .bordered-inner {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}
.reviewpage .reviewpage-content .review-listings .rotation-progress {
  top: 1.9rem;
  left: 2rem;
  right: 2rem;
  width: auto;
  transform: none;
}
.reviewpage .reviewpage-content .review-listings .review-slide {
  grid-area: 1/1/span 1/span 1;
  position: relative;
  /* Transparent stacked wrappers must never intercept pointer
     events; only the active slide's content does. */
  pointer-events: none;
}
.reviewpage .reviewpage-content .review-listings .review-slide.is-active .review-listing {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  animation: review-wipe-in 4.2s ease forwards;
}
.reviewpage .reviewpage-content .review-listings .review-slide.is-leaving .review-listing {
  visibility: visible;
  z-index: 0;
  animation: review-wipe-out 4.2s ease forwards;
}
.reviewpage .reviewpage-content .review-listings .review-listing {
  position: relative;
  max-width: 54rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  -webkit-mask-position: 100% 100%, 0% 0%;
  mask-position: 100% 100%, 0% 0%;
  -webkit-mask-size: 300% 300%, 300% 300%;
  mask-size: 300% 300%, 300% 300%;
  -webkit-mask-image: linear-gradient(135deg, black 40%, transparent 60%), linear-gradient(135deg, transparent 60%, black 40%);
  mask-image: linear-gradient(135deg, black 40%, transparent 60%), linear-gradient(135deg, transparent 60%, black 40%);
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-picture {
  /* Decorative layer: no hover zoom (defaults.scss img:hover),
     no pointer interception. */
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1;
  border-radius: inherit;
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem;
  margin-top: 5rem;
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content .blob {
  pointer-events: none;
  position: absolute;
  width: 80%;
  height: 60%;
  aspect-ratio: unset;
  border-radius: 30% 70% 60% 40%/50% 40% 60% 50%;
  transform: rotate(3deg);
  filter: blur(5px);
  top: 20%;
  left: 10%;
  opacity: 0.5;
  overflow: hidden;
  animation: blob-morph 12s ease-in-out infinite;
  background-image: radial-gradient(ellipse at 25% 25%, rgba(255, 255, 255, 0.45) 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content .review-listing-person {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  width: 100%;
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content .review-listing-person .tags {
  flex: 1;
  margin-top: 0;
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content .review-listing-person h3 {
  text-align: left;
  margin: 0;
  font-size: 1.5rem;
}
.reviewpage .reviewpage-content .review-listings .review-listing .review-listing-content > p {
  text-align: left;
  font-size: 1.5rem;
}

/* The shine is the same construction as the wipe itself: a 135deg gradient at
   300% size whose background-position runs 100% 100% → 0% 0% with the same
   duration and easing as the mask animation — so it is pixel-locked to the
   incoming card's edge (centred on it: band centre at the 50% stop) with clean
   corners at both rest positions. Restarted by the component alternating
   shine-a/shine-b on each advance. */
.shimmer-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  /* Band centred on the 60% stop — that's where the OUTGOING card's hard cut
     edge lives (its gradient's clamped stop), which is the edge the eye reads
     as "the transition". The incoming card's soft edge is centred at 50%. */
  background-image: linear-gradient(135deg, transparent 52%, rgba(255, 255, 255, 0.35) 60%, transparent 68%);
  background-size: 300% 300%;
  background-repeat: no-repeat;
  background-position: 0% 0%;
}

.shine-a,
.shine-b {
  opacity: 1;
}

.shine-a {
  animation: review-shine-a 4.2s ease forwards;
}

.shine-b {
  animation: review-shine-b 4.2s ease forwards;
}

@keyframes review-shine-a {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0% 0%;
  }
}
@keyframes review-shine-b {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0% 0%;
  }
}
/* Wipe-in reveals via the first mask layer (the second stays parked transparent);
   wipe-out starts with the second layer covering (so the handoff from the just
   -active state shows no pop) and sweeps it out. Both edges travel top-left →
   bottom-right like the original design. */
@keyframes review-wipe-in {
  from {
    -webkit-mask-position: 100% 100%, 0% 0%;
    mask-position: 100% 100%, 0% 0%;
  }
  to {
    -webkit-mask-position: 0% 0%, 0% 0%;
    mask-position: 0% 0%, 0% 0%;
  }
}
@keyframes review-wipe-out {
  from {
    -webkit-mask-position: 100% 100%, 100% 100%;
    mask-position: 100% 100%, 100% 100%;
  }
  to {
    -webkit-mask-position: 100% 100%, 0% 0%;
    mask-position: 100% 100%, 0% 0%;
  }
}
@keyframes blob-morph {
  0% {
    border-radius: 20% 80% 70% 30%/60% 30% 70% 40%;
  }
  25% {
    border-radius: 70% 30% 20% 80%/30% 70% 30% 70%;
  }
  50% {
    border-radius: 30% 70% 80% 20%/70% 20% 80% 30%;
  }
  75% {
    border-radius: 80% 20% 30% 70%/20% 80% 20% 80%;
  }
  100% {
    border-radius: 20% 80% 70% 30%/60% 30% 70% 40%;
  }
}
/* The accent tokens (palette.scss) exposed to component markup: Rust
   components pass var(--accent-*) etc. as colour props instead of literals. */
:root {
  --accent-orange: #EF9F27;
  --accent-gold: #e7c873;
  --accent-blue: #2563eb;
  --accent-cyan: hsl(190, 85%, 48%);
  --service-backend: #551099;
  --service-infra: #16a34a;
  --service-product: #881066;
  --service-embedded: #887011;
  --service-hardware: #609090;
  --career-company: hsl(210, 80%, 80%);
  --career-junior: hsl(140, 55%, 60%);
  --career-medior: hsl(210, 75%, 65%);
  --career-senior: hsl(270, 55%, 68%);
  --career-consulting: hsl(0, 0%, 75%);
}

html {
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  width: 4px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}

html::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.55);
}

body {
  width: 100%;
  font-size: 1rem;
  font-family: Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: hsl(0, 0%, 80%);
  overflow-x: hidden;
  gap: 5rem;
  background-color: black;
}

main {
  width: 100%;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1000;
  padding: 1rem 1.5rem;
  background: white;
  color: black;
  font-weight: bold;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}