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

    :root {
      --color-bg: #f5f0eb;
      --color-bg-dark: #2a2520;
      --color-text: #2a2520;
      --color-text-light: #f5f0eb;
      --color-accent: #8b7355;
      --color-gray: #6b6560;
      --font-en: 'Cormorant Garamond', 'Libre Baskerville', serif;
      --font-jp: 'Noto Sans JP', sans-serif;
    }

    html { overflow-x: clip; overscroll-behavior: none; }

    body {
      font-family: var(--font-jp);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.8;
      font-weight: 300;
      overflow-x: clip;
    }

    /* ========== LOADING ========== */
    .loading-screen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--color-bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .loading-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('apartment-coffee-images/noisy-texture-100x100-o34-d10-c-ffeda3-t0.png') repeat;
      background-size: 100px 100px;
      opacity: 0.25;
      z-index: 0;
    }
    .loading-screen__svg {
      width: clamp(300px, 55vw, 560px);
      height: auto;
      overflow: visible;
      position: relative;
      z-index: 1;
    }
    .loading-screen__svg .logo-letter {
      opacity: 0;
    }

    /* ========== HEADER ========== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 1.5rem 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.4s ease, padding 0.3s ease;
    }
    header.scrolled {
      background: rgba(245, 240, 235, 0.95);
      backdrop-filter: blur(10px);
      padding: 1rem 3rem;
      box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    }
    .header-logo {
      font-family: var(--font-en);
      font-size: 1.2rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      text-decoration: none;
      color: var(--color-text);
      transition: color 0.3s;
      text-align: center;
    }
    .header-logo-sub {
      font-size: 0.55em;
      letter-spacing: 0.2em;
      display: block;
    }
    header.is-hero .header-logo { color: #fff; }
    header.is-hero:not(.scrolled) { background: transparent; }

    /* Hamburger */
    .menu-btn {
      width: 30px;
      height: 20px;
      position: relative;
      cursor: pointer;
      background: none;
      border: none;
      z-index: 200;
    }
    .menu-btn span {
      display: block;
      width: 100%;
      height: 1px;
      background: var(--color-text);
      position: absolute;
      left: 0;
      transition: all 0.4s ease;
    }
    header.is-hero .menu-btn span { background: #fff; }
    header.scrolled .menu-btn span { background: var(--color-text); }
    .menu-btn span:nth-child(1) { top: 0; }
    .menu-btn span:nth-child(2) { top: 50%; }
    .menu-btn span:nth-child(3) { bottom: 0; }
    .menu-btn.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); background: var(--color-text); }
    .menu-btn.is-open span:nth-child(2) { opacity: 0; }
    .menu-btn.is-open span:nth-child(3) { bottom: 50%; transform: rotate(-45deg); background: var(--color-text); }

    /* Nav Overlay */
    .nav-overlay {
      position: fixed;
      inset: 0;
      z-index: 150;
      background: rgba(245, 240, 235, 0.97);
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s ease;
    }
    .nav-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }
    .nav-close {
      position: absolute;
      top: 2rem;
      right: 2rem;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .nav-close svg {
      width: 28px;
      height: 28px;
      stroke: var(--color-text);
      transition: transform 0.3s ease;
    }
    .nav-close:hover svg {
      transform: rotate(90deg);
    }
    .nav-overlay nav {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 4rem 0 1rem;
    }
    .nav-overlay nav ul {
      list-style: none;
      text-align: center;
      margin: auto 0;
    }
    .nav-overlay nav li {
      margin: 1.5rem 0;
      overflow: hidden;
    }
    .nav-overlay nav a {
      font-family: var(--font-en);
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 300;
      letter-spacing: 0.15em;
      text-decoration: none;
      color: var(--color-text);
      display: inline-block;
      transform: translateY(100%);
      transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s;
    }
    .nav-overlay.is-open nav a {
      transform: translateY(0);
    }
    .nav-overlay nav li:nth-child(1) a { transition-delay: 0.1s; }
    .nav-overlay nav li:nth-child(2) a { transition-delay: 0.15s; }
    .nav-overlay nav li:nth-child(3) a { transition-delay: 0.2s; }
    .nav-overlay nav li:nth-child(4) a { transition-delay: 0.25s; }
    .nav-overlay nav li:nth-child(5) a { transition-delay: 0.3s; }
    .nav-overlay nav a:hover { color: var(--color-accent); }
    .nav-overlay__sns {
      flex-shrink: 0;
      padding: 1.5rem 0 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .nav-overlay__sns a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-en);
      font-size: 0.85rem;
      letter-spacing: 0.15em;
      text-decoration: none;
      color: var(--color-gray);
      transition: color 0.3s;
    }
    .nav-overlay__sns a svg {
      width: 18px;
      height: 18px;
    }
    .nav-overlay__sns a:hover { color: var(--color-text); }

    /* ========== HERO (HORIZONTAL BLINDS) ========== */
    .hero {
      height: 500vh;
      position: relative;
      background: #000;
    }
    .hero-layers {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    .hero-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      will-change: contents;
    }
    .hero-layer image {
      filter: brightness(0.8);
    }
    .hero-img-mobile {
      display: none;
    }
    @media (max-width: 768px) {
      .hero-img-desktop {
        display: none;
      }
      .hero-img-mobile {
        display: block;
      }
    }
    .hero-texts {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
    }
    .hero-txt {
      position: absolute;
      color: #fff;
      clip-path: inset(100% 0 0 0);
      transform: translateY(40px);
    }
    /* テキスト位置はインラインスタイルで制御（管理画面から設定） */
    .hero-txt h2 {
      font-family: var(--font-en);
      font-size: clamp(3rem, 6.8vw, 8rem);
      font-weight: 300;
      letter-spacing: -0.025em;
      line-height: 1.1;
      text-shadow: 0 2px 20px rgba(0,0,0,0.3);
    }
    .hero-txt p {
      font-family: var(--font-en);
      font-size: clamp(0.9rem, 1.067vw, 1.4rem);
      letter-spacing: 0.24em;
      margin-top: 4vw;
      text-shadow: 0 1px 10px rgba(0,0,0,0.3);
      text-transform: uppercase;
    }
    .hero-txt span {
      display: block;
      font-size: clamp(0.85rem, 0.8vw, 1rem);
      width: 20%;
      margin-top: 20px;
      line-height: 1.8;
      letter-spacing: normal;
    }

    /* Hero progress bar */
    .hero-progress {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 3rem;
      display: flex;
      gap: 1rem;
      z-index: 20;
    }
    .hero-progress__segment {
      flex: 1;
      height: 2px;
      background: rgba(255,255,255,0.2);
      overflow: hidden;
      position: relative;
    }
    .hero-progress__fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: #fff;
    }

    @media screen and (max-width: 1024px) {
      .hero-txt span { width: 35%; }
    }
    @media screen and (max-width: 599px) {
      .hero-txt span { width: 50%; }
    }

    /* ========== SECTION COMMON ========== */
    .section {
      padding: 8rem 2rem;
      position: relative;
      scroll-margin-top: 5rem;
    }
    .section-inner {
      max-width: 1100px;
      margin: 0 auto;
      position: relative;
      z-index: 5;
    }


    .section-title {
      font-family: var(--font-en);
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 300;
      letter-spacing: 0.12em;
      text-align: center;
      margin-bottom: 1rem;
      position: relative;
      z-index: 5;
    }
    .section-subtitle {
      text-align: center;
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      color: var(--color-gray);
      margin-bottom: 4rem;
    }
    .section-line {
      width: 40px;
      height: 1px;
      background: var(--color-accent);
      margin: 0 auto 4rem;
    }

    /* ========== ABOUT ========== */
    .about {
      background: var(--color-bg);
      overflow: hidden;
    }
    .about-content {
      position: relative;
      z-index: 2;
    }
    .about-slider {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 8px;
    }
    .about-slider__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease;
    }
    .about-slider__img.is-active {
      opacity: 1;
    }
    /* Progress indicator */
    .about-progress {
      display: flex;
      align-items: center;
      gap: 0;
      z-index: 5;
      margin-top: 1.5rem;
    }
    .about-progress__dot {
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      border: 1.5px solid rgba(139,115,85,0.3);
      background: transparent;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      cursor: pointer;
      transition: background 0.3s, border-color 0.3s;
    }
    .about-progress__dot.is-active {
      background: var(--color-accent);
      border-color: var(--color-accent);
    }
    .about-progress__dot.is-done {
      background: transparent;
      border-color: var(--color-accent);
    }
    .about-progress__line {
      width: 32px;
      height: 1.5px;
      background: rgba(139,115,85,0.2);
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .about-progress__line-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: var(--color-accent);
      transition: none;
    }
    /* Text overlay card */
    .about-text-card {
      position: relative;
      background: var(--color-bg);
      color: var(--color-text);
      padding: 2.5rem 3rem;
      margin-top: -10rem;
      margin-left: 35%;
      margin-right: -2rem;
      z-index: 3;
      border-radius: 8px;
    }
    .about--dark .about-text-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('apartment-coffee-images/noisy-texture-100x100-o34-d10-c-ffeda3-t0.png') repeat;
      background-size: 100px 100px;
      opacity: 0.25;
      border-radius: 8px;
      pointer-events: none;
    }
    .about-text-card h3 {
      font-family: var(--font-en);
      font-size: clamp(1.4rem, 2.2vw, 1.8rem);
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 1.4;
      margin-bottom: 1.5rem;
    }
    .about-text-card__body p {
      font-size: 0.9rem;
      line-height: 2.2;
      color: var(--color-gray);
    }
    .about-text-card__body p + p {
      margin-top: 1rem;
    }

    @media (max-width: 768px) {
      .about-slider {
        width: calc(100% + 3rem);
        margin-left: -1.5rem;
        border-radius: 0;
      }
      .about-progress {
        justify-content: center;
        margin-top: 1.2rem;
      }
      .about-text-card {
        background: transparent;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        padding: 1.5rem 0 0 0;
      }
      .about--dark .about-text-card {
        color: var(--color-text-light);
      }
      .about--dark .about-text-card::before {
        display: none;
      }
      .about--dark .about-text-card__body p {
        color: rgba(245, 240, 235, 0.7);
      }
    }

    /* ========== COFFEE ========== */
    .coffee {
      background: var(--color-bg-dark);
      color: var(--color-text-light);
      overflow: hidden;
    }
    .coffee .section-subtitle { color: rgba(245,240,235,0.5); }
    .coffee .section-line { background: rgba(245,240,235,0.3); }
    .coffee-layout {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 2rem;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .coffee-layout--no-cups {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: 0 auto;
    }
    .coffee-cups {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      align-items: center;
    }
    .coffee-cup {
      width: clamp(200px, 22vw, 360px);
      height: auto;
      will-change: transform;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
    }
    .coffee-text {
      text-align: center;
      padding: 2rem 0;
    }
    .coffee-text p {
      font-family: var(--font-jp);
      font-size: clamp(0.9rem, 1.1vw, 1.1rem);
      line-height: 2.4;
      letter-spacing: 0.08em;
      color: rgba(245,240,235,0.85);
    }

    /* ========== INFORMATION ========== */
    .info {
      background: var(--color-bg);
    }
    .info-stores {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
    }
    .info-store {
      position: relative;
    }
    .info-store__image {
      overflow: hidden;
      margin-bottom: 2rem;
      position: relative;
      z-index: 2;
    }
    .info-store__image img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
      clip-path: circle(0% at 50% 50%);
      transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .info-store__image img.is-revealed {
      clip-path: circle(75% at 50% 50%);
    }
    .info-store__label {
      font-family: var(--font-en);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: var(--color-accent);
      margin-bottom: 0.5rem;
      text-transform: uppercase;
    }
    .info-store__name {
      font-family: var(--font-en);
      font-size: 1.4rem;
      font-weight: 300;
      letter-spacing: 0.1em;
      margin-bottom: 1.5rem;
    }
    .info-store dl {
      border-top: 1px solid rgba(42,37,32,0.1);
    }
    .info-store dl > div {
      display: flex;
      padding: 0.8rem 0;
      border-bottom: 1px solid rgba(42,37,32,0.1);
      font-size: 0.85rem;
    }
    .info-store dt {
      width: 80px;
      flex-shrink: 0;
      color: var(--color-gray);
      font-weight: 400;
    }
    .info-store dd {
      color: var(--color-text);
      line-height: 1.8;
    }

    /* ========== WHOLESALE ========== */
    .wholesale {
      background: var(--color-bg-dark);
      color: var(--color-text-light);
      text-align: center;
      padding: 5rem 2rem;
      position: relative;
      overflow: visible;
      z-index: 2;
    }
    .wholesale p {
      font-size: 0.95rem;
      line-height: 2;
      letter-spacing: 0.05em;
    }
    .wholesale .section-line { background: rgba(245,240,235,0.3); margin-bottom: 2rem; }
    .wholesale-btns {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin-top: 2.5rem;
      position: relative;
      z-index: 11;
    }
    .btn-fancy {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      font-family: var(--font-jp);
      font-size: 0.9rem;
      letter-spacing: 0.12em;
      text-decoration: none;
      padding: 1rem 2.8rem;
      border: 1px solid rgba(245,240,235,0.5);
      color: var(--color-text-light);
      background: transparent;
      overflow: hidden;
      transition: color 0.4s ease, border-color 0.4s ease;
      cursor: pointer;
    }
    .btn-fancy::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: var(--color-text-light);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.5s ease, height 0.5s ease;
      z-index: -1;
    }
    .btn-fancy:hover::before {
      width: 300%;
      height: 300%;
    }
    .btn-fancy:hover {
      color: var(--color-bg-dark);
      border-color: var(--color-text-light);
    }
    .btn-fancy:active::before {
      width: 300%;
      height: 300%;
    }
    .btn-fancy:active {
      color: var(--color-bg-dark);
      border-color: var(--color-text-light);
    }
    .btn-fancy svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }
    .btn-fancy:hover svg {
      transform: translateX(4px);
    }
    .btn-fancy--light {
      border-color: rgba(80,65,50,0.3);
      color: var(--color-text);
    }
    .btn-fancy--light::before {
      background: var(--color-text);
    }
    .btn-fancy--light:hover {
      color: var(--color-text-light);
      border-color: var(--color-text);
    }
    .btn-fancy--light:active {
      color: var(--color-text-light);
      border-color: var(--color-text);
    }

    /* ========== CONTACT MODAL ========== */
    .contact-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(0,0,0,0);
      pointer-events: none;
      transition: background 0.4s ease;
    }
    .contact-overlay.is-active {
      background: rgba(0,0,0,0.6);
      pointer-events: auto;
    }
    .contact-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.9) rotate(8deg);
      transform-origin: top left;
      z-index: 9999;
      background: var(--color-bg);
      padding: 2.5rem 3rem;
      width: 90%;
      max-width: 700px;
      max-height: 90vh;
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .contact-modal.is-active {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
      pointer-events: auto;
    }
    .contact-modal h3 {
      font-family: var(--font-en);
      font-size: clamp(1.4rem, 3vw, 1.8rem);
      font-weight: 300;
      letter-spacing: 0.08em;
      margin-bottom: 0.2rem;
    }
    .contact-modal .contact-sub {
      font-size: 0.8rem;
      color: var(--color-gray);
      margin-bottom: 1.2rem;
    }
    .contact-modal .contact-close-text {
      color: rgba(139,115,85,0.6);
      cursor: pointer;
      text-align: center;
      margin-top: 1rem;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      transition: color 0.3s ease;
    }
    .contact-modal .contact-close-text:hover {
      color: var(--color-accent);
    }
    .contact-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 1.2rem;
    }
    .contact-form label {
      display: block;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      color: var(--color-gray);
      margin-bottom: 0.3rem;
    }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width: 100%;
      padding: 0.6rem 0.8rem;
      font-family: var(--font-jp);
      font-size: 16px;
      border: 1px solid rgba(80,65,50,0.2);
      background: transparent;
      color: var(--color-text);
      margin-bottom: 0.8rem;
      transition: border-color 0.3s ease;
      outline: none;
    }
    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus {
      border-color: var(--color-accent);
    }
    .contact-form textarea {
      min-height: 90px;
      resize: vertical;
    }
    .contact-form select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b7355' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.8rem center;
      cursor: pointer;
    }
    @media (max-width: 768px) {
      .contact-form-row {
        grid-template-columns: 1fr;
      }
      .contact-modal {
        padding: 1.5rem;
      }
    }
    .beans-scatter {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
      overflow: visible;
    }
    .bean {
      position: absolute;
      width: clamp(28px, 3.5vw, 50px);
      height: auto;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
      will-change: transform;
    }

    /* ========== SNS ========== */
    .sns-section {
      background: var(--color-bg);
      text-align: center;
      padding-top: 10rem;
      position: relative;
      z-index: 1;
    }
    .sns-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.5rem;
    }
    .sns-link {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      font-family: var(--font-en);
      font-size: 1.1rem;
      letter-spacing: 0.15em;
      text-decoration: none;
      color: var(--color-text);
      padding: 1rem 2.5rem;
      border: 1px solid var(--color-text);
      transition: all 0.4s ease;
    }
    .sns-link:hover {
      background: var(--color-text);
      color: var(--color-text-light);
    }
    .sns-link svg {
      width: 20px;
      height: 20px;
    }

    /* ========== FOOTER ========== */
    footer {
      background: var(--color-bg-dark);
      color: var(--color-text-light);
      text-align: center;
      padding: 4rem 2rem 2rem;
      position: relative;
    }
    .footer-logo {
      font-family: var(--font-en);
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 0.12em;
      margin-bottom: 0.3rem;
    }
    .footer-logo span {
      display: block;
      font-size: 0.5em;
      letter-spacing: 0.25em;
    }
    .footer-nav {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin: 2rem 0;
      flex-wrap: wrap;
    }
    .footer-nav a {
      font-family: var(--font-en);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-decoration: none;
      color: rgba(245,240,235,0.6);
      transition: color 0.3s;
    }
    .footer-nav a:hover { color: var(--color-text-light); }
    .footer-copy {
      font-family: var(--font-en);
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      color: rgba(245,240,235,0.3);
      margin-top: 3rem;
    }

    /* ========== DECORATIVE SHAPES ========== */
    .deco-shape {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      opacity: 0.07;
      will-change: transform;
    }
    .deco-shape--diamond {
      width: clamp(200px, 25vw, 400px);
      height: clamp(200px, 25vw, 400px);
      background: var(--color-accent);
      transform: rotate(45deg);
      border-radius: 20px;
    }
    .deco-shape--diamond-lg {
      width: clamp(300px, 35vw, 550px);
      height: clamp(300px, 35vw, 550px);
      background: var(--color-accent);
      transform: rotate(45deg);
      border-radius: 30px;
    }
    .deco-shape--diamond-outline {
      width: clamp(180px, 20vw, 350px);
      height: clamp(180px, 20vw, 350px);
      border: 1px solid var(--color-accent);
      background: transparent;
      transform: rotate(45deg);
      opacity: 0.12;
      border-radius: 18px;
    }
    .coffee .deco-shape--diamond { background: rgba(245,240,235,0.08); opacity: 1; }
    .coffee .deco-shape--diamond-outline { border-color: rgba(245,240,235,0.15); opacity: 1; }

    @media (max-width: 768px) {
      .deco-shape { opacity: 0.04; }
      .coffee .deco-shape--diamond { background: rgba(245,240,235,0.04); }
    }

    /* ========== NOISE OVERLAY ========== */
    .about,
    .coffee,
    .info,
    .wholesale,
    .sns-section,
    .section,
    footer {
      position: relative;
    }
    .about::after,
    .coffee::after,
    .info::after,
    .wholesale::after,
    .sns-section::after,
    .section::after,
    footer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url('apartment-coffee-images/noisy-texture-100x100-o34-d10-c-ffeda3-t0.png') repeat;
      background-size: 100px 100px;
      opacity: 0.15;
      pointer-events: none;
      z-index: 1;
    }
    .coffee::after,
    .wholesale::after,
    footer::after {
      opacity: 0.2;
    }

    /* ========== PAGE TRANSITION ========== */
    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
      overflow: hidden;
    }
    .page-transition .falling-bean {
      position: absolute;
      width: clamp(40px, 5vw, 70px);
      height: auto;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
      will-change: transform, opacity;
    }

    /* ========== ANIMATIONS ========== */
    .fade-in {
      opacity: 0;
      transform: translateY(40px);
    }
    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Split text chars */
    .char {
      display: inline-block;
    }
    /* Image reveal */
    .img-reveal {
      clip-path: inset(100% 0 0 0);
    }
    .img-reveal.is-visible {
      clip-path: inset(0 0 0 0);
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 768px) {
      header { padding: 1.2rem 1.5rem; }
      header.scrolled { padding: 0.8rem 1.5rem; }
      .hero-txt { left: 8vw !important; right: 8vw !important; }
      .hero-txt h2 { margin-top: 0; }
      .hero-txt h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
      .hero-txt p { font-size: 0.8rem; letter-spacing: 0.15em; margin-top: 3vw; }
      .hero-txt span { width: 70%; font-size: 0.8rem; }
      .hero-progress { padding: 1.5rem; }
      .about-content { grid-template-columns: 1fr; gap: 2rem; }
      .about-image img { height: 300px; }
      .coffee-layout { grid-template-columns: 1fr; gap: 2rem; }
      .coffee-cups { flex-direction: row; justify-content: center; gap: 1.5rem; }
      .coffee-cup { width: clamp(160px, 42vw, 220px); }
      .coffee-text p { font-size: 0.85rem; line-height: 2.2; }
      .info-stores { grid-template-columns: 1fr; gap: 3rem; }
      .info-store__image img { height: 220px; }
      .section { padding: 4rem 1.5rem; scroll-margin-top: 3.5rem; }
      .section-title { font-size: clamp(1.8rem, 8vw, 2.5rem); margin-bottom: 0.5rem; }
      .section-subtitle { margin-bottom: 1.5rem; }
      .section-line { margin-bottom: 2rem; }
      .wholesale { padding: 3rem 1.5rem; }
      .bean { width: clamp(22px, 6vw, 36px); }
      .bean:nth-child(1) { left:3% !important; top:8% !important; }
      .bean:nth-child(2) { left:5% !important; top:22% !important; }
      .bean:nth-child(3) { left:15% !important; top:15% !important; }
      .bean:nth-child(4) { right:3% !important; left:auto !important; top:10% !important; }
      .bean:nth-child(5) { right:8% !important; left:auto !important; top:20% !important; }
      .bean:nth-child(6) { right:18% !important; left:auto !important; top:5% !important; }
      .bean:nth-child(7) { left:6% !important; top:30% !important; }
      .bean:nth-child(8) { left:20% !important; top:35% !important; }
      .bean:nth-child(9) { right:5% !important; left:auto !important; top:32% !important; }
      .bean:nth-child(10) { right:15% !important; left:auto !important; top:28% !important; }
      .sns-section { padding-top: 6rem; }
      .sns-links { flex-direction: column; align-items: center; gap: 1.5rem; }
      .sns-link { width: 80%; justify-content: center; }
      .footer-nav { gap: 1rem; }
      footer { padding: 3rem 1.5rem 1.5rem; }
    }
    @media (max-width: 480px) {
      .hero-txt h2 { font-size: 2rem; }
      .hero-txt span { width: 85%; }
      .coffee-cup { width: clamp(140px, 38vw, 200px); }
      .coffee-text p { font-size: 0.8rem; }
      .info-store__name { font-size: 1.1rem; }
    }