/* ================================================================
   ADVANCE INTERTRADE — v2 "Luxe" design system
   Positioning: premium Japanese seafood house. Editorial serif (Bodoni Moda)
   over deep brand navy, porcelain light sections, champagne gold reserved for
   the ONE primary action per screen (isolation effect) and fine detailing.
   Loaded after style.css on every page; homepage uses .lx-* blocks.
   ================================================================ */


:root{
  --night:#0b1b30;       /* deepest, hero + footer */
  --navy:#122641;        /* brand navy */
  --navy-2:#1c3557;      /* raised navy */
  --porcelain:#f4f6f8;   /* light sections, cool not cream */
  --frost:#e6ebf1;       /* ice-tone dividers on light */
  /* accent is now SILVER / platinum (Luca, 2026-10-01). Variable names kept as --gold* so every
     rule follows; values are cool metals. Primary CTA + fine rules only. */
  --gold:#cdd3db;        /* platinum: primary CTA fill on dark */
  --gold-2:#5f6b7a;      /* steel: accents on light backgrounds (needs contrast) */
  --gold-lt:#eef1f5;     /* bright silver: highlights on dark */
  --ink:#10233c;         /* text on light */
  --ink-2:#4f5d6e;
  --ink-3:#5f6b79;
  --on:#f5f2ea;          /* warm white text on dark (paper-like, not pure) */
  --on-2:rgba(245,242,234,.7);
  --on-3:rgba(245,242,234,.58);
  --hair-d:rgba(245,242,234,.14);
  --hair-l:rgba(19,39,65,.12);
  --link:#1d5fa6;        /* brand blue, inline links on light */

  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mincho:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;

  --gutter:clamp(20px,5.5vw,80px);
  --max:1320px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* legacy tokens from style.css re-pointed so every old page inherits v2 */
  --font:var(--sans);
  --font-jp:var(--gothic);
  --navy-0:var(--night);
  --blue:var(--gold);
  --blue-lt:var(--gold-lt);
}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:16.5px;line-height:1.65;background:var(--night);color:var(--on);font-variation-settings:"wdth" 96;text-rendering:optimizeLegibility}
html[lang="ja"] body{font-family:var(--sans),var(--gothic);line-height:1.9;letter-spacing:.02em}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:2px}
img,video{max-width:100%}

/* ---------- shared: navigation ---------- */
.nav{height:72px;padding:0 var(--gutter);background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease)}
.nav.is-solid,body:not(.lx-home) .nav{background:rgba(14,30,52,.9);border-bottom-color:var(--hair-d);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px)}
.nav-mark img{width:40px;height:40px}
.nav-name,.nav-name span{font-family:var(--serif);font-size:1.12rem;font-weight:500;letter-spacing:.16em;font-variation-settings:normal}
.nav-links a{font-size:.88rem;font-weight:500;letter-spacing:.01em;text-transform:none;padding:8px 12px;color:var(--on-2);border-radius:0;background:none!important}
.nav-links a:hover{color:var(--on)}
.nav-links a.active{color:var(--on);box-shadow:inset 0 -1px 0 var(--gold)}
.nav-lang{font-size:.8rem;font-weight:600;border-left-color:var(--hair-d)}
.nav-lang a{border:0!important;box-shadow:none!important;background:none!important;padding:6px 4px;color:var(--on-3)}
.nav-lang a.active{color:var(--on);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--gold)}
.nav-burger{width:44px;height:44px;align-items:center;justify-content:center}
.nav-burger span{background:var(--on)}
.nav-mobile{top:72px;background:var(--night);padding:16px var(--gutter) 40px}
.nav-mobile a{font-family:var(--serif);font-size:1.6rem;font-weight:500;padding:14px 0;min-height:52px;display:flex;align-items:center;color:var(--on);border-bottom-color:var(--hair-d)}
.nav-mobile-lang-row{font-family:var(--sans)!important;font-size:1rem!important}

/* ---------- shared: buttons ---------- */
.btn,.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border-radius:2px;font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
.btn:active,.lx-btn:active{transform:scale(.98)}
.btn-primary,.lx-btn--gold{background:var(--gold);border:1px solid var(--gold);color:var(--night)}
.btn-primary:hover,.lx-btn--gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--night);box-shadow:none;transform:none}
.btn-outline,.lx-btn--line{background:transparent;border:1px solid rgba(245,242,234,.42);color:var(--on)}
.btn-outline:hover,.lx-btn--line:hover{border-color:var(--on);background:rgba(245,242,234,.05)}
.lx-btn--ink{background:var(--ink);border:1px solid var(--ink);color:#fff}
.lx-btn--ink:hover{background:var(--navy-2)}
.lx-btn--line-dark{background:transparent;border:1px solid var(--hair-l);color:var(--ink)}
.lx-btn--line-dark:hover{border-color:var(--ink)}
.lx-btn svg{width:16px;height:16px;flex:none}

/* ---------- shared: legacy patterns softened site-wide ---------- */
.eyebrow{font-size:.86rem;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--gold)!important}
.eyebrow::before{display:none}
.title{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.05}

/* ---------- shared: nav CTA + breakpoint (5 links + CTA need room) ---------- */
.nav-links .nav-cta{margin-left:14px;display:inline-flex;align-items:center;min-height:40px;padding:0 18px!important;border:1px solid var(--gold)!important;border-radius:2px!important;color:var(--night)!important;background:var(--gold)!important;font-weight:600!important;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.nav-links .nav-cta:hover{background:var(--gold-lt)!important;border-color:var(--gold-lt)!important}
.nav-lang a[lang="ja"],.nav-links a:lang(ja){font-family:var(--gothic)}
@media(min-width:900px) and (max-width:1139px){.nav-links{display:none}.nav-burger{display:flex}}
.nav-mobile a[aria-current="page"]{color:var(--gold-lt)}
.nav-mobile .nav-mobile-cta{margin-top:28px;justify-content:center;font-family:var(--sans);font-size:1rem;font-weight:600;background:var(--gold);color:var(--night);border:0;border-radius:2px;min-height:54px}
.nav-mobile .nav-mobile-lang-row{color:var(--on-2);border-bottom:0}
html[lang="ja"] .nav-mobile a{font-family:var(--mincho);font-size:1.35rem}
html[lang="ja"] .nav-mobile .nav-mobile-cta,html[lang="ja"] .nav-mobile .nav-mobile-lang-row{font-family:var(--gothic);font-size:1rem}

/* ---------- shared: footer ---------- */
.lx-foot{background:var(--night);color:var(--on-2);border-top:1px solid var(--hair-d);font-size:.95rem}
.lx-foot a{color:var(--on-2);text-decoration:none;transition:color .2s var(--ease)}
.lx-foot a:hover{color:var(--on)}
.lx-foot__inner{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,104px) var(--gutter) clamp(40px,5vw,64px);display:grid;gap:48px}
.lx-foot__logo{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-size:1.35rem;font-weight:500;color:var(--on)!important;letter-spacing:.01em}
.lx-foot__line{margin:18px 0 0;max-width:36ch;line-height:1.65}
.lx-foot address{margin-top:22px;font-style:normal;line-height:1.75;color:var(--on-3)}
.lx-foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:36px 28px}
.lx-foot h2{margin:0 0 14px;font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--on-3);letter-spacing:.01em}
.lx-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lx-foot li a{display:inline-flex;min-height:36px;align-items:center;overflow-wrap:anywhere}
.lx-foot__bottom{max-width:var(--max);margin:0 auto;padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;border-top:1px solid var(--hair-d);font-size:.85rem;color:var(--on-3)}
.lx-foot__lang{display:inline-flex;gap:18px;margin-left:auto}
.lx-foot__lang a[aria-current]{color:var(--on)}
html[lang="ja"] .lx-foot h2{font-family:var(--gothic)}
@media(min-width:900px){.lx-foot__inner{grid-template-columns:1.25fr 2fr;gap:64px}}
@media(max-width:760px){.lx-foot__bottom{padding-bottom:calc(92px + env(safe-area-inset-bottom))}.lx-foot__lang{margin-left:0}}

/* ================================================================
   HOMEPAGE  (.lx)
   ================================================================ */
.lx h1,.lx h2,.lx h3{margin:0;color:inherit}
.lx p{margin:0}
.lx-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.lx-sec{position:relative;padding:clamp(88px,12vw,180px) 0}
.lx-sec--light{background:var(--porcelain);color:var(--ink)}
.lx-sec--white{background:#fff;color:var(--ink)}
.lx-sec--navy{background:var(--navy)}
.lx-sec--night{background:var(--night)}

.lx-kicker{display:flex;align-items:center;gap:14px;font-size:.88rem;font-weight:500;color:var(--gold);letter-spacing:.02em}
.lx-kicker::before{content:"";width:36px;height:1px;background:currentColor}
.lx-sec--light .lx-kicker,.lx-sec--white .lx-kicker{color:var(--gold-2)}
.lx-h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.06;letter-spacing:-.015em;margin-top:22px;max-width:15ch;text-wrap:balance}
.lx-h2 em{font-style:italic;font-weight:400}
.lx-lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.65;max-width:52ch;margin-top:clamp(24px,3vw,36px);color:var(--on-2)}
.lx-sec--light .lx-lead,.lx-sec--white .lx-lead{color:var(--ink-2)}
.lx-link{display:inline-flex;align-items:center;gap:10px;margin-top:32px;font-weight:600;color:var(--on);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .2s var(--ease)}
.lx-link:hover{color:var(--gold-lt)}
.lx-sec--light .lx-link,.lx-sec--white .lx-link{color:var(--ink)}
.lx-sec--light .lx-link:hover,.lx-sec--white .lx-link:hover{color:var(--gold-2)}
.lx-jp{font-family:var(--mincho);letter-spacing:.08em}
.lx-num{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums}

/* ---------- 1. hero ---------- */
.lx-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--night) center/cover no-repeat;isolation:isolate}
.lx-hero__media{position:absolute;inset:0;z-index:-2}
.lx-hero__media video,.lx-hero__media img{width:100%;height:100%;object-fit:cover}
.lx-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(14,30,52,.86) 0%,rgba(14,30,52,.58) 45%,rgba(14,30,52,.25) 100%),
  linear-gradient(180deg,rgba(14,30,52,.6) 0%,rgba(14,30,52,.1) 26%,rgba(14,30,52,.35) 62%,var(--night) 100%)}
.lx-hero__inner{width:100%;padding-top:140px;padding-bottom:clamp(36px,6vw,72px)}
.lx-live{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;color:var(--on-2);font-variant-numeric:tabular-nums}
.lx-live__dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(205,211,219,.6);animation:lx-pulse 2.4s var(--ease) infinite}
.lx-live time{color:var(--on);font-weight:600}
@keyframes lx-pulse{0%{box-shadow:0 0 0 0 rgba(205,211,219,.55)}70%{box-shadow:0 0 0 9px rgba(205,211,219,0)}100%{box-shadow:0 0 0 0 rgba(205,211,219,0)}}
.lx-hero h1{margin-top:26px;font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 30;font-size:clamp(2.6rem,6vw,5.6rem);line-height:1.02;letter-spacing:-.012em;max-width:15ch;text-wrap:balance}
.lx-hero h1 em{font-style:italic;font-weight:400;color:var(--gold-lt)}
.lx-hero__sub{margin-top:clamp(24px,3vw,34px);max-width:50ch;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.6;color:var(--on-2)}
.lx-hero__jp{display:block;margin-top:12px;font-size:1rem;color:var(--on-3)}
.lx-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:38px}
.lx-hero__cta .lx-textlink{font-weight:600;color:var(--on);border-bottom:1px solid var(--hair-d);padding-bottom:3px}
.lx-hero__cta .lx-textlink:hover{border-color:var(--gold)}
.lx-trust{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;margin-top:clamp(40px,6vw,72px);padding-top:26px;border-top:1px solid var(--hair-d)}
.lx-trust__award{display:flex;align-items:center;gap:14px;max-width:360px}
.lx-trust__award img{width:46px;height:46px;flex:none;object-fit:contain}
.lx-trust__award span{font-size:.88rem;line-height:1.4;color:var(--on-2)}
.lx-trust__award strong{display:block;color:var(--on);font-weight:600}
.lx-trust__stat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1}
.lx-trust__stat span{display:block;margin-top:6px;font-size:.84rem;color:var(--on-3)}

/* ---------- 2. markets marquee ---------- */
.lx-marquee{border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);background:var(--night);overflow:hidden;padding:22px 0}
.lx-marquee__label{display:block;text-align:center;font-size:.84rem;color:var(--on-3);margin-bottom:14px}
.lx-marquee__track{display:flex;width:max-content;gap:56px;animation:lx-scroll 48s linear infinite}
.lx-marquee__track span{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.9rem);font-style:italic;color:var(--on-2);white-space:nowrap}
.lx-marquee__track span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:56px;border-radius:50%;background:var(--gold);vertical-align:middle}
@keyframes lx-scroll{to{transform:translateX(-50%)}}

/* ---------- 3. the fukuoka advantage (anchoring) ---------- */
.lx-adv{display:grid;gap:clamp(48px,7vw,96px)}
@media(min-width:1000px){.lx-adv{grid-template-columns:.95fr 1.05fr;align-items:start}}
.lx-routes{display:grid;gap:18px;margin-top:8px}
.lx-route{padding:26px 26px 22px;border:1px solid var(--hair-l);background:#fff}
.lx-route--us{border-color:var(--gold);box-shadow:0 30px 60px -38px rgba(19,39,65,.45)}
.lx-route__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.lx-route__name{font-family:var(--serif);font-size:1.45rem;font-weight:500}
.lx-route__time{font-size:.9rem;font-weight:600;color:var(--ink-3);white-space:nowrap}
.lx-route--us .lx-route__time{color:var(--gold-2)}
.lx-route ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:0;font-size:.9rem;color:var(--ink-2)}
.lx-route li{display:flex;align-items:center;gap:8px}
.lx-route li+li::before{content:"";width:18px;height:1px;background:var(--ink-3)}
.lx-route li.cost{color:#9b3b2c}
.lx-route--us li.gain{color:#2e6b48;font-weight:600}
.lx-route p{margin-top:16px;font-size:.92rem;color:var(--ink-2)}
.lx-share{margin-top:clamp(48px,6vw,72px)}
.lx-share h3{font-family:var(--serif);font-size:1.5rem;font-weight:500}
.lx-share p.note{margin-top:8px;font-size:.88rem;color:var(--ink-3)}
.lx-bars{list-style:none;margin:22px 0 0;padding:0}
.lx-bars li{border-top:1px solid var(--hair-l)}
.lx-bars li:last-child{border-bottom:1px solid var(--hair-l)}
.lx-bars a{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:20px;padding:14px 0;color:var(--ink)}
.lx-bars img{width:120px;height:80px;object-fit:cover;background:var(--frost)}
.lx-bars .name{font-weight:600}
.lx-bars .track{display:block;height:3px;margin-top:9px;background:var(--frost)}
.lx-bars .fill{display:block;height:100%;width:var(--v);background:var(--gold-2);transform-origin:left;transition:transform 1.1s var(--ease)}
.lx-bars .pct{font-family:var(--serif);font-size:1.45rem;font-weight:500}
.lx-bars a:hover .name{color:var(--gold-2)}
.lx-bars.is-pending .fill{transform:scaleX(0)}
.lx-offer{display:grid;gap:22px;margin-top:clamp(56px,7vw,88px);padding:clamp(28px,4vw,48px);background:var(--navy);color:var(--on)}
@media(min-width:900px){.lx-offer{grid-template-columns:1fr auto;align-items:center}}
.lx-offer p{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:500;line-height:1.08}
.lx-offer p em{font-style:italic;color:var(--gold-lt)}
.lx-offer small{display:block;margin-top:10px;font-family:var(--sans);font-size:.95rem;color:var(--on-2)}

/* ---------- 4. the morning (cinematic timeline) ---------- */
.lx-morning__head{display:grid;gap:22px}
@media(min-width:1000px){.lx-morning__head{grid-template-columns:1fr 1fr;align-items:end}}
.lx-steps{list-style:none;margin:clamp(48px,7vw,88px) 0 0;padding:0;display:grid;gap:clamp(56px,8vw,96px)}
.lx-step{display:grid;gap:22px}
.lx-step__fig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--navy-2)}
.lx-step__fig img,.lx-step__fig video{width:100%;height:100%;object-fit:cover}
.lx-step__time{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,9vw,6.4rem);line-height:.9;color:var(--on);font-variant-numeric:lining-nums}
.lx-step h3{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:500;margin-top:10px}
.lx-step p{margin-top:12px;color:var(--on-2);max-width:42ch}
.lx-step__now{display:none;align-items:center;gap:10px;margin-top:16px;font-size:.88rem;font-weight:600;color:var(--gold-lt)}
.lx-step__now::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);animation:lx-pulse 2.4s var(--ease) infinite}
.lx-step.is-now .lx-step__now{display:flex}
.lx-step.is-now .lx-step__time{color:var(--gold-lt)}
@media(min-width:900px){
  .lx-step{grid-template-columns:1.25fr 1fr;align-items:center;gap:clamp(40px,6vw,96px)}
  .lx-step:nth-child(even) .lx-step__fig{order:2}
}

/* ---------- 5. signature species ---------- */
.lx-species__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.lx-gallery{display:grid;gap:clamp(14px,2vw,24px);margin-top:clamp(40px,6vw,72px);grid-template-columns:1fr 1fr}
@media(min-width:900px){.lx-gallery{grid-template-columns:repeat(6,1fr)}
  .lx-gallery a:nth-child(1){grid-column:span 4}.lx-gallery a:nth-child(2){grid-column:span 2}
  .lx-gallery a:nth-child(3),.lx-gallery a:nth-child(4),.lx-gallery a:nth-child(5){grid-column:span 2}
  .lx-gallery a:nth-child(6){grid-column:span 6}}
.lx-fish{position:relative;display:block;overflow:hidden;background:var(--frost);color:var(--ink)}
.lx-fish img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
@media(min-width:900px){.lx-gallery a:nth-child(6) img{aspect-ratio:21/6}}
.lx-fish:hover img{transform:scale(1.04)}
.lx-fish figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:16px 18px;background:linear-gradient(0deg,rgba(244,246,248,.95),rgba(244,246,248,0))}
.lx-fish strong{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:500;line-height:1.1}
.lx-fish span{display:block;font-size:.82rem;color:var(--ink-2)}
.lx-fish .kanji{font-family:var(--mincho);font-size:1.05rem;color:var(--ink-2);letter-spacing:.08em}

/* ---------- 6. proof ---------- */
.lx-proof{display:grid;gap:clamp(48px,7vw,96px)}
@media(min-width:1000px){.lx-proof{grid-template-columns:1fr 1fr;align-items:start}}
.lx-tons{font-family:var(--serif);font-weight:400;font-size:clamp(4.6rem,12vw,9rem);line-height:.9;letter-spacing:-.03em;margin-top:clamp(40px,5vw,64px)}
.lx-tons small{display:block;margin-top:18px;font-family:var(--sans);font-size:1.05rem;letter-spacing:0;color:var(--on-2)}
.lx-award{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:center;margin-top:44px;padding:26px 0;border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
.lx-award img{width:72px;height:72px;object-fit:contain}
.lx-award strong{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:500;line-height:1.25}
.lx-award span{display:block;margin-top:4px;font-size:.9rem;color:var(--on-2)}
.lx-award a{display:inline-block;margin-top:8px;font-size:.9rem;font-weight:600;color:var(--gold-lt);border-bottom:1px solid currentColor}
.lx-markets{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.lx-markets li{break-inside:avoid;padding:14px 0;border-top:1px solid var(--hair-d)}
.lx-markets b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:500}
.lx-markets span{font-size:.85rem;color:var(--on-3)}
@media(max-width:560px){.lx-markets{columns:1}}

/* ---------- 7. how ordering works ---------- */
.lx-how{display:grid;gap:0;margin-top:clamp(40px,6vw,72px);counter-reset:how;list-style:none;padding:0}
@media(min-width:900px){.lx-how{grid-template-columns:repeat(3,1fr);gap:40px}}
.lx-how li{padding:28px 0;border-top:1px solid var(--hair-l)}
.lx-how li::before{counter-increment:how;content:counter(how);display:block;font-family:var(--serif);font-size:3.2rem;line-height:1;color:var(--gold-2)}
.lx-how h3{margin-top:18px;font-family:var(--serif);font-size:1.5rem;font-weight:500}
.lx-how p{margin-top:10px;color:var(--ink-2);max-width:34ch}
.lx-how__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- 8. why importers choose us ---------- */
.lx-pillars{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--gold-lt)}
.lx-strengths{display:grid;gap:0 clamp(32px,5vw,72px);margin:clamp(40px,6vw,64px) 0 0;padding:0}
@media(min-width:760px){.lx-strengths{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.lx-strengths{grid-template-columns:repeat(3,1fr)}}
.lx-strengths div{padding:26px 0;border-top:1px solid var(--hair-d)}
.lx-strengths dt{font-family:var(--serif);font-size:1.4rem;font-weight:500}
.lx-strengths dd{margin:8px 0 0;color:var(--on-2)}

/* ---------- 9. also from japan ---------- */
.lx-also{display:grid;gap:22px;margin-top:clamp(36px,5vw,56px)}
@media(min-width:900px){.lx-also{grid-template-columns:repeat(3,1fr)}}
.lx-also a{display:block;color:var(--ink)}
.lx-also img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .3s var(--ease)}
.lx-also a:hover img{opacity:.88}
.lx-also h3{margin-top:16px;font-family:var(--serif);font-size:1.45rem;font-weight:500}
.lx-also p{margin-top:6px;color:var(--ink-2);font-size:.95rem}
.lx-also span.more{display:inline-block;margin-top:10px;font-weight:600;border-bottom:1px solid var(--gold);font-size:.92rem}

/* ---------- 10. final CTA (peak-end) ---------- */
.lx-final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(110px,15vw,220px) 0}
.lx-final__media{position:absolute;inset:0;z-index:-2}
.lx-final__media video,.lx-final__media img{width:100%;height:100%;object-fit:cover}
.lx-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,30,52,.92) 0%,rgba(14,30,52,.7) 55%,rgba(14,30,52,.45) 100%)}
.lx-final .lx-h2{max-width:13ch}
.lx-final__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.lx-direct{display:grid;gap:0;margin-top:clamp(48px,6vw,72px);max-width:760px}
@media(min-width:760px){.lx-direct{grid-template-columns:repeat(3,1fr);gap:28px}}
.lx-direct a,.lx-direct div{display:block;padding:16px 0;border-top:1px solid var(--hair-d);color:var(--on)}
.lx-direct span{display:block;font-size:.82rem;color:var(--on-3)}
.lx-direct b{font-weight:600}
.lx-direct a:hover b{color:var(--gold-lt)}
.lx-final .note{margin-top:18px;font-size:.9rem;color:var(--on-3)}

/* ---------- mobile sticky CTA ---------- */
.lx-sticky{position:fixed;left:0;right:0;bottom:0;z-index:300;display:none;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(14,30,52,.94);border-top:1px solid var(--hair-d);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(110%);transition:transform .35s var(--ease)}
.lx-sticky.is-on{transform:none}
.lx-sticky .lx-btn{flex:1;min-height:50px;padding:0 16px}
.lx-sticky__icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;flex:none;border:1px solid var(--hair-d);border-radius:2px}
.lx-sticky__icon svg{width:22px;height:22px;fill:var(--on)}
@media(max-width:760px){
  .lx-sticky{display:flex}
  body.lx-home .social-float{display:none!important}
  body.lx-home{padding-bottom:74px}
}

/* ---------- small screens ---------- */
@media(max-width:640px){
  body{font-size:16px}
  .nav{height:64px}
  .nav-mobile{top:64px}
  .nav-name,.nav-name span{font-size:.92rem;letter-spacing:.1em}
  .nav-mark img{width:32px;height:32px}
  .lx-hero h1{font-size:clamp(2.6rem,12vw,3.5rem)}
  .lx-hero__cta .lx-btn{width:100%}
  .lx-trust{gap:20px 28px}
  .lx-trust__award{max-width:none;flex:1 1 100%}
  .lx-route ol{font-size:.85rem}
  .lx-bars a{grid-template-columns:84px 1fr auto;gap:14px}
  .lx-bars img{width:84px;height:56px}
  .lx-fish figcaption{padding:10px 12px}
  .lx-fish .kanji{display:none}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .lx-marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:12px 28px}
  .lx-marquee__track span[aria-hidden="true"]{display:none}
  .lx-live__dot,.lx-step__now::before{animation:none}
  .lx-bars .fill,.lx-fish img,.btn,.lx-btn,.nav,.lx-sticky{transition:none}
  .lx-bars.is-pending .fill{transform:none}
}

/* ---------- floating chat on non-home pages (mobile): collapse to one ---------- */
.sf-toggle{display:none}
@media(max-width:760px){
  .social-float{left:auto!important;right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;align-items:flex-end;gap:10px}
  .social-float .sf-btn{display:none;width:48px;height:48px}
  .social-float.is-open .sf-btn{display:flex}
  .sf-toggle{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--night);border:0;box-shadow:0 8px 24px rgba(14,30,52,.4)}
  .sf-toggle svg{width:24px;height:24px}
}

/* ---------- serif tuning: Bodoni's display cut is too hairline at large sizes over imagery.
   Fix the optical size lower and lift the weight so strokes survive video, small screens and
   low-contrast moments. ---------- */
.lx-h2{font-weight:600;font-variation-settings:"opsz" 28}
.nav-name,.nav-name span{font-weight:600;font-variation-settings:"opsz" 14}
.nav-mobile a{font-weight:600;font-variation-settings:"opsz" 20}
.lx-trust__stat b,.lx-bars .pct,.lx-route__name,.lx-fish strong,.lx-award strong,.lx-markets b,
.lx-strengths dt,.lx-also h3,.lx-share h3,.lx-step h3,.lx-how h3,.lx-offer p,.lx-marquee__track span,
.lx-pillars{font-weight:600;font-variation-settings:"opsz" 20}
.lx-tons,.lx-step__time,.lx-how li::before{font-weight:500;font-variation-settings:"opsz" 40}
.title{font-weight:600;font-variation-settings:"opsz" 28}

/* ---------- silver accent: contrast-safe primary buttons ---------- */
/* brushed-platinum finish on dark backgrounds */
.btn-primary,.lx-btn--gold{background:linear-gradient(180deg,#eef1f5 0%,#cdd3db 100%);border-color:#cdd3db;color:var(--night)}
.btn-primary:hover,.lx-btn--gold:hover{background:#f6f8fa;border-color:#f6f8fa}
/* on light sections silver would vanish: primary becomes navy */
.lx-sec--light .lx-btn--gold,.lx-sec--white .lx-btn--gold{background:var(--ink);border-color:var(--ink);color:#fff}
.lx-sec--light .lx-btn--gold:hover,.lx-sec--white .lx-btn--gold:hover{background:var(--navy-2);border-color:var(--navy-2)}
/* ...except inside navy panels placed on light sections */
.lx-sec--light .lx-offer .lx-btn--gold{background:linear-gradient(180deg,#eef1f5 0%,#cdd3db 100%);border-color:#cdd3db;color:var(--night)}
.lx-sec--light .lx-offer .lx-btn--gold:hover,.lx-sec--white .lx-offer .lx-btn--gold:hover{background:#f6f8fa;border-color:#f6f8fa;color:var(--night)}
.lx-route--us{border-color:var(--ink)}
.lx-route--us .lx-route__time{color:var(--ink)}

/* ---------- gallery: every photo fills its tile (uni tile is taller than 3:2) ---------- */
.lx-fish figure{margin:0;height:100%}
.lx-fish img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
@media(min-width:900px){
  .lx-gallery a:nth-child(2) img{aspect-ratio:auto;min-height:100%}
}

/* ---------- gallery v2: uniform catalogue grid, whole photo, caption below ---------- */
.lx-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px) clamp(14px,2vw,28px)}
@media(min-width:900px){.lx-gallery{grid-template-columns:repeat(3,1fr)}}
.lx-gallery a.lx-fish{grid-column:auto!important;background:none;overflow:visible}
.lx-fish figure{margin:0;height:auto}
.lx-fish img,.lx-gallery a.lx-fish img{display:block;width:100%;height:auto!important;min-height:0!important;aspect-ratio:3/2!important;object-fit:cover;background:var(--frost)}
.lx-fish .lx-fish__img{overflow:hidden}
.lx-fish figcaption{position:static;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 2px 0;background:none;border-top:0}
.lx-fish strong{font-size:clamp(1.15rem,1.6vw,1.45rem)}
.lx-fish figcaption span{color:var(--ink-3)}
.lx-fish:hover img{transform:scale(1.035)}
.lx-fish:hover strong{color:var(--gold-2)}
@media(max-width:640px){.lx-fish figcaption{padding-top:10px}.lx-fish .kanji{display:none}}

/* ---------- export map (pre-rendered SVG, CSS-animated, no libraries) ---------- */
.xm-wrap{position:relative;margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d)}
.xm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.xm-scroll::-webkit-scrollbar{display:none}
.xm{display:block;width:100%;height:auto;min-width:760px}
.xm-grat{fill:none;stroke:rgba(245,242,234,.06);stroke-width:.6}
.xm-land{fill:#233e61;stroke:#31517b;stroke-width:.6}
.xm-route{fill:none;stroke:#cdd3db;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.xm-dest{fill:#eef1f5;opacity:0}
.xm-label{font-family:var(--sans);font-size:13px;font-weight:600;fill:rgba(245,242,234,.82);opacity:0;paint-order:stroke;stroke:#162b46;stroke-width:3px}
.xm-movers{opacity:0;transition:opacity .8s var(--ease) 2.2s}
.xm-plane{fill:#fff}
.xm-origin-dot{fill:#fff}
.xm-origin-ring{fill:none;stroke:#eef1f5;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:xm-ping 2.6s var(--ease) infinite}
.xm-origin-label{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 18;font-size:19px;fill:#fff;paint-order:stroke;stroke:#162b46;stroke-width:4px}
.xm-wrap.is-on .xm-route{animation:xm-draw 1.5s var(--ease) var(--d) forwards}
.xm-wrap.is-on .xm-dest,.xm-wrap.is-on .xm-label{animation:xm-fade .6s var(--ease) var(--d) forwards}
.xm-wrap.is-on .xm-movers{opacity:.9}
@keyframes xm-draw{to{stroke-dashoffset:0}}
@keyframes xm-fade{to{opacity:1}}
@keyframes xm-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.xm-hint{display:none;margin-top:10px;font-size:.84rem;color:var(--on-3)}
@media(max-width:760px){.xm-hint{display:block}}
.lx-proof-row{display:grid;gap:28px 48px;margin-top:clamp(40px,6vw,64px)}
@media(min-width:960px){.lx-proof-row{grid-template-columns:auto 1fr;align-items:center}}
.lx-proof-row .lx-tons{margin-top:0}
.lx-proof-row .lx-award{margin-top:0}
.lx-markets--compact{columns:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin-top:clamp(28px,4vw,44px)}
@media(min-width:760px){.lx-markets--compact{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){
  .xm-route{stroke-dashoffset:0}.xm-dest,.xm-label{opacity:1}.xm-movers{display:none}.xm-origin-ring{animation:none}
}

/* ---------- hero C: split — navy text panel + framed product film ---------- */
.lx-hero--split{display:grid;align-items:stretch;min-height:100svh}
.lx-hero--split::before{display:none}
.lx-hero--split .lx-hero__media{position:relative;inset:auto;z-index:0;min-height:48svh;background:var(--porcelain)}
.lx-hero--split .lx-hero__media video,.lx-hero--split .lx-hero__media img{position:absolute;inset:0;object-position:22% 50%}
.lx-hero--split .lx-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,30,52,.55) 0%,rgba(14,30,52,0) 22%);pointer-events:none}
.lx-hero--split .lx-hero__inner{display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,96px) var(--gutter) clamp(40px,5vw,72px)}
.lx-hero--split h1{font-size:clamp(2.4rem,4vw,4.25rem);line-height:1.04;max-width:14ch}
@media(max-width:959px){.lx-hero--split .lx-hero__media{order:-1;min-height:38svh}.lx-hero--split .lx-hero__inner{padding-top:28px}}
@media(min-width:960px){
  .lx-hero--split{grid-template-columns:1fr 1.05fr}
  .lx-hero--split .lx-hero__media{order:2;min-height:auto}
  .lx-hero--split .lx-hero__media::after{background:linear-gradient(90deg,rgba(14,30,52,.35) 0%,rgba(14,30,52,0) 18%),linear-gradient(180deg,rgba(14,30,52,.5) 0%,rgba(14,30,52,0) 16%)}
  .lx-hero--split .lx-hero__inner{padding-top:140px;padding-left:max(var(--gutter),calc((100vw - 1320px)/2))}
}

/* ---------- Japanese pages: Mincho display, no negative tracking, calmer sizes ---------- */
html[lang="ja"] .lx-hero h1,html[lang="ja"] .lx-h2,html[lang="ja"] .lx h3,html[lang="ja"] .lx-offer p,html[lang="ja"] .lx-pillars,html[lang="ja"] .lx-strengths dt{font-family:var(--mincho);font-weight:700;font-variation-settings:normal;letter-spacing:.02em}
html[lang="ja"] .lx-hero h1{font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.35;max-width:none}
html[lang="ja"] .lx-h2{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.4}
html[lang="ja"] .lx-lead,html[lang="ja"] .lx p{line-height:1.9}
html[lang="ja"] .lx-marquee__track span{font-family:var(--mincho)}
html[lang="ja"] .xm-label,html[lang="ja"] .xm-origin-label{font-family:var(--gothic)}
.lx-en{font-family:var(--serif);font-style:italic;letter-spacing:.01em}
.lx-num small{font-size:.5em;margin-left:2px;font-family:var(--gothic)}
@media(max-width:760px){html[lang="ja"] .lx-hero h1{font-size:clamp(1.8rem,8.4vw,2.4rem)}}
html[lang="ja"] .lx-h2,html[lang="ja"] .lx-hero h1,html[lang="ja"] .lx h3{max-width:none;word-break:auto-phrase;text-wrap:pretty}
html[lang="ja"] .lx-pillars,html[lang="ja"] .lx-hero h1 em{font-style:normal}

/* skip link + film grain on dark grounds (taste audit: no sterile flat fills) */
.skip-link{position:fixed;left:16px;top:-60px;z-index:1000;padding:12px 18px;background:var(--gold);color:var(--night);font-weight:600;border-radius:2px;transition:top .2s var(--ease)}
.skip-link:focus{top:12px}
.lx-sec--night,.lx-sec--navy,.pg-sec--night,.pg-sec--navy,.pg-hero,.pg-final,.lx-foot{position:relative}
.lx-sec--night::after,.lx-sec--navy::after,.pg-sec--night::after,.pg-sec--navy::after,.pg-final::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* risk reversal under primary CTAs (loss aversion / zero-risk bias) */
.lx-risk{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:.88rem;color:var(--on-2)}
.lx-risk span{display:inline-flex;align-items:center;gap:8px}
.lx-risk span::before{content:"";width:12px;height:7px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg) translateY(-2px)}
.pg-sec--light .lx-risk,.pg-sec--white .lx-risk,.ct-form .lx-risk,.lx-sec--light .lx-risk,.lx-sec--white .lx-risk{color:var(--ink-2)}
.pg-sec--light .lx-risk span::before,.ct-form .lx-risk span::before,.lx-sec--white .lx-risk span::before{border-color:var(--gold-2)}

/* ================================================================
   FEEL: "warm luxury" (hospitality-luxury: Aman / ryokan). Toggle with ?feel=warm
   Same navy, silver, serif and content; softer radius, warm ivory grounds, value made visual.
   ================================================================ */
html[data-feel="warm"]{--porcelain:#fcf7ef;--frost:#f0eae0;--hair-l:rgba(19,39,65,.12);--r-s:6px;--r-m:10px;--r-l:14px}
html[data-feel="warm"] body{background:var(--night)}
html[data-feel="warm"] .lx-btn,html[data-feel="warm"] .btn,html[data-feel="warm"] .nav-links .nav-cta,html[data-feel="warm"] .pd-cta,html[data-feel="warm"] .pd-sticky__cta,html[data-feel="warm"] .pd-sticky__wa,html[data-feel="warm"] .lp1-btn,html[data-feel="warm"] .btn-inquire,html[data-feel="warm"] .cat-more-btn,html[data-feel="warm"] .inq-float-btn,html[data-feel="warm"] .f-btn,html[data-feel="warm"] .c-input,html[data-feel="warm"] .c-select,html[data-feel="warm"] .c-textarea,html[data-feel="warm"] .cat-search,html[data-feel="warm"] .cat-sort-sel{border-radius:var(--r-s)!important}
html[data-feel="warm"] .lx-fish__img,html[data-feel="warm"] .lx-step__fig,html[data-feel="warm"] .lx-also img,html[data-feel="warm"] .prod-card,html[data-feel="warm"] .pd-img-wrap,html[data-feel="warm"] .pd-rel-img,html[data-feel="warm"] .pg-card,html[data-feel="warm"] .pg-route,html[data-feel="warm"] .pg-fill,html[data-feel="warm"] .ct-form,html[data-feel="warm"] .lp1-map,html[data-feel="warm"] .lp1-species>li,html[data-feel="warm"] .lp1-steps li,html[data-feel="warm"] .lp1-badges li,html[data-feel="warm"] .lp1-figures div,html[data-feel="warm"] .lp1-table,html[data-feel="warm"] .pg-letter figure,html[data-feel="warm"] .lp-flight figure,html[data-feel="warm"] .lx-route,html[data-feel="warm"] .lx-offer,html[data-feel="warm"] .xm-wrap,html[data-feel="warm"] .pg-map iframe,html[data-feel="warm"] .lx-bars img,html[data-feel="warm"] .lp1-species img,html[data-feel="warm"] .pd-sticky img{border-radius:var(--r-m);overflow:hidden}
html[data-feel="warm"] .lp1-hero__stage{border-radius:0}
html[data-feel="warm"] .prod-card,html[data-feel="warm"] .pg-card,html[data-feel="warm"] .lx-route,html[data-feel="warm"] .lp1-species>li,html[data-feel="warm"] .lp1-steps li{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
html[data-feel="warm"] .prod-card:hover,html[data-feel="warm"] .lp1-species>li:hover,html[data-feel="warm"] .lx-route--us:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(19,39,65,.35)}
html[data-feel="warm"] .lx-route--us{box-shadow:0 0 0 1.5px var(--gold-2),0 24px 48px -30px rgba(19,39,65,.45)}
html[data-feel="warm"] .lx-route--us p{font-weight:600;color:var(--ink)}
html[data-feel="warm"] .lx-offer{background:var(--navy);box-shadow:0 24px 50px -30px rgba(19,39,65,.55)}
html[data-feel="warm"] .lx-sec--light,html[data-feel="warm"] .pg-sec--light,html[data-feel="warm"] .cat-card,html[data-feel="warm"] .pd-hero,html[data-feel="warm"] .pd-facts,html[data-feel="warm"] .pd-related{background:var(--porcelain)}
html[data-feel="warm"] .lp1-src{background:linear-gradient(180deg,#fcf7ef 0%,#fff 100%)}
html[data-feel="warm"] .lx-step__fig img,html[data-feel="warm"] .lx-fish img{border-radius:inherit}
@media(prefers-reduced-motion:reduce){html[data-feel="warm"] .prod-card:hover,html[data-feel="warm"] .lp1-species>li:hover{transform:none}}

/* ---- palette B preview (?palette=b): darker navy, lighter warm cream ---- */
html[data-palette="b"]{--night:#09172a;--navy:#10223a;--navy-2:#193150;--ink:#0e2036}
html[data-palette="b"][data-feel="warm"],html[data-palette="b"]{--porcelain:#fcf7ef;--frost:#f0eae0}
html[data-palette="b"] .xm-land{fill:#1d3858;stroke:#2b4b74}
html[data-palette="b"] .lp1-src{background:linear-gradient(180deg,#fcf7ef 0%,#fff 100%)}
.lx-markets a{display:block;color:inherit;text-decoration:none}
.lx-markets a b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--hair-d)}
.lx-markets a:hover b{text-decoration-color:var(--gold)}
.lx-supplier-facts b,.lx-supplier-facts dt{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--ink)}
.lx-supplier-facts dd{margin:8px 0 0;color:var(--ink-2)}

/* ---------- page-load intro (first visit per session): monotone emblem draws, wordmark settles, curtain lifts ---------- */
.ai-intro{display:none}
html.has-intro .ai-intro{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;background:var(--night);color:#ece6da;transition:opacity .9s var(--ease),visibility .9s;cursor:pointer;animation:ai-out .9s ease 4s forwards}
@keyframes ai-out{to{opacity:0;visibility:hidden}}
html.has-intro.intro-done .ai-intro{opacity:0;visibility:hidden}
.ai-intro__in{display:grid;justify-items:center;gap:22px;text-align:center}
.ai-intro svg{width:clamp(92px,11vw,132px);height:auto;overflow:visible}
.ai-intro .lg-ring{stroke-dasharray:1;stroke-dashoffset:1;animation:ai-draw 1.15s var(--ease) .15s forwards;transform-origin:center;transform:rotate(-90deg)}
.ai-intro .lg-swirl{opacity:0;animation:ai-fade .8s var(--ease) .7s forwards}
.ai-intro__word{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2.8vw,2rem);letter-spacing:.5em;text-transform:uppercase;opacity:0;animation:ai-word 1.1s var(--ease) 1s forwards;padding-left:.2em}
.ai-intro__tag{font-family:var(--sans);font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(236,230,218,.62);opacity:0;animation:ai-fade .8s var(--ease) 1.45s forwards}
.ai-intro__tag i{display:block;width:44px;height:1px;margin:0 auto 14px;background:currentColor;opacity:.6}
@keyframes ai-draw{to{stroke-dashoffset:0}}
@keyframes ai-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ai-word{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.2em}}
html[lang="ja"] .ai-intro__tag{font-family:var(--gothic);letter-spacing:.3em}
@media(prefers-reduced-motion:reduce){html.has-intro .ai-intro{display:none}}

/* ===== Homepage cut-out fish (boss, 2026-10-02): compact v2 grid + background-free photos ===== */
.lx-gallery--cut .lx-fish__img{position:relative;display:grid;place-items:center;aspect-ratio:16/10;padding:6% 7%;
  background:radial-gradient(120% 90% at 50% 38%,#fbf6ee 0%,#f1e9dc 70%,#ebe2d3 100%);border:1px solid rgba(19,39,65,.06)}
.lx-gallery--cut .lx-fish__img::after{content:"";position:absolute;left:18%;right:18%;bottom:13%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,45,25,.22),rgba(60,45,25,0));filter:blur(4px);transition:transform .7s var(--ease),opacity .7s var(--ease)}
.lx-gallery--cut a.lx-fish img{position:relative;z-index:1;width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:contain;background:none;
  border-radius:0!important;filter:drop-shadow(0 14px 14px rgba(60,45,25,.18)) drop-shadow(0 3px 4px rgba(60,45,25,.14));transition:transform .8s var(--ease)}
.lx-gallery--cut .lx-fish:hover img{transform:translateY(-6px) rotate(-1.5deg) scale(1.03)}
.lx-gallery--cut .lx-fish:hover .lx-fish__img::after{transform:scaleX(.86);opacity:.7}

/* Kyushu farmed share: 3x2 (2x3 mobile) cut-out cards, staggered swim-in + bar fill + count-up */
.lx-share--farm{margin-top:clamp(40px,5vw,64px)}
.lx-share__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px}
.lx-share__head .note{margin:0;font-size:.8rem;color:var(--ink-3)}
.lx-farm{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.lx-farm a{display:flex;flex-direction:column;height:100%;padding:16px 18px 18px;color:var(--ink);background:rgba(255,255,255,.55);
  border:1px solid var(--hair-l);border-radius:var(--r-m,10px);transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease)}
.lx-farm a:hover{background:#fff;border-color:rgba(19,39,65,.2);transform:translateY(-3px)}
.lx-farm__fish{display:grid;place-items:center;height:clamp(64px,7vw,92px);margin-bottom:12px}
.lx-farm__fish img{max-width:88%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 10px rgba(60,45,25,.18)) drop-shadow(0 2px 3px rgba(60,45,25,.12));
  transition:transform .9s var(--ease) calc(var(--i,0)*90ms),opacity .9s var(--ease) calc(var(--i,0)*90ms)}
.lx-farm a:hover .lx-farm__fish img{transform:translateX(6px);transition-delay:0s}
.lx-farm__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lx-farm .name{font-weight:600;font-size:.95rem}
.lx-farm .pct{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.7rem);font-weight:500;font-variation-settings:"opsz" 20;line-height:1;font-variant-numeric:tabular-nums}
.lx-farm .track{display:block;height:4px;margin-top:12px;border-radius:4px;background:rgba(19,39,65,.08);overflow:hidden}
.lx-farm .fill{display:block;height:100%;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,var(--navy-2),var(--navy));
  transform-origin:left;transition:transform 1.3s var(--ease) calc(150ms + var(--i,0)*90ms)}
.lx-farm.is-pending .fill{transform:scaleX(0)}
.lx-farm.is-pending .lx-farm__fish img{opacity:0;transform:translateX(-22px)}
@media(max-width:700px){.lx-farm{grid-template-columns:repeat(2,1fr)}.lx-farm a{padding:12px 12px 14px}
  .lx-farm__row{flex-direction:column;align-items:flex-start;gap:6px}.lx-farm .name{font-size:.82rem;white-space:nowrap}.lx-farm .pct{font-size:1.5rem}
  .lx-gallery--cut .lx-fish__img{padding:5%}}
@media(prefers-reduced-motion:reduce){.lx-farm .fill,.lx-farm__fish img,.lx-gallery--cut img{transition:none}
  .lx-farm.is-pending .fill{transform:none}.lx-farm.is-pending .lx-farm__fish img{opacity:1;transform:none}}
html[lang="ja"] .lx-farm .name{font-family:var(--gothic)}

/* ===== Boss feedback 2026-10-02: hero spacing + compact morning ===== */
/* .lx p{margin:0} was eating the sub's top margin, so the h1 descenders touched it */
.lx-hero h1{font-size:clamp(2.4rem,5.2vw,4.7rem);line-height:1.1}
.lx-hero .lx-hero__sub{margin-top:clamp(22px,2.6vw,32px)}
.lx-hero .lx-hero__cta{align-items:center}
@media(max-width:760px){.lx-hero h1{font-size:clamp(2.3rem,10.5vw,3.1rem)}}

/* Morning: back to the vertical alternating timeline (boss liked it), compacted ~50% */
.lx-steps{margin-top:clamp(32px,4vw,52px);gap:clamp(28px,3.4vw,44px);position:relative}
.lx-steps .lx-step__fig{aspect-ratio:16/9}
.lx-steps .lx-step__time{font-size:clamp(2.6rem,4.6vw,4rem)}
.lx-steps .lx-step h3{font-size:clamp(1.3rem,1.9vw,1.7rem);margin-top:6px}
.lx-steps .lx-step p:not(.lx-step__time){margin-top:8px}
@media(min-width:900px){
  .lx-steps .lx-step{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}
  .lx-steps .lx-step__fig{max-height:300px;aspect-ratio:16/9}
  .lx-steps::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hair-d)}
  .lx-steps .lx-step > div{position:relative}
  .lx-steps .lx-step:nth-child(odd) > div{padding-left:4px}
  .lx-steps .lx-step:nth-child(even) > div{text-align:right;display:flex;flex-direction:column;align-items:flex-end}}
@media(max-width:899px){.lx-steps .lx-step{gap:14px}}
@media(min-width:1000px){#process .lx-morning__head{grid-template-columns:1.35fr 1fr;gap:48px}#process .lx-h2{max-width:22ch;font-size:clamp(2.2rem,3.6vw,3.3rem)}}
/* hero film montage (from /concept) */
.lx-films{background:var(--night)}
.lx-films video{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.lx-films video.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.lx-films video{transition:none}}
/* export map planes: visible glyphs instead of dots */
.xm-plane{fill:#fff;stroke:rgba(11,27,48,.55);stroke-width:.6;paint-order:stroke}
.xm-wrap.is-on .xm-movers{opacity:1}
/* Why Fukuoka species list: cut-out fish on a warm tile (matches homepage) */
.lp1-species img.lp1-cut{box-sizing:border-box;width:150px;height:100px;padding:10px 12px;object-fit:contain;
  background:radial-gradient(120% 90% at 50% 38%,#fbf6ee 0%,#f1e9dc 75%,#ebe2d3 100%);
  filter:drop-shadow(0 8px 8px rgba(60,45,25,.16));transition:transform .6s var(--ease)}
.lp1-species>li:hover img.lp1-cut{transform:translateX(4px) rotate(-1.5deg)}
@media(max-width:760px){.lp1-species img.lp1-cut{width:96px;height:64px;padding:6px 8px}}
@media(max-width:760px){
  ul.lp1-species>li{grid-template-columns:104px 1fr!important;gap:2px 14px!important;padding:12px!important}
  ul.lp1-species img.lp1-cut{grid-row:1/span 3;width:104px;height:72px}
  ul.lp1-species .pct{grid-row:3;grid-column:2;text-align:left;font-size:1.7rem;margin-top:6px;display:flex;align-items:baseline;gap:8px}
  ul.lp1-species .pct span{display:inline;margin:0;font-size:.66rem}}
/* footer: 3 tidy columns (Markets column removed, boss 2026-10-02) */
.lx-foot__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
@media(max-width:640px){.lx-foot__cols{grid-template-columns:1fr 1fr}.lx-foot__cols>div:last-child{grid-column:1/-1}}
.lx-foot .lx-foot__k{display:block;font-size:.78rem;color:var(--on-3);line-height:1.3}
.lx-foot li a:has(.lx-foot__k){flex-direction:column;align-items:flex-start;justify-content:center;padding:4px 0}
/* skip link: hide fully off-canvas (top:-60px could peek out on tall/JP renders) */
.skip-link{top:0!important;transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:translateY(12px)}
/* homepage restructure 2026-10-02: supplier photo + 3 steps inside the final harbor CTA */
.lx-supplier-fig{margin:32px 0 0;border-radius:var(--r-m,10px);overflow:hidden;aspect-ratio:3/2;background:var(--frost)}
.lx-supplier-fig img{display:block;width:100%;height:100%;object-fit:cover}
.lx-final__steps{list-style:none;counter-reset:st;margin:clamp(28px,3.5vw,40px) 0 clamp(28px,3vw,36px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:980px}
.lx-final__steps li{counter-increment:st;position:relative;padding:16px 18px 16px 52px;border:1px solid var(--hair-d);border-radius:var(--r-m,10px);background:rgba(11,27,48,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lx-final__steps li::before{content:counter(st);position:absolute;left:18px;top:13px;font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--gold-lt)}
.lx-final__steps b{display:block;color:var(--on);font-weight:600;font-size:.98rem}
.lx-final__steps span{display:block;margin-top:4px;color:var(--on-2);font-size:.86rem;line-height:1.5}
html[lang="ja"] .lx-final__steps b{font-family:var(--gothic)}
@media(max-width:760px){.lx-final__steps{grid-template-columns:1fr;gap:8px}.lx-final__steps li{padding:12px 14px 12px 46px}.lx-final__steps li::before{left:15px;top:11px}}
.lx-final .lx-lead{margin-top:18px}

/* ===== JP display typography (2026-10-02): Safari has no word-break:auto-phrase, so headlines broke mid-word.
   keep-all = break only at 、。 spaces and <wbr>; anywhere = safety valve for very long runs. Tight line-height for display text. */
html[lang="ja"] :is(h1,h2,h3,.lx-h2,.lx-offer p,.lgn-statement,.lgn-verdict,.pg-journey__verdict,.lx-final h2,.pg-hero h1,.rc-h1,.rc-sec-title,.lp1-h1,.lp1-h2,.lx-share h3,.lx-tons small){word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
html[lang="ja"] .lx .lx-offer p{font-size:clamp(1.45rem,2.6vw,2.1rem);line-height:1.45;letter-spacing:.03em}
html[lang="ja"] .lx .lx-offer small{display:block;margin-top:12px}
html[lang="ja"] :is(.lx-h2,.lx-final h2,.pg-hero h1,.lgn-verdict,.pg-journey__verdict){line-height:1.42}
/* homepage supplier block without photo: narrow intro, wide FAQ */
@media(min-width:960px){#supplier .pg-cols{grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:clamp(48px,6vw,96px)}
  #supplier .pg-cols>div:first-child{position:sticky;top:120px}}
#supplier .lx-h2{font-size:clamp(1.9rem,3.2vw,2.8rem)}
html[lang="ja"] #supplier .lx-h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}

/* fact-check source links (2026-10-05): visibly clickable, never louder than the note */
.note a,.pg-note a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.note a::after,.pg-note a::after{content:" \2197";font-size:.85em}
/* 2026-10-05 (Luca): morning timeline ~40% shorter on desktop — smaller photos hugging the centre line, tighter rhythm */
@media(min-width:900px){
  .lx-steps{gap:clamp(18px,2vw,26px)}
  .lx-steps .lx-step{gap:clamp(28px,3vw,48px)}
  .lx-steps .lx-step__fig{width:min(100%,340px);max-height:190px;justify-self:end}
  .lx-steps .lx-step:nth-child(even) .lx-step__fig{justify-self:start}
  .lx-steps .lx-step__time{font-size:clamp(2rem,3vw,2.8rem)}
  .lx-steps .lx-step h3{font-size:clamp(1.15rem,1.5vw,1.4rem);margin-top:4px}
  .lx-steps .lx-step p:not(.lx-step__time){margin-top:6px;font-size:.95rem}
}
/* 2026-10-05 (Luca): morning timeline a bit more compact on phones too — photo beside the text, same look */
@media(max-width:899px){
  .lx-steps{gap:22px}
  .lx-steps .lx-step{grid-template-columns:42% minmax(0,1fr);gap:14px;align-items:center}
  .lx-steps .lx-step__fig{aspect-ratio:4/3}
  .lx-steps .lx-step__time{font-size:2rem}
  .lx-steps .lx-step h3{font-size:1.08rem;margin-top:2px}
  .lx-steps .lx-step p:not(.lx-step__time){margin-top:4px;font-size:.86rem;line-height:1.5}
  .lx-steps .lx-step__now{font-size:.8rem;margin-top:8px}
}

/* ===== No.1 at Fukuoka Airport seal (confirmed Oct 2026) ===== */
.lx-hero__inner{position:relative}
.no1{position:absolute;right:0;top:50%;width:clamp(170px,15vw,230px);aspect-ratio:1;transform:translateY(-58%);display:block;border-radius:50%;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45));text-decoration:none;animation:no1-in 1.1s var(--ease) both}
html.has-intro .no1{animation-delay:2.3s}
.no1__svg{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
.no1::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;
  mix-blend-mode:soft-light;animation:no1-sheen 5.5s ease-in-out 3.2s infinite}
.no1__ring{transform-origin:110px 110px;animation:no1-spin 48s linear infinite}
.no1__ringtext{font-family:var(--sans);font-size:10.6px;font-weight:700;letter-spacing:.06em;fill:#0b1b30}
html[lang="ja"] .no1__ringtext{font-family:var(--gothic);font-size:10.2px;letter-spacing:.02em}
.no1__top{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;fill:#1d5fa6;text-transform:uppercase}
html[lang="ja"] .no1__top{font-family:var(--gothic);letter-spacing:.1em;font-size:13px}
.no1__big{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 30;font-size:58px;fill:#0b1b30;letter-spacing:-.02em}
.no1__sub{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:#334155;letter-spacing:.02em}
html[lang="ja"] .no1__sub{font-family:var(--gothic);font-size:11px}
.no1__ast{position:absolute;right:12%;top:30%;font-family:var(--serif);font-size:1.2rem;color:#0b1b30}
.no1:hover .no1__ring{animation-duration:12s}
@keyframes no1-spin{to{transform:rotate(360deg)}}
@keyframes no1-sheen{0%{background-position:120% 0}35%,100%{background-position:-60% 0}}
@keyframes no1-in{from{opacity:0;transform:translateY(-58%) scale(.6) rotate(-14deg)}to{opacity:1;transform:translateY(-58%) scale(1) rotate(0)}}
.no1-note{margin:14px 0 0;font-size:.74rem;line-height:1.5;color:var(--on-3);max-width:70ch}
html[lang="ja"] .no1-note{font-size:.72rem}
@media(max-width:999px){
  .no1{position:relative;right:auto;top:auto;transform:none;width:132px;margin:0 0 18px;animation-name:no1-in-m}
  @keyframes no1-in-m{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.no1,.no1::after,.no1__ring{animation:none}}
.no1__star{font-size:22px;fill:#1d5fa6}
html[lang="ja"] .no1__star{font-size:20px}

/* ===== No.1 as hero typography (replaces the round seal, Luca 2026-10-05: "the tag is lame") ===== */
.no1x{position:absolute;right:0;bottom:clamp(120px,14vw,190px);display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;color:var(--on);pointer-events:auto}
.no1x__big{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 30;font-size:clamp(8rem,17vw,15.5rem);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1.5px rgba(238,241,245,.85);
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%) no-repeat,
             linear-gradient(180deg,rgba(238,241,245,.16),rgba(205,211,219,.04));
  background-size:250% 100%,100% 100%;background-position:130% 0,0 0;-webkit-background-clip:text;background-clip:text;
  animation:no1x-in 1.2s var(--ease) both,no1x-sheen 6s ease-in-out 2.4s infinite;text-shadow:0 0 60px rgba(205,211,219,.12)}
html.has-intro .no1x__big{animation-delay:2.3s,4.6s}
.no1x__cap{margin-top:14px;text-align:right;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.6;color:var(--gold-lt);
  padding-top:12px;border-top:1px solid rgba(238,241,245,.35);animation:no1x-cap .9s var(--ease) both}
html.has-intro .no1x__cap{animation-delay:2.9s}
html[lang="ja"] .no1x__cap{font-family:var(--gothic);letter-spacing:.14em;font-size:.86rem}
.no1x__cap sup{font-size:.85em;margin-left:2px;letter-spacing:0}
.no1x:hover .no1x__big{-webkit-text-stroke-color:#fff}
@keyframes no1x-in{from{opacity:0;transform:translateY(24px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes no1x-cap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes no1x-sheen{0%{background-position:130% 0,0 0}40%,100%{background-position:-30% 0,0 0}}
@media(max-width:999px){
  .no1x{position:relative;right:auto;bottom:auto;align-items:flex-start;margin:0 0 22px}
  .no1x__big{font-size:clamp(5.4rem,26vw,8rem);-webkit-text-stroke-width:1.2px}
  .no1x__cap{text-align:left;font-size:.7rem;margin-top:10px;padding-top:9px}}
@media(prefers-reduced-motion:reduce){.no1x__big,.no1x__cap{animation:none}}

/* ===== Hero 2-column on desktop (2026-10-05): No.1 sits beside the headline block, same placement EN + JP ===== */
@media(min-width:1000px){
  .lx-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4vw,72px);align-items:center}
  .lx-hero__inner>*{grid-column:1}
  .lx-hero__inner>.no1x{grid-column:2;grid-row:1 / span 3;position:static;align-self:center;justify-self:end;margin:0}
  .lx-hero__inner>.lx-trust,.lx-hero__inner>.no1-note{grid-column:1 / -1}
  .no1x__big{font-size:clamp(7.5rem,13vw,13.5rem)}
  .no1x__cap{align-self:stretch;margin-top:18px}
}
@media(min-width:1000px){html[lang="ja"] .lx-hero h1{font-size:clamp(2.1rem,3.3vw,3.4rem)}}
/* No.1 removed from the hero (Luca 2026-10-05): back to the single-column hero */
@media(min-width:1000px){.lx-hero__inner{display:block}}