/* Homepage collection and brand story. Hero treatment below. */
.text-link { display:inline-flex; gap:1.2rem; align-items:center; padding:.6rem 0; color:var(--black); text-decoration:none; border-bottom:1px solid currentColor; font-size:1rem; font-weight:600; }
.text-link span:last-child { transition:transform .2s ease; }
.text-link:hover span:last-child { transform:translate(2px,-2px); }
.light-link { color:#fff; border-color:#666; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }
.small-label { display:block; font-size:.72rem; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.home-proof { background:#fff; border-bottom:1px solid var(--line); }
.home-proof-inner { display:grid; grid-template-columns:repeat(3,1fr); padding-block:1.5rem; gap:1rem; }
.home-proof-inner>span { font-size:.88rem; text-align:center; }
.home-proof-inner>span+span { border-left:1px solid var(--line); }
.home-section { padding-block:clamp(3.5rem,7vw,6.5rem); }
.home-section h2 { margin:0; font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.08; font-weight:650; letter-spacing:-.04em; text-wrap:balance; }
.home-section-head { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; }
.home-section-head h2 { max-width:15em; }
.home-section-head>.text-link { flex:none; }
.home-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.home-product { display:block; color:inherit; text-decoration:none; min-width:0; }
.home-pack-shot { position:relative; display:grid; place-items:center; height:335px; background:#f1efeb; overflow:hidden; }
.product-index { position:absolute; left:1.3rem; top:1.1rem; color:#77756e; font:500 .75rem var(--sans); }
.home-pack-shot img { height:230px; width:auto; max-width:70%; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease; }
.home-product:nth-child(2) .home-pack-shot { background:#f2eceb; }
.home-product:nth-child(3) .home-pack-shot { background:#efede8; }
.home-product:hover img { transform:translateY(-6px) rotate(-3deg); }
.home-product-info { padding-top:1.35rem; }
.home-product-info .small-label { color:#65635e; margin:0 0 .45rem; }
.home-product h3 { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0; font:650 1.65rem/1.2 var(--display); letter-spacing:-.035em; }
.home-product h3>span:last-child { font:400 1.3rem var(--sans); }
.home-product-info>p:last-child { margin:.65rem 0 0; max-width:29ch; color:#65635e; font-size:1rem; }
.home-craft { background:var(--black); color:#fff; }
.home-craft-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem); align-items:center; }
.home-craft .kicker { color:#b9b8b3; }
.home-craft h2 span { display:block; }
.home-craft h2 span:last-child { color:var(--orange); }
.home-craft-copy>p:not(.kicker) { max-width:32rem; margin:1.5rem 0; color:#b9b8b3; line-height:1.7; }
.home-process-list { list-style:none; margin:0; padding:0; }
.home-process-list li { position:relative; display:flex; gap:1.35rem; padding:1.8rem 0; border-top:1px solid #3a3a37; }
.home-process-list li:last-child { border-bottom:1px solid #3a3a37; }
.home-process-list li>span:first-child { color:var(--orange); font-size:.8rem; padding-top:.3rem; }
.home-process-list strong { font:600 1.45rem var(--display); letter-spacing:-.025em; }
.home-process-list p { font-size:.97rem; line-height:1.5; color:#b9b8b3; margin:.5rem 0 0; max-width:31ch; }
.process-time { position:absolute; right:0; top:2.1rem; color:#b9b8b3; font-size:.72rem; }
.home-process-list li:first-child strong { padding-right:6rem; }
.home-factory-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.home-factory figure { margin:0; }
.home-factory figure img { display:block; width:100%; aspect-ratio:1.35; object-fit:cover; }
.home-factory figcaption { display:flex; align-items:center; gap:.6rem; font-size:.8rem; padding-top:1rem; color:#65635e; }
.home-factory-grid>div>p:not(.kicker) { margin:1.4rem 0; color:#65635e; line-height:1.7; }
.home-china-link { display:flex; justify-content:space-between; max-width:21rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); color:#65635e; font-size:.88rem; text-decoration:none; }
.home-partner { padding-block:4rem; background:var(--orange); color:var(--black); overflow:hidden; }
.home-partner-inner { display:grid; grid-template-columns:1fr 18rem; gap:3rem; align-items:center; }
.home-partner .kicker::before { background:var(--black); }
.home-partner h2 { max-width:15em; font-size:clamp(2.5rem,4.5vw,4rem); line-height:1.05; margin:0; }
.home-partner p:not(.kicker) { margin:1.25rem 0 1.6rem; }
.home-partner .btn { background:var(--black); color:#fff; border-color:var(--black); gap:2rem; }
.home-mascot { width:170px; height:auto; max-height:240px; object-fit:contain; justify-self:center; transform:rotate(8deg); }
@media(max-width:1079px) {
  .home-product-grid { gap:1rem; }
  .home-pack-shot { height:290px; }
  .home-pack-shot img { height:210px; }
  .process-time { position:static; margin-left:auto; padding-top:.4rem; white-space:nowrap; }
  .home-process-list li:first-child strong { padding-right:0; }
}
@media(max-width:759px) {
  .home-proof-inner { grid-template-columns:1fr; gap:.65rem; padding-block:1.3rem; }
  .home-proof-inner>span { font-size:.85rem; }
  .home-proof-inner>span+span { border:0; }
  .home-section-head { align-items:start; flex-direction:column; gap:1rem; margin-bottom:1.75rem; }
  .home-product-grid { grid-template-columns:1fr; gap:2.5rem; }
  .home-pack-shot { height:310px; }
  .home-pack-shot img { height:230px; }
  .home-product-info>p:last-child { max-width:none; }
  .home-craft-grid,.home-factory-grid { grid-template-columns:1fr; gap:2.5rem; }
  .home-process-list li { gap:1rem; }
  .process-time { position:absolute; top:2.1rem; right:0; }
  .home-process-list li:first-child strong { padding-right:5.7rem; }
  .home-process-list strong { font-size:1.25rem; }
  .home-partner { padding-block:3rem; }
  .home-partner-inner { grid-template-columns:1fr 65px; gap:1rem; }
  .home-partner-inner>div { min-width:0; }
  .home-partner h2 { font-size:2.4rem; }
  .home-partner .kicker { font-size:.67rem; letter-spacing:.08em; }
  .home-mascot { width:85px; max-width:none; align-self:end; margin-bottom:.5rem; }
}
@media(prefers-reduced-motion:reduce) {
  .home-pack-shot img,.text-link span:last-child { transition:none; }
}

/* Full photographic opening, adapted to RAMI's orange framing. */
.home-utility { height:36px; background:var(--orange); color:#111; font-size:.78rem; }
.home-utility>.wrap { height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.home-utility a { color:inherit; font-weight:650; text-decoration:none; padding:.4rem 0; }
.home-page .site-header { position:absolute; top:36px; left:0; right:0; z-index:60; background:#1113; border-bottom:1px solid #ffffff26; color:#fff; box-shadow:none; }
.home-page .site-header.is-scrolled { position:fixed; top:0; background:#fff; color:var(--ink); border-color:var(--line); box-shadow:0 4px 20px #0000000a; }
.home-page .site-header:not(.is-scrolled) .logo { filter:brightness(0) invert(1); }
.home-page .site-header:not(.is-scrolled) .lang-switch button,.home-page .site-header:not(.is-scrolled) .menu-summary { color:#fff; }
.home-page .site-header:not(.is-scrolled) .menu-summary { border-color:#ffffff80; }
.home-page .menu-panel { color:var(--ink); }
.home-hero { position:relative; isolation:isolate; height:min(860px,calc(100svh - 36px)); min-height:680px; color:#fff; }
.home-hero-image { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.home-hero::after { position:absolute; z-index:-1; content:''; inset:55% 0 0; background:linear-gradient(transparent,#0009); pointer-events:none; }
.home-hero-frame { position:absolute; top:23%; left:max(2rem,calc((100vw - 76rem)/2)); width:min(45vw,620px); height:49%; border:5px solid var(--orange); }
.home-hero h1 { position:absolute; bottom:28px; left:24px; margin:0; max-width:none; font:750 clamp(3rem,5.3vw,4.8rem)/1.05 var(--display); letter-spacing:-.045em; }
.home-hero h1 span { display:table; width:max-content; max-width:calc(100vw - 5rem); padding:.04em .23em .09em; background:var(--orange); color:#fff; white-space:nowrap; }
.home-hero-bottom { position:absolute; left:0; right:0; bottom:2.1rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; }
.home-hero-bottom>p { max-width:28rem; margin:0; font-size:1.12rem; line-height:1.55; text-shadow:0 1px 8px #0009; }
.home-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.75rem; }
.home-hero-actions>.btn { background:#fff; color:var(--black); border-color:#fff; }
.home-hero .light-link { color:#fff; border-color:#ffffffa0; text-shadow:0 1px 8px #0009; }
html[lang="zh-Hans"] .home-hero h1 { font-family:var(--sans); font-size:clamp(2.8rem,5.2vw,4.8rem); letter-spacing:0; font-weight:750; line-height:1.1; }
@media(max-width:900px) {
  .home-hero { min-height:700px; }
  .home-hero-frame { left:1.5rem; width:58%; top:22%; height:46%; }
  .home-hero h1 { font-size:clamp(2.2rem,5.3vw,4rem); }
  .home-hero-bottom { align-items:start; flex-direction:column; gap:1rem; }
  .home-hero-bottom>p { max-width:28rem; }
}
@media(max-width:599px) {
  .home-utility { font-size:.7rem; }
  .home-hero { height:calc(100svh - 36px); min-height:730px; max-height:850px; }
  .home-hero-image { object-position:65% center; }
  .home-hero-frame { top:24%; left:1rem; width:calc(100% - 3rem); height:42%; border-width:3px; }
  .home-hero h1 { left:12px; bottom:26px; font-size:clamp(1.8rem,8vw,2.65rem); }
  .home-hero h1 span { max-width:calc(100vw - 3rem); }
  html[lang="zh-Hans"] .home-hero h1 { font-size:clamp(2.2rem,9vw,3.25rem); }
  .home-hero-bottom { bottom:1.6rem; gap:1rem; }
  .home-hero-bottom>p { font-size:1rem; max-width:27ch; }
  .home-hero-actions { flex-wrap:nowrap; gap:1.2rem; }
  .home-hero-actions .btn { font-size:.88rem; padding-inline:.8rem; }
  .home-hero-actions .text-link { font-size:.86rem; gap:.5rem; }
}

/* Serving photographs keep the existing coffee story tangible. */
.photo-source { display:contents; }
.home-serving .home-section-head>div>p { max-width:34rem; color:#66645f; margin:1.3rem 0 0; line-height:1.7; }
.serving-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.serving-grid figure { margin:0; min-width:0; }
.serving-grid figure:nth-child(2) { margin-top:4rem; }
.serving-grid img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.serving-grid figcaption { padding:1.3rem 0 0; }
.serving-grid h3 { margin:0 0 .5rem; font:600 1.8rem/1.2 var(--display); letter-spacing:-.03em; }
.serving-grid p { color:#66645f; font-size:1rem; max-width:32rem; margin:0; }
.serving-note { margin:2rem 0 0; font-size:.8rem; color:#74716b; }
@media(max-width:759px) {
  .serving-grid { grid-template-columns:1fr; gap:2.5rem; }
  .serving-grid figure:nth-child(2) { margin-top:0; }
  .serving-grid h3 { font-size:1.6rem; }
}