/* ============================================================
   田馨室內裝潢 － 共用樣式
   線條方框設計語彙：細邊框、直角轉角標記、格線感
   ============================================================ */
:root{
  --ink:#211d18;
  --ink-2:#2b2620;
  --gray-900:#332c24;
  --gray-700:#5c5347;
  --gray-500:#8a8072;
  --gray-300:#c9c1b1;
  --gray-200:#e2dbcb;
  --gray-100:#efe9dc;
  --paper:#f6f3ea;
  --white:#ffffff;
  --line-c:rgba(33,29,24,0.14);
  --line-strong:rgba(33,29,24,0.5);
  --gold:#9c7c3f;
  --gold-dark:#7f6530;
  --seal:#8f2f2a;
  --line-green:#06C755;
  --line-green-dark:#05A648;
  --nav-h:84px;
  --nav-h-m:64px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Noto Sans TC', "Microsoft JhengHei", sans-serif;
  background:var(--paper);
  color:var(--gray-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.8;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; }
h1,h2,h3{ font-family:'Noto Serif TC','Noto Sans TC',serif; }
p{ margin:0; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ position:relative; scroll-margin-top:var(--nav-h); }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; color:var(--gold-dark); font-size:0.75rem; letter-spacing:0.32em; margin-bottom:16px; font-weight:600; text-transform:uppercase; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold-dark); display:inline-block; }
.sec-head{ text-align:center; max-width:660px; margin:0 auto 56px; }
.sec-head h2{ font-size:clamp(1.9rem,4vw,2.5rem); letter-spacing:0.06em; margin-bottom:16px; color:var(--ink); }
.sec-head p{ color:var(--gray-700); font-size:0.95rem; line-height:1.9; }
.accent{ color:var(--gold-dark); }

/* ===== Buttons ===== */
.btn-primary{
  display:inline-flex; align-items:center; gap:9px; background:var(--line-green); color:#fff;
  padding:15px 34px; letter-spacing:0.08em; font-weight:500; font-size:0.92rem; transition:background .3s ease, transform .3s ease;
}
.btn-primary:hover{ background:var(--line-green-dark); transform:translateY(-2px); }
.btn-outline{
  display:inline-flex; align-items:center; gap:9px; border:1px solid var(--ink); color:var(--ink);
  padding:14px 32px; letter-spacing:0.06em; font-size:0.92rem; transition:all .3s ease;
}
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-dark{
  display:inline-flex; align-items:center; gap:9px; background:var(--ink); color:#fff;
  padding:14px 32px; letter-spacing:0.06em; font-size:0.92rem; transition:all .3s ease;
}
.btn-dark:hover{ background:var(--gold-dark); }

/* ===== Nav ===== */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--nav-h);
  background:rgba(246,243,234,0);
  transition:background-color .35s ease, box-shadow .35s ease, height .3s ease;
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo{ display:flex; align-items:center; gap:11px; height:100%; flex-shrink:0; }
.nav-logo .mark{ width:40px; height:auto; flex-shrink:0; }
.nav-logo .word{ font-family:'Noto Serif TC',serif; font-size:1.18rem; letter-spacing:0.14em; color:var(--white); font-weight:700; transition:color .3s ease; }
#nav[data-scrolled] .nav-logo .word{ color:var(--ink); }
#nav[data-scrolled] { background:rgba(246,243,234,0.95); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line-c); }
.nav-links{ display:flex; align-items:center; gap:34px; flex:1; justify-content:center; }
.nav-links a{ font-size:0.9rem; letter-spacing:0.05em; color:var(--white); position:relative; transition:color .3s ease; text-shadow:0 1px 4px rgba(0,0,0,0.3); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-8px; width:0; height:1px; background:var(--gold); transition:width .3s ease; }
.nav-links a:hover::after,.nav-links a.is-active::after{ width:100%; }
#nav[data-scrolled] .nav-links a{ color:var(--gray-900); text-shadow:none; }
.nav-cta{ flex-shrink:0; }
.nav-cta a{
  display:inline-flex; align-items:center; gap:8px; background:var(--line-green); color:#fff;
  padding:11px 22px; font-size:0.88rem; font-weight:500; letter-spacing:0.04em; transition:background .3s ease;
}
.nav-cta a:hover{ background:var(--line-green-dark); }
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer; z-index:210; }
.hamburger span{ width:24px; height:2px; background:var(--white); transition:all .3s ease; }
#nav[data-scrolled] .hamburger span,.menu-open .hamburger span{ background:var(--ink); }
.mobile-menu{ display:none; position:fixed; inset:0; z-index:199; background:rgba(246,243,234,0.99); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity .35s ease; }
.mobile-menu.is-open{ opacity:1; visibility:visible; }
.mobile-menu-inner{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:24px; }
.mobile-menu a{ padding:15px 0; font-size:1.1rem; color:var(--ink); letter-spacing:0.06em; }
.mobile-menu a.mm-cta{ margin-top:18px; background:var(--line-green); color:#fff; padding:14px 44px; font-weight:500; }

@media (max-width:960px){
  :root{ --nav-h:64px; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .mobile-menu{ display:block; }
}

/* ===== Hero (首頁，滿版輪播) ===== */
.hero{ position:relative; height:100vh; min-height:600px; overflow:hidden; background:var(--ink); }
.hero-slider{ position:absolute; inset:0; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-slider .slide{ opacity:0; transform:scale(1); transition:opacity 1.6s ease; }
.hero-slider .slide.is-active{ opacity:1; animation:heroZoom 6s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,13,0.4) 0%, rgba(20,17,13,0) 32%, rgba(20,17,13,0) 55%, rgba(15,13,10,0.6) 100%); pointer-events:none; }
.hero-content{ position:relative; z-index:2; height:100%; display:grid; align-items:end; padding:0 8% 90px; }
.hero-card{
  grid-column:1; grid-row:1;
  justify-self:start;
  width:fit-content;
  display:none;
  background:rgba(20,17,13,0.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.16);
  padding:42px 46px;
  max-width:620px;
  transform:scale(0.9);
  transform-origin:bottom left;
}
.hero-card.is-active{
  display:block;
  animation:heroCardIn 6s ease-out forwards;
}
@keyframes heroCardIn{ from{ transform:scale(0.9); } to{ transform:scale(1); } }
.hero-card .rule{ width:56px; height:2px; background:var(--gold); margin-bottom:26px; }
.hero-card h1{ color:var(--white); font-size:clamp(2rem,4.2vw,3rem); letter-spacing:0.1em; margin-bottom:20px; line-height:1.4; }
.hero-card h1 span{ color:var(--gold); }
.hero-card .hero-sub{ color:var(--gray-300); font-size:clamp(0.92rem,1.6vw,1.02rem); letter-spacing:0.04em; margin-bottom:16px; line-height:2; }
.hero-card .hero-principles{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.hero-card .hero-principles span{ border:1px solid rgba(255,255,255,0.28); color:var(--gray-300); font-size:0.78rem; letter-spacing:0.12em; padding:6px 14px; }
.hero-btns{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero-tel{ display:inline-flex; align-items:center; gap:8px; color:var(--gray-300); font-size:0.86rem; letter-spacing:0.03em; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:3px; transition:color .3s ease, border-color .3s ease; }
.hero-tel:hover{ color:#fff; border-color:#fff; }

/* 方框相簿元件，保留供首頁其他區塊使用 */
.hero-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); aspect-ratio:1/1; }
.hero-grid .cell{ position:relative; overflow:hidden; background:var(--ink-2); }
.hero-grid .cell img{ width:100%; height:100%; object-fit:cover; opacity:0.92; filter:saturate(0.92); transition:transform .6s ease; }
.hero-grid .cell:hover img{ transform:scale(1.06); }
.hero-grid .cell .tag{ position:absolute; left:12px; bottom:12px; color:#fff; font-size:0.72rem; letter-spacing:0.15em; background:rgba(20,17,13,0.55); padding:5px 11px; backdrop-filter:blur(3px); }
.hero-grid::before{ content:""; position:absolute; top:-14px; left:-14px; width:44px; height:44px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); z-index:2; }
.hero-grid::after{ content:""; position:absolute; bottom:-14px; right:-14px; width:44px; height:44px; border-bottom:1px solid var(--gold); border-right:1px solid var(--gold); z-index:2; }

@media (max-width:600px){
  .hero-content{ align-items:flex-end; padding:0 20px 64px; }
  .hero-card{ padding:30px 26px; max-width:100%; }
  .hero-card .hero-sub,
  .hero-card .hero-principles{ display:none; }
  .hero-card h1{ margin-bottom:22px; }
  .hero-btns{ gap:16px 20px; }
  .hero-btns .btn-primary{ flex:1; justify-content:center; padding:14px 16px; font-size:0.85rem; white-space:nowrap; }
  .hero-tel{ font-size:0.82rem; }
  .hero-slider .slide:nth-child(1){ object-position:42% center; }
  .hero-slider .slide:nth-child(2){ object-position:78% center; }
}

/* ===== 副頁頁首 (about / cases) ===== */
.page-hero{ position:relative; background:var(--ink); padding:calc(var(--nav-h) + 90px) 0 80px; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--line-c) 1px, transparent 1px), linear-gradient(90deg, var(--line-c) 1px, transparent 1px);
  background-size:64px 64px; opacity:0.5;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .crumb{ color:var(--gray-300); font-size:0.8rem; letter-spacing:0.15em; margin-bottom:22px; }
.page-hero .crumb a:hover{ color:var(--gold); }
.page-hero h1{ color:#fff; font-size:clamp(2rem,4.4vw,3rem); letter-spacing:0.08em; margin-bottom:18px; }
.page-hero p{ color:var(--gray-300); font-size:0.98rem; max-width:900px; line-height:1.9; text-wrap:pretty; }
@media (max-width:600px){ .page-hero{ padding:calc(var(--nav-h-m) + 50px) 0 56px; } }
@media (max-width:600px){
  #smart-home .sec-head p:not(.eyebrow),
  #home-showcase .sec-head p:not(.eyebrow),
  #principles .sec-head p:not(.eyebrow),
  #services .sec-head p:not(.eyebrow),
  #featured-cases .sec-head p:not(.eyebrow),
  #faq .sec-head p:not(.eyebrow),
  #contact .sec-head p:not(.eyebrow),
  #credentials .sec-head p:not(.eyebrow){ text-align:left; }
}

/* ===== Reveal ===== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ===== 經營理念六大原則：單列階梯排列 ===== */
#principles{
  padding:110px 0; background:var(--white) url("../images/bg.png") no-repeat right -80px top 40px;
  background-size:520px auto;
  border-top:1px solid var(--line-c); border-bottom:1px solid var(--line-c);
}
@media (max-width:960px){
  #principles{
    background:var(--white) url("../images/bg.png") no-repeat right -50px top -20px;
    background-size:320px auto;
  }
}
@media (max-width:480px){
  #principles{ background-position:right -70px top -20px; background-size:240px auto; }
}
/* 整個階梯區塊只當作reveal的「觸發器」：進入視窗時只讓principle-grid本身拿到.in，
   容器自己不做淡入位移(蓋掉.reveal的opacity/transform)，實際動畫由底下卡片/連接線各自的
   transition-delay接力播放，效果跟scratchpad那份stair-line-demo.html測試頁一致 */
.principle-grid{ display:flex; flex-direction:column; position:relative; padding-bottom:28px; opacity:1; transform:none; transition:none; }

/* 階梯連接線：每個.stair-link是上一張卡到下一張卡之間的轉角空間(卡高112+間距28=140一階)，
   內含seg-h(橫線，先往右展開寬度)、seg-v(豎線，接著往下展開高度)、dot(轉角圓點)三個子元素，
   用寬高0→100%的transition做出「畫線」的效果，取代原本容易跟卡片位置對不齊的SVG路徑寫法 */
.stair-link{ position:absolute; z-index:0; width:8%; height:28px; pointer-events:none; }
.stair-link .seg-h{ position:absolute; top:0; left:0; height:2px; width:0; background:var(--gold); transition:width .3s ease; }
.stair-link .seg-v{ position:absolute; top:0; right:0; width:2px; height:0; background:var(--gold); transition:height .25s ease; }
.stair-link .dot{ position:absolute; right:-3px; bottom:-3px; width:8px; height:8px; border-radius:50%; background:var(--gold); opacity:0; transform:scale(0.3); transition:opacity .2s ease, transform .2s ease; }
.stair-link:nth-of-type(1){ top:112px; left:55px; }
.stair-link:nth-of-type(2){ top:252px; left:calc(8% + 55px); }
.stair-link:nth-of-type(3){ top:392px; left:calc(16% + 55px); }
.stair-link:nth-of-type(4){ top:532px; left:calc(24% + 55px); }
.stair-link:nth-of-type(5){ top:672px; left:calc(32% + 55px); }

.principle-grid.in .stair-link:nth-of-type(1) .seg-h{ transition-delay:.35s; width:100%; }
.principle-grid.in .stair-link:nth-of-type(1) .seg-v{ transition-delay:.65s; height:100%; }
.principle-grid.in .stair-link:nth-of-type(1) .dot{ transition-delay:.9s; opacity:1; transform:scale(1); }
.principle-grid.in .stair-link:nth-of-type(2) .seg-h{ transition-delay:1.3s; width:100%; }
.principle-grid.in .stair-link:nth-of-type(2) .seg-v{ transition-delay:1.6s; height:100%; }
.principle-grid.in .stair-link:nth-of-type(2) .dot{ transition-delay:1.85s; opacity:1; transform:scale(1); }
.principle-grid.in .stair-link:nth-of-type(3) .seg-h{ transition-delay:2.25s; width:100%; }
.principle-grid.in .stair-link:nth-of-type(3) .seg-v{ transition-delay:2.55s; height:100%; }
.principle-grid.in .stair-link:nth-of-type(3) .dot{ transition-delay:2.8s; opacity:1; transform:scale(1); }
.principle-grid.in .stair-link:nth-of-type(4) .seg-h{ transition-delay:3.2s; width:100%; }
.principle-grid.in .stair-link:nth-of-type(4) .seg-v{ transition-delay:3.5s; height:100%; }
.principle-grid.in .stair-link:nth-of-type(4) .dot{ transition-delay:3.75s; opacity:1; transform:scale(1); }
.principle-grid.in .stair-link:nth-of-type(5) .seg-h{ transition-delay:4.15s; width:100%; }
.principle-grid.in .stair-link:nth-of-type(5) .seg-v{ transition-delay:4.45s; height:100%; }
.principle-grid.in .stair-link:nth-of-type(5) .dot{ transition-delay:4.7s; opacity:1; transform:scale(1); }

/* 卡片改橫向排列(圖示在左/文字在右)，只留圖示方框，卡片本身不再加外框，跟手繪稿一致；
   每張卡預設opacity:0+位移，principle-grid拿到.in後依序淡入，時間點對應連接線畫到那一階的時刻 */
.principle-card{
  padding:0 30px; position:relative; z-index:1;
  transition:opacity .5s ease, transform .5s ease, background .3s ease;
  box-sizing:border-box; width:58%; height:112px;
  display:flex; align-items:center; gap:24px;
  opacity:0; transform:translateY(16px);
}
.principle-grid.in .principle-card{ opacity:1; transform:none; }
.principle-card + .principle-card{ margin-top:28px; }
.principle-card:hover{ background:var(--paper); }
.principle-card .glyph{ width:50px; height:50px; flex-shrink:0; border:1px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Noto Serif TC',serif; font-size:1.4rem; color:var(--ink); background:var(--white); }
.principle-text{ min-width:0; }
.principle-text h3{ font-size:1.02rem; letter-spacing:0.08em; color:var(--ink); margin-bottom:8px; }
.principle-text p{ color:var(--gray-700); font-size:0.84rem; line-height:1.65; }

/* 每張卡依序往右下階梯狀位移，讓整體像一道往下的樓梯；nth-of-type只算div，不受前面span影響；
   transition-delay直接接力：卡1立即出現，之後每張卡在前一段連接線畫完的時刻接著淡入 */
.principle-card:nth-of-type(1){ margin-left:0%; transition-delay:0s; }
.principle-card:nth-of-type(2){ margin-left:8%; transition-delay:.95s; }
.principle-card:nth-of-type(3){ margin-left:16%; transition-delay:1.9s; }
.principle-card:nth-of-type(4){ margin-left:24%; transition-delay:2.85s; }
.principle-card:nth-of-type(5){ margin-left:32%; transition-delay:3.8s; }
.principle-card:nth-of-type(6){ margin-left:40%; transition-delay:4.75s; }

@media (max-width:760px){
  /* 手機版改直向單欄堆疊(不再階梯狀往右位移)，卡片高度也改隨內容彈性(auto)；
     不需要接力淡入的節奏感，直接顯示即可，避免使用者要等5秒多才看到最後一張卡 */
  .principle-card,
  .principle-card:nth-of-type(1), .principle-card:nth-of-type(2), .principle-card:nth-of-type(3),
  .principle-card:nth-of-type(4), .principle-card:nth-of-type(5), .principle-card:nth-of-type(6){
    width:100%; height:auto; min-height:96px; padding:20px 24px; margin-left:0;
    opacity:1; transform:none; transition-delay:0s; position:relative;
  }
  .stair-link{ display:none; }
}
@media (max-width:480px){
  .principle-card{ gap:18px; }
}

@media (prefers-reduced-motion:reduce){
  .principle-card{ transition:none; opacity:1; transform:none; }
  .stair-link .seg-h,.stair-link .seg-v,.stair-link .dot{ transition:none; }
  .principle-grid.in .stair-link .seg-h{ width:100%; }
  .principle-grid.in .stair-link .seg-v{ height:100%; }
  .principle-grid.in .stair-link .dot{ opacity:1; transform:scale(1); }
}

/* ===== About preview / About page grid ===== */
#about-preview,#story{ padding:110px 0; }
#designer{
  padding:110px 0; background:var(--white) url("../images/bg.png") no-repeat right -60px top 50%;
  background-size:640px auto;
  border-top:1px solid var(--line-c); border-bottom:1px solid var(--line-c);
}
@media (max-width:960px){ #designer{ background-image:none; } }
#philosophy{ padding:100px 0; }
.philo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-c); border:1px solid var(--line-c); margin-top:50px; }
.philo-card{ background:var(--white); padding:36px 30px; }
.philo-card .no{ font-family:'Noto Serif TC',serif; color:var(--gold-dark); font-size:0.85rem; letter-spacing:0.1em; display:block; margin-bottom:16px; }
.philo-card h4{ font-size:1rem; color:var(--ink); margin-bottom:10px; letter-spacing:0.04em; }
.philo-card p{ color:var(--gray-700); font-size:0.88rem; line-height:1.9; }
@media (max-width:900px){ .philo-grid{ grid-template-columns:1fr; } }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; }
.about-media{ position:relative; }
.about-media .frame{ position:absolute; top:-16px; left:-16px; width:100%; height:100%; border:1px solid var(--gray-300); z-index:0; }
.about-media img{ position:relative; z-index:1; width:100%; object-fit:cover; }
.about-media .tag-chip{ position:absolute; z-index:2; bottom:-16px; right:-16px; background:var(--ink); color:#fff; font-size:0.78rem; letter-spacing:0.18em; padding:10px 20px; }
.about-quote{ font-size:1.12rem; line-height:1.95; color:var(--ink); font-weight:500; margin-bottom:22px; padding-left:22px; border-left:2px solid var(--gold); }
.about-text p{ color:var(--gray-700); font-size:0.94rem; line-height:2; margin-bottom:16px; }
@media (max-width:960px){
  .about-grid{ grid-template-columns:1fr; gap:50px; }
  .about-media{ order:-1; max-width:420px; margin:0 auto; }
}

/* ===== 本質學能 / credentials strip ===== */
.skill-strip{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.skill-strip span{ border:1px solid var(--line-c); color:var(--gray-700); font-size:0.8rem; letter-spacing:0.06em; padding:8px 16px; }

/* ===== 服務項目 ===== */
#services{ padding:110px 0; background:var(--ink); }
#services .sec-head h2{ color:#fff; }
#services .sec-head p{ color:var(--gray-300); }
#services .eyebrow{ color:var(--gold); }
#services .eyebrow::before{ background:var(--gold); }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); }
.service-card{ background:var(--ink); padding:34px 26px; transition:background .3s ease; }
.service-card:hover{ background:var(--ink-2); }
.service-card .num{ font-family:'Noto Serif TC',serif; color:var(--gold); font-size:0.85rem; letter-spacing:0.1em; margin-bottom:18px; display:block; }
.service-card h3{ color:#fff; font-size:0.98rem; letter-spacing:0.03em; margin-bottom:10px; line-height:1.6; }
.service-card p{ color:var(--gray-300); font-size:0.82rem; line-height:1.85; }
@media (max-width:960px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

/* ===== 房屋相簿 ===== */
#home-showcase{ padding:110px 0; background:var(--white); border-bottom:1px solid var(--line-c); }
.home-showcase__house{ position:relative; width:min(100%, 755px); margin:0 auto; aspect-ratio:640/620; }
.home-showcase__outline{ position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; }
.home-showcase__outline path{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.home-showcase__decor{ position:absolute; z-index:0; bottom:2%; width:15%; height:auto; pointer-events:none; opacity:.14; filter:invert(45%) sepia(11%) saturate(920%) hue-rotate(357deg) brightness(89%) contrast(84%); }
.home-showcase__decor--left{ left:-5%; }
.home-showcase__grid{ position:absolute; z-index:2; top:43%; left:19%; width:62%; aspect-ratio:4/3; background:var(--ink); border:2px solid var(--ink); gap:2px; box-shadow:0 10px 24px rgba(33,29,24,0.12); }
.home-showcase__grid::before,.home-showcase__grid::after{ display:none; }
.home-showcase__grid .cell{ display:block; padding:0; border:0; cursor:zoom-in; font:inherit; }
.home-showcase__grid .cell img{ transition:opacity .36s ease, transform .6s ease; }
.home-showcase__grid.is-changing .cell img{ opacity:0; transform:scale(0.96); }
.home-showcase__grid .cell::after{ content:""; position:absolute; inset:0; background:rgba(33,29,24,0); transition:background .35s ease; pointer-events:none; }
.home-showcase__grid .cell:hover::after{ background:rgba(33,29,24,0.14); }
.home-showcase__grid .cell:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; z-index:2; }
.home-showcase__dots{ position:absolute; z-index:3; top:27%; left:50%; display:flex; justify-content:center; align-items:center; gap:10px; margin:0; transform:translate(-50%,-50%); }
.home-showcase__dots button{ width:8px; height:8px; padding:0; border:1px solid var(--gray-500); border-radius:999px; background:transparent; cursor:pointer; transition:width .25s ease, background .25s ease, border-color .25s ease; }
.home-showcase__dots button.is-active{ width:26px; background:var(--gold-dark); border-color:var(--gold-dark); }
.home-showcase__dots button:focus-visible{ outline:2px solid var(--gold-dark); outline-offset:3px; }
.home-showcase__cta{ text-align:center; margin-top:42px; }
@media (max-width:600px){
  #home-showcase{ padding:82px 0; }
  .home-showcase__house{ width:min(100%, 500px); }
  .home-showcase__decor{ width:15%; bottom:2%; opacity:.14; }
  .home-showcase__decor--left{ left:-5%; }
  .home-showcase__grid{ border-width:1px; gap:1px; }
  .home-showcase__cta{ margin-top:30px; }
}

/* ===== VR虛擬實景 ===== */
#vr-tours{ padding:110px 0; background:var(--ink); }
#vr-tours .sec-head h2{ color:#fff; }
#vr-tours .sec-head p{ color:var(--gray-300); }
#vr-tours .eyebrow{ color:var(--gold); }
#vr-tours .eyebrow::before{ background:var(--gold); }
.vr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.vr-card{ position:relative; display:block; background:var(--ink-2); border:1px solid rgba(255,255,255,0.14); overflow:hidden; transition:box-shadow .3s ease, transform .3s ease; }
.vr-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.35); }
.vr-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.vr-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.vr-card:hover .vr-thumb img{ transform:scale(1.06); }
.vr-badge{ position:absolute; left:12px; top:12px; background:rgba(20,17,13,0.65); color:var(--gold); font-size:0.7rem; letter-spacing:0.12em; padding:5px 12px; backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,0.2); }
.vr-info{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vr-info h3{ color:#fff; font-size:0.88rem; letter-spacing:0.02em; line-height:1.6; }
.vr-info .vr-link{ color:var(--gray-300); font-size:0.75rem; flex-shrink:0; transition:color .3s ease; }
.vr-card:hover .vr-info .vr-link{ color:var(--gold); }
@media (max-width:960px){ .vr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .vr-grid{ grid-template-columns:1fr; } }

/* ===== 智慧宅案例 ===== */
#smart-home{ padding:110px 0; background:var(--white); border-bottom:1px solid var(--line-c); }
@media (max-width:600px){ #smart-home{ padding:82px 0; } }

/* ===== 精選案例 / 影片 ===== */
#featured-cases{ padding:110px 0; }
.video-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.video-card{ position:relative; display:block; background:var(--white); border:1px solid var(--line-c); overflow:hidden; transition:box-shadow .3s ease, transform .3s ease; }
.video-card:hover{ box-shadow:0 16px 40px rgba(33,29,24,0.1); transform:translateY(-4px); }
.video-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink); }
.video-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.video-card:hover .video-thumb img{ transform:scale(1.06); }
.video-thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-thumb .play span{ width:52px; height:52px; border-radius:50%; background:rgba(20,17,13,0.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; transition:background .3s ease, transform .3s ease; }
.video-card:hover .video-thumb .play span{ background:var(--gold-dark); transform:scale(1.08); }
.video-thumb .play svg{ width:18px; height:18px; fill:#fff; margin-left:2px; }
.video-info{ padding:16px 18px; }
.video-info .cat{ font-size:0.72rem; letter-spacing:0.12em; color:var(--gold-dark); margin-bottom:6px; display:block; }
.video-info h3{ font-size:0.9rem; color:var(--ink); line-height:1.6; font-weight:600; }
.video-card[hidden]{ display:none; }
@media (max-width:960px){ .video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .video-grid{ grid-template-columns:1fr; } }

.video-grid.video-grid--5{ grid-template-columns:repeat(2,1fr); }
@media (max-width:560px){ .video-grid.video-grid--5{ grid-template-columns:1fr; } }

.cases-cta{ text-align:center; margin-top:52px; }

/* ===== 空間實景相簿 (cases.html / 首頁精選) ===== */
#space-gallery{ padding:0 0 110px; }
.video-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; }
.video-tabs button{ border:1px solid var(--line-c); background:var(--white); color:var(--gray-700); font-size:0.85rem; letter-spacing:0.06em; padding:10px 22px; cursor:pointer; transition:all .25s ease; font-family:inherit; }
.video-tabs button:hover{ border-color:var(--ink); color:var(--ink); }
.video-tabs button.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
@media (max-width:600px){ .video-tabs{ justify-content:flex-start; } }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.gallery-item{ position:relative; cursor:zoom-in; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line-c); background:var(--paper); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item .cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(0deg, rgba(20,17,13,0.72), transparent); color:#fff; font-size:0.78rem; letter-spacing:0.08em; opacity:0; transform:translateY(6px); transition:all .3s ease; }
.gallery-item:hover .cap{ opacity:1; transform:none; }
.gallery-item[hidden]{ display:none; }
@media (max-width:960px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ===== Lightbox ===== */
#lightbox{ display:none; position:fixed; inset:0; z-index:300; background:rgba(15,13,10,0.94); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:86vw; max-height:80vh; object-fit:contain; box-shadow:0 12px 80px rgba(0,0,0,0.6); }
#lightbox-close{ position:absolute; top:22px; right:26px; background:none; border:none; color:rgba(255,255,255,0.7); font-size:2.2rem; line-height:1; cursor:pointer; z-index:2; }
#lightbox-close:hover{ color:#fff; }
#lightbox-caption{ position:absolute; top:26px; left:28px; color:rgba(255,255,255,0.85); font-size:0.9rem; letter-spacing:0.05em; }
#lightbox-counter{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.65); font-size:0.82rem; letter-spacing:0.05em; }
#lightbox-prev,#lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25);
  color:#fff; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease;
}
#lightbox-prev:hover,#lightbox-next:hover{ background:rgba(255,255,255,0.18); }
#lightbox-prev{ left:18px; }
#lightbox-next{ right:18px; }
#lightbox-prev svg,#lightbox-next svg{ width:20px; height:20px; }
@media (max-width:640px){
  #lightbox-prev,#lightbox-next{ width:40px; height:40px; }
  #lightbox-prev{ left:8px; } #lightbox-next{ right:8px; }
  #lightbox-caption{ left:16px; top:16px; font-size:0.8rem; }
}

/* ===== 證照牆 (about.html) ===== */
#credentials{ padding:110px 0; background:var(--paper); border-top:1px solid var(--line-c); }
.license-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-c); border:1px solid var(--line-c); margin-bottom:56px; }
.license-item{ background:var(--white); padding:20px 26px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.license-item .license-name{ color:var(--ink); font-size:0.95rem; font-weight:600; letter-spacing:0.02em; }
.license-item .license-no{ color:var(--gray-500); font-size:0.8rem; letter-spacing:0.03em; white-space:nowrap; }
@media (max-width:700px){
  .license-list{ grid-template-columns:1fr; }
  .license-item{ flex-direction:column; align-items:flex-start; gap:4px; }
}
.cred-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; align-items:start; }
.cred-card{ background:var(--white); border:1px solid var(--line-c); overflow:hidden; cursor:zoom-in; transition:box-shadow .3s ease, transform .3s ease; }
.cred-card:hover{ box-shadow:0 14px 34px rgba(33,29,24,0.08); transform:translateY(-3px); }
.cred-card .thumb{ background:var(--gray-100); }
.cred-card .thumb img{ width:100%; height:auto; display:block; }
.cred-card .cred-title{ background:var(--ink); color:#fff; text-align:center; font-size:0.98rem; font-weight:600; letter-spacing:0.04em; padding:16px 18px; }
.cred-card .no{ display:block; text-align:center; font-size:0.76rem; color:var(--gray-500); letter-spacing:0.03em; padding:10px 18px 16px; }
@media (max-width:560px){ .cred-grid{ grid-template-columns:1fr; } }

/* ===== Contact ===== */
#contact{ padding:110px 0; background:var(--white); border-top:1px solid var(--line-c); }
.contact-cards{ display:flex; flex-direction:column; gap:1px; background:var(--line-c); border:1px solid var(--line-c); }
.contact-cards--center{ max-width:520px; margin:0 auto; }
.contact-card{ background:var(--white); padding:22px 26px; transition:background .3s ease; }
.contact-card:hover{ background:var(--paper); }
.contact-card p.label{ color:var(--gray-500); font-size:0.74rem; letter-spacing:0.18em; margin-bottom:8px; text-transform:uppercase; }
.contact-card .value{ font-size:1.02rem; color:var(--ink); word-break:break-word; }
.contact-card a.value:hover{ color:var(--gold-dark); }

/* ===== FAQ ===== */
#faq{ padding:110px 0; background:var(--paper); border-top:1px solid var(--line-c); }
.faq-list{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; overflow-anchor:none; }
.faq-item{ border:1px solid var(--line-c); background:var(--white); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:0.98rem; font-weight:600; color:var(--ink); letter-spacing:0.02em;
  border-bottom:1px solid transparent; transition:border-color .32s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q-num{ color:var(--gray-300); font-weight:700; margin-right:12px; font-family:'Noto Serif TC',serif; }
.faq-item summary .plus{ flex-shrink:0; width:20px; height:20px; position:relative; }
.faq-item summary .plus::before,.faq-item summary .plus::after{ content:""; position:absolute; background:var(--ink); transition:transform .3s ease; }
.faq-item summary .plus::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.faq-item summary .plus::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.faq-item[open] summary .plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.faq-item[open] summary{ border-bottom-color:var(--line-c); }
.faq-item{ interpolate-size:allow-keywords; }
.faq-body{
  display:block; overflow:hidden; height:0;
  padding:0 26px 0 58px; color:var(--gray-700); font-size:0.9rem; line-height:1.95;
  transition:height .32s ease, padding-top .32s ease, padding-bottom .32s ease;
}
.faq-item[open] .faq-body{ height:auto; padding-top:6px; padding-bottom:24px; }
@media (max-width:600px){ .faq-body{ padding-left:26px; } }

/* ===== Footer ===== */
footer{ background:var(--ink); color:var(--gray-300); padding:64px 0 26px; }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px 50px; margin-bottom:44px; }
.footer-grid > div{ flex:0 1 auto; }
.footer-grid > div:first-child{ flex-basis:320px; max-width:340px; }
footer h4{ color:#fff; font-size:0.78rem; letter-spacing:0.25em; margin-bottom:18px; text-transform:uppercase; }
footer p{ font-size:0.86rem; line-height:1.95; }
.foot-logo{ display:flex; align-items:center; gap:10px; margin-bottom:18px; text-decoration:none; }
.foot-logo .mark{ width:36px; height:auto; }
.foot-logo .word{ font-family:'Noto Serif TC',serif; font-size:1.05rem; letter-spacing:0.1em; color:#fff; }
footer a{ display:block; margin-bottom:9px; font-size:0.86rem; color:var(--gray-300); }
footer a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:22px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; font-size:0.75rem; color:var(--gray-500); }

/* ===== 瀏覽人數計數器 ===== */
.site-counter{ display:flex; align-items:center; gap:8px; }
.site-counter__label{ color:var(--gray-500); font-size:0.72rem; letter-spacing:0.05em; }
.site-counter__count{ display:flex; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px #000; }
.site-counter__count .digit{
  width:17px; height:24px; background:#000; color:#c99a4a; font-family:"Courier New",Consolas,monospace; font-weight:700;
  font-size:16px; line-height:24px; text-align:center; border-right:1px solid #222;
  box-shadow:inset -2px -2px 3px rgba(255,255,255,0.15), inset 2px 2px 3px rgba(0,0,0,0.8);
  text-shadow:0 0 6px rgba(201,154,74,0.7);
}
.site-counter__count .digit:last-child{ border-right:none; }

@media (max-width:760px){
  .footer-grid{ flex-direction:column; align-items:center; gap:32px; }
  .footer-grid > div{ text-align:center; }
  .footer-grid > div:first-child{ max-width:100%; flex-basis:auto; }
  .foot-logo{ justify-content:center; }
  .footer-grid > div:first-child p{ text-align:left; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; }
}

/* ===== Floating buttons ===== */
.float-social{ position:fixed; bottom:30px; right:30px; display:flex; flex-direction:column; gap:14px; z-index:150; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease; }
.float-social.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.float-social a{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.22); transition:transform .2s ease, box-shadow .2s ease; text-decoration:none;
}
.float-social a:hover{ transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,0.28); }
.float-social .btn-line{ background-color:var(--line-green); }
.float-social .btn-tel{ background-color:var(--gold-dark); border:1px solid rgba(255,255,255,0.35); }
.float-social svg{ width:24px; height:24px; fill:#ffffff; }
.back-to-top{
  position:fixed; bottom:166px; right:30px; width:54px; height:54px; border-radius:50%; background:#fff; border:1px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(33,29,24,0.14); z-index:150; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ box-shadow:0 6px 20px rgba(33,29,24,0.2); }
.back-to-top svg{ width:22px; height:22px; stroke:var(--ink); }
@media (max-width:600px){
  .float-social{ bottom:20px; right:16px; gap:12px; }
  .float-social a{ width:48px; height:48px; }
  .float-social svg{ width:21px; height:21px; }
  .back-to-top{ bottom:140px; right:16px; width:48px; height:48px; }
}