/* ============================================================
   KUWANOSATO — STYLESHEET
   Design system: premium botanical, Japanese craft, wellness
============================================================ */

/* ---- Design Tokens ---- */
:root {
  /* Color Palette */
  --green-deep:   #154B35;
  --green-leaf:   #5F8A43;
  --green-mid:    #2d6e4a;
  --cream-warm:   #F6F1E7;
  --ivory-paper:  #FBF8F2;
  --charcoal:     #222620;
  --charcoal-mid: #3D3D3A;
  --charcoal-soft:#4A4A46;
  --gold:         #C39A52;
  --plum:         #5A4874;

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
  --font-jp:    'Noto Serif JP', serif;

  /* Layout */
  --container-max:      1240px;
  --container-pad:      40px;
  --section-v:          96px;

  /* Components */
  --radius-card:    20px;
  --radius-btn:     7px;
  --shadow-card:    0 4px 28px rgba(21,75,53,0.08);
  --shadow-hover:   0 10px 44px rgba(21,75,53,0.15);
  --nav-height:     72px;

  /* Motion */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast:     180ms ease;
  --t-base:     250ms ease;
  --t-reveal:   500ms var(--ease-out);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  color:        var(--charcoal);
  background:   var(--ivory-paper);
  line-height:  1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Scroll margin for sticky nav */
section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }


/* ================================================================
   LAYOUT
================================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

@media (max-width: 768px) {
  :root { --container-pad: 22px; --section-v: 64px; }
}


/* ================================================================
   TYPOGRAPHY HELPERS
================================================================ */
.section-eyebrow {
  display: block;
  font-family:    var(--font-sans);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--green-leaf);
  margin-bottom:  12px;
}

.section-heading {
  font-family:  var(--font-serif);
  font-size:    clamp(1.9rem, 3.8vw, 2.9rem);
  font-weight:  400;
  line-height:  1.18;
  color:        var(--charcoal);
  margin-bottom: 22px;
}
.section-heading em {
  font-style: italic;
  color:       var(--green-deep);
}

.section-body {
  font-size:    1rem;
  line-height:  1.78;
  color:        var(--charcoal-soft);
  max-width:    58ch;
  margin-bottom: 16px;
}


/* ================================================================
   BUTTONS
================================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  height:          48px;
  padding:         0 28px;
  border-radius:   var(--radius-btn);
  border:          2px solid transparent;
  font-family:     var(--font-sans);
  font-size:       0.88rem;
  font-weight:     600;
  letter-spacing:  0.04em;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      background var(--t-base), color var(--t-base),
                   border-color var(--t-base), box-shadow var(--t-base),
                   transform var(--t-fast);
  min-height:      44px;
}

.btn:focus-visible {
  outline:        3px solid var(--gold);
  outline-offset: 3px;
}
.btn:active { transform: translateY(1px); }

/* Primary */
.btn-primary {
  background:   var(--green-deep);
  color:        var(--cream-warm);
  border-color: var(--green-deep);
}
.btn-primary:hover {
  background:   #0d3524;
  border-color: #0d3524;
  box-shadow:   0 4px 18px rgba(21,75,53,0.35);
}

/* Secondary */
.btn-secondary {
  background:   transparent;
  color:        var(--green-deep);
  border-color: var(--green-deep);
}
.btn-secondary:hover {
  background: var(--green-deep);
  color:      var(--cream-warm);
}

/* Outline */
.btn-outline {
  background:   transparent;
  color:        var(--green-deep);
  border-color: var(--green-deep);
}
.btn-outline:hover {
  background: var(--green-deep);
  color:      var(--cream-warm);
}

/* Small */
.btn-sm { height: 40px; padding: 0 20px; font-size: 0.82rem; }

/* Cream (for dark backgrounds) */
.btn-cream {
  background:   var(--cream-warm);
  color:        var(--green-deep);
  border-color: var(--cream-warm);
}
.btn-cream:hover {
  background:   #fff;
  border-color: #fff;
  box-shadow:   0 4px 18px rgba(0,0,0,0.18);
}

/* Cream outline */
.btn-cream-outline {
  background:   transparent;
  color:        var(--cream-warm);
  border-color: rgba(246,241,231,0.45);
}
.btn-cream-outline:hover {
  background:   rgba(246,241,231,0.1);
  border-color: var(--cream-warm);
}


/* ================================================================
   NAVIGATION
================================================================ */
#site-header {
  position:   fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index:    100;
  transition: background var(--t-base), box-shadow var(--t-base);
}

#site-header.scrolled {
  background:      rgba(251,248,242,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:      0 1px 0 rgba(21,75,53,0.1);
}

.nav-container {
  max-width:   var(--container-max);
  margin:      0 auto;
  padding:     0 var(--container-pad);
  height:      var(--nav-height);
  display:     flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav-logo, .footer-logo {
  display:        flex;
  flex-direction: column;
  line-height:    1;
}
.logo-wordmark {
  font-family:    var(--font-serif);
  font-size:      1.5rem;
  font-weight:    500;
  color:          var(--green-deep);
  letter-spacing: 0.03em;
}
.logo-jp {
  font-family:    var(--font-jp);
  font-size:      0.62rem;
  color:          var(--green-leaf);
  letter-spacing: 0.15em;
  margin-top:     2px;
}

/* Nav links */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         2px;
}

.nav-link {
  display:        flex;
  align-items:    center;
  height:         44px;
  padding:        0 12px;
  border-radius:  5px;
  font-size:      0.83rem;
  font-weight:    500;
  color:          var(--charcoal);
  letter-spacing: 0.02em;
  transition:     color var(--t-fast), background var(--t-fast);
}
.nav-link:hover, .nav-link.active {
  color:       var(--green-deep);
  background:  rgba(21,75,53,0.07);
}
.nav-link:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

.nav-shop {
  background:  var(--green-deep) !important;
  color:       var(--cream-warm) !important;
  padding:     0 20px !important;
  font-weight: 600 !important;
  margin-left: 8px;
}
.nav-shop:hover {
  background: #0d3524 !important;
}

/* Mobile toggle */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  justify-content: space-between;
  width:    28px;
  height:   44px;
  padding:  13px 2px;
  gap:      0;
}
.nav-toggle span {
  display:       block;
  width:         24px;
  height:        2px;
  background:    var(--charcoal);
  border-radius: 2px;
  transition:    transform var(--t-base), opacity var(--t-base);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ================================================================
   SCROLL REVEAL
================================================================ */
.reveal-section {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}
.reveal-section.revealed {
  opacity:   1;
  transform: translateY(0);
}

.reveal-card {
  opacity:    0;
  transform:  translateY(20px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}
.reveal-card.revealed {
  opacity:   1;
  transform: translateY(0);
}


/* ================================================================
   HERO
================================================================ */
.hero-section {
  padding-top:    calc(var(--nav-height) + 72px);
  padding-bottom: var(--section-v);
  background:     var(--ivory-paper);
  background-image:
    radial-gradient(ellipse 65% 55% at 85% 50%, rgba(95,138,67,0.1) 0%, transparent 68%),
    radial-gradient(ellipse 42% 42% at 15% 20%, rgba(21,75,53,0.05) 0%, transparent 60%);
  overflow: hidden;
}

.hero-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         56px;
  align-items: center;
  min-height:  520px;
}

.hero-eyebrow {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  18px;
  display:        block;
}

.hero-heading {
  font-family:   var(--font-serif);
  font-size:     clamp(2.4rem, 5vw, 3.9rem);
  font-weight:   400;
  line-height:   1.1;
  color:         var(--charcoal);
  margin-bottom: 22px;
}
.hero-heading em {
  font-style: italic;
  color:       var(--green-deep);
}

.hero-subheading {
  font-size:    1.05rem;
  line-height:  1.75;
  color:        var(--charcoal-mid);
  max-width:    52ch;
  margin-bottom: 36px;
}

.hero-ctas {
  display:  flex;
  gap:      14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Benefits strip */
.hero-benefits {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           12px;
  padding-top:   24px;
  border-top:    1px solid rgba(21,75,53,0.13);
}
.benefit-item {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   0.84rem;
  font-weight: 500;
  color:       var(--charcoal);
}
.benefit-icon {
  flex-shrink: 0;
  width:  22px;
  height: 22px;
  color:  var(--green-leaf);
  display: flex;
  align-items: center;
}
.benefit-icon svg { width: 100%; height: 100%; }

/* Hero visual */
.hero-visual {
  position: relative;
  display:  flex;
  align-items: center;
  justify-content: center;
}
.hero-glow {
  position:  absolute;
  inset:     10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(95,138,67,0.14) 0%,
    rgba(21,75,53,0.05) 55%,
    transparent 100%);
}
.hero-product-img {
  position: relative;
  z-index:  1;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(21,75,53,0.18));
  animation: heroFloat 8s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-product-img { animation: none; }
}


/* ================================================================
   JAPANESE SOURCE
================================================================ */
.source-section {
  padding-block: var(--section-v);
  background:    var(--cream-warm);
  background-image:
    radial-gradient(ellipse 50% 80% at 98% 50%, rgba(195,154,82,0.07) 0%, transparent 65%);
}

.source-story {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         64px;
  align-items: center;
  margin-bottom: 64px;
}

.source-image-wrap {
  border-radius: var(--radius-card);
  overflow:      hidden;
  aspect-ratio:  3/4;
  box-shadow:    var(--shadow-card);
}
.source-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: 60% center; /* person is right-of-center in landscape photo */
  transition:      transform 600ms var(--ease-out);
}
.source-image-wrap:hover .source-img { transform: scale(1.03); }

/* Source landscape banner */
.source-landscape {
  border-radius: var(--radius-card);
  overflow:      hidden;
  margin-bottom: 48px;
  box-shadow:    var(--shadow-card);
  aspect-ratio:  16/9; /* wide but not too tall — fits within one screen */
}
.source-landscape-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  transition:      transform 800ms var(--ease-out);
}
.source-landscape:hover .source-landscape-img { transform: scale(1.02); }

/* Source cards */
.source-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background:    var(--ivory-paper);
  border-radius: var(--radius-card);
  padding:       32px 28px;
  box-shadow:    var(--shadow-card);
  transition:    box-shadow var(--t-base), transform var(--t-base);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-5px);
}
/* Photo cards (source section) */
.card--photo { padding: 0; overflow: hidden; }
.card-photo-wrap {
  aspect-ratio: 16/9;
  overflow:     hidden;
}
.card-photo {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  transition:      transform 500ms var(--ease-out);
}
.card--photo:hover .card-photo { transform: scale(1.05); }
.card-text { padding: 24px 26px 28px; }
.card--photo .card-title { margin-bottom: 8px; }

.card-icon {
  width:  40px;
  height: 40px;
  color:  var(--green-leaf);
  margin-bottom: 18px;
  display: flex; align-items: center;
}
.card-icon svg { width: 36px; height: 36px; }

.card-title {
  font-family: var(--font-serif);
  font-size:   1.25rem;
  font-weight: 500;
  color:       var(--charcoal);
  margin-bottom: 10px;
}
.card-body {
  font-size:  0.9rem;
  line-height: 1.68;
  color:       var(--charcoal-soft);
}


/* ================================================================
   SCIENCE
================================================================ */
.science-section {
  padding-block: var(--section-v);
  background:    var(--ivory-paper);
}

.science-header {
  text-align: center;
  max-width:  680px;
  margin:     0 auto 56px;
}
.science-intro {
  font-size:  1rem;
  line-height: 1.75;
  color:       var(--charcoal-soft);
  margin-bottom: 32px;
}
.science-powder-img-wrap {
  width:         min(360px, 100%);
  aspect-ratio:  1 / 1;
  border-radius: 50%;
  overflow:      hidden;
  margin:        0 auto;
  box-shadow:    0 8px 40px rgba(21,75,53,0.18);
}
.science-powder-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
}

.science-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.science-card {
  background:    #fff;
  border-radius: var(--radius-card);
  padding:       36px 26px 32px;
  box-shadow:    var(--shadow-card);
  position:      relative;
  overflow:      hidden;
  transition:    box-shadow var(--t-base), transform var(--t-base);
}
.science-card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-5px);
}
.science-card-bar {
  position:      absolute;
  top: 0; left: 0; right: 0;
  height:        4px;
  background:    linear-gradient(90deg, var(--green-deep) 0%, var(--green-leaf) 100%);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.science-card-title {
  font-family:   var(--font-serif);
  font-size:     1.55rem;
  font-weight:   500;
  color:         var(--green-deep);
  margin-bottom: 14px;
}
.science-card-body {
  font-size:  0.9rem;
  line-height: 1.7;
  color:       var(--charcoal-soft);
}


/* ================================================================
   CAFE INNOVATION
================================================================ */
.cafe-section {
  padding-block: var(--section-v);
  background:    var(--cream-warm);
}

.cafe-header {
  text-align: center;
  max-width:  660px;
  margin:     0 auto 52px;
}
.cafe-intro {
  font-size:  1rem;
  line-height: 1.75;
  color:       var(--charcoal-soft);
}

.cafe-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:    24px;
  margin-bottom: 44px;
}

.cafe-card {
  border-radius: var(--radius-card);
  overflow:      hidden;
  background:    var(--ivory-paper);
  box-shadow:    var(--shadow-card);
  transition:    box-shadow var(--t-base), transform var(--t-base);
}
.cafe-card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-5px);
}

.cafe-card-visual {
  height:   240px;
  overflow: hidden;
}
.cafe-card-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  transition:      transform 500ms var(--ease-out);
  display:         block;
}
.cafe-card:hover .cafe-card-img { transform: scale(1.06); }

.cafe-card-content {
  padding: 26px 28px 32px;
}
.cafe-card-title {
  font-family:   var(--font-serif);
  font-size:     1.25rem;
  font-weight:   500;
  color:         var(--charcoal);
  margin-bottom: 8px;
}
.cafe-card-body {
  font-size:  0.9rem;
  line-height: 1.65;
  color:       var(--charcoal-soft);
}

/* Cafe lifestyle banner */
.cafe-banner {
  border-radius: var(--radius-card);
  overflow:      hidden;
  margin-bottom: 40px;
  box-shadow:    var(--shadow-card);
  aspect-ratio:  16/7;
}
.cafe-banner-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  transition:      transform 600ms var(--ease-out);
  display:         block;
}
.cafe-banner:hover .cafe-banner-img { transform: scale(1.02); }

/* Cafe photo tile strip */
.cafe-gallery {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           24px;
  margin-bottom: 44px;
}
.cafe-gallery-item {
  background:    var(--ivory-paper);
  border-radius: var(--radius-card);
  overflow:      hidden;
  box-shadow:    var(--shadow-card);
  display:       flex;
  flex-direction: column;
  transition:    box-shadow var(--t-base), transform var(--t-base);
}
.cafe-gallery-item:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-5px);
}
.cafe-gallery-img-wrap {
  aspect-ratio: 4/3;
  overflow:     hidden;
  flex-shrink:  0;
}
.cafe-gallery-img-wrap img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 500ms var(--ease-out);
}
.cafe-gallery-item:hover .cafe-gallery-img-wrap img { transform: scale(1.06); }
.cafe-gallery-text {
  padding: 22px 24px 28px;
}
.cafe-gallery-title {
  font-family:   var(--font-serif);
  font-size:     1.15rem;
  font-weight:   500;
  color:         var(--charcoal);
  margin-bottom: 8px;
}
.cafe-gallery-desc {
  font-size:  0.86rem;
  line-height: 1.65;
  color:       var(--charcoal-soft);
}

.cafe-cta-row { text-align: center; }


/* ================================================================
   PRODUCTS
================================================================ */
.products-section {
  padding-block: var(--section-v);
  background:    var(--ivory-paper);
}

.products-header {
  text-align: center;
  max-width:  680px;
  margin:     0 auto 52px;
}
.products-intro {
  font-size:  1rem;
  line-height: 1.75;
  color:       var(--charcoal-soft);
}

/* Product flat lay feature banner */
.products-flatlay {
  border-radius: var(--radius-card);
  overflow:      hidden;
  margin-bottom: 48px;
  box-shadow:    var(--shadow-card);
  aspect-ratio:  16/6;
}
.products-flatlay-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  transition:      transform 600ms var(--ease-out);
}
.products-flatlay:hover .products-flatlay-img { transform: scale(1.02); }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  background:    var(--cream-warm);
  border-radius: var(--radius-card);
  overflow:      hidden;
  box-shadow:    var(--shadow-card);
  transition:    box-shadow var(--t-base), transform var(--t-base);
  display:       flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-hover);
  transform:  translateY(-6px);
}

.product-image-wrap {
  aspect-ratio: 4/3;
  background:   var(--ivory-paper);
  display:      flex;
  align-items:  center;
  justify-content: center;
  padding:      28px;
  overflow:     hidden;
}
.product-img {
  max-height:  220px;
  width:       auto;
  object-fit:  contain;
  transition:  transform 400ms var(--ease-out);
}
.product-card:hover .product-img { transform: scale(1.04); }

.product-info {
  padding:   26px 28px 32px;
  flex:      1;
  display:   flex;
  flex-direction: column;
}
.product-format {
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--green-leaf);
  margin-bottom:  6px;
}
.product-name {
  font-family:   var(--font-serif);
  font-size:     1.35rem;
  font-weight:   500;
  color:         var(--charcoal);
  margin-bottom: 10px;
}
.product-desc {
  font-size:     0.88rem;
  line-height:   1.65;
  color:         var(--charcoal-soft);
  flex:          1;
  margin-bottom: 20px;
}


/* ================================================================
   SOURCE & QUALITY
================================================================ */
.quality-section {
  padding-block: var(--section-v);
  background:    var(--cream-warm);
  background-image:
    radial-gradient(ellipse 55% 60% at 5% 50%, rgba(195,154,82,0.06) 0%, transparent 65%);
}

.quality-inner {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         64px;
  align-items: center;
}

.quality-image-wrap {
  border-radius: var(--radius-card);
  overflow:      hidden;
  aspect-ratio:  3/4; /* portrait frame matches the portrait production photo */
  box-shadow:    var(--shadow-card);
  max-width:     420px; /* prevent it from growing too wide in the grid */
}
.quality-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 12%; /* anchors crop to upper body / face */
  transition:      transform 600ms var(--ease-out);
}
.quality-image-wrap:hover .quality-img { transform: scale(1.03); }

.quality-badges {
  display:    flex;
  flex-wrap:  wrap;
  gap:        10px;
  margin-top: 28px;
}
.quality-badge {
  background:    var(--ivory-paper);
  border:        1.5px solid rgba(21,75,53,0.15);
  border-radius: 100px;
  padding:       7px 18px;
  font-size:     0.78rem;
  font-weight:   600;
  letter-spacing: 0.04em;
  color:         var(--green-deep);
}


/* ================================================================
   PARTNER WITH US
================================================================ */
.partner-section {
  padding-block:    var(--section-v);
  background-color: var(--green-deep);
  background-image:
    radial-gradient(ellipse 65% 65% at 80% 50%, rgba(95,138,67,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 18% 30%, rgba(195,154,82,0.1) 0%, transparent 55%);
}

.partner-inner {
  text-align: center;
  max-width:  680px;
  margin:     0 auto;
}

.section-eyebrow--light { color: rgba(195,154,82,0.8); }
.section-heading--light { color: var(--cream-warm); }
.section-heading--light em { color: rgba(246,241,231,0.65); }

.partner-body {
  font-size:    1.05rem;
  line-height:  1.78;
  color:        rgba(246,241,231,0.78);
  max-width:    54ch;
  margin:       0 auto 40px;
}

.partner-ctas {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}


/* ================================================================
   CONTACT
================================================================ */
.contact-section {
  padding-block: var(--section-v);
  background:    var(--ivory-paper);
}

.contact-header {
  text-align: center;
  max-width:  600px;
  margin:     0 auto 52px;
}
.contact-intro {
  font-size:  1rem;
  line-height: 1.75;
  color:       var(--charcoal-soft);
}

/* Form */
.contact-form {
  max-width: 720px;
  margin:    0 auto;
  position:  relative;
}

/* Honeypot */
.form-honeypot {
  position: absolute;
  width:    0; height: 0;
  overflow: hidden;
  opacity:  0;
  pointer-events: none;
}

.form-row { margin-bottom: 20px; }
.form-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     20px;
}

.form-group { display: flex; flex-direction: column; }

.form-label {
  font-size:      0.83rem;
  font-weight:    600;
  color:          var(--charcoal);
  letter-spacing: 0.02em;
  margin-bottom:  7px;
}
.form-label abbr {
  color:           var(--green-leaf);
  text-decoration: none;
  margin-left:     3px;
}

.form-control {
  font-family: var(--font-sans);
  font-size:   0.95rem;
  color:       var(--charcoal);
  background:  #fff;
  border:      1.5px solid rgba(21,75,53,0.2);
  border-radius: 8px;
  padding:     11px 15px;
  width:       100%;
  transition:  border-color var(--t-fast), box-shadow var(--t-fast);
  appearance:  none;
}
.form-control:focus {
  outline:    none;
  border-color: var(--green-deep);
  box-shadow: 0 0 0 3px rgba(21,75,53,0.1);
}
.form-control.invalid {
  border-color: #c0392b;
}
.form-control.invalid:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

/* Select arrow */
.select-wrap { position: relative; }
.select-wrap::after {
  content:  '';
  position: absolute;
  right:    15px;
  top:      50%;
  transform: translateY(-50%);
  pointer-events: none;
  width:  10px; height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23154B35'/%3E%3C/svg%3E");
  background-size:   contain;
  background-repeat: no-repeat;
}
.select-wrap .form-control { padding-right: 38px; }

.form-textarea {
  resize:    vertical;
  min-height: 140px;
  line-height: 1.6;
}

.form-error {
  display:    block;
  font-size:  0.78rem;
  color:      #c0392b;
  min-height: 1.2em;
  margin-top: 5px;
}

/* Submit button states */
.form-submit-row { margin-top: 8px; }

.btn-submit { min-width: 180px; position: relative; }
.btn-label  { display: inline; }
.btn-loading { display: none; }

.btn-submit.is-loading .btn-label   { display: none; }
.btn-submit.is-loading .btn-loading { display: inline; }

.btn-submit:disabled {
  opacity: 0.65;
  cursor:  not-allowed;
  transform: none !important;
}

/* Success / error states */
.form-success {
  max-width:     720px;
  margin:        0 auto;
  text-align:    center;
  padding:       64px 48px;
  background:    #fff;
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-card);
  outline:       none;
}
.success-icon {
  width:  56px; height: 56px;
  color:  var(--green-deep);
  margin: 0 auto 20px;
}
.success-icon svg { width: 100%; height: 100%; }
.success-title {
  font-family:   var(--font-serif);
  font-size:     1.8rem;
  font-weight:   400;
  color:         var(--charcoal);
  margin-bottom: 12px;
}
.success-body {
  font-size:  1rem;
  line-height: 1.65;
  color:       var(--charcoal-soft);
}

.form-error-msg {
  max-width:     720px;
  margin:        16px auto 0;
  padding:       14px 20px;
  background:    #fdf0ee;
  border:        1px solid #e5b4b0;
  border-radius: 8px;
  font-size:     0.9rem;
  color:         #c0392b;
  text-align:    center;
}


/* ================================================================
   FOOTER
================================================================ */
.site-footer {
  background: var(--charcoal);
  padding:    64px 0 40px;
  color:      rgba(246,241,231,0.65);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap:     48px;
  align-items: start;
}

.footer-logo {
  display:        inline-flex;
  flex-direction: column;
  margin-bottom:  16px;
}
.footer-logo .logo-wordmark { color: var(--cream-warm); }
.footer-logo .logo-jp       { color: rgba(195,154,82,0.65); }

.footer-tagline {
  font-size:  0.88rem;
  line-height: 1.65;
  color:       rgba(246,241,231,0.55);
  max-width:   36ch;
}

.footer-nav ul {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.footer-nav a {
  display:    flex;
  align-items: center;
  min-height: 40px;
  font-size:  0.87rem;
  color:      rgba(246,241,231,0.6);
  transition: color var(--t-fast);
  padding:    2px 0;
}
.footer-nav a:hover { color: var(--cream-warm); }
.footer-nav a:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 2px;
}

.footer-origin {
  font-size:      0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(195,154,82,0.55);
  margin-bottom:  8px;
}
.footer-copy {
  font-size:     0.82rem;
  color:         rgba(246,241,231,0.38);
  margin-bottom: 14px;
}
.footer-legal-links {
  display: flex;
  gap:     20px;
}
.footer-legal-links a {
  font-size:  0.78rem;
  color:      rgba(246,241,231,0.38);
  transition: color var(--t-fast);
  min-height: 40px;
  display:    flex;
  align-items: center;
}
.footer-legal-links a:hover { color: rgba(246,241,231,0.7); }


/* ================================================================
   RESPONSIVE — TABLET (≤1024px)
================================================================ */
@media (max-width: 1024px) {
  .science-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   RESPONSIVE — SMALL TABLET / PORTRAIT (≤860px)
================================================================ */
@media (max-width: 860px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-visual {
    order:      -1;
    max-width:  380px;
    margin:     0 auto;
  }
  .hero-ctas    { justify-content: center; }
  .hero-subheading { max-width: none; }

  .source-story  { grid-template-columns: 1fr; gap: 40px; }
  .source-cards  { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .quality-inner { grid-template-columns: 1fr; gap: 40px; }

  .footer-inner  { grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   RESPONSIVE — MOBILE (≤768px)
================================================================ */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display:        none;
    position:       fixed;
    top:            var(--nav-height);
    left:           0; right: 0;
    background:     var(--ivory-paper);
    flex-direction: column;
    padding:        20px var(--container-pad) 28px;
    gap:            4px;
    box-shadow:     0 6px 24px rgba(0,0,0,0.1);
    border-top:     1px solid rgba(21,75,53,0.09);
  }
  .nav-links.is-open { display: flex; }
  .nav-link {
    width:     100%;
    justify-content: flex-start;
    padding:   12px 14px;
  }
  .nav-shop  { margin-left: 0; margin-top: 8px; justify-content: center; }

  .hero-section { padding-top: calc(var(--nav-height) + 48px); }

  .cafe-cards    { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto 44px; }
  .cafe-gallery  { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto 44px; }
  .cafe-banner   { aspect-ratio: 4/3; }
  .products-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  .form-row--2col { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .form-row--2col .form-group { margin-bottom: 20px; }

  .partner-ctas  { flex-direction: column; align-items: center; }

  .footer-inner  { grid-template-columns: 1fr; gap: 36px; }
}


/* ================================================================
   RESPONSIVE — MOBILE (≤600px)
================================================================ */
@media (max-width: 600px) {
  .hero-benefits { grid-template-columns: 1fr; text-align: left; }
  .hero-ctas     { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; max-width: 320px; }

  .science-cards { grid-template-columns: 1fr; }

  .form-success  { padding: 48px 24px; }
}