/* ============================================
   Entrance (Top Page) Styles
   kichi - ワクワクをつくる基地
   ============================================ */

/* ── Loading Screen (Rich 3D Treasure Chest) ── */
.loading {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #FFFDF8 0%, #F4ECE1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
  user-select: none;
  cursor: pointer;
}

.loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Chest Container & Aura ── */
.loading__chest-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.loading__aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 59, 0.45) 0%, rgba(255, 152, 0, 0.2) 50%, transparent 70%);
  filter: blur(16px);
  pointer-events: none;
  opacity: 0.6;
  transform: scale(0.9);
  transition: transform 0.5s ease, opacity 0.5s ease;
  animation: float 4s ease-in-out infinite alternate;
}

.loading__rays {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 380px;
  height: 380px;
  background: conic-gradient(from 0deg,
      rgba(255, 215, 0, 0.25) 0deg 20deg,
      transparent 20deg 40deg,
      rgba(0, 160, 233, 0.2) 40deg 60deg,
      transparent 60deg 80deg,
      rgba(228, 0, 127, 0.2) 80deg 100deg,
      transparent 100deg 120deg,
      rgba(255, 241, 0, 0.25) 120deg 140deg,
      transparent 140deg 160deg,
      rgba(0, 153, 68, 0.2) 160deg 180deg,
      transparent 180deg 200deg,
      rgba(255, 215, 0, 0.25) 200deg 220deg,
      transparent 220deg 240deg,
      rgba(0, 160, 233, 0.2) 240deg 260deg,
      transparent 260deg 280deg,
      rgba(228, 0, 127, 0.2) 280deg 300deg,
      transparent 300deg 320deg,
      rgba(0, 153, 68, 0.2) 320deg 340deg,
      transparent 340deg 360deg);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.loading__chest-container.is-opening .loading__rays {
  animation: raysSpin 1.2s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

/* ── 3D Chest Main ── */
.loading__chest {
  width: 130px;
  height: 105px;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  cursor: pointer;
  animation: chestFloat 3.2s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loading__chest:hover {
  transform: scale(1.06) translateY(-4px);
}

.loading__chest:active {
  transform: scale(0.96) translateY(2px);
}

.loading__chest.is-shaking {
  animation: chestIntenseShake 0.6s ease-in-out infinite;
}

/* ── Chest Ground Shadow ── */
.chest__shadow {
  position: absolute;
  bottom: -18px;
  left: 10px;
  width: 110px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(40, 20, 10, 0.35) 0%, rgba(40, 20, 10, 0) 70%);
  border-radius: 50%;
  animation: chestShadowFloat 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Chest Body (Lower Trunk) ── */
.chest__body {
  width: 120px;
  height: 64px;
  background: linear-gradient(180deg, #9C5127 0%, #753412 55%, #522005 100%);
  border: 3.5px solid #2B1204;
  border-radius: 4px 4px 12px 12px;
  position: absolute;
  bottom: 0;
  left: 5px;
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.2),
    inset 0 -6px 10px rgba(0, 0, 0, 0.45),
    0 10px 20px rgba(70, 30, 10, 0.25);
  overflow: hidden;
  z-index: 2;
}

/* Wood Planks horizontal dividers */
.chest__body-planks {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  pointer-events: none;
}

.chest__plank {
  width: 100%;
  height: 2px;
  background: rgba(43, 18, 4, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Golden Metal Straps */
.chest__body-band {
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(90deg, #B57500 0%, #FFD54F 35%, #FFF59D 50%, #FFB300 70%, #8D5600 100%);
  border-left: 2px solid #2B1204;
  border-right: 2px solid #2B1204;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
}

.chest__body-band--left {
  left: 20px;
}

.chest__body-band--right {
  right: 20px;
}

/* Golden Rivets (鋲) */
.chest__rivet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FFD700 50%, #8A5700 100%);
  border: 1px solid #3E1E05;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Corner Protectors */
.chest__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 3px solid #FFD54F;
  pointer-events: none;
}

.chest__corner--tl {
  top: 2px;
  left: 2px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}

.chest__corner--tr {
  top: 2px;
  right: 2px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 4px;
}

.chest__corner--bl {
  bottom: 2px;
  left: 2px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
}

.chest__corner--br {
  bottom: 2px;
  right: 2px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
}

/* Golden Lock Plate & Gem */
.chest__lock {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 30px;
  z-index: 5;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.loading__chest-container.is-opening .chest__lock {
  animation: chestLockSnap 0.5s ease-out forwards;
}

.chest__lock-plate {
  width: 28px;
  height: 24px;
  margin: 0 auto;
  background: linear-gradient(135deg, #FFF176 0%, #FFB300 60%, #BF7700 100%);
  border: 2.5px solid #2B1204;
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.chest__keyhole {
  width: 6px;
  height: 10px;
  background: #2B1204;
  border-radius: 3px 3px 1px 1px;
  position: relative;
}

.chest__keyhole::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 5px;
  background: #2B1204;
}

.chest__lock-gem {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 30% 30%, #FF80AB 0%, #E4007F 70%, #880E4F 100%);
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  box-shadow: 0 0 6px rgba(228, 0, 127, 0.8);
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Chest Lid (Arched Top & 3D Hinge) ── */
.chest__lid-hinge {
  position: absolute;
  top: 4px;
  left: 0;
  width: 130px;
  height: 48px;
  transform-origin: 50% 12px;
  transform-style: preserve-3d;
  z-index: 4;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loading__chest-container.is-opening .chest__lid-hinge {
  animation: chestLid3DOpen 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}

.chest__lid {
  width: 128px;
  height: 46px;
  margin: 0 auto;
  position: relative;
}

.chest__lid-front {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #B36232 0%, #8F4218 50%, #682C0C 100%);
  border: 3.5px solid #2B1204;
  border-radius: 20px 20px 6px 6px;
  box-shadow:
    inset 0 6px 8px rgba(255, 255, 255, 0.35),
    inset 0 -4px 6px rgba(0, 0, 0, 0.4),
    0 6px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.chest__lid-band {
  width: 16px;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(90deg, #B57500 0%, #FFD54F 35%, #FFF59D 50%, #FFB300 70%, #8D5600 100%);
  border-left: 2px solid #2B1204;
  border-right: 2px solid #2B1204;
}

.chest__lid-band--left {
  left: 24px;
}

.chest__lid-band--right {
  right: 24px;
}

.chest__lid-handle {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 8px;
  border: 3px solid #FFD54F;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.chest__lid-latch-top {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 10px;
  background: linear-gradient(180deg, #FFE082, #FFB300);
  border: 2px solid #2B1204;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

/* ── Chest Interior (Magic Light Inside) ── */
.chest__interior {
  position: absolute;
  top: 36px;
  left: 12px;
  width: 106px;
  height: 24px;
  background: #3B1604;
  border-radius: 4px 4px 8px 8px;
  z-index: 1;
  overflow: hidden;
}

.chest__inner-glow {
  position: absolute;
  inset: -15px;
  background: radial-gradient(ellipse at center, #FFFFFF 0%, #FFF59D 30%, #FF80AB 60%, transparent 85%);
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.loading__chest-container.is-opening .chest__inner-glow {
  animation: chestInnerGlowBurst 0.9s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

.chest__inner-shine {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 235, 59, 0.5) 60%, transparent 100%);
  opacity: 0;
  filter: blur(6px);
}

.loading__chest-container.is-opening .chest__inner-shine {
  opacity: 1;
  transition: opacity 0.3s ease 0.1s;
}

/* ── Playful Hint Badge ── */
.loading__hint {
  margin-top: 30px;
  background: #FFFFFF;
  border: 2.5px solid var(--color-dark);
  padding: 8px 18px;
  border-radius: 30px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-dark);
  box-shadow: 0 6px 0 var(--color-dark), 0 10px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: hintBounce 2s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.loading__chest-container.is-opening .loading__hint {
  opacity: 0;
  transform: scale(0.8) translateY(10px);
}

.loading__hint-sparkle {
  font-size: 1.1em;
}

/* ── Scattered Shapes Layer ── */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-shape.is-active {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hero-shape--circle {
  border-radius: 50%;
}

.hero-shape--ring {
  border-radius: 50%;
  background: transparent !important;
}

.hero-shape--triangle {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.hero-shape--wave {
  border: none;
  background: transparent !important;
}

/* ── First View / Hero ── */
.entrance-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-16) var(--container-padding);
}

/* ── Sticker Photos (Interactive & Floating) ── */
.entrance-stickers {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 2;
}

.entrance-sticker {
  position: absolute;
  width: 145px;
  background: var(--color-white);
  padding: 6px 6px 14px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  opacity: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(var(--base-rotate, 0deg));
  transition: transform 0.4s var(--ease-out-back), box-shadow 0.3s ease, z-index 0.1s;
}

.entrance-sticker.is-visible {
  opacity: 1;
  animation: stickerFloat 6s ease-in-out infinite alternate;
}

.entrance-sticker:nth-child(even).is-visible {
  animation-duration: 7.5s;
  animation-direction: alternate-reverse;
}

.entrance-sticker:hover {
  transform: scale(1.18) rotate(0deg) !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.22), 0 0 0 3px var(--color-yellow);
  z-index: 20 !important;
  animation-play-state: paused;
}

.entrance-sticker img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* Floating animation for stickers */
@keyframes stickerFloat {
  0% {
    transform: translateY(0px) rotate(var(--base-rotate, 0deg));
  }

  50% {
    transform: translateY(-10px) rotate(calc(var(--base-rotate, 0deg) + 2.5deg));
  }

  100% {
    transform: translateY(6px) rotate(calc(var(--base-rotate, 0deg) - 2deg));
  }
}

/* Sticker badges */
.sticker-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: var(--font-handwrite);
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 3;
  white-space: nowrap;
  pointer-events: none;
  transform: rotate(6deg);
  transition: transform 0.3s var(--ease-out-back);
}

.entrance-sticker:hover .sticker-badge {
  transform: scale(1.15) rotate(-4deg);
}

.sticker-badge--pink {
  background: var(--color-magenta);
  color: #FFF;
}

.sticker-badge--yellow {
  background: var(--color-yellow);
  color: #1A1A1A;
}

.sticker-badge--blue {
  background: var(--color-sky-blue);
  color: #FFF;
}

.sticker-badge--green {
  background: var(--color-green);
  color: #FFF;
}

@media (max-width: 768px) {
  .entrance-sticker {
    width: 95px;
    padding: 4px 4px 10px;
  }

  .sticker-badge {
    font-size: 0.58rem;
    padding: 2px 6px;
    top: -8px;
    right: -6px;
  }
}

/* ── Main Copy (Memo Paper with High Excitement) ── */
.entrance-copy {
  position: relative;
  z-index: 10;
  background: var(--color-white);
  padding: var(--space-10) var(--space-12);
  max-width: 540px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: rotate(-3deg);
  opacity: 0;
  border-radius: 2px;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out-back);
}

.entrance-copy.is-visible {
  opacity: 1;
  animation: memoAppear 0.8s var(--ease-out-back) forwards;
}

/* Tape on top center */
.entrance-copy__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 90px;
  height: 24px;
  background: var(--tape-yellow);
  z-index: 12;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.entrance-copy__welcome-tag {
  font-family: var(--font-handwrite);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-magenta);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  display: inline-block;
}

/* Torn paper edge top */
.entrance-copy::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(135deg, var(--color-white) 33.33%, transparent 33.33%) 0 0,
    linear-gradient(-135deg, var(--color-white) 33.33%, transparent 33.33%) 0 0;
  background-size: 12px 8px;
  background-repeat: repeat-x;
}

.entrance-copy__main {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-black);
  line-height: 1.35;
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

.copy-line {
  display: block;
}

.copy-highlight-wrap {
  position: relative;
  display: inline-block;
}

/* Jumping colorful letters for ワクワク */
.jump-char {
  display: inline-block;
  font-weight: 900;
  transition: transform 0.25s var(--ease-bounce);
  animation: charBounce 2.4s ease-in-out infinite;
}

.jump-char--1 {
  color: var(--color-sky-blue);
  animation-delay: 0s;
}

.jump-char--2 {
  color: var(--color-magenta);
  animation-delay: 0.15s;
}

.jump-char--3 {
  color: var(--color-green);
  animation-delay: 0.3s;
}

.jump-char--4 {
  color: #E5B800;
  animation-delay: 0.45s;
}

.jump-char:hover {
  transform: translateY(-8px) scale(1.25) rotate(10deg);
}

@keyframes charBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  10% {
    transform: translateY(-8px) scale(1.12);
  }

  20% {
    transform: translateY(2px) scale(0.95);
  }

  30% {
    transform: translateY(0);
  }
}

.copy-sparkle {
  position: absolute;
  top: -12px;
  right: -24px;
  font-size: 1.3rem;
  animation: sparkleRotate 3s linear infinite;
}

@keyframes sparkleRotate {
  0% {
    transform: rotate(0deg) scale(0.9);
  }

  50% {
    transform: rotate(180deg) scale(1.25);
  }

  100% {
    transform: rotate(360deg) scale(0.9);
  }
}

.entrance-copy__sub {
  font-size: 0.95rem;
  line-height: 2.1;
  color: var(--color-text-light);
}

.entrance-copy__buttons {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-7);
  flex-wrap: wrap;
}

.btn--bounce:hover {
  animation: btnWiggle 0.4s ease-in-out infinite alternate;
}

@keyframes btnWiggle {
  0% {
    transform: translateY(-4px) rotate(-1.5deg);
  }

  100% {
    transform: translateY(-4px) rotate(1.5deg);
  }
}

@media (max-width: 768px) {
  .entrance-copy {
    padding: var(--space-6) var(--space-6);
    max-width: 92%;
    transform: rotate(-2deg);
  }

  .entrance-copy__main {
    font-size: var(--text-2xl);
  }

  .entrance-copy__welcome-tag {
    font-size: var(--text-xs);
  }
}

/* ============================================
   Pick Up Works Section
   ============================================ */
.pickup {
  padding: var(--space-20) 0;
  position: relative;
  background: var(--color-off-white);
}

.pickup__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-black);
  text-align: center;
  color: var(--color-sky-blue);
  margin-bottom: var(--space-2);
}

.pickup__subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
}

.pickup__grid {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-4);
  position: relative;
}

.pickup__item {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}

.pickup__photo {
  background: var(--color-white);
  padding: 8px 8px 48px;
  box-shadow: var(--shadow-polaroid);
  transform: rotate(var(--pickup-rotate, -3deg));
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  position: relative;
  cursor: pointer;
}

.pickup__photo:hover {
  transform: translateY(-10px) rotate(0deg);
  box-shadow: var(--shadow-polaroid-hover);
  z-index: var(--z-card-hover);
}

.pickup__photo img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Masking tape on photo corner */
.pickup__tape {
  position: absolute;
  width: 60px;
  height: 18px;
  z-index: var(--z-tape);
}

.pickup__tape--top-right {
  top: -8px;
  right: 12px;
  transform: rotate(25deg);
}

.pickup__tape--top-left {
  top: -6px;
  left: 8px;
  transform: rotate(-15deg);
}

.pickup__caption {
  font-family: var(--font-handwrite);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}

.pickup__title-text {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.pickup__comment {
  font-family: var(--font-handwrite);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* ── Label badges (お気に入り / 最新) ── */
.pickup__label {
  position: absolute;
  top: -14px;
  right: -10px;
  font-family: var(--font-handwrite);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-tape);
  transform: rotate(5deg);
  white-space: nowrap;
}

.pickup__label--fav {
  background: rgb(253, 255, 150);
  color: var(--color-text);
}

.pickup__label--new {
  background: var(--color-magenta);
  color: var(--color-white);
}

/* ── Speech bubble ── */
.pickup__bubble {
  position: absolute;
  top: -24px;
  left: -16px;
  font-family: var(--font-handwrite);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  background: var(--color-white);
  border: 2px solid var(--color-sky-blue);
  color: var(--color-sky-blue);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-lg);
  transform: rotate(-8deg);
  z-index: var(--z-tape);
  white-space: nowrap;
}

.pickup__bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-sky-blue);
}

/* ── 3-column grid variant ── */
.pickup__grid--3 {
  max-width: 960px;
  margin: 0 auto;
}

.pickup__grid--3 .pickup__item {
  width: 280px;
}

.pickup__cta {
  text-align: center;
  margin-top: var(--space-12);
}

@media (max-width: 768px) {
  .pickup__grid {
    flex-direction: column;
    align-items: center;
  }

  .pickup__item {
    width: 260px;
  }
}

/* ============================================
   Our Philosophy Section
   ============================================ */
.philosophy {
  padding: var(--space-20) 0;
  position: relative;
  background-color: var(--color-kraft-light);
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.06) 28px,
      rgba(139, 115, 85, 0.06) 29px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 28px,
      rgba(139, 115, 85, 0.03) 28px,
      rgba(139, 115, 85, 0.03) 29px);
}

.philosophy__inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.philosophy__card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  padding: var(--space-12) var(--space-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.philosophy__text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 2;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.philosophy__sub {
  font-size: var(--text-base);
  line-height: 2;
  color: var(--color-text-light);
  margin-bottom: var(--space-8);
}

.philosophy__cta {
  display: inline-flex;
}

@media (max-width: 768px) {
  .philosophy__card {
    padding: var(--space-8) var(--space-6);
  }

  .philosophy__text {
    font-size: var(--text-xl);
  }
}