/* ===== DWLW CASA — 編輯感設計系統（IG 調性 / 低飽和 / 留白） ===== */
:root{
  /* 中性底 — 溫暖米白 */
  --paper:#f3efe7;
  --cream:#ece5d8;
  --ink:#26221f;
  --soft:#8d8276;        /* 低飽和灰褐 */
  --line:#e6dfd2;
  --dark:#1f1c19;        /* 近黑（深色區，仿 IG 標題卡） */
  /* 點綴：去飽和、克制使用 */
  --oxblood:#591413;     /* 品牌酒紅（名片正色 / 連結 / CTA） */
  --gold:#9a8a73;        /* 啞光金褐 */
  --accent:#591413;
  --accent-ink:#42100f;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"Noto Sans TC",sans-serif;background:var(--paper);color:var(--ink);line-height:1.85;-webkit-font-smoothing:antialiased;font-weight:300;}
.serif{font-family:"Cormorant Garamond","Noto Serif TC",serif;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1280px;margin:0 auto;padding:0 48px;}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 48px;background:rgba(243,239,231,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
nav .brand{height:28px;}nav .brand img{height:100%;width:auto;}
nav ul{display:flex;gap:32px;list-style:none;}
nav ul a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;color:var(--ink);}
nav ul a:hover,nav ul a.active{border-color:var(--gold);color:var(--accent-ink);}
nav .util{font-size:11.5px;letter-spacing:.16em;color:var(--soft);}
nav ul li{position:relative;}
nav .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(243,239,231,.97);backdrop-filter:blur(12px);border:1px solid var(--line);padding:16px 22px;margin:0;display:flex;flex-direction:column;gap:12px;min-width:200px;list-style:none;opacity:0;visibility:hidden;transition:.32s cubic-bezier(.16,1,.3,1);white-space:nowrap;z-index:60;box-shadow:0 18px 40px rgba(40,34,28,.08);}
nav ul li.has-sub:hover .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
nav .sub li{display:block;}
nav .sub a{font-size:12px;letter-spacing:.06em;text-transform:none;border:none;padding:0;color:var(--ink);}
nav .sub a:hover{border:none;color:var(--accent-ink);}
nav .util a:hover{color:var(--accent-ink);}
.nav-toggle,.burger{display:none;}

/* generic section */
section{padding:150px 0;}
.eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:16px;}
.s-title{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-weight:400;font-size:42px;text-align:center;letter-spacing:.02em;margin-bottom:14px;color:var(--ink);}
.s-sub{text-align:center;color:var(--soft);max-width:560px;margin:0 auto 64px;font-weight:300;font-size:14.5px;letter-spacing:.02em;}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
footer small{color:var(--soft);font-size:11px;letter-spacing:.08em;}
footer .fnav{display:flex;gap:22px;}
footer .fnav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);}
footer .fnav a:hover{color:var(--accent-ink);}

/* ---- HOME hero ---- */
header.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;padding:120px 24px 80px;}
header.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
header.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,28,25,.34),rgba(31,28,25,.5));}
.hero .logo-lg{height:124px;position:relative;z-index:2;margin-bottom:30px;}
.hero .logo-lg img{height:100%;width:auto;margin:0 auto;}
.hero .tag-en{position:relative;z-index:2;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:26px;color:#f3efe7;letter-spacing:.04em;margin-bottom:12px;}
.hero .tag-zh{position:relative;z-index:2;font-family:"Noto Serif TC",serif;font-weight:300;letter-spacing:.55em;font-size:13px;color:rgba(243,239,231,.82);padding-left:.55em;}
.hero .scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;font-size:10.5px;letter-spacing:.3em;color:rgba(243,239,231,.78);text-transform:uppercase;}
.hero .scroll span{display:block;width:1px;height:44px;background:rgba(243,239,231,.55);margin:10px auto 0;}

/* ---- 材質色彩橫幅（IG 式，顏色來自真實物件） ---- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.mosaic figure{position:relative;overflow:hidden;}
.mosaic img{width:100%;height:360px;object-fit:cover;transition:transform 1s ease;}
.mosaic figure:hover img{transform:scale(1.05);}
.mosaic figcaption{position:absolute;left:18px;bottom:15px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55);}
.mosaic figcaption b{display:block;font-family:"Noto Serif TC",serif;font-weight:400;font-size:15px;letter-spacing:.14em;margin-bottom:3px;}
.mosaic figcaption span{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.8;}
.mosaic-note{text-align:center;color:var(--soft);font-size:12.5px;letter-spacing:.06em;padding:26px 24px 0;font-weight:300;}
@media(max-width:600px){.mosaic{grid-template-columns:1fr 1fr;}.mosaic img{height:230px;}}

/* ---- works grid (home) — 全照片，無色塊 ---- */
.works{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.work{position:relative;overflow:hidden;display:block;aspect-ratio:4/3;background:var(--paper);}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease;}
.work:hover img{transform:scale(1.04);}
.work .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 30px;background:linear-gradient(transparent,rgba(20,16,12,.62));}
.work .cap h3{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-weight:500;font-size:27px;color:#fff;letter-spacing:.02em;}
.work .cap span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);}
.work .tagpop{position:absolute;top:16px;left:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;background:rgba(243,239,231,.92);color:var(--ink);padding:4px 11px;}
/* A1 — 編輯式 logo 卡，取代色塊 */
.work.card{background:var(--paper);}
.work.card .mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;font-size:20px;letter-spacing:.16em;color:var(--soft);text-transform:uppercase;}
.work.card .cap{background:linear-gradient(transparent,rgba(38,34,31,.1));}
.work.card .cap h3{color:var(--ink);}
.work.card .cap span{color:var(--soft);}

/* pillars feature — 左圖右文 */
.pillars-feature{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center;}
.pf-img{overflow:hidden;border-radius:2px;}
.pf-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform 1s ease;}
.pf-img:hover img{transform:scale(1.04);}
.pf-text .eyebrow{text-align:left;}
.pf-text h2{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-weight:400;font-size:37px;letter-spacing:.02em;text-align:left;line-height:1.25;margin-bottom:18px;}
.pf-text .lead{color:var(--soft);font-weight:300;font-size:15px;margin-bottom:36px;max-width:520px;}
.pf-item{padding:20px 0;border-top:1px solid var(--line);}
.pf-item:last-child{border-bottom:1px solid var(--line);}
.pf-item .h{display:flex;align-items:baseline;gap:14px;margin-bottom:4px;}
.pf-item h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:21px;letter-spacing:.03em;}
.pf-item .zh{font-family:"Noto Serif TC",serif;font-size:13px;letter-spacing:.16em;color:var(--gold);}
.pf-item p{font-size:13px;color:var(--soft);font-weight:300;}
@media(max-width:860px){.pillars-feature{grid-template-columns:1fr;gap:36px;}.pf-text h2{font-size:31px;}}

/* pillars — 單一啞光金，無多彩 */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pillar{background:var(--paper);border:1px solid var(--line);padding:48px 32px;text-align:center;transition:.3s;}
.pillar:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(40,34,28,.06);}
.pillar .ic{width:46px;height:46px;margin:0 auto 22px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px;}
.pillar h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:23px;letter-spacing:.04em;}
.pillar .zh{font-family:"Noto Serif TC",serif;font-size:13.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:12px;}
.pillar p{font-size:13px;color:var(--soft);font-weight:300;}

/* suppliers */
.sup-band{background:var(--paper);}
.sup-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;}
.sup-grid span{font-family:"Cormorant Garamond",serif;font-size:19px;letter-spacing:.06em;color:var(--gold);padding:0 24px;border-right:1px solid var(--line);}
.sup-grid span:last-child{border-right:none;}

/* service */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.step{text-align:center;padding:0 14px;position:relative;}
.step:not(:last-child)::after{content:"";position:absolute;top:24px;right:-2px;width:4px;height:4px;border-radius:50%;background:var(--gold);}
.step .n{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--accent-ink);width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:var(--paper);}
.step h4{font-family:"Noto Serif TC",serif;font-size:14.5px;letter-spacing:.1em;margin-bottom:4px;}
.step p{font-size:11.5px;color:var(--soft);font-weight:300;}

/* mission — 近黑（仿 IG 標題卡） */
.mission{background:var(--paper);color:var(--ink);text-align:center;padding:140px 0;}
.mission .nb{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:34px;}
.mission .big{font-family:"Noto Serif TC","Cormorant Garamond",serif;font-weight:400;font-size:29px;line-height:1.72;max-width:740px;margin:0 auto 30px;color:var(--ink);letter-spacing:.02em;}
.mission p{max-width:600px;margin:0 auto;color:var(--soft);font-weight:300;font-size:14.5px;line-height:1.95;}

/* contact */
.contact{text-align:center;padding-top:230px;}
.contact .logo-ft{height:84px;margin:0 auto 24px;}
.contact .logo-ft img{height:100%;width:auto;margin:0 auto;}
.contact .ctline{font-size:13.5px;color:var(--soft);letter-spacing:.06em;margin-bottom:6px;}
.contact .cta{display:inline-block;margin-top:22px;background:var(--accent);color:#fff;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:15px 42px;transition:.25s;}
.contact .cta:hover{background:var(--accent-ink);}

/* ---- inner page head（分頁標題帶） ---- */
.page-head{padding:172px 0 0;text-align:center;}
.page-head h1{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-weight:400;font-size:52px;letter-spacing:.02em;color:var(--ink);line-height:1.12;margin-bottom:18px;}
.page-head .lead{max-width:620px;margin:0 auto;color:var(--soft);font-weight:300;font-size:15px;letter-spacing:.02em;}
.page-head .rule{height:1px;background:var(--line);max-width:1180px;margin:60px auto 0;}
.center{text-align:center;}
.more-link{display:inline-block;margin-top:52px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);border-bottom:1px solid var(--gold);padding-bottom:5px;transition:.25s;}
.more-link:hover{border-color:var(--accent-ink);letter-spacing:.24em;}
@media(max-width:600px){.page-head h1{font-size:34px;}}

/* ===== PROJECT PAGE ===== */
.p-hero{height:90vh;min-height:580px;position:relative;display:flex;align-items:flex-end;overflow:hidden;}
.p-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.p-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(20,16,12,.66));}
.p-hero .inner{position:relative;z-index:2;color:#fff;padding:0 48px 58px;max-width:1280px;margin:0 auto;width:100%;}
.p-hero .ey{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,239,231,.78);margin-bottom:16px;}
.p-hero h1{font-family:"Cormorant Garamond","Noto Serif TC",serif;font-weight:400;font-size:60px;letter-spacing:.02em;line-height:1.08;margin-bottom:18px;}
.p-hero .meta{display:flex;flex-wrap:wrap;gap:28px;font-size:12px;letter-spacing:.12em;color:rgba(243,239,231,.9);text-transform:uppercase;}
.p-hero .meta b{color:#fff;font-weight:400;margin-right:8px;opacity:.6;}
.p-intro{max-width:740px;margin:0 auto;padding:96px 48px 36px;text-align:center;}
.p-intro p{font-size:17px;color:#5d5346;font-weight:300;line-height:1.95;letter-spacing:.01em;}
.p-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1280px;margin:54px auto 0;padding:0 48px;}
.p-gallery figure{overflow:hidden;background:var(--paper);}
.p-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s;}
.p-gallery figure:hover img{transform:scale(1.03);}
.p-gallery .full{grid-column:1/-1;}
.p-gallery figure.tall img{aspect-ratio:3/4;}
.p-gallery figure.wide img{aspect-ratio:16/10;}

/* get the look */
.getlook-sec{background:var(--paper);margin-top:40px;}
.gl-list{max-width:900px;margin:50px auto 0;}
.gl-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 4px;border-bottom:1px solid var(--line);}
.gl-row:first-child{border-top:1px solid var(--line);}
.gl-row .info{display:flex;flex-direction:column;}
.gl-row .brand{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
.gl-row .name{font-family:"Noto Sans TC",sans-serif;font-weight:400;font-size:16.5px;letter-spacing:.01em;color:var(--ink);}
.gl-row .cat{font-size:12px;color:var(--soft);min-width:120px;text-align:right;}
.gl-row .rm{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);min-width:90px;text-align:right;}
.gl-note{text-align:center;font-size:12.5px;color:var(--soft);margin-top:32px;letter-spacing:.04em;}

/* prev/next + cta */
.p-foot-cta{text-align:center;padding:96px 48px;}
.p-foot-cta .cta{display:inline-block;background:var(--accent);color:#fff;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:15px 42px;}
.p-foot-cta .cta:hover{background:var(--accent-ink);}
.p-foot-cta .back{display:block;margin-top:22px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);}

/* coming soon (A1) — 編輯式米卡，無色塊 */
.soon{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--soft);aspect-ratio:16/9;text-align:center;gap:18px;border:1px solid var(--line);}
.soon img{height:78px;width:auto;opacity:.55;}
.soon span{font-family:"Cormorant Garamond",serif;font-size:19px;letter-spacing:.06em;color:var(--soft);}

@media(max-width:980px){
  nav{flex-wrap:wrap;}
  .burger{display:flex;flex-direction:column;justify-content:space-between;width:26px;height:18px;cursor:pointer;padding:0;}
  .burger span{display:block;width:100%;height:2px;background:var(--gold);border-radius:2px;transition:.3s;}
  .nav-toggle:checked ~ .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-toggle:checked ~ .burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  nav .util{display:none;}
  nav ul{display:none;flex-basis:100%;width:100%;flex-direction:column;gap:0;order:3;margin-top:12px;}
  .nav-toggle:checked ~ ul{display:flex;}
  nav ul li{position:static;border-top:1px solid var(--line);}
  nav ul li > a{display:block;padding:14px 2px;border-bottom:none;}
  nav ul a.active,nav ul a:hover{border:none;color:var(--accent-ink);}
  nav .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;backdrop-filter:none;padding:4px 0 12px 16px;gap:12px;min-width:0;}
  .nav-toggle:checked ~ .util{display:block;flex-basis:100%;width:100%;order:4;border-top:1px solid var(--line);padding:14px 2px;}
  .pillars,.steps{grid-template-columns:1fr 1fr;}
  .p-hero h1{font-size:40px;}
  .wrap{padding:0 30px;}
}
@media(max-width:600px){
  .wrap{padding:0 22px;}
  .works,.p-gallery,.pillars{grid-template-columns:1fr;}
  .s-title{font-size:30px;}
}