html {
        scroll-behavior: smooth;
      }

      body {
        font-family: 'Noto Sans', 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 400;
        letter-spacing: 0;
      }

      h1,
      h2,
      h3 {
        letter-spacing: 0;
      }

      .display-latin {
        font-family: 'Archivo Black', 'Arial Black', 'Noto Sans', sans-serif;
        font-weight: 900 !important;
        letter-spacing: 0;
      }

      .display-korean {
        font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
        font-weight: 800 !important;
        letter-spacing: 0;
        line-height: 1.08 !important;
        word-break: keep-all;
      }

      #storyTitle.display-korean,
      #productsTitle.display-korean,
      #productLineTitle.display-korean,
      #mapTitle.display-korean {
        font-size: clamp(2.5rem, 5.2vw, 4.75rem) !important;
      }

      #faqTitle.display-korean {
        font-size: clamp(2.35rem, 4.2vw, 3.75rem) !important;
      }

      #b2bTitle.display-korean {
        font-size: clamp(2.5rem, 4.8vw, 4.5rem) !important;
      }

      .condensed-label {
        font-family: 'Bebas Neue', 'Noto Sans', sans-serif;
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: 0.045em;
      }

      .hero-section {
        height: 658px;
        min-height: 658px;
      }

      .hero-content {
        padding-top: 7rem;
        padding-bottom: 21.25rem;
      }

      .hero-title {
        font-size: 5rem;
        line-height: 0.88;
      }

      .hero-title-line {
        display: block;
        white-space: nowrap;
      }

      .hero-copy {
        margin-top: 1.5rem;
        gap: 1.25rem;
      }

      .hero-motion,
      .hero-media-motion {
        opacity: 0;
        will-change: opacity, transform;
      }

      .hero-motion {
        transform: translateY(24px);
      }

      .hero-media-motion {
        transform: translateY(34px) scale(0.975);
      }

      .hero-slide.is-active .hero-motion {
        animation: heroTextReveal 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      .hero-slide.is-active .hero-motion-kicker { animation-delay: 80ms; }
      .hero-slide.is-active .hero-motion-title { animation-delay: 180ms; }
      .hero-slide.is-active .hero-motion-subtitle { animation-delay: 340ms; }
      .hero-slide.is-active .hero-motion-cta { animation-delay: 470ms; }

      .hero-slide.is-active .hero-media-motion {
        animation: heroMediaReveal 1100ms 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      @keyframes heroTextReveal {
        to { opacity: 1; transform: translateY(0); }
      }

      @keyframes heroMediaReveal {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @media (min-width: 640px) {
        .hero-section {
          height: 780px;
          min-height: 780px;
        }

        .hero-content {
          padding-bottom: 28.5rem;
        }

        .hero-title {
          font-size: 6.5rem;
        }
      }

      @media (min-width: 768px) {
        .hero-section {
          height: 100svh;
          min-height: 700px;
          max-height: 920px;
        }

        .hero-content {
          padding-top: clamp(6rem, 11.5vh, 6.75rem);
          padding-bottom: 0;
        }

        .hero-title {
          font-size: clamp(4.6rem, min(6.2vw, 10.5vh), 6.5rem);
          line-height: 0.86;
        }

        .hero-copy [data-hero-subtitle] {
          min-height: 3.25rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-copy {
          margin-top: clamp(0.75rem, 1.8vh, 1.25rem);
          gap: 0.875rem;
        }

        .hero-sauce-plate {
          bottom: -2.5rem;
          height: min(54vh, 32rem);
          width: 76vw;
        }

        [data-hero-layout='compact'] .hero-sauce-plate {
          bottom: -1.5rem;
          height: min(60vh, 34rem);
        }
      }

      @media (min-width: 768px) and (max-height: 820px) {
        .hero-content {
          padding-top: 5.75rem;
        }

        .hero-title {
          font-size: clamp(4.35rem, min(5.8vw, 9.8vh), 5.8rem);
        }

        .hero-sauce-plate {
          bottom: -2.75rem;
          height: min(52vh, 28rem);
        }

        [data-hero-layout='compact'] .hero-sauce-plate {
          bottom: -1.5rem;
          height: min(57vh, 30rem);
        }

        .hero-copy [data-hero-subtitle] {
          font-size: 1rem;
          line-height: 1.5;
          min-height: 3rem;
        }
      }

      .brand-text-link {
        position: relative;
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 0.55rem;
        font-family: 'Archivo Black', 'Noto Sans', sans-serif;
        font-size: 0.82rem;
        letter-spacing: 0;
        text-transform: uppercase;
      }

      .brand-text-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.4rem;
        height: 2px;
        background: currentColor;
        transform-origin: left;
        transform: scaleX(0.38);
        transition: transform 260ms ease;
      }

      .brand-text-link:hover::after {
        transform: scaleX(1);
      }

      .font-black,
      .font-extrabold {
        font-weight: 700 !important;
      }

      .font-semibold {
        font-weight: 500 !important;
      }

      .font-medium {
        font-weight: 400 !important;
      }

      .faq-question {
        font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
        font-weight: 700 !important;
      }

      .home-faq-item {
        border-bottom: 1px solid rgba(50, 21, 6, 0.24);
        background: transparent;
        transition:
          background-color 240ms ease,
          color 240ms ease;
      }

      .home-faq-item:last-child {
        border-bottom: 0;
      }

      .home-faq-item.is-open {
        background: #fff8ef;
        box-shadow: inset 4px 0 0 #ef5f18;
      }

      .home-faq-item.is-open .home-faq-number {
        color: #ef5f18;
      }

      .home-faq-item.is-open .home-faq-question {
        color: #321506;
      }

      .home-faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
          grid-template-rows 600ms cubic-bezier(0.22, 1, 0.36, 1),
          opacity 480ms ease;
      }

      .home-faq-item.is-open .home-faq-answer {
        grid-template-rows: 1fr;
        opacity: 1;
      }

      .home-faq-answer-panel {
        border-top: 1px solid rgba(50, 21, 6, 0.18);
        background: #fff8ef;
      }

      .home-faq-glyph {
        transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      .home-faq-item.is-open .home-faq-glyph {
        transform: rotate(45deg);
      }

      .home-faq-icon {
        transition: background-color 360ms ease;
      }

      .home-faq-item.is-open .home-faq-icon {
        background: #ef5f18;
        color: #fff8ef;
      }

      [data-reveal] {
        opacity: 1;
        transform: none;
        transition:
          opacity 820ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 820ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
      }

      [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .no-scrollbar {
        scrollbar-width: none;
      }

      .no-scrollbar::-webkit-scrollbar {
        display: none;
      }

      .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.1);
      }

      .custom-scrollbar::-webkit-scrollbar {
        width: 3px;
      }

      .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
      }

      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 4px;
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        [data-reveal] {
          opacity: 1;
          transform: none;
          transition: none;
        }

        .hero-motion,
        .hero-media-motion,
        .hero-slide.is-active .hero-motion,
        .hero-slide.is-active .hero-media-motion {
          opacity: 1;
          transform: none;
          animation: none;
        }

        .home-faq-answer,
        .home-faq-glyph,
        .home-faq-icon {
          transition: none;
        }

        .support-marquee {
          overflow-x: auto;
          -webkit-mask-image: none;
          mask-image: none;
        }

        .support-marquee-track {
          animation: none;
        }

        .support-marquee-group[aria-hidden='true'] {
          display: none;
        }
      }

      /* Fade In Up */
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
      }
      .animate-fade-in-up {
        animation: fadeInUp 1.2s ease-out forwards;
        opacity: 0;
      }
      .delay-200 { animation-delay: 200ms; }
      .delay-500 { animation-delay: 500ms; }
      .delay-800 { animation-delay: 800ms; }

      .hero-kicker-shadow {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
      }

      .hero-title-shadow {
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
      }

      .hero-title-accent {
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
      }

      .hero-copy-shadow {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      .hero-sauce-plate {
        overflow: visible;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0) 8%, #000 26%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0) 8%, #000 26%, #000 100%);
      }

      .hero-sauce-plate img {
        filter: drop-shadow(0 34px 42px rgba(78, 31, 10, 0.18));
        object-position: center center;
      }

      .support-marquee {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      }

      .support-marquee-track,
      .support-marquee-group {
        display: flex;
        width: max-content;
        align-items: stretch;
      }

      .support-marquee-track {
        animation: supportMarquee 34s linear infinite;
      }

      .support-marquee-group {
        gap: 1rem;
        padding-right: 1rem;
      }

      .support-message-card {
        width: clamp(17rem, 30vw, 23rem);
      }

      #supportTitle.home-support-title {
        max-width: 22ch;
        margin-inline: auto;
        font-size: clamp(2.15rem, 8.6vw, 2.9rem);
        line-height: 1.02;
        letter-spacing: -0.018em;
        text-wrap: balance;
      }

      @media (min-width: 640px) {
        #supportTitle.home-support-title {
          max-width: 21ch;
          font-size: clamp(3rem, 5.4vw, 3.7rem);
          line-height: 0.99;
        }
      }

      @media (min-width: 1024px) {
        #supportTitle.home-support-title {
          max-width: 20ch;
          font-size: 4rem;
        }
      }

      .support-marquee:hover .support-marquee-track {
        animation-play-state: paused;
      }

      .support-total-number.is-counting {
        animation: supportCountPulse 180ms ease-out;
      }

      @keyframes supportCountPulse {
        0% { transform: translateY(3px); opacity: 0.78; }
        100% { transform: translateY(0); opacity: 1; }
      }

      @keyframes supportMarquee {
        to {
          transform: translateX(-50%);
        }
      }

      .brand-grid-bg {
        background-image:
          linear-gradient(rgba(248, 223, 196, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(248, 223, 196, 0.06) 1px, transparent 1px);
        background-size: 112px 112px;
      }

      .voice-placeholder {
        background: linear-gradient(135deg, rgba(239, 95, 24, 0.2), rgba(0, 105, 67, 0.16));
      }

      .placeholder-line {
        display: block;
        height: 0.72rem;
        border-radius: 999px;
        background: rgba(50, 21, 6, 0.13);
      }

      .institution-placeholder {
        background: linear-gradient(135deg, rgba(50, 21, 6, 0.035), rgba(239, 95, 24, 0.07));
      }

      .institution-logo-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: clamp(0.65rem, 1.35vw, 1.15rem);
      }

      .institution-logo-item img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 3.1rem;
        object-fit: contain;
      }

      .institution-logo-item img.institution-logo-open-sauce {
        max-height: 3.2rem;
        transform: scale(1.08);
      }

      .institution-logo-item img.institution-logo-chamgoeul {
        max-height: 4.5rem;
        transform: scale(1.04);
      }

      .hero-soft-copy .hero-kicker-shadow,
      .hero-soft-copy .hero-title-shadow,
      .hero-soft-copy .hero-title-accent,
      .hero-soft-copy .hero-copy-shadow {
        text-shadow: none;
      }

      .product-photo-card {
        box-shadow: 0 22px 60px rgba(67, 24, 9, 0.08);
      }

      .product-photo-card:hover {
        box-shadow: 0 26px 70px rgba(67, 24, 9, 0.14);
      }

      .product-food-image {
        object-position: center center;
      }

      .sauce-texture-panel img {
        object-position: center center;
      }

      .salsa-cutout {
        -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, rgba(0, 0, 0, 0.94) 68%, transparent 88%);
        mask-image: radial-gradient(ellipse at center, #000 52%, rgba(0, 0, 0, 0.94) 68%, transparent 88%);
      }

      .story-image-fade {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
      }

      #proofCarouselTrack > figure {
        opacity: 0.82;
        transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      #proofCarouselTrack > figure img {
        filter: blur(0.8px) brightness(0.9);
        transform: scale(1.015);
        transition:
          filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
          transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
      }

      #proofCarouselTrack > figure.is-active {
        opacity: 1;
      }

      #proofCarouselTrack > figure.is-active img {
        filter: none;
        transform: scale(1);
      }

      #proofCarousel::before,
      #proofCarousel::after {
        content: '';
        position: absolute;
        inset-block: 0;
        z-index: 10;
        width: clamp(2.75rem, 10vw, 8rem);
        pointer-events: none;
      }

      #proofCarousel::before {
        left: 0;
        background: linear-gradient(90deg, #321506 0%, rgba(50, 21, 6, 0.72) 24%, rgba(50, 21, 6, 0) 100%);
      }

      #proofCarousel::after {
        right: 0;
        background: linear-gradient(270deg, #321506 0%, rgba(50, 21, 6, 0.72) 24%, rgba(50, 21, 6, 0) 100%);
      }

      @media (prefers-reduced-motion: reduce) {
        #proofCarouselTrack > figure,
        #proofCarouselTrack > figure img {
          transition: none;
        }
      }

      .surface-depth {
        box-shadow: none;
      }

      .editorial-accent {
        position: relative;
      }

      .editorial-accent::after {
        content: "";
        display: block;
        width: 72px;
        height: 4px;
        margin-top: 22px;
        border-radius: 999px;
        background: linear-gradient(90deg, #ef5f18, rgba(239, 95, 24, 0));
      }

      .product-card {
        box-shadow: none;
      }

      .product-card:hover {
        box-shadow: none;
      }

      .voice-entry + .voice-entry {
        border-top: 1px solid rgba(50, 21, 6, 0.16);
      }

      @media (min-width: 1024px) {
        .voice-entry + .voice-entry {
          border-top: 0;
        }
      }

      @media (max-width: 767px) {
        .hero-title {
          max-width: 100%;
          font-size: clamp(2.5rem, 14vw, 4.3rem);
          line-height: 0.88;
        }

        .hero-copy [data-hero-subtitle] {
          max-width: min(92%, 32rem);
          color: #321506;
          font-size: clamp(0.9rem, 4vw, 1rem);
          font-weight: 700;
          line-height: 1.55;
          text-shadow:
            0 1px 0 rgba(255, 248, 239, 0.98),
            0 0 14px rgba(255, 248, 239, 0.94),
            0 0 28px rgba(255, 248, 239, 0.82);
        }

        #proofTitle {
          max-width: 100%;
          font-size: clamp(1.75rem, 9vw, 2.25rem) !important;
          line-height: 0.98;
        }

        #storyBody {
          color: rgba(248, 223, 196, 0.84);
        }

        .product-food-image {
          object-position: center top;
        }
      }

      @media (max-width: 359px) {
        .hero-content {
          padding-right: 0.75rem;
          padding-left: 0.75rem;
        }

        .hero-title {
          font-size: clamp(2.45rem, 14vw, 3.15rem);
        }

        #proofTitle {
          font-size: clamp(1.6rem, 9vw, 1.9rem) !important;
        }

        #productsTitle,
        #productLineTitle {
          font-size: clamp(2.8rem, 17vw, 3.5rem) !important;
          line-height: 0.88 !important;
        }

        #faqTitle,
        #b2bTitle,
        #voicesTitle {
          font-size: clamp(2.25rem, 13vw, 3rem) !important;
          line-height: 0.94 !important;
        }
      }