/* ==========================================================================
   Youssef Ramchi — portfolio
   Built from the Figma mockup (1920px artboard). `--u` is one artboard pixel,
   so `calc(112 * var(--u))` reads as "112px in the mockup".
   ========================================================================== */

:root {
  --v: min(calc(100vw / 1920), 1.3334px); /* always viewport-driven */
  --u: var(--v);

  --bg: #e6e6e6;
  --ink: #1e1e1e;
  --lime: #d4f534;
  --wa: #44f534;

  --font: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: #000;
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul, figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
}

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
}

.btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  white-space: nowrap;
}

.btn__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition: transform 0.5s var(--ease);
}

.btn__icon img {
  transition: transform 0.5s var(--ease);
}

.btn:hover .btn__icon {
  transform: translateX(calc(6 * var(--u)));
}

.btn--dark .btn__label {
  height: calc(52 * var(--u));
  padding: 0 calc(24 * var(--u));
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: calc(18 * var(--u));
  letter-spacing: -0.02em;
}

.btn--dark .btn__icon,
.btn--dark .btn__icon img {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
}

.btn--dark:hover .btn__icon img {
  transform: rotate(-45deg);
}

.btn--lime .btn__label {
  width: calc(141 * var(--u));
  height: calc(66 * var(--u));
  background: var(--lime);
  color: #010101;
  font-weight: 500;
  font-size: calc(20 * var(--u));
  letter-spacing: -0.02em;
}

.btn--lime .btn__icon {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  background: var(--lime);
}

.btn--lime .btn__icon img {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

.btn--lime:hover .btn__icon img {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Fixed UI: cursor, WhatsApp tab, floating button
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1px solid #fff;
  border-radius: 9999px;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

.wa-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: calc(71 * var(--u));
  height: calc(225 * var(--u));
  padding: calc(18 * var(--u)) 0;
  background: var(--wa);
  color: rgba(0, 0, 0, 0.8);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: 1;
  transform: translateY(-50%);
  transition: width 0.4s var(--ease), opacity 0.4s, visibility 0.4s;
}

/* both floating controls step aside once the footer (which repeats them) is on screen */
.is-footer .wa-tab,
.is-footer .fab {
  visibility: hidden;
  opacity: 0;
}

.wa-tab:hover {
  width: calc(83 * var(--u));
}

.wa-tab img {
  width: calc(31 * var(--u));
  height: calc(31 * var(--u));
}

.wa-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.fab {
  position: fixed;
  right: calc(48 * var(--u));
  bottom: calc(83 * var(--u));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 9999px;
  background: #c4c4c4;
  transition: transform 0.5s var(--ease), opacity 0.4s, visibility 0.4s;
}

.fab:hover {
  transform: rotate(90deg) scale(1.06);
}

.fab img {
  width: calc(16 * var(--u));
  height: calc(28 * var(--u));
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(47 * var(--u)) calc(48 * var(--u)) 0;
}

.nav__logo img {
  width: calc(65.3 * var(--u));
  height: calc(64 * var(--u));
}

.nav__right {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  margin-top: calc(7 * var(--u));
}

.nav__links {
  display: flex;
  align-items: center;
  gap: calc(23 * var(--u));
  color: rgba(0, 0, 0, 0.8);
  font-size: max(14px, calc(22 * var(--u)));
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.nav__links a,
.footer__col a {
  position: relative;
}

.nav__links a::after,
.footer__col a::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.3em;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav__links a:hover::after,
.footer__col a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: calc(700 * var(--u));
  padding-bottom: calc(45 * var(--u));
  overflow: clip;
}

.hero__portrait {
  position: absolute;
  top: -8.3%;
  left: 50%;
  height: 100.2%;
  aspect-ratio: 1142 / 914;
  transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 86.9%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 86.9%, transparent 100%);
  pointer-events: none;
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}

.hero__title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--u));
  font-weight: 400;
  font-size: calc(112 * var(--u));
  line-height: 0.8;
  text-align: center;
  white-space: nowrap;
}

/* overflow mask for the line reveal, padded so descenders are not clipped */
.line {
  display: block;
  margin: -0.16em 0;
  padding: 0.16em 0.04em;
  overflow: hidden;
}

.line > span {
  display: block;
}

.hero__rail {
  position: absolute;
  top: 29.5%;
  left: calc(77.5 * var(--u));
  width: 1px;
  height: 36.4%;
  background: #374151;
}

.hero__rail::before,
.hero__rail::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #000;
  transform: translateX(-50%);
}

.hero__rail::before {
  top: 0;
}

.hero__rail::after {
  bottom: 0;
}

.hero__socials {
  position: absolute;
  top: 74.1%;
  left: calc(62 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(31 * var(--u));
  width: calc(32 * var(--u));
}

.hero__socials a {
  display: block;
  transition: transform 0.4s var(--ease);
}

.hero__socials a:hover {
  transform: scale(1.15);
}

.hero__socials img {
  width: auto;
  height: calc(29.5 * var(--u));
}

.hero__scroll {
  position: absolute;
  bottom: calc(28 * var(--u));
  left: 50%;
  font-size: calc(28 * var(--u));
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Dark block (about, certificate, experience) with curved edges
   -------------------------------------------------------------------------- */

.dark,
.footer {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
}

.dark {
  z-index: 2;
  --rise: 0;
}

.footer {
  z-index: 2;
  margin-top: calc(60 * var(--v));
  --rise: 0;
}

/* Curve pseudoelements — gentle, organic arc matching the benchmark */
.dark::before {
  content: '';
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 150vw;
  height: calc(var(--rise) * 7.85vw);
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
  top: calc(var(--rise) * -1vw);
}

.footer::before {
  content: '';
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 150vw;
  height: calc(var(--rise) * 7.85vw);
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
  top: calc(var(--rise) * -1vw);
}

.dark::after {
  content: '';
  position: absolute;
  left: 50%;
  z-index: -1;
  width: 150vw;
  height: calc(52 * var(--v));
  border-radius: 50%;
  background: var(--ink);
  transform: translateX(-50%);
  pointer-events: none;
  bottom: calc(-26 * var(--v));
}

/* About */

.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(88 * var(--u));
  width: calc(1378 * var(--u));
  max-width: 100%;
  margin: 0 auto;
  padding-top: calc(220 * var(--u));
  text-align: center;
}

.about__lead {
  font-size: calc(64 * var(--u));
  line-height: 1.25;
}

.about__sub {
  width: calc(1332 * var(--u));
  max-width: 100%;
  font-size: calc(38 * var(--u));
  line-height: calc(50 / 38);
}

/* Certificate */

.cert {
  padding-top: calc(227 * var(--u));
}

.cert__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--u));
  padding-bottom: calc(16 * var(--u));
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-size: max(13px, calc(20 * var(--u)));
  line-height: calc(17 * var(--u));
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.cert__label img {
  width: calc(14.1 * var(--u));
  height: calc(15.5 * var(--u));
}

.cert__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(1520 * var(--u));
  height: calc(929 * var(--u));
  margin: calc(126 * var(--u)) auto 0;
  overflow: hidden;
  border-radius: calc(40 * var(--u));
  background: #fff;
}

.cert__card img {
  flex: none;
  width: calc(1222 * var(--u));
  height: calc(945 * var(--u));
  object-fit: cover;
}

/* Experience timeline */

.xp {
  position: relative;
  margin-top: calc(125 * var(--u));
  padding: calc(75 * var(--u)) 0 calc(225 * var(--u));
}

.xp__line {
  position: absolute;
  top: 0;
  bottom: calc(-64 * var(--u));
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.xp__title {
  position: relative;
  color: rgba(255, 255, 255, 0.16);
  font-weight: 700;
  font-size: calc(40 * var(--u));
  line-height: 1.4;
  text-align: center;
}

.xp__rows {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  row-gap: calc(260 * var(--u));
  width: calc(1538 * var(--u));
  margin: calc(93 * var(--u)) auto 0;
}

.xp__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: calc(323 * var(--u));
}

.xp__body {
  position: relative;
  z-index: 4;
  width: calc(664 * var(--u));
}

.xp__row--left .xp__body {
  grid-column: 1;
  justify-self: start;
  text-align: right;
}

.xp__row--right .xp__body {
  grid-column: 2;
  justify-self: end;
  text-align: left;
}

.xp__body h3 {
  font-weight: 500;
  font-size: calc(80 * var(--u));
  line-height: 1.12;
}

.xp__role {
  margin-top: calc(34 * var(--u));
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  font-size: calc(47 * var(--u));
  line-height: calc(39 / 47);
}

.xp__desc {
  margin-top: calc(32 * var(--u));
  color: rgba(255, 255, 255, 0.72);
  font-size: max(14px, calc(24 * var(--u)));
  line-height: calc(32 / 24);
}

.xp__date {
  margin-top: calc(32 * var(--u));
  color: rgba(255, 255, 255, 0.4);
  font-size: max(13px, calc(22 * var(--u)));
  line-height: calc(32 / 22);
}

.xp__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: max(8px, calc(12 * var(--u)));
  height: max(8px, calc(12 * var(--u)));
  border: 1px solid #e6e6e6;
  border-radius: 9999px;
  background: #b8b8b8;
  transform: translate(-50%, -50%);
  transition: background-color 0.4s, border-color 0.4s;
}

.xp__dot.is-active {
  border-color: rgba(230, 230, 230, 0.34);
  background: #000;
}

/* the green line: drawn on scroll (see main.js). Top/height are set in JS so it
   runs exactly from the first dot to the last one. */
.xp__curve {
  position: absolute;
  top: 0;
  left: calc(50% + 13.25 * var(--u));
  z-index: 1;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.xp__curve svg {
  width: auto;
  height: 100%;
  overflow: visible;
}

.xp__glow {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 2px;
  /* resting length from the mockup; main.js takes over `height` as a progress bar */
  height: calc(364 * var(--u));
  margin-left: -1px;
  border-radius: 20px;
  background: var(--lime);
  pointer-events: none;
}

.xp__glow::before {
  content: '';
  position: absolute;
  inset: 0 -1px;
  border-radius: 20px;
  background: var(--lime);
  filter: blur(4.5px);
}

/* --------------------------------------------------------------------------
   Selected work
   -------------------------------------------------------------------------- */

.works {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(305 * var(--u));
}

.works__head {
  text-align: center;
}

.works__head h2 {
  font-weight: 400;
  font-size: calc(80 * var(--u));
  line-height: 1.12;
}

.works__head p {
  width: calc(886 * var(--u));
  max-width: 100%;
  margin: calc(16 * var(--u)) auto 0;
  color: rgba(0, 0, 0, 0.62);
  font-size: max(15px, calc(28 * var(--u)));
  line-height: calc(40 / 28);
}

.works__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(48 * var(--u)) calc(32 * var(--u));
  width: 100%;
  margin-top: calc(80 * var(--u));
  padding: 0 calc(100 * var(--u));
}

.work figcaption {
  margin-bottom: calc(16 * var(--u));
  color: rgba(0, 0, 0, 0.4);
  font-size: max(13px, calc(22 * var(--u)));
  line-height: calc(24 / 22);
}

.work--link {
  display: block;
  cursor: pointer;
}

.work--link figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.3s ease;
}

.work--link:hover figcaption {
  color: #000;
}

.work__tag {
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 500;
  color: #000;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.work--link:hover .work__tag {
  opacity: 1;
  transform: translateX(0);
}

.work__media {
  aspect-ratio: 844 / 653.5;
  overflow: hidden;
  background: #d9d9d9;
}

.work__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}

.work:hover .work__media img {
  transform: scale(1.045);
}

.works > .btn {
  margin-top: calc(64 * var(--u));
}

/* --------------------------------------------------------------------------
   Crossed marquee bands
   -------------------------------------------------------------------------- */

.bands {
  position: relative;
  z-index: 3;
  height: calc(400 * var(--v));
  margin-top: calc(160 * var(--u));
  pointer-events: none;
}

.band {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  width: calc(2650 * var(--v));
  height: calc(98 * var(--u));
  overflow: hidden;
}

.band--light {
  background: #fff;
  transform: translate(-50%, -50%) rotate(6deg);
}

.band--dark {
  background: var(--ink);
  transform: translate(-50%, -50%) rotate(-6deg);
}

.band__track {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0 auto;
}

.band__track,
.band__group {
  gap: calc(28 * var(--u));
}

.band__group {
  display: flex;
  flex: none;
  align-items: center;
  padding-right: calc(28 * var(--u));
}

.band__track.is-running {
  gap: 0;
  margin: 0;
  animation: marquee 75s linear infinite;
}

.band--dark .band__track.is-running {
  animation-direction: reverse;
}

.band span {
  color: #e7e7e7;
  font-weight: 700;
  font-size: calc(38 * var(--u));
  line-height: calc(44 / 38);
  white-space: nowrap;
}

/* the mockup's #e7e7e7 on the white band was unreadable; this is 5:1 on white */
.band--light span {
  color: #6f6f6f;
}

.band img {
  flex: none;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  z-index: 2;
  margin-top: calc(45 * var(--v));
}

.footer::after {
  content: '';
  position: absolute;
  top: calc(-57 * var(--u));
  left: calc(285 * var(--u));
  width: 1px;
  height: calc(242 * var(--u));
  background: rgba(255, 255, 255, 0.1);
}

.footer__top {
  position: absolute;
  top: calc(var(--rise) * -0.36vw);
  left: 50%;
  padding: 8px;
  margin: -8px;
  transform: translateX(-50%);
  transition: transform 0.3s var(--ease);
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
}

.footer__top:hover {
  transform: translate(-50%, -4px);
}

.footer__top img {
  width: calc(30.65 * var(--u));
  height: calc(18.06 * var(--u));
}

.footer__main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: calc(97 * var(--u)) calc(48 * var(--u)) 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(32 * var(--u));
  font-size: max(14px, calc(19 * var(--u)));
  line-height: calc(16.2 / 19);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.footer__col--socials {
  align-items: flex-end;
}

.footer__col p {
  color: rgba(255, 255, 255, 0.5);
  font-size: max(13px, calc(18 * var(--u)));
  text-transform: uppercase;
}

.footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(50 * var(--u));
  width: calc(786 * var(--u));
  margin-top: calc(35 * var(--u));
  text-align: center;
}

.footer__center p {
  color: rgba(255, 255, 255, 0.69);
  font-size: max(15px, calc(24 * var(--u)));
  line-height: calc(40 / 24);
}

.footer__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--u));
}

.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(66 * var(--u));
  padding: 0 calc(29 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 9999px;
  font-weight: 500;
  font-size: max(14px, calc(20 * var(--u)));
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.pill:hover {
  border-color: var(--lime);
  background: var(--lime);
  color: #010101;
}

.footer__name {
  position: relative;
  height: calc(282 * var(--v));
  margin-top: calc(56 * var(--u));
  padding-top: calc(66 * var(--v));
  overflow: hidden;
}

.footer__name::before {
  content: '';
  position: absolute;
  top: calc(66 * var(--v));
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.footer__name::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(132 * var(--v));
  background: rgba(255, 255, 255, 0.08);
}

.footer__name p {
  margin-top: calc(-38 * var(--v));
  color: rgba(255, 255, 255, 0.08);
  font-size: calc(316 * var(--v));
  line-height: 1;
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
}

.footer__name .char {
  display: inline-block;
}

.footer__name .is-white {
  color: #fff;
}

.footer__name .is-lime {
  color: var(--lime);
}

/* --------------------------------------------------------------------------
   Tablet & mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  :root {
    --u: 0.7px;
  }

  .nav {
    padding: 20px 20px 0;
  }

  .nav__links {
    display: none;
  }

  .hero {
    min-height: 520px;
    padding-bottom: 5vw;
  }

  .hero__portrait {
    top: 4%;
    height: 82%;
  }

  .hero__title {
    gap: 2.4vw;
    font-size: clamp(36px, 10.4vw, 96px);
  }

  .hero__rail {
    display: none;
  }

  .hero__socials {
    top: auto;
    bottom: 24px;
    left: 20px;
    gap: 18px;
    width: 26px;
  }

  .hero__socials img {
    height: 24px;
  }

  .hero__scroll {
    bottom: 24px;
    font-size: 18px;
  }

  .wa-tab {
    width: 44px;
    height: 150px;
    padding: 12px 0;
    font-size: 14px;
  }

  .wa-tab:hover {
    width: 44px;
  }

  .wa-tab img {
    width: 22px;
    height: 22px;
  }

  .fab {
    right: 16px;
    bottom: 20px;
    width: 52px;
    height: 52px;
  }

  .fab img {
    width: 12px;
    height: 21px;
  }

  .about {
    gap: 40px;
    width: auto;
    padding: clamp(90px, 16vw, 150px) 28px 0;
  }

  .about__lead {
    font-size: clamp(26px, 5.6vw, 46px);
  }

  .about__sub {
    width: auto;
    font-size: clamp(17px, 3.4vw, 28px);
    line-height: 1.4;
  }

  .cert {
    padding-top: clamp(90px, 14vw, 140px);
  }

  .cert__label {
    gap: 10px;
    padding-bottom: 14px;
    line-height: 1.2;
  }

  .cert__label img {
    width: 11px;
    height: 12px;
  }

  .cert__card {
    width: calc(100% - 40px);
    height: auto;
    aspect-ratio: 1520 / 929;
    margin-top: 56px;
    border-radius: 18px;
  }

  .cert__card img {
    width: 80.4%;
    height: auto;
  }

  .xp {
    margin-top: 70px;
    padding: 0 0 clamp(110px, 18vw, 170px);
  }

  .xp__line,
  .xp__dot,
  .xp__glow {
    left: 28px;
  }

  .xp__title {
    padding: 0 28px 0 56px;
    font-size: 22px;
    text-align: left;
  }

  .xp__rows {
    row-gap: clamp(70px, 14vw, 120px);
    width: auto;
    margin: 56px 0 0;
  }

  .xp__dot {
    left: 28px;
  }

  .xp__row {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .xp__row .xp__body {
    grid-column: 1;
    justify-self: stretch;
    width: auto;
    padding: 0 60px 0 56px;
    text-align: left;
  }

  .xp__body h3 {
    font-size: clamp(32px, 7.4vw, 58px);
  }

  .xp__role {
    margin-top: 12px;
    font-size: clamp(20px, 4.2vw, 32px);
    line-height: 1.15;
  }

  .xp__desc {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.5;
  }

  .xp__date {
    margin-top: 14px;
    font-size: 14px;
  }

  .xp__glow {
    height: 120px;
  }

  .xp__curve {
    left: 62%;
    opacity: 0.16;
  }

  .works {
    padding-top: clamp(130px, 22vw, 220px);
  }

  .works__head {
    padding: 0 28px;
  }

  .works__head h2 {
    font-size: clamp(38px, 8.6vw, 64px);
  }

  .works__head p {
    width: auto;
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.5;
  }

  .works__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 48px;
    padding: 0 20px;
  }

  .work figcaption {
    margin-bottom: 10px;
    font-size: 15px;
  }

  .works > .btn {
    margin-top: 44px;
  }

  .bands {
    height: calc(14vw + 80px);
    margin-top: 70px;
  }

  .band {
    width: 130vw;
  }

  .footer__main {
    grid-template-columns: 1fr 1fr;
    row-gap: 48px;
    padding: 72px 28px 0;
  }

  .footer::after {
    display: none;
  }

  .footer__center {
    grid-column: 1 / -1;
    order: -1;
    gap: 28px;
    width: auto;
    margin-top: 0;
  }

  .footer__center p {
    font-size: 17px;
    line-height: 1.6;
  }

  .footer__pills {
    gap: 10px;
  }

  .pill {
    height: 50px;
    padding: 0 22px;
    font-size: 15px;
  }

  .footer__col {
    gap: 18px;
    font-size: 16px;
    line-height: 1.2;
  }

  .footer__name {
    margin-top: 56px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* no scroll animation: show the mockup's static curve, with the label clear of it */
  .dark,
  .footer {
    --rise: 2.34;
  }

  .hero__scroll {
    bottom: calc(2.34vw + 16px);
  }

  .band__track.is-running {
    animation: none;
  }

  .btn__icon,
  .btn__icon img,
  .work__media img,
  .fab {
    transition: none;
  }
}