/* ══════════════════════════════════════════════════════
   JAPANESE WORD BREAK — global
   Prevents mid-character breaks on Japanese text
══════════════════════════════════════════════════════ */

* {
  word-break: keep-all;        /* prevents breaks in CJK text mid-word */
  overflow-wrap: break-word;   /* still allows long latin strings to wrap */
}

body {
  line-break: strict;          /* stricter Japanese line break rules */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-locale: "ja";        /* hint to browser this is Japanese content */
}



    .aqua-bg {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background: linear-gradient(
        160deg,
        #f2faf0 0%,
        #e8f5e4 35%,
        #f7fdf5 65%,
        #edf7ea 100%
      );
      overflow: hidden;
    }

    .aqua-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      display: block;
    }

    .aqua-bg > *:not(.aqua-canvas) {
      position: relative;
      z-index: 1;
    }






    /* ══════════════════════════════════════════════════════
       ★ HIGHLIGHTER CONTROLS
       Change color, opacity, padding, skew to taste
    ══════════════════════════════════════════════════════ */


    /* ══════════════════════════════════════════════════════
       SECTION BASE
    ══════════════════════════════════════════════════════ */
    .suika-section {
      position: relative;
      width: 100%;
      min-height: 100vh;
      background-image: url('../suika-souffle/suika-souffle-asset/suika-cheesecake-main-visual2_converted.webp');
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
    }

    .suika-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: none;
      z-index: 0;
    }

.suika-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  padding-top: 80px;
  padding-left: 60px;
  padding-right: 40px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

    /* ══════════════════════════════════════════════════════
       HEADING
    ══════════════════════════════════════════════════════ */
.suika-heading {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1.55;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: normal;
  max-width: 14em;
  margin-bottom: 16px;        /* moved from POSITION CONTROLS */
  opacity: 0;
  transform: translateY(46px);
  transition:
    opacity   0.85s cubic-bezier(.22,1,.36,1) 0.05s,
    transform 0.85s cubic-bezier(.22,1,.36,1) 0.05s;
}

    .suika-heading.suika-anim-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* ══════════════════════════════════════════════════════
       SUB TEXT
    ══════════════════════════════════════════════════════ */
.suika-sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  font-weight: 600;
  color: #2e2e2e;
  line-height: 2.1;
  margin-bottom: 24px;
  opacity: 0;

      transform: translateY(36px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.28s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.28s;
    }
    .suika-sub.suika-anim-in {
      opacity: 1;
      transform: translateY(0);
    }

.suika-hl {
  --hl-color:  rgba(255, 0, 0, 0.22);
  --hl-radius: 4px;
  --hl-pad-x:  6px;
  --hl-pad-y:  2px;
  --hl-skew:   -2deg;
  --hl-delay:  0s;
  position: relative;
  display: inline;
  padding: var(--hl-pad-y) var(--hl-pad-x);
  white-space: nowrap;
  isolation: isolate;
}


    /* The actual highlighter bar — sits behind the text */
    .suika-hl::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--hl-color);
      border-radius: var(--hl-radius);
      transform: skewX(var(--hl-skew)) scaleX(0);
      transform-origin: left center;
      transition:
        transform 0.55s cubic-bezier(.22,1,.36,1) var(--hl-delay);
      z-index: -1;
    }

    /* Scroll IN — triggered when parent gets .suika-anim-in */
    .suika-anim-in .suika-hl::before {
      transform: skewX(var(--hl-skew)) scaleX(1);
    }

    /* Scroll OUT — triggered when parent loses .suika-anim-in */
    .suika-heading:not(.suika-anim-in) .suika-hl::before,
    .suika-sub:not(.suika-anim-in) .suika-hl::before {
      transform: skewX(var(--hl-skew)) scaleX(0);
      transform-origin: right center;   /* sweeps out from right */
      transition:
        transform 0.4s cubic-bezier(.55,0,.1,1) var(--hl-delay);
    }

    /* ── Colour variants — add class alongside suika-hl ── */
    .suika-hl-red    { --hl-color: #dc03152c; }
    .suika-hl-green  { --hl-color: #4f8b4a28; }
    .suika-hl-yellow { --hl-color: rgba(255, 220,   0, 0.30); }
    .suika-hl-pink   { --hl-color: rgba(255, 100, 140, 0.22); }
    .suika-hl-white  { --hl-color: rgba(255, 255, 255, 0.55); }

    /* ══════════════════════════════════════════════════════
       CTA WRAPPER
    ══════════════════════════════════════════════════════ */
    .suika-btn-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      opacity: 0;
      transform: translateY(28px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.50s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.50s;
    }
    .suika-btn-wrap.suika-anim-in {
      opacity: 1;
      transform: translateY(0);
    }

    /* ══════════════════════════════════════════════════════
       CTA BUTTON
    ══════════════════════════════════════════════════════ */
    .suika-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(130deg, #3b6e34 0%, #5a8a40 100%);
      color: #fff;
      font-size: clamp(0.92rem, 1.4vw, 1.08rem);
      font-weight: 700;
      padding: 15px 38px 15px 28px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      letter-spacing: 0.04em;
      box-shadow: 0 6px 28px rgba(55,110,44,0.35);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .suika-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background 0.28s ease;
      border-radius: 50px;
    }
    .suika-btn:hover::after { background: rgba(255,255,255,0.10); }
    .suika-btn:hover        { box-shadow: 0 10px 36px rgba(55,110,44,0.50); transform: translateY(-2px); }
    .suika-btn:active       { transform: translateY(1px); }

    .suika-btn-arrows { display: flex; align-items: center; gap: 3px; }
    .suika-chevron {
      display: block;
      width: 7px;
      height: 7px;
      border-right: 2.5px solid #d4a843;
      border-bottom: 2.5px solid #d4a843;
      transform: rotate(-45deg);
    }

    /* ══════════════════════════════════════════════════════
       SCROLL HINT — fixed, whole page
    ══════════════════════════════════════════════════════ */
    .suika-scroll-hint {
      position: fixed;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.6s ease;
    }
    .suika-scroll-hint.suika-hint-visible { opacity: 1; }

    .suika-hint-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      color: #d4a843;
      text-transform: uppercase;
    }

    .suika-mouse {
      width: 26px;
      height: 40px;
      border: 2.5px solid #d4a843;
      border-radius: 14px;
      position: relative;
      display: flex;
      justify-content: center;
    }
    .suika-mouse::before {
      content: '';
      width: 4px;
      height: 8px;
      background: #d4a843;
      border-radius: 4px;
      position: absolute;
      top: 6px;
      animation: suikaScrollWheel 1.6s ease-in-out infinite;
    }
    @keyframes suikaScrollWheel {
      0%   { transform: translateY(0);    opacity: 1; }
      60%  { transform: translateY(12px); opacity: 0; }
      100% { transform: translateY(0);    opacity: 0; }
    }

    .suika-hint-chevrons {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      animation: suikaHintBounce 1.4s ease-in-out infinite;
    }
    .suika-hint-chevrons span {
      display: block;
      width: 10px;
      height: 10px;
      border-right: 2px solid #d4a843;
      border-bottom: 2px solid #d4a843;
      transform: rotate(45deg);
    }
    .suika-hint-chevrons span:nth-child(1) { opacity: 0.3; }
    .suika-hint-chevrons span:nth-child(2) { opacity: 0.6; margin-top: -4px; }
    .suika-hint-chevrons span:nth-child(3) { opacity: 1;   margin-top: -4px; }
    @keyframes suikaHintBounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(5px); }
    }
/* ── Icon style ── */
.suika-icon {
  margin-right: 6px;
  font-size: 0.88em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ══════════════════════════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .suika-content {
    max-width: 100%;
    padding-top: 56px;
    padding-left: 26px;
    padding-right: 26px;
    padding-bottom: 90px;
  }
  .suika-heading {
    font-size: clamp(1.55rem, 6.8vw, 2.2rem);
    margin-bottom: 12px;
  }
  .suika-sub {
    font-size: clamp(0.9rem, 3.8vw, 1.06rem);
    margin-bottom: 20px;
  }
  .suika-hl          { white-space: normal; }
  .suika-section {
    min-height: 60svh;
    background-image: url('../suika-souffle/suika-souffle-asset/suika-cheesecake-main-visual-mobile_converted.webp');
    background-position: 72% center;
  }
  .suika-section::before { background: none; }
  .suika-btn             { padding: 14px 28px 14px 22px; font-size: 0.95rem; }
  .suika-mouse           { display: none; }
  .suika-scroll-hint     { bottom: 22px; }
}

 

    @media (max-width: 420px) {
      .suika-heading { font-size: 1.20rem; }
    }

/* ══════════════════════════════════════════════════════
   KUMAMOTO — LINE BREAK OVERRIDE
   Counters the global keep-all / strict rules that Line
   browser interprets more aggressively than Chrome
══════════════════════════════════════════════════════ */
.kumamoto-sub,
.kumamoto-sub * {
  word-break: normal;
  line-break: auto;
  overflow-wrap: break-word;
}



      /* ══════════════════════════════════════════════════════
         WRAPPER — needed for scroll tracking
      ══════════════════════════════════════════════════════ */
      .kuma-scroll-wrapper {
        position: relative;
      }

      /* ══════════════════════════════════════════════════════
         SECTION BASE
      ══════════════════════════════════════════════════════ */
      .kumamoto-section {
        position: relative;
        width: 100%;
        background: none;
        overflow: visible;          /* let interval image bleed out right */
    
        z-index: 1;
      }
/* ══════════════════════════════════════════════════════
   KUMAMOTO INNER — merged base + position controls
   clamp padding fixes Line browser text clipping
══════════════════════════════════════════════════════ */
.kumamoto-inner {
  max-width: 860px;
  margin: 0 auto;
  padding-top: 90px;
  padding-bottom: 90px;
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.kumamoto-heading { margin-bottom: 28px; }
.kumamoto-sub     { margin-bottom: 56px; }

@media (max-width: 768px) {
  .kumamoto-inner {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: clamp(20px, 5vw, 48px);
    padding-right: clamp(20px, 5vw, 48px);
  }
  .kumamoto-heading { margin-bottom: 20px; }
  .kumamoto-sub     { margin-bottom: 40px; }
}

  

      /* ══════════════════════════════════════════════════════
         HEADING
      ══════════════════════════════════════════════════════ */
      .kumamoto-heading {
        font-size: clamp(1.55rem, 3.6vw, 2.4rem);
        font-weight: 700;
        line-height: 1.65;
        color: #1a1a1a;
        letter-spacing: 0.04em;
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity   0.9s cubic-bezier(.22,1,.36,1) 0s,
          transform 0.9s cubic-bezier(.22,1,.36,1) 0s;
      }
      .kumamoto-heading .kuma-quote::before { content: '\201C'; }
      .kumamoto-heading .kuma-quote::after  { content: '\201D'; }
      .kumamoto-heading.kuma-in { opacity: 1; transform: translateY(0); }

      /* ══════════════════════════════════════════════════════
         DIVIDER
      ══════════════════════════════════════════════════════ */
      .kumamoto-divider {
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #b5a898, transparent);
        margin: 0 auto 28px;
        opacity: 0;
        transition:
          width   0.85s cubic-bezier(.22,1,.36,1) 0.25s,
          opacity 0.5s  ease                      0.25s;
      }
      .kumamoto-divider.kuma-in { width: 220px; opacity: 1; }

/* ══════════════════════════════════════════════════════
   KUMAMOTO SUBHEADING (h3)
══════════════════════════════════════════════════════ */
.kumamoto-subheading {
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 600;
  line-height: 1.7;
  color: #5a5a5a;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   0.9s cubic-bezier(.22,1,.36,1) 0.12s,
    transform 0.9s cubic-bezier(.22,1,.36,1) 0.12s;
}
.kumamoto-subheading.kuma-in {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════
   POSITION CONTROLS — already in your file, just add
   the subheading margin here alongside the others
══════════════════════════════════════════════════════ */
.kumamoto-subheading { margin-bottom: 20px; }

@media (max-width: 768px) {
  .kumamoto-subheading {
    font-size: clamp(0.85rem, 3.4vw, 1.05rem);
    margin-bottom: 14px;
    letter-spacing: 0.07em;
  }
}


      /* ══════════════════════════════════════════════════════
         SUB TEXT
      ══════════════════════════════════════════════════════ */
.kumamoto-sub {
  font-size: clamp(0.88rem, 1.6vw, 1.08rem);
  font-weight: 400;
  color: #3a3a3a;
  line-height: 2.1;
  letter-spacing: 0.06em;
  opacity: 0;
  word-break: break-all;        /* ← was normal; break-all forces wrap in Line */
  overflow-wrap: anywhere;      /* ← was break-word; anywhere is stronger */
  white-space: normal;          /* ← ensure no inherited nowrap */
  max-width: 100%;              /* ← hard cap so text can never exceed container */
  transform: translateY(30px);
  transition:
    opacity   0.9s cubic-bezier(.22,1,.36,1) 0.2s,
    transform 0.9s cubic-bezier(.22,1,.36,1) 0.2s;
}

/* force all inline children to wrap too */
.kumamoto-sub strong {
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

      .kumamoto-sub.kuma-in { opacity: 1; transform: translateY(0); }

      /* ══════════════════════════════════════════════════════
         ILLUSTRATION ROW
      ══════════════════════════════════════════════════════ */
      .kumamoto-illustrations {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: clamp(16px, 4vw, 56px);
      }

      .kuma-illus-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        opacity: 0;
        transform: translateY(36px);
        transition:
          opacity   0.85s cubic-bezier(.22,1,.36,1),
          transform 0.85s cubic-bezier(.22,1,.36,1);
      }
      .kuma-illus-item:nth-child(1) { transition-delay: 0.10s; }
      .kuma-illus-item:nth-child(2) { transition-delay: 0.26s; }
      .kuma-illus-item:nth-child(3) { transition-delay: 0.42s; }
      .kuma-illus-item.kuma-in { opacity: 1; transform: translateY(0); }

      .kuma-illus-frame {
        width: clamp(110px, 20vw, 200px);
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
        background: #f0ebe4;
        position: relative;
      }
      .kuma-illus-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        position: relative;
        z-index: 1;
        transition: transform 0.5s ease;
      }
      .kuma-illus-item:hover .kuma-illus-frame img { transform: scale(1.06); }

      .kuma-illus-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, #ede8e0 25%, #f5f0ea 50%, #ede8e0 75%);
        background-size: 200% 100%;
        animation: kumaShimmer 1.6s ease-in-out infinite;
        z-index: 0;
      }
      .kuma-illus-frame:has(img.kuma-loaded)::before { display: none; }

      @keyframes kumaShimmer {
        0%   { background-position:  200% 0; }
        100% { background-position: -200% 0; }
      }

      .kuma-illus-label {
        font-size: clamp(0.72rem, 1.3vw, 0.88rem);
        color: #7a6a5a;
        letter-spacing: 0.1em;
        font-weight: 500;
      }

      /* ══════════════════════════════════════════════════════
         ★ INTERVAL IMAGE
         Peeks from right edge; JS drives translateX on scroll
      ══════════════════════════════════════════════════════ */
      .kuma-interval-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        will-change: transform;
        transform: translateX(92%);   /* peek: only ~8vw visible on right */
        z-index: 10;
        pointer-events: none;
      }

      /* ── wrapper clips the image so it doesn't bleed below section ── */
      .kuma-interval-wrap {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 10;
      }

      /* ══════════════════════════════════════════════════════
         MOBILE
      ══════════════════════════════════════════════════════ */
      @media (max-width: 540px) {
        .kumamoto-illustrations { gap: 12px; }
        .kuma-illus-frame       { width: clamp(88px, 26vw, 130px); }
        .kuma-illus-label       { font-size: 0.68rem; }
        /* peek a little more on mobile so user notices it */
        .kuma-interval-img      { transform: translateX(92%); }
      }



    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — PC
    ══════════════════════════════════════════════════════ */
    .sfarm-inner   { padding-top: 64px; padding-bottom: 64px; }
    .sfarm-heading { margin-bottom: 32px; }
    .sfarm-image   { margin-bottom: 32px; }
    .sfarm-sub     { margin-bottom: 0px;  }

    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — MOBILE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .sfarm-inner   { padding-top: 44px; padding-bottom: 44px; }
      .sfarm-heading { margin-bottom: 22px; }
      .sfarm-image   { margin-bottom: 22px; }
      .sfarm-sub     { margin-bottom: 0px;  }
    }

    /* ══════════════════════════════════════════════════════
       SECTION BASE
    ══════════════════════════════════════════════════════ */
    .suika-farm-section {
      width: 100%;
      background: none;
      overflow: hidden;
   
      position: relative; /* needed for bg text */
    }

    .sfarm-inner {
      max-width: 680px;
      margin: 0 auto;
      padding-left: 24px;
      padding-right: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      z-index: 2; /* sit above bg text */
    }

    /* ══════════════════════════════════════════════════════
       BIG BACKGROUND "KUMAMOTO" TEXT
    ══════════════════════════════════════════════════════ */
    .sfarm-bg-text {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      user-select: none;
    }

    .sfarm-bg-word {
      display: block;
      font-family: 'Arial Black', 'Impact', 'Helvetica Neue', sans-serif;
      font-size: clamp(80px, 18vw, 200px);
      font-weight: 900;
      letter-spacing: 0.08em;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(180, 60, 60, 0.13);
      text-stroke: 1.5px rgba(180, 60, 60, 0.13);
      white-space: nowrap;
      will-change: transform, opacity;

      /* initial state — each copy starts offset */
      opacity: 0;
      transform: translateY(60px) scale(0.96);
      transition:
        opacity   1.1s cubic-bezier(.22,1,.36,1),
        transform 1.1s cubic-bezier(.22,1,.36,1);
    }

    /* Stagger delays for the three copies */
    .sfarm-bg-word:nth-child(1) { transition-delay: 0s;     }
    .sfarm-bg-word:nth-child(2) { transition-delay: 0.13s;  }
    .sfarm-bg-word:nth-child(3) { transition-delay: 0.26s;  }

    /* Slight size variation to create depth illusion */
    .sfarm-bg-word:nth-child(1) { font-size: clamp(72px, 16vw, 180px);  opacity: 0; }
    .sfarm-bg-word:nth-child(2) { font-size: clamp(80px, 18vw, 200px);  opacity: 0; }
    .sfarm-bg-word:nth-child(3) { font-size: clamp(64px, 14vw, 160px);  opacity: 0; }

    /* Active state: section is in view */
    .sfarm-bg-active .sfarm-bg-word:nth-child(1) {
      opacity: 1;
      transform: translateY(-18px) scale(1);
    }
    .sfarm-bg-active .sfarm-bg-word:nth-child(2) {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
    .sfarm-bg-active .sfarm-bg-word:nth-child(3) {
      opacity: 1;
      transform: translateY(18px) scale(1);
    }

    /* Scrolled-past state */
    .sfarm-bg-exit .sfarm-bg-word {
      opacity: 0;
      transform: translateY(-60px) scale(1.04);
    }

    /* Color fills — very light/ghost */
    .sfarm-bg-word:nth-child(1) {
      -webkit-text-stroke: 1.5px rgba(180, 60, 60, 0.10);
    }
    .sfarm-bg-word:nth-child(2) {
      -webkit-text-stroke: 2px rgba(180, 60, 60, 0.16);
      color: rgba(180, 60, 60, 0.025);
    }
    .sfarm-bg-word:nth-child(3) {
      -webkit-text-stroke: 1.5px rgba(180, 60, 60, 0.10);
    }

    /* ══════════════════════════════════════════════════════
       HEADING
    ══════════════════════════════════════════════════════ */
    .sfarm-heading {
      font-size: clamp(1.35rem, 3.2vw, 2.1rem);
      font-weight: 700;
      line-height: 1.75;
      color: #1a1a1a;
      letter-spacing: 0.04em;
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0s;
    }
    .sfarm-heading .sfarm-quote::before { content: '\201C'; }
    .sfarm-heading .sfarm-quote::after  { content: '\201D'; }

    .sfarm-heading.sfarm-in       { opacity: 1; transform: translateY(0); }
    .sfarm-heading.sfarm-out-down { opacity: 0; transform: translateY(32px); }
    .sfarm-heading.sfarm-out-up   { opacity: 0; transform: translateY(-32px); }

    /* ══════════════════════════════════════════════════════
       IMAGE
    ══════════════════════════════════════════════════════ */
    .sfarm-image {
      width: 100%;
      max-width: 580px;
      position: relative;
      opacity: 0;
      transform: translateY(40px) scale(0.98);
      transition:
        opacity   1s  cubic-bezier(.22,1,.36,1) 0.14s,
        transform 1s  cubic-bezier(.22,1,.36,1) 0.14s;
    }
    .sfarm-image img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 0;
    }

    /* shimmer while loading */
    .sfarm-image::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        #ede8e0 25%,
        #f5f0ea 50%,
        #ede8e0 75%
      );
      background-size: 200% 100%;
      animation: sfarmShimmer 1.6s ease-in-out infinite;
      z-index: 1;
      transition: opacity 0.4s ease;
    }
    .sfarm-image.sfarm-img-loaded::before {
      opacity: 0;
      pointer-events: none;
    }
    @keyframes sfarmShimmer {
      0%   { background-position:  200% 0; }
      100% { background-position: -200% 0; }
    }

    .sfarm-image.sfarm-in       { opacity: 1; transform: translateY(0) scale(1); }
    .sfarm-image.sfarm-out-down { opacity: 0; transform: translateY(40px) scale(0.98); }
    .sfarm-image.sfarm-out-up   { opacity: 0; transform: translateY(-40px) scale(0.98); }

    /* ══════════════════════════════════════════════════════
       SUB TEXT
    ══════════════════════════════════════════════════════ */
    .sfarm-sub {
      font-size: clamp(0.85rem, 1.55vw, 1.02rem);
      font-weight: 400;
      color: #3a3a3a;
      line-height: 2.1;
      letter-spacing: 0.06em;
      opacity: 0;
      transform: translateY(26px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.26s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.26s;
    }

    .sfarm-sub.sfarm-in       { opacity: 1; transform: translateY(0); }
    .sfarm-sub.sfarm-out-down { opacity: 0; transform: translateY(26px); }
    .sfarm-sub.sfarm-out-up   { opacity: 0; transform: translateY(-26px); }

    /* ══════════════════════════════════════════════════════
       MOBILE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 480px) {
      .sfarm-inner   { padding-left: 18px; padding-right: 18px; }
      .sfarm-heading { font-size: 1.28rem; }
      .sfarm-bg-word { letter-spacing: 0.04em; }
    }

  

    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — PC
    ══════════════════════════════════════════════════════ */
    .chef-text-block { padding-top: 56px; padding-bottom: 100px; }
    .chef-title      { margin-bottom: 8px; }
    .chef-subtitle   { margin-bottom: 20px; }
    .chef-body       { margin-bottom: 0; }

    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — MOBILE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .chef-text-block { padding-top: 40px; padding-bottom: 88px; }
      .chef-title      { margin-bottom: 6px; }
      .chef-subtitle   { margin-bottom: 14px; }
    }

    /* ══════════════════════════════════════════════════════
       SECTION
    ══════════════════════════════════════════════════════ */
    .chef-section {
      width: 100%;
      position: relative;
      overflow: hidden;
   

      /* wave clip — reveals true page background through scoops */
      -webkit-clip-path: url(#chefWaveClip);
              clip-path: url(#chefWaveClip);
    }

    /* ══════════════════════════════════════════════════════
       WATERMELON STRIPE BACKGROUND
    ══════════════════════════════════════════════════════ */
.chef-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    #2a6b1a 0%,
    #c81a28 40%,
    #e8192c 100%
  );
}

.chef-bg-fade {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent            0px,
    transparent            48px,
    rgba(0, 0, 0, 0.07)   48px,
    rgba(0, 0, 0, 0.07)   60px
  );
}



    /* ══════════════════════════════════════════════════════
       EVERYTHING ABOVE BG
    ══════════════════════════════════════════════════════ */
    .chef-slideshow,
    .chef-text-block { position: relative; z-index: 2; }

    /* ══════════════════════════════════════════════════════
       SLIDESHOW
    ══════════════════════════════════════════════════════ */
    .chef-slideshow {
      width: 100%;
      height: 70svh;
      min-height: 300px;
      background: #111;
      overflow: hidden;
      position: relative;
    }

    /* ══════════════════════════════════════════════════════
       SLIDES
    ══════════════════════════════════════════════════════ */
    .chef-slide {
      position: absolute;
      inset: 0;
    }

    .chef-slide-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      opacity: 0;
      will-change: opacity, transform;
      transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
    }

    /* active: fade in + Ken Burns */
    .chef-slide-img.cs-active {
      opacity: 1;
      animation: csKenBurns 7s ease-in-out forwards;
    }

    /* leaving: fade out, Ken Burns frozen by removing cs-active */
    .chef-slide-img.cs-leaving {
      opacity: 0;
      transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
    }

    @keyframes csKenBurns {
      from { transform: scale(1.00) translate( 0.0%,  0.0%); }
      to   { transform: scale(1.10) translate(-1.8%, -0.8%); }
    }

    /* gradient overlay */
    .chef-slide-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(
        180deg,
        rgba(0,0,0,0.02)  0%,
        rgba(0,0,0,0.10) 38%,
        rgba(0,0,0,0.65) 100%
      );
    }

    /* caption */
    .chef-slide-caption {
      position: absolute;
      inset: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 3;
      padding: clamp(20px,4vw,48px) clamp(22px,5vw,56px);
      display: flex;
      align-items: flex-end;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.65s ease 0.6s, transform 0.65s ease 0.6s;
      pointer-events: none;
    }
    .chef-slide-caption.cs-caption-in {
      opacity: 1;
      transform: translateY(0);
    }
    .chef-slide-caption h3 {
      font-size: clamp(1.3rem, 3.8vw, 2.5rem);
      font-weight: 800;
      color: #fff;
      line-height: 1.4;
      letter-spacing: 0.02em;
      margin: 0;
      text-shadow: 0 2px 22px rgba(0,0,0,0.55);
    }

    /* ══════════════════════════════════════════════════════
       DOTS
    ══════════════════════════════════════════════════════ */
    .chef-dots {
      position: absolute;
      bottom: 20px;
      right: 24px;
      z-index: 6;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .chef-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.38);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }
    .chef-dot.cs-dot-active {
      background: #fff;
      transform: scale(1.5);
    }

    /* ══════════════════════════════════════════════════════
       PROGRESS BAR
    ══════════════════════════════════════════════════════ */
    .chef-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: rgba(255,255,255,0.72);
      z-index: 6;
      pointer-events: none;
    }

    /* ══════════════════════════════════════════════════════
       TEXT BLOCK
    ══════════════════════════════════════════════════════ */
    .chef-text-block {
      max-width: 780px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 48px);
      padding-right: clamp(20px, 5vw, 48px);
    }

    /* shared anim base */
    .chef-anim {
      opacity: 0;
      transform: translateY(26px);
      transition:
        opacity   0.88s cubic-bezier(.22,1,.36,1),
        transform 0.88s cubic-bezier(.22,1,.36,1);
    }
    .chef-anim.chef-in { opacity: 1; transform: translateY(0); }
    .chef-anim-d1 { transition-delay: 0.05s; }
    .chef-anim-d2 { transition-delay: 0.17s; }
    .chef-anim-d3 { transition-delay: 0.29s; }

    .chef-title {
      font-size: clamp(1.2rem, 2.8vw, 1.75rem);
      font-weight: 800;
      color: #ffffff;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }

    .chef-subtitle {
      font-size: clamp(0.9rem, 1.8vw, 1.1rem);
      font-weight: 600;
      color: #f0f0f0;
      line-height: 1.65;
      letter-spacing: 0.03em;
    }

    .chef-body {
      font-size: clamp(0.85rem, 1.5vw, 1rem);
      font-weight: 400;
      color: #f0f0f0;
      line-height: 2.05;
      letter-spacing: 0.04em;
    }

    /* ══════════════════════════════════════════════════════
       HIDDEN CLIP-PATH SVG
    ══════════════════════════════════════════════════════ */
    .chef-clip-svg {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
      pointer-events: none;
    }
.chef-slide-caption p {
  margin: 6px 0 0 0;
  font-size: clamp(0.78rem, 1.4vw, 0.95rem);
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}



    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — PC
    ══════════════════════════════════════════════════════ */
    .pinfo-top-block    { padding-top: 72px;  padding-bottom: 64px; }
    .pinfo-top-heading  { margin-bottom: 36px; }
    .pinfo-bottom-block { padding-top: 56px;  padding-bottom: 72px; }
    .pinfo-bot-heading  { margin-bottom: 10px; }
    .pinfo-bot-sub      { margin-bottom: 36px; }

    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — MOBILE
    ══════════════════════════════════════════════════════ */


@media (max-width: 768px) {
  .pinfo-top-block {
    padding-top: 52px;
    padding-bottom: 48px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .pinfo-top-heading  { margin-bottom: 28px; }
  .pinfo-bottom-block {
    padding-top: 44px;
    padding-bottom: 56px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .pinfo-bot-heading {
    margin-bottom: 8px;
    word-break: auto-phrase;
    overflow-wrap: break-word;
  }
  .pinfo-bot-sub {
    margin-bottom: 28px;
    word-break: auto-phrase;
    overflow-wrap: break-word;
    text-align: center;
    font-size: clamp(0.8rem, 3.2vw, 0.95rem);
  }
}
/* ── allow natural wrapping for long body text ── */
.pinfo-bot-sub,
.pinfo-bot-heading,
.pinfo-feature-desc {
  word-break: normal;
  overflow-wrap: break-word;
}


    /* ══════════════════════════════════════════════════════
       SECTION BASE
    ══════════════════════════════════════════════════════ */
    .product-info-section {
      width: 100%;
     
      overflow: hidden;
    }

    /* ══════════════════════════════════════════════════════
       SHARED ANIMATION BASE
    ══════════════════════════════════════════════════════ */
    .pinfo-anim {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1),
        transform 0.85s cubic-bezier(.22,1,.36,1);
    }
    .pinfo-anim.pinfo-in {
      opacity: 1;
      transform: translateY(0);
    }
    .pinfo-anim.pinfo-out-up {
      opacity: 0;
      transform: translateY(-32px);
    }

    .pinfo-d1 { transition-delay: 0.00s; }
    .pinfo-d2 { transition-delay: 0.12s; }
    .pinfo-d3 { transition-delay: 0.22s; }
    .pinfo-d4 { transition-delay: 0.32s; }
    .pinfo-d5 { transition-delay: 0.42s; }
    .pinfo-d6 { transition-delay: 0.52s; }
    .pinfo-d7 { transition-delay: 0.62s; }

    /* ══════════════════════════════════════════════════════
       DIVIDER
    ══════════════════════════════════════════════════════ */
    .pinfo-divider {
      width: 100%;
      height: 1px;
      background: #e8e2db;
      border: none;
      margin: 0;
    }

    /* ══════════════════════════════════════════════════════
       ── SALE LABELS / BADGES ──
    ══════════════════════════════════════════════════════ */
    .pinfo-labels {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-bottom: 32px;
    }

    .pinfo-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px 6px 12px;
      border-radius: 2px;
      font-size: clamp(0.72rem, 1.3vw, 0.82rem);
      font-weight: 700;
      letter-spacing: 0.07em;
      white-space: nowrap;
      position: relative;
      line-height: 1.3;

      /* ticket cut on the right side */
      clip-path: polygon(
        0% 0%,
        calc(100% - 10px) 0%,
        100% 50%,
        calc(100% - 10px) 100%,
        0% 100%
      );
    }

    /* icon inside label */
    .pinfo-label-icon {
      font-size: 0.95em;
      flex-shrink: 0;
    }

    /* ── colour variants ── */

    /* golden yellow — main selling point */
    .pinfo-label-gold {
      background: #f5c518;
      color: #1a1a1a;
    }

    /* soft green — eco / nature */
    .pinfo-label-green {
      background: #4f8b4a;
      color: #fff;
    }

    /* warm red — new / limited */
    .pinfo-label-red {
      background: #c0392b;
      color: #fff;
    }

    /* dark navy — trust / info */
    .pinfo-label-navy {
      background: #2c3e6b;
      color: #fff;
    }

    /* ── scroll-in animation for labels ── */
    .pinfo-labels-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    /* ══════════════════════════════════════════════════════
       ── TOP BLOCK ──
    ══════════════════════════════════════════════════════ */
    .pinfo-top-block {
      max-width: 860px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 48px);
      padding-right: clamp(20px, 5vw, 48px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .pinfo-top-heading {
      font-size: clamp(1.25rem, 3vw, 1.9rem);
      font-weight: 700;
      line-height: 1.65;
      color: #1a1a1a;
      letter-spacing: 0.03em;
      text-align: center;
    }

    .pinfo-feature-row {
      width: 100%;
      display: flex;
      align-items: flex-start;
      gap: clamp(20px, 4vw, 48px);
    }

    /* ══════════════════════════════════════════════════════
       ── CAROUSEL ──
    ══════════════════════════════════════════════════════ */
    .pinfo-carousel-col {
      flex: 0 0 auto;
      width: clamp(140px, 38%, 280px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .pinfo-carousel {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }

    .pinfo-carousel-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(.22,1,.36,1);
      will-change: transform;
    }

    .pinfo-carousel-slide {
      flex: 0 0 100%;
      width: 100%;
      position: relative;
    }

    .pinfo-carousel-slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }

    .pinfo-carousel-slide::after {
      content: '🔍';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      background: rgba(0,0,0,0.18);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
      border-radius: 8px;
    }
    .pinfo-carousel:hover .pinfo-carousel-slide::after { opacity: 1; }

    .pinfo-carousel-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255,255,255,0.88);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.85rem;
      color: #333;
      box-shadow: 0 2px 8px rgba(0,0,0,0.14);
      transition: background 0.2s, transform 0.2s;
      padding: 0;
      line-height: 1;
    }
    .pinfo-carousel-btn:hover {
      background: #fff;
      transform: translateY(-50%) scale(1.08);
    }
    .pinfo-carousel-btn.prev { left: 8px; }
    .pinfo-carousel-btn.next { right: 8px; }

    .pinfo-carousel-dots {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
    }
    .pinfo-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ccc;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
    }
    .pinfo-dot.active {
      background: #4f8b4a;
      transform: scale(1.3);
    }

    .pinfo-carousel-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #4f8b4a;
      color: #fff;
      font-size: clamp(0.82rem, 1.5vw, 0.95rem);
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 11px 22px;
      border-radius: 40px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 3px 14px rgba(110,192,43,0.28);
      transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
      width: 100%;
      text-align: center;
    }
    .pinfo-carousel-cta:hover {
      background: #3d7039;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(115,192,43,0.34);
    }
    .pinfo-carousel-cta:active { transform: translateY(0); }
    .pinfo-carousel-cta-arrow  { font-style: normal; font-size: 1em; }

    /* ══════════════════════════════════════════════════════
       RIGHT COL
    ══════════════════════════════════════════════════════ */
    .pinfo-feature-right {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding-top: 4px;
    }
.pinfo-feature-desc {
  font-size: clamp(0.88rem, 1.6vw, 1.02rem);
  color: #2a2a2a;
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.pinfo-feature-desc strong {
  font-weight: 700;
  color: #1a1a1a;
}

    .pinfo-feature-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pinfo-feature-list li {
      font-size: clamp(0.88rem, 1.6vw, 1.05rem);
      color: #1a1a1a;
      font-weight: 500;
      letter-spacing: 0.02em;
      line-height: 1.6;
      display: flex;
      align-items: baseline;
      gap: 6px;
    }
    .pinfo-feature-list li::before {
      content: '・';
      flex-shrink: 0;
      color: #1a1a1a;
    }

    .pinfo-feature-note {
      font-size: clamp(0.82rem, 1.4vw, 0.96rem);
      color: #5a5a5a;
      line-height: 1.8;
      letter-spacing: 0.03em;
    }

    /* ══════════════════════════════════════════════════════
       LIGHTBOX
    ══════════════════════════════════════════════════════ */
    .pinfo-lightbox {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0,0,0,0.82);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      backdrop-filter: blur(4px);
    }
    .pinfo-lightbox.open {
      opacity: 1;
      pointer-events: all;
    }
    .pinfo-lightbox-inner {
      position: relative;
      max-width: min(92vw, 640px);
      width: 100%;
      transform: scale(0.92);
      transition: transform 0.35s cubic-bezier(.22,1,.36,1);
    }
    .pinfo-lightbox.open .pinfo-lightbox-inner { transform: scale(1); }
    .pinfo-lightbox-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    }
    .pinfo-lightbox-caption {
      text-align: center;
      color: rgba(255,255,255,0.82);
      font-size: 0.88rem;
      letter-spacing: 0.05em;
      margin-top: 12px;
    }
    .pinfo-lightbox-close {
      position: absolute;
      top: -14px;
      right: -14px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: #333;
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
      transition: transform 0.2s;
      line-height: 1;
    }
    .pinfo-lightbox-close:hover { transform: scale(1.12) rotate(90deg); }
    .pinfo-lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.18);
      border: 1.5px solid rgba(255,255,255,0.35);
      color: #fff;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: background 0.2s, transform 0.2s;
      padding: 0;
    }
    .pinfo-lb-nav:hover {
      background: rgba(255,255,255,0.30);
      transform: translateY(-50%) scale(1.08);
    }
    .pinfo-lb-nav.prev { left: -52px; }
    .pinfo-lb-nav.next { right: -52px; }
    @media (max-width: 560px) {
      .pinfo-lb-nav.prev { left: -4px; }
      .pinfo-lb-nav.next { right: -4px; }
    }

    /* ══════════════════════════════════════════════════════
       BOTTOM BLOCK
    ══════════════════════════════════════════════════════ */
    .pinfo-bottom-wrap { background: #f5f2ee; }

    .pinfo-bottom-block {
      max-width: 860px;
      margin: 0 auto;
      padding-left: clamp(20px, 5vw, 48px);
      padding-right: clamp(20px, 5vw, 48px);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .pinfo-bot-heading {
      font-size: clamp(1.2rem, 2.8vw, 1.75rem);
      font-weight: 700;
      line-height: 1.65;
      color: #1a1a1a;
      letter-spacing: 0.03em;
    }

    .pinfo-bot-sub {
      font-size: clamp(0.82rem, 1.5vw, 0.98rem);
      color: #5a5a5a;
      line-height: 1.8;
      letter-spacing: 0.04em;
    }

    .pinfo-steps {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
    }

    .pinfo-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      flex: 1 1 0;
      max-width: 180px;
    }

    .pinfo-step-icon {
      width: clamp(64px, 12vw, 96px);
      height: clamp(64px, 12vw, 96px);
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pinfo-step-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 50%;
    }

    .pinfo-step-label {
      font-size: clamp(0.75rem, 1.4vw, 0.9rem);
      color: #3a3a3a;
      letter-spacing: 0.04em;
      font-weight: 500;
      line-height: 1.5;
      text-align: center;
    }
    .pinfo-step-label span {
      display: block;
      font-size: 0.85em;
      color: #888;
      font-weight: 400;
    }

    .pinfo-step-arrow {
      font-size: clamp(1rem, 2vw, 1.4rem);
      color: #aaa;
      flex-shrink: 0;
      padding: 0 clamp(4px, 1.5vw, 16px);
      padding-bottom: clamp(20px, 3vw, 32px);
    }

@media (max-width: 520px) {
  .pinfo-feature-row   { flex-direction: column; align-items: center; }
  .pinfo-carousel-col  { width: 88%; }
  .pinfo-feature-right {
    width: 100%;
    padding-top: 12px;
    padding-left: 4px;    /* ← small extra nudge inside the block */
    padding-right: 4px;
  }
  .pinfo-step          { max-width: 100px; }
  .pinfo-step-icon     { width: 58px; height: 58px; }
  .pinfo-label         { font-size: 0.68rem; padding: 5px 14px 5px 10px; }
}


    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — PC
    ══════════════════════════════════════════════════════ */
    .scta-content   { padding-top: 72px; padding-bottom: 72px; }
    .scta-heading   { margin-bottom: 12px; }
    .scta-sub       { margin-bottom: 36px; }

    /* ══════════════════════════════════════════════════════
       ★ POSITION CONTROLS — MOBILE
    ══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .scta-content { padding-top: 56px; padding-bottom: 56px; }
      .scta-heading { margin-bottom: 10px; }
      .scta-sub     { margin-bottom: 28px; }
    }

    /* ══════════════════════════════════════════════════════
       SECTION BASE
    ══════════════════════════════════════════════════════ */
    .suika-cta-section {
      position: relative;
      width: 100%;
      min-height: 320px;
      overflow: hidden;
     
    }

    /* ── background image ── */
    .scta-bg {
      position: absolute;
      inset: 0;
      background-image: url('../suika-souffle/suika-souffle-asset/suika-cheesecake-last-visual3_converted.webp');
      background-size: cover;
      background-position: center right;
      background-repeat: no-repeat;
      z-index: 0;
      
    }

    /* ── left-side gradient so text stays readable ── */
    .scta-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.664) 0%,
        rgba(20, 20, 20, 0.493) 38%,
        rgba(88, 88, 88, 0.3) 65%,
        rgba(255,255,255,0.00) 100%
      );
    }

    /* ══════════════════════════════════════════════════════
       CONTENT
    ══════════════════════════════════════════════════════ */
    .scta-content {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding-left: clamp(24px, 6vw, 72px);
      padding-right: clamp(24px, 6vw, 72px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  .scta-content h3 {
    color: #ffffff;
  }
    /* ══════════════════════════════════════════════════════
       HEADING
    ══════════════════════════════════════════════════════ */
    .scta-heading {
      font-size: clamp(1.5rem, 3.8vw, 2.6rem);
      font-weight: 800;
      line-height: 1.55;
      color: #ffffff;
      letter-spacing: 0.02em;
      opacity: 0;
      transform: translateY(30px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.00s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.00s;
    }
    .scta-heading.scta-in {
      opacity: 1;
      transform: translateY(0);
    }
    .scta-heading.scta-out {
      opacity: 0;
      transform: translateY(-30px);
    }

    /* ══════════════════════════════════════════════════════
       SUB TEXT
    ══════════════════════════════════════════════════════ */
    .scta-sub {
      font-size: clamp(0.9rem, 1.8vw, 1.15rem);
      font-weight: 500;
      color: #e6e6e6;
      line-height: 1.8;
      letter-spacing: 0.04em;
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.16s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.16s;
    }
    .scta-sub.scta-in {
      opacity: 1;
      transform: translateY(0);
    }
    .scta-sub.scta-out {
      opacity: 0;
      transform: translateY(-24px);
    }

    /* ══════════════════════════════════════════════════════
       CTA BUTTON
    ══════════════════════════════════════════════════════ */
    .scta-btn-wrap {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity   0.85s cubic-bezier(.22,1,.36,1) 0.30s,
        transform 0.85s cubic-bezier(.22,1,.36,1) 0.30s;
    }
    .scta-btn-wrap.scta-in {
      opacity: 1;
      transform: translateY(0);
    }
    .scta-btn-wrap.scta-out {
      opacity: 0;
      transform: translateY(-20px);
    }

    .scta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(130deg, #3b6e34 0%, #5a8a40 100%);
      color: #fff;
   
      font-size: clamp(0.9rem, 1.5vw, 1.08rem);
      font-weight: 700;
      padding: 15px 40px 15px 28px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      letter-spacing: 0.05em;
      box-shadow: 0 6px 28px rgba(55,110,44,0.32);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .scta-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0);
      transition: background 0.25s ease;
      border-radius: 50px;
    }
    .scta-btn:hover::after { background: rgba(255,255,255,0.10); }
    .scta-btn:hover        { box-shadow: 0 10px 36px rgba(55,110,44,0.46); transform: translateY(-2px); }
    .scta-btn:active       { transform: translateY(1px); }

    /* golden chevrons */
    .scta-chevrons {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }
    .scta-chevron {
      display: block;
      width: 7px;
      height: 7px;
      border-right: 2.5px solid #d4a843;
      border-bottom: 2.5px solid #d4a843;
      transform: rotate(-45deg);
    }


@media (max-width: 768px) {
  .scta-bg {
    background-position: 70% center;
  }
  .scta-bg::after {
    /* stronger gradient on mobile so text is always readable */
    background: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.97) 0%,
      rgba(34, 34, 34, 0.644) 50%,
      rgba(114, 114, 114, 0.4) 100%
    );
  }
  .scta-content {
    padding-left: 20px;
    padding-right: 20px;
    /* limit text width so it doesn't bleed into the image */
    max-width: 100%;
  }
  .scta-heading {
    font-size: clamp(1.25rem, 5.5vw, 1.6rem);  /* ← smaller on mobile */
    line-height: 1.5;
    /* cap the text block width so it stays left and clear of image */
    max-width: 72vw;
  }
  .scta-content h3 {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
    line-height: 1.6;
    max-width: 72vw;
    color: #ffffff;
    margin-bottom: 10px;
  }
  .scta-sub {
    font-size: clamp(0.8rem, 3.2vw, 0.95rem);
    max-width: 72vw;   /* ← keeps text away from the right-side image */
    line-height: 1.75;
  }
  .scta-btn {
    font-size: 0.88rem;
    padding: 13px 28px 13px 20px;
    white-space: nowrap;
  }
}

/* extra small phones */
@media (max-width: 390px) {
  .scta-heading {
    font-size: 1.15rem;
    max-width: 80vw;
  }
  .scta-sub {
    max-width: 80vw;
  }
  .scta-content h3 {
    max-width: 80vw;
  }
}