@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,100..900&family=Instrument+Serif:ital@0;1&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: "Anybody", sans-serif;
}

  /* Hide scrollbar but keep scrolling */

/* Chrome, Safari, Edge */
html::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;   /* hides scrollbar */
  -ms-overflow-style: none; /* IE & Edge legacy */
}

  
body, html{
  line-height: 1.5;
  width: 100%; 
  box-sizing: border-box;
  overflow-x: hidden;
  margin-right: 0px;
}

body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Fade out class for step 1 */
body.fade-out {
  opacity: 0;
}
html{
  scroll-behavior: auto !important;
}

/* =========================================================
   NEATGARMS — SHOP NAVIGATION
   ========================================================= */

:root {
  --nav-height: 76px;
  --nav-pad: 24px;
  --ink: #0a0a0a;
  --paper: #f7f7f5;
}


/* =========================
   NAVBAR
========================= */

.shop-nav {
  position: relative;
  z-index: 900;

  width: 100%;
  height: var(--nav-height);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 var(--nav-pad);

  background: #fff;
  color: var(--ink);

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}


/* =========================
   LEFT
========================= */

.shop-nav__left {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 22px;
}


.shop-nav__menu {
  width: 30px;
  height: 30px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 6px;

  padding: 0;

  background: none;
  border: 0;

}


.shop-nav__menu span {
  display: block;

  width: 22px;
  height: 1px;

  background: currentColor;

  transition:
    width 250ms ease,
    transform 250ms ease;
}


.shop-nav__menu span:last-child {
  width: 14px;
}


.shop-nav__menu:hover span:last-child {
  width: 22px;
}


.shop-nav__page {
  font-family: "Anybody", sans-serif;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.16em;
}


.shop-nav__brand {
  display: flex;
  align-items: center;
  justify-content: center;

  color: inherit;
  text-decoration: none;

  line-height: 0;
}

.shop-nav__logo {
  display: block;

  width: auto;
  height: 34px;

  object-fit: contain;

  transition: opacity 250ms ease;
}

.shop-nav__brand:hover .shop-nav__logo {
  opacity: 0.65;
}

/* =========================
   RIGHT
========================= */

.shop-nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 24px;
}


.shop-nav__search {
  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;
  background: transparent;

  color: inherit;

  cursor: pointer;
}


.shop-nav__search svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.4;
  stroke-linecap: round;

  transition: transform 250ms ease;
}


.shop-nav__search:hover svg {
  transform: scale(1.08);
}


/* =========================
   BAG
========================= */

.shop-nav__bag {
  display: flex;
  align-items: center;

  gap: 6px;

  color: inherit;
  text-decoration: none;

  font-family: "Anybody", sans-serif;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.13em;
}


.shop-nav__bag-count {
  min-width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  border: 1px solid currentColor;
  border-radius: 50%;

  font-size: 8px;
  letter-spacing: 0;
}


/* =========================================================
   FULLSCREEN MENU
   ========================================================= */

.shop-menu {
  position: fixed;
  inset: 0;

  z-index: 2000;

  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  padding: 24px;

  /* Smoked cinematic glass */
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.015) 28%,
      transparent 58%
    ),
    linear-gradient(
      135deg,
      rgba(8, 8, 8, 0.88) 0%,
      rgba(10, 10, 10, 0.76) 45%,
      rgba(3, 3, 3, 0.90) 100%
    );

  /* Actual glass effect */
  -webkit-backdrop-filter:
    blur(24px)
    saturate(115%)
    contrast(105%);

  backdrop-filter:
    blur(24px)
    saturate(115%)
    contrast(105%);

  color: #fff;

  /* Very subtle inner cinematic depth */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -120px 180px rgba(0, 0, 0, 0.24);

  visibility: hidden;
  opacity: 0;

  transform: translateY(-12px);

  pointer-events: none;

  transition:
    opacity 350ms ease,
    transform 500ms cubic-bezier(.22, 1, .36, 1),
    visibility 350ms;
}

.shop-menu::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.025) 38%,
      rgba(255, 255, 255, 0.055) 50%,
      rgba(255, 255, 255, 0.018) 62%,
      transparent 100%
    );

  opacity: 0.65;
}

.shop-menu::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 35%,
      rgba(0, 0, 0, 0.18) 72%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

.shop-menu.is-open {
  visibility: visible;
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}


/* MENU TOP */

.shop-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.shop-menu__label {
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.16em;
}


/* CLOSE ICON */

.shop-menu__close {
  position: relative;

  width: 32px;
  height: 32px;

  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
}


.shop-menu__close span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 23px;
  height: 1px;

  background: #fff;
}


.shop-menu__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}


.shop-menu__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* =========================
   MENU LINKS
========================= */

.shop-menu__nav {
  width: 100%;
  max-width: 1150px;

  margin: auto;
}


.shop-menu__link {
  display: flex;
  align-items: baseline;

  gap: clamp(18px, 3vw, 48px);

  width: 100%;

  padding: 7px 0;

  color: #fff;
  text-decoration: none;

  font-family: "Anybody", sans-serif;

  font-size: clamp(54px, 8vw, 128px);
  font-weight: 100;

  line-height: 0.94;
  letter-spacing: -0.06em;

  transition:
    opacity 250ms ease,
    padding-left 450ms cubic-bezier(.22, 1, .36, 1);
}


.shop-menu__number {
  width: 28px;

  flex-shrink: 0;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.12em;

  opacity: 0.45;
}


.shop-menu__nav:hover .shop-menu__link {
  opacity: 0.25;
}


.shop-menu__nav .shop-menu__link:hover {
  opacity: 1;
  padding-left: 12px;
}


/* =========================
   MENU FOOTER
========================= */

.shop-menu__footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;

  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, 0.2);

  font-size: 9px;
  font-weight: 450;

  letter-spacing: 0.12em;
}


.shop-menu__footer span:nth-child(2) {
  text-align: center;
}


.shop-menu__footer span:last-child {
  text-align: right;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  :root {
    --nav-height: 66px;
    --nav-pad: 16px;
  }


  .shop-nav__left {
    gap: 0;
  }


  .shop-nav__page {
    display: none;
  }


  .shop-nav__right {
    gap: 14px;
  }


  .shop-nav__bag-label {
    display: none;
  }


  .shop-nav__brand {
    font-size: 15px;
  }


  .shop-menu {
    padding:
      18px
      16px
      max(18px, env(safe-area-inset-bottom));
  }


  .shop-menu__nav {
    margin: auto 0;
  }


  .shop-menu__link {
    gap: 12px;

    padding: 10px 0;

    font-size: clamp(48px, 17vw, 76px);

    letter-spacing: -0.055em;
  }


  .shop-menu__number {
    width: 22px;

    font-size: 8px;
  }


  .shop-menu__footer {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }


  .shop-menu__footer span:nth-child(2) {
    display: none;
  }


  .shop-menu__footer span:last-child {
    text-align: right;
  }

}


/* =========================
   ACCESSIBILITY
========================= */

@media (prefers-reduced-motion: reduce) {

  .shop-menu,
  .shop-menu__link,
  .shop-nav__menu span,
  .shop-nav__search svg {
    transition: none;
  }

}

/* From Uiverse.io by LeonKohli */ 
.ui-input-container {
  position: relative;
  width: 100%;
  padding: 5px;
}

.ui-input {
  width: 100%;
  padding: 10px 10px 10px 40px;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #ccc;
  margin-bottom: 5px;
  outline: none;
  background-color: transparent;
  transition: border-color 0.3s;
}

.ui-input:focus {
  border-color: #ae866a;
}

.ui-input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: #ae866a;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.ui-input:focus + .ui-input-underline {
  transform: scaleX(1);
}

.ui-input-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: rgba(108, 99, 255, 0.1);
  transition: width 0.3s;
}

.ui-input:focus ~ .ui-input-highlight {
  width: 100%;
}

.ui-input-icon {
  position: absolute;
  left: 10px;
  top: 30%;
  margin-bottom: 10px;
  transform: translateY(-50%);
  color: #999;
  transition: color 0.3s;
}

.ui-input:focus ~ .ui-input-icon {
  color: #ae866a;
}

.ui-input-icon svg {
  width: 20px;
  height: 20px;
}



.close-search-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: crosshair;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border: solid 1px black;
  padding: 5px;
  border-radius: 10px;
  font-size: small;
  background-color: #ae866a;
}
  
  
  /* Filter and Sort Section */
  .filter-sort {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: white;
  }
  
  .filter-sort .icon-btn {
    background: transparent;
    color: black;
    border-radius: 10px;
    padding: 2px 5px;
    border: none;
  }

/* Filter Menu */
.filter-menu {
  position: fixed;
  top: 0;
  right: 0%; /* Hidden by default */
  width: 80%;
  max-width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1100;
}

.filter-menu h3 {
  margin: 0 0 20px;
  font-family: 'Dream Avenue', sans-serif;
  font-size: 40px;
}

.filter-menu .filter-section {
  margin-bottom: 20px;
}

.filter-menu .filter-section h4 {
  margin: 10px 0;
}

.filter-menu .filter-section button,
.filter-menu .filter-section input {
  margin: 10px 0;
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}


/* Close Button */
.close-btn {
  background: none;
  border: none;
  font-size: 30px;
  cursor: pointer;
   border: 1px solid #8a9381;
    color: #8a9381;
  align-self: flex-end;
}

/* Menu Overlay (for dimming background) */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.menu-overlay.hidden {
  display: none;
}

/* Show Filter Menu */
.filter-menu.open {
  transform: translateX(0);
}



@media (max-width: 768px) {
  .filter-menu {
    width: 50%;
  }
  .close-btn{
    margin-top: 40px;
    border: 1px solid #8a9381;
    color: #8a9381;
    padding: 5px;
  }
}


/* =========================================================
   NEATGARMS — KIN SHOP
   COMPLETE PRODUCT PRESENTATION
========================================================= */

.kin-shop {
  --kin-black: #0b0b0b;
  --kin-white: #ffffff;
  --kin-paper: #f3f3f0;
  --kin-line: rgba(11, 11, 11, 0.15);
  --kin-muted: rgba(11, 11, 11, 0.52);

  width: 100%;

  background: var(--kin-white);
  color: var(--kin-black);

  font-family: "Anybody", sans-serif;
}


/* =========================================================
   MASTHEAD
========================================================= */

.kin-head {
  width: 100%;

  padding:
    22px
    clamp(18px, 2.5vw, 40px)
    24px;

  border-bottom: 1px solid var(--kin-line);
}


/* small information bar */

.kin-head__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  padding-bottom: 24px;

  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.14em;
}


.kin-head__bar span:nth-child(2) {
  text-align: center;
}


.kin-head__bar span:last-child {
  text-align: right;
}


/* main masthead */

.kin-head__main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(250px, 0.5fr);

  align-items: end;

  gap: 50px;

  min-height: clamp(230px, 29vw, 440px);

  padding:
    clamp(25px, 4vw, 60px)
    0
    26px;
}


/* KIN */

.kin-head__identity h1 {
  margin: 0;

  font-family: "Instrument Serif", serif;

  font-size: clamp(120px, 22vw, 340px);

  font-weight: 430;
  font-stretch: 145%;

  line-height: 0.66;

  letter-spacing: -0.085em;
}


.kin-head__identity p {
  display: flex;
  align-items: center;

  gap: 11px;

  margin:
    clamp(28px, 4vw, 55px)
    0
    0;

  font-size: 10px;
  font-weight: 550;

  letter-spacing: 0.17em;
}


.kin-head__identity p span {
  opacity: 0.42;
}


/* description */

.kin-head__description {
  display: flex;
  justify-content: flex-end;

  padding-bottom: 3px;
}


.kin-head__description p {
  max-width: 330px;

  margin: 0;

  font-family: "Instrument Serif", serif;

  font-size: clamp(22px, 2vw, 31px);

  line-height: 1.05;

  letter-spacing: -0.015em;
}


/* bottom masthead controls */

.kin-head__controls {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 18px;

  border-top: 1px solid var(--kin-line);
}


.kin-head__count {
  font-size: 9px;
  font-weight: 500;

  letter-spacing: 0.14em;
}


/* GRID / INDEX */

.kin-view {
  display: flex;
  align-items: center;

  gap: 8px;

  font-size: 9px;

  letter-spacing: 0.13em;
}


.kin-view__button {
  position: relative;

  padding: 2px 0;

  border: 0;

  background: transparent;
  color: inherit;

  font: inherit;

  opacity: 0.35;

  transition: opacity 200ms ease;
}


.kin-view__button:hover,
.kin-view__button.is-active {
  opacity: 1;
}


.kin-view__button.is-active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -4px;

  height: 1px;

  background: currentColor;
}

/* =========================================================
   NEATGARMS — KIN COLLECTION
   PRODUCT GRID / STORY / FLASK EDITORIAL
========================================================= */

.kin-collection {
  --kin-black: #0b0b0b;
  --kin-white: #ffffff;
  --kin-paper: #f1f1ee;
  --kin-muted: rgba(11, 11, 11, 0.55);

  width: 100%;

  padding: 0;

  background: var(--kin-white);
  color: var(--kin-black);

  font-family: "Anybody", sans-serif;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.kin-grid {
  width: 100%;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  /*
     Intentionally tiny.
     Gives the products that almost-connected
     fashion-store presentation.
  */
  gap: 2px;

  padding: 2px;
}


/* =========================================================
   PRODUCT
========================================================= */

.kin-piece {
  position: relative;

  min-width: 0;

  margin: 0;
  padding: 0;

  background: #fff;
}


.kin-piece .product-slot {
  width: 100%;

  margin: 0;
  padding: 0;
}


/* =========================================================
   IMPORTED PRODUCT CARD
========================================================= */

.kin-piece .product-card {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  overflow: hidden;

  color: var(--kin-black);

  text-align: left;

  transform: none;
  transition: none;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.kin-piece .image-wrapper {
  position: relative;

  width: 100%;

  /*
     Tall fashion-product proportion.
  */
  aspect-ratio: 3 / 4;

  overflow: hidden;

  border-radius: 0;

  background: var(--kin-paper);
}


.kin-piece .image-wrapper img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 0;

  opacity: 0;

  transform: scale(1);

  transition:
    opacity 400ms ease,
    transform 800ms cubic-bezier(.22, 1, .36, 1);
}


.kin-piece .image-wrapper img:first-of-type {
  opacity: 1;

  z-index: 1;
}


@media (hover: hover) {

  .kin-piece .product-card:hover .image-wrapper img {
    transform: scale(1.025);
  }

}


/* =========================================================
   PRODUCT DETAILS
========================================================= */

.kin-piece .product-name {
  position: static;

  display: block;

  width: 100%;

  margin: 0;

  padding:
    14px
    12px
    0;

  color: var(--kin-black);

  font-family: "Anybody", sans-serif;

  font-size: 12px;
  font-weight: 540;

  line-height: 1.15;

  letter-spacing: -0.015em;

  text-transform: uppercase;

  mix-blend-mode: normal;
}


.kin-piece .product-price {
  position: static;

  display: flex;

  align-items: center;

  gap: 7px;

  width: 100%;

  margin: 0;

  padding:
    7px
    12px
    18px;

  color: var(--kin-black);

  font-family: "Anybody", sans-serif;

  font-size: 9px;
  font-weight: 450;

  line-height: 1;

  letter-spacing: 0.07em;

  mix-blend-mode: normal;
}


.kin-piece .product-price .old-price {
  color: rgba(11, 11, 11, 0.35);
}


.kin-piece .new-price {
  color: var(--kin-black);
}


/*
   Remove old SHOP NOW pseudo button.
*/

.kin-piece .product-card::after {
  display: none;
}


/* =========================================================
   STATUS / SOLD OUT
========================================================= */

.kin-piece .status,
.kin-piece .sold-out-badge {
  position: absolute;

  z-index: 5;

  top: 10px;
  left: 10px;

  margin: 0;

  padding: 7px 9px;

  border: 0;
  border-radius: 0;

  background: #fff;

  color: #0b0b0b;

  font-family: "Anybody", sans-serif;

  font-size: 7px;
  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* remove product-page-only content */

.kin-piece .color-buttons,
.kin-piece .size-buttons,
.kin-piece .product-description,
.kin-piece .product-features {
  display: none !important;
}


/* =========================================================
   TWINS CAMPAIGN STORY
========================================================= */

.kin-story {
  position: relative;

  isolation: isolate;

  width: 100%;

  /*
     Large editorial campaign frame.
  */
  height: min(92vh, 1000px);
  min-height: 700px;

  overflow: hidden;

  margin: 0;

  background: #111;

  color: #fff;
}


/* IMAGE */

.kin-story__media {
  position: absolute;

  inset: 0;

  z-index: -3;

  display: block;

  width: 100%;
  height: 100%;
}


.kin-story__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.01);
}


/* DARKEN IMAGE */

.kin-story__overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

background:

  linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.24) 35%,
    rgba(0, 0, 0, 0.32) 60%,
    rgba(0, 0, 0, 0.68) 100%
  ),

  linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.10) 35%,
    rgba(0, 0, 0, 0.10) 65%,
    rgba(0, 0, 0, 0.38) 100%
  );
}

/* =========================================================
   KIN — LARGE TYPOGRAPHY BREAK
========================================================= */

.kin-title-break {
  width: 100%;

  margin: 0;
  padding: clamp(45px, 6vw, 90px) 0 clamp(35px, 5vw, 70px);

  overflow: hidden;

  background: #fff;
  color: #0b0b0b;
}


.kin-title-break h2 {
  margin: 0;

  width: 100%;

  font-family: "Instrument Serif", serif;

  /*
     Intentionally enormous.
     Nearly fills the entire screen width.
  */
  font-size: clamp(180px, 35vw, 600px);

  font-weight: 400;
  font-style: normal;

  line-height: 0.62;

  letter-spacing: -0.075em;

  text-align: center;

  white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .kin-title-break {
    padding:
      55px
      0
      45px;
  }


  .kin-title-break h2 {
    /*
       Very large on mobile too.
    */
    font-size: 55vw;

    line-height: 0.65;

    letter-spacing: -0.07em;
  }

}


/* =========================================================
   WHISKEY FLASK FEATURE
========================================================= */
/* =========================================================
   WHISKEY FLASK — TWO PANEL FEATURE
========================================================= */

.kin-flask {
  width: 100%;
  max-width: none;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff;

  overflow: hidden;
}


/* =========================================================
   EACH SIDE
========================================================= */

.kin-flask__item {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  color: #0b0b0b;
  text-decoration: none;

  border: 0;
  border-radius: 0;

  overflow: hidden;
}


/*
 * Slight 1px overlap prevents a browser sub-pixel
 * seam appearing between the two images.
 */

.kin-flask__item:nth-child(2) {
  margin-left: -1px !important;
  width: calc(100% + 1px);
}


/* =========================================================
   IMAGE
========================================================= */

.kin-flask__image {
  position: relative;

  width: 100%;

  /*
   * EXACT same ratio for both images.
   * This guarantees identical heights.
   */
  aspect-ratio: 4 / 3;

  flex-shrink: 0;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border: 0;
  border-radius: 0;

  background: #efefec;
}


.kin-flask__image img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100% !important;
  height: 100% !important;

  max-width: none;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0;
  border-radius: 0;

  transform: scale(1);

  transition:
    transform 900ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

  .kin-flask__item:hover .kin-flask__image img {
    transform: scale(1.025);
  }

}


/* =========================================================
   INFORMATION
========================================================= */

.kin-flask__info {
  box-sizing: border-box;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  margin: 0;

  padding:
    14px
    12px
    24px;

  font-family: "Anybody", sans-serif;

  font-size: 8px;
  font-weight: 520;

  line-height: 1;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.kin-flask__info span:last-child {
  opacity: 0.42;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .kin-flask {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * Slightly taller images on mobile because
   * each image only gets half of the screen.
   */

  .kin-flask__image {
    aspect-ratio: 4 / 5;
  }


  .kin-flask__info {
    gap: 5px;

    padding:
      10px
      7px
      16px;

    font-size: 6px;

    letter-spacing: 0.08em;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .kin-grid {
    /*
       Still four across on larger tablets.
       Changes to two once actual mobile begins.
    */
    gap: 2px;

    padding: 2px;
  }


  .kin-piece .product-name {
    padding:
      11px
      8px
      0;

    font-size: 10px;
  }


  .kin-piece .product-price {
    padding:
      6px
      8px
      15px;

    font-size: 8px;
  }


  .kin-story {
    min-height: 650px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  /* =========================
     PRODUCTS — 2 x 2
  ========================== */

  .kin-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 1px;

    padding: 1px;
  }


  .kin-piece .image-wrapper {
    /*
       Slightly taller on mobile.
    */
    aspect-ratio: 3 / 4;
  }


  .kin-piece .product-name {
    padding:
      10px
      7px
      0;

    font-size: 10px;

    line-height: 1.1;
  }


  .kin-piece .product-price {
    padding:
      5px
      7px
      15px;

    font-size: 7px;

    letter-spacing: 0.05em;
  }


  .kin-piece .status,
  .kin-piece .sold-out-badge {
    top: 7px;
    left: 7px;

    padding: 5px 6px;

    font-size: 6px;
  }


  /* =========================
     STORY
  ========================== */

  .kin-story {
    height: 88svh;

    min-height: 650px;
  }


  .kin-story__media img {
    object-position: center;
  }


  /*
     Slightly stronger mobile overlay
     because the copy occupies more of
     the photography.
  */

  .kin-story__overlay {
    background:

      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.38) 0%,
        rgba(0, 0, 0, 0.08) 32%,
        rgba(0, 0, 0, 0.12) 57%,
        rgba(0, 0, 0, 0.58) 100%
      );
  }



.kin-flask {
    grid-template-columns: 1fr 1fr;

    gap: 0;
    column-gap: 0;

    margin: 0;
    padding: 0;
  }


  .kin-flask__image {
    aspect-ratio: 4 / 5;

    margin: 0;
    padding: 0;
  }



.kin-flask__info {
  gap: 5px;

  padding:
    10px
    7px
    16px;

  font-size: 6px;

  letter-spacing: 0.08em;
}


  .kin-flask__info {
    gap: 5px;

    padding:
      10px
      7px
      18px;

    font-size: 6px;

    letter-spacing: 0.08em;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .kin-piece .product-name {
    font-size: 9px;
  }


  .kin-flask__info {
    font-size: 5.5px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kin-piece .image-wrapper img,
  .kin-flask__image img {
    transition: none;
  }

}

/* =========================================================
   KIN STORY — EDITORIAL TYPOGRAPHY
========================================================= */

.kin-story__text {
  position: absolute;
  z-index: 5;

  color: #fff;
}


/* SMALL TECHNICAL LABEL */

.kin-story__number {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;

  font-family: "Anybody", sans-serif;

  font-size: 7px;
  font-weight: 550;

  line-height: 1;

  letter-spacing: 0.19em;

  text-transform: uppercase;

  opacity: 0.62;
}


.kin-story__number::before {
  content: "";

  width: 24px;
  height: 1px;

  background: currentColor;

  opacity: 0.7;
}


/* =========================================================
   MAIN STATEMENT
========================================================= */

.kin-story__statement {
  margin: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  font-family: "Anybody", sans-serif;

  font-size: clamp(15px, 1.25vw, 20px);

  font-weight: 420;

  line-height: 1.08;

  letter-spacing: -0.035em;
}


/* NORMAL SUPPORTING LINES */

.kin-story__statement > span {
  display: block;

  max-width: 390px;
}


/* =========================================================
   INSTRUMENT SERIF MOMENTS
========================================================= */

.kin-story__statement em {
  display: block;

  margin:
    -0.02em
    0
    0.02em;

  font-family: "Instrument Serif", serif;

  font-size: clamp(55px, 6.2vw, 105px);

  font-weight: 400;
  font-style: italic;

  line-height: 0.78;

  letter-spacing: -0.055em;

  white-space: nowrap;

  text-shadow:
    0 2px 25px rgba(0, 0, 0, 0.16);
}


/* SECOND EMPHASIS STYLE */

.kin-story__statement strong {
  display: block;

  margin: 5px 0;

  font-family: "Anybody", sans-serif;

  font-size: clamp(24px, 2.5vw, 40px);

  font-weight: 520;

  line-height: 0.92;

  letter-spacing: -0.055em;

  text-transform: uppercase;
}


/* =========================================================
   STORY 01
========================================================= */

.kin-story__text--one {
  top: clamp(35px, 5vw, 75px);
  left: clamp(20px, 3vw, 48px);

  max-width: 550px;
}


/*
   Make "Twins." particularly dominant.
*/

.kin-story__text--one em {
  font-size: clamp(75px, 8vw, 135px);
}


/* =========================================================
   STORY 02
========================================================= */

.kin-story__text--two {
  top: 39%;

  right: clamp(22px, 4vw, 65px);

  max-width: 550px;
}


/*
   Align this story against the right side.
*/

.kin-story__text--two .kin-story__statement {
  align-items: flex-end;

  text-align: right;
}


.kin-story__text--two .kin-story__number {
  justify-content: flex-end;
}


.kin-story__text--two em {
  font-size: clamp(60px, 6.5vw, 110px);
}


/* =========================================================
   STORY 03
========================================================= */

.kin-story__text--three {
  bottom: clamp(30px, 4vw, 60px);
  left: clamp(20px, 3vw, 48px);

  max-width: 720px;
}


.kin-story__statement--final > span {
  max-width: 520px;
}


/*
   "similarities"
*/

.kin-story__text--three em:not(.kin-story__closing) {
  font-size: clamp(58px, 6vw, 100px);
}


/*
   Final sentence becomes almost a campaign signature.
*/

.kin-story__closing {
  margin-top: 15px !important;

  font-size: clamp(34px, 4vw, 67px) !important;

  line-height: 0.9 !important;

  white-space: normal !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .kin-story__number {
    margin-bottom: 10px;

    font-size: 5.5px;

    letter-spacing: 0.16em;
  }


  .kin-story__number::before {
    width: 16px;
  }


  .kin-story__statement {
    font-size: 10px;

    line-height: 1.15;
  }


  .kin-story__statement > span {
    max-width: 240px;
  }


  .kin-story__statement em {
    font-size: clamp(42px, 13vw, 65px);

    line-height: 0.8;
  }


  .kin-story__statement strong {
    margin: 3px 0;

    font-size: clamp(17px, 5vw, 25px);

    line-height: 0.95;
  }


  /* STORY 01 */

  .kin-story__text--one {
    top: 24px;
    left: 14px;

    max-width: 82%;
  }


  .kin-story__text--one em {
    font-size: clamp(60px, 18vw, 88px);
  }


  /* STORY 02 */

  .kin-story__text--two {
    top: 40%;

    right: 14px;

    max-width: 82%;
  }


  .kin-story__text--two em {
    font-size: clamp(43px, 13vw, 67px);
  }


  /* STORY 03 */

  .kin-story__text--three {
    right: 14px;
    bottom: 24px;
    left: 14px;

    max-width: none;
  }


  .kin-story__statement--final > span {
    max-width: 280px;
  }


  .kin-story__text--three em:not(.kin-story__closing) {
    font-size: clamp(42px, 13vw, 64px);
  }


  .kin-story__closing {
    margin-top: 10px !important;

    font-size: clamp(29px, 9vw, 43px) !important;

    max-width: 320px;
  }

}


/* =========================================================
   KIN — CINEMATIC CLOSING FRAME
========================================================= */

.kin-end {
  --mx: 50%;
  --my: 50%;

  position: relative;
  isolation: isolate;

  width: 100%;
  min-height: 100svh;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;

  padding:
    clamp(22px, 2.5vw, 40px)
    clamp(18px, 2.8vw, 46px)
    clamp(20px, 2.5vw, 36px);

  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.035) 17%,
      transparent 43%
    ),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(255, 255, 255, 0.09),
      transparent 48%
    ),
    #080808;

  color: #f5f5f2;
}


/* =========================================================
   MASSIVE BACKGROUND KIN
========================================================= */

.kin-end::before {
  content: "KIN";

  position: absolute;

  z-index: -3;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -51%);

  font-family: "Anybody", sans-serif;

  font-size: clamp(240px, 46vw, 760px);
  font-weight: 700;
  font-stretch: 150%;

  line-height: 0.7;

  letter-spacing: -0.11em;

  color: transparent;

  -webkit-text-stroke:
    1px rgba(255, 255, 255, 0.095);

  white-space: nowrap;

  pointer-events: none;
}


/* =========================================================
   CINEMATIC VIGNETTE
========================================================= */

.kin-end::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.52) 0%,
      transparent 22%,
      transparent 68%,
      rgba(0, 0, 0, 0.76) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.58) 0%,
      transparent 20%,
      transparent 80%,
      rgba(0, 0, 0, 0.58) 100%
    );

  box-shadow:
    inset 0 0 180px rgba(0, 0, 0, 0.9);
}


/* =========================================================
   FILM GRAIN
========================================================= */

.kin-end__grain {
  position: absolute;
  inset: -100%;

  z-index: -2;

  width: 300%;
  height: 300%;

  pointer-events: none;

  opacity: 0.075;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");

  animation: kinGrain 0.22s steps(2) infinite;
}


@keyframes kinGrain {

  0% {
    transform: translate(0, 0);
  }

  20% {
    transform: translate(-3%, 2%);
  }

  40% {
    transform: translate(2%, -4%);
  }

  60% {
    transform: translate(4%, 4%);
  }

  80% {
    transform: translate(-4%, -2%);
  }

  100% {
    transform: translate(2%, 3%);
  }

}


/* =========================================================
   SCAN / FILM LINES
========================================================= */

.kin-end__lines {
  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: 0.18;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(255, 255, 255, 0.025) 5px
    );
}


/* =========================================================
   TOP INFORMATION
========================================================= */

.kin-end__top {
  position: relative;
  z-index: 5;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  width: 100%;

  padding-bottom: 16px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.22);

  font-family: "Anybody", sans-serif;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 0.17em;
}


.kin-end__top span:nth-child(2) {
  text-align: center;
}


.kin-end__top::after {
  content: "KIN / 2026";

  text-align: right;

  opacity: 0.48;
}


/* =========================================================
   MAIN TYPOGRAPHY
========================================================= */

.kin-end h2 {
  position: relative;
  z-index: 5;

  align-self: center;

  width: 100%;

  margin: auto 0;

  padding: clamp(80px, 10vw, 150px) 0;

  text-align: center;

  font-family: "Anybody", sans-serif;

  font-size: clamp(85px, 14vw, 220px);
  font-weight: 450;
  font-stretch: 130%;

  line-height: 0.67;

  letter-spacing: -0.075em;

  text-transform: uppercase;
}


/* KEEP IT */

.kin-end h2::before {
  content: "KIN — CURRENT RELEASE";

  display: block;

  margin-bottom: clamp(25px, 3vw, 45px);

  font-family: "Anybody", sans-serif;

  font-size: 8px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.25em;

  opacity: 0.5;
}


/* NEAT */

.kin-end h2 em {
  position: relative;

  display: block;

  margin-top: 0.06em;

  font-family: "Instrument Serif", serif;

  font-size: 1.22em;
  font-weight: 400;
  font-style: italic;

  line-height: 0.72;

  letter-spacing: -0.06em;

  text-shadow:
    0 0 40px rgba(255, 255, 255, 0.08),
    0 0 100px rgba(255, 255, 255, 0.04);
}


/* little cinematic line underneath */

.kin-end h2 em::after {
  content: "";

  display: block;

  width: clamp(45px, 5vw, 80px);
  height: 1px;

  margin:
    clamp(35px, 5vw, 70px)
    auto
    0;

  background: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   BOTTOM
========================================================= */

.kin-end__bottom {
  position: relative;
  z-index: 5;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: end;

  width: 100%;

  padding-top: 16px;

  border-top:
    1px solid rgba(255, 255, 255, 0.22);

  font-family: "Anybody", sans-serif;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 0.15em;
}


.kin-end__bottom span:last-child {
  grid-column: 3;

  text-align: right;
}


/* middle technical marker */

.kin-end__bottom::before {
  content: "KEEP IT NEAT®";

  grid-column: 2;
  grid-row: 1;

  opacity: 0.45;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .kin-end {
    min-height: 88svh;

    padding:
      16px
      14px
      15px;
  }


  .kin-end::before {
    font-size: 74vw;

    transform:
      translate(-50%, -52%)
      rotate(-90deg);

    opacity: 0.8;
  }


  .kin-end__top {
    grid-template-columns: 1fr 1fr;

    font-size: 6px;

    padding-bottom: 11px;
  }


  .kin-end__top span:nth-child(2) {
    text-align: right;
  }


  .kin-end__top::after {
    display: none;
  }


  .kin-end h2 {
    padding: 90px 0;

    font-size: clamp(70px, 24vw, 112px);

    line-height: 0.7;
  }


  .kin-end h2::before {
    margin-bottom: 25px;

    font-size: 6px;
  }


  .kin-end h2 em {
    font-size: 1.15em;
  }


  .kin-end__bottom {
    grid-template-columns: 1fr 1fr;

    padding-top: 11px;

    font-size: 6px;
  }


  .kin-end__bottom span:last-child {
    grid-column: 2;
  }


  .kin-end__bottom::before {
    display: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kin-end__grain {
    animation: none;
  }

}

.sold-out-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  border-bottom: 2px solid black;
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 8px;
  letter-spacing: 1px;
  font-family: "Dream Avenue", sans-serif;
  z-index: 2;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}


  .pagination{
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
  }
  /* =========================================================
   NEATGARMS — EDITORIAL FOOTER
========================================================= */

.neat-footer {
  --footer-bg: #efefeb;
  --footer-ink: #0a0a0a;
  --footer-line: rgba(10, 10, 10, 0.18);
  --footer-muted: rgba(10, 10, 10, 0.48);

  position: relative;

  width: 100%;

  overflow: hidden;

  background: var(--footer-bg);
  color: var(--footer-ink);

  font-family: "Anybody", sans-serif;
}


/* =========================================================
   TICKER
========================================================= */

.neat-footer__ticker {
  width: 100%;

  overflow: hidden;

  border-bottom: 1px solid var(--footer-line);

  padding: 13px 0;
}


.neat-footer__ticker-track {
  width: max-content;

  display: flex;
  align-items: center;

  gap: clamp(28px, 3vw, 55px);

  white-space: nowrap;

  animation: neatFooterTicker 25s linear infinite;
}


.neat-footer__ticker-track span {
  font-size: 9px;
  font-weight: 520;

  letter-spacing: 0.16em;
}


.neat-footer__ticker-track i {
  font-family: serif;
  font-size: 8px;
  font-style: normal;

  opacity: 0.35;
}


@keyframes neatFooterTicker {

  from {
    transform: translateX(0);
  }

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

}


/* =========================================================
   NEWSLETTER
========================================================= */

.neat-footer__newsletter {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.7fr)
    minmax(0, 3fr);

  gap: clamp(40px, 7vw, 120px);

  padding:
    clamp(65px, 9vw, 145px)
    clamp(16px, 2.7vw, 44px)
    clamp(70px, 9vw, 135px);

  border-bottom: 1px solid var(--footer-line);
}


/* LEFT INDEX */

.neat-footer__newsletter-number {
  display: flex;
  flex-direction: column;

  justify-content: space-between;

  min-height: 100%;

  font-size: 8px;
  font-weight: 520;

  letter-spacing: 0.15em;
}


.neat-footer__newsletter-number span:last-child {
  color: var(--footer-muted);
}


/* NEWSLETTER MAIN */

.neat-footer__newsletter-main {
  width: 100%;
}


.neat-footer__eyebrow {
  margin: 0 0 clamp(25px, 4vw, 55px);

  font-size: 9px;
  font-weight: 550;

  letter-spacing: 0.18em;
}


.neat-footer__newsletter h2 {
  max-width: 1200px;

  margin: 0;

  font-family: "Anybody", sans-serif;

  font-size: clamp(65px, 9.7vw, 155px);
  font-weight: 420;
  font-stretch: 125%;

  line-height: 0.78;

  letter-spacing: -0.07em;

  text-transform: uppercase;
}


.neat-footer__newsletter h2 em {
  display: block;

  font-family: "Instrument Serif", serif;

  font-size: 1.08em;
  font-weight: 400;
  font-style: italic;

  letter-spacing: -0.055em;
}


/* =========================================================
   EMAIL INPUT
========================================================= */

.neat-footer__form {
  width: 100%;
  max-width: 980px;

  margin-top: clamp(55px, 7vw, 105px);
}


.neat-footer__input-wrap {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  border-bottom: 1px solid var(--footer-ink);
}


.neat-footer__input-wrap input {
  flex: 1;

  min-width: 0;

  padding:
    18px
    150px
    18px
    0;

  border: 0;
  outline: 0;

  border-radius: 0;

  background: transparent;
  color: var(--footer-ink);

  font-family: "Anybody", sans-serif;

  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 450;

  letter-spacing: 0.03em;
}


.neat-footer__input-wrap input::placeholder {
  color: rgba(10, 10, 10, 0.42);
}


/* JOIN */

.neat-footer__input-wrap button {
  position: absolute;

  right: 0;

  display: inline-flex;
  align-items: center;

  gap: 14px;

  padding: 13px 0 13px 20px;

  border: 0;

  background: transparent;
  color: var(--footer-ink);

  font-family: "Anybody", sans-serif;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.15em;

}


.neat-footer__input-wrap button svg {
  width: 21px;
  height: 21px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    transform 350ms cubic-bezier(.22, 1, .36, 1);
}


.neat-footer__input-wrap button:hover svg {
  transform: translateX(5px);
}


.neat-footer__newsletter-note {
  margin: 13px 0 0;

  font-size: 7px;
  font-weight: 500;

  letter-spacing: 0.12em;

  color: var(--footer-muted);
}


/* =========================================================
   DIRECTORY
========================================================= */

.neat-footer__directory {
  display: grid;

  grid-template-columns:
    minmax(280px, 2fr)
    repeat(3, minmax(130px, 1fr));

  gap: clamp(30px, 5vw, 85px);

  padding:
    clamp(45px, 6vw, 85px)
    clamp(16px, 2.7vw, 44px)
    clamp(70px, 8vw, 120px);
}


/* =========================================================
   IDENTITY
========================================================= */

.neat-footer__identity {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 230px;
}


.neat-footer__index {
  display: block;

  margin-bottom: 28px;

  font-size: 8px;
  font-weight: 550;

  letter-spacing: 0.15em;

  color: var(--footer-muted);
}


.neat-footer__identity p {
  margin: 0 0 25px;

  font-family: "Instrument Serif", serif;

  font-size: clamp(25px, 2.5vw, 38px);

  line-height: 0.95;

  letter-spacing: -0.02em;
}


.neat-footer__location {
  font-size: 8px;
  font-weight: 500;

  line-height: 1.6;

  letter-spacing: 0.12em;

  color: var(--footer-muted);
}


/* =========================================================
   LINKS
========================================================= */

.neat-footer__column {
  display: flex;
  flex-direction: column;
}


.neat-footer__column a {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 13px 0;

  border-bottom: 1px solid var(--footer-line);

  color: inherit;

  text-decoration: none;

  font-size: 10px;
  font-weight: 520;

  letter-spacing: 0.08em;

  transition:
    padding-left 350ms cubic-bezier(.22, 1, .36, 1),
    opacity 200ms ease;
}


.neat-footer__column a span:last-child {
  font-size: 11px;

  transition:
    transform 350ms cubic-bezier(.22, 1, .36, 1);
}


.neat-footer__column a:hover {
  padding-left: 7px;
}


.neat-footer__column a:hover span:last-child {
  transform: translate(3px, -3px);
}


.neat-footer__wordmark {
  width: 100%;

  margin-bottom: -0.07em;

  padding: 0 clamp(10px, 1.4vw, 22px);

  overflow: hidden;

  font-family: "Instrument Serif", serif;

  font-size: clamp(80px, 15.8vw, 250px);
  font-weight: 720;
  font-stretch: 150%;

  line-height: 0.67;

  letter-spacing: -0.09em;

  white-space: nowrap;

  text-align: center;

  user-select: none;
}

/* =========================================================
   BOTTOM BAR
========================================================= */

.neat-footer__bottom {
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 20px;

  padding:
    18px
    clamp(16px, 2.7vw, 44px)
    20px;

  border-top: 1px solid var(--footer-line);

  font-size: 7px;
  font-weight: 520;

  letter-spacing: 0.13em;
}


.neat-footer__bottom-center {
  text-align: center;

  opacity: 0.5;
}


.neat-footer__top {
  justify-self: end;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0;

  border: 0;

  background: transparent;
  color: inherit;

  font-family: inherit;

  font-size: 7px;
  font-weight: 520;

  letter-spacing: 0.13em;

  cursor: pointer;
}


.neat-footer__top span {
  font-size: 12px;

  transition:
    transform 350ms cubic-bezier(.22, 1, .36, 1);
}


.neat-footer__top:hover span {
  transform: translateY(-4px);
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .neat-footer__newsletter {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .neat-footer__newsletter-number {
    flex-direction: row;

    min-height: auto;
  }


  .neat-footer__directory {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    row-gap: 70px;
  }


  .neat-footer__identity {
    grid-column: 1 / -1;

    min-height: auto;
  }


  .neat-footer__identity > div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  /* TICKER */

  .neat-footer__ticker {
    padding: 10px 0;
  }


  .neat-footer__ticker-track {
    gap: 25px;

    animation-duration: 20s;
  }


  .neat-footer__ticker-track span {
    font-size: 7px;
  }


  /* NEWSLETTER */

  .neat-footer__newsletter {
    gap: 50px;

    padding:
      55px
      14px
      70px;
  }


  .neat-footer__newsletter-number {
    font-size: 6px;
  }


  .neat-footer__eyebrow {
    margin-bottom: 25px;

    font-size: 7px;
  }


  .neat-footer__newsletter h2 {
    font-size: clamp(52px, 17vw, 78px);

    line-height: 0.82;
  }


  .neat-footer__newsletter h2 em {
    margin-top: 3px;
  }


  /* INPUT */

  .neat-footer__form {
    margin-top: 55px;
  }


  .neat-footer__input-wrap input {
    padding:
      15px
      90px
      15px
      0;

    font-size: 13px;
  }


  .neat-footer__input-wrap button {
    gap: 7px;

    padding-left: 10px;

    font-size: 7px;
  }


  .neat-footer__input-wrap button svg {
    width: 17px;
    height: 17px;
  }


  .neat-footer__newsletter-note {
    max-width: 260px;

    font-size: 6px;

    line-height: 1.5;
  }


  /* DIRECTORY */

  .neat-footer__directory {
    grid-template-columns: 1fr;

    gap: 50px;

    padding:
      45px
      14px
      75px;
  }


  .neat-footer__identity {
    grid-column: auto;
  }


  .neat-footer__identity > div {
    display: block;
  }


  .neat-footer__identity p {
    font-size: 28px;
  }


  .neat-footer__location {
    font-size: 7px;
  }


  .neat-footer__index {
    margin-bottom: 18px;

    font-size: 7px;
  }


  .neat-footer__column a {
    padding: 14px 0;

    font-size: 9px;
  }


  /* WORDMARK */

  .neat-footer__wordmark {
    margin-bottom: -0.035em;

    padding: 0 7px;

    font-size: 19.5vw;

    line-height: 0.72;
  }


  /* BOTTOM */

  .neat-footer__bottom {
    grid-template-columns: 1fr auto;

    padding:
      15px
      14px
      17px;

    font-size: 6px;
  }


  .neat-footer__bottom-center {
    display: none;
  }


  .neat-footer__top {
    font-size: 6px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

  .neat-footer__newsletter h2 {
    font-size: 15.5vw;
  }


  .neat-footer__newsletter-note {
    max-width: 220px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .neat-footer__ticker-track {
    animation: none;
  }


  .neat-footer__column a,
  .neat-footer__column a span,
  .neat-footer__top span,
  .neat-footer__input-wrap button svg {
    transition: none;
  }

}


#page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Glassmorphism style */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  /* Start off-screen above */
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

#page-transition.active {
  transform: translateY(0);
  opacity: 1;
}

#page-transition.fade-up {
  /* Slide up to hide */
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.logo-wrapper img {
  width: 340px;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.3s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}



/* =========================================================
   NEATGARMS / DARK PURPLE SHOOTING STAR CURSOR
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  html,
  body,
  a,
  button,
  input,
  label,
  .object-zone {
    cursor: none !important;
  }


  /* =======================================================
     BASE CURSOR
     ======================================================= */

  .neat-cursor {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 999999;

    width: 58px;
    height: 34px;

    pointer-events: none;

    opacity: 0;

    transform:
      translate3d(-50%, -50%, 0);

    transform-origin:
      right center;

    will-change:
      transform,
      left,
      top,
      opacity;

    transition:
      opacity .25s ease;
  }


  /* =======================================================
     STAR
     ======================================================= */

  .neat-cursor__star {
    position: absolute;

    top: 50%;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    color: red;

    font-family:
      Georgia,
      "Times New Roman",
      serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    transform:
      translateY(-50%);

    filter: none;
    text-shadow: none;
  }


  /* =======================================================
     MAIN SHOOTING TAIL
     ======================================================= */

  .neat-cursor__tail {
    position: absolute;

    top: 50%;
    right: 17px;

    width: 42px;
    height: 18px;

    transform:
      translateY(-50%)
      scaleX(var(--tail-scale, .65));

    transform-origin:
      right center;

    transition:
      transform .12s ease-out;
  }


  .neat-cursor__tail-line {
    position: absolute;

    top: 50%;
    right: 0;

    width: 100%;
    height: 2px;

    transform:
      translateY(-50%);

    border-radius: 0;

background:
  linear-gradient(
    90deg,
    rgba(227, 38, 54, 0) 0%,
    rgba(227, 38, 54, .10) 18%,
    rgba(227, 38, 54, .30) 42%,
    rgba(227, 38, 54, .68) 72%,
    #E32636 100%
  );

    box-shadow: none;
    filter: none;
  }


  /* =======================================================
     SECOND TAIL STREAK
     ======================================================= */

  .neat-cursor__tail::before {
    content: "";

    position: absolute;

    right: 2px;
    top: 4px;

    width: 78%;
    height: 1px;

    transform:
      rotate(6deg);

    transform-origin:
      right center;

background:
  linear-gradient(
    90deg,
    rgba(227, 38, 54, 0) 0%,
    rgba(227, 38, 54, .10) 18%,
    rgba(227, 38, 54, .30) 42%,
    rgba(227, 38, 54, .68) 72%,
    #E32636 100%
  );

    opacity: .72;

    box-shadow: none;
    filter: none;
  }


  /* =======================================================
     THIRD SMALL STREAK
     ======================================================= */

  .neat-cursor__tail::after {
    content: "";

    position: absolute;

    right: 3px;
    bottom: 4px;

    width: 58%;
    height: 1px;

    transform:
      rotate(-7deg);

    transform-origin:
      right center;

    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(75, 31, 111, .15) 35%,
        #4B1F6F 100%
      );

    opacity: .55;

    box-shadow: none;
    filter: none;
  }


  /* =======================================================
     INTERACTIVE STATE
     ======================================================= */

  .neat-cursor.is-interactive
  .neat-cursor__star {
    color: red;

    filter: none;
    text-shadow: none;
  }


  .neat-cursor.is-interactive
  .neat-cursor__tail-line {
background:
  linear-gradient(
    90deg,
    rgba(227, 38, 54, 0) 0%,
    rgba(227, 38, 54, .10) 18%,
    rgba(227, 38, 54, .30) 42%,
    rgba(227, 38, 54, .68) 72%,
    #E32636 100%
  );

    box-shadow: none;
    filter: none;
  }


  .neat-cursor.is-interactive
  .neat-cursor__tail::before {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(50, 18, 77, .10) 30%,
        rgba(50, 18, 77, .55) 75%,
        #32124D 100%
      );
  }


  .neat-cursor.is-interactive
  .neat-cursor__tail::after {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(50, 18, 77, .15) 35%,
        #32124D 100%
      );
  }

}


/* =========================================================
   NEATGARMS INFINITE MARQUEE
   ========================================================= */

.neat-marquee {
  position: relative;

  width: 100%;
  overflow: hidden;

  background: #fff;
  color: #000;

  padding: 8px 0;

  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}


/* =========================================================
   MOVING TRACK
   ========================================================= */

.neat-marquee-track {
  display: flex;

  width: max-content;

  will-change: transform;

  animation: neat-marquee-scroll 22s linear infinite;
}


/* =========================================================
   TEXT GROUP
   ========================================================= */

.neat-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;

  white-space: nowrap;

  font-family: "Anybody", sans-serif;

  font-size: clamp(15px, 2.2vw, 28px);
  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.025em;

  text-transform: uppercase;
}


/* =========================================================
   SENTENCES
   ========================================================= */

.neat-marquee-group > span:not(.marquee-dot) {
  display: inline-block;
}


/* =========================================================
   CENTER DOTS
   ========================================================= */

.marquee-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 clamp(22px, 3vw, 52px);

  font-family: "Instrument Serif", serif;

  font-size: 0.8em;
  font-weight: 400;

  line-height: 1;

  transform: translateY(-0.04em);
}


/* =========================================================
   INFINITE MOVEMENT
   ========================================================= */

@keyframes neat-marquee-scroll {

  from {
    transform: translateX(0);
  }

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .neat-marquee {
    padding: 22px 0;
  }

  .neat-marquee-track {
    animation-duration: 18s;
  }

  .neat-marquee-group {
    font-size: clamp(23px, 7vw, 34px);

    letter-spacing: -0.02em;
  }

  .marquee-dot {
    margin: 0 22px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .neat-marquee {
    padding: 19px 0;
  }

  .neat-marquee-track {
    animation-duration: 17s;
  }

  .neat-marquee-group {
    font-size: 24px;
  }

  .marquee-dot {
    margin: 0 18px;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .neat-marquee-track {
    animation-play-state: paused;
  }

}

/* =========================================================
   WORKSHIRT EDITORIAL SECTION
   ========================================================= */

.workshirt-editorial {
  position: relative;

  width: 100%;
  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #000;
}


/* =========================================================
   IMAGE LAYOUT
   ========================================================= */

.workshirt-images {
  position: relative;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;

  margin: 0;
  padding: 0;

  gap: 0;
}


/* =========================================================
   INDIVIDUAL IMAGE
   ========================================================= */

.workshirt-image {
  position: relative;

  width: 100%;
  height: clamp(560px, 72vw, 900px);

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #000;
}


/* IMAGE */

.workshirt-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  margin: 0;
  padding: 0;

  transform: scale(1.01);

  filter:
    brightness(0.68)
    contrast(1.04)
    saturate(0.9);
}


/* =========================================================
   SHARED DARK OVERLAY

   This helps the 3 separate images visually feel like
   one continuous editorial image.
   ========================================================= */

.workshirt-images::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.02) 45%,
      rgba(0, 0, 0, 0.38) 100%
    );
}


/* =========================================================
   TEXT
   ========================================================= */

.workshirt-copy {
  position: absolute;

  left: clamp(24px, 3vw, 52px);
  bottom: clamp(28px, 4vw, 58px);

  z-index: 5;

  color: #fff;
}


/* WORKSHIRT */

.workshirt-copy h2 {
  margin: 0;

  font-family: "Instrument Serif", serif;

  font-size: clamp(54px, 6vw, 96px);
  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.04em;

  color: #fff;
}


/* NEATGARMS */

.workshirt-copy p {
  margin: 14px 0 0;

  font-family: "Anybody", sans-serif;

  font-size: 11px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .workshirt-images {
    display: block;
  }


  /*
   Only show the first image on mobile
  */

  .workshirt-image {
    display: none;
  }

  .workshirt-image-main {
    display: block;

    width: 100%;
    height: 78vh;
    min-height: 540px;
    max-height: 780px;
  }


  .workshirt-image-main img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
      brightness(0.65)
      contrast(1.04)
      saturate(0.9);
  }


  /* TEXT */

  .workshirt-copy {
    left: 20px;
    right: 20px;

    bottom: 28px;
  }


  .workshirt-copy h2 {
    font-size: clamp(52px, 16vw, 76px);

    line-height: 0.9;

    letter-spacing: -0.04em;
  }


  .workshirt-copy p {
    margin-top: 12px;

    font-size: 10px;

    letter-spacing: 0.24em;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .workshirt-image-main {
    height: 72vh;
    min-height: 500px;
  }

  .workshirt-copy {
    left: 18px;
    bottom: 24px;
  }

  .workshirt-copy h2 {
    font-size: clamp(48px, 15vw, 68px);
  }

}