:root {
      --ink: #20251f;
      --muted: #63685f;
      --paper: #f7f4ec;
      --paper-strong: #fffdf6;
      --green: #234333;
      --green-soft: #dfe8d8;
      --gold: #a87b35;
      --clay: #9a5a3d;
      --line: rgba(32, 37, 31, 0.16);
      --shadow: 0 22px 70px rgba(32, 37, 31, 0.13);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: linear-gradient(180deg, var(--paper), #f2efe5 42%, #faf8f1);
      font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      line-height: 1.9;
      letter-spacing: 0;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 20;
      background: #f7f4ec;
      border-bottom: 1px solid rgba(32, 37, 31, 0.1);
      backdrop-filter: none;
    }

    .header-inner {
      width: min(1160px, calc(100% - 32px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: grid;
      gap: 1px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .brand small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .global-nav {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2vw, 30px);
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
    }

    .global-nav a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    .global-nav a[aria-current="page"] {
      color: var(--green);
      box-shadow: inset 0 -2px var(--gold);
    }

    .button {
      min-height: 46px;
      padding: 11px 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--green);
      border-radius: 999px;
      background: var(--green);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.45;
      transition: transform 180ms ease, background 180ms ease;
    }

    .button:hover {
      transform: translateY(-1px);
      background: #172f24;
    }

    .button.secondary {
      background: transparent;
      color: var(--green);
    }

    .language-link {
      flex: 0 0 auto;
      min-width: 36px;
      height: 36px;
      padding: 0 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(32, 37, 31, 0.25);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .language-link:hover {
      border-color: var(--green);
      color: var(--green);
    }

    .hero {
      min-height: 92vh;
      padding: 132px 0 44px;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(247, 244, 236, 0.96) 0%, rgba(247, 244, 236, 0.82) 46%, rgba(247, 244, 236, 0.24) 100%),
        url("../images/main.jpg") center / cover;
      transform: scale(1.02);
    }

    .hero-inner,
    .section-inner {
      width: min(1160px, calc(100% - 32px));
      margin: 0 auto;
      position: relative;
    }

    .hero-copy {
      max-width: 680px;
      padding-top: 24px;
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--gold);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
      font-weight: 600;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 22px;
      font-size: clamp(40px, 7vw, 86px);
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .lead {
      max-width: 560px;
      color: #3f473c;
      font-size: clamp(16px, 2vw, 20px);
      line-height: 2;
    }

    .hero-actions {
      margin-top: 34px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-notes {
      margin-top: 72px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(32, 37, 31, 0.14);
      border: 1px solid rgba(32, 37, 31, 0.14);
      box-shadow: var(--shadow);
    }

    .hero-note {
      min-height: 118px;
      padding: 20px;
      background: rgba(255, 253, 246, 0.9);
    }

    .hero-note b {
      display: block;
      margin-bottom: 6px;
      color: var(--green);
      font-size: 14px;
    }

    .hero-note span {
      color: var(--muted);
      font-size: 13px;
    }

    section {
      padding: clamp(76px, 10vw, 136px) 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: clamp(30px, 7vw, 96px);
      align-items: start;
      margin-bottom: 52px;
    }

    .section-title {
      margin-bottom: 0;
      font-size: clamp(30px, 5vw, 58px);
      line-height: 1.22;
      letter-spacing: 0.02em;
    }

    .section-copy {
      color: #424a3f;
      font-size: 16px;
    }

    .about-band {
      background: var(--paper-strong);
      border-block: 1px solid var(--line);
    }

    .about-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 42px;
      align-items: center;
    }

    .image-frame {
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-radius: var(--radius);
      background: #d8d1bd;
      box-shadow: var(--shadow);
    }

    .image-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .about-philosophy-image {
      aspect-ratio: 4 / 3;
    }

    .about-philosophy-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 48%;
    }

    @media (max-width: 700px) {
      .about-philosophy-image img {
        object-position: 54% center;
      }
    }

    .quote-box {
      padding: clamp(28px, 5vw, 56px);
      border-left: 1px solid var(--green);
    }

    .quote-box h2 {
      margin-bottom: 22px;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.4;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .feature-card {
      min-height: 390px;
      padding: clamp(24px, 4vw, 38px);
      background: rgba(255, 253, 246, 0.76);
      display: flex;
      flex-direction: column;
    }

    .feature-number {
      margin-bottom: 48px;
      color: var(--gold);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .feature-card h3 {
      margin-bottom: 18px;
      font-size: 21px;
      line-height: 1.55;
    }

    .feature-card p {
      color: var(--muted);
      font-size: 14px;
    }

    .pickup-band {
      background:
        linear-gradient(180deg, rgba(35, 67, 51, 0.96), rgba(35, 67, 51, 0.92)),
        url("../images/workshop.jpg") center / cover;
      color: #fdfaf0;
    }

    .pickup-band .eyebrow,
    .pickup-band .section-copy {
      color: #d8c79d;
    }

    .pickup-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .pickup-card {
      min-height: 360px;
      padding: clamp(28px, 4vw, 44px);
      background: rgba(18, 36, 27, 0.54);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 34px;
    }

    .pickup-card h3 {
      font-size: clamp(23px, 3vw, 34px);
      line-height: 1.45;
    }

    .pickup-card p {
      color: rgba(253, 250, 240, 0.78);
    }

    .meta-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .meta-item {
      min-height: 168px;
      padding: 24px;
      background: rgba(255, 253, 246, 0.72);
    }

    .meta-item b {
      display: block;
      margin-bottom: 8px;
      color: var(--green);
      font-size: 15px;
    }

    .meta-item span {
      color: var(--muted);
      font-size: 14px;
    }

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

    .product-card {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper-strong);
    }

    .product-card h3 {
      margin-bottom: 12px;
      font-size: 21px;
    }

    .product-card p {
      min-height: 106px;
      color: var(--muted);
      font-size: 14px;
    }

    .product-card .eyebrow {
      min-height: auto;
      margin-bottom: 12px;
    }

    .award-note {
      margin-top: 30px;
      color: var(--muted);
      font-size: 13px;
    }

    .card-image {
      aspect-ratio: 16 / 10;
      margin: -28px -28px 24px;
      overflow: hidden;
      border-radius: var(--radius) var(--radius) 0 0;
      background: #d8d1bd;
    }

    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-image img[src$="workshop.jpg"] {
      transform: scale(1.35);
    }

    .card-image.bath-workshop-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 43%;
      filter: saturate(0.94) contrast(0.97) brightness(0.97);
      transform: none;
    }

    .genmai-pon-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 48%;
    }

    .section-actions {
      margin-top: 32px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .event-list {
      border-top: 1px solid var(--line);
    }

    .event-row {
      padding: 26px 0;
      display: grid;
      grid-template-columns: minmax(145px, 0.32fr) minmax(180px, 0.55fr) minmax(0, 1.3fr);
      gap: 28px;
      border-bottom: 1px solid var(--line);
      align-items: start;
    }

    .event-row time,
    .event-row .place {
      color: var(--muted);
      font-size: 13px;
    }

    .event-row h3 {
      margin-bottom: 5px;
      font-size: 19px;
    }

    .event-row p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .shop-panel {
      padding: clamp(34px, 7vw, 72px);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) auto;
      gap: 30px;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(18, 36, 27, 0.42);
    }

    .shop-panel h2 {
      margin-bottom: 12px;
      font-size: clamp(30px, 5vw, 54px);
    }

    .business-band {
      background: var(--green);
      color: #fdfaf0;
    }

    .business-band .eyebrow,
    .business-band .section-copy {
      color: #d8c79d;
    }

    .business-panel {
      padding: clamp(30px, 6vw, 62px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
      gap: clamp(30px, 7vw, 86px);
      align-items: center;
      background: rgba(18, 36, 27, 0.4);
    }

    .business-panel h3 {
      margin-bottom: 18px;
      font-size: clamp(24px, 4vw, 38px);
      line-height: 1.45;
    }

    .business-panel p,
    .business-list {
      color: rgba(253, 250, 240, 0.8);
    }

    .business-list {
      margin: 0;
      padding-left: 1.2em;
      font-size: 14px;
    }

    .business-list li + li {
      margin-top: 8px;
    }

    .contact-band {
      padding-bottom: 72px;
    }

    .contact-panel {
      padding: clamp(34px, 6vw, 64px);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper-strong);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) auto;
      gap: 30px;
      align-items: center;
      box-shadow: var(--shadow);
    }

    .contact-panel h2 {
      margin-bottom: 14px;
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.3;
    }

    .site-footer {
      padding: 34px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .footer-inner {
      width: min(1160px, calc(100% - 32px));
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .fade-in {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 700ms ease, transform 700ms ease;
    }

    .fade-in.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .nav-toggle {
      width: 46px;
      height: 46px;
      padding: 0;
      display: none;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--paper-strong);
      color: var(--green);
      cursor: pointer;
    }

    .nav-toggle-lines,
    .nav-toggle-lines::before,
    .nav-toggle-lines::after {
      width: 20px;
      height: 2px;
      display: block;
      position: relative;
      background: currentColor;
      transition: transform 180ms ease, opacity 180ms ease;
    }

    .nav-toggle-lines::before,
    .nav-toggle-lines::after {
      content: "";
      position: absolute;
      left: 0;
    }

    .nav-toggle-lines::before { top: -6px; }
    .nav-toggle-lines::after { top: 6px; }

    .nav-toggle[aria-expanded="true"] .nav-toggle-lines { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-lines::before { top: 0; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-lines::after { top: 0; transform: rotate(-45deg); }

    .mobile-nav {
      display: none;
      border-top: 1px solid var(--line);
      background: rgba(247, 244, 236, 0.98);
    }

    .mobile-nav-inner {
      width: min(100% - 32px, 1160px);
      margin: 0 auto;
      padding: 14px 0 24px;
      display: grid;
    }

    .mobile-nav a {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-weight: 600;
    }

    .mobile-nav a::after {
      content: "›";
      color: var(--gold);
      font-size: 20px;
    }

    .mobile-nav a.shop-link {
      margin-top: 14px;
      padding: 0 16px;
      border: 1px solid var(--green);
      border-radius: 999px;
      background: var(--green);
      color: #fff;
      justify-content: center;
    }

    .mobile-nav a.shop-link::after { display: none; }
    body.menu-open { overflow: hidden; }

    .page-hero {
      min-height: 560px;
      padding: 156px 0 72px;
      display: grid;
      align-items: end;
      position: relative;
      overflow: hidden;
      color: #fffdf6;
      background: var(--green);
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          rgba(19, 38, 29, 0.88),
          rgba(19, 38, 29, 0.28)
        ),
        var(--page-image) center / cover;
    }

    .page-hero .section-inner { z-index: 1; }
    .page-hero-copy { max-width: 760px; }
    .page-hero h1 { margin-bottom: 18px; font-size: clamp(38px, 6vw, 72px); }
    .page-hero .lead { color: rgba(255, 253, 246, 0.86); }
    .title-en { margin-bottom: 8px; display: block; font-family: inherit; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
    .badge-text { width: fit-content; margin-top: 22px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: 12px; }
    .narrow-copy { max-width: 860px; }
    .effects-text { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(19px, 3vw, 28px); line-height: 2; }
    .product-price { margin: 16px 0 22px; color: var(--gold); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(22px, 2.5vw, 30px); }

    .content-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
      gap: clamp(34px, 7vw, 90px);
      align-items: start;
    }

    .content-grid.reverse { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); }
    .content-copy h2 { margin-bottom: 22px; font-size: clamp(28px, 4vw, 48px); line-height: 1.35; }
    .content-copy h3 { margin: 34px 0 12px; font-size: 22px; }
    .content-copy p { color: #424a3f; }

    .content-image {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: var(--radius);
      background: #d8d1bd;
      box-shadow: var(--shadow);
    }

    .content-image.portrait { aspect-ratio: 4 / 5; }
    .content-image img { width: 100%; height: 100%; object-fit: cover; }

    .detail-list {
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
      border-top: 1px solid var(--line);
    }

    .detail-list li {
      padding: 16px 0;
      display: grid;
      grid-template-columns: minmax(110px, 0.35fr) 1fr;
      gap: 18px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    .detail-list strong { color: var(--green); }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }

    .step-card { padding: 28px; background: var(--paper-strong); }
    .step-card b { display: block; margin-bottom: 18px; color: var(--gold); }
    .step-card h3 { margin-bottom: 10px; font-size: 19px; }
    .step-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

    .ingredient-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
    .ingredient-detail { min-height: 220px; padding: 30px; border-bottom: 1px solid var(--line); }
    .ingredient-detail:nth-child(odd) { border-right: 1px solid var(--line); }
    .ingredient-detail b { color: var(--gold); font-size: 12px; }
    .ingredient-detail h3 { margin: 18px 0 10px; font-size: 19px; }
    .ingredient-detail p { margin-bottom: 0; color: var(--muted); font-size: 14px; }

    .notice-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .notice-list li { padding: 14px 0 14px 1.6em; position: relative; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
    .notice-list li::before { content: "・"; position: absolute; left: 0; color: var(--gold); }

    .story-flow { max-width: 900px; display: grid; gap: 46px; }
    .story-block { padding-top: 24px; border-top: 1px solid var(--line); }
    .story-block h3 { margin-bottom: 14px; font-size: 22px; }
    .story-block p { margin-bottom: 0; color: var(--muted); }

    .recipe-steps { margin: 32px 0; border-top: 1px solid var(--line); }
    .recipe-step { padding: 18px 0; display: grid; grid-template-columns: 90px 1fr; gap: 18px; border-bottom: 1px solid var(--line); }
    .recipe-step b { color: var(--gold); font-size: 12px; letter-spacing: 0.1em; }
    .recipe-step p { margin-bottom: 0; }

    .five-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .value-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .value-five .feature-card { min-height: 310px; }
    .material-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
    .material-story { padding: 42px; background: var(--paper-strong); }
    .material-story h3 { margin: 0 0 18px; font-size: 20px; }
    .material-story p { margin: 0; color: var(--muted); font-size: 14px; }
    .scene-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .scene-box { display: flex; align-items: center; min-height: 92px; padding: 24px; border: 1px solid var(--line); background: var(--paper-strong); font-family: var(--serif); line-height: 1.7; }
    .event-cards { display: grid; gap: 28px; }
    .event-card-detail { padding: clamp(28px, 5vw, 56px); border: 1px solid var(--line); background: var(--paper-strong); }
    .event-card-detail h3 { margin: 8px 0 28px; font-size: clamp(24px, 3vw, 36px); }
    .event-card-detail .detail-list { margin-top: 0; }

    /* Tososan page trial refinements. Keep these scoped to the sample page. */
    .toso-page main p,
    .toso-page main li { letter-spacing: 0.025em; }
    .toso-page .page-hero h1 { font-size: clamp(38px, 6vw, 70px); }
    .toso-page .story-block p,
    .toso-page #story .lead { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
    .toso-page .quantity-note,
    .toso-page .product-price,
    .toso-page .recipe-step b { color: var(--clay); }
    .toso-page #origin .story-block.fade-in,
    .toso-page #story .fade-in { transition-duration: 1000ms; }
    .toso-page .quantity-note { margin-bottom: 10px; font-size: 13px; font-weight: 700; }
    .toso-page .product-notes { margin-top: 34px; }
    .toso-page .product-notes h3 { margin-bottom: 14px; font-size: 18px; }
    .toso-spice-tea-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .form-field { display: grid; gap: 7px; }
    .form-field.full { grid-column: 1 / -1; }
    .form-field label { font-size: 13px; font-weight: 700; }
    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--paper-strong);
      color: var(--ink);
      font: inherit;
      font-size: 16px;
    }
    .form-field textarea { min-height: 180px; resize: vertical; }
    .form-note { color: var(--muted); font-size: 13px; }
    .contact-form-wrap { max-width: 820px; }
    .required { color: #8b2f25; font-size: 12px; }
    .hp-field { position: absolute; left: -9999px; }
    .turnstile-wrap { margin: 12px 0 20px; overflow-x: auto; }
    .form-result-wrap { min-height: 100vh; display: grid; align-items: center; }

    .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }

    .en-site .hero-copy {
      max-width: 760px;
    }

    .en-site .hero h1 {
      font-size: clamp(40px, 6vw, 68px);
    }

    .en-site .page-hero h1 {
      font-size: clamp(36px, 5vw, 64px);
    }

    .en-site .page-hero h1 small {
      font-size: 0.52em;
    }

    @media (min-width: 901px) and (max-width: 1080px) {
      .en-site .global-nav,
      .en-site .header-inner > .button,
      .en-site .language-link {
        display: none;
      }

      .en-site .nav-toggle {
        display: inline-flex;
      }

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

      .en-site .mobile-nav:not([hidden]) {
        display: block;
        max-height: calc(100vh - 66px);
        overflow-y: auto;
      }
    }

    @media (max-width: 900px) {
      .global-nav {
        display: none;
      }

      .header-inner > .button,
      .language-link { display: none; }
      .nav-toggle { display: inline-flex; }
      .mobile-nav[hidden] { display: none; }
      .mobile-nav:not([hidden]) { display: block; max-height: calc(100vh - 66px); overflow-y: auto; }

      .hero {
        min-height: auto;
        padding-top: 116px;
      }

      .hero::before {
        background:
          linear-gradient(180deg, rgba(247, 244, 236, 0.92) 0%, rgba(247, 244, 236, 0.82) 64%, rgba(247, 244, 236, 0.72) 100%),
          url("../images/main.jpg") center / cover;
      }

      .hero-notes,
      .section-head,
      .about-grid,
      .features,
      .pickup-grid,
      .meta-list,
      .products,
      .business-panel,
      .shop-panel,
      .contact-panel {
        grid-template-columns: 1fr;
      }

      .content-grid,
      .content-grid.reverse,
      .steps,
      .ingredient-grid {
        grid-template-columns: 1fr;
      }

      .value-five,
      .scene-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .material-stories { grid-template-columns: 1fr; }

      .ingredient-detail:nth-child(odd) { border-right: 0; }

      .page-hero { min-height: 480px; padding-top: 124px; }

      .event-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .hero-notes {
        margin-top: 48px;
      }

      .feature-card,
      .pickup-card {
        min-height: auto;
      }

      .feature-number {
        margin-bottom: 24px;
      }

      .product-card p {
        min-height: auto;
      }

      .contact-panel {
        align-items: start;
      }
    }

    @media (max-width: 560px) {
      .header-inner {
        width: min(100% - 24px, 1160px);
        min-height: 66px;
      }

      .brand {
        font-size: 15px;
      }

      .button {
        width: 100%;
      }

      .header-inner .button {
        width: auto;
        padding-inline: 16px;
        font-size: 13px;
      }

      .hero-inner,
      .section-inner,
      .footer-inner {
        width: min(100% - 24px, 1160px);
      }

      .hero {
        padding-bottom: 28px;
      }

      .lead,
      .section-copy {
        font-size: 15px;
      }

      section {
        padding-block: 68px;
      }

      .quote-box {
        padding-left: 22px;
      }

      .form-grid { grid-template-columns: 1fr; }
      .form-field.full { grid-column: auto; }
      .detail-list li { grid-template-columns: 1fr; gap: 4px; }
      .recipe-step { grid-template-columns: 1fr; gap: 6px; }
      .value-five, .scene-list { grid-template-columns: 1fr; }
      .material-story { padding: 28px 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
      .fade-in { opacity: 1; transform: none; }
    }