/* ============================================================
   Busted 2 Bangin — one-page site, editorial cut
   Monochrome brand palette: black / white / ivory #E6E2D3 /
   off-white #EEEEEE — no gold. All type = Grift (geometric
   sans, self-hosted: 200 for prose, 700/900 for caps) except
   Kingston Signature script accents (licensed, matches the
   hand-lettered logo).
   Structure: pill nav, full-bleed wordmark masthead, slideshow
   hero, statement blocks with script marquees, project grid.
============================================================ */

@font-face {
  font-family: "Kingston Signature";
  src: url("../assets/fonts/kingston-signature.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/Grift-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/Grift-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../assets/fonts/Grift-Black.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}

:root {
  /* palette — brand card: white / black / ivory / off-white */
  --noir:   #000000;
  --cream:  #EEEEEE;
  --bone:   #E6E2D3;
  --ivory:  #E6E2D3;
  --ivory-deep: #D5CFBB; /* shade of brand ivory for tone-on-tone marquees */
  --smoke:  rgba(0, 0, 0, 0.6);
  --cream-60: rgba(238, 238, 238, 0.65);
  --white:  #FFFFFF;

  /* type */
  --grift: "Grift", "Futura", "Avenir Next", "Helvetica Neue", sans-serif;
  --script: "Kingston Signature", "Snell Roundhand", cursive;

  /* rhythm */
  --space-section: clamp(5rem, 12vw, 9.5rem);
  --gutter: clamp(0.5rem, 1vw, 0.75rem);
  --wrap: 82rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--grift);
  font-weight: 200;
  font-size: 1.04rem;
  color: var(--noir);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas { display: block; max-width: 100%; }
/* our img/video display rules must never resurrect [hidden] elements */
[hidden] { display: none !important; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  font-weight: 700;
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--noir); color: var(--cream);
  padding: 0.6rem 1.2rem; border-radius: 3px;
  font-size: 0.85rem; text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- shared ---------- */
[id] { scroll-margin-top: 4.5rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--noir);
  margin-bottom: 1.2rem;
}
.eyebrow--light { color: var(--ivory); }

/* headline system: Grift Black caps; Kingston script for the wink */
h1, h2, h3 {
  font-family: var(--grift);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.01em;
}
h1 em, h2 em, .statement-foot em {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  vertical-align: -0.06em;
}
.eyebrow { font-family: var(--grift); }

/* scroll reveals */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- script marquee bands ---------- */
.marquee {
  overflow: hidden;
  width: 100%;
  pointer-events: none;
}
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  width: max-content;
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.55; /* Kingston's tall ascenders — never clip the b's */
  /* chrome finish */
  background-image: linear-gradient(180deg,
    #9a9a9a 0%, #d6d6d6 22%, #8a8a8a 44%, #5f5f5f 52%,
    #ececec 60%, #a8a8a8 82%, #c9c9c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: marquee-x 36s linear infinite;
}
@keyframes marquee-x { to { transform: translateX(-50%); } }

.marquee--bleed .marquee-track {
  font-size: clamp(5rem, 13vw, 11rem);
}
.marquee--center {
  position: absolute;
  inset-inline: 0;
  top: calc(40% + 100px);
  transform: translateY(-50%);
  z-index: 0;
}
.marquee--center .marquee-track {
  font-size: clamp(6rem, 15vw, 13rem);
}
.marquee--footer .marquee-track {
  font-size: clamp(4.5rem, 11vw, 9.5rem);
}

/* ---------- border-top row links ---------- */
.rowlink {
  font-family: var(--grift);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding-block: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.rowlink-arrow { transition: transform 0.3s var(--ease-out); }
.rowlink:hover { color: var(--smoke); }
.rowlink:hover .rowlink-arrow { transform: translateX(-0.5rem); }
.rowlink--light { border-top-color: rgba(238, 238, 238, 0.3); color: var(--cream); }
.rowlink--light:hover { color: var(--white); }
.rowlink--big {
  font-family: var(--grift);
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  font-weight: 200;
  letter-spacing: 0.08em;
  padding-block: 1.4rem;
}

/* ============================================================
   PILL NAV
============================================================ */
/* solid black banner: one continuous bar, links as quiet text */
.pillbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 3.4rem;
  background: var(--noir);
  padding-inline: clamp(0.5rem, 2vw, 1.5rem);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1.1rem;
  font-family: var(--grift);
  color: var(--cream);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.pill:hover { color: var(--ivory); }
.pill--brand { padding-inline: 0.4rem 1.4rem; }
/* b2b monogram is black ink on transparency — invert to white for the noir banner */
.pill--brand img { height: 2.73rem; width: auto; filter: invert(1); }
.pillbar-nav { display: flex; gap: 0; }
.pill--cta {
  margin-left: auto;
  align-self: center;
  padding-block: 0.65rem;
  /* transparent pill, chrome text — gradient clips to the letters */
  background-image: linear-gradient(180deg,
    #f5f5f5 0%, #d9d9d9 30%, #bfbfbf 50%,
    #ececec 62%, #cccccc 85%, #e2e2e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pill--cta:hover { filter: brightness(1.3); color: transparent; }
.pill-arrow { font-size: 0.9rem; transition: transform 0.3s var(--ease-out); }
.pill--cta:hover .pill-arrow { transform: translateX(3px); }

@media (max-width: 52rem) {
  .pillbar-nav { display: none; }
  .pill--cta { padding-inline: 0.9rem; }
  .pillbar { transform: translateY(-130%); transition: transform 0.45s var(--ease-out); }
  .pillbar.is-shown { transform: none; }
}

/* ============================================================
   1. MASTHEAD — the logo as typography
============================================================ */
.masthead {
  background: var(--noir);
  color: var(--cream);
  padding: 4.6rem var(--gutter) 0;
  overflow: hidden;
}
@media (max-width: 52rem) {
  /* the banner slides in after the hero — don't reserve space for it */
  .masthead { padding-top: 1.2rem; }
}
.wordmark { display: flex; justify-content: center; }
.wordmark img { width: min(86vw, 52rem); height: auto; }
/* desktop: the 510px source logo upscales badly — run it 40% smaller */
@media (min-width: 52rem) {
  .wordmark img { width: min(52vw, 31rem); }
}
.masthead-lines {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 1.6rem 0.5rem 1.4rem;
}
.masthead-lines p {
  font-family: var(--grift);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--cream-60);
}
.masthead-lines-right { text-align: right; }

/* ============================================================
   2. HERO — crossfading walkthrough clips
============================================================ */
.hero {
  position: relative;
  height: 92svh;
  overflow: hidden;
  background: var(--noir);
}
.hero-media, .hero-media .hero-poster, .hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media video { opacity: 0; transition: opacity 1.4s ease; }
.hero-media video.is-showing { opacity: 1; }

/* ============================================================
   3. STATEMENT — the short version
============================================================ */
.statement {
  position: relative;
  isolation: isolate;
  min-height: 68svh;
  display: flex;
  background: var(--cream);
  padding: var(--space-section) clamp(1rem, 4vw, 2.5rem);
}
.statement-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
}
.statement-title {
  font-size: clamp(1.7rem, 3.8vw, 3.1rem);
  line-height: 1.05;
  text-transform: uppercase;
  text-wrap: balance;
}
.statement-foot {
  margin-top: auto;
  padding-top: 2.5rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-wrap: balance;
}

/* ============================================================
   4. BUILD — pinned canvas scrub
============================================================ */
.build { height: 230vh; background: var(--noir); }
.build-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.build-stage { position: relative; height: 100%; }
.build-video, .build-still, .build-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.build-panel {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3.5rem);
  top: clamp(4.5rem, 9vh, 6rem);
  width: min(25rem, calc(100% - 2.5rem));
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  color: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.build-panel .eyebrow { margin-bottom: 0.9rem; color: var(--ivory); }
.build-headline { font-size: clamp(1.15rem, 1.9vw, 1.45rem); margin-bottom: 1.4rem; }
.build-headline em { color: var(--ivory); font-size: 1.25em; white-space: nowrap; }

.build-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
  margin-bottom: 1.3rem;
}
.build-layers li {
  font-family: var(--grift);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-60);
  opacity: 0.4;
  transition: opacity 0.4s, color 0.4s;
}
.build-layers li.is-active { opacity: 1; color: var(--white); }
.build-layers li.is-done { opacity: 0.9; color: var(--cream); }

.build-progress {
  height: 2px;
  background: rgba(238, 238, 238, 0.18);
  overflow: hidden;
}
.build-progress span { display: block; height: 100%; width: 0%; background: var(--ivory); }

.build.is-static { height: auto; }
.build.is-static .build-pin { position: relative; height: auto; }
.build.is-static .build-stage { height: auto; aspect-ratio: 1 / 1; min-height: 70vh; }
.build.is-static .build-progress { display: none; }

/* ============================================================
   STICKY PHOTO — pins at the top while the next section
   scrolls up and over it like a curtain
============================================================ */
.stickyphoto {
  position: sticky;
  top: 0;
  z-index: -1; /* behind the sections that slide over it */
  height: 100svh;
  overflow: hidden;
}
.stickyphoto-frame { height: 100%; }
.stickyphoto-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   5. BEFORE / AFTER — the signature interaction
============================================================ */
.glowups { padding: var(--space-section) 0 var(--space-section); background: var(--cream); }
.glowups-head {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.glowups-title { font-size: clamp(1.8rem, 4.2vw, 3.5rem); text-transform: uppercase; text-wrap: balance; }
.glowups-hint {
  margin-top: 1.2rem;
  font-family: var(--script);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--smoke);
}
.glowups .wrap { margin-top: clamp(2rem, 5vw, 3.5rem); }

.ba-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--noir);
  touch-action: none; /* the stage owns horizontal drags */
  cursor: ew-resize;
}
.ba-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* before sits on top, clipped to the left of the handle */
.ba-before { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--cream);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
.ba-handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos, 50%);
  transform: translate(-50%, -50%);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--noir);
  background: var(--cream);
  color: var(--noir);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  cursor: ew-resize;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.ba-label {
  position: absolute;
  bottom: 0.9rem;
  font-family: var(--script);
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  padding: 0.35rem 1rem 0.55rem;
}
.ba-label--before { left: 1rem; }
.ba-label--after { right: 1rem; }

.ba-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.2rem; }
.ba-picker button {
  font-family: var(--grift);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: var(--smoke);
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}
.ba-picker button:hover { border-radius: 25px; border-color: var(--noir); color: var(--noir); }
.ba-picker button.is-active { background: var(--noir); border-color: var(--noir); color: var(--cream); border-radius: 25px; }

/* ============================================================
   6. SERVICES — full-bleed noir band, landscape photo per service
============================================================ */
.services { padding: var(--space-section) var(--gutter); background: var(--noir); color: var(--cream); }
.services .eyebrow { margin-bottom: 2.2rem; color: var(--ivory); }
.services-list { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .services-list { grid-template-columns: repeat(3, 1fr); } }
.service-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 1.2rem;
}
.service-img {
  width: 100%;
  height: 115%; /* overdraw so the parallax drift never shows edges */
  object-fit: cover;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .service-img { height: 100%; transform: none !important; }
}
.service { border-top: 1px solid rgba(238, 238, 238, 0.35); padding-top: 1.3rem; }
.service h3 {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.service p { color: var(--cream-60); max-width: 26em; font-size: 1rem; }
.service:nth-child(2) { transition-delay: 0.12s; }
.service:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================
   7. PROJECTS — grid with coordinates
============================================================ */
.projects { padding: var(--space-section) 0; background: var(--cream); }
.projects-head {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.projects-title { font-size: clamp(1.8rem, 4.2vw, 3.5rem); text-transform: uppercase; }
.projects .marquee { margin-block: clamp(1.5rem, 4vw, 3rem); }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem var(--gutter);
  padding-inline: var(--gutter);
}
@media (min-width: 40rem) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .projects-grid { grid-template-columns: repeat(3, 1fr); } }

.project-card { overflow: hidden; }
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.project-card:hover img { transform: scale(1.025); }
.project-card figcaption { padding-top: 0.9rem; }
.project-card h3 {
  font-family: var(--grift);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.project-card p {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--smoke);
  opacity: 0.85;
}
.projects .rowlink { margin-top: clamp(3rem, 6vw, 5rem); }

/* ============================================================
   8. SHOP
============================================================ */
.shop { padding: var(--space-section) 0; background: var(--white); color: var(--noir); }
.shop-head {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.shop-title { font-size: clamp(1.8rem, 4.2vw, 3.5rem); text-transform: uppercase; }

.shop-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 58rem) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }

.product { display: block; text-decoration: none; }
.product-img {
  display: block;
  aspect-ratio: 1;
  background: #F6F6F4; /* quiet gallery tile on the white ground */
  padding: 12%;
  margin-bottom: 0.9rem;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.product-img img { width: 100%; height: 100%; object-fit: contain; }
.product:hover .product-img { transform: translateY(-6px); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.25); }
.product-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem; /* Chanel-style: price sits under the description */
}
.product-name { font-family: var(--grift); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.product-price {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--noir);
  white-space: nowrap;
}
.product:hover .product-name { color: var(--smoke); }

.shop .rowlink { margin-top: clamp(3rem, 6vw, 5rem); }

/* ============================================================
   9. THE GUYS — founders feature card
============================================================ */
.about { padding: 0; background: var(--cream); }
.about-card {
  position: relative;
  isolation: isolate;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: clamp(1.25rem, 3.5vw, 3rem);
  color: var(--cream);
}
.about-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.32) 55%, rgba(0, 0, 0, 0.35) 100%);
}
.about-meta {
  font-family: var(--grift);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid rgba(238, 238, 238, 0.4);
  padding-top: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.about-names {
  font-size: clamp(2.1rem, 6.4vw, 5rem);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  /* chrome finish, same family as the marquees */
  background-image: linear-gradient(180deg,
    #f4f4f4 0%, #d9d9d9 30%, #9c9c9c 48%, #757575 54%,
    #ededed 62%, #b5b5b5 84%, #dcdcdc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-names em {
  font-family: var(--script);
  font-style: normal;
  font-size: 0.85em;
  color: var(--ivory);
  margin-inline: 0.05em;
}
.about-text { max-width: 46em; color: rgba(238, 238, 238, 0.88); margin-bottom: 1.4rem; }
.about-credit {
  font-family: var(--script);
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  color: var(--ivory);
}

/* ============================================================
   10. FOOTER — the reprise
============================================================ */
.footer {
  background: var(--noir);
  color: var(--cream);
  padding-bottom: 1.2rem;
  overflow: hidden;
}
.marquee--footer { padding-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 52rem) {
  .footer-grid { grid-template-columns: 2fr 1fr; }
  /* links flow into two sub-columns on desktop */
  .footer-col--links { display: block; columns: 2; column-gap: 1.5rem; }
  .footer-col--links a { display: block; margin-bottom: 0.4rem; }
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.footer-col a {
  font-family: var(--grift);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-60);
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--ivory); }
.footer-label {
  font-family: var(--grift);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer-addr { font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; line-height: 1.8; color: var(--cream-60); }

.wordmark--footer {
  color: var(--cream);
  padding-inline: var(--gutter);
  margin-block: clamp(1rem, 3vw, 2rem);
}

.footer-fine-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  border-top: 1px solid rgba(238, 238, 238, 0.2);
  padding-top: 1rem;
}
.footer-fine {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(238, 238, 238, 0.45);
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media video { display: none; }
  .product-img, .pill, .pillbar, .rowlink-arrow, .project-card img { transition: none; }
  .marquee-track { animation: none; }
  .work-card video { display: none; }
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; }
}

/* ============================================================
   WORK CANVAS — endless project marquee (homepage feature)
   2 near-fullscreen cards visible on desktop, 1 on mobile.
   Hover (or focus) pauses the drift and reveals the teaser video.
============================================================ */
.workcanvas {
  overflow: hidden;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  touch-action: pan-y; /* horizontal swipes drag the marquee, vertical still scrolls */
  cursor: grab;
}
.workcanvas:active { cursor: grabbing; }
.workcanvas-track {
  display: flex;
  gap: var(--gutter);
  width: max-content;
  padding-inline: calc(var(--gutter) / 2);
  will-change: transform; /* JS-driven drift + drag (js/work.js) */
}
.work-card img, .work-card video {
  user-select: none;
  -webkit-user-drag: none;
}

.work-card {
  position: relative;
  display: block;
  overflow: hidden;
  width: calc(50vw - var(--gutter) * 1.5);
  height: 84svh;
  flex-shrink: 0;
  background: var(--noir);
  text-decoration: none;
  color: var(--cream);
}
@media (max-width: 52rem) {
  .work-card { width: calc(100vw - var(--gutter) * 2); height: 76svh; }
}
.work-card img,
.work-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card video { opacity: 0; transition: opacity 0.6s ease; }
.work-card.is-video video { opacity: 1; }
.work-card-meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 3.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
.work-card-meta h3 { font-size: clamp(1.1rem, 1.8vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.04em; }
.work-card-meta p { font-family: var(--grift); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--cream-60); white-space: nowrap; }

/* ============================================================
   PROJECT PAGES — /portfolio/<slug>/
============================================================ */
.pj-hero { height: 88svh; overflow: hidden; background: var(--noir); }
.pj-hero video,
.pj-hero img { width: 100%; height: 100%; object-fit: cover; }

.pj-intro {
  max-width: 56rem;
  margin-inline: auto;
  padding: var(--space-section) clamp(1rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.pj-title { font-size: clamp(2.4rem, 6vw, 5rem); text-transform: uppercase; }
.pj-coords {
  margin-top: 0.7rem;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--smoke);
}
.pj-blurb { margin-top: 1.6rem; font-size: 1.1rem; line-height: 1.7; color: var(--smoke); }

.pj-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  padding-inline: var(--gutter);
}
@media (min-width: 64rem) { .pj-gallery { grid-template-columns: repeat(3, 1fr); } }
.pj-shot {
  display: block;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
}
.pj-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.pj-shot:hover img { transform: scale(1.025); }

.pj-outro {
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--space-section) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}
.pj-outro-text {
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.pj-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
.pj-pn-link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem clamp(1rem, 3vw, 2rem) 2rem;
  text-decoration: none;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pj-pn-link--next { align-items: flex-end; text-align: right; border-left: 1px solid rgba(0, 0, 0, 0.3); }
.pj-pn-link:hover { background: var(--noir); color: var(--cream); }
.pj-pn-dir { font-family: var(--grift); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.pj-pn-name { font-family: var(--grift); font-weight: 900; font-size: clamp(1.2rem, 2.6vw, 2rem); text-transform: uppercase; line-height: 1.05; }

.pj-footer { margin-top: 0; padding-top: clamp(2rem, 5vw, 4rem); }
.wordmark--compact img { width: min(50vw, 26rem); margin-inline: auto; }

/* ============================================================
   LIGHTBOX — any gallery image, full screen
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 94svh; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
}

/* ============================================================
   THE BUZZ — press list + media kit (/press/)
============================================================ */
.buzz-head {
  padding: calc(3.4rem + clamp(3rem, 8vw, 6rem)) clamp(1rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: var(--cream);
}
.buzz-title { font-size: clamp(2.2rem, 5.5vw, 4.6rem); text-transform: uppercase; }
.buzz-sub { margin-top: 1rem; color: var(--smoke); max-width: 34em; margin-inline: auto; }

.press-list { background: var(--white); padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--space-section); }
.press-row {
  display: grid;
  grid-template-columns: 6.5rem 14rem 1fr auto;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 1.1rem clamp(0.5rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.press-thumb {
  position: relative;
  width: 6.5rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.press-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s var(--ease-out);
}
.press-thumb img:last-child { opacity: 0; }
.press-row:hover .press-thumb img:last-child { opacity: 1; }
.press-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
.press-row:hover { background: var(--noir); color: var(--cream); }
.press-pub {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.press-row--cover .press-pub { opacity: 1; }
.press-headline {
  font-family: var(--grift);
  font-weight: 200;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.25;
}
.press-arrow { font-family: var(--grift); font-weight: 700; transition: transform 0.3s var(--ease-out); }
.press-row:hover .press-arrow { transform: translate(0.25rem, -0.25rem); }
@media (max-width: 52rem) {
  .press-row { grid-template-columns: 5rem 1fr auto; }
  .press-thumb { width: 5rem; grid-row: span 2; }
  .press-pub { grid-column: 2 / -1; }
  .press-headline { grid-column: 2 / 3; }
}

.kit { background: var(--noir); color: var(--cream); padding: var(--space-section) var(--gutter); }
.kit-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kit-title { font-size: clamp(1.8rem, 4.2vw, 3.5rem); text-transform: uppercase; }
.kit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 76rem;
  margin-inline: auto;
}
@media (min-width: 58rem) { .kit-grid { grid-template-columns: 7fr 5fr; align-items: start; } }
.kit-boiler { color: var(--cream-60); max-width: 52em; margin-bottom: 1.2rem; }
.kit-boiler--wink { font-family: var(--script); font-size: 1.6rem; line-height: 1.2; color: var(--ivory); }
.kit-facts { margin-top: 2rem; }
.kit-facts li {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  padding-block: 0.8rem;
  border-top: 1px solid rgba(238, 238, 238, 0.25);
  font-size: 0.85rem;
}
.kit-facts li span:first-child {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  align-self: baseline;
}
.kit-facts a { color: inherit; }
.kit-photo img { width: 100%; height: auto; }
.kit-photo figcaption {
  margin-top: 0.7rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.kit-ctas { max-width: 76rem; margin: clamp(3rem, 6vw, 5rem) auto 0; }

/* ---------- pitch modal (The Buzz) ---------- */
.pitch {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
}
.pitch-panel {
  position: relative;
  width: min(34rem, 100%);
  background: var(--cream);
  color: var(--noir);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.pitch-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.pitch-title { font-size: clamp(1.8rem, 4vw, 2.6rem); text-transform: uppercase; margin-bottom: 1.4rem; }
.pitch label {
  display: block;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 1.1rem;
}
.pitch input, .pitch textarea {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font-family: var(--grift);
  font-weight: 200;
  font-size: 1rem;
  color: var(--noir);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0.45rem 0;
  border-radius: 0;
}
.pitch input:focus, .pitch textarea:focus { outline: none; border-bottom-color: var(--noir); }
.pitch textarea { resize: vertical; }
.pitch-send {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--noir);
  color: var(--cream);
  padding: 1rem 2.2rem;
  cursor: pointer;
  margin-top: 0.4rem;
}
.pitch-send:hover { background: #1c1c1c; }
.pitch-note {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--smoke);
}

/* ============================================================
   PORTFOLIO INDEX — /portfolio/
============================================================ */
.pfgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem) var(--gutter);
  padding: clamp(1rem, 3vw, 2rem) var(--gutter) var(--space-section);
  background: var(--cream);
}
@media (min-width: 48rem) { .pfgrid { grid-template-columns: 1fr 1fr; } }
.pf-card { display: block; text-decoration: none; color: var(--noir); }
.pf-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.pf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.pf-card:hover .pf-media img { transform: scale(1.025); }
.pf-meta { display: block; padding-top: 1rem; }
.pf-meta h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-transform: uppercase; }
.pf-meta p {
  margin-top: 0.3rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* ============================================================
   SERVICES PAGE — /services/
============================================================ */
.svc { padding: clamp(2rem, 5vw, 4rem) var(--gutter); background: var(--cream); }
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 76rem;
  margin-inline: auto;
  align-items: center;
}
@media (min-width: 52rem) {
  .svc-grid { grid-template-columns: 6fr 5fr; }
  .svc--flip .svc-grid { grid-template-columns: 5fr 6fr; }
  .svc--flip .svc-media { order: 2; }
}
.svc-media { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-body h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); text-transform: uppercase; margin-bottom: 1rem; }
.svc-body p { color: var(--smoke); max-width: 36em; }
.svc-anchor {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 0.9rem;
}
.svc-list { margin-top: 1.4rem; }
.svc-list li {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding-block: 0.65rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.svc-cta { padding: 0 0 var(--space-section); background: var(--cream); }

/* featured-products note under the shop title */
.shop-note { margin-top: 1rem; color: var(--smoke); max-width: 36em; margin-inline: auto; }

/* ============================================================
   ABOUT PAGE — team swipe-cards + combined press
============================================================ */
.about--page { padding: 0 var(--gutter); }
.buzz-head--sub { padding-top: var(--space-section); }
.buzz-title--sub { font-size: clamp(1.9rem, 4.6vw, 3.8rem); }

.team { padding: var(--space-section) var(--gutter); background: var(--cream); }
.team-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.team-title { font-size: clamp(1.9rem, 4.6vw, 3.8rem); text-transform: uppercase; }
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 76rem;
  margin-inline: auto;
}
@media (min-width: 40rem) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* the one place on the site with rounded corners — it's a dating app, keep up */
.team-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.team-card:hover { transform: rotate(-1.6deg) translateY(-6px); box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.45); }
.team-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--ivory);
}
.team-photo-placeholder span {
  font-family: var(--script);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--noir);
  opacity: 0.75;
}
.team-photo-placeholder em {
  font-family: var(--grift);
  font-style: normal;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.team-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.6rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  color: var(--white);
}
.team-overlay h3 { font-size: 1.25rem; letter-spacing: 0.02em; }
.team-overlay h3 span { font-weight: 200; font-size: 0.95rem; }
.team-distance { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; opacity: 0.85; }
.team-bio { padding: 1rem 1rem 1.2rem; }
.team-bio p { font-size: 0.92rem; line-height: 1.5; color: var(--smoke); }
.team-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.team-chips li {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}

/* ============================================================
   CONTACT PAGE — /contact/
============================================================ */
.contact { padding: 0 var(--gutter) var(--space-section); background: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 76rem;
  margin-inline: auto;
}
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 7fr 5fr; } }
.cform label {
  display: block;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 1.2rem;
}
.cform input, .cform textarea, .cform select {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font-family: var(--grift);
  font-weight: 200;
  font-size: 1.05rem;
  color: var(--noir);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  padding: 0.5rem 0;
  border-radius: 0;
}
.cform input:focus, .cform textarea:focus, .cform select:focus { outline: none; border-bottom-color: var(--noir); }
.cform select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.cform-intro { margin-bottom: 1.8rem; color: var(--smoke); max-width: 38em; }
.cform-help {
  display: block;
  margin-top: 0.45rem;
  font-weight: 200;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--smoke);
}
.cform-success p { font-size: 1.15rem; line-height: 1.7; max-width: 34em; }
.cform-success a { color: inherit; }
.cform-success:focus { outline: none; }
.cform textarea { resize: vertical; }
.cform-send {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--noir);
  color: var(--cream);
  padding: 1.05rem 2.4rem;
  cursor: pointer;
  margin-top: 0.4rem;
}
.cform-send:hover { background: #1c1c1c; }
.cform-note { margin-top: 0.7rem; font-size: 0.78rem; color: var(--smoke); }
.contact-info li {
  border-top: 1px solid rgba(0, 0, 0, 0.25);
  padding-block: 1rem;
}
.contact-info .contact-label {
  display: block;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 0.25rem;
}
.contact-info a { text-decoration: none; }
.contact-info a:hover { color: var(--smoke); }

/* compact footer link row on subpages */
.pj-footlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.8rem;
  padding: 1rem clamp(1rem, 3vw, 2rem) 0;
  max-width: var(--wrap);
  margin-inline: auto;
}
.pj-footlinks a {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-60);
  transition: color 0.3s;
}
.pj-footlinks a:hover { color: var(--white); }

/* ============================================================
   PAGE LOADER — aya-sophia style. Pure CSS timeline so it can
   never strand the page: images flash in sequence over a fill
   bar, then the whole panel lifts like a curtain.
   html.quick-load (repeat visits this session) = short curtain.
============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noir);
  animation: loader-out 0.65s cubic-bezier(0.76, 0, 0.24, 1) 1.95s forwards;
}
@keyframes loader-out { to { transform: translateY(-101%); visibility: hidden; } }

.loader-imgs { position: absolute; inset: 0; }
.loader-imgs::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.loader-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.loader-img:nth-child(1) { animation: loader-flash 0.01s linear 0.35s forwards; }
.loader-img:nth-child(2) { animation: loader-flash 0.01s linear 0.75s forwards; }
.loader-img:nth-child(3) { animation: loader-flash 0.01s linear 1.15s forwards; }
.loader-img:nth-child(4) { animation: loader-flash 0.01s linear 1.55s forwards; }
@keyframes loader-flash { to { opacity: 1; } }

.loader-logo {
  position: relative;
  z-index: 2;
  width: min(56vw, 17rem);
  height: auto;
  opacity: 0;
  animation: loader-appear 0.6s var(--ease-out) 0.15s forwards;
}
@keyframes loader-appear { to { opacity: 1; } }

.loader-bar {
  position: absolute;
  bottom: 11vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: min(58vw, 21rem);
  height: 2px;
  background: rgba(238, 238, 238, 0.25);
  overflow: hidden;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ivory);
  animation: loader-fill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
@keyframes loader-fill { to { width: 100%; } }

/* repeat visits: quick curtain only */
.quick-load .loader { animation-delay: 0.1s; animation-duration: 0.5s; }
.quick-load .loader-imgs,
.quick-load .loader-logo,
.quick-load .loader-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
}

/* ============================================================
   MOBILE MENU — hamburger replaces the CTA in the banner;
   the CTA lives inside the menu instead. Injected by main.js.
============================================================ */
.pill--menu {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding-inline: 1.1rem;
  cursor: pointer;
}
.pill--menu i {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cream);
}
@media (max-width: 52rem) {
  .pill--menu { display: inline-flex; }
  .pillbar:has(.pill--menu) .pill--cta { display: none; }
}

.mobnav {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  background: var(--noir);
  color: var(--cream);
  padding: 4.6rem clamp(1.25rem, 6vw, 2.5rem) 2rem;
  animation: mobnav-in 0.45s var(--ease-out);
}
@keyframes mobnav-in { from { opacity: 0; transform: translateY(-2rem); } }
.mobnav[hidden] { display: none; }
.mobnav-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  padding: 0.6rem;
}
.mobnav-links { display: flex; flex-direction: column; }
.mobnav-links a {
  font-family: var(--grift);
  font-weight: 900;
  font-size: clamp(1.9rem, 8.5vw, 2.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.55rem;
  border-bottom: 1px solid rgba(238, 238, 238, 0.18);
}
.mobnav-links a:active { color: var(--ivory); }
.mobnav-cta {
  margin-top: auto;
  display: block;
  text-align: center;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(180deg,
    #f5f5f5 0%, #d9d9d9 30%, #bfbfbf 50%,
    #ececec 62%, #cccccc 85%, #e2e2e2 100%);
  color: var(--noir);
}

/* footer credit — Design by JADELE(R) */
.footer-credit {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(238, 238, 238, 0.35);
  padding-bottom: 1px;
  transition: color 0.3s, border-color 0.3s;
}
.footer-credit:hover { color: var(--white); border-color: var(--white); }

/* ============================================================
   IG FEED MARQUEE — endless strip of square tiles, links to IG.
   Static tiles for now; swap for a live feed (Behold etc.) later.
============================================================ */
.igfeed { margin-top: clamp(2rem, 5vw, 3.5rem); }
.igfeed-marquee { overflow: hidden; margin-top: 0.9rem; }
.igfeed-track {
  display: flex;
  gap: var(--gutter);
  width: max-content;
  padding-block: 0.2rem;
  animation: marquee-x 50s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .igfeed-track:hover { animation-play-state: paused; }
  .igfeed-marquee { pointer-events: auto; }
}
.igfeed-tile {
  display: block;
  width: clamp(9rem, 17vw, 14rem);
  aspect-ratio: 1;
  overflow: hidden;
  flex-shrink: 0;
}
.igfeed-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out), opacity 0.5s;
}
.igfeed-tile:hover img { transform: scale(1.04); opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .igfeed-track { animation: none; }
  .igfeed-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   THE PROCESS — sticky stacked step cards (/services/#process)
============================================================ */
.process { padding: var(--space-section) var(--gutter); background: var(--cream); }
.process-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.process-cards { max-width: 76rem; margin-inline: auto; }
.process-card {
  /* each card pins below the nav, staggered so earlier titles stay peeking */
  position: sticky;
  top: calc(3.4rem + 0.75rem + var(--stack, 0) * 3.6rem);
  display: grid;
  grid-template-columns: 1fr clamp(10rem, 18vw, 15rem);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  background: var(--white);
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 0.9rem;
  box-shadow: 0 -10px 26px -20px rgba(0, 0, 0, 0.4);
  transform-origin: top center;
  will-change: transform, opacity;
}
.process-card-top { grid-column: 1; }
.process-card h3 {
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  text-transform: uppercase;
}
.process-card p { grid-column: 1; margin-top: 0.7rem; color: var(--smoke); max-width: 52em; }
.process-photo {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0.4rem 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.process-card:hover .process-photo img { transform: scale(1.05); }
.process-numword {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.55);
}
@media (max-width: 40rem) {
  .process-card { grid-template-columns: 1fr; }
  .process-photo { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 9; margin-top: 0.9rem; order: 3; }
}
.process-close {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--smoke);
  max-width: 40em;
  margin-inline: auto;
}
.process-cards .rowlink { margin-top: 1.6rem; }
@media (prefers-reduced-motion: reduce) {
  .process-card { position: static; }
}

/* ============================================================
   PROJECT PAGES — spec block, pull quote, project CTA
============================================================ */
.pj-specs {
  max-width: 76rem;
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.pj-specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
@media (min-width: 52rem) {
  .pj-specs-grid { grid-template-columns: repeat(5, 1fr); column-gap: 2rem; }
}
.pj-specs-grid > div { border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-block: 0.9rem; }
@media (min-width: 52rem) { .pj-specs-grid > div { border-bottom: 0; padding-block: 1.1rem 0; } }
.pj-specs-grid dt {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 0.3rem;
}
.pj-specs-grid dd { font-size: 0.92rem; line-height: 1.5; }
.pj-did {
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 52em;
  color: var(--smoke);
}

.pj-quote {
  padding: var(--space-section) clamp(1rem, 4vw, 2.5rem);
  text-align: center;
}
.pj-quote blockquote {
  font-family: var(--grift);
  font-weight: 200;
  font-style: italic;
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  line-height: 1.35;
  max-width: 28em;
  margin-inline: auto;
}
.pj-quote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--grift);
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
}

.pj-cta {
  text-align: center;
  padding: 0 clamp(1rem, 4vw, 2.5rem) var(--space-section);
  max-width: 76rem;
  margin-inline: auto;
}
.pj-cta-title { font-size: clamp(1.8rem, 4.2vw, 3.2rem); text-transform: uppercase; }
.pj-cta-line { margin-top: 0.8rem; color: var(--smoke); }
.pj-cta-row { margin-top: 2rem; text-align: left; }

/* ---------- scroll parallax ([data-parallax] wrappers) ---------- */
[data-parallax] { overflow: hidden; }
[data-parallax] img { will-change: transform; transition: none; }

/* ---------- melting blur title (services hero) ----------
   per-letter blur + downward stretch, staggered — letters
   un-melt into place on load and re-melt in a wave on hover */
.melt-ch {
  display: inline-block;
  transform-origin: 50% 0;
  animation: melt-in 0.9s var(--ease-out) calc(0.35s + var(--i) * 0.045s) both;
  transition:
    filter 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    opacity 0.4s var(--ease-out);
}
/* per-letter melt: only the letter under the cursor drips —
   its neighbor catches a half-melt so sweeping reads liquid */
.melt-ch:hover {
  filter: blur(9px);
  transform: translateY(0.066em) scaleY(1.11);
  opacity: 0.7;
}
.melt-ch:hover + .melt-ch {
  filter: blur(4px);
  transform: translateY(0.03em) scaleY(1.05);
  opacity: 0.85;
}
@keyframes melt-in {
  from { opacity: 0; filter: blur(16px); transform: translateY(0.38em) scaleY(1.6); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .melt-ch { animation: none; transition: none; }
  .melt-ch:hover, .melt-ch:hover + .melt-ch { filter: none; transform: none; opacity: 1; }
}

/* ============================================================
   TICKET 05 — press bar, hero tag, loss line, closer block
============================================================ */
.pressbar {
  background: var(--cream);
  text-align: center;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 2.5rem) 0;
}
.pressbar-label {
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--smoke);
}
.pressbar-names {
  margin-top: 0.3rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  opacity: 0.75;
}

.masthead-tag {
  font-family: var(--grift);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cream-60);
  padding-bottom: 1.3rem;
}

.statement-loss {
  margin-top: 0.9rem;
  color: var(--smoke);
  text-align: center;
  max-width: 34em;
  margin-inline: auto;
}

.closer {
  background: var(--noir);
  color: var(--cream);
  text-align: center;
  padding: var(--space-section) clamp(1rem, 4vw, 2.5rem);
}
.closer-title { font-size: clamp(2rem, 5vw, 4rem); text-transform: uppercase; }
.closer-line { margin-top: 1rem; color: var(--cream-60); max-width: 36em; margin-inline: auto; }
.closer-ctas {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.closer-btn {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--noir);
  padding: 1.05rem 2.6rem;
  /* same chrome as the nav CTA */
  background: linear-gradient(180deg,
    #f5f5f5 0%, #d9d9d9 30%, #bfbfbf 50%,
    #ececec 62%, #cccccc 85%, #e2e2e2 100%);
  transition: filter 0.3s var(--ease-out);
}
.closer-btn:hover { filter: brightness(1.12); }
.closer-alt {
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-60);
  border-bottom: 1px solid rgba(238, 238, 238, 0.35);
  padding-bottom: 2px;
  transition: color 0.3s;
}
.closer-alt:hover { color: var(--white); }

/* ============================================================
   TICKETS 06/08 — closer variants, team 2-up, shop destination
============================================================ */
.closer--light { background: var(--cream); color: var(--noir); }
.closer--light .closer-line { color: var(--smoke); }
.closer--light .closer-btn {
  background: var(--noir);
  color: var(--cream);
}
.closer--light .closer-btn:hover { filter: none; background: #1c1c1c; }
.closer-btn--dark { background: var(--noir); color: var(--cream); }
.closer-btn--dark:hover { filter: none; background: #1c1c1c; }
.closer-title--sm { font-size: clamp(1.6rem, 3.6vw, 2.8rem); }

/* two founders, centered */
@media (min-width: 64rem) {
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 46rem; }
}

.svc-geo {
  margin-top: 0.9rem;
  font-family: var(--grift);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  text-align: center;
}

/* /shop — rules, floor grid, visit */
.shoprules { text-align: center; padding: var(--space-section) clamp(1rem, 4vw, 2.5rem) 0; background: var(--cream); }
.shoprules-copy { max-width: 38em; margin: 1.4rem auto 0; text-align: center; }
.shoprules-copy p { color: var(--smoke); margin-bottom: 1rem; }

.floor { padding: var(--space-section) var(--gutter); background: var(--white); }
.floor-head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); padding-inline: clamp(1rem, 4vw, 2.5rem); }
.floor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  max-width: 76rem;
  margin-inline: auto;
}
@media (min-width: 58rem) { .floor-grid { grid-template-columns: repeat(4, 1fr); } }
.floor-item { margin: 0; }
.floor-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.floor-desc { font-size: 0.85rem; color: var(--smoke); }
.floor-price { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; }
.floor-dm {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  color: var(--smoke);
}
.floor-dm a { color: var(--noir); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.35); padding-bottom: 1px; }
.floor-dm a:hover { color: var(--smoke); }

.visit { text-align: center; padding: var(--space-section) clamp(1rem, 4vw, 2.5rem); background: var(--cream); }
.visit-copy { max-width: 34em; margin: 1.2rem auto 0; color: var(--smoke); }
.visit-facts { max-width: 40rem; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: left; }
.visit-facts li { border-top-color: rgba(0, 0, 0, 0.25); }
.visit-facts li span:first-child { color: var(--smoke); }
.visit .closer-ctas { margin-top: 2rem; }
.visit-nearby {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--smoke);
}

/* shop floor photo tiles — full-bleed square crops */
.floor-photo { display: block; aspect-ratio: 1; overflow: hidden; }
.floor-photo img { width: 100%; height: 100%; object-fit: cover; }
.floor-meta { margin-top: 0.6rem; }

/* ============================================================
   FOOTER SCROLL ZOOM — background image grows as the footer
   enters the viewport (zerocircle-style)
============================================================ */
.footer { position: relative; isolation: isolate; }
.footer-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.footer-bg picture { display: block; width: 100%; height: 100%; }
.footer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  transform: scale(1.45); /* pre-scroll state — JS zooms OUT from here */
}
.footer-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}
@media (prefers-reduced-motion: reduce) {
  .footer-bg img { transform: none !important; }
}

/* empty shop slot — content request, deliberately obvious */
.floor-photo--todo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ivory);
  border: 1px dashed rgba(0, 0, 0, 0.35);
}
.floor-photo--todo span {
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--smoke);
  text-align: center;
  padding: 1rem;
}

/* shop: the floor grid opens the page */
.floor--hero { padding-top: calc(3.4rem + clamp(2.5rem, 7vw, 5rem)); }

/* ---------- button letter-blur wave ---------- */
.btn-label { display: inline-block; }
.btn-ch { display: inline-block; }
.btn-sp { white-space: pre; }
.btn-melt:hover .btn-ch {
  animation: btn-ch-blur 0.55s var(--ease-out) calc(var(--i) * 0.035s) 1;
}
@keyframes btn-ch-blur {
  0% { filter: blur(0); opacity: 1; }
  35% { filter: blur(5px); opacity: 0.6; }
  100% { filter: blur(0); opacity: 1; }
}
/* chrome CTA: each letter carries its own gradient so the blur
   filter can't break the parent's text clip */
.pill--cta .btn-ch {
  background-image: inherit;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
  .btn-melt:hover .btn-ch { animation: none; }
}

/* shop visit map — grayscaled to stay in the monochrome family */
.visit-map {
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  overflow: hidden;
}
.visit-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* staff slot row beneath the founders */
.team-grid--staff { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* mobile: staff always pair up, two per row */
@media (max-width: 39.99rem) {
  .team-grid--staff { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .team-card--slot .team-bio p { font-size: 0.8rem; }
  .team-card--slot .team-photo-placeholder span { font-size: 3.5rem; }
}
@media (min-width: 64rem) {
  .team-grid--staff { grid-template-columns: repeat(4, 1fr); max-width: 76rem; }
}
.team-card--slot .team-photo-placeholder { border: 1px dashed rgba(0, 0, 0, 0.3); }
.team-card--slot .team-bio p { color: var(--smoke); }

/* shop hero — two photo slots flank the title, drifting on scroll */
.buzz-head--flanked {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.hero-flank-ph { aspect-ratio: 3 / 4; }
@media (min-width: 64rem) {
  .buzz-head--flanked {
    grid-template-columns: 1fr minmax(0, 2.2fr) 1fr;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 4rem);
  }
}
@media (max-width: 63.99rem) {
  .buzz-head--flanked { grid-template-columns: 1fr 1fr; }
  .buzz-head-core { grid-column: 1 / -1; grid-row: 1; }
}

.melt-word { display: inline-block; white-space: nowrap; }
/* flanked hero: title scales to its narrower center column */
@media (min-width: 64rem) {
  .buzz-head--flanked .buzz-title { font-size: clamp(2.6rem, 4.6vw, 4.8rem); }
}

/* flank slot with a real photo — fills the same 3:4 frame */
.hero-flank { overflow: hidden; }
.hero-flank-img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* gio bio — portrait + intro on the shop page */
.giobio { padding: var(--space-section) clamp(1rem, 4vw, 2.5rem); }
.giobio-grid {
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.giobio-photo { margin: 0; overflow: hidden; }
.giobio-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.giobio-line { max-width: 34rem; color: var(--smoke); line-height: 1.7; }
@media (min-width: 48rem) {
  .giobio-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* mobile masthead: corner taglines are desktop framing — hide them,
   keep the single clarity line, tighten spacing so the hero shows sooner */
@media (max-width: 47.99rem) {
  .masthead-lines { display: none; }
  .masthead-tag { padding-top: 0; margin-top: 0.25rem; }
  .masthead { padding-bottom: clamp(1.25rem, 4vw, 2rem); }
}

/* contact: form sits on a white card; photo anchors the info column */
.cform-wrap {
  background: #ffffff;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.contact-side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.contact-photo { margin: 0; overflow: hidden; }
.contact-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* mobile menu: B2B monogram up top, links back to home */
.mobnav-brand {
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
}
.mobnav-brand img { display: block; width: 42px; height: auto; filter: invert(1); }