:root{
    --white:#FFFFFF;
    --gray:#F3F4F5;
    --ink:#2E2E2E;
    --sub:#5A5D60;
    --line:#BFC3C7;
    --blue:#DCE4EA;
    --green-soft:#E3EADF;
    --gray-card:#E6E6E6;
    --brand:#3CC21A;
    --serif:"Noto Serif TC", serif;
    --sans:"Noto Sans TC", sans-serif;
    --script:"Allura", cursive;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--white);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.9;overflow-x:hidden}
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  .wrap{width:min(1100px, 100% - 32px);margin-inline:auto}

  /* ---------- header (white, two rows) ---------- */
  .hd{background:var(--white);position:sticky;top:0;z-index:20;border-bottom:1px solid #EEE}
  .hd-in{width:min(1240px, 100% - 32px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 0}
  .brand{display:flex;align-items:center;gap:12px;min-height:44px}
  .brand img{width:44px;height:44px}
  .brand b{display:block;font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.3}
  .brand small{display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:.14em;color:var(--sub);line-height:1.4}
  .hd-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .hd-top{display:flex;align-items:center;gap:6px}
  .ico{width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
  .ico svg{width:20px;height:20px}
  .btn-s{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 16px;font-size:12.5px;border:1px solid var(--ink);line-height:1}
  .btn-s.dark{background:var(--ink);color:#fff}
  .hd-nav ul{display:flex;gap:28px;list-style:none;font-size:12.5px}
  .hd-nav a{display:inline-block;padding:4px 0;color:var(--sub)}
  .hd-nav a:hover{color:var(--ink)}
  .menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer}
  .menu-btn span{display:block;width:22px;height:1px;background:var(--ink);margin:6px auto}

  /* ---------- hero ---------- */
  .hero{position:relative;height:min(70vh, 700px);min-height:420px;overflow:hidden}
  .hero img{width:100%;height:100%;object-fit:cover}
  .hero::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.28)}
  .hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center, rgba(40,44,48,.42) 0%, rgba(40,44,48,.18) 55%, rgba(40,44,48,0) 80%)}
  .hero-c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 16px}
  .hero-mark{width:140px;height:140px;border:1.5px solid rgba(255,255,255,.9);display:grid;place-items:center;margin-bottom:26px}
  .hero-mark svg{width:96px;height:96px}
  .hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(30px, 4.4vw, 58px);line-height:1.35;text-shadow:0 2px 14px rgba(0,0,0,.35)}
  .hero .en{font-family:var(--serif);font-size:clamp(13px, 1.5vw, 19px);letter-spacing:.22em;margin-top:8px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
  .hero .kw{font-size:13px;margin-top:14px;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.45)}

  /* ---------- script label with long hairline ---------- */
  .sl{display:flex;align-items:center;width:100%;position:relative;z-index:3}
  .sl .w{font-family:var(--script);font-size:46px;line-height:1;color:var(--ink);padding:0 14px;white-space:nowrap}
  .sl .ln{height:1px;background:var(--ink);opacity:.55}
  .sl.r{justify-content:flex-end}
  .sl.r .ln{width:clamp(70px, 13vw, 190px)}
  .sl.l .ln{width:clamp(70px, 13vw, 190px)}
  .sl.c{justify-content:center}
  .sl.c .w{font-size:28px;color:var(--sub)}

  .more{display:inline-flex;align-items:center;gap:22px;min-height:44px;padding:0 20px;background:var(--ink);color:#fff;font-family:var(--serif);font-size:14px;letter-spacing:.08em}
  .more::after{content:"";width:46px;height:7px;border-bottom:1px solid #fff;border-right:1px solid #fff;transform:skewX(45deg);transform-origin:bottom}
  .center{text-align:center}

  /* ---------- message ---------- */
  .msg{padding:96px 0 40px}
  .msg-box{background:var(--gray);margin-top:-6px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;padding:0 64px 44px 0;position:relative}
  .collage{position:relative;min-height:420px}
  .collage .p1{position:absolute;left:8%;top:-34px;width:84%;aspect-ratio:16/9;object-fit:cover}
  .collage .p2{position:absolute;left:-28px;top:236px;width:44%;aspect-ratio:4/3;object-fit:cover}
  .collage .p3{position:absolute;left:50%;top:262px;width:33%;aspect-ratio:4/3;object-fit:cover}
  .msg-tx{padding-top:56px}
  .msg-tx h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.3vw, 29px);line-height:1.6}
  .msg-tx .sub{font-family:var(--serif);color:var(--sub);margin:10px 0 22px;font-size:15.5px}
  .msg-tx p.body{font-size:13.5px;line-height:2.1;color:var(--ink)}
  .msg-tx .act{margin-top:28px;text-align:right}

  /* ---------- features ---------- */
  .feat{padding:88px 0 90px}
  .feat h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.2vw, 28px);text-align:center;line-height:1.6}
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:40px auto 48px;max-width:960px}
  .fc{position:relative;padding:14px 0 0 14px}
  .fc .num{position:absolute;left:0;top:0;z-index:2;width:50px;height:50px;background:var(--ink);color:#fff;font-family:var(--serif);font-style:italic;font-size:18px;display:grid;place-items:center}
  .fc img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .fc .bd{padding:22px 20px 26px;text-align:center}
  .fc h3{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.6}
  .fc p{font-size:12.5px;line-height:1.9;margin-top:10px;color:#3E4144}
  .fc.c1 .bd{background:var(--blue)}
  .fc.c2 .bd{background:var(--green-soft)}
  .fc.c3 .bd{background:var(--gray-card)}

  /* ---------- service ---------- */
  .svc{padding:40px 0 90px;position:relative}
  .svc-bg{background:var(--gray);padding:60px 0 36px;margin-top:-22px}
  .svc h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.3vw, 29px);text-align:center;line-height:1.6}
  .svc .lead{text-align:center;font-size:13.5px;margin:16px auto 0;max-width:620px}
  .svc-frame{background:#fff;border:1px solid #9EA2A6;display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0 30px;max-width:900px;margin:0 auto;position:relative;top:0}
  .svc-col{padding:0 20px;text-align:center}
  .svc-col + .svc-col{border-left:1px solid #D6D9DC}
  .svc-col img{width:100%;aspect-ratio:16/10;object-fit:cover}
  .svc-col h3{font-family:var(--serif);font-weight:400;font-size:18px;margin:20px 0 10px;line-height:1.6}
  .svc-col p{font-size:12.5px;line-height:1.95;text-align:left}
  .svc .act{margin-top:34px}
  .svc-half{position:relative}
  .svc-half::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:var(--gray);z-index:-1}

  /* ---------- works ---------- */
  .works{padding:30px 0 90px;position:relative}
  .works-bg{position:absolute;left:0;right:calc((100% - min(1100px, 100% - 32px)) / 2 - 40px);top:78px;height:420px;background:var(--gray);z-index:-1}
  .works-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-top:20px;position:relative}
  .works-head{grid-column:7 / 13;grid-row:1;padding-top:30px}
  .works-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.2vw, 28px);line-height:1.6}
  .works-head p{font-size:13.5px;margin-top:14px}
  .wk{position:relative;display:block;align-self:start}
  .wk img{width:100%;aspect-ratio:1/1;object-fit:cover}
  .wk.w1{grid-column:2 / 7;grid-row:1 / 3;margin-top:130px}
  .wk.w2{grid-column:7 / 12;grid-row:2;margin-top:40px}
  .wk.w3{grid-column:4 / 9;grid-row:3;margin-top:50px}
  .wk .tag{position:absolute;left:16px;bottom:22px;max-width:calc(100% - 32px)}
  .wk.w2 .tag,.wk.w3 .tag{top:18px;bottom:auto}
  .wk .name{display:inline-block;background:rgba(40,42,44,.82);color:#fff;font-family:var(--serif);font-size:17px;line-height:1.55;padding:6px 14px}
  .wk .type{display:inline-block;background:#fff;color:var(--ink);font-size:11.5px;line-height:1.6;padding:2px 10px;margin-top:4px;border:1px solid #CCC}
  .wk .hand{font-family:var(--script);font-size:30px;color:#fff;line-height:1;margin-left:10px;text-shadow:0 1px 6px rgba(0,0,0,.5);vertical-align:middle}
  .works .act{margin-top:56px}

  /* ---------- voices ---------- */
  .voice{padding:40px 0 100px}
  .voice h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.2vw, 28px);text-align:center;line-height:1.6}
  .vc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
  .vc{background:#fff;border:1px solid #E1E3E5;padding:30px 28px}
  .vc q{display:block;font-family:var(--serif);font-size:15px;line-height:1.95;quotes:"「" "」"}
  .vc .who{margin-top:18px;font-size:12.5px;color:var(--sub);border-top:1px solid #E6E6E6;padding-top:12px}

  /* ---------- company ---------- */
  .co{padding:20px 0 0}
  .co-bg{background:var(--gray);margin-top:-22px;padding:70px 0 70px}
  .co-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .co-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .co h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px, 2.2vw, 28px);line-height:1.6}
  .co .lead{font-size:13.5px;margin:12px 0 20px}
  .co table{width:100%;border-collapse:collapse;font-size:13.5px}
  .co th,.co td{text-align:left;vertical-align:top;padding:12px 4px;border-bottom:1px solid #CDD1D4;line-height:1.8}
  .co tr:first-child th,.co tr:first-child td{border-top:1px solid #CDD1D4}
  .co th{width:7.5em;font-weight:500;color:var(--sub)}
  .co td a{text-decoration:underline;text-underline-offset:3px}

  /* ---------- cta boxes ---------- */
  .cta{padding:80px 0}
  .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:860px;margin:0 auto}
  .cta-b{display:flex;align-items:center;gap:20px;border:1px solid var(--ink);padding:22px 26px;min-height:96px;background:#fff;position:relative}
  .cta-b::before{content:"";position:absolute;inset:5px;border:1px solid #D3D6D9;pointer-events:none}
  .cta-b svg{width:38px;height:38px;flex:none}
  .cta-b small{display:block;font-size:12px;color:var(--sub);line-height:1.6}
  .cta-b b{display:block;font-family:var(--serif);font-weight:500;font-size:17px;line-height:1.6}

  /* ---------- footer ---------- */
  .ft{background:var(--gray);padding:56px 0 30px;font-size:12.5px}
  .ft-grid{display:grid;grid-template-columns:repeat(3, 1fr) 1.4fr;gap:32px}
  .ft h4{font-weight:500;font-size:13px;margin-bottom:8px}
  .ft ul{list-style:none}
  .ft li a{display:inline-block;padding:3px 0;color:var(--sub)}
  .ft-brand .brand{margin-bottom:12px}
  .ft-tel{font-family:var(--serif);font-size:26px;line-height:1.4;display:inline-flex;align-items:center;gap:8px;min-height:44px}
  .ft-tel svg{width:20px;height:20px}
  .ft-brand p{color:var(--sub);line-height:1.9}
  .ft-copy{margin-top:40px;padding-top:18px;border-top:1px solid #D6D9DC;color:var(--sub);text-align:center;font-size:11.5px}

  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    body{font-size:15px}
    .hd-nav,.hd-top .btn-s,.hd-top .ico{display:none}
    .menu-btn{display:block}
    .hd-r{flex-direction:row}
    .hd.open .hd-nav{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #EEE;padding:8px 16px 16px}
    .hd.open .hd-nav ul{flex-direction:column;gap:0}
    .hd.open .hd-nav a{display:block;padding:10px 0;font-size:15px;min-height:44px}
    .brand b{font-size:16px}
    .brand small{font-size:9.5px}
    .hero{height:56vh;min-height:360px}
    .hero-mark{width:96px;height:96px;margin-bottom:18px}
    .hero-mark svg{width:64px;height:64px}
    .sl .w{font-size:38px}
    .msg{padding-top:64px}
    .msg-box{grid-template-columns:1fr;padding:0 20px 40px;gap:8px;margin-top:10px}
    .collage{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:-20px}
    .collage img{position:static !important;width:100% !important}
    .collage .p1{grid-column:1 / 3}
    .collage .p3{margin-top:22px}
    .msg-tx{padding-top:20px}
    .msg-tx .act{text-align:left}
    .cards3{grid-template-columns:1fr;max-width:420px;gap:28px}
    .svc-bg{padding-top:44px}
    .svc-frame{grid-template-columns:1fr;padding:6px 0}
    .svc-col{padding:20px}
    .svc-col + .svc-col{border-left:0;border-top:1px solid #D6D9DC}
    .works-bg{right:0;top:70px;height:300px}
    .works-grid{display:flex;flex-direction:column;gap:26px}
    .works-head{padding:10px 4px 0}
    .wk.w1,.wk.w2,.wk.w3{margin-top:0;width:88%}
    .wk.w2{align-self:flex-end}
    .wk.w3{align-self:center}
    .wk .name{font-size:15px}
    .vc-list{grid-template-columns:1fr}
    .co-grid{grid-template-columns:1fr;gap:28px}
    .cta{padding:56px 0}
    .cta-row{grid-template-columns:1fr;gap:16px}
    .ft-grid{grid-template-columns:1fr 1fr;gap:24px}
    .ft-brand{grid-column:1 / 3}
  }

/* =====================================================================
   內頁共用元件（依 E 版語彙延伸：明體細字、手寫標籤＋長細線、淡灰色塊、深炭灰按鈕）
   ===================================================================== */
.hd-nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:8px;top:8px;z-index:99;background:#fff;padding:8px 12px;border:1px solid var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 內頁頂圖 */
.phero{position:relative;height:min(46vh,440px);min-height:280px;overflow:hidden}
.phero img{width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(40,44,48,.18),rgba(40,44,48,.46))}
.phero-c{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 16px}
.phero-c .hand{font-family:var(--script);font-size:clamp(40px,5vw,64px);line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.phero-c h1{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1.5;margin-top:10px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.phero-c p{font-size:13.5px;margin-top:8px;letter-spacing:.06em;text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* 麵包屑 */
.bc{font-size:12px;color:var(--sub);padding:16px 0}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px}
.bc li+li::before{content:"／";margin-right:10px;color:var(--line)}
.bc a{text-decoration:underline;text-underline-offset:3px}

/* 區塊 */
.sec{padding:72px 0}
.sec.gray{background:var(--gray)}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,29px);line-height:1.6}
.h2.c{text-align:center}
.lead{font-size:15px;line-height:2;margin-top:14px;color:#3E4144}
.lead.c{text-align:center;max-width:680px;margin-inline:auto}
.prose{font-size:15px;line-height:2.05}
.prose p+p{margin-top:1em}
.prose h3{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.6;margin:1.8em 0 .5em}
.answer{font-size:15.5px;line-height:2;margin-top:12px}

/* 文字＋照片兩欄 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>:first-child{order:2}
.split img{width:100%;object-fit:cover}
.split .ratio43{aspect-ratio:4/3}
.split .ratio34{aspect-ratio:3/4;max-height:620px}

/* 案例卡（作品列表、首頁延伸） */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 40px;margin-top:44px}
.case{display:block;position:relative}
.case:nth-child(even){margin-top:80px}
.case .ph{position:relative}
.case img{width:100%;aspect-ratio:4/3;object-fit:cover}
.case .tag{position:absolute;left:16px;bottom:18px;max-width:calc(100% - 32px)}
.case .name{display:inline-block;background:rgba(40,42,44,.84);color:#fff;font-family:var(--serif);font-size:17px;line-height:1.55;padding:6px 14px}
.case .type{display:inline-block;background:#fff;color:var(--ink);font-size:11.5px;line-height:1.6;padding:2px 10px;border:1px solid #CCC;margin-bottom:4px}
.case .hand{font-family:var(--script);font-size:30px;color:#fff;line-height:1;margin-left:10px;text-shadow:0 1px 6px rgba(0,0,0,.5);vertical-align:middle}
.case p{font-size:14px;line-height:1.95;margin-top:16px;color:#3E4144}
.case .go{display:inline-block;margin-top:8px;font-size:13px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.case:hover .name{background:rgba(20,22,24,.92)}

/* 案例資料表 */
.facts{width:100%;border-collapse:collapse;font-size:14px}
.facts th,.facts td{text-align:left;vertical-align:top;padding:12px 4px;border-bottom:1px solid #CDD1D4;line-height:1.8}
.facts tr:first-child th,.facts tr:first-child td{border-top:1px solid #CDD1D4}
.facts th{width:6.5em;font-weight:500;color:var(--sub)}

/* 翻新前後對照 */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.ba figure{position:relative}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{position:absolute;left:12px;top:12px;background:rgba(40,42,44,.84);color:#fff;font-size:12px;padding:3px 10px;letter-spacing:.06em}
.ba figure.after figcaption{background:#fff;color:var(--ink);border:1px solid #CCC}

/* 工序 */
.steps{list-style:none;counter-reset:st;margin-top:28px;border-top:1px solid #CDD1D4}
.steps li{counter-increment:st;display:grid;grid-template-columns:64px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid #CDD1D4;font-size:15px;line-height:1.9}
.steps li::before{content:counter(st,decimal-leading-zero);font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sub);line-height:1.5}
.steps b{font-weight:500}

/* 相簿 */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal figure.w{grid-column:span 2}
.gal figure.w img{aspect-ratio:auto;height:100%;max-height:none}
.gal figcaption{font-size:12.5px;color:var(--sub);margin-top:6px;line-height:1.7}

/* 屋主怎麼說（附出處） */
.said{background:#fff;border:1px solid #E1E3E5;padding:30px 32px;margin-top:28px}
.said ul{list-style:none}
.said li{font-family:var(--serif);font-size:15.5px;line-height:1.95;padding-left:1.2em;position:relative}
.said li+li{margin-top:10px}
.said li::before{content:"・";position:absolute;left:0}
.said .src{margin-top:16px;font-size:12.5px;color:var(--sub);border-top:1px solid #E6E6E6;padding-top:12px}
.said .src a{text-decoration:underline;text-underline-offset:3px}

/* 服務項目細項 */
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;margin-top:40px}
.item{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.item img{width:100%;aspect-ratio:1/1;object-fit:cover}
.item h3{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.6}
.item p{font-size:14px;line-height:1.95;margin-top:6px;color:#3E4144}

/* 服務流程（大步驟） */
.flow{list-style:none;margin-top:44px;position:relative}
.flow>li{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:34px 0;border-top:1px solid #CDD1D4}
.flow>li:last-child{border-bottom:1px solid #CDD1D4}
.flow .no{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1;color:var(--ink)}
.flow .no small{display:block;font-family:var(--script);font-style:normal;font-size:26px;color:var(--sub);margin-top:8px}
.flow h3{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.6}
.flow p{font-size:15px;line-height:2;margin-top:8px;color:#3E4144}
.flow .pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;max-width:560px}
.flow .pics img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff;border:1px solid #E1E3E5}

/* FAQ */
.faq{max-width:820px;margin:36px auto 0;border-top:1px solid #CDD1D4}
.faq details{border-bottom:1px solid #CDD1D4}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 4px;min-height:44px;font-family:var(--serif);font-size:16.5px;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-size:20px;color:var(--sub);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 4px 20px;font-size:15px;line-height:2;color:#3E4144}

/* 證照 */
.cert img{width:100%;border:1px solid #E1E3E5;background:#fff}
.cert figcaption{font-size:12.5px;color:var(--sub);margin-top:8px}

/* 地圖 */
.map{width:100%;aspect-ratio:16/9;border:0;filter:grayscale(.3);display:block}

/* 下一步 CTA 帶（內頁底） */
.next{background:var(--gray);padding:64px 0}
.next h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.1vw,26px);text-align:center;line-height:1.6}
.next p{text-align:center;font-size:14px;margin-top:10px;color:#3E4144}
.next .cta-row{margin-top:30px}

/* 相關案例 */
.rel{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:30px}

@media (max-width:900px){
  .sec{padding:52px 0}
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev>:first-child{order:0}
  .cases{grid-template-columns:1fr;gap:40px}
  .case:nth-child(even){margin-top:0}
  .ba{grid-template-columns:1fr;gap:12px}
  .gal{grid-template-columns:1fr 1fr;gap:10px}
  .gal figure.w{grid-column:span 2}
  .items{grid-template-columns:1fr;gap:26px}
  .item{grid-template-columns:110px 1fr;gap:14px}
  .flow>li{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .flow .no{font-size:34px}
  .flow .no small{display:inline;margin:0 0 0 10px}
  .rel{grid-template-columns:1fr}
  .steps li{grid-template-columns:48px 1fr}
}
@media (max-width:900px){
  .ft li a{padding:10px 0;min-height:44px}
  .bc a{display:inline-block;padding:10px 0}
  .co-t td a{display:inline-block;padding:8px 0}
}
.bc ol{align-items:center}

/* 白底細紋路（紙紋） */
body{background-color:var(--white);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.37 0 0 0 0 0.4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}

/* 中文標題字：思源宋體 Bold（Noto Serif TC 700，Google Fonts 依字自動載入；與台灣宋同一套字形） */
:root{--serif:"Noto Serif TC",serif}
body{font-synthesis:none}

/* =====================================================================
   hiyori 風格層（2026-10-09）：紋路、字級比例、動畫與過場
   數值參考 hiyori.com.tw 實測：區塊大標 40px/字距 3px、副標 18px、內文 14px/字距 1px、灰階文字 #333/#555/#777
   ===================================================================== */
:root{--ink:#333;--sub:#777;--body:#555;--gray:#ECEDED;--ease:cubic-bezier(.22,.7,.2,1)}
body{background:#F7F7F7 url("/assets/tex/paper.png") repeat;color:var(--body);font-size:14px;letter-spacing:1px;line-height:2}
.hd{background:#F7F7F7 url("/assets/tex/paper.png") repeat}
.msg-box,.svc-bg,.works-bg,.co-bg,.sec.gray,.next{background:#EDEDED url("/assets/tex/concrete.png") repeat}
.svc-half::before{background:#EDEDED url("/assets/tex/concrete.png") repeat}
.ft{background:#E1E1E1 url("/assets/tex/stone.png") repeat}

/* 兩側細直線（桌機） */
@media (min-width:1100px){
  body::before,body::after{content:"";position:fixed;top:0;bottom:0;width:1px;background:rgba(0,0,0,.08);z-index:15;pointer-events:none}
  body::before{left:40px} body::after{right:40px}
}

/* ---------- 字級比例 ---------- */
.hd-nav ul{font-size:13.5px;letter-spacing:1px;gap:30px}
.hd-nav a{color:var(--ink)}
.brand b{letter-spacing:2px}
.hero h1{font-weight:500;letter-spacing:6px}
.hero .kw{font-size:14px;letter-spacing:3px}
.feat h2,.svc h2,.works-head h2,.voice h2,.co h2,.h2,.next h2{font-size:clamp(26px,2.9vw,40px);font-weight:500;letter-spacing:3px;color:var(--ink);line-height:1.5}
.msg-tx h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:2px;color:var(--ink);line-height:1.7}
.msg-tx .sub,.lead.c,.svc .lead,.works-head p,.next p,.phero-c p{font-family:var(--serif);font-size:clamp(15px,1.25vw,18px);letter-spacing:1px;color:var(--ink);line-height:1.9}
.msg-tx p.body,.fc p,.svc-col p,.case p,.item p,.co .lead,.vc .who{font-size:14px;letter-spacing:1px;line-height:2;color:var(--body)}
.prose,.answer,.flow p,.steps li,.faq .a,.said li{font-size:15px;letter-spacing:1px;line-height:2.1;color:var(--body)}
.fc h3,.svc-col h3,.item h3,.prose h3{color:#222;letter-spacing:2px}
.fc h3{font-size:18px} .svc-col h3{font-size:19px}
.vc q{font-size:15.5px;letter-spacing:1px;color:#222}
.facts,.co table{font-size:14px;letter-spacing:1px}
.facts th,.co th{color:var(--sub)}
.bc{font-size:12.5px;letter-spacing:1px;color:var(--sub)}
.flow .no{font-size:50px;font-weight:400;color:#111;font-style:normal}
.steps li::before{font-style:normal;color:#aaa;font-size:22px}
.fc .num{font-style:normal;letter-spacing:1px}
.phero-c h1{font-size:clamp(26px,3.2vw,40px);font-weight:500;letter-spacing:4px}
.case .name,.wk .name{letter-spacing:2px}
.more{letter-spacing:3px}
.more::after{transition:transform .5s var(--ease)}
.more:hover::after{transform:skewX(45deg) translateX(8px)}
.ft{letter-spacing:1px}
@media (max-width:900px){
  body{font-size:14px}
  .feat h2,.svc h2,.works-head h2,.voice h2,.co h2,.h2,.next h2{letter-spacing:2px}
  .hero h1{letter-spacing:3px}
  .flow .no{font-size:38px}
}

/* ---------- 首頁輪播 ---------- */
.hero .slides{position:absolute;inset:0}
.hero .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.5s ease}
.hero .slides img.on{opacity:1}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);color:#fff;font-family:var(--serif);font-size:11px;letter-spacing:4px;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.scroll-cue::after{content:"";display:block;width:1px;height:46px;margin:10px auto 0;background:linear-gradient(#fff 50%,rgba(255,255,255,.25) 50%);background-size:1px 200%;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{background-position:0 100%}100%{background-position:0 -100%}}

/* ---------- 回頂端 ---------- */
.totop{position:fixed;right:56px;bottom:28px;z-index:30;width:44px;height:44px;border:1px solid var(--ink);background:rgba(247,247,247,.9);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;transform:translateY(10px);cursor:pointer}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop::before{content:"";width:9px;height:9px;border-left:1px solid var(--ink);border-top:1px solid var(--ink);transform:translateY(3px) rotate(45deg)}
@media (max-width:900px){.totop{right:16px;bottom:16px}}

/* ---------- 載入遮罩 ---------- */
#ld{display:none}
.js #ld{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#F7F7F7 url("/assets/tex/paper.png") repeat;transition:opacity .9s ease,visibility .9s;animation:ldfail 0s 3s forwards}
.js #ld img{width:64px;height:64px;opacity:.85;animation:ldpulse 1.6s ease-in-out infinite}
.js #ld.out{opacity:0;visibility:hidden}
@keyframes ldpulse{0%,100%{opacity:.35;transform:scale(.96)}50%{opacity:.9;transform:scale(1)}}
@keyframes ldfail{to{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:no-preference){
  /* 捲動淡入上移 */
  .js .rv{opacity:0;transform:translateY(36px);transition:opacity 1.1s ease,transform 1.3s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  /* 手寫標籤的長細線：畫出來 */
  .js .sl .ln{transform:scaleX(0);transition:transform 1.6s var(--ease) .3s}
  .js .sl.r .ln{transform-origin:left} .js .sl.l .ln{transform-origin:right}
  .js .sl.in .ln{transform:scaleX(1)}
  .js .sl .w{opacity:0;transition:opacity 1.4s ease}
  .js .sl.in .w{opacity:1}
  /* 首頁主視覺 */
  .hero .slides img.on{animation:kb 9s ease-out forwards}
  @keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
  .js .hero-mark,.js .hero h1,.js .hero .en,.js .hero .kw,.js .scroll-cue{opacity:0;animation:fiu 1.4s var(--ease) forwards}
  .js .hero h1{animation-delay:.25s} .js .hero .en{animation-delay:.45s} .js .hero .kw{animation-delay:.65s} .js .scroll-cue{animation-delay:1.1s}
  @keyframes fiu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .js .scroll-cue{animation-name:fiu2} @keyframes fiu2{from{opacity:0}to{opacity:1}}
  /* 內頁頂圖：慢慢推遠＋標題浮現 */
  .phero img{animation:kb 7s ease-out forwards}
  .js .phero-c>*{opacity:0;animation:fiu 1.3s var(--ease) forwards}
  .js .phero-c>:nth-child(2){animation-delay:.2s} .js .phero-c>:nth-child(3){animation-delay:.4s}
  /* 照片滑過 */
  .fc,.svc-col,.case .ph,.wk,.item,.gal figure,.ba figure,.rel .ph{overflow:hidden}
  .fc img,.svc-col img,.case img,.wk img,.item img,.gal img,.ba img{transition:transform 1.4s var(--ease),filter .6s ease}
  .fc:hover img,.svc-col:hover img,.case:hover img,.wk:hover img,.item:hover img,.gal figure:hover img{transform:scale(1.05)}
  .works-grid:hover .wk img,.cases:hover .case img,.rel:hover .case img{filter:brightness(.72)}
  .works-grid .wk:hover img,.cases .case:hover img,.rel .case:hover img{filter:none}
  /* 頁首捲動收合 */
  .hd{transition:transform .45s var(--ease),box-shadow .45s}
  .hd.hide{transform:translateY(-100%)}
  .hd.scrolled{box-shadow:0 1px 14px rgba(0,0,0,.06)}
  /* 換頁淡出 */
  body.leaving main,body.leaving .hd,body.leaving .ft,body.leaving .next{opacity:0;transition:opacity .35s ease}
  /* 連結底線延伸 */
  .case .go{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;border-bottom-color:rgba(0,0,0,.25);transition:background-size .5s var(--ease)}
  .case:hover .go{background-size:100% 1px}
}

/* 副標、評語、引言用細明體（台灣宋只有粗體，留給大標） */
:root{--serif-light:"Noto Serif TC",serif}
.msg-tx .sub,.lead.c,.svc .lead,.works-head p,.next p,.phero-c p,.vc q,.said li,.hero .kw{font-family:var(--serif-light);font-weight:400}

/* 施工案例（首頁）重排：三欄錯落，照片同尺寸、標籤統一左下 */
@media (min-width:901px){
  .works{padding:20px 0 100px}
  .works-grid{grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:0;align-items:start;margin-top:30px}
  .works-head{grid-column:1 / 5;grid-row:1;padding:56px 0 0 8px;position:relative;z-index:1}
  .works-head p{margin-top:18px}
  .wk img{aspect-ratio:3/4}
  .wk.w1{grid-column:5 / 9;grid-row:1 / 3;margin-top:0}
  .wk.w2{grid-column:9 / 13;grid-row:1 / 3;margin-top:150px}
  .wk.w3{grid-column:1 / 5;grid-row:2;margin-top:56px}
  .wk .tag,.wk.w2 .tag,.wk.w3 .tag{left:16px;right:16px;top:auto;bottom:18px}
  .works-bg{left:0;right:auto;width:calc(50% - 40px);top:96px;height:470px}
  .works .act{margin-top:72px}
}
@media (max-width:900px){
  .wk img{aspect-ratio:4/3}
  .wk .tag,.wk.w2 .tag,.wk.w3 .tag{top:auto;bottom:14px}
}
@media (min-width:901px){.works-head p{font-size:15px}}

/* 原本用台灣宋（粗體）的中文標題類元素 */
.brand b,.case .name,.co h2,.cta-b b,.faq summary,.fc h3,.feat h2,.flow h3,.ft-tel,.h2,.hero h1,.item h3,.msg-tx h2,.next h2,.phero-c h1,.prose h3,.svc h2,.svc-col h3,.voice h2,.wk .name,.works-head h2{font-weight:700}
.src-list{list-style:none;margin-top:8px}
.src-list li{font-size:13.5px;line-height:1.9;padding:0}
.src-list li::before{content:none}
.src-list a{text-decoration:underline;text-underline-offset:3px;color:var(--sub)}
.prose ul{margin:1em 0 0 1.2em}
.prose li{margin:.3em 0}