/* =========================================================
   NDAMBUKI ART LAB — HOMEPAGE
   New editorial / canvas landing experience
   ========================================================= */
/* =========================================================
   NDAMBUKI ART LAB — DISPLAY FONT
   ========================================================= */

@font-face {
  font-family: "Bouncy Scriber";
  src: url("../fonts/bouncy-scriber.otf") format("opentype");

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

  font-display: swap;
}

/* =========================================================
   01 — HOMEPAGE VARIABLES
   ========================================================= */

:root {
  --home-paper: #e9e6de;
  --home-paper-light: #f3f1eb;
  --home-black: #111111;
  --home-dark: #181818;
  --home-grey: #6f6d67;
  --home-line: rgba(17, 17, 17, 0.16);
  --home-accent: #ff5b35;

  --home-display: "Space Grotesk", sans-serif;
  --home-body: "DM Sans", sans-serif;
}


/* =========================================================
   02 — RESET THE OLD HOMEPAGE THEME
   ========================================================= */

body {
  margin: 0;
  padding-top: 0 !important;

  background: var(--home-paper) !important;
  color: var(--home-black) !important;

  font-family: var(--home-body);

  cursor: auto;

  overflow-x: hidden;
}

html {
  background: var(--home-paper);
}


/* =========================================================
   03 — HEADER
   ========================================================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  height: 82px;

  z-index: 1200;

  background: transparent !important;

  transition:
    transform 0.4s ease,
    background 0.3s ease,
    backdrop-filter 0.3s ease;
}


.site-header.header-visible {
  background: rgba(233, 230, 222, 0.82) !important;

  backdrop-filter: blur(18px);

  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.08);
}


.site-header.hidden {
  transform: translateY(-100%);
}


.site-nav {
  width: 100%;
}


.site-nav .nav-inner {
  width: 100%;
  max-width: none;

  height: 82px;

  padding:
    0
    clamp(22px, 4vw, 64px);

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

  margin: 0;
}


/* Brand */

.brand {
  font-family: var(--home-display) !important;

  color: var(--home-black) !important;

  font-size:
    clamp(0.85rem, 1vw, 1rem);

  font-weight: 700;

  letter-spacing: -0.035em;

  text-decoration: none;

  white-space: nowrap;
}


/* Navigation */

.nav-links {
  display: flex;

  align-items: center;

  gap: clamp(18px, 2.5vw, 42px);

  margin: 0;

  padding: 0;

  list-style: none;
}


.nav-links a {
  position: relative;

  color: var(--home-black) !important;

  font-family: var(--home-body);

  font-size: 0.78rem;

  font-weight: 600;

  letter-spacing: 0.02em;

  text-decoration: none;

  padding: 8px 0;

  transition: opacity 0.25s ease;
}


.nav-links a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 0;
  height: 1px;

  background: var(--home-black);

  transition: width 0.3s ease;
}


.nav-links a:hover {
  opacity: 0.55;
}


.nav-links a:hover::after {
  width: 100%;
}


/* Support */

.nav-cta {
  min-width: auto;

  padding:
    11px 18px;

  border: 1px solid var(--home-black);

  border-radius: 0;

  background: var(--home-black) !important;

  color: var(--home-paper) !important;

  font-family: var(--home-body);

  font-size: 0.75rem;

  font-weight: 700;

  letter-spacing: 0.03em;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}


.nav-cta:hover {
  background: transparent !important;

  color: var(--home-black) !important;
}


/* =========================================================
   04 — HERO CANVAS
   ========================================================= */

.hero-landing {
  position: relative;

  width: 100%;

  min-height: 100svh;

  height: 100svh;

  padding: 0 !important;

  display: block !important;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(255,255,255,0.65),
      transparent 30%
    ),
    var(--home-paper);

  isolation: isolate;
}


/* Subtle paper texture */

.hero-landing::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.13;

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

  mix-blend-mode: multiply;
}


/* =========================================================
   05 — THREE.JS CANVAS
   ========================================================= */

.hero-canvas {
  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;
}


#hero-3d-canvas {
  display: block;

  width: 100%;
  height: 100%;

  pointer-events: auto;
}


/* =========================================================
   06 — VIDEO
   ========================================================= */

.hero-media {
  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;

  opacity: 0.10;

  mix-blend-mode: multiply;
}


.hero-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    grayscale(100%)
    contrast(0.85)
    brightness(1.2);

  opacity: 1 !important;
}


/* =========================================================
   07 — DECORATIVE FLOWER
   ========================================================= */

.hero-flower {
  position: absolute;

  z-index: 4;

  right:
    clamp(-120px, -5vw, -40px);

  top: 53%;

  width:
    clamp(220px, 28vw, 500px);

  max-width: none;

  opacity: 0.72;

  pointer-events: none;

  filter:
    grayscale(100%)
    contrast(1.05);

  mix-blend-mode: multiply;

  animation:
    homeFlowerFloat 8s ease-in-out infinite;

  transform-origin: center;
}


@keyframes homeFlowerFloat {

  0%,
  100% {
    transform:
      translateY(-50%)
      rotate(-8deg);
  }

  50% {
    transform:
      translateY(calc(-50% - 16px))
      rotate(5deg);
  }

}


/* =========================================================
   08 — HERO CONTENT
   ========================================================= */

.hero-inner {
  position: relative;

  z-index: 10;

  width: 100%;
  height: 100%;

  max-width: none;

  padding:
    120px
    clamp(22px, 5vw, 72px)
    48px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}


/* =========================================================
   09 — HERO META
   ========================================================= */

.hero-meta {
  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-bottom: 16px;

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

  color: var(--home-grey);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.hero-meta span:last-child {
  text-align: right;
}


/* =========================================================
   10 — HERO HEADING
   ========================================================= */

.hero-heading {
  position: relative;

  z-index: 5;

  width: min(100%, 1050px);

  margin: auto 0;

  padding: 25px 0;

  color: var(--home-black) !important;

  font-family: var(--home-display) !important;

  font-size:
    clamp(4rem, 9.5vw, 10rem) !important;

  font-weight: 700 !important;

  line-height: 0.82 !important;

  letter-spacing: -0.085em !important;

  word-spacing: normal !important;

  text-transform: uppercase;

  text-shadow: none !important;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0;
}


/* Individual lines */

.hero-line {
  display: block;

  opacity: 0;

  transform:
    translateY(35px);

  animation:
    heroLineIn 0.9s
    cubic-bezier(.16,1,.3,1)
    forwards;
}


.hero-line:nth-child(1) {
  animation-delay: 0.1s;
}


.hero-line:nth-child(2) {
  animation-delay: 0.18s;
}


.hero-line:nth-child(3) {
  animation-delay: 0.26s;
}


.hero-line:nth-child(4) {
  animation-delay: 0.34s;
}


@keyframes heroLineIn {

  from {
    opacity: 0;

    transform:
      translateY(35px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* Outline typography */

.hero-line-outline {
  color: transparent !important;

  -webkit-text-stroke:
    1.5px var(--home-black);

  text-shadow: none !important;
}


/* =========================================================
   11 — HERO BOTTOM
   ========================================================= */

.hero-bottom {
  position: relative;

  z-index: 20;

  display: grid;

  grid-template-columns:
    minmax(240px, 0.7fr)
    minmax(320px, 1fr);

  gap: 40px;

  align-items: end;
}


.hero-description {
  max-width: 330px;
}


.hero-description p {
  margin: 0 0 14px;

  color: var(--home-black) !important;

  font-family: var(--home-body);

  font-size:
    clamp(0.85rem, 1vw, 1rem);

  line-height: 1.5;

  font-weight: 500;
}


.hero-location {
  display: block;

  color: var(--home-grey);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   12 — HERO ACTIONS
   ========================================================= */

.hero-actions {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 0;

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


.hero-action {
  min-width: 190px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 35px;

  padding:
    18px 0
    18px 20px;

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

  color: var(--home-black);

  font-size: 0.78rem;

  font-weight: 700;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.02em;

  transition:
    background 0.3s ease,
    padding 0.3s ease,
    color 0.3s ease;
}


.hero-action + .hero-action {
  border-left: 1px solid var(--home-line);
}


.hero-action:hover {
  padding-left: 28px;

  background: var(--home-black);

  color: var(--home-paper);
}


.hero-action-primary {
  background: var(--home-black);

  color: var(--home-paper);
}


.hero-action-primary:hover {
  background: var(--home-accent);

  color: #111;
}


.action-arrow {
  font-size: 1.2rem;

  transition:
    transform 0.3s ease;
}


.hero-action:hover .action-arrow {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   13 — SCROLL INDICATOR
   ========================================================= */

.hero-scroll {
  position: absolute;

  right:
    clamp(22px, 5vw, 72px);

  bottom: 48px;

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--home-grey);

  font-size: 0.58rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  writing-mode: vertical-rl;
}


.scroll-line {
  display: block;

  width: 1px;

  height: 45px;

  background: var(--home-black);

  opacity: 0.4;

  animation:
    scrollPulse 2s ease-in-out infinite;
}


@keyframes scrollPulse {

  0%,
  100% {
    transform: scaleY(0.5);

    transform-origin: top;
  }

  50% {
    transform: scaleY(1);

    transform-origin: top;
  }

}


/* =========================================================
   14 — WORKS SECTION
   ========================================================= */

.works {
  position: relative;

  padding:
    150px
    clamp(22px, 5vw, 72px)
    170px;

  background: var(--home-black) !important;

  color: var(--home-paper);

  overflow: hidden;
}


.works-inner {
  max-width: 1500px;

  margin: 0 auto;
}


/* Section intro */

.section-intro {
  display: grid;

  grid-template-columns:
    100px 1fr;

  gap: 20px;

  margin-bottom: 90px;
}


.section-number {
  color: var(--home-grey);

  font-family: var(--home-display);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.12em;
}


.section-label {
  display: block;

  margin-bottom: 18px;

  color: var(--home-grey);

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.section-title {
  margin: 0 !important;

  color: var(--home-paper) !important;

  font-family: var(--home-display) !important;

  font-size:
    clamp(3.5rem, 8vw, 9rem) !important;

  font-weight: 600;

  line-height: 0.82;

  letter-spacing: -0.075em;
}


/* =========================================================
   15 — WORK CARDS
   ========================================================= */

.cards {
  display: grid;

  grid-template-columns:
    1.2fr
    1fr
    0.8fr;

  gap: 2px;

  align-items: stretch;
}


.card {
  position: relative;

  min-height: 620px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  overflow: hidden;

  border-radius: 0 !important;

  background: #242424 !important;

  color: var(--home-paper) !important;

  box-shadow: none !important;

  text-decoration: none;

  transition:
    transform 0.5s cubic-bezier(.16,1,.3,1);
}


.card:hover {
  transform:
    translateY(-12px);
}


.card figure {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;
}


.card figure::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      transparent 25%,
      rgba(0,0,0,0.8) 100%
    );
}


.card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  filter:
    grayscale(20%)
    contrast(1.05);

  transition:
    transform 0.8s
    cubic-bezier(.16,1,.3,1);
}


.card:hover img {
  transform: scale(1.07);
}


.card-body {
  position: relative;

  z-index: 5;

  padding:
    32px;

  margin-top: auto;
}


.card-index {
  display: block;

  margin-bottom: 25px;

  color: rgba(255,255,255,0.6);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.15em;
}


.card h3 {
  margin: 0 0 12px !important;

  color: #fff !important;

  font-family: var(--home-display) !important;

  font-size:
    clamp(2rem, 3vw, 3.4rem);

  font-weight: 600;

  line-height: 0.95;

  letter-spacing: -0.055em;
}


.card p {
  max-width: 320px;

  margin: 0 0 25px;

  color: rgba(255,255,255,0.72) !important;

  font-family: var(--home-body);

  font-size: 0.85rem;

  line-height: 1.55;
}


.card-link {
  display: inline-block;

  padding-bottom: 5px;

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

  color: #fff;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================================================
   16 — ARTIST STATEMENT
   ========================================================= */

.artist-statement {
  padding:
    170px
    clamp(22px, 5vw, 72px);

  background: var(--home-paper);

  color: var(--home-black);
}


.statement-inner {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    100px 1fr;
}


.statement-content {
  max-width: 1000px;
}


.statement-small {
  margin: 0 0 45px;

  color: var(--home-grey);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1.5;
}


.statement-content h2 {
  margin: 0;

  max-width: 1000px;

  font-family: var(--home-display) !important;

  font-size:
    clamp(3.5rem, 7.5vw, 8rem);

  line-height: 0.85;

  letter-spacing: -0.075em;

  font-weight: 600;
}


.statement-text {
  max-width: 530px;

  margin:
    65px 0 35px
    auto;

  color: var(--home-grey);

  font-size:
    clamp(1rem, 1.3vw, 1.25rem);

  line-height: 1.55;
}


.statement-link {
  display: flex;

  width: fit-content;

  align-items: center;

  gap: 30px;

  margin-left: auto;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--home-black);

  color: var(--home-black);

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  text-decoration: none;
}


.statement-link span {
  font-size: 1.1rem;

  transition:
    transform 0.25s ease;
}


.statement-link:hover span {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   17 — CONTACT
   ========================================================= */

.contact {
  padding:
    150px
    clamp(22px, 5vw, 72px);

  background: var(--home-paper-light) !important;

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

  color: var(--home-black) !important;
}


.contact-inner {
  max-width: 1500px;

  margin: 0 auto;

  text-align: left;
}


.contact-top {
  display: flex;

  gap: 50px;

  align-items: center;

  margin-bottom: 60px;
}


.contact-top .section-label {
  margin: 0;
}


.contact h2 {
  margin: 0;

  font-family: var(--home-display) !important;

  font-size:
    clamp(4rem, 10vw, 11rem);

  line-height: 0.8;

  letter-spacing: -0.085em;

  font-weight: 600;
}


.contact-inner > p {
  max-width: 430px;

  margin:
    55px 0 70px
    auto;

  color: var(--home-grey) !important;

  font-size: 1rem;

  line-height: 1.55;

  text-align: left;
}


.contact-links {
  display: grid;

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

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


.contact-link {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    24px 20px;

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

  color: var(--home-black) !important;

  font-size: 0.8rem;

  font-weight: 700;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}


.contact-link + .contact-link {
  border-left:
    1px solid var(--home-line);
}


.contact-link:hover {
  background: var(--home-black);

  color: var(--home-paper) !important;
}


/* =========================================================
   18 — FOOTER
   ========================================================= */

.site-footer {
  margin: 0 !important;

  padding:
    80px
    clamp(22px, 5vw, 72px);

  background: var(--home-black) !important;

  border: none !important;

  color: var(--home-paper);
}


.footer-content {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

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

  gap: 50px;

  align-items: end;

  text-align: left;
}


.footer-brand h3 {
  margin: 0;

  color: var(--home-paper);

  font-family: var(--home-display);

  font-size:
    clamp(2rem, 4vw, 4rem);

  line-height: 0.82;

  letter-spacing: -0.07em;
}


.footer-description {
  max-width: 280px;
}


.footer-description p {
  margin: 0;

  color: rgba(233,230,222,0.55);

  font-size: 0.8rem;

  line-height: 1.55;
}


.footer-meta {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 8px;

  color: rgba(233,230,222,0.45);

  font-size: 0.65rem;

  font-weight: 600;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.footer-copy {
  margin: 0 !important;

  color: inherit;
}


/* =========================================================
   19 — MOBILE NAVIGATION
   ========================================================= */

.nav-toggle {
  display: none;

  border: 0;

  background: transparent;

  padding: 10px;

  cursor: pointer;
}


.nav-toggle .bar {
  display: block;

  width: 24px;

  height: 2px;

  margin: 5px 0;

  background: var(--home-black);

  border-radius: 0;
}


.menu-overlay {
  display: none;
}


/* =========================================================
   20 — TABLET
   ========================================================= */

@media (max-width: 980px) {

  .site-nav .nav-inner {
    height: 72px;
  }


  .site-header {
    height: 72px;
  }


  .nav-links,
  .nav-cta {
    display: none;
  }


  .nav-toggle {
    display: block;
  }


  .site-header.menu-open .menu-overlay {
    display: block;

    position: fixed;

    inset: 0;

    z-index: 1;

    background:
      rgba(17,17,17,0.2);

    backdrop-filter:
      blur(5px);
  }


  .site-header.menu-open .nav-links {
    position: fixed;

    top: 72px;

    left: 22px;

    right: 22px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 10px 0;

    background: var(--home-paper);

    border:
      1px solid var(--home-line);

    box-shadow:
      0 25px 60px rgba(0,0,0,0.12);
  }


  .site-header.menu-open .nav-links a {
    display: block;

    padding: 18px 20px;

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


  .site-header.menu-open .nav-links li:last-child a {
    border-bottom: 0;
  }


  .hero-inner {
    padding:
      105px
      24px
      30px;
  }


  .hero-heading {
    font-size:
      clamp(4rem, 11vw, 7rem) !important;
  }


  .hero-bottom {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .hero-actions {
    justify-content: flex-start;
  }


  .hero-scroll {
    display: none;
  }


  .hero-flower {
    width:
      clamp(260px, 40vw, 400px);

    right: -100px;

    opacity: 0.5;
  }


  .cards {
    grid-template-columns:
      1fr 1fr;
  }


  .card {
    min-height: 540px;
  }


  .card-trips {
    grid-column:
      span 2;
  }


  .contact-inner > p {
    margin-left: 0;
  }


  .footer-content {
    grid-template-columns:
      1fr 1fr;
  }


  .footer-meta {
    align-items: flex-start;
  }

}


/* =========================================================
   21 — PHONE
   ========================================================= */

@media (max-width: 600px) {

  .site-nav .nav-inner {
    padding:
      0 18px;
  }


  .brand {
    font-size: 0.78rem;
  }


  .hero-landing {
    min-height: 100svh;

    height: auto;

    padding-bottom: 40px;
  }


  .hero-inner {
    min-height: 100svh;

    padding:
      96px
      18px
      30px;
  }


  .hero-meta {
    font-size: 0.55rem;

    gap: 15px;
  }


  .hero-heading {
    margin:
      auto 0 40px;

    font-size:
      clamp(3.2rem, 15vw, 5.5rem) !important;

    line-height: 0.84 !important;

    letter-spacing:
      -0.075em !important;
  }


  .hero-line-outline {
    -webkit-text-stroke:
      1px var(--home-black);
  }


  .hero-bottom {
    gap: 22px;
  }


  .hero-description {
    max-width: 270px;
  }


  .hero-description p {
    font-size: 0.8rem;
  }


  .hero-actions {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    width: 100%;
  }


  .hero-action {
    min-width: 0;

    padding:
      15px 10px;

    gap: 8px;

    font-size: 0.58rem;
  }


  .hero-action + .hero-action {
    border-left:
      1px solid var(--home-line);
  }


  .hero-flower {
    width: 230px;

    right: -100px;

    top: 50%;

    opacity: 0.28;
  }


  .hero-media {
    opacity: 0.06;
  }


  .works {
    padding:
      100px
      18px
      110px;
  }


  .section-intro {
    grid-template-columns:
      45px 1fr;

    margin-bottom: 55px;
  }


  .section-title {
    font-size:
      clamp(3rem, 15vw, 5rem) !important;
  }


  .cards {
    grid-template-columns:
      1fr;

    gap: 2px;
  }


  .card,
  .card-trips {
    grid-column: auto;

    min-height: 500px;
  }


  .card-body {
    padding: 25px;
  }


  .card h3 {
    font-size: 2.3rem;
  }


  .artist-statement {
    padding:
      110px
      18px;
  }


  .statement-inner {
    grid-template-columns:
      45px 1fr;
  }


  .statement-content h2 {
    font-size:
      clamp(3rem, 14vw, 5rem);
  }


  .statement-text {
    margin:
      45px 0 30px;
  }


  .statement-link {
    margin-left: 0;
  }


  .contact {
    padding:
      110px
      18px;
  }


  .contact-top {
    gap: 20px;

    margin-bottom: 45px;
  }


  .contact h2 {
    font-size:
      clamp(3.5rem, 16vw, 6rem);
  }


  .contact-inner > p {
    margin:
      45px 0;
  }


  .contact-links {
    grid-template-columns:
      1fr;
  }


  .contact-link + .contact-link {
    border-left: 0;
  }


  .site-footer {
    padding:
      65px
      18px;
  }


  .footer-content {
    grid-template-columns:
      1fr;

    gap: 35px;
  }


  .footer-meta {
    align-items: flex-start;
  }

}


/* =========================================================
   22 — VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .hero-heading {
    font-size:
      3rem !important;
  }


  .hero-action {
    font-size:
      0.52rem;
  }


  .hero-action .action-arrow {
    display: none;
  }

}


/* =========================================================
   23 — ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

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

  .hero-line {
    opacity: 1;

    transform: none;

    animation: none;
  }


  .hero-flower {
    animation: none;
  }


  .scroll-line {
    animation: none;
  }


  .card,
  .card img,
  .hero-action,
  .statement-link span {
    transition: none;
  }

}
/* =========================================================
   NDAMBUKI ART LAB — NEW HERO COMPOSITION
   ========================================================= */

.hero-landing {
  position: relative !important;
  width: 100%;
  height: 100svh;
  min-height: 700px;

  padding: 0 !important;
  margin: 0;

  overflow: hidden;

background: #8f4b55 !important;

  isolation: isolate;
}
/* Subtle painted-paper grain */
.hero-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  opacity: 0.18;

  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.32'/%3E%3C/svg%3E");

  background-repeat: repeat;
  background-size: 180px 180px;

  mix-blend-mode: soft-light;
}

/* Hide old hero information while redesigning */

.hero-meta,
.hero-bottom,
.hero-scroll {
  display: none !important;
}


.hero-inner {
  position: static !important;

  width: 100%;
  height: 100%;

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

  z-index: auto !important;
}


/* =========================================================
   BACK TYPOGRAPHY
   VOCAL ENOUGH? + LET ME JUST
   ========================================================= */

.hero-type-back {
  position: absolute;
  inset: 0;

  z-index: 10;

  pointer-events: none;
}


.hero-main-title {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);

  width: 96vw;
  margin: 0;
  padding: 0;

  text-align: center;

  font-family: "Gochi Hand", cursive;
  font-weight: 400;

color: #fff;

  line-height: 0.95;
  letter-spacing: 0;

  text-transform: uppercase;
}


.hero-vocal,
.hero-enough {
  display: inline;

  font-size: clamp(6rem, 12.5vw, 13rem);

  line-height: 0.95;
  letter-spacing: 0;

  white-space: nowrap;
}


.hero-vocal::after {
  content: " ";
}


.hero-letme {
  display: block;

  margin-top: 0.18em;

  font-size: clamp(3.8rem, 7vw, 7.5rem);

  line-height: 1;
  letter-spacing: 0.01em;

  white-space: nowrap;
}


/* =========================================================
   3D PAINT TUBE — MIDDLE
   ========================================================= */

.hero-canvas {
  position: absolute !important;

  inset: 0 !important;

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

  z-index: 20 !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;
}


#hero-3d-canvas {
  position: absolute;

  inset: 0;

  display: block !important;

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

  pointer-events: none !important;
}


/* =========================================================
   FRONT TYPOGRAPHY
   PAINT IT! sits IN FRONT of tube
   ========================================================= */

.hero-type-front {
  position: absolute;

  inset: 0;

  z-index: 30;

  pointer-events: none;
}


.hero-paint-it {
  position: absolute;
  left: 50%;
  top: 69%;
  transform: translate(-50%, -50%);

  width: 96vw;
  margin: 0;

  text-align: center;

  font-family: "Gochi Hand", cursive;
  font-size: clamp(6rem, 13vw, 14rem);
  font-weight: 400;

  line-height: 0.95;
  letter-spacing: 0;

  text-transform: uppercase;
  white-space: nowrap;

color: #fff;
}
/* =========================================================
   I NEVER DISAPPOINT
   ========================================================= */

.hero-promise {
  position: absolute;

  left: 50%;
  top: 84%;

  transform: translateX(-50%);

  color: #fff;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: 0.12em;

  text-transform: uppercase;
  white-space: nowrap;
}
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .hero-landing {
    min-height: 100svh;
  }


  .hero-main-title {
    top: 39%;

    width: 94vw;

    line-height: 0.76;
  }


  .hero-vocal,
  .hero-enough {
    display: block;

    font-size: clamp(
      4rem,
      20vw,
      6.8rem
    );
  }


  .hero-vocal::after {
    content: "";
  }


  .hero-letme {
    margin-top: 0.08em;

    font-size: clamp(
      2.6rem,
      12vw,
      4.2rem
    );
  }


  .hero-paint-it {
    top: 67%;

    font-size: clamp(
      4.2rem,
      21vw,
      7rem
    );
  }


  .hero-promise {
    top: 79%;

    font-size: 0.58rem;

    letter-spacing: 0.12em;
  }

}
/* =========================================================
   FLOATING HERO HEADER
========================================================= */

.hero-header {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 100;

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

  padding: 24px 38px;

  color: #fff;

  pointer-events: none;
}


/* allow header controls to work */

.hero-header a,
.hero-header button {
  pointer-events: auto;
}


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

.hero-header-left {
  display: flex;
  align-items: center;

  gap: 20px;

  justify-self: start;
}


.hero-home-link {
  color: #fff;

  text-decoration: none;

  font-family: "Space Grotesk", sans-serif;

  font-size: 0.75rem;
  font-weight: 600;

  letter-spacing: 0.14em;
}


.hero-socials {
  display: flex;
  align-items: center;

  gap: 10px;
}


.hero-social-link {
  display: flex;

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

  width: 28px;
  height: 28px;

  color: #fff;
}


.hero-social-link svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
}


/* =========================================================
   CENTER LOGO
========================================================= */

.hero-header-center {
  display: flex;

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

  gap: 18px;

  justify-self: center;
}


.logo-line {
  display: block;

  width: clamp(55px, 7vw, 120px);
  height: 1px;

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


.hero-logo-link {
  display: block;

  line-height: 0;
}


.hero-logo {
  display: block;

  width: clamp(110px, 10vw, 155px);
  height: auto;

  object-fit: contain;
}


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

.hero-header-right {
  display: flex;

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

  gap: 9px;

  justify-self: end;
}


.order-art-button {
  display: inline-flex;

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

  min-height: 44px;

  padding: 0 20px;

  border-radius: 999px;

  background: #58734c;

  color: #fff;

  text-decoration: none;

  font-family: "Space Grotesk", sans-serif;

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.order-art-button:hover {
  transform: translateY(-2px);

  background: #67865a;
}


/* CART + MENU */

.hero-icon-button {
  width: 44px;
  height: 44px;

  display: flex;

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

  border: 1px solid rgba(255,255,255,0.55);

  border-radius: 50%;

  background: transparent;

  color: #fff;

  text-decoration: none;
}


.hero-icon-button svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* menu lines */

.hero-menu-button {
  flex-direction: column;

  gap: 5px;

  cursor: pointer;
}


.hero-menu-button span {
  display: block;

  width: 17px;
  height: 1.5px;

  background: #fff;
}


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

@media (max-width: 768px) {

  .hero-header {
    padding: 17px 16px;

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


  /* social icons hidden on small screens */

  .hero-socials {
    display: none;
  }


  .hero-home-link {
    font-size: 0.62rem;
  }


  .hero-header-center {
    gap: 7px;
  }


  .logo-line {
    width: 18px;
  }


  .hero-logo {
    width: 82px;
  }


  .order-art-button {
    display: none;
  }


  .hero-icon-button {
    width: 36px;
    height: 36px;
  }


  .hero-header-right {
    gap: 6px;
  }

}
/* =========================================================
   ROTATING PERSONALITY RING
========================================================= */

.hero-word-ring {
  position: absolute;

  left: 4vw;
  top: 50%;

  transform: translateY(-50%);

  width: clamp(125px, 11vw, 175px);
  aspect-ratio: 1;

  z-index: 40;

  color: #fff;

  pointer-events: none;
}


/* rotating part */

.hero-word-ring svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  animation:
    personalityRingRotate
    18s
    linear
    infinite;
}


.hero-word-ring text {
  fill: #fff;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 2.2px;

  text-transform: uppercase;
}


/* center star stays still */

.ring-center {
  position: absolute;

  left: 50%;
  top: 50%;

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

  display: flex;

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

  width: 46px;
  height: 46px;

  border: 1px solid
    rgba(255,255,255,.45);

  border-radius: 50%;

  color: #fff;

  font-size: 19px;
}


/* rotation */

@keyframes personalityRingRotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


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

@media (max-width: 1000px) {

  .hero-word-ring {
    left: 2vw;

    width: 115px;
  }

}


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

@media (max-width: 768px) {

  .hero-word-ring {
    left: 18px;

    top: auto;
    bottom: 70px;

    transform: none;

    width: 92px;
  }


  .hero-word-ring text {
    font-size: 10px;

    letter-spacing: 1.7px;
  }


  .ring-center {
    width: 34px;
    height: 34px;

    font-size: 14px;
  }

}


/* accessibility */

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

  .hero-word-ring svg {
    animation: none;
  }

}
/* =========================================================
   NDAMBUKI ART LAB — HOMEPAGE CART DRAWER
========================================================= */


/* ---------------------------------------------------------
   FIX CURSOR ON HEADER CONTROLS
--------------------------------------------------------- */

.hero-header a,
.hero-header button,
.order-art-button,
.hero-icon-button,
.hero-cart-button,
.hero-menu-button {
  cursor: pointer !important;
}

.hero-header *,
.hero-icon-button * {
  cursor: pointer !important;
}


/* ---------------------------------------------------------
   CART COUNT
--------------------------------------------------------- */

.hero-cart-button {
  position: relative;
}

.home-cart-count {
  position: absolute;

  top: -4px;
  right: -4px;

  min-width: 18px;
  height: 18px;

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

  padding: 0 5px;

  border-radius: 999px;

  background: #fff;
  color: #8f4b55;

  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  opacity: 0;
  transform: scale(0.6);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.home-cart-count.has-items {
  opacity: 1;
  transform: scale(1);
}


/* ---------------------------------------------------------
   DARK PAGE OVERLAY
--------------------------------------------------------- */

.home-cart-overlay {
  position: fixed;

  inset: 0;

  z-index: 1998;

  background: rgba(32, 13, 18, 0.46);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.home-cart-overlay.show {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  cursor: pointer;
}


/* ---------------------------------------------------------
   CART DRAWER
--------------------------------------------------------- */

.home-cart-drawer {
  position: fixed;

  top: 0;
  right: 0;

  width: min(440px, 100vw);
  height: 100dvh;

  z-index: 1999;

  display: flex;
  flex-direction: column;

  padding: 30px;

  background: #eee7dc;
  color: #26181a;

  box-shadow:
    -30px 0 80px rgba(20, 5, 9, 0.22);

  transform: translateX(105%);

  visibility: hidden;

  transition:
    transform 0.55s cubic-bezier(.76, 0, .24, 1),
    visibility 0.55s;
}


/* THIS IS WHAT ACTUALLY MAKES IT APPEAR */

.home-cart-drawer.open {
  transform: translateX(0);

  visibility: visible;
}


/* prevent page scrolling */

body.cart-open {
  overflow: hidden;
}


/* ---------------------------------------------------------
   CART HEADER
--------------------------------------------------------- */

.home-cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 24px;

  border-bottom:
    1px solid rgba(38, 24, 26, 0.18);
}


.home-cart-eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family: "Space Grotesk", Arial, sans-serif;

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

  letter-spacing: 0.18em;

  color: #8f4b55;
}


.home-cart-header h2 {
  margin: 0;

  font-family: "Gochi Hand", cursive;

  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 400;

  line-height: 0.95;

  color: #26181a;
}


/* CLOSE */

.home-cart-close {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

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

  padding: 0;

  border:
    1px solid rgba(38, 24, 26, 0.28);

  border-radius: 50%;

  background: transparent;

  color: #26181a;

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

  line-height: 1;

  cursor: pointer !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


.home-cart-close:hover {
  background: #8f4b55;

  color: #fff;

  transform: rotate(90deg);
}


/* ---------------------------------------------------------
   CART CONTENT
--------------------------------------------------------- */

.home-cart-items {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  padding: 35px 0;
}


/* EMPTY STATE */

.home-cart-empty-state {
  min-height: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: flex-start;
}


.home-cart-empty-icon {
  display: block;

  margin-bottom: 20px;

  color: #8f4b55;

  font-size: 2.2rem;
}


.home-cart-empty-state h3 {
  margin: 0 0 10px;

  font-family: "Gochi Hand", cursive;

  font-size: 2.3rem;
  font-weight: 400;

  color: #26181a;
}


.home-cart-empty-state p {
  max-width: 280px;

  margin: 0 0 25px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 0.9rem;

  line-height: 1.6;

  color: rgba(38, 24, 26, 0.65);
}


.home-cart-empty-state a {
  color: #26181a;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-decoration: none;

  cursor: pointer !important;
}


/* ---------------------------------------------------------
   CART WITH ITEMS
--------------------------------------------------------- */

.home-cart-summary {
  padding: 35px 0;
}


.home-cart-summary > span {
  display: block;

  margin-bottom: 8px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.18em;

  color: #8f4b55;
}


.home-cart-summary strong {
  display: block;

  font-family: "Gochi Hand", cursive;

  font-size: 3rem;
  font-weight: 400;

  line-height: 1;

  color: #26181a;
}


.home-cart-summary p {
  max-width: 300px;

  margin-top: 18px;

  font-size: 0.9rem;

  line-height: 1.6;

  color: rgba(38, 24, 26, 0.65);
}


.home-cart-view-full {
  display: flex;

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

  padding: 18px 0;

  border-top:
    1px solid rgba(38, 24, 26, 0.18);

  border-bottom:
    1px solid rgba(38, 24, 26, 0.18);

  color: #26181a;

  text-decoration: none;

  font-size: 0.75rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  cursor: pointer !important;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.home-cart-footer {
  padding-top: 20px;

  border-top:
    1px solid rgba(38, 24, 26, 0.18);
}


.home-cart-total-row {
  display: flex;

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

  margin-bottom: 18px;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 0.8rem;
}


.home-cart-shop-button {
  min-height: 58px;

  display: flex;

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

  padding: 0 22px;

  border-radius: 999px;

  background: #55744d;

  color: #fff;

  text-decoration: none;

  font-family: "Space Grotesk", Arial, sans-serif;

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  cursor: pointer !important;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.home-cart-shop-button:hover {
  background: #63865a;

  transform: translateY(-2px);
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 600px) {

  .home-cart-drawer {
    width: 100%;

    padding:
      22px
      20px
      max(22px, env(safe-area-inset-bottom));
  }


  .home-cart-header h2 {
    font-size: 3rem;
  }


  .home-cart-close {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }


  .home-cart-shop-button {
    min-height: 54px;
  }

}
/* =========================================================
   NDAMBUKI ART LAB — FULL SCREEN MENU
========================================================= */

.home-menu-overlay {
  position: fixed;
  inset: 0;

  z-index: 3000;

  display: flex;
  flex-direction: column;

  min-height: 100dvh;

  padding: 28px 38px 24px;

  background: #eee7dc;
  color: #8f4b55;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-100%);

  transition:
    transform 0.65s cubic-bezier(.76, 0, .24, 1),
    opacity 0.4s ease,
    visibility 0.65s;
}


/* OPEN */

.home-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0);
}


/* =========================================================
   TOP LOGO
========================================================= */

.home-menu-top {
  width: 100%;

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

  gap: 18px;

  flex-shrink: 0;
}


.home-menu-top-line {
  width: clamp(60px, 8vw, 130px);
  height: 1px;

  background: rgba(143, 75, 85, 0.55);
}


.home-menu-logo {
  width: clamp(90px, 9vw, 135px);
  height: auto;

  object-fit: contain;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.home-menu-close {
  position: absolute;

  top: 27px;
  right: 38px;

  width: 46px;
  height: 46px;

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

  border:
    1px solid rgba(143,75,85,0.45);

  border-radius: 50%;

  background: transparent;

  cursor: pointer !important;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.home-menu-close:hover {
  background: #8f4b55;

  transform: rotate(90deg);
}


.home-menu-close span {
  position: absolute;

  width: 18px;
  height: 1.5px;

  background: #8f4b55;

  transition: background 0.25s ease;
}


.home-menu-close span:first-child {
  transform: rotate(45deg);
}


.home-menu-close span:last-child {
  transform: rotate(-45deg);
}


.home-menu-close:hover span {
  background: #fff;
}


/* =========================================================
   MENU CONTENT
========================================================= */

.home-menu-content {
  flex: 1;

  width: 100%;

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

  min-height: 0;

  padding: 35px 0 25px;
}


.home-menu-nav {
  width: min(100%, 1050px);

  display: flex;
  flex-direction: column;
}


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

.home-menu-link {
  position: relative;

  display: grid;

  grid-template-columns:
    55px
    1fr
    55px;

  align-items: center;

  min-height: 92px;

  padding: 5px 10px;

  border-bottom:
    1px solid rgba(143,75,85,0.22);

  color: #8f4b55;

  text-decoration: none;

  overflow: hidden;

  cursor: pointer !important;
}


.home-menu-link:first-child {
  border-top:
    1px solid rgba(143,75,85,0.22);
}


/* NUMBER */

.menu-number {
  align-self: start;

  padding-top: 19px;

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 0.65rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  opacity: 0.65;
}


/* LARGE HANDWRITTEN NAME */

.menu-name {
  font-family:
    "Gochi Hand",
    cursive;

  font-size:
    clamp(3.1rem, 6vw, 6.5rem);

  font-weight: 400;

  line-height: 0.85;

  letter-spacing: -0.015em;

  transition:
    transform 0.4s cubic-bezier(.2,.8,.2,1);
}


/* ARROW */

.menu-arrow {
  justify-self: end;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 1.3rem;

  transition:
    transform 0.35s ease;
}


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

.home-menu-link:hover .menu-name {
  transform: translateX(18px);
}


.home-menu-link:hover .menu-arrow {
  transform:
    translate(4px, -4px);
}


/* little maroon fill sweeping underneath */

.home-menu-link::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: #8f4b55;

  transform: scaleY(0);

  transform-origin: bottom;

  transition:
    transform 0.4s cubic-bezier(.76,0,.24,1);
}


.home-menu-link:hover::before {
  transform: scaleY(1);
}


.home-menu-link:hover {
  color: #fff;
}


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

.home-menu-bottom {
  width: 100%;

  display: flex;

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

  gap: 20px;

  flex-shrink: 0;

  padding-top: 18px;

  border-top:
    1px solid rgba(143,75,85,0.25);

  font-family:
    "Space Grotesk",
    Arial,
    sans-serif;

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.12em;
}


.home-menu-bottom a {
  color: inherit;

  text-decoration: none;

  cursor: pointer !important;
}


/* =========================================================
   MENU OPEN BODY
========================================================= */

body.menu-open {
  overflow: hidden;
}


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

@media (max-width: 700px) {

  .home-menu-overlay {
    padding:
      20px
      18px
      max(20px, env(safe-area-inset-bottom));
  }


  .home-menu-top {
    justify-content: flex-start;

    gap: 9px;
  }


  .home-menu-top-line {
    width: 25px;
  }


  .home-menu-logo {
    width: 82px;
  }


  .home-menu-close {
    top: 18px;
    right: 18px;

    width: 40px;
    height: 40px;
  }


  .home-menu-content {
    padding:
      40px
      0
      25px;
  }


  .home-menu-link {
    grid-template-columns:
      32px
      1fr
      30px;

    min-height: 78px;

    padding:
      4px
      3px;
  }


  .menu-number {
    padding-top: 14px;

    font-size: 0.55rem;
  }


  .menu-name {
    font-size:
      clamp(2.8rem, 13vw, 4.6rem);

    line-height: 0.88;
  }


  .menu-arrow {
    font-size: 1rem;
  }


  .home-menu-link:hover .menu-name {
    transform: translateX(7px);
  }


  .home-menu-bottom {
    align-items: flex-start;

    font-size: 0.5rem;

    letter-spacing: 0.07em;
  }


  .home-menu-bottom span:nth-child(2) {
    display: none;
  }

}

/* =========================================================
   2026 HERO + SCROLL EXPERIENCE
   Clean final overrides
========================================================= */

.hero-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 92px;
  z-index: 1500;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px clamp(24px, 3vw, 48px);
  pointer-events: none;
}
.hero-header-left,.hero-header-right,.hero-logo-link { pointer-events:auto; }
.hero-header-left { justify-self:start; display:flex; align-items:center; gap:18px; z-index:3; }
.hero-header-right { justify-self:end; display:flex; align-items:center; gap:8px; z-index:3; }
.hero-header-center { position:relative; justify-self:center; display:flex; align-items:center; z-index:1; }
.hero-logo-link { position:relative; z-index:2; padding:0 18px; }
.hero-logo { display:block; width:clamp(104px,8vw,138px); height:auto; }
.hero-header-center .logo-line {
  position:absolute; top:50%; height:1px; width:calc(50vw - 120px);
  background:rgba(255,255,255,.46); opacity:.72;
  transition: width .55s cubic-bezier(.16,1,.3,1), opacity .45s ease, background .45s ease;
}
.hero-header-center .logo-line:first-child { right:100%; margin-right:18px; }
.hero-header-center .logo-line:last-child { left:100%; margin-left:18px; }
.hero-header.is-scrolled { background:rgba(104,39,49,.30); backdrop-filter:blur(12px); }
.hero-header.is-scrolled .logo-line { opacity:1; background:rgba(255,255,255,.82); width:calc(50vw - 102px); }
.hero-header.is-scrolled .logo-line:first-child { margin-right:0; }
.hero-header.is-scrolled .logo-line:last-child { margin-left:0; }

/* moving dotted separator */
.hero-dash-track {
  position:absolute; left:50%; top:72%; transform:translateX(-50%);
  width:min(72vw,980px); height:2px; overflow:hidden; z-index:35; opacity:.9;
}
.hero-dash-track span { display:block; width:200%; height:100%; background:repeating-linear-gradient(90deg,#fff 0 8px,transparent 8px 18px); animation:heroDashRail 1.2s linear infinite; }
@keyframes heroDashRail { to { transform:translateX(18px); } }

/* scroll-responsive title spacing */
.hero-type-back,.hero-type-front { --hero-spread:0px; }
.hero-vocal { transform:translateY(calc(var(--hero-spread) * -1)); }
.hero-enough { transform:translateY(calc(var(--hero-spread) * -.35)); }
.hero-letme { transform:translateY(calc(var(--hero-spread) * .45)); }
.hero-paint-it { transform:translate(-50%, calc(var(--hero-spread) * .95)); }
.hero-vocal,.hero-enough,.hero-letme,.hero-paint-it { transition:transform .08s linear; }

/* second section */
.artist-bio-scroll {
  position:relative; min-height:125svh; padding:clamp(110px,12vw,180px) clamp(24px,5vw,80px) 100px;
  background:#6f2936; color:#fff; overflow:hidden; isolation:isolate;
}
.artist-bio-stage { width:min(1500px,100%); margin:0 auto; position:relative; }
.tube-destination {
  width:min(74vw,920px); height:clamp(260px,38vw,520px); margin:0 auto clamp(90px,10vw,150px);
  border:2px dashed rgba(255,255,255,.75); border-radius:42px; padding:14px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 8px,transparent 8px 18px) top/200% 2px no-repeat,
             repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 8px,transparent 8px 18px) bottom/200% 2px no-repeat;
  animation:destinationRail 1.2s linear infinite; opacity:0; transform:translateY(70px) scale(.96); transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.artist-bio-scroll.in-view .tube-destination { opacity:1; transform:none; }
@keyframes destinationRail { to { background-position:18px top,-18px bottom; } }
.tube-destination-inner { width:100%; height:100%; border:1px solid rgba(255,255,255,.62); border-radius:30px; display:flex; align-items:flex-end; justify-content:center; padding:24px; }
.tube-destination-inner span { font-size:.65rem; letter-spacing:.22em; opacity:.65; }
.artist-bio-grid { display:grid; grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr); gap:clamp(48px,8vw,130px); align-items:center; }
.artist-portrait-wrap { position:relative; min-height:620px; display:flex; align-items:flex-end; justify-content:center; }
.artist-bio-portrait { position:relative; z-index:2; width:min(100%,580px); height:620px; object-fit:cover; object-position:center; border-radius:220px 220px 28px 28px; filter:saturate(.85) contrast(1.04); }
.portrait-line { position:absolute; z-index:1; border:1px solid rgba(255,255,255,.8); border-radius:50%; pointer-events:none; }
.portrait-line-a { width:82%; height:78%; left:-7%; top:7%; transform:rotate(-12deg); }
.portrait-line-b { width:74%; height:88%; right:-5%; top:3%; transform:rotate(11deg); }
.portrait-line-c { width:94%; height:55%; left:1%; bottom:3%; transform:rotate(4deg); }
.artist-bio-kicker { display:block; margin-bottom:22px; font-size:.68rem; font-weight:700; letter-spacing:.18em; opacity:.72; }
.artist-bio-copy h2 { margin:0 0 30px; font-family:"Gochi Hand",cursive; font-size:clamp(3rem,5.4vw,6.8rem); font-weight:400; line-height:.9; letter-spacing:-.03em; }
.artist-bio-copy p { max-width:720px; margin:0 0 18px; font-size:clamp(1rem,1.3vw,1.28rem); line-height:1.65; color:rgba(255,255,255,.84); }
.artist-bio-facts { margin-top:42px; border-top:1px solid rgba(255,255,255,.35); }
.artist-bio-facts div { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.25); }
.artist-bio-facts span { opacity:.55; font-size:.65rem; }
.artist-bio-facts strong { font-size:.76rem; letter-spacing:.1em; }

@media (max-width:900px) {
  .hero-header { grid-template-columns:1fr auto 1fr; height:76px; padding:12px 14px; }
  .hero-header-left { gap:9px; }
  .hero-home-link { font-size:.65rem; }
  .hero-logo { width:78px; }
  .hero-logo-link { padding:0 8px; }
  .hero-header-center .logo-line { width:calc(50vw - 72px); }
  .hero-header-center .logo-line:first-child { margin-right:8px; }
  .hero-header-center .logo-line:last-child { margin-left:8px; }
  .order-art-button { padding:9px 10px; font-size:.58rem; }
  .hero-dash-track { top:74%; width:82vw; }
  .artist-bio-scroll { padding-left:18px; padding-right:18px; }
  .tube-destination { width:90vw; height:330px; border-radius:28px; }
  .artist-bio-grid { grid-template-columns:1fr; gap:60px; }
  .artist-portrait-wrap { min-height:480px; }
  .artist-bio-portrait { height:480px; border-radius:170px 170px 24px 24px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-dash-track span,.tube-destination { animation:none; }
  .hero-vocal,.hero-enough,.hero-letme,.hero-paint-it { transition:none; }
}


/* =========================================================
   SEPT 23 — SCROLL CHOREOGRAPHY REFINEMENT
   ========================================================= */

/* Header controls sit above the rule instead of being crossed by it. */
.hero-header {
  height: 104px;
  padding: 18px clamp(28px, 3vw, 50px);
  align-items: flex-start;
}
.hero-header-left,
.hero-header-right { margin-top: 8px; }
.hero-header-center { margin-top: 4px; }
.hero-header-center .logo-line {
  top: 62px;
  width: calc(50vw - 122px);
  opacity: .72;
}
.hero-header-center .logo-line:first-child { margin-right: 18px; }
.hero-header-center .logo-line:last-child { margin-left: 18px; }
.hero-header.is-scrolled {
  background: rgba(104,39,49,.48);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.hero-header.is-scrolled .logo-line {
  width: calc(50vw - 104px);
  background: rgba(255,255,255,.9);
}
.hero-header.is-scrolled .logo-line:first-child,
.hero-header.is-scrolled .logo-line:last-child { margin-left: 0; margin-right: 0; }

/* Strong, simple hero type. */
.hero-main-title,
.hero-paint-it,
.hero-promise {
  font-family: "Space Grotesk", Arial, sans-serif !important;
  font-weight: 700 !important;
}
.hero-main-title { top: 41%; line-height: .84; }
.hero-vocal,
.hero-enough {
  font-size: clamp(5.2rem, 10.8vw, 11.5rem);
  line-height: .84;
  letter-spacing: -.06em;
}
.hero-letme {
  margin-top: .26em;
  font-size: clamp(3rem, 5.5vw, 5.9rem);
  line-height: .9;
  letter-spacing: -.045em;
}
.hero-paint-it {
  top: 67%;
  font-size: clamp(5.2rem, 10.8vw, 11.5rem);
  line-height: .84;
  letter-spacing: -.06em;
}
/* Deliberately about half the display size of PAINT IT. */
.hero-promise {
  top: 87%;
  font-size: clamp(2.6rem, 5.2vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.045em;
  white-space: nowrap;
}

/* Dotted line sits below PAINT IT and moves more slowly. */
.hero-dash-track {
  top: 79.5%;
  width: min(72vw, 980px);
  height: 2px;
}
.hero-dash-track span { animation-duration: 4.8s; }

/* Visible scroll separation for VOCAL / ENOUGH / LET ME JUST / PAINT IT. */
.hero-type-back,
.hero-type-front { --hero-spread: 0px; }
.hero-vocal { transform: translateY(calc(var(--hero-spread) * -1.15)); }
.hero-enough { transform: translateY(calc(var(--hero-spread) * -.55)); }
.hero-letme { transform: translateY(calc(var(--hero-spread) * .55)); }
.hero-paint-it { transform: translate(-50%, calc(-50% + var(--hero-spread) * 1.05)); }

/* The tube remains viewport-bound while travelling down through hero + bio. */
.hero-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 20 !important;
}
body.tube-behind .hero-canvas { z-index: 1 !important; }

/* Bio is one composition: portrait | narrow center rail | biography. */
.artist-bio-scroll {
  min-height: 110svh;
  padding: clamp(120px, 12vw, 180px) clamp(28px, 4vw, 72px) 120px;
  background: #6f2936;
}
.artist-bio-stage { width: min(1540px, 100%); }
.artist-bio-grid {
  display: grid;
  grid-template-columns: minmax(320px,.9fr) clamp(105px, 9vw, 145px) minmax(420px,1.05fr);
  gap: clamp(34px, 4vw, 68px);
  align-items: center;
}
.tube-destination {
  width: 100%;
  height: clamp(390px, 46vw, 560px);
  margin: 0;
  border: 2px dashed rgba(255,255,255,.76);
  border-radius: 999px;
  padding: 9px;
  animation: destinationRail 6.5s linear infinite;
  opacity: 0;
  transform: translateY(45px) scale(.96);
}
.tube-destination-inner {
  border-radius: 999px;
  padding: 16px;
  align-items: flex-end;
}
.artist-portrait-wrap { min-height: 600px; }
.artist-bio-portrait { height: 600px; }
.artist-bio-copy h2 {
  font-family: "Space Grotesk", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.7rem, 4.5vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.05em;
}

/* Explore the Lab uses the same green as ORDER ART, but translucent. */
.works {
  position: relative;
  z-index: 5;
  background: rgba(85,116,77,.86) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  .hero-header { height: 82px; padding: 12px 14px; }
  .hero-header-left,
  .hero-header-right { margin-top: 4px; }
  .hero-header-center { margin-top: 0; }
  .hero-header-center .logo-line { top: 52px; width: calc(50vw - 72px); }
  .hero-main-title { top: 39%; }
  .hero-vocal,
  .hero-enough { font-size: clamp(3rem, 12vw, 6rem); }
  .hero-letme { font-size: clamp(1.9rem, 7vw, 3.5rem); }
  .hero-paint-it { top: 64%; font-size: clamp(3.2rem, 13vw, 6.2rem); }
  .hero-dash-track { top: 75%; width: 82vw; }
  .hero-promise { top: 82%; font-size: clamp(1.65rem, 6.2vw, 3rem); }
  .artist-bio-grid { grid-template-columns: 1fr; gap: 44px; }
  .artist-portrait-wrap { order: 1; }
  .tube-destination { width: 108px; height: 300px; justify-self: center; order: 2; }
  .artist-bio-copy { order: 3; }
}

/* =========================================================
   HERO LOAD REVEAL — SEPT 29
   Staggered masked entrance for the main phrase
========================================================= */
.hero-vocal,
.hero-enough,
.hero-letme,
.hero-paint-it,
.hero-promise,
.hero-dash-track {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  animation: heroMaskedReveal 1.05s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-vocal { animation-delay: .12s; }
.hero-enough { animation-delay: .24s; }
.hero-letme { animation-delay: .38s; }
.hero-paint-it { animation-delay: .54s; }
.hero-dash-track { animation-delay: .68s; }
.hero-promise { animation-delay: .78s; }

@keyframes heroMaskedReveal {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dash-track span,.tube-destination { animation:none; }
  .hero-vocal,.hero-enough,.hero-letme,.hero-paint-it { transition:none; }
  .hero-vocal,.hero-enough,.hero-letme,.hero-paint-it,.hero-promise,.hero-dash-track {
    opacity:1;
    clip-path:none;
    filter:none;
    animation:none;
  }
}


/* =========================================================
   HERO TYPOGRAPHY + SITE-PALETTE GRADIENT — OCT 2026
   Match the "Art is not one thing." display treatment.
========================================================= */
.hero-landing {
  background:
    radial-gradient(circle at 14% 18%, rgba(238,231,220,.34) 0%, rgba(238,231,220,0) 34%),
    radial-gradient(circle at 86% 22%, rgba(85,116,77,.82) 0%, rgba(85,116,77,0) 42%),
    radial-gradient(circle at 74% 82%, rgba(255,91,53,.34) 0%, rgba(255,91,53,0) 38%),
    linear-gradient(135deg, #6f2936 0%, #8f4b55 42%, #55744d 100%) !important;
}

.hero-main-title,
.hero-main-title .hero-word {
  font-family: var(--home-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.075em !important;
}

.hero-vocal,
.hero-enough {
  line-height: 0.82 !important;
}

.hero-letme {
  line-height: 0.86 !important;
}


/* HERO TYPE SCALE + SENTENCE CASE — OCT 2026 */
.hero-main-title,
.hero-paint-it,
.hero-promise {
  text-transform: none !important;
}
.hero-vocal,
.hero-enough,
.hero-letme,
.hero-paint-it,
.hero-promise {
  font-size: clamp(4.8rem, 9vw, 10rem) !important;
  line-height: .88 !important;
  letter-spacing: -.065em !important;
}
@media (max-width: 768px) {
  .hero-vocal,
  .hero-enough,
  .hero-letme,
  .hero-paint-it,
  .hero-promise {
    font-size: clamp(3rem, 13vw, 5.8rem) !important;
  }
}


/* CINEMATIC HERO REVEAL AFTER LAB ENTRANCE */
body.lab-intro-active .hero-vocal,
body.lab-intro-active .hero-enough,
body.lab-intro-active .hero-letme,
body.lab-intro-active .hero-paint-it,
body.lab-intro-active .hero-promise,
body.lab-intro-active .hero-dash-track,
body.lab-intro-active .hero-meta,
body.lab-intro-active .hero-bottom,
body.lab-intro-active .hero-scroll,
body.lab-intro-active .hero-word-ring {
  opacity: 0 !important;
  animation: none !important;
}
body.lab-intro-active .hero-vocal { transform: translateY(100px) scale(.86) !important; }
body.lab-intro-active .hero-enough { transform: translateY(125px) scale(.86) !important; }
body.lab-intro-active .hero-letme { transform: translateY(145px) scale(.86) !important; }
body.lab-intro-active .hero-paint-it { transform: translate(-50%,calc(-50% + 170px)) scale(.86) !important; }

body.lab-entered .hero-vocal,
body.lab-entered .hero-enough,
body.lab-entered .hero-letme,
body.lab-entered .hero-paint-it,
body.lab-entered .hero-promise,
body.lab-entered .hero-dash-track,
body.lab-entered .hero-meta,
body.lab-entered .hero-bottom,
body.lab-entered .hero-scroll,
body.lab-entered .hero-word-ring {
  opacity: 0;
  animation: labHeroIn 1.05s cubic-bezier(.16,1,.3,1) forwards !important;
}
body.lab-entered .hero-vocal{animation-delay:.08s!important}
body.lab-entered .hero-enough{animation-delay:.17s!important}
body.lab-entered .hero-letme{animation-delay:.27s!important}
body.lab-entered .hero-paint-it{animation-delay:.38s!important}
body.lab-entered .hero-dash-track{animation-delay:.5s!important}
body.lab-entered .hero-promise{animation-delay:.58s!important}
body.lab-entered .hero-meta,body.lab-entered .hero-word-ring{animation-delay:.66s!important}
body.lab-entered .hero-bottom,body.lab-entered .hero-scroll{animation-delay:.76s!important}
@keyframes labHeroIn{0%{opacity:0;filter:blur(9px)}100%{opacity:1;filter:blur(0)}}


/* HERO VISIBILITY FIX — entrance owns the reveal */
body.lab-entered .hero-vocal,
body.lab-entered .hero-enough,
body.lab-entered .hero-letme,
body.lab-entered .hero-paint-it,
body.lab-entered .hero-promise {
  visibility: visible !important;
  clip-path: inset(0 0 0 0) !important;
}
body.lab-entered .hero-vocal,
body.lab-entered .hero-enough,
body.lab-entered .hero-letme {
  transform: translate3d(0,0,0) scale(1) !important;
}
body.lab-entered .hero-paint-it {
  transform: translate(-50%,-50%) scale(1) !important;
}
body.lab-entered .hero-promise {
  transform: translate3d(0,0,0) scale(1) !important;
}
body.lab-entered .hero-main-title,
body.lab-entered .hero-type-back,
body.lab-entered .hero-type-front {
  visibility: visible !important;
  opacity: 1 !important;
}


/* HERO COMPOSITION RESET — keep the full phrase inside the viewport */
.hero-landing .hero-inner{position:relative!important;overflow:hidden!important}
.hero-landing .hero-type-back,
.hero-landing .hero-type-front{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none;
}
.hero-landing .hero-main-title{
  position:absolute!important;
  top:17%!important;
  left:50%!important;
  width:min(92vw,1450px)!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
}
.hero-landing .hero-main-title .hero-word{
  display:block!important;
  width:100%!important;
  margin:0!important;
  position:static!important;
  text-align:center!important;
}
.hero-landing .hero-vocal,
.hero-landing .hero-enough{
  display:inline!important;
  font-size:clamp(5rem,9.2vw,10.2rem)!important;
  line-height:.84!important;
}
.hero-landing .hero-vocal::after{content:" "!important}
.hero-landing .hero-letme{
  margin-top:clamp(18px,2.2vh,30px)!important;
  font-size:clamp(2.6rem,4.5vw,5.2rem)!important;
  line-height:.9!important;
}
.hero-landing .hero-paint-it{
  position:absolute!important;
  top:52%!important;
  left:50%!important;
  width:100%!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
  text-align:center!important;
  font-size:clamp(5rem,9.2vw,10.2rem)!important;
  line-height:.84!important;
}
.hero-landing .hero-dash-track{
  position:absolute!important;
  top:66%!important;
  left:50%!important;
  width:min(72vw,1220px)!important;
  transform:translateX(-50%)!important;
}
.hero-landing .hero-promise{
  position:absolute!important;
  top:71%!important;
  left:50%!important;
  width:90%!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  white-space:nowrap!important;
  font-size:clamp(1.8rem,3vw,3.6rem)!important;
  line-height:1!important;
}
body.lab-entered .hero-promise{transform:translateX(-50%)!important}
@media(max-width:768px){
 .hero-landing .hero-main-title{top:20%!important;width:94vw!important}
 .hero-landing .hero-vocal,.hero-landing .hero-enough,.hero-landing .hero-paint-it{font-size:clamp(3.3rem,14vw,6rem)!important}
 .hero-landing .hero-letme{font-size:clamp(2rem,8vw,3.5rem)!important}
 .hero-landing .hero-paint-it{top:51%!important}
 .hero-landing .hero-dash-track{top:63%!important;width:82vw!important}
 .hero-landing .hero-promise{top:68%!important;font-size:clamp(1.35rem,6vw,2.3rem)!important}
}


/* =========================================================
   CINEMATIC FULLSCREEN HERO — OCT 2026
   Inspired by fullscreen video-hero composition.
========================================================= */
.cinematic-hero{position:relative!important;min-height:100svh!important;height:100svh!important;overflow:hidden!important;background:#6f2936!important;color:#fff!important}
.cinematic-hero-bg{position:absolute;inset:-8%;background:linear-gradient(125deg,#702c39 0%,#9a5860 31%,#8e654e 60%,#55744d 100%);transform:scale(1.08);animation:cinematicDrift 14s ease-in-out infinite alternate}
.cinematic-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.52;will-change:transform}
.cinematic-orb-a{width:48vw;height:48vw;left:-10%;top:8%;background:#d9828d;animation:orbA 12s ease-in-out infinite alternate}
.cinematic-orb-b{width:45vw;height:45vw;right:-5%;top:4%;background:#6c875d;animation:orbB 15s ease-in-out infinite alternate}
.cinematic-orb-c{width:38vw;height:38vw;left:38%;bottom:-18%;background:#e17b4d;animation:orbC 13s ease-in-out infinite alternate}
.cinematic-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,10,.12),rgba(15,10,10,.04) 45%,rgba(15,10,10,.28));z-index:1}
.cinematic-hero-content{position:relative;z-index:2;width:min(91vw,1480px);height:100%;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(110px,13vh,150px) 0 clamp(55px,7vh,80px)}
.cinematic-eyebrow{margin:0 0 clamp(24px,4vh,48px);font:600 clamp(.68rem,.8vw,.82rem)/1 "Space Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.cinematic-title{margin:0;max-width:1400px;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(4.4rem,9vw,10.2rem);line-height:.82;letter-spacing:-.085em;color:#fff}
.cinematic-title span{display:block;overflow:hidden}
.cinematic-title span+span{margin-top:.08em}
.cinematic-title em{font-style:normal;color:#eee7dc}
.cinematic-footer{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;border-top:1px solid rgba(255,255,255,.38);padding-top:20px}
.cinematic-footer p{margin:0;font:500 clamp(1.25rem,2vw,2.15rem)/1.05 "Space Grotesk",sans-serif;letter-spacing:-.04em}
.cinematic-cta{display:inline-flex;align-items:center;gap:20px;color:#fff;text-decoration:none;font:600 .72rem/1 "Space Grotesk",sans-serif;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:16px 20px;transition:.3s ease}
.cinematic-cta:hover{background:#fff;color:#6f2936}
.cinematic-scroll{position:absolute;z-index:3;right:4.5vw;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:right center;display:flex;align-items:center;gap:12px;font:600 .58rem/1 "Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase}
.cinematic-scroll span{display:block;width:48px;height:1px;background:currentColor}
body.lab-intro-active .cinematic-eyebrow,body.lab-intro-active .cinematic-title span,body.lab-intro-active .cinematic-footer,body.lab-intro-active .cinematic-scroll{opacity:0!important;transform:translateY(70px)!important}
body.lab-entered .cinematic-eyebrow{animation:cinematicReveal .8s .12s cubic-bezier(.16,1,.3,1) both}
body.lab-entered .cinematic-title span:first-child{animation:cinematicReveal 1s .2s cubic-bezier(.16,1,.3,1) both}
body.lab-entered .cinematic-title span:nth-child(2){animation:cinematicReveal 1s .32s cubic-bezier(.16,1,.3,1) both}
body.lab-entered .cinematic-footer{animation:cinematicReveal .9s .48s cubic-bezier(.16,1,.3,1) both}
body.lab-entered .cinematic-scroll{animation:cinematicSideReveal .9s .62s cubic-bezier(.16,1,.3,1) both}
@keyframes cinematicReveal{from{opacity:0;transform:translateY(70px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes cinematicSideReveal{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes cinematicDrift{to{transform:scale(1.16) translate3d(-1.5%,1%,0)}}
@keyframes orbA{to{transform:translate3d(14vw,8vh,0) scale(1.12)}}
@keyframes orbB{to{transform:translate3d(-12vw,12vh,0) scale(.9)}}
@keyframes orbC{to{transform:translate3d(7vw,-10vh,0) scale(1.16)}}
@media(max-width:768px){.cinematic-hero-content{width:88vw;padding-top:120px}.cinematic-title{font-size:clamp(3.6rem,16vw,6.6rem);line-height:.86}.cinematic-title span:nth-child(2){font-size:.72em;line-height:.96}.cinematic-footer{align-items:flex-start;flex-direction:column}.cinematic-scroll{display:none}.cinematic-eyebrow{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){.cinematic-hero-bg,.cinematic-orb{animation:none!important}}


/* Ocean Depths hero background — replaces previous gradient/orbs */
.cinematic-hero .ocean-depths-pattern{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#0a1e2b,#1a3b4a 50%,#092934 90%,#032630);
  filter:url(#ocean-texture);
  transform:none;
  animation:none;
}
.cinematic-hero .texture-filter{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}
.cinematic-hero .cinematic-orb{display:none!important;}


/* =========================================================
   NDAMBUKI HERO — SPRAY PAINT LETTERING
   Code-only effect over the Ocean Depths background.
   ========================================================= */
.cinematic-hero-content{isolation:isolate}
.spray-title .spray-line{
  position:relative;
  display:block;
  width:max-content;
  max-width:100%;
  overflow:visible;
}
.spray-title .spray-ink{
  position:relative;
  display:inline-block;
  color:#f4f1e8;
  opacity:0;
  filter:blur(7px) contrast(.82);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  text-shadow:
    1px 0 rgba(255,255,255,.22),
    -2px 1px rgba(255,255,255,.08),
    0 0 10px rgba(235,247,244,.18),
    0 0 22px rgba(192,232,238,.10);
  will-change:clip-path,filter,opacity;
}
.spray-title .spray-ink::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-.12em -.18em;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 4% 31%,rgba(242,245,238,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 13% 76%,rgba(242,245,238,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 25% 18%,rgba(242,245,238,.62) 0 1.2px,transparent 2.3px),
    radial-gradient(circle at 39% 86%,rgba(242,245,238,.48) 0 1px,transparent 2px),
    radial-gradient(circle at 54% 12%,rgba(242,245,238,.6) 0 1px,transparent 2.2px),
    radial-gradient(circle at 68% 81%,rgba(242,245,238,.52) 0 1.2px,transparent 2.4px),
    radial-gradient(circle at 82% 23%,rgba(242,245,238,.66) 0 1px,transparent 2px),
    radial-gradient(circle at 96% 68%,rgba(242,245,238,.5) 0 1.3px,transparent 2.5px);
  filter:blur(.35px);
}
.spray-title .spray-line::after{
  content:"";
  position:absolute;
  z-index:5;
  top:5%;
  bottom:0;
  left:-10%;
  width:18%;
  opacity:0;
  pointer-events:none;
  transform:translateX(0) rotate(-4deg);
  background:
    radial-gradient(ellipse at center,rgba(238,250,250,.40) 0%,rgba(205,237,241,.19) 28%,rgba(178,224,232,.07) 48%,transparent 72%);
  filter:blur(8px);
  mix-blend-mode:screen;
}
body.lab-entered .spray-line-one .spray-ink{
  animation:sprayLetterReveal 1.7s .12s cubic-bezier(.22,.72,.22,1) forwards;
}
body.lab-entered .spray-line-one::after{
  animation:sprayCanPass 1.7s .08s ease-in-out forwards;
}
body.lab-entered .spray-line-two .spray-ink{
  animation:sprayLetterReveal 2.05s 1.42s cubic-bezier(.22,.72,.22,1) forwards;
}
body.lab-entered .spray-line-two::after{
  animation:sprayCanPass 2.05s 1.36s ease-in-out forwards;
}
body.lab-entered .spray-line .spray-ink::before{
  animation:spraySpeckle .65s 1.25s ease-out forwards;
}
body.lab-entered .spray-line-two .spray-ink::before{
  animation-delay:3.02s;
}
.spray-title em{
  position:relative;
  color:#d7fbff;
  text-shadow:0 0 13px rgba(102,217,255,.25);
}
body.lab-entered .spray-title em{
  animation:paintItHit .34s 3.2s ease-out both;
}
.spray-tag span{
  display:inline-block;
  opacity:0;
  filter:blur(4px);
  clip-path:inset(0 100% 0 0);
}
body.lab-entered .spray-tag span{
  animation:sprayTagReveal 1.05s 3.72s steps(12,end) forwards;
}
@keyframes sprayLetterReveal{
  0%{opacity:.12;clip-path:polygon(0 3%,0 3%,0 97%,0 97%);filter:blur(8px) contrast(.72)}
  14%{opacity:.72;clip-path:polygon(0 2%,15% 5%,12% 96%,0 99%);filter:blur(5px) contrast(.82)}
  38%{opacity:.9;clip-path:polygon(0 2%,42% 0,38% 100%,0 98%);filter:blur(2.8px) contrast(.9)}
  67%{opacity:.96;clip-path:polygon(0 1%,72% 4%,69% 97%,0 100%);filter:blur(1.1px) contrast(.96)}
  88%{opacity:1;clip-path:polygon(0 0,94% 2%,97% 98%,0 100%);filter:blur(.45px) contrast(1)}
  100%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:blur(0) contrast(1)}
}
@keyframes sprayCanPass{
  0%{left:-12%;opacity:0;transform:translateX(0) rotate(-6deg) scale(.8)}
  9%{opacity:.7}
  48%{opacity:.88;transform:translateX(300%) rotate(5deg) scale(1.18)}
  88%{opacity:.55}
  100%{left:96%;opacity:0;transform:translateX(0) rotate(-3deg) scale(.72)}
}
@keyframes spraySpeckle{
  0%{opacity:0;transform:scale(.96)}
  55%{opacity:.52}
  100%{opacity:.28;transform:scale(1)}
}
@keyframes paintItHit{
  0%{transform:scale(.92) rotate(-1deg);filter:blur(2px)}
  65%{transform:scale(1.035) rotate(.25deg);filter:blur(0)}
  100%{transform:scale(1) rotate(0);filter:blur(0)}
}
@keyframes sprayTagReveal{
  0%{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(5px)}
  35%{opacity:.72;filter:blur(2px)}
  100%{opacity:1;clip-path:inset(0 0 0 0);filter:blur(0)}
}
@media(max-width:700px){
  .spray-title .spray-line{width:100%}
  .spray-title .spray-line::after{width:25%;filter:blur(6px)}
}
@media(prefers-reduced-motion:reduce){
  .spray-title .spray-ink,.spray-tag span{opacity:1!important;clip-path:none!important;filter:none!important;animation:none!important}
  .spray-title .spray-line::after,.spray-title .spray-ink::before{display:none!important}
  .spray-title em{animation:none!important}
}


/* Spray hero visibility safeguard */
.spray-title .spray-ink{
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
}
.spray-tag span{
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
}
body.lab-entered .spray-line-one .spray-ink{
  animation:sprayVisiblePass 1.7s .12s cubic-bezier(.22,.72,.22,1) both!important;
}
body.lab-entered .spray-line-two .spray-ink{
  animation:sprayVisiblePass 2.05s 1.42s cubic-bezier(.22,.72,.22,1) both!important;
}
body.lab-entered .spray-tag span{
  animation:sprayTagVisible 1.05s 3.72s ease-out both!important;
}
@keyframes sprayVisiblePass{
  0%{opacity:.32;filter:blur(6px);clip-path:inset(0 92% 0 0)}
  35%{opacity:.78;filter:blur(2.5px);clip-path:inset(0 55% 0 0)}
  72%{opacity:.96;filter:blur(.7px);clip-path:inset(0 12% 0 0)}
  100%{opacity:1;filter:none;clip-path:inset(0 0 0 0)}
}
@keyframes sprayTagVisible{
  0%{opacity:.35;filter:blur(3px)}
  100%{opacity:1;filter:none}
}


/* Full-viewport Ocean Depths hero */
.hero-landing.cinematic-hero{
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,#0a1e2b 0%,#1a3b4a 50%,#092934 90%,#032630 100%)!important;
  overflow:hidden;
}
.hero-landing.cinematic-hero .ocean-depths-pattern{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  z-index:0!important;
  background:linear-gradient(180deg,#0a1e2b 0%,#1a3b4a 50%,#092934 90%,#032630 100%)!important;
  filter:url(#ocean-texture)!important;
  transform:none!important;
}
.hero-landing.cinematic-hero .cinematic-hero-shade{
  z-index:1!important;
  background:linear-gradient(180deg,rgba(3,20,27,.08) 0%,rgba(3,20,27,.02) 48%,rgba(3,20,27,.18) 100%)!important;
}
.hero-landing.cinematic-hero .cinematic-hero-content,
.hero-landing.cinematic-hero .cinematic-scroll{
  position:relative;
  z-index:2!important;
}