/* ==========================================================
   DESIGN BY LANDS: styles
   Layout idea: fixed nav strip on top; one oversized logo
   with work images layered across it; intro blurb underneath.
   ========================================================== */

:root {
  /* Brand colors */
  --ink:   #262626;
  --plum:  #791d5e;
  --blue:  #335adf;
  --coral: #ff797d;
  --paper: #f8f6f6;
  --mint:  #d6f1b0;   /* from the style guide, used for placeholders only */

  /* Type */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --gutter-l: max(clamp(22px, 3.4vw, 52px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(22px, 3.4vw, 52px), env(safe-area-inset-right, 0px));
}

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

html {
  scroll-padding-top: calc(var(--nav-h) + var(--safe-top));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  /* 90s arrow cursor */
  cursor: url("assets/cursor-arrow.png") 0 0, auto;
}

a, button { cursor: url("assets/cursor-hand.png") 10 0, pointer; }

img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ==========================================================
   NAV: fixed strip. Paper + ink at the top of the page,
   coral + plum once you start scrolling.
   ========================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) + var(--safe-top));
  padding: var(--safe-top) var(--gutter-r) 0 var(--gutter-l);
  background: var(--coral);
  color: var(--plum);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__links a {
  color: inherit;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
}

.nav__links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Hamburger (phones only) */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  align-items: center;
  justify-content: center;
}

.nav__bars {
  position: relative;
  display: block;
  width: 26px;
  height: 18px;
}

.nav__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
}
.nav__bars i:nth-child(1) { top: 0; }
.nav__bars i:nth-child(2) { top: 7.75px; }
.nav__bars i:nth-child(3) { bottom: 0; }

.nav.is-open .nav__bars i:nth-child(1) { top: 7.75px; transform: rotate(45deg); }
.nav.is-open .nav__bars i:nth-child(2) { opacity: 0; }
.nav.is-open .nav__bars i:nth-child(3) { bottom: 7.75px; transform: rotate(-45deg); }

@media (max-width: 720px) {
  :root { --nav-h: 56px; }

  .nav__toggle { display: inline-flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px var(--gutter-r) 24px var(--gutter-l);
    background: inherit;
    border-bottom: 2px solid currentColor;
  }

  .nav.is-open .nav__links { display: flex; }

  .nav__links a {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 6px 0;
  }
}

/* ==========================================================
   HEADER
   ========================================================== */
.hero {
  padding:
    calc(var(--nav-h) + var(--safe-top) + clamp(16px, 2.5vw, 36px))
    var(--gutter-r)
    clamp(16px, 3vw, 48px)
    var(--gutter-l);
}

/* Stage: logo on top, work images layered across its lower half and
   hanging below it. Everything inside is sized in % of the stage. */
.stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 339.15 / 114.27;   /* same shape as the logo */
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  margin: 0;
}

.logo img { width: 100%; }

/* Placeholders for photos / work images / cutout */
.ph {
  position: absolute;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%);
  aspect-ratio: var(--ar);
  transform: rotate(var(--r, 0deg));
  z-index: var(--z, 3);
  display: grid;
  place-items: center;
  border: 2px dashed rgba(38, 38, 38, .55);
  border-radius: 4px;
  background: rgba(38, 38, 38, .06);
  color: rgba(38, 38, 38, .7);
  overflow: hidden;
}

.ph span {
  font-size: clamp(8px, 1.15cqw, 15px);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

/* A slot filled with a real image: no box, image fits inside the slot */
.ph--img {
  display: block;
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  object-fit: contain;
  object-position: center;
  transform: translate(0, 0) rotate(var(--r, 0deg));
  transition: transform .2s ease;
}

/* Hover: a small lift */
@media (hover: hover) {
  .ph--img:hover { transform: translate(0, -7px) rotate(var(--r, 0deg)); }
}

.ph--coral { background: #ffc9cb; }
.ph--mint  { background: #d6f1b0; }
.ph--blue  { background: #ccd5f6; }
.ph--plum  { background: #dcc3d5; }

/* ==========================================================
   WORK: 3-across card grid
   Each card scales from its own width (cqw units), so the proportions
   stay identical at every screen size.
   ========================================================== */
.work {
  --work-pad-l: max(clamp(24px, 8vw, 128px), env(safe-area-inset-left, 0px));
  --work-pad-r: max(clamp(24px, 8vw, 128px), env(safe-area-inset-right, 0px));
  padding:
    clamp(24px, 4vw, 64px)
    var(--work-pad-r)
    clamp(72px, 9vw, 144px)
    var(--work-pad-l);
}

.work__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 54px);
}

.card {
  display: block;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 3 / 4;
  color: var(--tc);
  text-decoration: none;
  transform: translateY(0);
  transition: transform .2s ease;
}

/* Frame colors (--c) and the text color that reads on each (--tc) */
.c-maroon { --c: var(--plum);  --tc: var(--paper); }
.c-pink   { --c: var(--coral); --tc: var(--ink); }
.c-green  { --c: var(--mint);  --tc: var(--ink); }
.c-blue   { --c: var(--blue);  --tc: var(--paper); }

.card__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8cqw;
  background: var(--c);
}

.card__photo {
  position: absolute;
  inset: 4.2cqw;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 4.6cqw;
  background: #e6e2e2;
}

/* The label tab covers the bottom of the photo area, so the image only fills
   the part that shows (a bit of overlap hides the seam). Per-card framing can
   be set with object-position on the img. */
.card__photo img { width: 100%; height: 74%; align-self: start; object-fit: cover; }

.card__ph {
  font-size: 3cqw;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(38, 38, 38, .5);
}

/* Label tab: sits over the bottom of the image and joins the frame */
.card__tab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 41cqw;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3cqw;
  padding: 5cqw 8cqw 6.4cqw;
  border-radius: 6.6cqw 6.6cqw 0 0;
  background: var(--c);
  text-align: center;
}

.card__title {
  align-self: center;
  font-size: 6.8cqw;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 2cqw;
}

.card__cat {
  flex: 1;
  min-width: 0;
  padding: 1.2cqw 2cqw;
  border: .5cqw solid currentColor;
  border-radius: 3.2cqw;
  font-size: 2.9cqw;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Hover: same small lift as the header images */
@media (hover: hover) {
  .card:hover { transform: translateY(-7px); }
}

/* Doodle / drawing spots, laid over the grid */
@media (max-width: 759px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .work__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   ABOUT: tilted polaroid (photo left, empty for now) + intro text
   ========================================================== */
.about {
  padding:
    clamp(48px, 7vw, 112px)
    max(clamp(24px, 8vw, 128px), env(safe-area-inset-right, 0px))
    clamp(72px, 9vw, 144px)
    max(clamp(24px, 8vw, 128px), env(safe-area-inset-left, 0px));
}

.about__inner {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 104px);
  align-items: center;
}

.polaroid {
  margin: 0;
  padding: 5% 5% 17%;
  background: #fffefb;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(38, 38, 38, .16), 0 2px 5px rgba(38, 38, 38, .08);
  transform: rotate(-3deg);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}

/* Hover is read on the wrapper (which doesn't rotate) so the frame can't flicker at its corners */
.polaroid-wrap:hover .polaroid { transform: rotate(9deg); }

.polaroid__photo {
  position: relative;
  aspect-ratio: 1 / 1.04;
  background: #335adf;
  transition: background-color .25s ease;
}

/* Resting photo: same scale as the hover photo, clipped to the photo area */
.polaroid__base {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity .25s ease;
}

.polaroid__img {
  position: absolute;
  top: -22%;
  left: -9%;
  width: 118%;
  max-width: none;
  height: auto;
}

/* Hover photo. The wrapper is clipped to the photo area, plus a strip that
   reaches out past both side edges so both elbows jump out of the frame. */
.polaroid__pop {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 100% 46%, 130% 46%, 130% 98%, 100% 98%, 100% 100%, 0 100%, 0 98%, -30% 98%, -30% 20%, 0 20%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.polaroid__pop img {
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  max-width: none;
  height: auto;
  transform: translateY(4%) scale(.95);
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}

.polaroid-wrap:hover .polaroid__photo { background: var(--coral); }
.polaroid-wrap:hover .polaroid__base { opacity: 0; }
.polaroid-wrap:hover .polaroid__pop { opacity: 1; }
.polaroid-wrap:hover .polaroid__pop img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .polaroid, .polaroid__photo, .polaroid__base, .polaroid__pop, .polaroid__pop img { transition: none; }
}

.about__hello {
  margin: 0 0 clamp(18px, 2.4vw, 36px);
  width: max-content;
  max-width: 100%;
  font-size: clamp(30px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  transform: rotate(-3deg);
  transform-origin: left center;
}

.about__copy {
  max-width: 62ch;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.65;
}

.about__copy p { margin: 0 0 1.1em; }
.about__copy p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .about__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .polaroid { width: min(78%, 360px); }
  .about-star:nth-child(1) { --x: 3 !important;  --y: 5 !important;  --s: 14 !important; }
  .about-star:nth-child(2) { --x: 86 !important; --y: 41 !important; --s: 9 !important; }
  .about-star:nth-child(3) { --x: 92 !important; --y: 6 !important;  --s: 10 !important; }
  .about-star:nth-child(4) { display: none; }
  .about__hello { margin-left: 4px; }
}

/* Little stars scattered around the About area (% of the area, size in cqw) */
.about-star {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: 2;
  width: calc(var(--s) * 1cqw);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--r));
  pointer-events: none;
}
.about-star use { fill: currentColor; }

@media (prefers-reduced-motion: reduce) {
  .ph--img, .card { transition: none; }
}

/* ==========================================================
   HEADER STARS: on page load, one star at a time pops up, holds, then
   disappears, moving left to right across the logo. Plays once.
   Positions are % of the logo stage; size is in cqw so they scale with it.
   ========================================================== */
.stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; } /* backup: remove "display:none" to bring the stars back */
.star {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--s) * 1cqw);
  height: auto;
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(0);
  animation: star-pop 1s linear 1 both;
  animation-delay: calc(.4s + var(--i) * 1s);
}
.star--coral { color: #ff797d; }
.star--green { color: #c6f281; }
.star--blue  { color: #335adf; }
.star--plum  { color: #791d5e; }
.star use { fill: currentColor; }
@keyframes star-pop {
  0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  45%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); animation-timing-function: linear; }
  75%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); }
}
@media (prefers-reduced-motion: reduce) {
  .star { display: none; }
}

/* ==========================================================
   HEADER PILLS: pop in one at a time, left to right, then stay.
   Positions are % of the logo stage; width is in cqw so they scale with it.
   ========================================================== */
.pills { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pill {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1cqw);
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--r)) scale(0);
  animation: pill-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1 both;
  animation-delay: calc(.4s + var(--i) * .5s);
}
@keyframes pill-pop {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(0); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pill { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); }
}

/* ==========================================================
   HEADER CALLOUT: pops in right after the last pill (pill 5 finishes at ~3s).
   Sits under the logo on the right and pushes the Work section down.
   ========================================================== */
.callout {
  display: flex;
  justify-content: flex-end;
  padding-right: 3%;
  margin-top: clamp(8px, 1.5vw, 24px);
}
.callout img {
  width: clamp(210px, 34vw, 520px);
  max-width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0);
  transform-origin: 100% 50%;
  animation: callout-pop .7s cubic-bezier(.3, 1.6, .5, 1) 3.1s 1 both;
}
@keyframes callout-pop {
  from { opacity: 1; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .callout img { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================
   CONTACT
   Headline font is Bonema Regular (assets/fonts/Bonema-Regular.otf).
   ========================================================== */
@font-face {
  font-family: "Bonema";
  src: url("assets/fonts/Bonema-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.6vw, 36px);
  padding:
    clamp(72px, 10vw, 160px)
    var(--gutter-r)
    clamp(32px, 4vw, 56px)
    var(--gutter-l);
  text-align: center;
  color: var(--ink);
}
.contact__title {
  margin: 0;
  font-family: "Bonema", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(44px, 9vw, 150px);
  line-height: 1.02;
  letter-spacing: .02em;
  text-wrap: balance;
  color: var(--ink);
  /* Bonema only comes in one weight, so a stroke in the text color thickens it */
  -webkit-text-stroke: .03em currentColor;
  paint-order: stroke fill;
  stroke-linejoin: round;
}
.contact__title .pink { color: var(--coral); }
.contact__email {
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .22em;
  overflow-wrap: anywhere;
}
.contact__social {
  display: flex;
  gap: clamp(20px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact__social a {
  display: block;
  width: clamp(34px, 3.4vw, 50px);
  color: inherit;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.contact__social a:hover { transform: scale(1.12) rotate(-4deg); }
.contact__social svg { display: block; width: 100%; height: auto; }
.contact__copy {
  margin: clamp(8px, 2vw, 28px) 0 0;
  font-size: 14px;
  color: var(--ink);
  opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
  .contact__social a { transition: none; }
}

/* ==========================================================
   PROJECT PAGES (projects/project-NN.html)
   The color class on <main> picks the accent: the same four colors
   as the Work cards.
   ========================================================== */
.project--maroon { --c: var(--plum);  --tc: var(--paper); }
.project--pink   { --c: var(--coral); --tc: var(--ink); }
.project--green  { --c: var(--mint);  --tc: var(--ink); }
.project--blue   { --c: var(--blue);  --tc: var(--paper); }

.project__head {
  /* a rounded rectangle, centered, with space on every side */
  box-sizing: border-box;
  width: auto;
  margin:
    calc(var(--nav-h) + var(--safe-top) + clamp(20px, 3vw, 44px))
    var(--gutter-r)
    0
    var(--gutter-l);
  padding: clamp(28px, 4vw, 64px);
  background: var(--c);
  color: var(--tc);
  border-radius: clamp(24px, 3.6vw, 52px);
}
.project__title {
  margin: 0;
  font-size: clamp(28px, 5vw, 76px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}
.project__tags li {
  padding: .5em 1.1em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: clamp(10px, .9vw, 12px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.project__intro {
  max-width: 62ch;
  margin: clamp(14px, 1.6vw, 24px) 0 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
}

.project__gallery {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(32px, 5vw, 72px) var(--gutter-r) 0 var(--gutter-l);
}
.project__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 28px);
}
.project__img {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(16px, 2.4vw, 36px);
  background: #e6e2e2;
}
.project__img--wide { aspect-ratio: 16 / 9; }
.project__img img { width: 100%; height: 100%; object-fit: cover; }
.project__img span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(38, 38, 38, .5);
}

.project__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  padding: clamp(40px, 6vw, 96px) var(--gutter-r) clamp(48px, 7vw, 112px) var(--gutter-l);
}
.project__nav a {
  color: var(--ink);
  font-size: clamp(15px, calc(2.2vw - 5px), 27px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.project__nav a:hover { color: var(--plum); }

@media (max-width: 720px) {
  .project__pair { grid-template-columns: 1fr; }
}

/* Star home link in the nav */
.nav__home { display: inline-flex; align-items: center; width: clamp(30px, 3vw, 40px); aspect-ratio: 1; color: var(--plum); transition: transform .25s ease; }
.nav__home svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.nav__home:hover { transform: rotate(20deg) scale(1.12); }
@media (prefers-reduced-motion: reduce) { .nav__home { transition: none; } }

/* ---------- Sticker Book (project 03): notebook + sticker tray ---------- */
.sb { padding: clamp(32px, 5vw, 72px) var(--gutter-r) 0 var(--gutter-l); }
.sb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(12px, 1.6vw, 20px); }
.sb__hint { margin: 0; font-size: clamp(10px, .9vw, 12px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sb__reset {
  font: inherit; font-size: clamp(10px, .9vw, 12px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .7em 1.4em; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.sb__reset:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.sb__reset:disabled { opacity: .35; cursor: url("assets/cursor-arrow.png") 0 0, auto; }
.sb__stage {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(16px, 3vw, 44px); align-items: center; justify-items: center;
  padding: clamp(16px, 3vw, 44px);
  background: #e6e2e2; border-radius: clamp(16px, 2.4vw, 36px);
  user-select: none; -webkit-user-select: none;
}
.sb__book { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: end; width: min(100%, 700px); }
.sb__notebook {
  position: relative; isolation: isolate; grid-column: 2; margin: 0;
  background: var(--nb, #262626); transition: background-color .35s ease;
  border-radius: 0 3.5% 3.5% 0 / 0 2.7% 2.7% 0;
  filter: drop-shadow(0 .6em 1em rgba(38,38,38,.28));
}
.sb__notebook::after { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 10%; background: #000; border-radius: 0; pointer-events: none; }
.sb__swatches { grid-column: 3; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; padding-bottom: 4px; }
.sb__swatch {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(38,38,38,.15);
  transition: transform .15s ease, outline-offset .15s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.sb__swatch:hover { transform: scale(1.12); }
.sb__swatch[aria-pressed="true"] { outline-color: var(--ink); }
.sb__swatch:focus-visible { outline-color: var(--blue); outline-offset: 3px; }
.sb__notebook img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; pointer-events: none; }
.sb__tray {
  width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(30, 1fr); gap: clamp(2px, .8vw, 12px) 0;
  padding: clamp(8px, 1.4vw, 20px); border-radius: clamp(14px, 2vw, 28px);
  background: rgba(248,246,246,.6); box-shadow: inset 0 0 0 1.5px rgba(38,38,38,.12);
}
.sb__slot { display: block; aspect-ratio: 1; grid-column: span 10; }
.sb__slot:nth-child(n+13) { grid-column: span 15; aspect-ratio: 3 / 2; } /* rows of 3,3,3,3,2,2 */
.sb__sticker {
  position: absolute; left: 0; top: 0; z-index: 1; height: auto;
  touch-action: none; transform-origin: 50% 50%;
  cursor: url("assets/cursor-hand.png") 10 0, grab;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.sb__sticker img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(38,38,38,.3)); transition: filter .2s ease; }
.sb__sticker.is-lifted img { filter: drop-shadow(0 12px 14px rgba(38,38,38,.35)); }
.sb__sticker:focus-visible img { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 3px var(--blue)) drop-shadow(0 0 3px var(--blue)); }
.sb__sticker.is-anim { transition: transform .7s cubic-bezier(.2,.9,.25,1.15); }
.sb__sticker.is-snap { transition: transform .3s ease; }
.sb__sticker.is-snap img { animation: sb-stick .35s ease; }
@keyframes sb-stick { 0% { transform: scale(1.1); } 55% { transform: scale(.95); } 100% { transform: scale(1); } }
@media (max-width: 720px) {
}
@media (max-width: 820px) {
  .sb__stage { grid-template-columns: minmax(0, 1fr); }
  .sb__tray { display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px; padding: 16px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sb__tray::-webkit-scrollbar { display: none; }
  .sb__slot, .sb__slot:nth-child(n+13) { flex: 0 0 112px; grid-column: auto; aspect-ratio: 1; }
  .sb__sticker.is-tray { touch-action: pan-x; }
  .sb__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: -6px; }
  .sb__navhint { flex: 1; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: .7; }
  .sb__arrow { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 700 18px/1 'Poppins', sans-serif; display: grid; place-items: center; padding: 0; }
  .sb__arrow:active { background: var(--ink); color: var(--paper); }
  .sb__book { grid-template-columns: 0 minmax(0, 1fr) 44px; }
  .sb__swatch { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb__sticker.is-anim, .sb__sticker.is-snap { transition: none; }
  .sb__sticker.is-snap img { animation: none; }
}

/* Project pages: plain nav (black text + black star) so it doesn't compete with the header color */
.nav--plain { background: var(--paper); color: var(--ink); }
.nav--plain .nav__home { color: var(--ink); }

/* ---------- Work filter bar ---------- */
.filter { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); margin-bottom: clamp(20px, 3vw, 40px); }
.filter__btn {
  font: inherit; font-weight: 600; font-size: clamp(12px, 1.05vw, 16px); letter-spacing: .01em;
  padding: .65em 1.3em; border-radius: 999px; border: 2px solid var(--ink);
  background: transparent; color: var(--ink);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.filter__btn:hover { background: rgba(38,38,38,.08); }
.filter__btn:active { transform: scale(.96); }
.filter__btn.is-active { background: var(--plum); border-color: var(--plum); color: var(--paper); }
.filter__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.filter__status { margin: 0 0 16px; font-size: 14px; }
.card[hidden] { display: none; }
.card.is-entering { animation: card-in .45s cubic-bezier(.2,.9,.25,1.1) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card.is-entering { animation: none; } }
@media (max-width: 1100px) { .filter__btn { padding: .6em 1em; } .filter { gap: 6px; } }

/* ---------- Page sections + slideshow (project pages) ---------- */
.psec { padding: clamp(36px, 5vw, 72px) var(--gutter-r) 0 var(--gutter-l); }
.psec__title { margin: 0 0 clamp(12px, 1.6vw, 20px); font-size: clamp(18px, 2vw, 28px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.psec--slides .psec__inner { width: 80%; margin-inline: auto; }
.psec + .project__gallery { padding-top: clamp(8px, 1.2vw, 16px); }
.slides { margin: 0; color: var(--ink); }
.slides__frame { position: relative; aspect-ratio: 1152 / 432; overflow: hidden; background: #e6e2e2; }
.slides__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.slides__img.is-active { opacity: 1; }
.slides__dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(12px, 1.4vw, 18px); }
.slides__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; transition: background-color .2s ease, transform .15s ease; }
.slides__dot:hover { transform: scale(1.2); }
.slides__dot.is-active { background: currentColor; }
.slides__dot:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 720px) { .psec--slides .psec__inner { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .slides__img { transition: none; } }

/* Project 02: keep everything after the header box in the same narrower margin as "Tour Slides" */
.project--inset .psec:not(.psec--slides),
.project--inset .project__nav {
  padding-left: calc(var(--gutter-l) + (100% - var(--gutter-l) - var(--gutter-r)) * .1);
  padding-right: calc(var(--gutter-r) + (100% - var(--gutter-l) - var(--gutter-r)) * .1);
}
@media (max-width: 720px) {
  .project--inset .psec:not(.psec--slides), .project--inset .project__nav { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
}

/* Tour Postcards: 3 per row, scattered like real cards, gentle wiggle on hover */
.postcards { list-style: none; margin: 0; padding: clamp(6px, 1vw, 14px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); }
.postcards__item { margin: 0; transform: rotate(var(--tilt, 0deg)); }
.postcards__item:nth-child(6n+1) { --tilt: -1.6deg; }
.postcards__item:nth-child(6n+2) { --tilt: 1.1deg; }
.postcards__item:nth-child(6n+3) { --tilt: -.7deg; }
.postcards__item:nth-child(6n+4) { --tilt: 1.5deg; }
.postcards__item:nth-child(6n+5) { --tilt: -1.2deg; }
.postcards__item:nth-child(6n)   { --tilt: .8deg; }
.postcards__item img {
  display: block; width: 100%; height: auto;
  border-radius: clamp(3px, .5vw, 8px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px -4px rgba(38,38,38,.28), 0 18px 32px -14px rgba(38,38,38,.28);
  transition: scale .25s ease, box-shadow .25s ease;
}
.postcards__item:hover img { scale: 1.04; animation: postcard-wiggle .6s ease-in-out; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 20px -4px rgba(38,38,38,.32), 0 26px 40px -14px rgba(38,38,38,.3); }
@keyframes postcard-wiggle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -2.5deg; } 40% { rotate: 2deg; } 60% { rotate: -1.5deg; } 80% { rotate: 1deg; }
}
@media (max-width: 720px) { .postcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .postcards__item:last-child { grid-column: 1 / -1; width: 50%; justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .postcards__item:hover img { animation: none; } .postcards__item img { transition: none; } }

/* Tour Badges: two badges on lanyards, swing on hover */
.badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 3vw, 48px); padding: 0 clamp(16px, 8%, 120px) clamp(32px, 5vw, 72px); background: #e6e2e2; overflow: hidden; }
.badge { margin: 0; width: 100%; max-width: 200px; justify-self: center; container-type: inline-size; }
.badge__swing { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.badge:hover .badge__swing { animation: badge-swing 1.8s ease-out; }
@keyframes badge-swing { 0% { rotate: 0deg; } 12% { rotate: 5deg; } 30% { rotate: -3.6deg; } 48% { rotate: 2.4deg; } 66% { rotate: -1.4deg; } 84% { rotate: .6deg; } 100% { rotate: 0deg; } }
.badge__strap { position: relative; z-index: 1; width: 9cqw; height: 64cqw; background: #f47b20; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 20% 100%, 0 80%); }
.badge__strap::before { content: ""; position: absolute; inset: 0; border: .45cqw dashed rgba(255,255,255,.4); border-top: 0; border-bottom: 0; margin: 0 .9cqw; }
.badge__strap span { position: absolute; inset: 0 0 14cqw; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-weight: 800; font-size: 3.5cqw; letter-spacing: .14em; color: #f8f6f6; }
.badge__clip { position: relative; z-index: 3; display: block; width: 12cqw; height: 20cqw; margin-top: -7.2cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35)); }
.badge__holder { position: relative; z-index: 2; width: 100%; margin-top: -9.8cqw; padding: 9cqw 4cqw 4cqw; border-radius: 6cqw; background: #151515; border: .4cqw solid #000; box-shadow: 0 .4cqw 0 rgba(0,0,0,.06), 0 4cqw 6cqw -2cqw rgba(38,38,38,.4), 0 10cqw 12cqw -6cqw rgba(38,38,38,.3); }
.badge__holder::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(255,255,255,.07) 100%); }
.badge__holder img { display: block; width: 100%; height: auto; border-radius: 2cqw; }
.badge__slot { position: absolute; z-index: 1; left: 50%; top: 3cqw; width: 20cqw; height: 3.2cqw; translate: -50% 0; border-radius: 1.6cqw; background: #e6e2e2; box-shadow: inset 0 .5cqw .8cqw rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .badge:hover .badge__swing { animation: none; } }

/* Tour Poster: taped to the wall */
.poster { display: flex; justify-content: center; padding: clamp(10px, 2vw, 28px) 9% clamp(14px, 2vw, 30px); }
.poster__sheet { position: relative; width: min(100%, 460px); container-type: inline-size; rotate: -1.2deg; transition: rotate .4s ease; }
.poster__sheet:hover { rotate: .4deg; }
.poster__sheet img { display: block; width: 100%; height: auto; box-shadow: 0 .3cqw 0 rgba(0,0,0,.06), 0 2cqw 3cqw -.6cqw rgba(38,38,38,.32), 0 6cqw 9cqw -3cqw rgba(38,38,38,.35); }
.poster__sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.06)); }
.poster__tape { position: absolute; z-index: 2; width: 24cqw; height: 7cqw; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%), rgba(226, 214, 170, .78); box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.18); clip-path: polygon(0 0, 3% 12%, 0 25%, 3% 38%, 0 50%, 3% 62%, 0 75%, 3% 88%, 0 100%, 100% 100%, 97% 88%, 100% 75%, 97% 62%, 100% 50%, 97% 38%, 100% 25%, 97% 12%, 100% 0); }
.poster__tape--tl { left: -7cqw; top: -1.5cqw; rotate: -38deg; }
.poster__tape--tr { right: -7cqw; top: -1.5cqw; rotate: 36deg; }
.poster__tape--bl { left: -7cqw; bottom: -1.5cqw; rotate: 34deg; }
.poster__tape--br { right: -7cqw; bottom: -1.5cqw; rotate: -36deg; }
@media (prefers-reduced-motion: reduce) { .poster__sheet { transition: none; } }
.project__intro--tools { margin-top: .6em; }

/* Candle label marquee: continuous scroll, pauses on hover */
.marquee { overflow: hidden; padding: clamp(6px, 1vw, 14px) 0 0; }
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 70s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; gap: clamp(12px, 1.6vw, 24px); padding: 0 clamp(12px, 1.6vw, 24px) 0 0; margin: 0; list-style: none; }
.marquee__group li { flex: none; }
.marquee__group img { display: block; height: clamp(130px, 21vw, 320px); width: auto; border-radius: clamp(4px, .6vw, 10px); }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee__track { animation: none; } }

/* Candle mockup */
.mockwrap { padding: clamp(6px, 1vw, 14px) var(--gutter-r) 0 var(--gutter-l); }
.mock { --mock-bg: #d4e6f8; position: relative; display: flex; flex-direction: column; align-items: center; background: var(--mock-bg); transition: background-color .5s ease; padding: clamp(8px, 2vw, 28px) 0 clamp(18px, 2.4vw, 32px); }
.mock canvas { display: block; width: min(100%, 520px); height: auto; aspect-ratio: 1000 / 1120; touch-action: pan-y; cursor: grab; outline-offset: 4px; }
.mock canvas.is-grabbing { cursor: grabbing; }
.mock__ui { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(-30px, -2vw, -10px); }
.mock__hint { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .6; }
.mock__swatches { display: flex; gap: clamp(10px, 1.6vw, 18px); }
.mock__swatch { appearance: none; width: clamp(26px, 2.6vw, 34px); height: clamp(26px, 2.6vw, 34px); border-radius: 50%; border: 2px solid var(--ink); background: var(--sw); padding: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.mock__swatch:hover { transform: scale(1.12); }
.mock__swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }

/* Candle photo gallery: stack of polaroids, click through */
.pol { background: #e6e2e2; padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 64px) clamp(20px, 3vw, 36px); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 30px); overflow: hidden; }
.pol__stage { position: relative; margin-bottom: clamp(10px, 1.6vw, 22px); width: min(100%, 560px); aspect-ratio: 1 / .82; outline-offset: 12px; }
.pol__card { --r: 0deg; --x: 0px; --y: 0px; position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; gap: 3.2%; padding: 4.4% 4.4% 0; background: #fdfcf8; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 18px -6px rgba(38,38,38,.35), 0 22px 36px -18px rgba(38,38,38,.3); transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: opacity .3s ease; user-select: none; -webkit-user-select: none; }
.pol__card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pol__card figcaption { flex: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 1.4vw, 17px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.pol__card[data-pos="0"] { cursor: pointer; }
.pol__card.is-out { opacity: 0; transition: opacity .25s ease; }
.pol__card.is-hidden { opacity: 0; pointer-events: none; }
.pol__ui { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.pol__btn { appearance: none; width: clamp(38px, 3.4vw, 46px); height: clamp(38px, 3.4vw, 46px); border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 700 18px/1 'Poppins', sans-serif; cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.pol__btn:hover { transform: scale(1.08); background: var(--ink); color: var(--paper); }
.pol__count { min-width: 4.2em; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .pol__card, .pol__card.is-out { transition: none; } }

/* The Cups: checkerboard stays put, cups pop in at random and stay */
.cups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cups__tile { position: relative; aspect-ratio: 1; background: #00522c; overflow: hidden; }
.cups__tile--r { background: #ed1b2e; }
.cups__cup { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.cups:not(.is-static) .cups__cup { opacity: 0; transform: translateY(10px) scale(.94); }
.cups:not(.is-static) .cups__cup.is-in { opacity: 1; transform: none; }
@media (max-width: 720px) { .cups { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cups__tile--g, .cups__tile--r { } }
@media (prefers-reduced-motion: reduce) { .cups__cup { transition: none; } .cups .cups__cup { opacity: 1; transform: none; } }
.marquee__ph { display: grid; place-items: center; height: clamp(130px, 21vw, 320px); aspect-ratio: 2.69 / 1; border-radius: clamp(4px, .6vw, 10px); background: #e6e2e2; color: var(--ink); opacity: .75; font-weight: 600; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }

/* The Merch */
.merch { --mg: clamp(10px, 1.6vw, 24px); --mr: clamp(16px, 2.4vw, 36px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--mg); align-items: stretch; }
.merch__photo { margin: 0; border-radius: var(--mr); overflow: hidden; background: #cfd4cf; min-height: 100%; }
.merch__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.merch__col { display: grid; gap: var(--mg); grid-template-rows: auto auto; min-width: 0; }
.merch__panel { position: relative; margin: 0; border-radius: var(--mr); overflow: hidden; display: grid; place-items: center; }
.merch__panel--sweater { background: #00522c; padding: clamp(10px, 2vw, 28px); }
.merch__panel--sweater img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .8vw 1.4vw rgba(0,0,0,.35)); }
.merch__panel--sticker { background: #f3ece4; padding: clamp(18px, 3vw, 44px) clamp(18px, 3vw, 44px) clamp(40px, 4vw, 56px); transition: background-color .9s ease; }
.merch__panel--sticker.is-dark { background: #0b0c12; }
.glow { position: relative; appearance: none; border: 0; background: none; padding: 0; width: min(100%, 420px); cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
.glow img { display: block; width: 100%; height: auto; }
.glow__base { transition: filter .9s ease; }
.glow__lit { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; filter: drop-shadow(0 0 5px rgba(170,255,130,.95)) drop-shadow(0 0 18px rgba(150,255,110,.6)); }
.merch__panel--sticker.is-dark .glow__base { filter: brightness(.26) saturate(.7); }
.merch__panel--sticker.is-dark .glow__lit { opacity: 1; animation: glow-breathe 4.5s ease-in-out infinite; }
@keyframes glow-breathe { 0%, 100% { filter: drop-shadow(0 0 5px rgba(170,255,130,.95)) drop-shadow(0 0 18px rgba(150,255,110,.6)); } 50% { filter: drop-shadow(0 0 7px rgba(170,255,130,1)) drop-shadow(0 0 28px rgba(150,255,110,.85)); } }
.glow__cap { position: absolute; left: 0; right: 0; bottom: clamp(12px, 1.6vw, 20px); text-align: center; }
.glow__hint { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: .6; transition: color .9s ease; }
.merch__panel--sticker.is-dark .glow__hint { color: #c3ffa6; opacity: .85; }
.glow:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
@media (max-width: 720px) { .merch { grid-template-columns: 1fr; } .merch__photo { min-height: 0; } .merch__photo img { height: auto; } }
@media (prefers-reduced-motion: reduce) { .glow__base, .glow__lit, .merch__panel--sticker, .glow__hint { transition: none; } .merch__panel--sticker.is-dark .glow__lit { animation: none; } }

/* Digital & CRM */
.psec__sub { margin: 0 0 clamp(10px, 1.4vw, 18px); font-size: clamp(13px, 1.3vw, 17px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: .7; }
.psec__sub--gap { margin-top: clamp(32px, 4.5vw, 64px); }
.marquee--cards .marquee__track { animation-duration: 45s; }
.marquee--cards .marquee__group img { height: clamp(110px, 17vw, 260px); border-radius: clamp(6px, 1vw, 16px); box-shadow: 0 3px 0 rgba(38,38,38,.14); }
.phones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 28px); }
.phones__item img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.22,.7,.3,1), filter .45s; filter: drop-shadow(0 6px 10px rgba(38,38,38,.12)); }
.phones__item:nth-child(odd):hover img { transform: translateY(-10px) rotate(-1.5deg); }
.phones__item:nth-child(even):hover img { transform: translateY(-10px) rotate(1.5deg); }
.phones__item:hover img { filter: drop-shadow(0 18px 18px rgba(38,38,38,.22)); }
@media (max-width: 720px) { .phones { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .phones__item img { transition: none; } .phones__item:hover img { transform: none; } }


/* Photo carousel (Holiday photography, candle photos) */
.shoot { --w: clamp(200px, 25.3vw, 360px); --ar: 2 / 3; position: relative; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); }
.shoot--land { --w: clamp(280px, 52vw, 720px); --ar: 3 / 2; }
.shoot__track { list-style: none; margin: 0; padding: clamp(20px, 3vw, 40px) calc(50% - var(--w) / 2) clamp(64px, 7vw, 96px); display: flex; gap: clamp(12px, 1.8vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.shoot__track::-webkit-scrollbar { display: none; }
.shoot__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.shoot__item { position: relative; flex: none; width: var(--w); aspect-ratio: var(--ar); scroll-snap-align: center; transform: scale(.84); opacity: .6; transition: transform .35s cubic-bezier(.22,.7,.3,1), opacity .35s; }
.shoot__item img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: clamp(8px, 1.2vw, 18px); background: #e6e2e2; pointer-events: none; -webkit-user-drag: none; transition: box-shadow .35s; }
.shoot__item.is-on img { box-shadow: 0 18px 40px rgba(38,38,38,.25); }
.shoot__cap { position: absolute; left: 0; right: 0; top: 100%; margin-top: clamp(12px, 1.6vw, 20px); text-align: center; font-size: clamp(12px, 1.3vw, 16px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .3s; }
.shoot__item.is-on .shoot__cap { opacity: 1; }
.shoot__ctrl { display: flex; justify-content: center; gap: 12px; }
.shoot__btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: 600 18px/1 Poppins, sans-serif; cursor: pointer; }
.shoot__btn:hover { background: var(--ink); color: var(--bg, #f8f6f6); }
@media (prefers-reduced-motion: reduce) { .shoot__item, .shoot__cap { transition: none; } }

/* Signage */
.posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); justify-items: center; align-items: start; padding: clamp(14px, 2vw, 28px) clamp(14px, 4vw, 56px) clamp(10px, 2vw, 24px); }
.posters .poster__sheet { width: 100%; max-width: 520px; }
.poster__sheet--b { rotate: 1deg; }
.poster__sheet--b:hover { rotate: -.4deg; }
.signwin { margin: clamp(28px, 4vw, 56px) 0 0; }
.signwin img { display: block; width: 100%; height: auto; border-radius: clamp(8px, 1.2vw, 18px); }
@media (max-width: 720px) { .posters { grid-template-columns: 1fr; padding-inline: 9%; } }

/* Dutch Bros Merch */
.gears { display: grid; gap: clamp(14px, 2vw, 28px); padding: clamp(36px, 5vw, 72px) var(--gutter-r) 0 var(--gutter-l); }
.gearbox { background: #f3ece4; border-radius: clamp(16px, 2.4vw, 36px); padding: clamp(24px, 4vw, 64px) clamp(16px, 4vw, 64px); display: grid; justify-items: center; gap: clamp(8px, 1.5vw, 20px); }
.gearbox .psec__title { justify-self: start; margin: 0; padding: 0; }
.gear__img { display: block; width: min(100%, 820px); height: auto; filter: drop-shadow(0 16px 16px rgba(38,38,38,.22)); transition: transform .5s cubic-bezier(.22,.7,.3,1), filter .5s; }
.gear__img:hover { transform: translateY(-8px) scale(1.015); filter: drop-shadow(0 28px 26px rgba(38,38,38,.28)); }
.gearbox--photo { background: #f6f6f6; }
.gear__photo { display: block; width: min(100%, 500px); height: auto; }
@media (prefers-reduced-motion: reduce) { .gear__img { transition: none; } .gear__img:hover { transform: none; } }

/* Cider & seltzer */
.shoot--cider { --w: clamp(280px, 58vw, 800px); --ar: 1800 / 1117; }
.shoot--seltzer { --w: clamp(280px, 58vw, 800px); --ar: 1800 / 1054; }
.cans { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(12px, 4vw, 64px); width: 100%; }
.can { display: grid; justify-items: center; gap: clamp(8px, 1.2vw, 16px); flex: 0 1 auto; min-width: 0; }
.can img { display: block; height: clamp(200px, 36vw, 460px); width: auto; max-width: 100%; filter: drop-shadow(0 16px 14px rgba(38,38,38,.25)); transition: transform .5s cubic-bezier(.22,.7,.3,1), filter .5s; transform-origin: 50% 100%; }
.can:nth-child(odd):hover img { transform: translateY(-10px) rotate(-2deg); }
.can:nth-child(even):hover img { transform: translateY(-10px) rotate(2deg); }
.can:hover img { filter: drop-shadow(0 28px 22px rgba(38,38,38,.3)); }
.can__cap { font-size: clamp(11px, 1.2vw, 15px); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-align: center; }
@media (prefers-reduced-motion: reduce) { .can img { transition: none; } .can:hover img { transform: none; } }

/* Cider & seltzer click-through (cutouts, no backgrounds) */
.shoot--cutout.shoot--cider { --w: clamp(280px, 56vw, 760px); --ar: 1272 / 720; }
.shoot--cutout.shoot--seltzer { --w: clamp(332px, 67vw, 905px); --ar: 1500 / 700; }
.shoot--cutout .shoot__item img { object-fit: contain; background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 10px 10px rgba(38,38,38,.22)); }
.shoot--cutout .shoot__item.is-on img { box-shadow: none; }

/* Buck For Kids */
.bfk { position: relative; width: min(100%, 980px); margin: clamp(8px, 1.5vw, 20px) auto 0; aspect-ratio: 1458 / 1036; }
.bfk__el { position: absolute; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(38,38,38,.25)); user-select: none; }
.bfk__icon { transition: transform .5s cubic-bezier(.22,.9,.3,1.3), filter .4s; cursor: pointer; }
.bfk__icon:hover { filter: drop-shadow(0 16px 16px rgba(38,38,38,.3)); }
.bfk__icon--pennant { transform-origin: 8% 50%; } .bfk__icon--pennant:hover { transform: rotate(-9deg) translateX(6px); }
.bfk__icon--hand { transform-origin: 50% 90%; } .bfk__icon--hand:hover { transform: rotate(11deg) translateY(-12px) scale(1.06); }
.bfk__icon--bk4 { transform-origin: 50% 100%; } .bfk__icon--bk4:hover { transform: rotate(-7deg) translateY(-12px) scale(1.05); }
.bfk__icon--windmill { transform-origin: 50% 60%; } .bfk__icon--windmill:hover { transform: rotate(14deg) scale(1.08); }
.phones--three { grid-template-columns: repeat(3, 1fr); width: min(100%, 860px); margin-inline: auto; }
@media (max-width: 720px) { .phones--three { grid-template-columns: repeat(3, 1fr); } }
.posters--bfk { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.posters--bfk .poster__sheet { max-width: 480px; }
.doorpic { margin: 0; width: 100%; max-width: 380px; }
.doorpic img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.6vw, 22px); box-shadow: 0 14px 30px rgba(38,38,38,.25); }
@media (max-width: 720px) { .posters--bfk { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .bfk__icon { transition: none; } .bfk__icon:hover { transform: none; } }

.bfkpanel { background-color: #3880c8; background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px); background-size: 9px 9px; border-radius: clamp(16px, 2.4vw, 36px); padding: clamp(14px, 3vw, 44px); margin-top: clamp(8px, 1.5vw, 20px); }
.bfkpanel .bfk { margin-top: 0; }
.posters--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.posters--solo .poster__sheet { max-width: 520px; }

.bfk__dog { display: block; width: 100%; max-width: 280px; height: auto; rotate: 3deg; transition: rotate .5s cubic-bezier(.22,.9,.3,1.3), translate .5s cubic-bezier(.22,.9,.3,1.3); }
.bfk__dog:hover { rotate: -4deg; translate: 0 -10px; }
@media (prefers-reduced-motion: reduce) { .bfk__dog { transition: none; } .bfk__dog:hover { rotate: 3deg; translate: none; } }

/* Signage page: poster + installed photo pairs */
.sigpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; justify-items: center; padding: clamp(18px, 3vw, 40px) clamp(14px, 4vw, 56px); }
.sigpair .poster__sheet { width: 100%; max-width: 440px; }
.sigpair--flip .poster__sheet { order: 2; rotate: 1deg; }
.sigpair--flip .poster__sheet:hover { rotate: -.4deg; }
.sigphoto { margin: 0; width: 100%; max-width: 400px; }
.sigphoto img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.6vw, 22px); box-shadow: 0 14px 30px rgba(38,38,38,.25); }
.signwin--gap { margin-top: clamp(16px, 3vw, 40px); }
@media (max-width: 720px) { .sigpair { grid-template-columns: 1fr; padding-inline: 9%; } .sigpair--flip .poster__sheet { order: 0; } }

.posters--sig .poster__sheet { max-width: 480px; }
/* Freestanding banner stand mockup */
.standee { position: relative; width: min(78vw, 360px); margin: clamp(10px, 2vw, 28px) auto clamp(20px, 3vw, 40px); display: grid; justify-items: center; }
.standee__rail { width: 100%; height: clamp(10px, 2.2vw, 16px); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #5a5a5a, #262626 55%, #3b3b3b); box-shadow: 0 2px 4px rgba(0,0,0,.3); position: relative; z-index: 2; }
.standee__print { width: 96%; position: relative; box-shadow: 0 .6cqw 1.2cqw rgba(38,38,38,.25); container-type: inline-size; }
.standee__print img { display: block; width: 100%; height: auto; }
.standee__print::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,0) 70%, rgba(0,0,0,.14) 100%); pointer-events: none; }
.standee__base { width: 104%; height: clamp(34px, 8vw, 56px); border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #e9e9ea 0%, #b9babd 18%, #8d8e92 55%, #5d5e62 100%); box-shadow: 0 2px 0 rgba(0,0,0,.12); position: relative; z-index: 2; display: grid; place-items: center; }
.standee__base span { width: 38%; height: 4px; border-radius: 4px; background: rgba(38,38,38,.55); }
.standee__shadow { position: absolute; left: 4%; right: 4%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(38,38,38,.35), rgba(38,38,38,0) 70%); z-index: 0; }

/* Murals & Walls */
.sigwalls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: start; }
.sigwalls__photo { margin: 0; }
.sigwalls__photo img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.6vw, 18px); box-shadow: 0 10px 28px rgba(38,38,38,.18); }
.wallscene { position: relative; width: 100%; aspect-ratio: 1000 / 1380; overflow: hidden; border-radius: clamp(10px, 1.6vw, 18px); box-shadow: 0 10px 28px rgba(38,38,38,.18); container-type: inline-size; background: #e4e0dc; }
.wallscene__wall { position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 15%, #f1eeea 0%, #e2ddd8 60%, #cfc9c3 100%); }
.wallscene__wall::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px); background-size: 5px 5px; }
.wallscene__mural { position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%); box-shadow: 0 .4cqw .8cqw rgba(38,38,38,.28); }
.wallscene__mural img { display: block; width: 100%; height: auto; }
.wallscene__mural::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.12)); pointer-events: none; }
.wallscene__base { position: absolute; left: 0; right: 0; bottom: 12%; height: 3.4%; background: linear-gradient(180deg, #2b2b2b, #1b1b1b); }
.wallscene__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(180deg, #4a4750, #34323a); }
.wallscene__floor::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: repeating-linear-gradient(100deg, rgba(255,255,255,.25) 0 2px, transparent 2px 9px); }
@media (max-width: 720px) { .sigwalls { grid-template-columns: minmax(0, 1fr); } }

/* For Foods Sake */
.ffs__img { margin: 0; max-width: 900px; margin-inline: auto; }
.ffs__img img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.6vw, 18px); }
.ffs__swatches { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: clamp(10px, 1.6vw, 18px); overflow: hidden; }
.ffs__swatches li { aspect-ratio: 1 / 1.5; display: flex; align-items: flex-end; padding: 10px; }
.ffs__swatches span { font-size: clamp(10px, 1.1vw, 13px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 720px) { .ffs__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ffs__swatches li { aspect-ratio: 1; } }

/* National Dog Day bandana */
.dogband { margin: 0 auto; max-width: 1000px; }
.dogband img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(38,38,38,.22)); }

.psec--dog .psec__title { margin-bottom: clamp(26px, 3.4vw, 48px); }



/* Email mockups (Digital & CRM) */
.emails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); align-items: start; width: min(100%, 600px); margin-inline: auto; }
.emailcard { background: #fff; border-radius: clamp(10px, 1.4vw, 16px); box-shadow: 0 1px 2px rgba(38,38,38,.12), 0 14px 32px rgba(38,38,38,.14); overflow: hidden; font-family: Roboto, "Helvetica Neue", Arial, sans-serif; color: #202124; }
.emailcard__head { padding: clamp(12px, 1.2vw, 16px) clamp(12px, 1.2vw, 16px) clamp(8px, 1vw, 12px); }
.emailcard__subject { margin: 0 0 clamp(8px, 1vw, 12px); font-size: clamp(13px, 1.15vw, 16px); font-weight: 400; line-height: 1.25; }
.emailcard__from { display: flex; align-items: center; gap: 10px; }
.emailcard__avatar { width: clamp(26px, 2.2vw, 32px); height: auto; flex: none; border-radius: 50%; }
.emailcard__from p { margin: 0; line-height: 1.35; }
.emailcard__name { font-size: clamp(9.5px, .8vw, 11px); overflow-wrap: anywhere; }
.emailcard__name span { color: #5f6368; font-size: .92em; }
.emailcard__to { font-size: clamp(9.5px, .75vw, 10.5px); color: #5f6368; }
.emailcard { padding-bottom: clamp(18px, 2.4vw, 30px); }
.emailcard__body { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .emails { grid-template-columns: minmax(0, 1fr); width: min(100%, 300px); } }

.emails--single { grid-template-columns: minmax(0, 1fr); width: min(100%, 290px); }

.zflogo { margin: 0 auto; max-width: 900px; }
.zflogo img { display: block; width: 100%; height: auto; }

/* Zipfizz strip divider (full-bleed, repeats) */
.project:has(.zfstrip) { overflow-x: clip; }
.zfstrip { display: flex; height: clamp(48px, 7vw, 104px); margin-top: clamp(40px, 6vw, 88px); width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #050608; }
.zfstrip__tile { flex: none; height: 100%; aspect-ratio: 235 / 231; background: #050608; }
.zfstrip__tile svg { display: block; width: 100%; height: 100%; }

/* Zipfizz packaging wall */
.zpwall { --c: #dcdada; --ink: #262626; position: relative; border-radius: clamp(14px, 2vw, 28px); background: #dcdada; padding: clamp(28px, 4vw, 56px) clamp(10px, 2vw, 28px) clamp(16px, 2.4vw, 28px); transition: background-color .5s ease; }
.zpwall.is-tinted { background: var(--c); }
.zpwall__row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(2px, .6vw, 10px); }
.zpwall__row li { flex: 1 1 0; min-width: 0; max-width: 118px; }
.zpwall__pack { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(46px); transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.3,1); -webkit-tap-highlight-color: transparent; }
.zpwall__pack.is-in { opacity: 1; transform: none; }
.zpwall__pack img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.28)); transition: transform .35s cubic-bezier(.22,.8,.3,1), filter .35s; }
.zpwall__pack:hover img, .zpwall__pack:focus-visible img, .zpwall__pack.is-active img { transform: translateY(-16px) scale(1.04); filter: drop-shadow(0 22px 20px rgba(0,0,0,.32)); }
.zpwall__pack:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.zpwall__label { margin: clamp(14px, 2vw, 24px) 0 0; text-align: center; font-size: clamp(18px, 2.6vw, 34px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #262626; transition: color .5s ease; }
.zpwall.is-tinted .zpwall__label { color: var(--ink); }
@media (max-width: 900px) {
  .zpwall__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; gap: 14px; padding: 26px 14px 40px; margin: -10px -6px -16px; -webkit-overflow-scrolling: touch; }
  .zpwall__row li { flex: 0 0 clamp(72px, 22vw, 104px); scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) { .zpwall__pack { opacity: 1; transform: none; transition: none; } .zpwall, .zpwall__label, .zpwall__pack img { transition: none; } }

.zfmerch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: clamp(16px, 4vw, 56px); }
.zfmerch figure { margin: 0; }
.zfmerch img { display: block; width: 100%; height: auto; }
.zfmerch__shaker { max-width: 215px; justify-self: center; }
@media (max-width: 700px) { .zfmerch { grid-template-columns: 1fr; } .zfmerch__shaker { max-width: 160px; } }

.zfmerch__towel { max-width: 500px; justify-self: center; }
.zfmerch { grid-template-columns: auto auto; justify-content: center; gap: clamp(0px, 1vw, 12px); }
.zfmerch__shaker { width: 215px; }
.zfmerch__towel { width: min(500px, 52vw); }
@media (max-width: 700px) { .zfmerch { grid-template-columns: 1fr; justify-content: stretch; gap: 16px; } .zfmerch__shaker { width: auto; } .zfmerch__towel { width: auto; } }
.zfmerch { transform: translateX(4px); }
@media (max-width: 700px) { .zfmerch { transform: none; } }
.zfmerch__shaker { transform: translateX(32px); }
@media (max-width: 700px) { .zfmerch__shaker { transform: none; } }

.es__swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) { .es__swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.es__web { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 1.5vw, 24px); }
.es__web figure { margin: 0; }
.es__web img { display: block; width: 100%; height: auto; }
.es__laptop { flex: 0 1 72%; min-width: 0; }
.es__phone { flex: 0 1 19%; min-width: 0; }
@media (max-width: 700px) { .es__web { flex-direction: column; align-items: center; gap: 12px; } .es__laptop { flex: none; width: 100%; } .es__phone { flex: none; width: 62%; } }
.project--es .psec { padding-top: clamp(64px, 9vw, 130px); }
.project--es .project__nav { margin-top: clamp(24px, 4vw, 56px); }
@media (max-width: 720px) { .cups .cups__tile:nth-child(odd) { background: #00522c; } .cups .cups__tile:nth-child(even) { background: #ed1b2e; } }

.sb__nav { display: none; }
@media (max-width: 820px) { .sb__nav { display: flex; } }
@media (max-width: 720px) { .bfk__dog { max-width: 190px; } }
@media (max-width: 720px) {
  .ffs__img--logos { aspect-ratio: 565 / 678; overflow: hidden; position: relative; border-radius: 12px; background: #efefec; }
  .ffs__img--logos img { position: absolute; top: 0; left: -44.2%; width: 188.7%; max-width: none; border-radius: 0; }
}
@media (max-width: 720px) { .contact { padding-top: 24px; } }

.zflogo__stack { display: none; }
@media (max-width: 720px) {
  .zflogo > img { display: none; }
  .zflogo__stack { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4vw, 24px); }
  .zflogo__stack img { display: block; height: auto; }
  .zflogo__stack img:nth-child(1) { width: 82%; }
  .zflogo__stack img:nth-child(2) { width: 6.5%; }
  .zflogo__stack img:nth-child(3) { width: 74%; }
}
@media (max-width: 720px) {
  .es__logo { aspect-ratio: 870 / 600; overflow: hidden; position: relative; border-radius: 12px; background: #1e2e2e; }
  .es__logo img { position: absolute; top: -40%; left: -33.3%; width: 166.7%; max-width: none; border-radius: 0; }
}

.contact__mail { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; }
.contact__copy-btn { font: 600 13px/1 "Poppins", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .75em 1.1em; border-radius: 999px; border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.contact__copy-btn:hover, .contact__copy-btn.is-done { background: var(--ink); color: var(--paper); }
.contact__copy-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.contact__copied { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }