/* 首頁專用（v2：滿版情境主視覺、到府路線、型錄細線格、固定紙色面板） */
section{position:relative}

/* ===== 主視覺：一張滿版情境圖 =====
   標題放在左側三分之一（產圖時已要求左側留白），底下墊一層由左往右淡出的紙色讓字壓得住；圖片載入後慢慢收回 */
.hero{position:relative;height:calc(100svh - var(--header));min-height:560px;max-height:1000px;overflow:hidden;background:var(--canvas)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:hero-settle 2.6s var(--ease-out) both}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,247,241,.92) 0%,rgba(251,247,241,.78) 28%,rgba(251,247,241,.3) 48%,rgba(251,247,241,0) 62%);pointer-events:none}
.hero-copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;width:var(--container);margin-inline:auto}
.hero h1{font-size:var(--h1);line-height:1.12;letter-spacing:.08em;font-weight:900}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln:nth-child(2){animation-delay:.5s}
.hero-sub{margin-top:clamp(14px,1.8vw,24px);font-size:clamp(16px,1.4vw,21px);line-height:1.8;color:var(--ink-soft);letter-spacing:.04em;animation:fade-up var(--dur-in) var(--ease-out) .7s both}
.hero-sub span{display:inline-block;white-space:nowrap}
.hero-sub .sep{color:var(--tan)}
.js .hero h1 .ln{animation:fade-up var(--dur-in) var(--ease-out) .3s both}
@keyframes hero-settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translate3d(0,var(--rise),0)}to{opacity:1;transform:none}}

/* ===== 關於：型錄開頁——標題左、內文右，底下一張寬幅家人照由中線向兩側翻開 ===== */
/* 關於：標題獨佔一行（固定折成兩行），兩段內文左右並排、字放大，按鈕在下 */
.about .sec-head{grid-template-columns:1fr;gap:28px}
.about .sec-head h2{max-width:12em}
.about-copy{display:grid;grid-template-columns:1fr 1fr;gap:16px clamp(32px,5vw,80px);align-items:start}
.about-copy p{color:var(--ink-soft);font-size:clamp(18px,1.3vw,20px);line-height:1.9}
.about-copy{margin-bottom:8px}
.about-wide{overflow:hidden;border-radius:var(--radius)}
.about-wide img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 35%}

/* ===== 收購：三優勢細線格＋到府路線 ===== */
.sell{background:var(--canvas)}
.sell-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.sell-card{padding:clamp(20px,2vw,32px)}
.sell-card-media{overflow:hidden;border-radius:var(--radius)}
.sell-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease-out)}
.sell-card:hover img{transform:scale(1.04)}
.sell-card h3{margin:22px 0 10px;font-size:clamp(21px,1.7vw,25px)}
.sell-card p{color:var(--muted);font-size:var(--small)}
/* 到府路線：一條路、四個站、一台貨車隨捲動開過去（Wayfinder） */
.route{margin-top:clamp(72px,8vw,120px)}
.route-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.route-head h3{font-size:var(--h2-sub)}
.route-head p{font-size:var(--small);color:var(--muted)}
.road-wrap{position:relative;--p:.125}
.road{position:relative;height:var(--road-h);margin:0 calc(var(--road-h) * .6)}
.road:before,.road:after{content:"";position:absolute;left:0;right:0;height:var(--hair);background:var(--line-strong)}
.road:before{top:0}.road:after{bottom:0}
.road-dash{position:absolute;left:0;right:0;top:50%;height:0;border-top:2px dashed var(--tan)}
.stop{position:absolute;top:50%;left:var(--s);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--paper);border:2px solid var(--line-strong);transition:background .3s,border-color .3s}
.stop.is-passed{background:var(--brand);border-color:var(--brand)}
.truck{position:absolute;top:50%;left:calc(var(--p) * 100%);width:calc(var(--road-h) * 1.1);transform:translate(-50%,-50%);color:var(--ink);transition:left .12s linear}
.truck svg{display:block;width:100%;height:auto;overflow:visible}
.truck .smoke{opacity:0;transform-origin:center;animation:smoke 1.2s ease-out infinite}
.road-wrap.is-moving .truck .smoke{opacity:.5}
@keyframes smoke{from{transform:translate(0,0) scale(.6);opacity:.5}to{transform:translate(-14px,-10px) scale(1.4);opacity:0}}
.route-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:28px}
.route-steps li{position:relative;padding-top:14px}
.route-steps li:before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:var(--line-strong);transition:background .3s,width .4s}
.route-steps li.is-passed:before{background:var(--brand);width:48px}
.route-steps .no{display:block;font-family:var(--font);font-size:var(--caption);letter-spacing:.24em;color:var(--muted);margin-bottom:6px}
.route-steps h4{margin:0 0 8px;font-family:var(--font-head);font-size:clamp(20px,1.6vw,24px);font-weight:700}
.route-steps p{color:var(--muted);font-size:var(--small)}

/* ===== 販售：型錄細線格（OYLA）＋整新把關 ===== */
.shop-cats{grid-template-columns:repeat(5,minmax(0,1fr))}
.cat-card{display:flex;flex-direction:column;height:100%;padding:clamp(14px,1.4vw,22px)}
.cat-card .pic{display:block;overflow:hidden;background:var(--canvas)}
.cat-card img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease-out)}
.cat-card:hover img,.cat-card:focus-visible img{transform:scale(1.05)}
.cat-name{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;font-family:var(--font-head);font-weight:700;font-size:clamp(19px,1.5vw,24px)}
.cat-name:after{content:"→";font-family:var(--font);color:var(--brand);font-weight:400;transition:transform var(--ease)}
.cat-card:hover .cat-name{color:var(--brand-deep)}
.cat-card:hover .cat-name:after{transform:translateX(6px)}
.shop .section-actions{margin-top:48px}
.refurbish-sec{background:var(--canvas)}
.refurbish{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.refurbish-media{overflow:hidden;border-radius:var(--radius)}
.refurbish-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.refurbish h2{font-size:clamp(28px,2.8vw,44px);line-height:1.35;margin-bottom:18px}
.refurbish-copy>p{color:var(--muted)}
.care-list{margin-top:22px;border-top:var(--hair) solid var(--line-strong)}
.care-list li{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:14px 0;border-bottom:var(--hair) solid var(--line-strong)}
.care-list b{font-weight:700}
.care-list span{color:var(--muted)}
.refurbish-note{margin-top:18px;color:var(--ink)!important;font-weight:500}

/* ===== 顧客訪談：區標在上，下面一塊 16:9 影片框（官方橫式縮圖，兩側是模糊同畫面）===== */
.voice{background:var(--paper)}
.video-wide{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--ink);box-shadow:0 24px 50px var(--shadow)}
.video-wide img{width:100%;aspect-ratio:21/9;max-height:460px;object-fit:cover;object-position:50% 42%;transition:transform .8s var(--ease-out)}
.video-wide:hover img,.video-wide:focus-visible img{transform:scale(1.02)}
.video-label{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(14px,1.6vw,22px);padding:6px 14px;border-radius:999px;background:rgba(251,247,241,.92);font-size:var(--caption);letter-spacing:.2em;color:var(--ink)}
.play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--brand);box-shadow:0 8px 24px var(--shadow-deep);transition:transform var(--ease)}
.video-wide:hover .play{transform:scale(1.06)}
.play:after{content:"";position:absolute;left:36px;top:28px;border-style:solid;border-width:16px 0 16px 26px;border-color:var(--clear) var(--clear) var(--clear) var(--white)}

/* ===== 門市：實照滿版不壓暗，紙色面板固定在右側（文字直接出現）===== */
.store{position:relative;min-height:min(78vh,760px);width:100%;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;padding:clamp(48px,6vw,96px) clamp(16px,5vw,96px)}
.store-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.store:after{content:"";position:absolute;inset:0;z-index:-1;background:var(--photo-veil);pointer-events:none}
.store-panel{width:min(620px,100%);padding:clamp(32px,3.6vw,56px);background:var(--panel);box-shadow:0 30px 70px var(--shadow-deep);border-radius:var(--radius)}
.store-panel h2{font-size:clamp(28px,2.6vw,42px);line-height:1.3;margin-bottom:16px}
.store-panel .phrase{display:inline-block;white-space:nowrap}
.store-panel p{color:var(--ink-soft)}
.store-panel .section-actions{margin-top:32px;justify-content:center}

@media(max-width:1180px){
  .route-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:991px){
  .refurbish,.about-copy{grid-template-columns:1fr}
  .sell-cards{grid-template-columns:1fr 1fr}
  .store{min-height:0;display:block;padding:0}
  .store-bg{position:relative;height:auto;aspect-ratio:4/3}
  .store:after{display:none}
  .store-panel{width:auto;margin:-56px 20px 0;position:relative}
}
@media(max-width:767px){
  .hero{height:auto;min-height:0;max-height:none;background:var(--paper)}
  .hero-media{position:relative;aspect-ratio:4/5}
  .hero-media img{object-position:58% 50%}
  .hero:after{display:none}
  .hero-copy{position:static;transform:none;padding:28px 0 36px}
  .hero h1{letter-spacing:.06em}
  .hero h1 .ln{display:inline}
  .hero-sub span{display:block}
  .hero-sub .sep{display:none}
  .sell-cards{grid-template-columns:1fr}
  .route{margin-top:56px}
  .route-head{display:block}
  .route-head p{margin-top:6px}
  /* 手機：路線改直的，貨車往下開 */
  .road-wrap{display:grid;grid-template-columns:var(--road-h) 1fr;gap:16px}
  .road{height:auto;margin:0;align-self:stretch}
  .road:before,.road:after{left:auto;right:auto;top:0;bottom:0;width:var(--hair);height:auto}
  .road:before{left:0}.road:after{right:0}
  .road-dash{left:50%;right:auto;top:0;bottom:0;height:auto;border-top:0;border-left:2px dashed var(--tan)}
  .stop{left:50%;top:var(--s)}
  .truck{left:50%;top:calc(var(--p) * 100%);width:calc(var(--road-h) * .9);transform:translate(-50%,-50%) rotate(90deg);transition:top .12s linear}
  .route-steps{grid-template-columns:1fr;gap:28px;margin-top:0}
  .shop-cats{grid-template-columns:1fr}
  .cat-card{flex-direction:row;align-items:center;gap:18px;padding:12px}
  .cat-card .pic{width:36%;flex:none}
  .cat-card .cat-name{flex:1;padding-top:0}
  .care-list li{grid-template-columns:1fr;gap:4px}
  .play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .play:after{left:26px;top:20px;border-width:12px 0 12px 20px}
  .store-panel{margin:-40px 16px 0;padding:28px 22px}
  .store-panel .phrase{display:block}
}
@media(prefers-reduced-motion:reduce){
  .hero-media img,.hero h1 .ln,.hero-sub,.truck .smoke{animation:none}
  .road-wrap{--p:.875}
}
/* 沒有 JS：門市不釘住、面板直接在位；路線貨車停在終點 */
html:not(.js) .road-wrap{--p:.875}
html:not(.js) .stop{background:var(--brand);border-color:var(--brand)}