@font-face {
      font-family: "DodamLocalSans";
      src: url("../assets/SUIT-Variable.woff2") format("woff2");
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
    }

    @font-face {
      font-family: "Cafe24Ssurround";
      src: url("../assets/Cafe24Ssurround.woff") format("woff");
      font-style: normal;
      font-weight: 400 900;
      font-display: swap;
    }

    :root {
      --bg: #f3f9f0;
      --surface: #ffffff;
      --surface-soft: #e7f5e1;
      --surface-warm: #f2f9e9;
      --ink: #1c2820;
      --muted: #3e6b47;
      --line: #dcebd8;
      --green: #33824b;
      --green-deep: #1d5935;
      --green-soft: #dbf0d4;
      --yellow: #efc85c;
      --orange: #7cb957;
      --shadow: 0 18px 50px rgba(38, 73, 52, .09);
      --shadow-soft: 0 10px 30px rgba(38, 73, 52, .06);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --max: 1180px;
      /* Korean subpage body font: Pretendard. Gmarket Sans is reserved for index.php. */
      --ko-font: "Pretendard", "DodamLocalSans", "Noto Sans KR", "Noto Sans", sans-serif;
      --ko-display-font: "Cafe24Ssurround", "DodamLocalSans", "Noto Sans KR", sans-serif;
    }

    * { box-sizing: border-box; }
    html { overflow-x: hidden; scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 17%, rgba(175, 221, 155, .13) 0 1px, transparent 1.5px) 0 0 / 24px 24px,
        var(--bg);
      font-family: var(--ko-font);
      font-size: 17px;
      font-weight: 500;
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: opacity .42s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
    }

    body.is-page-leaving { opacity: 1; transform: none; }

    a { color: inherit; text-decoration: none; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; }
    img, svg { display: block; max-width: 100%; }
    .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
    .icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .brand-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .sticker-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--green); }
    .sticker-icon .icon { width: 20px; height: 20px; }
    .note-icon { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--green); }
    .note-icon .icon { width: 20px; height: 20px; }
    :focus-visible { outline: 3px solid rgba(47, 109, 75, .35); outline-offset: 4px; }

    .page-shell { overflow: hidden; }
    body[data-page="farm"] .page-shell,
    body[data-page="guide"] .page-shell { animation: farm-page-enter .78s cubic-bezier(.22, 1, .36, 1) both; }
    .container { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }

    .topbar {
      position: relative;
      z-index: 10;
      background: rgba(243, 249, 240, .9);
      border-bottom: 1px solid rgba(217, 227, 218, .86);
      backdrop-filter: blur(18px);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      min-width: 0;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      flex: 1 1 auto;
      font-weight: 850;
      letter-spacing: -.045em;
      white-space: nowrap;
    }

    .brand-mark {
      position: relative;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, .86);
      border-radius: 16px 16px 16px 7px;
      background: var(--green-deep);
      box-shadow: 0 8px 18px rgba(47, 109, 75, .18);
      transform: rotate(-3deg);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .brand:hover .brand-mark { transform: rotate(0deg) translateY(-2px); box-shadow: 0 11px 21px rgba(47, 109, 75, .23); }
    .brand-mark::after { content: ""; position: absolute; width: 28px; height: 15px; right: -7px; bottom: -5px; border-radius: 100% 0 0 0; background: rgba(218, 242, 203, .24); transform: rotate(-12deg); }
    .brand-mark img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
    .brand > .brand-mark { flex: 0 0 42px; }

    .brand-name { min-width: 0; overflow: hidden; font-family: var(--ko-font); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
    .brand-name small {
      display: block;
      margin-top: -4px;
      overflow: hidden;
      color: var(--muted);
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .14em;
      line-height: 1;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 29px;
      margin-left: auto;
      color: #2f6d45;
      font-size: 14px;
      font-weight: 700;
    }

    .nav-links a { transition: color .2s ease; }
    .nav-links a:hover { color: var(--green); }
    .nav-links a.is-active { position: relative; color: var(--green-deep); }
    .nav-links a.is-active:not(.nav-intro)::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 3px; border-radius: 999px; background: var(--green); }
    .nav-links .nav-intro { display: inline-flex; align-items: center; gap: 5px; color: var(--green-deep); }
    .nav-links .nav-intro:hover { color: var(--green); }

    .nav-shop {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 16px;
      border: 1px solid #cfe0d0;
      border-radius: 999px;
      color: var(--green-deep);
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .nav-shop:hover { background: var(--green-soft); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
    .menu-toggle { display: none; }

    .hero {
      position: relative;
      padding: 74px 0 50px;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 50%;
      filter: blur(1px);
      pointer-events: none;
    }

    .hero::before {
      top: 38px;
      left: -145px;
      width: 280px;
      height: 280px;
      background: rgba(194, 232, 176, .72);
    }

    .hero::after {
      right: -180px;
      bottom: -80px;
      width: 390px;
      height: 390px;
      background: rgba(222, 243, 188, .7);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
      align-items: center;
      gap: 58px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 19px;
      color: var(--green);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      border-radius: 2px;
      background: var(--orange);
    }

    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 {
      color: var(--ink);
      font-family: var(--ko-font);
      font-weight: 400;
      letter-spacing: -.045em;
    }
    h1 {
      max-width: 640px;
      margin-bottom: 22px;
      font-size: clamp(42px, 5.25vw, 73px);
      font-weight: 400;
      line-height: 1.13;
    }

    .hero-copy > p {
      max-width: 535px;
      margin-bottom: 29px;
      color: #2f5f3b;
      font-size: 18px;
      line-height: 1.8;
      word-break: keep-all;
    }

    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 15px;
      font-size: 14px;
      font-weight: 850;
      letter-spacing: -.02em;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); }
    .button-primary { color: #fff; background: var(--green); box-shadow: 0 10px 18px rgba(47, 109, 75, .18); }
    .button-primary:hover { background: var(--green-deep); box-shadow: 0 14px 25px rgba(47, 109, 75, .22); }
    .button-secondary { color: var(--green-deep); background: #fff; border-color: #d6e3d7; }
    .button-secondary:hover { background: var(--green-soft); }
    .hero-actions .button-secondary { color: #756343; background: #fffdf6; border-color: #e7dfca; }
    .hero-actions .button-secondary:hover { background: #f7f0df; }
    .button-plain { min-height: 0; padding: 0; color: var(--green); border: 0; border-radius: 0; }
    .button-plain:hover { transform: none; color: var(--green-deep); }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-top: 23px;
      color: #2f6440;
      font-size: 12px;
      font-weight: 650;
    }

    .hero-note span:first-child { font-size: 16px; }

    .hero-art {
      position: relative;
      min-height: 472px;
      padding: 0;
      border: 1px solid rgba(211, 227, 212, .95);
      border-radius: 38px;
      background: #dff0d5;
      box-shadow: var(--shadow);
      isolation: isolate;
      overflow: hidden;
    }

    .hero-art::before {
      display: none;
    }

    .hero-art::after {
      content: "";
      position: absolute;
      z-index: 4;
      inset: 13px;
      border: 1px solid rgba(255, 255, 255, .58);
      border-radius: 29px;
      pointer-events: none;
    }

    .hero-image {
      position: absolute;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: saturate(1.06) contrast(1.02);
    }

    .hero-art > svg { display: none; }
    .hero-sticker {
      position: absolute;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid rgba(255, 255, 255, .82);
      border-radius: 14px;
      color: var(--green-deep);
      background: rgba(255, 255, 255, .75);
      box-shadow: 0 9px 22px rgba(54, 88, 62, .1);
      backdrop-filter: blur(10px);
      font-size: 12px;
      font-weight: 800;
    }

    .sticker-one { right: auto; bottom: 115px; left: 31px; transform: rotate(-5deg); }
    .sticker-two { right: 31px; bottom: 117px; transform: rotate(4deg); }
    .sticker-three { bottom: 28px; left: 42px; transform: rotate(-3deg); }

    .hero-badge {
      position: absolute;
      z-index: 3;
      top: 26px;
      left: 26px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 14px 16px;
      border-radius: 17px;
      color: #fff;
      background: var(--green);
      box-shadow: 0 12px 24px rgba(32, 82, 52, .22);
    }

    .hero-badge strong { font-size: 16px; letter-spacing: -.05em; }
    .hero-badge span { color: rgba(255, 255, 255, .78); font-size: 10px; font-weight: 700; letter-spacing: .1em; }

    .signal-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 38px;
      padding: 17px 0 0;
      border-top: 1px solid var(--line);
    }

    .signal { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .signal-icon {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--green-soft);
      font-size: 17px;
    }

    .signal strong { display: block; margin-bottom: 1px; font-size: 13px; letter-spacing: -.035em; }
    .signal span { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }

    .section { padding: 106px 0; }
    .section-tight { padding-top: 42px; }
    .section-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
    .section-header h2 { max-width: 640px; margin-bottom: 0; font-size: clamp(32px, 4vw, 50px); line-height: 1.2; }
    .section-header > p { max-width: 370px; margin-bottom: 2px; color: var(--muted); font-size: 15px; word-break: keep-all; }

    .story-grid {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      gap: 20px;
    }

    .story-intro, .value-card, .season-card, .channel-card, .contact-card, .business {
      border: 1px solid var(--line);
      background: var(--surface);
      box-shadow: var(--shadow-soft);
    }

    .story-intro {
      position: relative;
      min-height: 370px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 31px;
      overflow: hidden;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(21, 83, 48, .38) 0%, rgba(21, 83, 48, .92) 79%),
        url("../assets/hoengseong-dodam-farm-story.png") center / cover no-repeat,
        var(--green-deep);
      color: #fff;
    }

    .story-intro::before,
    .story-intro::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .story-intro::before { width: 260px; height: 260px; right: -100px; top: -90px; background: rgba(126, 197, 113, .3); }
    .story-intro::after { width: 230px; height: 230px; left: -95px; bottom: -125px; border: 1px solid rgba(255, 255, 255, .17); }
    .story-intro > * { position: relative; z-index: 1; }
    .story-label { color: #b9d9b4; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
    .story-intro h3 { max-width: 360px; margin: 58px 0 13px; color: #fff; font-size: clamp(26px, 3vw, 38px); line-height: 1.28; }
    .story-intro p { max-width: 390px; margin-bottom: 0; color: rgba(255, 255, 255, .94); font-size: 15px; word-break: keep-all; }
    .story-signature { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: #e7f5de; font-size: 13px; font-weight: 800; }
    .signature-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--green-deep); background: #e7f5de; }
    .signature-icon .icon { width: 16px; height: 16px; }

    .values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .value-card { min-height: 175px; padding: 25px; border-radius: var(--radius-lg); }
    .value-card:last-child { grid-column: span 2; min-height: 165px; background: var(--surface-warm); border-color: #f1e4ce; }
    .value-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 14px; background: var(--green-soft); font-size: 20px; }
    .value-card:nth-child(2) .value-icon { background: #fff0db; }
    .value-card:nth-child(3) .value-icon { background: #eaf0dc; }
    .value-card h3 { margin-bottom: 6px; font-size: 20px; }
    .value-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.65; word-break: keep-all; }

    .photo-section { padding: 0 0 106px; }
    .photo-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
    .photo-heading h2 { max-width: 570px; margin: 0; font-size: clamp(30px, 3.5vw, 44px); line-height: 1.22; }
    .photo-heading p { max-width: 360px; margin: 0; color: var(--muted); font-size: 14px; word-break: keep-all; }
    .photo-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: 18px; }
    .photo-card { position: relative; min-height: 340px; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--green-soft); box-shadow: var(--shadow-soft); }
    .photo-card:first-child { min-height: 410px; }
    .photo-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s ease; }
    .photo-card:hover img { transform: scale(1.035); }
    .photo-card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(12, 46, 26, 0) 42%, rgba(12, 46, 26, .68) 100%); pointer-events: none; }
    .photo-caption { position: absolute; z-index: 2; right: 25px; bottom: 23px; left: 25px; color: #fff; }
    .photo-caption strong { display: block; margin-bottom: 3px; font-family: var(--ko-font); font-size: 24px; font-weight: 700; letter-spacing: -.035em; }
    .photo-caption span { display: block; color: rgba(255, 255, 255, .84); font-size: 13px; word-break: keep-all; }

    .section-soft { background: var(--surface-soft); }
    .section-soft .eyebrow::before { background: var(--yellow); }

    .season-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .season-card { min-height: 236px; display: flex; flex-direction: column; justify-content: space-between; padding: 23px; border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; }
    .season-card:nth-child(1) { background: #eff9e9; border-color: #d9ecd2; }
    .season-card:nth-child(2) { background: #e5f7e7; border-color: #d0ebd5; }
    .season-card:nth-child(3) { background: #f1f9dd; border-color: #e0edc2; }
    .season-card:nth-child(4) { background: #eaf6f0; border-color: #d4ebdd; }
    .season-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .season-number { color: #3e6b47; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
    .season-emoji { font-size: 29px; filter: saturate(.92); }
    .season-card h3 { margin: 28px 0 5px; font-size: 22px; }
    .season-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; word-break: keep-all; }

    .channel-section { padding-bottom: 106px; }
    .channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .channel-card { position: relative; min-height: 272px; display: flex; flex-direction: column; justify-content: space-between; padding: 31px; border-radius: var(--radius-xl); overflow: hidden; }
    .channel-card::after { content: ""; position: absolute; z-index: 0; width: 180px; height: 180px; right: -55px; bottom: -70px; border-radius: 50%; border: 24px solid rgba(47, 109, 75, .08); }
    .channel-card > * { position: relative; z-index: 1; }
    .channel-card.farm { background: linear-gradient(138deg, #a9d47f 0%, #c9e9a8 54%, #edf7dc 100%); border-color: #9bc878; }
    .channel-card.store { background: linear-gradient(138deg, #fffef9 0%, #fcfaf2 72%, #f7f1e3 100%); border-color: #e9e0cc; }
    .channel-kicker { display: flex; align-items: center; gap: 9px; color: var(--green); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .channel-card.store .channel-kicker { color: #756343; }
    .channel-kicker-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: currentColor; background: rgba(255, 255, 255, .7); }
    .channel-kicker-icon .icon { width: 17px; height: 17px; }
    .channel-card h3 { margin: 20px 0 8px; font-size: clamp(24px, 3vw, 34px); }
    .channel-card p { max-width: 420px; margin-bottom: 20px; color: var(--muted); font-size: 14px; line-height: 1.72; word-break: keep-all; }
    .channel-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green-deep); font-size: 13px; font-weight: 850; }
    .store .channel-link { color: #756343; }
    .channel-link span { transition: transform .2s ease; }
    .channel-link:hover span { transform: translateX(4px); }

    .service-wrap { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 20px; align-items: stretch; }
    .contact-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 310px; padding: 31px; border-radius: var(--radius-xl); background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 18px 45px rgba(47, 109, 75, .16); }
    .contact-card .eyebrow { margin-bottom: 0; color: #cce7c7; }
    .contact-card .eyebrow::before { background: #f5cb69; }
    .contact-card h3 { max-width: 430px; margin: 47px 0 10px; color: #fff; font-size: clamp(27px, 3vw, 38px); line-height: 1.27; }
    .contact-card p { max-width: 430px; margin-bottom: 0; color: rgba(255, 255, 255, .72); font-size: 14px; word-break: keep-all; }
    .contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
    .contact-card .button-primary { color: var(--green-deep); background: #fff; box-shadow: none; }
    .contact-card .button-primary:hover { background: #eef8e9; }
    .contact-card .button-secondary { color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .24); }
    .contact-card .button-secondary:hover { background: rgba(255, 255, 255, .17); }

    .business {
      position: relative;
      min-height: 310px;
      padding: 27px 31px 24px;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid #cce2c8;
      border-radius: var(--radius-xl);
      background: linear-gradient(145deg, #ffffff 0%, #fbfef8 54%, #eff9e9 100%);
      box-shadow: 0 18px 45px rgba(38, 73, 52, .1);
    }
    .business::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; top: -137px; right: -78px; border: 24px solid rgba(113, 177, 99, .12); border-radius: 50%; }
    .business::after { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; bottom: -103px; left: -54px; border: 1px solid rgba(113, 177, 99, .24); border-radius: 50%; box-shadow: 0 0 0 18px rgba(113, 177, 99, .05), 0 0 0 36px rgba(113, 177, 99, .035); }
    .business > * { position: relative; z-index: 1; }
    .business-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 0 19px; border-bottom: 0; }
    .business-heading::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green) 0 22%, #d8ebd2 22% 100%); }
    .business-heading-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
    .business-mark { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #c4dfbd; border-radius: 15px 15px 15px 6px; color: var(--green-deep); background: #e5f5dc; box-shadow: inset 0 -4px 0 rgba(85, 146, 77, .08); font-size: 24px; transform: rotate(-5deg); }
    .business-heading h3 { margin: 0; color: var(--ink); font-size: 24px; line-height: 1.1; }
    .business-heading .business-subtitle { display: block; margin-top: 5px; color: #3e6b47; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
    .business-state { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cfe4ca; border-radius: 50%; color: var(--green); background: rgba(255, 255, 255, .76); font-family: "Pretendard", sans-serif; font-size: 11px; font-weight: 850; letter-spacing: .08em; }
    .business-list { margin: 0; padding-top: 8px; }
    .business-row { position: relative; display: grid; grid-template-columns: minmax(0, var(--business-label-width, 112px)) minmax(0, 1fr); gap: 15px; padding: 13px 12px; border-bottom: 1px solid #e5efe2; border-radius: 11px; font-size: 14px; transition: background .2s ease, transform .2s ease; }
    .business-row:nth-child(even) { background: rgba(232, 245, 226, .34); }
    .business-row:hover { background: rgba(219, 240, 212, .64); transform: translateX(3px); }
    .business-row:last-child { border-bottom: 0; }
    .business-row dt { display: flex; align-items: center; gap: 8px; color: #2f6d45; font-weight: 850; }
    .business-row dt::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #83bd68; box-shadow: 0 0 0 4px rgba(131, 189, 104, .13); }
    .business-row:nth-child(2) dt::before { background: #e9b958; box-shadow: 0 0 0 4px rgba(233, 185, 88, .15); }
    .business-row:nth-child(3) dt::before { background: #78a9d1; box-shadow: 0 0 0 4px rgba(120, 169, 209, .15); }
    .business-row:nth-child(4) dt::before { background: #d58d62; box-shadow: 0 0 0 4px rgba(213, 141, 98, .15); }
    .business-row:nth-child(5) dt::before { background: #8d9ed0; box-shadow: 0 0 0 4px rgba(141, 158, 208, .15); }
    .business-row:nth-child(6) dt::before { background: #86b978; box-shadow: 0 0 0 4px rgba(134, 185, 120, .15); }
    .business-row dd { min-width: 0; margin: 0; color: #224b2f; font-weight: 800; word-break: keep-all; }
    .business-row a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
    .business-row:last-child dd a { padding: 3px 9px; border: 1px solid #cfe4ca; border-radius: 999px; background: #f6fcf2; }
    .business-row:last-child dd a::after { content: "↗"; font-size: 12px; }
    .business-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
    .business-action { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid #cfe4ca; border-radius: 999px; color: #28643b; background: rgba(255, 255, 255, .82); cursor: pointer; font-size: 12px; font-weight: 850; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
    .business-action:hover { background: #f0faeb; box-shadow: 0 7px 14px rgba(38, 89, 49, .09); transform: translateY(-2px); }
    .business-action.is-copied { color: #fff; border-color: var(--green); background: var(--green); }
    .business-action-emoji { font-size: 15px; line-height: 1; }

    footer { padding: 39px 0 42px; border-top: 1px solid var(--line); background: #eaf4e6; }
    .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
    .footer-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 13px; font-weight: 850; letter-spacing: -.045em; }
    .footer-brand .brand-mark { width: 32px; height: 32px; border-radius: 11px; font-size: 16px; }
    .footer-desc { margin: 0; color: #356743; font-size: 12px; line-height: 1.7; }
    .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 17px; color: #356743; font-size: 12px; font-weight: 750; }
    .footer-links a:hover { color: var(--green); }
    .footer-blog-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #cfe4ca; border-radius: 999px; color: var(--green-deep); background: rgba(255, 255, 255, .72); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
    .footer-blog-link:hover { color: var(--green-deep) !important; background: #fff; box-shadow: 0 7px 15px rgba(38, 89, 49, .1); transform: translateY(-2px); }
    .footer-blog-emoji { font-size: 14px; line-height: 1; }
    .copyright { margin: 30px 0 0; color: #3e6b47; font-size: 11px; }

    .back-top { position: fixed; z-index: 8; right: 24px; bottom: 24px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #d7e1d7; border-radius: 50%; color: var(--green); background: rgba(255, 255, 255, .85); box-shadow: 0 8px 20px rgba(45, 73, 52, .1); font-size: 16px; opacity: .92; transition: transform .2s ease, background .2s ease; }
    .back-top:hover { transform: translateY(-3px); background: #fff; }

    @media (max-width: 980px) {
      .hero-grid, .story-grid, .service-wrap { grid-template-columns: 1fr; }
      .hero-grid { gap: 36px; }
      .hero-copy { max-width: 710px; }
      .hero-art { min-height: 420px; }
      .story-intro { min-height: 330px; }
      .service-wrap { gap: 16px; }
    }

    @media (max-width: 760px) {
      .container { width: min(calc(100% - 32px), var(--max)); }
      .nav { min-height: 68px; }
      .nav-links { position: absolute; top: 67px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .97); box-shadow: var(--shadow); }
      .nav-links.is-open { display: flex; }
      .nav-links a { padding: 12px 14px; border-radius: 11px; }
      .nav-links a:hover { background: var(--surface-soft); }
      .nav-shop { display: none; }
      .menu-toggle { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid #d6e2d7; border-radius: 13px; color: var(--green); background: #fff; cursor: pointer; }
      .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease; }
      .menu-toggle span { position: relative; }
      .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
      .menu-toggle span::before { top: -6px; }
      .menu-toggle span::after { top: 6px; }
      .menu-toggle[aria-expanded="true"] span { background: transparent; }
      .menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
      .menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
      .hero { padding: 55px 0 28px; }
      h1 { font-size: clamp(39px, 12vw, 58px); }
      .hero-copy > p { font-size: 16px; line-height: 1.72; }
      .hero-art { min-height: 355px; padding: 0; border-radius: 28px; }
      .hero-badge { top: 19px; left: 19px; }
      .hero-sticker { padding: 8px 10px; font-size: 10px; }
      .sticker-one { top: auto; right: auto; bottom: 104px; left: 20px; }
      .sticker-two { right: 20px; bottom: 84px; }
      .sticker-three { bottom: 19px; left: 25px; }
      .signal-row { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
      .signal { align-items: center; }
      .section { padding: 76px 0; }
      .section-tight { padding-top: 30px; }
      .section-header { display: block; margin-bottom: 24px; }
      .section-header h2 { margin-bottom: 14px; font-size: 34px; }
      .section-header > p { font-size: 14px; }
      .story-intro { padding: 25px; border-radius: 25px; }
      .story-intro h3 { margin-top: 45px; font-size: 30px; }
      .photo-section { padding-bottom: 76px; }
      .photo-heading { display: block; margin-bottom: 22px; }
      .photo-heading h2 { margin-bottom: 13px; font-size: 32px; }
      .photo-heading p { font-size: 13px; }
      .photo-grid { grid-template-columns: 1fr; gap: 12px; }
      .photo-card, .photo-card:first-child { min-height: 270px; border-radius: 25px; }
      .photo-caption { right: 20px; bottom: 19px; left: 20px; }
      .photo-caption strong { font-size: 22px; }
      .photo-caption span { font-size: 12px; }
      .values { gap: 12px; }
      .value-card { min-height: 184px; padding: 20px; border-radius: 19px; }
      .value-card:last-child { min-height: 170px; }
      .value-card h3 { font-size: 18px; }
      .value-card p { font-size: 12px; }
      .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
      .season-card { min-height: 198px; padding: 18px; border-radius: 18px; }
      .season-card h3 { margin-top: 18px; font-size: 19px; }
      .season-card p { font-size: 12px; }
      .channel-section { padding-bottom: 76px; }
      .channel-grid { grid-template-columns: 1fr; gap: 12px; }
      .channel-card { min-height: 240px; padding: 25px; border-radius: 25px; }
      .service-wrap { gap: 12px; }
      .contact-card, .business { min-height: 0; padding: 25px; border-radius: 25px; }
      .contact-card h3 { margin-top: 42px; font-size: 29px; }
      .business-row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: 12px; }
      .footer-top { display: block; }
      .footer-links { justify-content: flex-start; margin-top: 24px; }
      .back-top { right: 16px; bottom: 16px; }
    }

    @media (max-width: 430px) {
      .hero-actions { align-items: stretch; flex-direction: column; }
      .hero-actions .button { width: 100%; }
      .hero-art { min-height: 310px; }
      .hero-art::before { width: 58px; height: 58px; top: 21px; right: 21px; }
      .hero-badge { padding: 11px 12px; }
      .hero-badge strong { font-size: 14px; }
      .hero-badge span { font-size: 8px; }
      .values { grid-template-columns: 1fr; }
      .value-card, .value-card:last-child { min-height: 0; }
      .value-card:last-child { grid-column: auto; }
      .season-grid { gap: 9px; }
      .season-card { min-height: 190px; padding: 15px; }
      .season-emoji { font-size: 25px; }
      .business-heading > .business-state { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }

    /* Readability pass: larger, darker, sturdier type throughout the page. */
    body {
      color: #173d25;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.72;
    }

    .nav-links {
      color: #2f6d45;
      font-size: 15px;
      font-weight: 700;
    }

    .nav-shop {
      font-size: 15px;
      font-weight: 800;
    }

    .brand-name small {
      color: #3e6b47;
      font-size: 11px;
      font-weight: 800;
    }

    .eyebrow {
      font-size: 14px;
      font-weight: 800;
    }

    .hero-copy > p {
      color: #2f5f3b;
      font-size: 20px;
      font-weight: 600;
    }

    .button {
      font-size: 15px;
      font-weight: 800;
    }

    .hero-note {
      color: #2f6440;
      font-size: 14px;
      font-weight: 700;
    }

    .hero-sticker {
      font-size: 14px;
      font-weight: 800;
    }

    .hero-badge strong {
      font-size: 19px;
    }

    .hero-badge span {
      font-size: 12px;
      font-weight: 700;
    }

    .signal strong {
      color: #1c542e;
      font-size: 15px;
      font-weight: 800;
    }

    .signal > span:last-child,
    .signal > span:last-child > span {
      color: #3e6b47;
      font-size: 13px;
      font-weight: 600;
    }

    .section-header > p,
    .photo-heading p {
      color: #3e6b47;
      font-size: 16px;
      font-weight: 600;
    }

    .story-label {
      color: #d9efce;
      font-size: 13px;
      font-weight: 800;
    }

    .story-intro p {
      color: rgba(255,255,255,.94);
      font-size: 16px;
      font-weight: 600;
    }

    .story-signature {
      font-size: 14px;
      font-weight: 800;
    }

    .value-card h3 {
      font-size: 22px;
    }

    .value-card p {
      color: #3e6b47;
      font-size: 15px;
      font-weight: 600;
    }

    .photo-caption strong {
      font-size: 26px;
    }

    .photo-caption span {
      color: #fff;
      font-size: 15px;
      font-weight: 700;
    }

    .season-number {
      color: #3e6b47;
      font-size: 13px;
      font-weight: 800;
    }

    .season-emoji {
      color: #2f7a47;
      font-size: 31px;
    }

    .season-card h3 {
      font-size: 25px;
    }

    .season-card p {
      color: #3e6b47;
      font-size: 15px;
      font-weight: 600;
    }

    .channel-kicker {
      font-size: 13px;
      font-weight: 800;
    }

    .channel-card h3 {
      font-size: clamp(27px, 3vw, 38px);
    }

    .channel-card p {
      color: #3e6b47;
      font-size: 16px;
      font-weight: 600;
    }

    .channel-link {
      font-size: 15px;
      font-weight: 800;
    }

    .contact-card h3 {
      font-size: clamp(30px, 3vw, 42px);
    }

    .contact-card p {
      color: rgba(255,255,255,.94);
      font-size: 16px;
      font-weight: 600;
    }

    .business-heading h3 {
      font-size: 21px;
    }

    .business-heading span {
      color: #3e6b47;
      font-size: 12px;
      font-weight: 800;
    }

    .business-row {
      font-size: 14px;
    }

    .business-row dt {
      color: #3e6b47;
      font-weight: 800;
    }

    .business-row dd {
      color: #224b2f;
      font-weight: 700;
    }

    .business-heading h3 { font-size: 24px; }
    .business-heading .business-subtitle { color: #3e6b47; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
    .business-row dt { font-weight: 850; }
    .business-row dd { font-weight: 800; }

    .footer-desc,
    .footer-links {
      color: #356743;
      font-size: 14px;
      font-weight: 600;
    }

    .copyright {
      color: #3e6b47;
      font-size: 13px;
      font-weight: 600;
    }

    .signal-icon,
    .value-icon,
    .channel-kicker-icon {
      color: #257643;
    }

    .signal-icon .icon,
    .value-icon .icon {
      width: 24px;
      height: 24px;
    }

    .hero-note .note-icon .icon,
    .hero-sticker .sticker-icon .icon,
    .signature-icon .icon {
      flex: 0 0 auto;
    }

    .emoji {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      font-style: normal;
      line-height: 1;
      text-align: center;
      vertical-align: middle;
    }

    .brand-mark.emoji { font-size: 22px; }
    .note-icon.emoji { font-size: 20px; }
    .sticker-icon.emoji { font-size: 19px; }
    .signal-icon.emoji { font-size: 22px; }
    .signature-icon.emoji { font-size: 17px; }
    .value-icon.emoji { font-size: 23px; }
    .season-emoji.emoji { font-size: 31px; }
    .channel-kicker-icon.emoji { font-size: 18px; }
    .button .emoji { font-size: 18px; }

    .nav-links a { display: inline-flex; align-items: center; gap: 7px; }
    .nav-emoji { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 9px; background: #e5f4dc; box-shadow: inset 0 -2px 0 rgba(67, 133, 70, .08); font-size: 14px; }
    .nav-links a:nth-child(2) .nav-emoji { background: #fff2c9; }
    .nav-links a:nth-child(3) .nav-emoji { background: #e9e5f8; }
    .nav-links a:nth-child(4) .nav-emoji { background: #dff1ed; }
    .nav-links a:nth-child(5) .nav-emoji { background: #f7e7d5; }
    .nav-shop-emoji { font-size: 17px; }
    .eyebrow { gap: 8px; }
    .eyebrow-emoji { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 10px; background: var(--green-soft); box-shadow: inset 0 -2px 0 rgba(67, 133, 70, .08); font-size: 15px; letter-spacing: 0; }
    .section-soft .eyebrow-emoji { background: #fff0ba; }
    .contact-card .eyebrow-emoji { background: rgba(255, 255, 255, .16); }
    .button-emoji { flex: 0 0 auto; }

    .language-switcher {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      min-width: 0;
      min-height: 36px;
      padding: 3px 5px 3px 9px;
      border: 1px solid #bcd8bd;
      border-radius: 14px;
      background: #f9fcf7;
      box-shadow: 0 6px 14px rgba(38, 89, 49, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
    }

    .language-switcher select {
      max-width: 100%;
      min-width: 0;
      width: 82px;
      min-height: 28px;
      padding: 0 24px 0 9px;
      border: 1px solid #d3e5d3;
      border-radius: 9px;
      color: var(--green-deep);
      background: #fff;
      background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
      background-position: calc(100% - 12px) 11px, calc(100% - 8px) 11px;
      background-size: 4px 4px, 4px 4px;
      background-repeat: no-repeat;
      font: inherit;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      appearance: none;
    }

    .language-switcher select:focus-visible {
      border-color: var(--green);
      outline: none;
      box-shadow: 0 0 0 3px rgba(47, 109, 75, .16);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .page-loader {
      position: fixed;
      z-index: 9999;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--green);
      background: var(--bg);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .34s ease, visibility .34s ease;
    }

    body.page-loading { overflow: hidden; }
    body.page-loading .page-loader { opacity: 1; visibility: visible; pointer-events: auto; }
    body.is-page-leaving .page-shell { opacity: 0; transform: scale(1.012); transition: opacity .28s ease, transform .28s ease; }

    .page-loader-spinner {
      width: 52px;
      height: 52px;
      border: 5px solid #dcefd7;
      border-top-color: var(--green);
      border-right-color: var(--yellow);
      border-radius: 50%;
      box-shadow: 0 8px 20px rgba(38, 89, 49, .1);
      animation: page-loader-spin .78s linear infinite;
    }

    @keyframes page-loader-spin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
      .page-loader-spinner { animation: none; }
    }

    @media (max-width: 760px) {
      .language-switcher { margin-top: 9px; padding: 3px; }
      .language-switcher-label { position: absolute; top: -13px; right: 3px; padding: 3px 7px; border: 1px solid rgba(47, 109, 75, .14); border-radius: 999px; background: #e5f4dc; box-shadow: 0 4px 9px rgba(38, 89, 49, .08); font-size: 9px; }
      .language-switcher-label::before { width: 17px; height: 17px; border-radius: 6px; font-size: 8px; }
      .language-switcher select { width: 78px; min-height: 28px; padding-right: 22px; font-size: 10px; }

      .business { padding: 22px 20px 18px; border-radius: 25px; }
      .business-heading h3 { font-size: 21px; }
      .business-heading-main { gap: 10px; }
      .business-mark { width: 40px; height: 40px; font-size: 21px; }
      .business-row { grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); gap: 10px; padding: 12px 8px; font-size: 13px; }
      .business-row dt { white-space: normal; }
    }

    html[lang="ko"] body {
      font-family: var(--ko-font);
      font-synthesis: none;
    }

    html[lang="ko"] h1,
    html[lang="ko"] h2,
    html[lang="ko"] h3,
    html[lang="ko"] .brand-name,
    html[lang="ko"] .photo-caption strong {
      font-family: var(--ko-font);
    }

    html[lang="ko"] h1,
    html[lang="ko"] h2,
    html[lang="ko"] h3 { font-weight: 700; }
    html[lang="ko"] .brand-name { font-weight: 700; }

    html[lang="en"] h1,
    html[lang="en"] h2,
    html[lang="en"] h3,
    html[lang="ja"] h1,
    html[lang="ja"] h2,
    html[lang="ja"] h3,
    html[lang="zh"] h1,
    html[lang="zh"] h2,
    html[lang="zh"] h3 {
      font-weight: 800;
      letter-spacing: -.035em;
    }

    html[lang="es"] h1,
    html[lang="es"] h2,
    html[lang="es"] h3,
    html[lang="fr"] h1,
    html[lang="fr"] h2,
    html[lang="fr"] h3,
    html[lang="de"] h1,
    html[lang="de"] h2,
    html[lang="de"] h3 {
      font-weight: 800;
      letter-spacing: -.035em;
    }

    html[lang="ko"] { --business-label-width: 120px; }
    html[lang="en"] { --business-label-width: 158px; }
    html[lang="ja"],
    html[lang="zh"] { --business-label-width: 140px; }
    html[lang="es"],
    html[lang="fr"],
    html[lang="de"] { --business-label-width: 178px; }

    .nav-links a,
    .nav-shop,
    .button,
    .channel-link { white-space: nowrap; }

    .business-row dt { white-space: nowrap; }

    @media (max-width: 760px) {
    }

    /* Farm atmosphere and visual depth pass. */
    .hero-art::before {
      display: block;
      content: "";
      position: absolute;
      z-index: 1;
      top: -88px;
      right: -72px;
      width: 255px;
      height: 255px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 244, 181, .54) 0 18%, rgba(255, 255, 255, 0) 68%);
      animation: farm-sun-breathe 7s ease-in-out infinite;
      pointer-events: none;
    }

    .farm-atmosphere {
      position: absolute;
      z-index: 1;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .farm-sun-glow {
      position: absolute;
      top: 33px;
      right: 42px;
      width: 74px;
      height: 74px;
      border: 1px solid rgba(255, 255, 255, .46);
      border-radius: 50%;
      box-shadow: 0 0 0 11px rgba(255, 248, 195, .15), 0 0 0 22px rgba(255, 248, 195, .07);
      opacity: .68;
      animation: farm-sun-pulse 6s ease-in-out infinite;
    }

    .farm-leaf-float {
      position: absolute;
      width: 25px;
      height: 14px;
      border-radius: 100% 0 100% 0;
      background: rgba(235, 255, 213, .7);
      box-shadow: 0 3px 9px rgba(32, 87, 45, .12);
      opacity: .82;
      transform-origin: 100% 100%;
      animation: farm-leaf-drift 10s ease-in-out infinite;
    }

    .farm-leaf-float::after {
      content: "";
      position: absolute;
      left: 4px;
      bottom: 2px;
      width: 20px;
      height: 1px;
      border-radius: 2px;
      background: rgba(54, 119, 64, .42);
      transform: rotate(-25deg);
      transform-origin: left center;
    }

    .farm-leaf-float-one { top: 116px; left: 28%; transform: rotate(-28deg); animation-delay: -2.2s; }
    .farm-leaf-float-two { top: 82px; left: 63%; transform: scale(.76) rotate(25deg); animation-delay: -6.4s; }

    .farm-pollen {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 250, 205, .78);
      box-shadow: 0 0 0 4px rgba(255, 250, 205, .12);
      animation: farm-pollen-float 8s ease-in-out infinite;
    }

    .farm-pollen-one { top: 23%; left: 43%; animation-delay: -1.4s; }
    .farm-pollen-two { top: 31%; left: 72%; width: 4px; height: 4px; animation-delay: -4.1s; }
    .farm-pollen-three { top: 48%; left: 54%; width: 5px; height: 5px; animation-delay: -6.5s; }
    .farm-pollen-four { top: 18%; left: 78%; width: 4px; height: 4px; animation-delay: -2.7s; }

    .signal-row {
      position: relative;
      margin-top: 42px;
      padding: 20px 21px;
      overflow: hidden;
      border: 1px solid #d6e8d1;
      border-top: 1px solid #d6e8d1;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(225, 243, 218, .64));
      box-shadow: 0 13px 30px rgba(38, 73, 52, .06);
    }

    .signal-row::before {
      content: "";
      position: absolute;
      top: -72px;
      right: -28px;
      width: 150px;
      height: 150px;
      border: 16px solid rgba(126, 197, 113, .13);
      border-radius: 50%;
    }

    .signal-row::after {
      content: "";
      position: absolute;
      right: 23px;
      bottom: 8px;
      left: 23px;
      height: 1px;
      background: repeating-linear-gradient(90deg, rgba(92, 152, 82, .18) 0 3px, transparent 3px 12px);
    }

    .signal { position: relative; z-index: 1; min-height: 44px; justify-content: center; padding: 1px 13px; }
    .signal + .signal { border-left: 1px solid rgba(128, 177, 119, .22); }
    .signal-icon { width: 40px; height: 40px; border: 1px solid rgba(109, 174, 96, .18); border-radius: 14px; box-shadow: 0 5px 12px rgba(73, 123, 67, .07); }
    .signal:nth-child(2) .signal-icon { background: #fff3d3; border-color: #f0dfac; }
    .signal:nth-child(3) .signal-icon { background: #e7f1fa; border-color: #cfdfed; }

    .value-card {
      position: relative;
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .value-card::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -64px;
      width: 145px;
      height: 145px;
      border: 18px solid rgba(104, 166, 86, .08);
      border-radius: 50%;
      pointer-events: none;
    }

    .value-card:nth-child(2)::after { border-color: rgba(228, 174, 69, .12); }
    .value-card:nth-child(3)::after { border-color: rgba(91, 154, 117, .1); }
    .value-card > * { position: relative; z-index: 1; }
    .value-card:hover { transform: translateY(-5px); border-color: #bddab6; box-shadow: 0 16px 30px rgba(38, 73, 52, .1); }
    .value-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
    .value-icon { margin-bottom: 0; box-shadow: 0 5px 12px rgba(73, 123, 67, .08); }
    .value-index { color: #78a56c; font-size: 12px; font-weight: 850; letter-spacing: .12em; }
    .value-card:nth-child(2) .value-index { color: #c4953e; }
    .value-card:nth-child(3) .value-index { color: #5c9c78; }

    .photo-section {
      position: relative;
      overflow: hidden;
    }

    .photo-section::before {
      content: "";
      position: absolute;
      top: 130px;
      left: -160px;
      width: 310px;
      height: 310px;
      border: 1px solid rgba(126, 197, 113, .17);
      border-radius: 48% 52% 56% 44%;
      transform: rotate(24deg);
      pointer-events: none;
    }

    .photo-card {
      transition: transform .28s ease, box-shadow .28s ease;
    }

    .photo-card::before {
      content: attr(data-photo);
      position: absolute;
      z-index: 2;
      top: 20px;
      right: 24px;
      color: rgba(255, 255, 255, .76);
      font-family: "Pretendard", sans-serif;
      font-size: 52px;
      font-weight: 850;
      letter-spacing: -.08em;
      line-height: 1;
      text-shadow: 0 2px 12px rgba(19, 57, 29, .14);
      pointer-events: none;
    }

    .photo-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(38, 73, 52, .13); }
    .photo-card:hover::after { background: linear-gradient(180deg, rgba(12, 46, 26, .03) 33%, rgba(12, 46, 26, .76) 100%); }
    .photo-caption { z-index: 3; }

    .section-soft {
      position: relative;
      overflow: hidden;
      background-image: radial-gradient(circle at 89% 16%, rgba(255, 255, 255, .54) 0 2px, transparent 2.5px), radial-gradient(circle at 8% 75%, rgba(122, 185, 106, .14) 0 1px, transparent 1.7px);
      background-size: 29px 29px, 22px 22px;
    }

    .section-soft::before {
      content: "";
      position: absolute;
      top: -130px;
      right: -105px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(99, 164, 88, .13);
      border-radius: 42% 58% 48% 52%;
      transform: rotate(32deg);
      pointer-events: none;
    }

    .section-soft > .container { position: relative; z-index: 1; }
    .season-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
    .season-card > * { position: relative; z-index: 1; }
    .season-card::before {
      content: attr(data-season);
      position: absolute;
      right: 12px;
      bottom: 34px;
      color: rgba(63, 127, 71, .12);
      font-family: "Pretendard", sans-serif;
      font-size: 80px;
      font-weight: 900;
      letter-spacing: -.12em;
      line-height: 1;
      pointer-events: none;
    }

    .season-card::after {
      content: "";
      position: absolute;
      bottom: 20px;
      left: 23px;
      width: 42px;
      height: 3px;
      border-radius: 99px;
      background: rgba(69, 132, 73, .42);
      pointer-events: none;
    }

    .season-card:nth-child(2)::before { color: rgba(68, 145, 82, .12); }
    .season-card:nth-child(3)::before { color: rgba(191, 145, 56, .14); }
    .season-card:nth-child(4)::before { color: rgba(73, 132, 111, .12); }
    .season-card:hover { transform: translateY(-5px) rotate(-.45deg); box-shadow: 0 15px 28px rgba(38, 73, 52, .09); }
    .season-card:hover .season-emoji { transform: translateY(-3px) rotate(6deg); }
    .season-emoji { transition: transform .25s ease; }

    .channel-card {
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .channel-card::before {
      content: attr(data-channel);
      position: absolute;
      z-index: 0;
      top: 24px;
      right: 29px;
      color: rgba(39, 99, 54, .15);
      font-family: "Pretendard", sans-serif;
      font-size: 68px;
      font-weight: 900;
      letter-spacing: -.12em;
      line-height: 1;
      pointer-events: none;
    }

    .channel-card.store::before { color: rgba(151, 121, 70, .14); }
    .channel-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(38, 73, 52, .12); }
    .channel-link { width: fit-content; padding: 9px 13px; border: 1px solid rgba(47, 109, 75, .18); border-radius: 999px; background: rgba(255, 255, 255, .48); }
    .store .channel-link { border-color: rgba(117, 99, 67, .18); background: rgba(255, 255, 255, .56); }

    .contact-card { position: relative; isolation: isolate; overflow: hidden; }
    .contact-card::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -96px;
      right: -72px;
      width: 260px;
      height: 260px;
      border: 26px solid rgba(220, 246, 205, .12);
      border-radius: 48% 52% 58% 42%;
      transform: rotate(22deg);
    }

    .contact-card::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: 30px;
      bottom: 27px;
      width: 90px;
      height: 54px;
      background: radial-gradient(circle, rgba(255, 244, 181, .28) 0 2px, transparent 2.7px) 0 0 / 18px 18px;
      opacity: .65;
    }

    .contact-card > * { position: relative; z-index: 1; }
    .contact-card .button { box-shadow: 0 8px 15px rgba(20, 77, 42, .1); }

    footer {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #eaf4e6 0%, #f3f9f0 68%, #e1f0d9 100%);
    }

    footer::before {
      content: "";
      position: absolute;
      top: -95px;
      right: -60px;
      width: 230px;
      height: 230px;
      border: 22px solid rgba(110, 172, 94, .1);
      border-radius: 50%;
      transform: rotate(19deg);
      pointer-events: none;
    }

    footer > .container { position: relative; z-index: 1; }

    @keyframes farm-sun-breathe {
      0%, 100% { opacity: .72; transform: scale(.96); }
      50% { opacity: 1; transform: scale(1.05); }
    }

    @keyframes farm-sun-pulse {
      0%, 100% { opacity: .42; transform: scale(.96); }
      50% { opacity: .78; transform: scale(1.08); }
    }

    @keyframes farm-leaf-drift {
      0%, 100% { margin-top: 0; margin-left: 0; transform: rotate(-28deg); }
      50% { margin-top: 10px; margin-left: 7px; transform: rotate(-10deg); }
    }

    @keyframes farm-pollen-float {
      0%, 100% { opacity: .28; transform: translate3d(0, 3px, 0) scale(.8); }
      50% { opacity: .9; transform: translate3d(9px, -10px, 0) scale(1); }
    }

    @media (max-width: 760px) {
      .signal-row { margin-top: 30px; padding: 14px 15px; }
      .signal { justify-content: flex-start; padding: 2px 3px; }
      .signal + .signal { margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(128, 177, 119, .22); border-left: 0; }
      .photo-card::before { top: 17px; right: 19px; font-size: 46px; }
      .season-card::before { right: 9px; bottom: 27px; font-size: 63px; }
      .season-card::after { bottom: 15px; left: 18px; }
      .channel-card::before { top: 20px; right: 24px; font-size: 57px; }
      .contact-card::after { right: 20px; bottom: 24px; }
      .nav-links a.is-active:not(.nav-intro)::after { right: auto; bottom: 5px; left: 13px; width: 25px; }
      .business-actions { gap: 6px; }
      .business-action { min-height: 32px; padding: 0 9px; font-size: 11px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .farm-sun-glow,
      .farm-leaf-float,
      .farm-pollen { animation: none !important; }
      .value-card:hover,
      .photo-card:hover,
      .season-card:hover,
      .channel-card:hover { transform: none; }
      body[data-page="farm"] .page-shell,
      body[data-page="guide"] .page-shell { animation: none !important; }
      html.has-scroll-reveal [data-scroll-reveal],
      html.has-scroll-reveal [data-scroll-reveal-child] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    }

    /* Clean sans-serif type for explanatory copy. */
    :root {
      --lang-font: var(--ko-font);
      --lang-heading-font: var(--ko-font);
      --copy-font: var(--lang-font);
    }

    html[lang="ko"] {
      --lang-font: var(--ko-font);
      --lang-heading-font: var(--ko-display-font);
    }

    html[lang="en"] { --lang-font: "Nunito", "DM Sans", Arial, sans-serif; --lang-heading-font: "Fredoka", "DM Sans", Arial, sans-serif; }
    html[lang="ja"] { --lang-font: "M PLUS Rounded 1c", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; --lang-heading-font: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
    html[lang="zh"] { --lang-font: "Noto Sans SC", "PingFang SC", sans-serif; --lang-heading-font: "ZCOOL KuaiLe", "Noto Serif SC", "Noto Sans SC", "PingFang SC", sans-serif; }
    html[lang="es"] { --lang-font: "Nunito Sans", "Nunito", Arial, sans-serif; --lang-heading-font: "Baloo 2", "Nunito Sans", Arial, sans-serif; }
    html[lang="fr"] { --lang-font: "Quicksand", "Poppins", Arial, sans-serif; --lang-heading-font: "Comfortaa", "Poppins", Arial, sans-serif; }
    html[lang="de"] { --lang-font: "Manrope", "Quicksand", Arial, sans-serif; --lang-heading-font: "Quicksand", "Manrope", Arial, sans-serif; }

    html[lang] body,
    html[lang] button,
    html[lang] select,
    html[lang] input,
    html[lang] textarea { font-family: var(--lang-font); font-synthesis: none; }
    html[lang] h1,
    html[lang] h2,
    html[lang] h3,
    html[lang] .brand-name,
    html[lang] .photo-caption strong { font-family: var(--lang-heading-font); }

    .hero-copy > p,
    .hero-note,
    .signal,
    .section-header > p,
    .story-intro p,
    .value-card p,
    .photo-heading > p,
    .photo-caption span,
    .season-card p,
    .channel-card p,
    .contact-card p,
    .business-row,
    .footer-desc,
    .copyright {
      font-family: var(--copy-font);
      letter-spacing: -.025em;
    }

    .hero-copy > p,
    .story-intro p,
    .value-card p,
    .photo-heading > p,
    .season-card p,
    .channel-card p,
    .contact-card p {
      font-weight: 600;
    }

    .hero-note,
    .signal,
    .business-row,
    .footer-desc,
    .copyright {
      font-weight: 600;
    }

    .photo-caption span { font-weight: 700; letter-spacing: -.02em; }

    /* Continuous farm motion: subtle, CSS-only, and contained inside each decoration. */
    .signal-row::before { animation: farm-orbit 12s ease-in-out infinite; }
    .value-card::after { animation: farm-value-breathe 8s ease-in-out infinite; }
    .value-card:nth-child(2)::after { animation-delay: -2.4s; }
    .value-card:nth-child(3)::after { animation-delay: -5.1s; }
    .photo-card::before { animation: farm-number-bob 8s ease-in-out infinite; }
    .photo-card:nth-child(2)::before { animation-delay: -3.7s; }
    .season-card::before { animation: farm-season-watermark 11s ease-in-out infinite; }
    .season-card:nth-child(2)::before { animation-delay: -2.6s; }
    .season-card:nth-child(3)::before { animation-delay: -5.4s; }
    .season-card:nth-child(4)::before { animation-delay: -8s; }
    .season-emoji { animation: farm-season-bob 4.8s ease-in-out infinite; }
    .season-card:nth-child(2) .season-emoji { animation-delay: -1.2s; }
    .season-card:nth-child(3) .season-emoji { animation-delay: -2.6s; }
    .season-card:nth-child(4) .season-emoji { animation-delay: -3.8s; }
    .channel-card::after { animation: farm-ring-drift 10s ease-in-out infinite; }
    .channel-card.store::after { animation-delay: -4.8s; }
    .contact-card::before { animation: farm-contact-orbit 14s ease-in-out infinite; }
    footer::before { animation: farm-footer-drift 16s ease-in-out infinite; }

    @keyframes farm-orbit {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(-14px, 10px, 0) rotate(7deg); }
    }

    @keyframes farm-value-breathe {
      0%, 100% { transform: translate3d(0, 0, 0) scale(.96); opacity: .72; }
      50% { transform: translate3d(-8px, -7px, 0) scale(1.04); opacity: 1; }
    }

    @keyframes farm-number-bob {
      0%, 100% { transform: translate3d(0, 0, 0); opacity: .68; }
      50% { transform: translate3d(0, 7px, 0); opacity: .9; }
    }

    @keyframes farm-season-watermark {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: .7; }
      50% { transform: translate3d(-6px, -5px, 0) rotate(-3deg); opacity: 1; }
    }

    @keyframes farm-season-bob {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(0, -5px, 0) rotate(5deg); }
    }

    @keyframes farm-ring-drift {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      50% { transform: translate3d(-11px, -8px, 0) rotate(12deg) scale(1.06); }
    }

    @keyframes farm-contact-orbit {
      0%, 100% { transform: rotate(22deg) translate3d(0, 0, 0); }
      50% { transform: rotate(30deg) translate3d(-12px, 8px, 0); }
    }

    @keyframes farm-footer-drift {
      0%, 100% { transform: rotate(19deg) translate3d(0, 0, 0); }
      50% { transform: rotate(28deg) translate3d(-9px, 9px, 0); }
    }

    @keyframes farm-page-enter {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    html.has-scroll-reveal [data-scroll-reveal] {
      opacity: 0;
      transform: translate3d(0, 44px, 0) scale(.985);
      filter: blur(3px);
      will-change: opacity, transform, filter;
      transition: opacity .88s cubic-bezier(.22, 1, .36, 1), transform .88s cubic-bezier(.22, 1, .36, 1), filter .88s ease;
    }

    html.has-scroll-reveal [data-scroll-reveal].is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    html.has-scroll-reveal [data-scroll-reveal-child] {
      opacity: 0;
      transform: translate3d(0, 27px, 0) scale(.975);
      filter: blur(2px);
      will-change: opacity, transform, filter;
      transition: opacity .72s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), transform .72s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), filter .72s ease var(--reveal-delay, 0ms);
    }

    html.has-scroll-reveal [data-scroll-reveal-child].is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      filter: blur(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .signal-row::before,
      .value-card::after,
      .photo-card::before,
      .season-card::before,
      .season-emoji,
      .channel-card::after,
      .contact-card::before,
      footer::before { animation: none !important; }
    }

    /* Content depth pass: live shop guidance, the farm process, and practical help. */
    .product-section {
      position: relative;
      overflow: hidden;
      padding-top: 98px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(241, 249, 235, .3));
    }

    .product-section::before {
      content: "";
      position: absolute;
      top: -140px;
      left: -80px;
      width: 290px;
      height: 290px;
      border: 1px solid rgba(96, 161, 82, .16);
      border-radius: 48% 52% 42% 58%;
      transform: rotate(-17deg);
      pointer-events: none;
    }

    .product-section > .container,
    .process-section > .container,
    .guide-section > .container { position: relative; z-index: 1; }

    .product-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(330px, .84fr);
      gap: 20px;
      align-items: stretch;
    }

    .product-focus {
      position: relative;
      min-height: 450px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      border: 1px solid #b7d6ad;
      border-radius: 36px;
      background: var(--green-deep);
      box-shadow: 0 20px 45px rgba(38, 73, 52, .14);
      isolation: isolate;
    }

    .product-focus::after {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      background: linear-gradient(180deg, rgba(19, 78, 41, .02) 19%, rgba(15, 57, 31, .18) 42%, rgba(10, 44, 26, .92) 100%);
      pointer-events: none;
    }

    .product-focus-image {
      position: absolute;
      z-index: 0;
      inset: 0;
    }

    .product-focus-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(1.08) contrast(1.02);
      transition: transform .6s ease;
    }

    .product-focus:hover .product-focus-image img { transform: scale(1.045); }

    .product-focus-stamp {
      position: absolute;
      z-index: 2;
      top: 25px;
      right: 25px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 999px;
      color: #1b5a35;
      background: rgba(244, 253, 233, .9);
      box-shadow: 0 8px 18px rgba(24, 74, 37, .14);
      font-size: 13px;
      font-weight: 850;
    }

    .product-focus-content {
      position: relative;
      z-index: 2;
      max-width: 570px;
      padding: 32px 34px 34px;
      color: #fff;
    }

    .product-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px;
      color: #d8f0cc;
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .04em;
    }

    .product-focus-content h3 {
      max-width: 480px;
      margin: 0 0 12px;
      color: #fff;
      font-size: clamp(29px, 3.2vw, 46px);
      line-height: 1.22;
    }

    .product-focus-content p {
      max-width: 500px;
      margin: 0 0 22px;
      color: rgba(255, 255, 255, .93);
      font-family: var(--copy-font);
      font-size: 16px;
      font-weight: 650;
      line-height: 1.7;
      word-break: keep-all;
    }

    .product-focus-content .button-primary {
      color: var(--green-deep);
      background: #fff;
      box-shadow: 0 9px 20px rgba(13, 58, 27, .14);
    }

    .product-focus-content .button-primary:hover { background: #eef9e8; }

    .product-list {
      display: grid;
      gap: 14px;
    }

    .product-item {
      position: relative;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 16px;
      min-height: 135px;
      padding: 22px 23px;
      overflow: hidden;
      border: 1px solid #d4e7cf;
      border-radius: 23px;
      background: rgba(255, 255, 255, .86);
      box-shadow: var(--shadow-soft);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .product-item::after {
      content: "";
      position: absolute;
      right: -33px;
      bottom: -48px;
      width: 110px;
      height: 110px;
      border: 14px solid rgba(103, 170, 87, .1);
      border-radius: 50%;
      pointer-events: none;
    }

    .product-item:nth-child(2)::after { border-color: rgba(230, 183, 87, .14); }
    .product-item:nth-child(3)::after { border-color: rgba(98, 159, 176, .12); }
    .product-item:hover { transform: translateX(4px); border-color: #afd2a7; box-shadow: 0 16px 30px rgba(38, 73, 52, .1); }

    .product-item-icon {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      border: 1px solid #cbe2c4;
      border-radius: 17px 17px 17px 7px;
      background: #eaf7e3;
      box-shadow: inset 0 -4px 0 rgba(83, 148, 72, .08);
      font-size: 25px;
      transform: rotate(-4deg);
    }

    .product-item:nth-child(2) .product-item-icon { border-color: #f0dfb2; background: #fff4d8; }
    .product-item:nth-child(3) .product-item-icon { border-color: #cedfea; background: #edf5fb; }
    .product-item-body { position: relative; z-index: 1; min-width: 0; }
    .product-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    .product-item-tag { color: #5a9060; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .product-item:nth-child(2) .product-item-tag { color: #ad7e2e; }
    .product-item:nth-child(3) .product-item-tag { color: #557e9e; }
    .product-item-number { color: #82ae76; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
    .product-item h3 { margin: 0 0 5px; font-size: 22px; }
    .product-item p { max-width: 390px; margin: 0; color: #356743; font-family: var(--copy-font); font-size: 14px; font-weight: 650; line-height: 1.62; word-break: keep-all; }

    .process-section {
      position: relative;
      overflow: hidden;
      background: #fffdf6;
    }

    .process-section::before {
      content: "";
      position: absolute;
      right: -118px;
      bottom: -170px;
      width: 360px;
      height: 360px;
      border: 1px solid rgba(226, 183, 76, .18);
      border-radius: 50%;
      box-shadow: 0 0 0 20px rgba(226, 183, 76, .05), 0 0 0 40px rgba(226, 183, 76, .035);
      pointer-events: none;
    }

    .process-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0;
      margin-top: 45px;
    }

    .process-track::before {
      content: "";
      position: absolute;
      top: 25px;
      right: 9%;
      left: 9%;
      height: 2px;
      background: repeating-linear-gradient(90deg, #b8d7a7 0 10px, transparent 10px 18px);
      pointer-events: none;
    }

    .process-step {
      position: relative;
      z-index: 1;
      min-width: 0;
      padding: 0 17px;
      text-align: center;
    }

    .process-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin-bottom: 19px;
    }

    .process-number { color: #7aa36b; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
    .process-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid #c9e0c0;
      border-radius: 18px 18px 18px 7px;
      color: #2f7544;
      background: #eaf7e3;
      box-shadow: 0 8px 17px rgba(69, 123, 59, .1);
      font-size: 25px;
      transform: rotate(-4deg);
      animation: farm-process-pulse 5.5s ease-in-out infinite;
    }

    .process-step:nth-child(2) .process-icon { border-color: #f0dfb3; background: #fff4d9; animation-delay: -.8s; }
    .process-step:nth-child(3) .process-icon { border-color: #ccdcea; background: #edf5fc; animation-delay: -1.7s; }
    .process-step:nth-child(4) .process-icon { border-color: #e4d1b9; background: #fff1e4; animation-delay: -2.6s; }
    .process-step:nth-child(5) .process-icon { border-color: #c9ded5; background: #e9f5ef; animation-delay: -3.5s; }
    .process-step h3 { margin: 0 0 7px; font-size: 22px; }
    .process-step p { margin: 0 auto; color: #356743; font-family: var(--copy-font); font-size: 14px; font-weight: 650; line-height: 1.62; word-break: keep-all; }

    .guide-section {
      position: relative;
      overflow: hidden;
      background: var(--surface-soft);
      background-image: radial-gradient(circle at 8% 18%, rgba(255, 255, 255, .7) 0 2px, transparent 2.6px), radial-gradient(circle at 93% 75%, rgba(100, 164, 88, .13) 0 1px, transparent 1.7px);
      background-size: 27px 27px, 23px 23px;
    }

    .guide-section::after {
      content: "";
      position: absolute;
      top: -80px;
      right: -70px;
      width: 230px;
      height: 230px;
      border: 19px solid rgba(116, 184, 100, .1);
      border-radius: 50%;
      pointer-events: none;
    }

    .guide-layout {
      display: grid;
      grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
      gap: 20px;
      align-items: stretch;
    }

    .guide-grid { display: grid; gap: 12px; }

    .guide-card {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 14px;
      align-items: start;
      padding: 20px 21px;
      border: 1px solid #cfe5c9;
      border-radius: 22px;
      background: rgba(255, 255, 255, .78);
      box-shadow: 0 9px 22px rgba(38, 73, 52, .055);
    }

    .guide-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid #c9e1c1;
      border-radius: 16px 16px 16px 6px;
      background: #e9f7e1;
      font-size: 23px;
      transform: rotate(-3deg);
    }

    .guide-card:nth-child(2) .guide-icon { border-color: #f0dfb1; background: #fff4d7; }
    .guide-card:nth-child(3) .guide-icon { border-color: #cedfe9; background: #edf6fb; }
    .guide-card h3 { margin: 0 0 5px; font-size: 20px; }
    .guide-card p { margin: 0 0 9px; color: #356743; font-family: var(--copy-font); font-size: 14px; font-weight: 650; line-height: 1.6; word-break: keep-all; }
    .guide-link { display: inline-flex; align-items: center; gap: 5px; color: var(--green-deep); font-size: 13px; font-weight: 850; }
    .guide-link:hover { color: var(--green); }

    .faq-panel {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 25px 27px 22px;
      border: 1px solid #c9dfc4;
      border-radius: 28px;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 14px 30px rgba(38, 73, 52, .08);
    }

    .faq-panel::before {
      content: "?";
      position: absolute;
      z-index: 0;
      top: -42px;
      right: -19px;
      width: 126px;
      height: 126px;
      display: grid;
      place-items: center;
      border: 17px solid rgba(125, 190, 102, .13);
      border-radius: 50%;
      color: rgba(80, 148, 79, .15);
      font-family: "Pretendard", sans-serif;
      font-size: 64px;
      font-weight: 900;
      line-height: 1;
      transform: rotate(12deg);
      pointer-events: none;
    }

    .faq-panel::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: 25px;
      bottom: 20px;
      width: 84px;
      height: 50px;
      background: radial-gradient(circle, rgba(125, 190, 102, .28) 0 2px, transparent 2.7px) 0 0 / 17px 17px;
      opacity: .62;
      pointer-events: none;
    }

    .faq-panel > * { position: relative; z-index: 1; }
    .faq-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
    .faq-heading-main { display: flex; align-items: center; min-width: 0; gap: 11px; }
    .faq-heading-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border: 1px solid #c9e1c1; border-radius: 15px 15px 15px 6px; background: #e9f7e1; box-shadow: 0 7px 14px rgba(69, 123, 59, .08); font-size: 22px; transform: rotate(-4deg); }
    .faq-heading h3 { margin: 0; font-size: 25px; }
    .faq-heading > span { padding: 6px 9px; border: 1px solid #d2e8ca; border-radius: 999px; color: #4d8660; background: #f2faed; font-size: 11px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
    .faq-list { border-top: 1px solid #dcebd8; }
    .faq-item { position: relative; border-bottom: 1px solid #dcebd8; transition: background .24s ease, border-color .24s ease; }
    .faq-item:hover { background: rgba(239, 249, 234, .58); }
    .faq-item[open] { border-bottom-color: #c7dfbf; background: rgba(242, 251, 237, .78); }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 2px; color: #224b2f; cursor: pointer; font-size: 15px; font-weight: 800; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-summary-main { display: flex; align-items: center; min-width: 0; gap: 9px; }
    .faq-question-icon { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid #d1e5c9; border-radius: 10px; background: #f0faeb; font-size: 16px; transition: transform .24s ease, background .24s ease; }
    .faq-item:nth-child(2) .faq-question-icon { border-color: #f0dfb1; background: #fff5dc; }
    .faq-item:nth-child(3) .faq-question-icon { border-color: #cedfe9; background: #edf6fb; }
    .faq-item:nth-child(4) .faq-question-icon { border-color: #ead5c4; background: #fff1e6; }
    .faq-question { min-width: 0; overflow-wrap: anywhere; }
    .faq-number { flex: 0 0 auto; color: #79a66a; font-family: "Pretendard", sans-serif; font-size: 10px; font-weight: 900; letter-spacing: .06em; }
    .faq-plus { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border: 1px solid #cfe4c8; border-radius: 50%; color: #5b9b62; background: #f5fbf1; font-size: 18px; font-weight: 700; line-height: 1; transition: transform .24s ease, color .24s ease, background .24s ease; }
    .faq-item[open] .faq-plus { transform: rotate(45deg); }
    .faq-item[open] .faq-question-icon { background: #e2f3d9; transform: translateY(-1px) rotate(-4deg); }
    .faq-item[open] .faq-plus { color: #fff; border-color: var(--green); background: var(--green); }
    .faq-item p { margin: -1px 14px 15px 42px; padding: 11px 14px; border-left: 3px solid #a8d38c; border-radius: 0 12px 12px 0; color: #356743; background: rgba(229, 245, 221, .68); font-family: var(--copy-font); font-size: 14px; font-weight: 650; line-height: 1.65; word-break: keep-all; }

    .address-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-top: 18px;
      padding: 18px 21px;
      border: 1px solid #c9dfc3;
      border-radius: 20px;
      background: rgba(246, 252, 242, .88);
    }

    .address-strip > div { min-width: 0; }
    .address-strip strong { display: block; margin-top: 4px; color: #224b2f; font-size: 15px; font-weight: 800; word-break: keep-all; }
    .address-label { color: #4d8660; font-size: 12px; font-weight: 850; letter-spacing: .08em; }
    .address-strip .guide-link { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #c5ddbe; border-radius: 999px; background: #fff; }

    @keyframes farm-process-pulse {
      0%, 100% { transform: rotate(-4deg) translateY(0); box-shadow: 0 8px 17px rgba(69, 123, 59, .1); }
      50% { transform: rotate(2deg) translateY(-4px); box-shadow: 0 12px 22px rgba(69, 123, 59, .15); }
    }

    @media (max-width: 980px) {
      .product-layout { grid-template-columns: 1fr; }
      .product-focus { min-height: 420px; }
      .guide-layout { grid-template-columns: 1fr; }
      .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .product-section { padding-top: 76px; }
      .product-focus { min-height: 430px; border-radius: 27px; }
      .product-focus-stamp { top: 18px; right: 18px; padding: 8px 10px; font-size: 11px; }
      .product-focus-content { padding: 25px 23px 24px; }
      .product-focus-content h3 { font-size: 31px; }
      .product-focus-content p { font-size: 14px; }
      .product-list { gap: 10px; }
      .product-item { min-height: 0; padding: 18px; border-radius: 19px; }
      .product-item h3 { font-size: 20px; }
      .product-item p { font-size: 13px; }
      .process-section { padding-top: 76px; }
      .process-track { display: block; margin-top: 35px; padding-left: 7px; }
      .process-track::before { top: 24px; bottom: 25px; left: 29px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #b8d7a7 0 10px, transparent 10px 18px); }
      .process-step { min-height: 103px; padding: 0 0 25px 72px; text-align: left; }
      .process-step:last-child { min-height: 76px; padding-bottom: 0; }
      .process-head { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: 3px; margin: 0; }
      .process-number { font-size: 11px; }
      .process-icon { width: 48px; height: 48px; font-size: 22px; }
      .process-step h3 { margin-bottom: 5px; font-size: 20px; }
      .process-step p { margin: 0; font-size: 13px; }
      .guide-section { padding-top: 76px; }
      .guide-grid { grid-template-columns: 1fr; gap: 10px; }
      .guide-card { padding: 17px; border-radius: 19px; }
      .guide-card h3 { font-size: 19px; }
      .guide-card p { font-size: 13px; }
      .faq-panel { padding: 22px 19px 18px; border-radius: 23px; }
      .faq-heading-main { gap: 8px; }
      .faq-heading-icon { width: 37px; height: 37px; flex-basis: 37px; border-radius: 13px 13px 13px 5px; font-size: 19px; }
      .faq-heading h3 { font-size: 22px; }
      .faq-heading > span { padding: 5px 7px; font-size: 10px; }
      .faq-item summary { font-size: 14px; }
      .faq-summary-main { gap: 7px; }
      .faq-question-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: 15px; }
      .faq-number { font-size: 9px; }
      .faq-item p { font-size: 13px; }
      .faq-item p { margin-right: 4px; margin-left: 38px; padding: 10px 12px; }
      .address-strip { align-items: flex-start; flex-direction: column; gap: 13px; padding: 16px 17px; }
      .address-strip strong { font-size: 14px; }
    }

    @media (max-width: 430px) {
      .product-focus { min-height: 450px; }
      .product-focus-content h3 { font-size: 28px; }
      .product-item { grid-template-columns: 43px minmax(0, 1fr); gap: 12px; }
      .product-item-icon { width: 43px; height: 43px; border-radius: 14px 14px 14px 6px; font-size: 21px; }
      .product-item h3 { font-size: 18px; }
      .product-item p { font-size: 12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .product-focus-image img,
      .product-item,
      .process-icon,
      .faq-plus { transition: none !important; animation: none !important; }
      .product-focus:hover .product-focus-image img,
      .product-item:hover { transform: none; }
    }

    /* Compact header scale: keep the body readable without letting the navigation dominate. */
    .nav { min-height: 68px; }
    .nav-links { gap: 22px; font-size: 13px; font-weight: 750; line-height: 1.25; }
    .nav-links a { gap: 5px; }
    .nav-emoji { width: 21px; height: 21px; flex-basis: 21px; border-radius: 8px; font-size: 12px; }
    .language-switcher select { min-height: 28px; padding: 0 24px 0 9px; font-size: 11px; }
    .nav-shop { gap: 6px; padding: 8px 13px; font-size: 13px; }
    .nav-shop-emoji { font-size: 15px; }

    @media (max-width: 760px) {
      .nav { min-height: 64px; }
      .nav-links { gap: 0; font-size: 14px; }
      .nav-links a { gap: 7px; }
      .nav-emoji { width: 22px; height: 22px; flex-basis: 22px; font-size: 13px; }
    }

    /* Whole-page balance pass: scale the hierarchy down without sacrificing readable copy. */
    body { font-size: 16px; }
    .hero { padding: 62px 0 42px; }
    .hero-grid { gap: 48px; }
    h1 { font-size: clamp(40px, 4.75vw, 66px); line-height: 1.1; }
    .hero-copy > p { max-width: 510px; font-size: 18px; line-height: 1.72; }
    .hero-actions { gap: 9px; }
    .button { min-height: 47px; padding: 0 17px; font-size: 14px; }
    .hero-note { margin-top: 19px; font-size: 13px; }
    .hero-art { min-height: 445px; border-radius: 34px; }
    .signal-row { margin-top: 34px; padding: 17px 18px; }
    .section { padding: 88px 0; }
    .section-tight { padding-top: 34px; }
    .section-header { margin-bottom: 27px; }
    .section-header h2 { font-size: clamp(30px, 3.65vw, 46px); }
    .section-header > p,
    .photo-heading p { max-width: 390px; font-size: 15px; }
    .story-grid { gap: 16px; }
    .story-intro { min-height: 340px; padding: 28px; }
    .story-intro h3 { margin-top: 48px; font-size: clamp(25px, 2.7vw, 35px); }
    .story-intro p { font-size: 15px; }
    .values { gap: 16px; }
    .value-card { min-height: 160px; padding: 22px; }
    .value-card:last-child { min-height: 150px; }
    .value-card h3 { font-size: 20px; }
    .value-card p { font-size: 14px; }
    .photo-section { padding-bottom: 88px; }
    .photo-heading { margin-bottom: 24px; }
    .photo-heading h2 { font-size: clamp(29px, 3.2vw, 41px); }
    .photo-card { min-height: 310px; }
    .photo-card:first-child { min-height: 375px; }
    .photo-caption strong { font-size: 23px; }
    .photo-caption span { font-size: 14px; }
    .season-card { min-height: 215px; padding: 20px; }
    .season-card h3 { margin-top: 24px; font-size: 22px; }
    .season-card p { font-size: 14px; }
    .channel-section { padding-bottom: 88px; }
    .channel-card { min-height: 248px; padding: 27px; }
    .channel-card h3 { font-size: clamp(25px, 2.7vw, 35px); }
    .channel-card p { font-size: 15px; }
    .channel-link { font-size: 14px; }
    .contact-card { min-height: 285px; padding: 28px; }
    .contact-card h3 { margin-top: 40px; font-size: clamp(28px, 2.8vw, 38px); }
    .contact-card p { font-size: 15px; }
    .business { min-height: 285px; padding: 25px 28px 22px; }
    .business-heading h3 { font-size: 22px; }
    .business-row { padding: 11px 10px; font-size: 13px; }
    .product-focus { min-height: 415px; }
    .product-focus-content { padding: 29px 31px 30px; }
    .product-focus-content h3 { font-size: clamp(28px, 3vw, 42px); }
    .product-focus-content p { font-size: 15px; }
    .product-item { min-height: 125px; padding: 20px 21px; }
    .product-item h3 { font-size: 20px; }
    .product-item p { font-size: 14px; }
    .process-track { margin-top: 38px; }
    .process-step h3 { font-size: 21px; }
    .process-step p { font-size: 14px; }
    .guide-card h3 { font-size: 20px; }
    .guide-card p,
    .faq-item p { font-size: 14px; }
    .footer-desc { font-size: 13px; }
    .footer-links { font-size: 13px; }
    .copyright { font-size: 12px; }

    @media (max-width: 980px) {
      .hero { padding-top: 54px; }
      .hero-art { min-height: 400px; }
    }

    @media (max-width: 760px) {
      .hero { padding: 48px 0 26px; }
      h1 { font-size: clamp(38px, 11vw, 55px); }
      .hero-copy > p { font-size: 16px; }
      .hero-art { min-height: 340px; }
      .signal-row { margin-top: 26px; padding: 14px 15px; }
      .section { padding: 66px 0; }
      .section-tight { padding-top: 28px; }
      .section-header { margin-bottom: 22px; }
      .section-header h2 { font-size: 32px; }
      .section-header > p,
      .photo-heading p { font-size: 15px; }
      .story-intro { min-height: 315px; padding: 24px; }
      .story-intro h3 { margin-top: 40px; font-size: 28px; }
      .story-intro p { font-size: 14px; }
      .value-card { min-height: 170px; padding: 19px; }
      .value-card:last-child { min-height: 158px; }
      .value-card h3 { font-size: 19px; }
      .value-card p { font-size: 13px; }
      .photo-section { padding-bottom: 66px; }
      .photo-card,
      .photo-card:first-child { min-height: 260px; }
      .photo-caption strong { font-size: 21px; }
      .photo-caption span { font-size: 13px; }
      .season-card { min-height: 190px; padding: 17px; }
      .season-card h3 { margin-top: 17px; font-size: 20px; }
      .season-card p { font-size: 13px; }
      .channel-section { padding-bottom: 66px; }
      .channel-card { min-height: 225px; padding: 23px; }
      .channel-card h3 { font-size: 27px; }
      .channel-card p { font-size: 14px; }
      .channel-link { font-size: 14px; }
      .contact-card { min-height: 0; padding: 24px; }
      .contact-card h3 { margin-top: 38px; font-size: 29px; }
      .contact-card p { font-size: 14px; }
      .business { padding: 22px 20px 18px; }
      .business-row { font-size: 13px; }
      .product-section,
      .process-section,
      .guide-section { padding-top: 66px; }
      .product-focus { min-height: 420px; }
      .product-focus-content { padding: 24px 22px 23px; }
      .product-focus-content h3 { font-size: 30px; }
      .product-item { padding: 17px; }
      .product-item h3 { font-size: 19px; }
      .process-track { margin-top: 32px; }
      .process-step h3 { font-size: 20px; }
      .process-step p { font-size: 13px; }
      .guide-card p,
      .faq-item p { font-size: 13px; }
      .footer-desc { font-size: 13px; }
      .footer-links { font-size: 13px; }
      .copyright { font-size: 12px; }
    }

    @media (max-width: 430px) {
      .product-focus { min-height: 435px; }
      .product-item p { font-size: 13px; }
      .season-card p { font-size: 13px; }
    }

    /* Tablet header: keep the brand, language selector, and menu control together. */
    @media (max-width: 1060px) {
      .nav { min-height: 64px; gap: 14px; }
      .brand { min-width: 0; flex: 1 1 auto; }
      .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
      .brand-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .nav-shop { display: none; }
      .language-switcher { flex: 0 0 auto; margin-top: 9px; padding: 3px; }
      .language-switcher-label { position: absolute; top: -13px; right: 3px; padding: 3px 7px; border: 1px solid rgba(47, 109, 75, .14); border-radius: 999px; background: #e5f4dc; box-shadow: 0 4px 9px rgba(38, 89, 49, .08); font-size: 9px; }
      .language-switcher-label::before { width: 17px; height: 17px; border-radius: 6px; font-size: 8px; }
      .menu-toggle {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid #d6e2d7;
        border-radius: 13px;
        color: var(--green);
        background: #fff;
        cursor: pointer;
      }
      .menu-toggle span,
      .menu-toggle span::before,
      .menu-toggle span::after {
        display: block;
        width: 17px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .2s ease;
      }
      .menu-toggle span { position: relative; }
      .menu-toggle span::before,
      .menu-toggle span::after { content: ""; position: absolute; left: 0; }
      .menu-toggle span::before { top: -6px; }
      .menu-toggle span::after { top: 6px; }
      .menu-toggle[aria-expanded="true"] span { background: transparent; }
      .menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
      .menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
      .nav-links {
        position: absolute;
        z-index: 20;
        top: 63px;
        right: 16px;
        left: 16px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 255, 255, .98);
        box-shadow: var(--shadow);
      }
      .nav-links.is-open { display: flex; }
      .nav-links a { padding: 10px 13px; border-radius: 11px; }
      .nav-links a:hover { background: var(--surface-soft); }
    }

    /* Translation-safe wrapping and a denser operating/footer finish. */
    .button,
    .channel-link { white-space: normal; text-wrap: balance; }
    .button { line-height: 1.35; }
    .section-header h2,
    .photo-heading h2,
    .story-intro h3,
    .product-focus-content h3,
    .channel-card h3,
    .contact-card h3 { text-wrap: balance; }
    .business-row { align-items: center; min-height: 42px; }
    .business-row dd { word-break: normal; overflow-wrap: anywhere; }
    html[lang="ko"] .business-row dd { word-break: keep-all; overflow-wrap: normal; }
    .footer-top { gap: 22px; }
    footer { padding: 34px 0 36px; }
    .footer-links { gap: 13px; }
    .copyright { margin-top: 23px; }

    @media (max-width: 760px) {
      .nav-links { top: 63px; }
      .business-row { min-height: 0; }
      .footer-top { gap: 18px; }
      footer { padding: 32px 0 34px; }
    }

    /* Cinematic farm arrival: a short chapter reel before the long-form page. */
    html.intro-locked,
    body.intro-locked { overflow: hidden; }

    .page-shell {
      transition: opacity .86s cubic-bezier(.22, 1, .36, 1), transform .86s cubic-bezier(.22, 1, .36, 1), filter .86s ease;
      transform-origin: 50% 0;
    }

    .farm-intro {
      position: fixed;
      z-index: 120;
      inset: 0;
      display: grid;
      place-items: center;
      overflow-x: hidden;
      overflow-y: auto;
      color: #fff;
      background: #102719;
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      transition: opacity .9s cubic-bezier(.22, 1, .36, 1), visibility .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
    }

    .farm-intro[hidden] { display: none; }

    .farm-intro::before {
      content: "";
      position: absolute;
      inset: -4%;
      background: #102719;
      transform: none;
      animation: none;
    }

    .farm-intro::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(9, 35, 20, .36), rgba(16, 39, 25, .72));
      animation: none;
    }

    .farm-intro.is-leaving {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.018);
    }

    .farm-intro-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .farm-intro-top,
    .farm-intro-bottom {
      position: absolute;
      z-index: 5;
      right: clamp(18px, 4vw, 62px);
      left: clamp(18px, 4vw, 62px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      min-width: 0;
    }

    .farm-intro-top { top: clamp(18px, 3.5vw, 38px); }
    .farm-intro-bottom { bottom: 18px; color: rgba(255, 255, 255, .7); }
    .farm-intro-top { animation: farm-cinema-top-in .78s .32s cubic-bezier(.16, 1, .3, 1) both; }
    .farm-intro-bottom { animation: farm-cinema-bottom-in .72s .58s cubic-bezier(.16, 1, .3, 1) both; }

    .farm-intro-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: #fff;
      min-width: 0;
      flex: 1 1 auto;
      font-weight: 850;
      letter-spacing: -.045em;
    }

    .farm-intro-brand-mark {
      width: 45px;
      height: 45px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, .9);
      border-radius: 17px 17px 17px 7px;
      background: var(--green-deep);
      box-shadow: 0 9px 21px rgba(43, 95, 55, .18);
      transform: rotate(-4deg);
    }

    .farm-intro-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
    .farm-intro-brand-name { min-width: 0; overflow: hidden; font-family: var(--lang-heading-font); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
    .farm-intro-brand-name small { display: block; margin-top: -3px; overflow: hidden; color: rgba(255, 255, 255, .78); font-family: var(--lang-font); font-size: 9px; font-weight: 800; letter-spacing: .13em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

    .farm-intro-season {
      padding: 8px 13px;
      border: 1px solid rgba(47, 109, 75, .15);
      border-radius: 999px;
      color: #356743;
      background: rgba(255, 255, 255, .58);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .13em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
    }

    .farm-intro-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .farm-intro-language-control {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      min-width: 0;
      min-height: 36px;
      padding: 4px 5px 4px 10px;
      border: 1px solid rgba(47, 109, 75, .24);
      border-radius: 14px;
      background: rgba(255, 255, 255, .86);
      box-shadow: 0 7px 16px rgba(38, 89, 49, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
      backdrop-filter: blur(10px);
    }

    .farm-intro-language-label,
    .language-switcher-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #1f5b35;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: -.025em;
      line-height: 1;
      white-space: nowrap;
    }

    .farm-intro-language-label::before,
    .language-switcher-label::before {
      content: "Aa";
      display: inline-grid;
      place-items: center;
      width: 21px;
      height: 21px;
      border-radius: 8px;
      color: #fff;
      background: var(--green);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: -.08em;
    }

    .farm-intro-language {
      max-width: 100%;
      min-width: 0;
      width: 82px;
      min-height: 28px;
      padding: 0 24px 0 9px;
      border: 1px solid rgba(47, 109, 75, .16);
      border-radius: 9px;
      color: var(--green-deep);
      background: #f8fcf6;
      background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%), linear-gradient(135deg, var(--green) 50%, transparent 50%);
      background-position: calc(100% - 12px) 11px, calc(100% - 8px) 11px;
      background-size: 4px 4px, 4px 4px;
      background-repeat: no-repeat;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      outline: none;
    }

    .farm-intro-language:focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 109, 75, .16); }

    .farm-intro-main {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: none;
      margin: 0 auto;
      padding: 22px 0 18px;
      text-align: center;
    }

    /* The farm entrance is a single cinematic stage. The long-form page stays underneath it. */
    .farm-intro-main > .farm-intro-kicker,
    .farm-intro-main > .farm-intro-title,
    .farm-intro-main > .farm-intro-copy,
    .farm-intro-main > .farm-intro-trust { display: none; }

    .farm-intro-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 19px;
      color: var(--green);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: .15em;
      text-transform: uppercase;
      animation: intro-rise .85s cubic-bezier(.16, 1, .3, 1) both;
    }

    .intro-kicker-icon {
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(47, 109, 75, .18);
      border-radius: 10px 10px 10px 4px;
      color: var(--green-deep);
      background: rgba(255, 255, 255, .72);
      transform: rotate(-7deg);
    }

    .intro-kicker-icon .icon { width: 17px; height: 17px; }

    .farm-intro-title {
      max-width: 100%;
      margin: 0 0 20px;
      color: #173d25;
      font-family: var(--lang-heading-font);
      font-size: clamp(45px, 7.2vw, 86px);
      font-weight: 700;
      letter-spacing: -.075em;
      line-height: 1.12;
      overflow-wrap: anywhere;
      text-wrap: balance;
      animation: intro-rise .9s .08s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-title em { color: var(--green); font-style: normal; }
    .intro-title-line { display: inline-block; max-width: 100%; min-height: 1em; overflow-wrap: anywhere; }
    .intro-type-caret { display: inline-block; width: 4px; height: .88em; margin-left: 8px; border-radius: 3px; vertical-align: -.08em; background: var(--green); animation: intro-caret-blink .95s steps(1) infinite; }
    @keyframes intro-caret-blink { 50% { opacity: 0; } }

    .farm-intro-copy {
      max-width: 100%;
      margin: 0 0 27px;
      color: #2f5f3b;
      font-size: clamp(15px, 1.5vw, 18px);
      font-weight: 650;
      line-height: 1.75;
      overflow-wrap: anywhere;
      text-wrap: balance;
      animation: intro-rise 1s .16s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-cinema {
      position: relative;
      isolation: isolate;
      width: 100%;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin: 0;
      padding: clamp(108px, 15vh, 168px) clamp(24px, 7vw, 112px) clamp(150px, 18vh, 190px);
      overflow: hidden;
      border: 0;
      border-radius: 0;
      background: #b9d9a8;
      box-shadow: 0 22px 52px rgba(40, 92, 48, .16), inset 0 1px 0 rgba(255, 255, 255, .76);
      backdrop-filter: blur(7px) saturate(1.04);
      animation: farm-cinema-entrance 1.18s .04s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-cinema::before,
    .farm-intro-cinema::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .farm-intro-cinema::before {
      z-index: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transform: scale(1.05);
      filter: saturate(.96);
      animation: farm-cinema-bg-push 5s ease-in-out infinite alternate;
      transition: background-image .72s ease, filter .72s ease;
    }

    .farm-intro-cinema::after {
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(9, 48, 27, .08) 0%, rgba(9, 48, 27, .13) 32%, rgba(8, 41, 23, .78) 100%),
        linear-gradient(105deg, rgba(255, 255, 255, .13), transparent 48%, rgba(223, 247, 200, .16));
    }

    .farm-intro-cinema-curtain {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(102deg, #07170d 0%, #0d2a18 72%, #1a4b2b 100%);
      box-shadow: inset -28px 0 42px rgba(205, 242, 181, .16), -24px 0 38px rgba(0, 0, 0, .22);
      transform: scaleX(1);
      transform-origin: right center;
      animation: farm-cinema-curtain-open 1.16s .18s cubic-bezier(.77, 0, .18, 1) both;
    }

    .farm-intro-cinema-curtain::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 2px;
      background: rgba(224, 251, 204, .72);
      box-shadow: 0 0 22px rgba(224, 251, 204, .52);
    }

    .farm-intro-cinema > .farm-intro-cinema-curtain { position: absolute; z-index: 3; }

    .farm-intro[data-cinema-step="0"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-01.png"); }
    .farm-intro[data-cinema-step="1"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-02.png"); }
    .farm-intro[data-cinema-step="2"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-03.png"); }
    .farm-intro[data-cinema-step="3"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-04.png"); }
    .farm-intro[data-cinema-step="4"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-05.png"); }
    .farm-intro[data-cinema-step="5"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-06.png"); }
    .farm-intro[data-cinema-step="6"] .farm-intro-cinema::before { background-image: url("../assets/farm-intro-scene-07.png"); }

    .farm-intro-cinema > * { position: relative; z-index: 4; }

    .farm-intro-cinema-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: rgba(255, 255, 255, .84);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      line-height: 1.2;
      text-transform: uppercase;
      animation: farm-cinema-content-in .62s .58s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-cinema-count { flex: 0 0 auto; color: rgba(255, 255, 255, .76); letter-spacing: .08em; }
    .farm-intro-cinema-current { min-height: clamp(1.25em, 8vw, 1.55em); margin: 11px 0 8px; overflow: hidden; color: #fff; font-family: var(--lang-heading-font); font-size: clamp(38px, 7vw, 86px); font-weight: 900; letter-spacing: -.075em; line-height: 1.08; text-align: left; text-shadow: 0 5px 22px rgba(0, 0, 0, .18); animation: farm-cinema-content-in .74s .7s cubic-bezier(.16, 1, .3, 1) both; }
    .farm-intro-cinema-current-line { display: none; }
    .farm-intro-cinema-current-line.is-active { display: block; animation: farm-cinema-current-in .48s cubic-bezier(.16, 1, .3, 1) both; }

    .farm-intro-cinema-joke {
      min-height: 2.7em;
      max-width: 620px;
      margin: 0 0 22px;
      color: rgba(255, 255, 255, .9);
      font-size: clamp(14px, 1.7vw, 19px);
      font-weight: 750;
      line-height: 1.55;
      text-align: left;
      text-wrap: balance;
      text-shadow: 0 3px 14px rgba(0, 0, 0, .18);
      animation: farm-cinema-content-in .66s .82s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-cinema-joke-line { display: none; }
    .farm-intro-cinema-joke-line.is-active { display: block; animation: farm-cinema-current-in .52s .04s cubic-bezier(.16, 1, .3, 1) both; }

    .farm-intro-cinema-track { display: none; }

    .farm-intro-cinema-item {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 34px;
      padding: 5px 4px;
      border: 1px solid rgba(47, 109, 75, .14);
      border-radius: 10px;
      color: rgba(31, 92, 55, .58);
      background: rgba(255, 255, 255, .46);
      cursor: pointer;
      font-size: 9px;
      font-weight: 850;
      line-height: 1.2;
      text-align: center;
      transition: color .32s ease, background .32s ease, border-color .32s ease, box-shadow .32s ease, opacity .32s ease, transform .32s ease;
    }

    .farm-intro-cinema-item:hover { color: #1f5c37; border-color: rgba(47, 135, 80, .34); background: rgba(255, 255, 255, .75); transform: translateY(-1px); }
    .farm-intro-cinema-item-number { flex: 0 0 auto; color: #6a9a68; font-size: 8px; letter-spacing: .04em; }
    .farm-intro-cinema-item-label { min-width: 0; overflow-wrap: anywhere; }
    .farm-intro-cinema-item.is-active { color: #fff; border-color: var(--green); background: var(--green); box-shadow: 0 8px 16px rgba(47, 109, 75, .2); opacity: 1; transform: translateY(-2px); }
    .farm-intro-cinema-item.is-active .farm-intro-cinema-item-number { color: #dff1d7; }
    .farm-intro-cinema-item.is-past { opacity: .68; }

    .farm-intro-cinema-progress {
      height: 4px;
      margin-top: 11px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .26);
      animation: farm-cinema-content-in .58s .94s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-cinema-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d9f6b4, #fff); transform: scaleX(0); transform-origin: left center; }
    .farm-intro-cinema.is-playing .farm-intro-cinema-progress span { animation: farm-cinema-progress 5s linear forwards; }
    .farm-intro-cinema.is-scene-changing::before { animation: farm-cinema-scene-in .64s cubic-bezier(.16, 1, .3, 1) both, farm-cinema-bg-push 5s .64s ease-in-out infinite alternate; }
    .farm-intro-cinema-note { margin: 10px 0 0; color: rgba(255, 255, 255, .78); font-size: 10px; font-weight: 750; line-height: 1.4; text-align: left; animation: farm-cinema-content-in .58s 1.02s cubic-bezier(.16, 1, .3, 1) both; }

    .farm-intro.is-leaving .farm-intro-cinema-curtain {
      animation: farm-cinema-curtain-close .58s cubic-bezier(.77, 0, .18, 1) both;
    }

    .farm-intro-action {
      position: absolute;
      z-index: 6;
      right: auto;
      bottom: clamp(48px, 8vh, 86px);
      left: 50%;
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 22px 0 10px;
      border: 1px solid rgba(39, 101, 57, .14);
      border-radius: 18px;
      color: #fff;
      background: var(--green);
      box-shadow: 0 14px 28px rgba(47, 109, 75, .22);
      cursor: pointer;
      font-size: 15px;
      font-weight: 850;
      letter-spacing: -.025em;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
      transform: translateX(-50%);
      animation: farm-intro-action-rise 1s 1.1s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-action:hover { background: var(--green-deep); box-shadow: 0 17px 34px rgba(0, 0, 0, .24); transform: translateX(-50%) translateY(-3px); }
    .farm-intro-action:active { transform: translateX(-50%) translateY(-1px) scale(.98); }

    .intro-action-icon {
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--green-deep);
      background: #e8f6de;
    }

    .intro-action-icon .icon { width: 21px; height: 21px; }
    .intro-action-arrow { margin-left: 2px; font-size: 18px; transition: transform .2s ease; }
    .farm-intro-action:hover .intro-action-arrow { transform: translateX(4px); }

    @keyframes farm-intro-action-rise {
      from { opacity: 0; transform: translateX(-50%) translateY(19px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    .farm-intro-note {
      position: absolute;
      z-index: 6;
      right: 18px;
      bottom: 20px;
      left: 18px;
      justify-content: center;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      color: rgba(255, 255, 255, .74);
      font-size: 12px;
      font-weight: 700;
      animation: intro-rise 1s 1.32s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-note::before,
    .farm-intro-note::after { content: ""; width: 19px; height: 1px; background: rgba(255, 255, 255, .42); }

    .farm-intro-trust {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: min(100%, 670px);
      margin-top: 40px;
      padding: 15px 0;
      border-top: 1px solid rgba(47, 109, 75, .16);
      border-bottom: 1px solid rgba(47, 109, 75, .16);
      animation: intro-rise 1s 1.55s cubic-bezier(.16, 1, .3, 1) both;
    }

    .farm-intro-trust-item {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      color: #2f5f3b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }

    .farm-intro-trust-item > span:last-child { min-width: 0; }

    .farm-intro-trust-item + .farm-intro-trust-item { border-left: 1px solid rgba(47, 109, 75, .16); }

    .intro-trust-icon {
      width: 29px;
      height: 29px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: var(--green-deep);
      background: rgba(255, 255, 255, .7);
    }

    .intro-trust-icon .icon { width: 17px; height: 17px; }
    .farm-intro-bottom { color: rgba(255, 255, 255, .7); font-size: 11px; font-weight: 750; letter-spacing: .04em; }

    .farm-intro-deco,
    .farm-intro-ring {
      position: absolute;
      pointer-events: none;
      display: none;
    }

    .farm-intro-deco { z-index: 1; color: rgba(52, 126, 67, .52); animation: intro-leaf-sway 7s ease-in-out infinite; }
    .farm-intro-deco .icon { width: 42px; height: 42px; }
    .farm-intro-deco-one { top: 25%; left: 7%; transform: rotate(-24deg); }
    .farm-intro-deco-two { right: 8%; bottom: 24%; color: rgba(224, 162, 65, .55); animation-delay: -2.7s; transform: rotate(21deg); }
    .farm-intro-deco-three { right: 20%; top: 18%; color: rgba(113, 173, 88, .32); animation-delay: -4.4s; transform: rotate(42deg) scale(.68); }

    .farm-intro-ring { z-index: 0; border: 1px solid rgba(83, 147, 81, .18); border-radius: 50%; animation: intro-ring-drift 16s ease-in-out infinite; }
    .farm-intro-ring-one { width: 310px; height: 310px; top: -135px; right: -82px; }
    .farm-intro-ring-two { width: 240px; height: 240px; bottom: -130px; left: -75px; animation-delay: -6s; }
    .farm-intro-ring-two::after { content: ""; position: absolute; inset: 21px; border: 1px solid rgba(83, 147, 81, .15); border-radius: inherit; }

    @keyframes intro-rise { from { opacity: 0; transform: translateY(19px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes farm-cinema-zoom { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-.8%, -.5%, 0); } }
    @keyframes farm-cinema-bg-push { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-.8%, -.5%, 0); } }
    @keyframes farm-cinema-scene-in { from { opacity: .08; transform: scale(1.1) translate3d(1%, 0, 0); } to { opacity: 1; transform: scale(1.05) translate3d(0, 0, 0); } }
    @keyframes farm-cinema-entrance { from { opacity: 0; transform: scale(1.035) translate3d(0, 18px, 0); filter: brightness(.58) saturate(.76); } 62% { opacity: 1; filter: brightness(.86) saturate(.9); } to { opacity: 1; transform: scale(1) translate3d(0, 0, 0); filter: brightness(1) saturate(1); } }
    @keyframes farm-cinema-curtain-open { 0%, 18% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }
    @keyframes farm-cinema-curtain-close { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
    @keyframes farm-cinema-top-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes farm-cinema-bottom-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes farm-cinema-content-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes farm-cinema-light { 0%, 54%, 100% { background-position: center, center, center, -115% 0; opacity: .72; } 67% { opacity: .94; } 82% { background-position: center, center, center, 115% 0; opacity: .78; } }
    @keyframes farm-cinema-current-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes farm-cinema-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes intro-leaf-sway { 0%, 100% { margin-top: 0; transform: rotate(-24deg); opacity: .6; } 50% { margin-top: 12px; transform: rotate(-7deg); opacity: .95; } }
    @keyframes intro-ring-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-15px, 11px, 0) rotate(12deg); } }

    @media (max-width: 760px) {
      .farm-intro-shell { width: 100%; padding: 0; }
      .farm-intro-top { align-items: flex-start; }
      .farm-intro-brand-mark { width: 39px; height: 39px; }
      .farm-intro-brand-name { font-size: 15px; }
      .farm-intro-brand-name small { font-size: 8px; }
      .farm-intro-season { padding: 7px 9px; font-size: 9px; }
      .farm-intro-tools { gap: 5px; }
      .farm-intro-language-control { margin-top: 9px; padding: 3px; }
      .farm-intro-language-label { position: absolute; top: -13px; right: 3px; padding: 3px 7px; border: 1px solid rgba(47, 109, 75, .14); border-radius: 999px; background: #e5f4dc; box-shadow: 0 4px 9px rgba(38, 89, 49, .08); font-size: 9px; }
      .farm-intro-language-label::before { width: 17px; height: 17px; border-radius: 6px; font-size: 8px; }
      .farm-intro-language { width: 78px; min-height: 28px; padding-left: 8px; padding-right: 22px; background-position: calc(100% - 11px) 11px, calc(100% - 7px) 11px; font-size: 10px; }
      .farm-intro-main { padding: 14px 0 16px; }
      .farm-intro-kicker { margin-bottom: 14px; font-size: 11px; letter-spacing: .1em; }
      .farm-intro-title { margin-bottom: 16px; font-size: clamp(39px, 12vw, 61px); }
      .intro-type-caret { width: 3px; margin-left: 5px; }
      .farm-intro-copy { margin-bottom: 22px; font-size: 14px; }
      .farm-intro-cinema { min-height: 100svh; padding: 96px 20px 170px; border-radius: 0; }
      .farm-intro-cinema-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
      .farm-intro-cinema-item { justify-content: flex-start; min-height: 31px; padding-inline: 7px; font-size: 10px; text-align: left; }
      .farm-intro-cinema-meta { font-size: 9px; }
      .farm-intro-cinema-current { min-height: 2.1em; margin-top: 8px; font-size: clamp(34px, 11vw, 57px); line-height: 1.08; }
      .farm-intro-cinema-joke { min-height: 3em; margin-bottom: 16px; font-size: 13px; line-height: 1.5; }
      .farm-intro-action { bottom: 55px; min-height: 53px; font-size: 14px; }
      .farm-intro-trust { margin-top: 29px; padding: 12px 0; }
      .farm-intro-trust-item { gap: 5px; padding: 0 6px; font-size: 10px; }
      .intro-trust-icon { width: 25px; height: 25px; border-radius: 8px; }
      .intro-trust-icon .icon { width: 15px; height: 15px; }
      .farm-intro-bottom { right: 16px; bottom: 10px; left: 16px; font-size: 9px; }
      .farm-intro-deco-one { left: 2%; top: 21%; }
      .farm-intro-deco-two { right: 3%; bottom: 25%; }
      .farm-intro-deco-three { right: 15%; top: 15%; }
      .farm-intro-deco .icon { width: 32px; height: 32px; }
    }

    @media (min-width: 761px) and (max-width: 920px) {
      .farm-intro-cinema-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (prefers-reduced-motion: reduce) {
      .page-shell,
      .farm-intro,
      .farm-intro::before,
      .farm-intro::after,
      .farm-intro-cinema::before,
      .farm-intro-cinema::after,
      .farm-intro-top,
      .farm-intro-bottom,
      .farm-intro-kicker,
      .farm-intro-title,
      .farm-intro-copy,
      .farm-intro-action,
      .farm-intro-note,
      .farm-intro-trust,
      .farm-intro-cinema,
      .farm-intro-cinema-meta,
      .farm-intro-cinema-current,
      .farm-intro-cinema-joke,
      .farm-intro-cinema-progress,
      .farm-intro-cinema-note,
      .farm-intro-cinema-current-line,
      .farm-intro-cinema-joke-line,
      .farm-intro-cinema-progress span,
      .farm-intro-deco,
      .farm-intro-ring { animation: none !important; transition: none !important; }

      .farm-intro-cinema-curtain { animation: none !important; opacity: 0 !important; transform: scaleX(0) !important; }

      .farm-intro-cinema-current-line.is-active,
      .farm-intro-cinema-joke-line.is-active { opacity: 1; transform: none; }
    }

    /* Long-language header: preserve the brand and keep controls separated before the mobile menu. */
    @media (min-width: 1061px) and (max-width: 1360px) {
      .nav { gap: 12px; }
      .brand { flex: 0 0 190px; min-width: 190px; max-width: 190px; }
      .brand-name { font-size: 16px; }
      .brand-name small { font-size: 8px; letter-spacing: .08em; }
      .nav-links { min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 6px; font-size: 11px; }
      .nav-links a { gap: 4px; }
      .nav-emoji { width: 18px; height: 18px; flex-basis: 18px; border-radius: 7px; font-size: 10px; }
      .language-switcher { flex: 0 0 auto; margin-top: 9px; padding: 3px; }
      .language-switcher-label { position: absolute; top: -13px; right: 3px; padding: 3px 7px; border: 1px solid rgba(47, 109, 75, .14); border-radius: 999px; background: #e5f4dc; box-shadow: 0 4px 9px rgba(38, 89, 49, .08); font-size: 9px; }
      .language-switcher-label::before { width: 17px; height: 17px; border-radius: 6px; font-size: 8px; }
      .language-switcher select { width: 78px; min-height: 28px; padding-right: 22px; font-size: 10px; }
      .nav-shop { gap: 4px; padding: 7px 9px; font-size: 11px; }
      .nav-shop-emoji { font-size: 13px; }
    }

    /* Latin-script hero titles need their own measure so long translations stay elegant. */
    html:not([lang="ko"]) .hero h1 {
      max-width: 560px;
      font-size: clamp(34px, 3.2vw, 49px);
      line-height: 1.12;
      letter-spacing: -.055em;
    }

    @media (max-width: 760px) {
      html:not([lang="ko"]) .hero h1 {
        font-size: clamp(34px, 10vw, 49px);
        line-height: 1.13;
      }
    }

    /* Keep every non-Korean desktop header stable when translated labels become longer. */
    @media (min-width: 1361px) {
      html:not([lang="ko"]) .nav { gap: 12px; }
      html:not([lang="ko"]) .brand { flex: 0 0 190px; min-width: 190px; max-width: 190px; }
      html:not([lang="ko"]) .brand-name { font-size: 16px; }
      html:not([lang="ko"]) .brand-name small { font-size: 8px; letter-spacing: .08em; }
      html:not([lang="ko"]) .nav-links { min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 6px; font-size: 11px; }
      html:not([lang="ko"]) .nav-links a { gap: 4px; }
      html:not([lang="ko"]) .nav-emoji { width: 18px; height: 18px; flex-basis: 18px; border-radius: 7px; font-size: 10px; }
      html:not([lang="ko"]) .nav-shop { gap: 4px; padding: 7px 9px; font-size: 11px; }
      html:not([lang="ko"]) .nav-shop-emoji { font-size: 13px; }
    }

    /* The brand follows the selected language while keeping the header compact. */
    .brand > .brand-name,
    .farm-intro-brand-name {
      min-width: 0;
      max-width: 100%;
      font-family: var(--lang-heading-font);
      font-weight: 750;
      line-height: 1.08;
    }

    .brand > .brand-name > span:first-child,
    .farm-intro-brand-name > span:first-child {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .brand > .brand-name small,
    .farm-intro-brand-name small {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      color: #3e6b47;
      font-family: var(--lang-font);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .08em;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (min-width: 1061px) {
      .brand { min-width: 0; }
      .brand > .brand-name { flex: 0 1 185px; max-width: 185px; }
    }

    @media (max-width: 1060px) {
      .nav { gap: 8px; }
      .brand { flex: 0 1 auto; min-width: 0; max-width: calc(100vw - 180px); }
      .brand > .brand-name { flex: 0 1 auto; max-width: calc(100vw - 180px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
      .brand > .brand-name small { font-size: 7px; letter-spacing: .05em; }
      .language-switcher-label { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    }

    @media (max-width: 430px) {
      .brand { max-width: calc(100vw - 164px); }
      .brand > .brand-name { max-width: calc(100vw - 164px); font-size: 13px; }
      .brand > .brand-name small { font-size: 6px; letter-spacing: .04em; }
      .language-switcher-label { max-width: 72px; font-size: 8px; }
      .language-switcher select { width: 70px; padding-left: 7px; padding-right: 20px; }
    }

    /* Live Hoengseong information: a clear, full-width farm information strip. */
    .farm-live-info {
      width: 100%;
      display: block;
      margin-top: 32px;
      padding: 20px 22px 17px;
      border: 1px solid rgba(83, 143, 79, .2);
      border-radius: 26px;
      background: linear-gradient(112deg, rgba(255, 255, 255, .9), rgba(242, 251, 237, .84));
      box-shadow: 0 16px 34px rgba(38, 89, 49, .1), inset 0 1px 0 rgba(255, 255, 255, .96);
      backdrop-filter: blur(12px);
    }

    .farm-live-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .farm-live-kicker {
      display: block;
      margin-bottom: 3px;
      color: var(--green);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .farm-live-title {
      margin: 0;
      color: var(--green-deep);
      font-family: "DodamLocalSans", "Pretendard", sans-serif;
      font-size: clamp(18px, 2vw, 23px);
      font-weight: 850;
      letter-spacing: -.045em;
    }

    .farm-live-refresh {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      padding: 0;
      border: 1px solid #cfe4cc;
      border-radius: 12px;
      color: var(--green-deep);
      background: #f8fcf6;
      font-size: 19px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }

    .farm-live-refresh:hover { transform: rotate(18deg); background: var(--green-soft); }
    .farm-live-refresh:disabled { cursor: wait; opacity: .58; }
    .farm-live-refresh.is-loading { animation: live-refresh-spin .8s linear infinite; }

    @keyframes live-refresh-spin { to { transform: rotate(360deg); } }

    .farm-live-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .farm-live-card {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 11px;
      min-height: 78px;
      padding: 13px 14px;
      border: 1px solid rgba(126, 181, 119, .2);
      border-radius: 18px;
      background: rgba(248, 253, 246, .8);
    }

    .farm-live-icon {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 13px;
      background: #e2f2d9;
      font-size: 20px;
    }

    .farm-live-card:nth-child(2) .farm-live-icon { background: #eaf0fb; }
    .farm-live-card:nth-child(3) .farm-live-icon { background: #fff2c9; }

    .farm-live-card > span:last-child { min-width: 0; }

    .farm-live-label {
      display: block;
      overflow: hidden;
      color: #39704a;
      font-size: 11px;
      font-weight: 850;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .farm-live-value {
      display: block;
      overflow: hidden;
      margin-top: 2px;
      color: var(--green-deep);
      font-size: clamp(20px, 2.15vw, 29px);
      font-weight: 900;
      letter-spacing: -.055em;
      line-height: 1.08;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .farm-live-sub {
      display: block;
      overflow: hidden;
      margin-top: 3px;
      color: #477654;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .farm-live-status {
      min-height: 14px;
      margin: 13px 2px 0;
      color: #4b7b55;
      font-size: 11px;
      font-weight: 750;
      line-height: 1.35;
    }

    .farm-live-status.is-error { color: #8a6534; }

    @media (max-width: 760px) {
      .farm-live-info { margin-top: 28px; padding: 18px 16px 15px; border-radius: 23px; }
      .farm-live-head { margin-bottom: 12px; }
      .farm-live-grid { gap: 8px; }
      .farm-live-card { min-height: 66px; padding: 11px 12px; border-radius: 16px; }
      .farm-live-icon { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; font-size: 18px; }
      .farm-live-label { font-size: 10px; }
      .farm-live-value { font-size: 21px; }
      .farm-live-sub { font-size: 10px; }
      .farm-live-status { margin-top: 12px; }
    }

    @media (min-width: 761px) and (max-width: 900px) {
      .farm-live-head { margin-bottom: 14px; }
    }

    @media (max-width: 380px) {
      .farm-live-grid { grid-template-columns: 1fr; }
      .farm-live-card { display: flex; align-items: center; }
      .farm-live-icon { margin-bottom: 0; }
    }

    /* Final multilingual fit pass: translated labels may wrap, but they must never push the page sideways. */
    .footer-brand,
    .footer-brand > span:last-child,
    .footer-desc,
    .footer-links,
    .copyright,
    .business-row dt,
    .business-row dd,
    .farm-live-card,
    .farm-live-label,
    .farm-live-sub,
    .farm-live-status { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: normal; }

    .footer-brand > span:last-child { line-height: 1.2; }
    .footer-desc,
    .copyright { white-space: normal; }
    .farm-live-label,
    .farm-live-sub { height: auto; overflow: visible; text-overflow: clip; white-space: normal; }
    .farm-live-label { min-height: 2.4em; }
    .farm-live-sub { min-height: 1.25em; }
    .farm-live-value { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
    html:not([lang="ko"]) .nav-links a,
    html:not([lang="ko"]) .nav-shop { min-width: 0; }
    html:not([lang="ko"]) .nav-shop span[data-i18n] { min-width: 0; overflow-wrap: anywhere; }

    @media (max-width: 1060px) {
      .language-switcher-label { white-space: nowrap; }
      .nav-links a { white-space: normal; overflow-wrap: anywhere; }
      .footer-links { justify-content: flex-start; }
      .farm-intro-top { gap: 12px; }
      .farm-intro-brand { max-width: calc(100vw - 150px); }
      .farm-intro-brand-name { max-width: calc(100vw - 150px); }
      .farm-intro-season { display: none; }
    }

    @media (max-width: 430px) {
      .farm-intro-brand { max-width: calc(100vw - 132px); }
      .farm-intro-brand-name { max-width: calc(100vw - 132px); font-size: 13px; }
      .farm-live-card { padding: 9px 7px; }
      .farm-live-label { font-size: 9px; line-height: 1.25; }
      .farm-live-sub { font-size: 9px; line-height: 1.3; }
      .copyright { line-height: 1.5; }
    }

    /* Device-width stability pass: protect iPad widths, split-screen layouts, and translated copy. */
    html,
    body,
    .page-shell,
    main,
    .container,
    .nav,
    .brand,
    .nav-links,
    .hero,
    .hero-grid,
    .hero-copy,
    .hero-art,
    .section,
    .section-header,
    .story-grid,
    .values,
    .photo-grid,
    .product-layout,
    .product-list,
    .process-track,
    .guide-layout,
    .guide-grid,
    .service-wrap,
    .footer-top,
    .footer-links { min-width: 0; max-width: 100%; }

    html,
    body { width: 100%; max-width: 100%; overflow-x: hidden; }
    .page-shell,
    main { width: 100%; }
    .container { width: min(calc(100% - 32px), var(--max)); }
    img,
    svg,
    video,
    iframe { max-width: 100%; }
    h1,
    h2,
    h3,
    p,
    .button,
    .channel-link,
    .guide-link,
    .business-action { max-width: 100%; }
    .button,
    .channel-link,
    .guide-link,
    .business-action,
    .nav-links a,
    .nav-shop { overflow-wrap: anywhere; }
    .hero-copy > p,
    .story-intro p,
    .section-header > p,
    .photo-heading p,
    .channel-card p,
    .contact-card p,
    .product-focus-content p,
    .product-item p,
    .process-step p,
    .guide-card p,
    .faq-item p { overflow-wrap: anywhere; }
    .hero-grid > *,
    .story-grid > *,
    .photo-grid > *,
    .product-layout > *,
    .process-track > *,
    .guide-layout > *,
    .service-wrap > *,
    .values > * { min-width: 0; }
    .section-header h2,
    .photo-heading h2,
    .story-intro h3,
    .product-focus-content h3,
    .channel-card h3,
    .contact-card h3 { max-width: 100%; overflow-wrap: anywhere; }
    .channel-link { width: fit-content; }
    .back-top { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

    /* Keep the header controls in one predictable row on iPad; the label becomes part of the control instead of floating over it. */
    @media (min-width: 761px) and (max-width: 1060px) {
      .nav { gap: 12px; }
      .brand { flex: 1 1 auto; max-width: calc(100% - 154px); }
      .brand > .brand-name { max-width: 100%; font-size: clamp(14px, 1.8vw, 16px); }
      .language-switcher {
        align-items: center;
        flex-direction: row;
        gap: 5px;
        margin-top: 0;
        padding: 4px 5px;
      }
      .language-switcher-label {
        position: static;
        max-width: 112px;
        font-size: 9px;
      }
      .language-switcher-label::before { width: 18px; height: 18px; border-radius: 6px; font-size: 8px; }
      .language-switcher select { width: 78px; min-height: 28px; font-size: 10px; }
    }

    /* The 768px iPad portrait range is wide enough for desktop CSS but not wide enough for five tiny columns. */
    @media (min-width: 761px) and (max-width: 1100px) {
      .hero-grid,
      .story-grid,
      .service-wrap,
      .product-layout,
      .guide-layout { grid-template-columns: 1fr; }
      .hero-grid { gap: 34px; }
      .hero-copy { max-width: 720px; }
      .hero-art { min-height: 400px; }
      .product-focus { min-height: 420px; }
      .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .section-header,
      .photo-heading { align-items: flex-start; }
    }

    @media (min-width: 761px) and (max-width: 900px) {
      .signal-row { grid-template-columns: 1fr; gap: 0; }
      .signal { justify-content: flex-start; padding: 8px 3px; }
      .signal + .signal { margin-top: 8px; padding-top: 13px; border-top: 1px solid rgba(128, 177, 119, .22); border-left: 0; }
      .section-header,
      .photo-heading { display: block; margin-bottom: 24px; }
      .section-header h2,
      .photo-heading h2 { margin-bottom: 12px; }
      .guide-grid { grid-template-columns: 1fr; }
      .process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; margin-top: 34px; }
      .process-track::before { display: none; }
      .process-step { padding: 0 10px; }
      .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .address-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
      .address-strip .guide-link { align-self: flex-start; }
    }

    @media (max-width: 760px) {
      .nav { min-height: 70px; gap: 8px; }
      .brand { max-width: calc(100% - 94px); }
      .brand > .brand-name { max-width: 100%; }
      .language-switcher {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
        margin-top: 0;
        padding: 4px;
        border-radius: 12px;
      }
      .language-switcher-label {
        position: static;
        justify-content: center;
        max-width: 88px;
        font-size: 8px;
        line-height: 1.05;
      }
      .language-switcher-label::before { width: 16px; height: 16px; border-radius: 6px; font-size: 7px; }
      .language-switcher select { width: 80px; min-height: 26px; font-size: 10px; }
      .address-strip strong { word-break: normal; overflow-wrap: anywhere; }
      html[lang="ko"] .address-strip strong { word-break: keep-all; }
    }

    @media (max-width: 600px) {
      .farm-live-grid { grid-template-columns: 1fr; gap: 7px; }
      .farm-live-card { display: flex; align-items: center; padding: 10px 9px; }
      .farm-live-icon { margin-bottom: 0; }
      .farm-live-label { min-height: 0; }
      .farm-live-sub { min-height: 0; }
      .season-grid { grid-template-columns: 1fr; }
      .season-card { min-height: 176px; }
      .contact-actions { flex-direction: column; align-items: stretch; }
      .contact-actions .button { width: 100%; }
    }

    @media (max-width: 430px) {
      .brand { max-width: calc(100% - 88px); }
      .brand > .brand-name { font-size: 13px; }
      .language-switcher { width: 82px; }
      .language-switcher-label { max-width: 82px; }
      .language-switcher select { width: 74px; padding-left: 7px; padding-right: 20px; }
      .menu-toggle { width: 40px; height: 40px; }
      .farm-live-info { padding-inline: 10px; }
      .business-row { grid-template-columns: minmax(84px, 31%) minmax(0, 1fr); gap: 8px; }
    }

    /* Landscape tablets and phones can be short: let the farm gate scroll instead of clipping its lower actions. */
    @media (max-height: 700px) and (orientation: landscape) {
      .farm-intro { overflow-y: auto; place-items: start center; }
      .farm-intro-shell { min-height: 100svh; padding: 0; }
      .farm-intro-main { justify-content: center; padding: 0; }
      .farm-intro-kicker { margin-bottom: 8px; }
      .farm-intro-title { margin-bottom: 10px; font-size: clamp(34px, 7.5vw, 60px); }
      .farm-intro-copy { margin-bottom: 14px; line-height: 1.48; }
      .farm-intro-action { min-height: 48px; }
      .farm-intro-note { margin: 0; }
      .farm-intro-trust { display: none; }
    }

    /* Mobile navigation: make the open panel opaque and keep the farm content behind a quiet backdrop. */
    .mobile-nav-backdrop { display: none; }

    @media (max-width: 1060px) {
      body.nav-is-open { overflow: hidden; }
      .topbar { z-index: 100; }
      .nav { position: relative; z-index: 1; }
      .nav-links {
        top: calc(100% + 8px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto;
        max-width: none;
        max-height: calc(100svh - 90px);
        overflow-x: hidden;
        overflow-y: auto;
        border-color: #cfe2cc;
        background: #fff;
        box-shadow: 0 18px 42px rgba(25, 71, 39, .18), 0 2px 0 rgba(255, 255, 255, .95) inset;
        isolation: isolate;
      }
      .nav-links a { min-height: 42px; }
      .mobile-nav-backdrop {
        position: fixed;
        z-index: 90;
        inset: 0;
        display: block;
        border: 0;
        padding: 0;
        background: rgba(19, 54, 31, .12);
        backdrop-filter: blur(2px);
        cursor: pointer;
      }
      .mobile-nav-backdrop[hidden] { display: none; }
    }

    @media (min-width: 1061px) {
      .mobile-nav-backdrop { display: none !important; }
    }

    /* Final cinematic balance: let the chapter list read like a film strip. */
    .farm-intro-shell {
      height: 100vh;
      min-height: 100vh;
      max-height: 100vh;
    }

    .farm-intro-cinema {
      height: 100vh;
      min-height: 100vh;
      max-height: 100vh;
      padding: clamp(104px, 14vh, 154px) clamp(26px, 7vw, 112px) clamp(178px, 21vh, 224px);
    }

    @supports (height: 100dvh) {
      .farm-intro-shell,
      .farm-intro-cinema {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
      }
    }

    .farm-intro-cinema-track {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 7px;
      margin-top: 24px;
    }

    .farm-intro-cinema-item {
      min-height: 42px;
      padding: 7px 8px;
      border-color: rgba(255, 255, 255, .32);
      color: rgba(255, 255, 255, .76);
      background: rgba(7, 43, 24, .25);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
      font-size: clamp(9px, .72vw, 12px);
      line-height: 1.25;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    }

    .farm-intro-cinema-item-number { color: rgba(225, 250, 207, .66); }
    .farm-intro-cinema-item:hover { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .18); }
    .farm-intro-cinema-item.is-active { border-color: rgba(232, 255, 211, .9); background: rgba(47, 135, 80, .92); box-shadow: 0 10px 20px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .22); }

    .farm-intro-cinema-progress { margin-top: 14px; }
    .farm-intro-cinema-note { color: rgba(255, 255, 255, .72); }

    @media (min-width: 901px) and (max-height: 700px) and (orientation: landscape) {
      .farm-intro-cinema {
        padding: 72px 32px 108px;
      }

      .farm-intro-cinema-current { margin-top: 7px; font-size: clamp(32px, 5.5vw, 58px); }
      .farm-intro-cinema-joke { min-height: 2.2em; margin-bottom: 10px; font-size: 13px; }
      .farm-intro-cinema-track { margin-top: 11px; gap: 5px; }
      .farm-intro-cinema-item { min-height: 31px; padding: 5px 4px; font-size: 9px; }
      .farm-intro-cinema-progress { margin-top: 8px; }
      .farm-intro-cinema-note { margin-top: 6px; font-size: 9px; }
    }

    @media (max-width: 920px) {
      .farm-intro-cinema-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
      .farm-intro {
        place-items: start center;
        overflow-y: auto;
      }

      .farm-intro-shell {
        height: auto;
        min-height: 100vh;
        max-height: none;
      }

      .farm-intro-cinema {
        height: auto;
        min-height: 100vh;
        max-height: none;
        padding: 96px 20px 170px;
      }

      @supports (height: 100svh) {
        .farm-intro-shell,
        .farm-intro-cinema { min-height: 100svh; }
      }

      .farm-intro-cinema-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 18px; }
      .farm-intro-cinema-item { min-height: 34px; padding: 6px 7px; font-size: 10px; text-align: left; }
    }

    /* Localized brand lockup: no ellipsis or duplicate-looking subtitle. */
    .page-shell .brand {
      flex: 0 1 auto;
      max-width: min(100%, 285px);
      padding: 4px 9px 4px 4px;
      border: 1px solid rgba(47, 109, 75, .12);
      border-radius: 18px;
      background: rgba(255, 255, 255, .42);
      box-shadow: 0 7px 18px rgba(38, 89, 49, .06), inset 0 1px 0 rgba(255, 255, 255, .8);
      backdrop-filter: blur(10px);
    }

    .farm-intro-brand {
      flex: 0 1 auto;
      max-width: min(100%, 330px);
      padding: 6px 13px 6px 6px;
      border: 1px solid rgba(255, 255, 255, .28);
      border-radius: 21px;
      background: rgba(4, 30, 17, .34);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .13);
      backdrop-filter: blur(12px);
    }

    .page-shell .brand-name,
    .farm-intro-brand-name {
      max-width: 235px;
      overflow: visible;
      white-space: normal;
      line-height: 1.08;
    }

    .page-shell .brand-name > span:first-child,
    .farm-intro-brand-name > span:first-child,
    .page-shell .brand-name small,
    .farm-intro-brand-name small {
      max-width: 100%;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: normal;
      word-break: keep-all;
    }

    .page-shell .brand-name small,
    .farm-intro-brand-name small {
      margin-top: 2px;
      letter-spacing: .05em;
      line-height: 1.15;
      text-transform: none;
    }

    .page-shell .brand-name small { color: #3e6b47; }
    .farm-intro-brand-name small { color: rgba(255, 255, 255, .78); }

    /* The lower line is the fixed Latin brand lockup; only the upper name is localized. */
    .brand-name .brand-subtitle,
    .farm-intro-brand-name .brand-subtitle {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: clip;
      white-space: nowrap;
      letter-spacing: .08em;
      line-height: 1.1;
      text-transform: uppercase;
    }

    @media (max-width: 1060px) {
      .page-shell .brand { max-width: calc(100% - 154px); }
      .page-shell .brand-name,
      .farm-intro-brand-name { max-width: 100%; }
    }

    @media (max-width: 760px) {
      .page-shell .brand { padding: 4px 7px 4px 3px; border-radius: 15px; }
      .farm-intro-brand { padding: 5px 8px 5px 5px; border-radius: 18px; }
      .page-shell .brand-name,
      .farm-intro-brand-name { font-size: clamp(12px, 3.4vw, 15px); }
      .page-shell .brand-name small,
      .farm-intro-brand-name small { font-size: 7px; letter-spacing: .03em; }
    }

    @media (max-width: 430px) {
      .page-shell .brand { max-width: calc(100% - 88px); }
      .page-shell .brand-name,
      .farm-intro-brand-name { font-size: 12px; }
      .page-shell .brand-name small,
      .farm-intro-brand-name small { font-size: 6px; }
    }

    /* Final natural-rhythm pass: one stage, one visual language, quieter motion. */
    :root {
      --radius-xl: 28px;
      --radius-lg: 21px;
      --radius-md: 15px;
    }

    body {
      background:
        radial-gradient(circle at 8% 17%, rgba(175, 221, 155, .08) 0 1px, transparent 1.5px) 0 0 / 28px 28px,
        var(--bg);
    }

    .page-shell .brand {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .farm-intro-brand {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      text-shadow: 0 2px 13px rgba(0, 0, 0, .24);
    }

    .farm-intro-brand-mark,
    .brand-mark { transform: none; }
    .brand:hover .brand-mark { transform: translateY(-2px); }

    /* The cinema is the viewport itself. The old nested 100svh flex item caused
       blank tails and made the page underneath peek through during release. */
    .farm-intro-shell {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      display: block;
    }

    .farm-intro-main {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      min-height: 0;
      display: block;
      padding: 0;
    }

    .farm-intro-cinema {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      max-height: none;
      padding: clamp(112px, 16vh, 166px) clamp(22px, 7vw, 108px) clamp(136px, 18vh, 190px);
      border-radius: 0;
      box-shadow: none;
      animation: farm-cinema-settle .9s cubic-bezier(.22, 1, .36, 1) both;
    }

    .farm-intro-cinema::after {
      background:
        linear-gradient(180deg, rgba(8, 43, 24, .12) 0%, rgba(8, 43, 24, .06) 36%, rgba(8, 39, 22, .78) 100%),
        linear-gradient(105deg, rgba(255, 255, 255, .12), transparent 48%, rgba(223, 247, 200, .1));
    }

    .farm-intro-cinema-curtain { animation-duration: .9s; }
    .farm-intro-cinema-current {
      max-width: 780px;
      font-size: clamp(38px, 6.35vw, 78px);
      letter-spacing: -.065em;
    }

    .farm-intro-cinema-track {
      display: flex;
      gap: 7px;
      max-width: 100%;
      margin-top: 21px;
      padding-bottom: 2px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .farm-intro-cinema-track::-webkit-scrollbar { display: none; }
    .farm-intro-cinema-item {
      flex: 1 0 0;
      min-width: 94px;
      min-height: 38px;
      border-radius: 12px;
      font-size: clamp(9px, .68vw, 11px);
    }

    .farm-intro-cinema-progress { height: 3px; margin-top: 13px; }
    .farm-intro-cinema-note { margin-top: 8px; }
    .farm-intro-cinema.is-scene-changing::before {
      animation: farm-cinema-scene-in .72s cubic-bezier(.22, 1, .36, 1) both, farm-cinema-bg-push 8s .72s ease-in-out infinite alternate;
    }

    @keyframes farm-cinema-settle {
      from { opacity: 0; transform: scale(1.018); filter: brightness(.84) saturate(.86); }
      to { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
    }

    body.intro-locked .page-shell {
      visibility: hidden;
      opacity: 0;
      filter: none;
      transform: translate3d(0, 14px, 0) scale(1.008);
      pointer-events: none;
    }

    body.intro-releasing .page-shell {
      visibility: visible;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .hero-art { border-radius: 30px; }
    .hero-badge { border-radius: 15px; }
    .hero-sticker { border-radius: 12px; box-shadow: 0 8px 18px rgba(54, 88, 62, .1); }
    .hero-sticker,
    .farm-sun-glow,
    .farm-leaf-float,
    .farm-pollen { animation-duration: 9s; }

    .signal-row { border-radius: 20px; }
    .signal-row::before { opacity: .55; animation-duration: 18s; }
    .signal-row::after { opacity: .55; }
    .value-card,
    .photo-card,
    .season-card,
    .channel-card,
    .contact-card,
    .business { border-radius: 22px; }

    .value-card::after,
    .contact-card::before,
    footer::before { opacity: .52; animation-duration: 18s; }
    .photo-card::before { font-size: 36px; opacity: .72; animation-duration: 14s; }
    .season-card::before { right: 15px; bottom: 26px; font-size: 58px; opacity: .65; animation-duration: 16s; }
    .season-card:hover,
    .channel-card:hover,
    .photo-card:hover,
    .value-card:hover { transform: translateY(-3px); }
    .season-card:hover .season-emoji { transform: translateY(-2px) rotate(3deg); }
    .channel-card::before { top: 25px; right: 28px; font-size: 50px; opacity: .64; }

    .process-icon { animation-duration: 8s; }

    @media (max-width: 760px) {
      .farm-intro-cinema {
        padding: 94px 20px 166px;
      }

      .farm-intro-cinema-track { gap: 6px; margin-top: 17px; }
      .farm-intro-cinema-item { flex: 0 0 116px; min-width: 116px; min-height: 35px; }
      .farm-intro-cinema-current { font-size: clamp(34px, 10.5vw, 58px); }
      .hero-art { border-radius: 25px; }
      .value-card,
      .photo-card,
      .season-card,
      .channel-card,
      .contact-card,
      .business { border-radius: 19px; }
      .season-card:hover,
      .channel-card:hover,
      .photo-card:hover,
      .value-card:hover { transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .farm-intro-cinema,
      .farm-intro-cinema::before,
      .farm-intro-cinema::after,
      .farm-intro-cinema-curtain { animation: none !important; }
    }

    /* Final mobile language-control check: keep the translated label inside the control. */
    @media (max-width: 760px) {
      .farm-intro-language-control {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
        width: 88px;
        margin-top: 0;
        padding: 4px;
        border-radius: 12px;
      }
      .farm-intro-language-label {
        position: static;
        justify-content: center;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
      }
      .farm-intro-language { width: 78px; min-height: 26px; }

      .language-switcher-label {
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
      }
      .language-switcher { width: 88px; }
      .language-switcher select { width: 78px; }
    }

    @media (max-width: 430px) {
      .farm-intro-language-control,
      .language-switcher { width: 84px; }
      .farm-intro-language,
      .language-switcher select { width: 74px; }
    }

    /* Whole-page visual finish: turn repeated text blocks into small farm notes. */
    .section-header,
    .photo-heading {
      position: relative;
    }

    .section-header::after,
    .photo-heading::after {
      content: "";
      position: absolute;
      z-index: 0;
      top: -10px;
      right: 0;
      width: 78px;
      height: 42px;
      border-top: 1px solid rgba(89, 153, 79, .24);
      border-right: 1px solid rgba(89, 153, 79, .24);
      border-radius: 0 30px 0 0;
      opacity: .8;
      pointer-events: none;
    }

    .section-header::before,
    .photo-heading::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -5px;
      right: 13px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #8bbb70;
      box-shadow: 13px 4px 0 #e7bf59, 26px -2px 0 #94b9d6;
      opacity: .72;
      pointer-events: none;
    }

    .section-header > *,
    .photo-heading > * {
      position: relative;
      z-index: 1;
    }

    .story-intro,
    .value-card,
    .photo-card,
    .product-focus,
    .product-item,
    .season-card,
    .channel-card,
    .guide-card,
    .faq-panel,
    .address-strip,
    .contact-card,
    .business {
      isolation: isolate;
    }

    .story-intro {
      border-left: 4px solid #8bc66f;
      box-shadow: 0 22px 45px rgba(23, 72, 37, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .story-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      padding: 5px 9px;
      border: 1px solid rgba(218, 245, 204, .28);
      border-radius: 999px;
      background: rgba(4, 40, 20, .22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .story-label::before {
      content: "✦";
      color: #f5cf6a;
      font-size: 12px;
      line-height: 1;
    }

    .story-intro h3::after,
    .value-card h3::after,
    .product-item h3::after,
    .process-step h3::after,
    .guide-card h3::after,
    .channel-card h3::after {
      content: "";
      display: block;
      width: 30px;
      height: 3px;
      margin-top: 12px;
      border-radius: 99px;
      background: #a5d382;
    }

    .story-intro h3::after { background: #f4d16d; }
    .product-item:nth-child(2) h3::after { background: #e8bd63; }
    .product-item:nth-child(3) h3::after { background: #8dbbd5; }
    .process-step:nth-child(2) h3::after { background: #e8c36b; }
    .process-step:nth-child(3) h3::after { background: #8eb8d2; }
    .process-step:nth-child(4) h3::after { background: #d69b73; }
    .process-step:nth-child(5) h3::after { background: #83bd9a; }
    .guide-card:nth-child(2) h3::after { background: #e8c36b; }
    .guide-card:nth-child(3) h3::after { background: #8eb8d2; }
    .channel-card.store h3::after { background: #d8b873; }

    .story-signature {
      position: relative;
      padding-top: 15px;
      border-top: 1px dashed rgba(231, 245, 222, .38);
    }

    .value-card {
      border-top: 3px solid #94c978;
      box-shadow: 0 12px 28px rgba(38, 73, 52, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .value-card:nth-child(2) { border-top-color: #e7bb5e; }
    .value-card:nth-child(3) { border-top-color: #8dbbd0; }
    .value-card h3::after { margin-top: 9px; height: 2px; }
    .value-card p { max-width: 31em; }

    .photo-card::before {
      padding: 7px 9px;
      border: 1px solid rgba(255, 255, 255, .42);
      border-radius: 11px;
      background: rgba(20, 68, 34, .18);
      backdrop-filter: blur(7px);
    }

    .photo-caption {
      padding-top: 13px;
      border-top: 1px solid rgba(255, 255, 255, .35);
    }

    .product-focus {
      box-shadow: 0 22px 48px rgba(22, 70, 36, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .product-focus::before {
      content: "";
      position: absolute;
      z-index: 1;
      right: 25px;
      bottom: 25px;
      width: 122px;
      height: 122px;
      border: 1px solid rgba(239, 255, 224, .34);
      border-radius: 50%;
      box-shadow: 0 0 0 14px rgba(239, 255, 224, .08), 0 0 0 28px rgba(239, 255, 224, .045);
      pointer-events: none;
    }

    .product-item {
      border-left: 4px solid #9bcf7f;
      box-shadow: 0 12px 26px rgba(38, 73, 52, .065), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .product-item:nth-child(2) { border-left-color: #e4ba62; }
    .product-item:nth-child(3) { border-left-color: #8bb6d1; }

    .process-step {
      padding-top: 7px;
    }

    .process-head {
      position: relative;
      min-height: 63px;
    }

    .process-head::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 92px;
      height: 72px;
      border: 1px dashed rgba(107, 171, 91, .34);
      border-radius: 48% 52% 44% 56%;
      background: rgba(234, 247, 227, .55);
      transform: translate(-50%, -50%) rotate(-8deg);
      pointer-events: none;
    }

    .process-step:nth-child(2) .process-head::before { border-color: rgba(225, 174, 79, .4); background: rgba(255, 244, 217, .64); }
    .process-step:nth-child(3) .process-head::before { border-color: rgba(116, 164, 199, .36); background: rgba(237, 245, 252, .7); }
    .process-step:nth-child(4) .process-head::before { border-color: rgba(206, 132, 83, .34); background: rgba(255, 241, 228, .68); }
    .process-step:nth-child(5) .process-head::before { border-color: rgba(104, 167, 132, .34); background: rgba(233, 245, 239, .68); }
    .process-head > * { position: relative; z-index: 1; }
    .process-step h3::after { margin: 9px auto 0; height: 2px; }

    .season-card {
      border-top: 3px solid #9bcf7f;
      box-shadow: 0 11px 24px rgba(43, 89, 49, .06);
    }

    .season-card:nth-child(2) { border-top-color: #76bd77; }
    .season-card:nth-child(3) { border-top-color: #d9ad54; }
    .season-card:nth-child(4) { border-top-color: #7ab29d; }

    .season-emoji {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(91, 151, 78, .18);
      border-radius: 16px 16px 16px 6px;
      background: rgba(255, 255, 255, .58);
      box-shadow: 0 6px 13px rgba(56, 109, 55, .07);
    }

    .season-card:nth-child(2) .season-emoji { border-color: rgba(82, 153, 92, .2); background: rgba(255, 255, 255, .52); }
    .season-card:nth-child(3) .season-emoji { border-color: rgba(191, 145, 56, .2); background: rgba(255, 255, 255, .56); }
    .season-card:nth-child(4) .season-emoji { border-color: rgba(73, 132, 111, .2); background: rgba(255, 255, 255, .56); }
    .season-card h3::after { content: ""; display: block; width: 26px; height: 2px; margin-top: 8px; border-radius: 99px; background: #8ec274; }
    .season-card:nth-child(2) h3::after { background: #71b878; }
    .season-card:nth-child(3) h3::after { background: #d3a64d; }
    .season-card:nth-child(4) h3::after { background: #78ae99; }

    .channel-card {
      box-shadow: 0 17px 34px rgba(38, 73, 52, .09), inset 0 1px 0 rgba(255, 255, 255, .66);
    }

    .channel-kicker {
      width: fit-content;
      padding: 5px 8px 5px 5px;
      border: 1px solid rgba(47, 109, 75, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .46);
    }

    .channel-card.store .channel-kicker { border-color: rgba(117, 99, 67, .14); background: rgba(255, 255, 255, .52); }
    .channel-card h3::after { margin-top: 10px; height: 2px; }

    .guide-card {
      position: relative;
      overflow: hidden;
      border-left: 4px solid #98ca7c;
      box-shadow: 0 12px 27px rgba(38, 73, 52, .07), inset 0 1px 0 rgba(255, 255, 255, .92);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .guide-card::before {
      content: attr(data-guide);
      position: absolute;
      z-index: 0;
      top: 10px;
      right: 16px;
      color: rgba(70, 143, 72, .14);
      font-family: "Pretendard", sans-serif;
      font-size: 42px;
      font-weight: 900;
      letter-spacing: -.1em;
      line-height: 1;
      pointer-events: none;
    }

    .guide-card::after {
      content: "";
      position: absolute;
      right: -30px;
      bottom: -44px;
      width: 105px;
      height: 105px;
      border: 14px solid rgba(113, 181, 96, .1);
      border-radius: 50%;
      pointer-events: none;
    }

    .guide-card:nth-child(2) { border-left-color: #e3b85e; }
    .guide-card:nth-child(2)::before { color: rgba(183, 137, 52, .16); }
    .guide-card:nth-child(2)::after { border-color: rgba(226, 174, 74, .12); }
    .guide-card:nth-child(3) { border-left-color: #8cb8d0; }
    .guide-card:nth-child(3)::before { color: rgba(89, 140, 174, .15); }
    .guide-card:nth-child(3)::after { border-color: rgba(102, 161, 193, .12); }
    .guide-card > * { position: relative; z-index: 1; }
    .guide-card:hover { transform: translateY(-4px); box-shadow: 0 18px 33px rgba(38, 73, 52, .11); }
    .guide-card h3::after { margin-top: 9px; height: 2px; }

    .address-strip {
      position: relative;
      overflow: hidden;
      border-left: 4px solid #8ac373;
      box-shadow: 0 11px 24px rgba(38, 73, 52, .06);
    }

    .address-strip::before {
      content: "";
      position: absolute;
      right: 147px;
      bottom: -36px;
      width: 112px;
      height: 112px;
      border: 14px solid rgba(111, 180, 94, .1);
      border-radius: 50%;
      pointer-events: none;
    }

    .address-strip > * { position: relative; z-index: 1; }

    .farm-live-info {
      position: relative;
      overflow: hidden;
      border-left: 4px solid #8bc66f;
      box-shadow: 0 18px 38px rgba(38, 89, 49, .12), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .farm-live-info::before {
      content: "";
      position: absolute;
      top: -64px;
      right: -20px;
      width: 170px;
      height: 170px;
      border: 16px solid rgba(115, 187, 101, .1);
      border-radius: 50%;
      pointer-events: none;
    }

    .farm-live-head,
    .farm-live-grid,
    .farm-live-status { position: relative; z-index: 1; }
    .farm-live-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
    .farm-live-card:hover { transform: translateY(-2px); border-color: rgba(100, 170, 92, .4); box-shadow: 0 9px 18px rgba(57, 112, 65, .08); }
    .farm-live-value { text-wrap: balance; }

    .contact-card {
      box-shadow: 0 22px 46px rgba(47, 109, 75, .2), inset 0 1px 0 rgba(255, 255, 255, .14);
    }

    .contact-card .contact-actions {
      padding-top: 15px;
      border-top: 1px dashed rgba(255, 255, 255, .26);
    }

    .business {
      box-shadow: 0 16px 34px rgba(38, 73, 52, .09), inset 0 1px 0 rgba(255, 255, 255, .92);
    }

    .business-list {
      padding-top: 13px;
    }

    .business-row {
      border-left: 3px solid transparent;
    }

    .business-row:nth-child(1) { border-left-color: #8cc574; }
    .business-row:nth-child(2) { border-left-color: #e3b55d; }
    .business-row:nth-child(3) { border-left-color: #86acd0; }
    .business-row:nth-child(4) { border-left-color: #d28f66; }
    .business-row:nth-child(5) { border-left-color: #969fd0; }
    .business-row:nth-child(6) { border-left-color: #85b879; }
    .business-actions {
      padding-top: 14px;
      border-top: 1px dashed #d7e9d1;
    }

    footer {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .footer-top {
      padding-bottom: 22px;
      border-bottom: 1px dashed rgba(92, 147, 82, .28);
    }

    .footer-links a:not(.footer-blog-link) {
      padding: 4px 0;
      border-bottom: 1px solid transparent;
    }

    .footer-links a:not(.footer-blog-link):hover { border-bottom-color: rgba(51, 130, 75, .35); }

    @media (max-width: 760px) {
      .section-header::after,
      .photo-heading::after { top: -7px; width: 58px; height: 30px; }
      .section-header::before,
      .photo-heading::before { right: 7px; }
      .story-intro h3::after,
      .value-card h3::after,
      .product-item h3::after,
      .process-step h3::after,
      .guide-card h3::after,
      .channel-card h3::after { margin-top: 9px; }
      .process-head { min-height: 58px; }
      .process-head::before { width: 82px; height: 66px; }
      .process-step h3::after { margin-right: 0; margin-left: 0; }
      .guide-card:hover,
      .farm-live-card:hover { transform: none; }
      .address-strip::before { right: -26px; bottom: -48px; }
      .footer-top { padding-bottom: 18px; }
    }

    @media (max-width: 430px) {
      .season-emoji { width: 40px; height: 40px; border-radius: 14px 14px 14px 5px; font-size: 24px; }
      .guide-card::before { top: 8px; right: 12px; font-size: 35px; }
      .farm-live-card { min-height: 74px; padding: 11px 10px; }
      .farm-live-value { font-size: clamp(18px, 6vw, 24px); }
      .farm-live-label { font-size: 10px; }
      .farm-live-sub { font-size: 9px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .guide-card,
      .farm-live-card { transition: none !important; }
      .guide-card:hover,
      .farm-live-card:hover { transform: none; }
    }

    /* Safe-area finish: keep controls clear of iPad/iPhone browser cutouts. */
    .farm-intro-top {
      top: max(clamp(18px, 3.5vw, 38px), env(safe-area-inset-top));
    }

    .farm-intro-bottom {
      bottom: max(18px, env(safe-area-inset-bottom));
    }

    .topbar {
      padding-top: env(safe-area-inset-top);
    }

    /* Design correction v76: one quieter, clearer farm system across the page. */
    :root {
      --farm-mint: #e7f5df;
      --farm-mint-strong: #cfe8c5;
      --farm-line: #d4e8cf;
      --farm-sun: #f0c95f;
      --farm-sky: #a9c9d8;
    }

    /* Keep the language control readable on medium desktop widths. The old
       floating label could sit on top of the select when a translation grew. */
    @media (min-width: 1061px) and (max-width: 1360px) {
      .language-switcher {
        align-items: center;
        flex-direction: row;
        gap: 5px;
        margin-top: 0;
        padding: 4px 5px;
      }

      .language-switcher-label {
        position: static;
        max-width: 108px;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        line-height: 1.1;
        text-align: center;
      }

      .language-switcher-label::before {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        font-size: 8px;
      }
    }

    .topbar {
      box-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 8px 24px rgba(37, 88, 49, .035);
    }

    .nav-links a {
      position: relative;
      transition: color .2s ease, transform .2s ease;
    }

    .nav-links a:hover { transform: translateY(-1px); }
    .nav-links a.is-active:not(.nav-intro)::after { bottom: -11px; height: 2px; }

    /* Make the live data feel like a useful farm dashboard, not a small
       afterthought under the hero image. */
    .farm-live-info {
      margin-top: 38px;
      padding: 23px 25px 19px;
      border: 1px solid var(--farm-line);
      border-top: 4px solid #8bc66f;
      border-left-width: 1px;
      border-radius: 25px;
      background: linear-gradient(116deg, rgba(255, 255, 255, .96) 0%, rgba(250, 254, 247, .94) 52%, rgba(235, 247, 227, .9) 100%);
      box-shadow: 0 20px 42px rgba(38, 89, 49, .1), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .farm-live-head {
      margin-bottom: 17px;
      padding-bottom: 14px;
      border-bottom: 1px dashed #cfe4c9;
    }

    .farm-live-kicker {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      margin-bottom: 5px;
      padding: 4px 9px;
      border: 1px solid #cfe5c8;
      border-radius: 999px;
      background: var(--farm-mint);
      letter-spacing: .06em;
    }

    .farm-live-title { font-size: clamp(20px, 2.2vw, 26px); }

    .farm-live-refresh {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 5px 12px rgba(38, 89, 49, .06);
    }

    .farm-live-grid { gap: 14px; }

    .farm-live-card {
      min-height: 96px;
      gap: 13px;
      padding: 16px 17px;
      border: 1px solid #d5e9cf;
      border-radius: 20px;
      background: rgba(255, 255, 255, .82);
      box-shadow: 0 8px 18px rgba(38, 89, 49, .045), inset 0 1px 0 rgba(255, 255, 255, .98);
    }

    .farm-live-card:nth-child(2) { background: rgba(248, 251, 255, .88); }
    .farm-live-card:nth-child(3) { background: rgba(255, 253, 244, .9); }

    .farm-live-icon {
      width: 46px;
      height: 46px;
      flex-basis: 46px;
      border-radius: 15px 15px 15px 6px;
      box-shadow: inset 0 -3px 0 rgba(71, 130, 66, .07);
      font-size: 22px;
    }

    .farm-live-label { color: #347148; font-size: 12px; font-weight: 850; }
    .farm-live-value { font-size: clamp(23px, 2.35vw, 31px); }
    .farm-live-sub { color: #477654; font-size: 12px; }
    .farm-live-status { margin-top: 14px; padding-left: 2px; color: #39704a; }

    /* Replace the unrelated purple/blue business accents with a small farm
       palette so the operating card feels intentional rather than assembled. */
    .business-row:nth-child(3) { border-left-color: #83b994; }
    .business-row:nth-child(4) { border-left-color: #e2b65b; }
    .business-row:nth-child(5) { border-left-color: #9cc58c; }
    .business-row:nth-child(3) dt::before { background: #73ad88; box-shadow: 0 0 0 4px rgba(115, 173, 136, .14); }
    .business-row:nth-child(4) dt::before { background: #e5b454; box-shadow: 0 0 0 4px rgba(229, 180, 84, .15); }
    .business-row:nth-child(5) dt::before { background: #8ebd7d; box-shadow: 0 0 0 4px rgba(142, 189, 125, .14); }
    .business-row:hover { transform: none; }

    .business-heading .business-subtitle {
      max-width: 100%;
      overflow-wrap: anywhere;
      letter-spacing: .1em;
      line-height: 1.3;
    }

    .business-row dt {
      min-width: 0;
      white-space: normal;
      line-height: 1.35;
    }

    .business-actions {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
      gap: 8px;
    }

    .business-action {
      min-width: 0;
      min-height: 39px;
      padding: 6px 9px;
      line-height: 1.25;
      text-align: center;
      text-wrap: balance;
    }

    /* FAQ rows get a clearer open state while keeping the page light. */
    .faq-item summary {
      border-radius: 12px;
      transition: padding .22s ease, background .22s ease;
    }

    .faq-item summary:hover { padding-inline: 8px; background: rgba(239, 249, 234, .7); }
    .faq-item[open] summary { padding-inline: 8px; color: var(--green-deep); background: rgba(232, 246, 225, .78); }
    .faq-item p { margin-right: 8px; border-left-width: 4px; background: rgba(225, 244, 217, .78); }

    .photo-section {
      background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(240, 249, 235, .58));
    }

    .photo-heading { padding-top: 2px; }

    .footer-links { row-gap: 9px; }
    .footer-links a:not(.footer-blog-link) { border-radius: 7px; }

    @media (max-width: 980px) {
      .farm-live-info { margin-top: 32px; }
    }

    @media (max-width: 760px) {
      .farm-live-info {
        margin-top: 28px;
        padding: 18px 16px 15px;
        border-top-width: 3px;
        border-radius: 22px;
      }

      .farm-live-head { margin-bottom: 13px; padding-bottom: 12px; }
      .farm-live-title { font-size: 20px; }
      .farm-live-refresh { width: 38px; height: 38px; }
      .farm-live-card { min-height: 82px; padding: 13px 12px; border-radius: 17px; }
      .farm-live-icon { width: 40px; height: 40px; flex-basis: 40px; font-size: 20px; }
      .farm-live-label { font-size: 11px; }
      .farm-live-value { font-size: 24px; }
      .farm-live-sub { font-size: 11px; }
      .business-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .business-action { min-height: 37px; padding-inline: 6px; font-size: 11px; }
      .faq-item summary:hover,
      .faq-item[open] summary { padding-inline: 4px; }
    }

    @media (max-width: 600px) {
      .container { width: min(calc(100% - 28px), var(--max)); }
      .farm-live-grid { gap: 8px; }
      .business-actions { gap: 6px; }
    }

    @media (max-width: 430px) {
      .farm-live-info { padding-inline: 12px; }
      .farm-live-card { min-height: 78px; padding: 11px 10px; }
      .farm-live-icon { width: 38px; height: 38px; flex-basis: 38px; }
      .farm-live-value { font-size: 22px; }
      .business-action { font-size: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-links a,
      .farm-live-card,
      .faq-item summary { transition: none !important; }
      .nav-links a:hover { transform: none; }
    }

    /* Final single-line rhythm: short UI copy stays together on wide screens.
       Long explanations remain readable paragraphs, and narrow screens may wrap safely. */
    @media (min-width: 761px) {
      .nav-links a,
      .nav-shop,
      .nav-shop span,
      .language-switcher select,
      .button,
      .channel-link,
      .guide-link,
      .business-action,
      .footer-links a,
      .signal strong,
      .signal span,
      .season-number,
      .product-item-tag,
      .product-item-number,
      .process-number,
      .business-heading h3,
      .business-subtitle,
      .business-row dt,
      .business-row dd,
      .address-label,
      .address-strip strong,
      .faq-question,
      .farm-live-kicker,
      .farm-live-title,
      .farm-live-label,
      .farm-live-value,
      .farm-live-sub,
      .farm-live-status {
        white-space: nowrap;
        overflow-wrap: normal;
      }

      .business-list { --business-label-width: max-content; }
      .business-row { grid-template-columns: max-content minmax(0, 1fr); }
      .farm-intro-cinema-item { flex: 0 0 auto; min-width: max-content; }
      .farm-intro-cinema-item-label { white-space: nowrap; overflow-wrap: normal; }
    }

    @media (max-width: 760px) {
      .business-row dt,
      .business-row dd,
      .faq-question,
      .address-strip strong { white-space: normal; overflow-wrap: anywhere; }
      .farm-live-label,
      .farm-live-value,
      .farm-live-sub,
      .farm-live-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    }

    /* Korean subpage type pairing:
       Cafe24 Ssurround for short/display copy, Pretendard for long reading copy. */
    html[lang="ko"] .nav-links,
    html[lang="ko"] .nav-shop,
    html[lang="ko"] .button,
    html[lang="ko"] .eyebrow,
    html[lang="ko"] .hero-note,
    html[lang="ko"] .hero-sticker,
    html[lang="ko"] .signal strong,
    html[lang="ko"] .story-label,
    html[lang="ko"] .story-signature,
    html[lang="ko"] .season-number,
    html[lang="ko"] .channel-kicker,
    html[lang="ko"] .channel-link,
    html[lang="ko"] .business-heading h3,
    html[lang="ko"] .business-heading .business-subtitle,
    html[lang="ko"] .business-row dt,
    html[lang="ko"] .business-action,
    html[lang="ko"] .footer-brand,
    html[lang="ko"] .footer-links,
    html[lang="ko"] .faq-heading,
    html[lang="ko"] .faq-item summary,
    html[lang="ko"] .farm-live-kicker,
    html[lang="ko"] .farm-live-title,
    html[lang="ko"] .farm-live-label,
    html[lang="ko"] .farm-live-value,
    html[lang="ko"] .farm-intro-brand-name,
    html[lang="ko"] .farm-intro-kicker,
    html[lang="ko"] .farm-intro-title,
    html[lang="ko"] .farm-intro-cinema-current,
    html[lang="ko"] .farm-intro-cinema-joke,
    html[lang="ko"] .farm-intro-cinema-note,
    html[lang="ko"] .farm-intro-cinema-item-label,
    html[lang="ko"] .farm-intro-language-label {
      font-family: var(--ko-display-font);
    }

    /* Tablet-landscape balance: keep the hero in two columns when the
       viewport is wide enough in proportion, even if its CSS width is under
       the general 980px stacking breakpoint. Portrait tablets stay stacked. */
    @media (min-width: 761px) and (max-width: 1060px) and (min-aspect-ratio: 1/1) {
      .hero { padding: 44px 0 34px; }
      .hero-grid {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 28px;
      }

      .hero-copy { min-width: 0; }
      h1 {
        max-width: 100%;
        font-size: clamp(34px, 5.1vw, 52px);
        line-height: 1.08;
      }

      .hero-copy > p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.65;
      }

      .hero-actions { gap: 8px; }
      .hero-actions .button {
        min-height: 44px;
        padding-inline: 13px;
        font-size: 13px;
      }

      .hero-art {
        min-height: clamp(300px, 39vw, 380px);
        border-radius: 28px;
      }

      .hero-badge {
        top: 19px;
        left: 19px;
        padding: 11px 13px;
      }

      .hero-sticker {
        padding: 8px 10px;
        font-size: 10px;
      }

      .sticker-one { bottom: 92px; left: 20px; }
      .sticker-two { right: 20px; bottom: 92px; }
      .sticker-three { bottom: 20px; left: 25px; }
    }

    /* Header stability pass: keep the desktop row deterministic at the
       narrow-desktop breakpoint. The previous flex row let the brand,
       translated nav labels, language control, and shop CTA compete for
       width, which made the header drift or clip at special ratios. */
    @media (min-width: 1061px) {
      .nav {
        display: grid;
        grid-template-columns: minmax(180px, 190px) minmax(0, 1fr) max-content max-content;
        gap: 12px;
        justify-content: normal;
      }

      .brand {
        width: 100%;
        max-width: 100%;
      }

      .nav-links {
        min-width: 0;
        width: 100%;
        margin-left: 0;
        gap: clamp(5px, .55vw, 10px);
        overflow: hidden;
      }

      .nav-links a {
        min-width: 0;
        flex: 0 1 auto;
        white-space: nowrap;
      }

      .language-switcher,
      .language-switcher select,
      .nav-shop {
        min-width: 0;
        max-width: 100%;
      }

      .nav-shop { white-space: nowrap; }
    }

    /* Give the 1061–1200px range a little more breathing room without
       removing any navigation item or changing the selected-language layout. */
    @media (min-width: 1061px) and (max-width: 1200px) {
      .nav {
        grid-template-columns: minmax(170px, 182px) minmax(0, 1fr) max-content max-content;
        gap: 8px;
      }

      .brand { gap: 8px; }
      .brand > .brand-mark { flex-basis: 38px; width: 38px; height: 38px; }
      .brand > .brand-name { font-size: 15px; }
      .brand > .brand-name small { font-size: 7px; letter-spacing: .045em; }
      .nav-links { gap: 4px; font-size: 10.5px; }
      .nav-links a { gap: 3px; }
      .nav-emoji { width: 18px; height: 18px; flex-basis: 18px; border-radius: 7px; font-size: 10px; }
      .language-switcher { gap: 4px; padding-inline: 4px; }
      .language-switcher-label { gap: 4px; font-size: 9px; }
      .language-switcher-label::before { width: 18px; height: 18px; border-radius: 7px; font-size: 8px; }
      .language-switcher select { width: 74px; padding-inline: 7px 20px; font-size: 10px; }
      .nav-shop { gap: 4px; padding-inline: 10px; font-size: 10.5px; }
      .nav-shop-emoji { font-size: 13px; }
    }

    /* Do not squeeze or crop translated navigation in the narrow-desktop /
       landscape-tablet range. Use the same complete menu panel as mobile,
       while leaving the brand and language control visible in the bar. */
    @media (min-width: 761px) and (max-width: 1340px) {
      body.nav-is-open { overflow: hidden; }
      .topbar { z-index: 100; }

      .nav {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content max-content;
        gap: 10px;
        min-height: 64px;
      }

      .brand {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .brand > .brand-name { max-width: 100%; }

      .nav-links {
        position: absolute;
        z-index: 20;
        top: calc(100% + 8px);
        right: 12px;
        left: 12px;
        display: none;
        width: auto;
        max-width: none;
        max-height: calc(100svh - 90px);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid #cfe2cc;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(25, 71, 39, .18), 0 2px 0 rgba(255, 255, 255, .95) inset;
        isolation: isolate;
      }

      .nav-links.is-open { display: flex; }
      .nav-links a { min-height: 42px; padding: 10px 13px; border-radius: 11px; white-space: normal; overflow-wrap: anywhere; }
      .nav-links a:hover { background: var(--surface-soft); }

      .language-switcher {
        grid-column: 2;
        flex: 0 0 auto;
        margin-top: 0;
      }

      .nav-shop { display: none; }

      .menu-toggle {
        grid-column: 3;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid #d6e2d7;
        border-radius: 13px;
        color: var(--green);
        background: #fff;
        cursor: pointer;
      }

      .menu-toggle span,
      .menu-toggle span::before,
      .menu-toggle span::after {
        display: block;
        width: 17px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .2s ease;
      }

      .menu-toggle span { position: relative; }
      .menu-toggle span::before,
      .menu-toggle span::after { content: ""; position: absolute; left: 0; }
      .menu-toggle span::before { top: -6px; }
      .menu-toggle span::after { top: 6px; }
      .menu-toggle[aria-expanded="true"] span { background: transparent; }
      .menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
      .menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

      .mobile-nav-backdrop {
        position: fixed;
        z-index: 90;
        inset: 0;
        display: block;
        border: 0;
        padding: 0;
        background: rgba(19, 54, 31, .12);
        backdrop-filter: blur(2px);
        cursor: pointer;
      }

      .mobile-nav-backdrop[hidden] { display: none; }
    }

    /* The desktop-script breakpoint must match the visual breakpoint above. */
    @media (min-width: 1341px) {
      .mobile-nav-backdrop { display: none !important; }
    }

    /* Final responsive safety net: translated UI must have room to breathe,
       and long information fields must wrap instead of pushing the layout
       outside an iPad or a narrow desktop viewport. */
    @media (min-width: 1341px) {
      .page-shell .brand { min-width: 0; }
      .page-shell .brand-name { max-width: 210px; }
      .page-shell .brand-name > span:first-child {
        overflow: visible;
        text-overflow: clip;
      }
      .nav-links {
        overflow: visible;
        flex-wrap: wrap;
        row-gap: 4px;
        align-content: center;
      }
      .nav-links a {
        overflow: visible;
        text-overflow: clip;
      }
    }

    @media (min-width: 761px) {
      .business-subtitle,
      .business-row dt,
      .business-row dd,
      .address-strip strong,
      .faq-question,
      .farm-live-label,
      .farm-live-sub,
      .farm-live-status {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .business-list { --business-label-width: 31%; }
      .business-row {
        grid-template-columns: minmax(120px, 31%) minmax(0, 1fr);
        align-items: start;
      }
    }
    /* The three routes are real pages: index portal → farm cinema → main
       introduction. Keep the cinema route completely isolated from the long
       page so no ivory tail or hidden content can show beneath it. */
    body.page-view-cinema {
      min-height: 100svh;
      overflow: hidden;
      background: #102719;
    }

    body.page-view-cinema .page-shell { display: none !important; }
    body.page-view-cinema .farm-intro[hidden] { display: grid; }
    body.page-view-cinema .farm-intro { z-index: 20; }
    body.page-view-cinema .page-loader { background: #102719; }

    body.page-view-main .farm-intro { display: none !important; }
    body.page-view-main .page-shell { display: block; }

    @media (prefers-reduced-motion: reduce) {
      body.page-view-cinema .farm-intro,
      body.page-view-cinema .farm-intro-cinema { transition: none !important; }
    }

/* Mobile cinema chapter controls: keep all seven chapters visible at once.
   Small screens must not require clipping, dragging, or horizontal scrolling. */
@media (max-width: 760px) {
  .farm-intro-cinema-track {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    gap: 3px;
    margin-top: 13px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .farm-intro-cinema-item {
    width: 100%;
    min-width: 0;
    min-height: 27px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px 1px 2px;
    border-radius: 8px;
    font-size: 7px;
    line-height: 1.05;
    text-align: center;
    scroll-snap-align: none;
  }

  .farm-intro-cinema-item-number {
    font-size: 6px;
    line-height: 1;
  }

  .farm-intro-cinema-item-label {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.05;
    letter-spacing: -.03em;
  }
}

@media (max-width: 360px) {
  .farm-intro-cinema-track { gap: 2px; }
  .farm-intro-cinema-item {
    min-width: 0;
    min-height: 25px;
    padding: 2px 0 1px;
    font-size: 6px;
    border-radius: 7px;
  }
  .farm-intro-cinema-item-number { font-size: 5.5px; }
}

/* Mobile cinema footer spacing: reserve separate rows for the action,
   helper note, and footer instead of stacking all three on the same baseline. */
@media (max-width: 760px) {
  .farm-intro-action {
    bottom: 72px;
    min-height: 48px;
    padding-right: 18px;
    font-size: 13px;
  }

  .intro-action-icon {
    width: 34px;
    height: 34px;
  }

  .farm-intro-note {
    right: 14px;
    bottom: 38px;
    left: 14px;
    gap: 6px;
    font-size: 10px;
    line-height: 1.25;
  }

  .farm-intro-note::before,
  .farm-intro-note::after {
    width: 13px;
  }

  .farm-intro-bottom {
    right: 14px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 14px;
    font-size: 8.5px;
  }
}