/* ============================================================
   Axecorp portfolio design system (dark / Kanit)
   Scoped with .ax- prefix so it can't collide with theme styles.
   ============================================================ */
:root {
  --ax-bg: #0C0C0C;
  --ax-text: #D7E2EA;
  --ax-hairline: rgba(255, 255, 255, 0.12);
}
body.ax-dark { background: var(--ax-bg); font-family: 'Kanit', sans-serif; margin: 0; }
/* self-contained font scoping — the theme's header.php doesn't print body_class(),
   so every ax section carries its own font stack */
.ax-hero, .ax-marquee, .ax-about, .ax-services, .ax-projects,
.ax-portfolio-page, .ax-single, .ax-modal, .ax-filters { font-family: 'Kanit', sans-serif; }
.ax-hero *, .ax-marquee *, .ax-about *, .ax-services *, .ax-projects *,
.ax-portfolio-page *, .ax-single *, .ax-modal *, .ax-filters * { font-family: inherit; }
/* kill default browser/theme heading + paragraph margins inside ax sections
   (an unreset h2 at 160px font adds ~130px of phantom space) */
.ax-hero h1, .ax-hero p, .ax-about h2, .ax-about p, .ax-services h2, .ax-services h3, .ax-services p,
.ax-projects h2, .ax-portfolio-page h1, .ax-portfolio-page p, .ax-single h1, .ax-single p,
.ax-modal p { margin: 0; }
.ax-gradient {
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* entrance reveals */
.ax-reveal { opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.ax-reveal--left { transform: translateX(-80px); }
.ax-reveal--right { transform: translateX(80px); }
.ax-reveal--d2 { transition-delay: .15s; } .ax-reveal--d3 { transition-delay: .3s; }
.ax-reveal--d4 { transition-delay: .4s; } .ax-reveal--d5 { transition-delay: .5s; }
.ax-reveal--d6 { transition-delay: .6s; }
.ax-reveal.ax-in { opacity: 1; transform: none; }
.no-js .ax-reveal { opacity: 1; transform: none; }

/* ---------------- hero ---------------- */
.ax-hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; background: var(--ax-bg); }
.ax-hero__headwrap { overflow: hidden; }
.ax-hero__heading { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1;
  white-space: nowrap; text-align: center; width: 100%; font-size: 11vw; margin-top: 1rem; }
.ax-hero__stage { position: relative; flex: 1; }
.ax-hero__portrait-pos { position: absolute; z-index: 10; left: 50%; transform: translateX(-50%);
  width: 48vw; max-width: 200px; top: 50%; bottom: auto; }
.ax-hero__portrait-center { transform: translateY(-50%); }
.ax-magnet img { width: 100%; height: auto; user-select: none; pointer-events: none; }
.ax-magnet > * , .ax-magnet { will-change: transform; }
.ax-hero__bottom { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between;
  align-items: flex-end; padding: 0 6vw 1.9rem; }
.ax-hero__sub { color: var(--ax-text); font-weight: 300; text-transform: uppercase; letter-spacing: .05em;
  line-height: 1.35; max-width: 160px; font-size: clamp(.75rem, 1.4vw, 1.5rem); }
.ax-hero__stats { color: rgba(215, 226, 234, .6); font-weight: 300; text-transform: uppercase;
  letter-spacing: .18em; text-align: right; font-size: clamp(.6rem, 1vw, .8rem); line-height: 1.7; }
@media (min-width: 640px) {
  .ax-hero__portrait-pos { max-width: 250px; top: auto; bottom: 0; }
  .ax-hero__portrait-center { transform: none; }
  .ax-hero__sub { max-width: 220px; }
}
@media (min-width: 768px) { .ax-hero__portrait-pos { max-width: 300px; } .ax-hero__sub { max-width: 260px; } }
@media (min-width: 1024px) { .ax-hero__portrait-pos { max-width: 350px; } }

/* ---------------- marquee ---------------- */
.ax-marquee { background: var(--ax-bg); padding: 6rem 0 2.5rem; overflow: hidden;
  display: flex; flex-direction: column; gap: .75rem; }
.ax-marquee__row { display: flex; gap: .75rem; will-change: transform; }
.ax-marquee__row--reverse { justify-content: flex-end; }
.ax-marquee__tile { position: relative; flex-shrink: 0; width: 420px; height: 270px; border-radius: 1rem;
  overflow: hidden; border: 1px solid rgba(215, 226, 234, .1); text-decoration: none; display: block;
  transition: border-color .3s; }
.ax-marquee__tile:hover { border-color: rgba(215, 226, 234, .4); }
.ax-marquee__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* HTML label overlay (real text, reflows properly — never baked into images) */
.ax-marquee__tile { background: linear-gradient(135deg, #14161b 0%, #1d2634 55%, #121419 100%); }
.ax-marquee__label { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: .2rem; padding: 2rem 1.25rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 100%); pointer-events: none; }
.ax-marquee__cat { color: #93a0ae; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; font-weight: 300; }
.ax-marquee__title { color: var(--ax-text); font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; line-height: 1.25; font-size: clamp(.8rem, 1.1vw, 1rem);
  overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 640px) { .ax-marquee__label { padding: 1.4rem .9rem .7rem; } .ax-marquee__title { font-size: .78rem; } }
.ax-marquee__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); opacity: 0; transition: opacity .3s; }
.ax-marquee__tile:hover .ax-marquee__hover { opacity: 1; }
.ax-marquee__hover span { color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: .75rem;
  border: 2px solid rgba(255,255,255,.8); border-radius: 999px; padding: .5rem 1.25rem; }
@media (max-width: 640px) { .ax-marquee__tile { width: 280px; height: 180px; } }

/* ---------------- about ---------------- */
.ax-about { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 5rem 1.25rem; background: var(--ax-bg); overflow: hidden; }
.ax-about__corner { position: absolute; }
.ax-about__corner img { width: 100%; height: auto; }
.ax-about__corner--tl { top: 4%; left: 1%; width: 120px; }
.ax-about__corner--bl { bottom: 8%; left: 3%; width: 100px; }
.ax-about__corner--tr { top: 4%; right: 1%; width: 120px; }
.ax-about__corner--br { bottom: 8%; right: 3%; width: 130px; }
@media (min-width: 640px) {
  .ax-about__corner--tl { left: 2%; width: 160px; } .ax-about__corner--bl { left: 6%; width: 140px; }
  .ax-about__corner--tr { right: 2%; width: 160px; } .ax-about__corner--br { right: 6%; width: 170px; }
}
@media (min-width: 768px) {
  .ax-about__corner--tl { left: 4%; width: 210px; } .ax-about__corner--bl { left: 10%; width: 180px; }
  .ax-about__corner--tr { right: 4%; width: 210px; } .ax-about__corner--br { right: 10%; width: 220px; }
}
.ax-about__inner { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.ax-about__heading { font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.02em;
  text-align: center; font-size: clamp(3rem, 12vw, 160px); }
.ax-about__para { color: var(--ax-text); font-weight: 500; text-align: center; line-height: 1.7;
  max-width: 560px; font-size: clamp(1rem, 2vw, 1.35rem); }
.ax-about__para .w { color: rgba(185, 190, 198, .28); transition: color .18s linear; }
.ax-about__para .w.on { color: var(--ax-text); }

/* ---------------- services ---------------- */
.ax-services { background: #fff; border-radius: 40px 40px 0 0; padding: 5rem 1.25rem; }
@media (min-width: 640px) { .ax-services { border-radius: 50px 50px 0 0; padding: 6rem 2rem; } }
@media (min-width: 768px) { .ax-services { border-radius: 60px 60px 0 0; padding: 8rem 2.5rem; } }
.ax-services__heading { color: #0C0C0C; font-weight: 900; text-transform: uppercase; text-align: center;
  line-height: 1; font-size: clamp(3rem, 12vw, 160px); margin-bottom: 4rem; }
.ax-services__list { max-width: 64rem; margin: 0 auto; }
.ax-services__item { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem 0;
  border-top: 1px solid rgba(12, 12, 12, .15); }
.ax-services__item:last-child { border-bottom: 1px solid rgba(12, 12, 12, .15); }
.ax-services__num { font-weight: 900; color: #0C0C0C; line-height: 1; font-size: clamp(3rem, 10vw, 140px); }
.ax-services__body { padding-top: .5rem; }
.ax-services__body h3 { color: #0C0C0C; font-weight: 500; text-transform: uppercase; margin: 0 0 .75rem;
  font-size: clamp(1rem, 2.2vw, 2.1rem); }
.ax-services__body p { color: #0C0C0C; opacity: .6; font-weight: 300; line-height: 1.7; max-width: 42rem;
  font-size: clamp(.85rem, 1.6vw, 1.25rem); margin: 0; }

/* ---------------- projects stack ---------------- */
.ax-projects { position: relative; z-index: 10; background: var(--ax-bg); border-radius: 40px 40px 0 0;
  margin-top: -2.5rem; padding: 5rem 1.25rem; }
@media (min-width: 768px) { .ax-projects { border-radius: 60px 60px 0 0; padding: 8rem 2.5rem; } }
.ax-projects__heading { font-weight: 900; text-transform: uppercase; text-align: center; line-height: 1;
  font-size: clamp(3rem, 12vw, 160px); margin-bottom: 3rem; }
.ax-projects__list { max-width: 72rem; margin: 0 auto; }
/* each slot gives its card ~1.5 viewports of scroll time:
   the card pins, dwells fully visible, and only near the end of its
   slot does the next card slide over it */
.ax-projects__slot { position: sticky; height: 150vh; }
.ax-projects__card { border: 2px solid var(--ax-text); background: var(--ax-bg); border-radius: 40px;
  padding: 1rem; transform-origin: top center; will-change: transform; }
@media (min-width: 640px) { .ax-projects__card { border-radius: 50px; padding: 1.5rem; } }
@media (min-width: 768px) { .ax-projects__card { border-radius: 60px; padding: 2rem; } }
.ax-projects__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; }
.ax-projects__id { display: flex; align-items: center; gap: 1.5rem; }
.ax-projects__num { font-weight: 900; line-height: 1; font-size: clamp(2.6rem, 7vw, 100px); }
.ax-projects__meta { display: flex; flex-direction: column; }
.ax-projects__cat { color: rgba(215, 226, 234, .6); text-transform: uppercase; letter-spacing: .18em;
  font-weight: 300; font-size: .75rem; }
.ax-projects__name { color: var(--ax-text); text-transform: uppercase; font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 2rem); }
.ax-ghost-btn { display: inline-block; border: 2px solid var(--ax-text); color: var(--ax-text);
  border-radius: 999px; padding: .75rem 2rem; text-transform: uppercase; letter-spacing: .18em;
  font-weight: 500; font-size: .875rem; text-decoration: none; transition: background .2s; }
.ax-ghost-btn:hover { background: rgba(215, 226, 234, .1); }
/* image grid: fixed-height container, columns fill it exactly —
   nothing can overflow the card at any width */
.ax-projects__grid { display: flex; gap: .75rem; height: clamp(260px, 42vw, 560px); }
.ax-projects__col1 { width: 40%; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.ax-projects__col2 { width: 60%; min-width: 0; }
.ax-projects__img { width: 100%; object-fit: cover; border-radius: 24px; display: block; }
@media (min-width: 640px) { .ax-projects__img { border-radius: 36px; } }
@media (min-width: 768px) { .ax-projects__img { border-radius: 48px; } }
.ax-projects__img--a { height: 42%; }
.ax-projects__img--b { flex: 1; min-height: 0; }
.ax-projects__img--c { height: 100%; }
/* mobile: stack the grid vertically */
@media (max-width: 639px) {
  .ax-projects__grid { flex-direction: column; height: auto; }
  .ax-projects__col1 { width: 100%; flex-direction: row; }
  .ax-projects__col1 .ax-projects__img { width: 50%; height: 130px; }
  .ax-projects__col2 { width: 100%; }
  .ax-projects__img--c { height: 220px; }
  .ax-projects__slot { height: auto; position: static; margin-bottom: 1.25rem; }
  .ax-projects__card { transform: none !important; }
  .ax-projects__top { flex-direction: column; align-items: flex-start; }
}

/* ---------------- portfolio archive ---------------- */
.ax-portfolio-page { background: var(--ax-bg); min-height: 100vh; padding: 4rem 1.25rem 6rem; }
.ax-portfolio-page__heading { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em;
  line-height: 1; text-align: center; font-size: clamp(3rem, 12vw, 160px); }
.ax-portfolio-page__sub { color: rgba(215, 226, 234, .7); font-weight: 300; text-transform: uppercase;
  letter-spacing: .05em; text-align: center; margin-top: 1rem; font-size: clamp(.8rem, 1.4vw, 1.1rem); }
.ax-filters { max-width: 64rem; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1.25rem; }
.ax-filters__search { position: relative; color: rgba(215, 226, 234, .4); }
.ax-filters__search svg { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); }
.ax-filters__search input { width: 100%; box-sizing: border-box; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(215, 226, 234, .2); color: var(--ax-text);
  padding: 1rem 3rem; font-size: 1rem; font-weight: 300; letter-spacing: .05em; outline: none;
  font-family: inherit; transition: border-color .2s; }
.ax-filters__search input::placeholder { color: rgba(215, 226, 234, .3); }
.ax-filters__search input:focus { border-color: rgba(215, 226, 234, .5); }
#ax-search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(215, 226, 234, .5); font-size: 1.5rem; cursor: pointer; }
.ax-filters__cats { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ax-filters__cats button { border-radius: 999px; padding: .5rem 1.25rem; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .18em; font-weight: 500; cursor: pointer;
  font-family: inherit; color: rgba(215, 226, 234, .7); background: none;
  border: 1px solid rgba(215, 226, 234, .25); transition: all .2s; }
.ax-filters__cats button:hover { background: rgba(215, 226, 234, .1); }
.ax-filters__cats button.is-active { background: var(--ax-text); color: #0C0C0C; border-color: var(--ax-text); }
.ax-grid { max-width: 72rem; margin: 3rem auto 0; display: grid; gap: 1.25rem;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .ax-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ax-grid { grid-template-columns: 1fr 1fr 1fr; } }
.ax-card { text-align: left; border-radius: 24px; overflow: hidden; cursor: pointer; padding: 0;
  border: 1px solid rgba(215, 226, 234, .15); background: rgba(255,255,255,.03);
  transition: border-color .3s, opacity .3s, transform .3s; font-family: inherit; }
.ax-card:hover { border-color: rgba(215, 226, 234, .5); }
.ax-card[hidden] { display: none; }
.ax-card__media { position: relative; display: block; aspect-ratio: 16 / 10; }
.ax-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16181d 0%, #1e2735 55%, #14161a 100%); }
.ax-card__placeholder span { color: #64707e; font-size: .65rem; text-transform: uppercase; letter-spacing: .18em; }
.ax-card__hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
.ax-card:hover .ax-card__hover { opacity: 1; }
.ax-card__play { color: #fff; border: 2px solid rgba(255,255,255,.8); border-radius: 999px;
  width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ax-card__body { display: block; padding: 1rem 1.25rem; }
.ax-card__title { display: block; color: var(--ax-text); font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-card__cat { display: block; color: rgba(215, 226, 234, .45); text-transform: uppercase;
  letter-spacing: .18em; font-size: .65rem; margin-top: .25rem; }
.ax-grid__empty { grid-column: 1 / -1; text-align: center; padding: 5rem 0; }
.ax-grid__empty p { color: rgba(215, 226, 234, .5); text-transform: uppercase; letter-spacing: .18em; }
#ax-reset { margin-top: 1.5rem; border-radius: 999px; border: 2px solid var(--ax-text); color: var(--ax-text);
  background: none; padding: .75rem 2rem; text-transform: uppercase; letter-spacing: .18em; cursor: pointer;
  font-family: inherit; }

/* ---------------- popup ---------------- */
.ax-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); }
.ax-modal[hidden] { display: none; }
.ax-modal__box { width: 100%; max-width: 56rem; border-radius: 28px; overflow: hidden;
  border: 2px solid rgba(215, 226, 234, .3); background: var(--ax-bg);
  animation: ax-pop .35s cubic-bezier(.16,1,.3,1); }
@keyframes ax-pop { from { transform: scale(.92) translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ax-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; }
.ax-modal__title { color: var(--ax-text); font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  margin: 0; font-size: 1.1rem; }
.ax-modal__cat { color: rgba(215, 226, 234, .5); text-transform: uppercase; letter-spacing: .18em;
  margin: .15rem 0 0; font-size: .65rem; }
.ax-modal__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.ax-modal__actions button { border-radius: 999px; border: 1px solid rgba(215, 226, 234, .4);
  color: var(--ax-text); background: none; cursor: pointer; font-family: inherit;
  text-transform: uppercase; letter-spacing: .18em; font-size: .65rem; padding: .5rem 1rem;
  transition: background .2s; }
.ax-modal__actions button:hover { background: rgba(215, 226, 234, .1); }
#ax-close { font-size: 1rem; padding: .4rem .8rem; }
.ax-modal__stage { background: #000; aspect-ratio: 16 / 9; }
.ax-modal__stage video, .ax-modal__stage iframe { width: 100%; height: 100%; display: block; border: 0; }
.ax-modal__stage .ax-modal__gallery { width: 100%; height: 100%; overflow-x: auto; display: flex;
  scroll-snap-type: x mandatory; }
.ax-modal__stage .ax-modal__gallery img { height: 100%; width: 100%; object-fit: contain;
  flex-shrink: 0; scroll-snap-align: center; }
.ax-modal__stage .ax-modal__pending { height: 100%; display: flex; align-items: center; justify-content: center;
  color: #64707e; text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; }

/* ---------------- single ---------------- */
.ax-single { background: var(--ax-bg); min-height: 100vh; padding: 3rem 1.25rem 6rem; }
.ax-single__nav { max-width: 56rem; margin: 0 auto 2rem; }
.ax-single__nav a { color: rgba(215, 226, 234, .7); text-decoration: none; text-transform: uppercase;
  letter-spacing: .18em; font-size: .8rem; }
.ax-single__nav a:hover { color: var(--ax-text); }
.ax-single__heading { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.05;
  text-align: center; font-size: clamp(2.2rem, 7vw, 90px); }
.ax-single__cat { color: rgba(215, 226, 234, .5); text-transform: uppercase; letter-spacing: .18em;
  text-align: center; margin-top: .75rem; font-size: .75rem; }
.ax-single__stage { max-width: 56rem; margin: 2.5rem auto 0; border-radius: 28px; overflow: hidden;
  border: 2px solid rgba(215, 226, 234, .3); background: #000; aspect-ratio: 16 / 9; }
.ax-single__stage video, .ax-single__stage iframe { width: 100%; height: 100%; display: block; border: 0; }
.ax-single__stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ax-single__gallery { width: 100%; height: 100%; overflow-x: auto; display: flex; scroll-snap-type: x mandatory; }
.ax-single__gallery img { height: 100%; width: 100%; object-fit: contain; flex-shrink: 0; scroll-snap-align: center; }
.ax-single__pending { height: 100%; display: flex; align-items: center; justify-content: center;
  color: #64707e; text-transform: uppercase; letter-spacing: .18em; }
.ax-single__tags { max-width: 56rem; margin: 1.5rem auto 0; display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; }
.ax-single__tags span { color: rgba(215, 226, 234, .6); border: 1px solid rgba(215, 226, 234, .2);
  border-radius: 999px; padding: .35rem 1rem; font-size: .65rem; text-transform: uppercase;
  letter-spacing: .18em; }

/* ---------------- Upwork CTA (gradient pill) ---------------- */
.ax-upwork-btn {
  display: inline-block; border-radius: 999px; color: #fff !important; text-decoration: none;
  font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-family: 'Kanit', sans-serif;
  padding: .8rem 2rem; font-size: .75rem;
  background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  box-shadow: 0px 4px 4px rgba(181, 1, 167, .25), 4px 4px 12px #7721B1 inset;
  outline: 2px solid #FFFFFF; outline-offset: -3px;
  transition: transform .25s cubic-bezier(.19,1,.22,1);
}
.ax-upwork-btn:hover { transform: scale(1.05); color: #fff; }
@media (min-width: 640px) { .ax-upwork-btn { padding: .9rem 2.5rem; font-size: .85rem; } }
.ax-nav .ax-upwork-btn { padding: .6rem 1.2rem; font-size: .65rem; margin-left: 18px; outline-offset: -2px; }
@media (max-width: 640px) { .ax-nav .ax-upwork-btn { margin: 8px 12px; text-align: center; } }
.ax-hero__cta-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }

/* ---------------- small-screen polish ---------------- */
@media (max-width: 639px) {
  .ax-hero { padding-top: 76px; }
  .ax-hero__heading { font-size: 13vw; }
  .ax-hero__bottom { flex-wrap: wrap; gap: 1rem; }
  .ax-services__item { gap: 1rem; padding: 1.5rem 0; }
  .ax-services__num { font-size: 2.6rem; }
  .ax-services__heading { margin-bottom: 2.5rem; }
  .ax-about { min-height: 0; padding: 4rem 1.25rem; }
  .ax-about__corner { width: 70px !important; opacity: .8; }
  .ax-portfolio-page { padding: 4.5rem .9rem 4rem; }
  .ax-filters__cats button { padding: .45rem .9rem; font-size: .6rem; }
  .ax-modal__head { flex-wrap: wrap; }
  .ax-single { padding-top: 4.5rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .ax-projects__grid { height: clamp(300px, 44vw, 480px); }
  .ax-about__corner { opacity: .9; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ax-reveal { transition-duration: .01s; }
  .ax-about__para .w { color: var(--ax-text); }
}

/* ---------------- floating pill nav ---------------- */
.ax-nav { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 6px; padding: 6px 22px 6px 6px;
  background: rgba(15, 17, 20, .75); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 18px;
  font-family: 'Kanit', sans-serif; }
body:not(.admin-bar) .ax-nav { top: 16px; }
.ax-nav__logo { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; }
.ax-nav__links { display: flex; gap: 26px; margin-left: 16px; }
.ax-nav__links a { color: rgba(255,255,255,.65); text-decoration: none; font-size: 14px;
  font-weight: 400; text-transform: uppercase; letter-spacing: .05em; transition: color .25s; }
.ax-nav__links a:hover { color: #fff; }
.ax-nav__burger { display: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.ax-nav__burger span { display: block; width: 18px; height: 1.5px; background: #fff; }
@media (max-width: 640px) {
  .ax-nav { padding: 6px; }
  .ax-nav__links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0; background: rgba(15, 17, 20, .9);
    backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 8px; }
  .ax-nav__links a { padding: 12px 16px; }
  .ax-nav.open .ax-nav__links { display: flex; }
  .ax-nav__burger { display: flex; }
}
/* hero heading clears the fixed nav */
.ax-hero { padding-top: 90px; }
html { scroll-behavior: smooth; }