/* ===== 品牌設定：修改此處可調整全站配色及字體 ===== */
    :root {
      --ivory: #F2EEE6;
      --paper: #FAF8F3;
      --oat: #E6DCCB;
      --blue: #566676;
      --ink: #304453;
      --muted: #667078;
      --gold: #AA8650;
      --line: #D8D0C3;

      --serif: "Bodoni MT", "Didot", "Times New Roman",
               "Noto Serif TC", "PMingLiU", serif;
      --body: "Segoe UI", "PingFang TC",
              "Microsoft JhengHei", sans-serif;
    }

    * { box-sizing: border-box; }

    html { background: var(--ivory); }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--ivory);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
    }

    [hidden] { display: none !important; }

    a { color: inherit; }

    button, a {
      -webkit-tap-highlight-color: transparent;
    }

    button { font: inherit; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 6px;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1, h2, h3 {
      font-family: var(--serif);
      font-weight: 400;
    }

    h1, h2, h3, p, a {
      overflow-wrap: break-word;
    }

    .wrap {
      width: min(1120px, calc(100% - 48px));
      margin-inline: auto;
    }

    .eyebrow {
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      line-height: 1.8;
    }

    .slogan {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      line-height: 1.15;
      text-wrap: balance;
    }

    .logo {
      display: block;
      width: 220px;
      height: 220px;
      object-fit: contain;
      margin-inline: auto;
    }

    .logo-fallback {
      font-family: var(--serif);
      font-size: 56px;
      letter-spacing: .16em;
      margin: 32px 0;
    }

    /* ===== 入口：只顯示 Logo、標語及進入按鈕 ===== */
    .entrance {
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 48px 24px;
      text-align: center;
    }

    .entrance-inner {
      width: min(100%, 680px);
      animation: appear .8s ease both;
    }

    .entrance .logo {
      width: 260px;
      height: 260px;
      max-width: 100%;
      margin-bottom: 8px;
    }

    .entrance .slogan {
      font-size: clamp(29px, 5.5vw, 48px);
      margin-bottom: 42px;
    }

    .enter-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 12px 38px;
      border: 1px solid var(--gold);
      border-radius: 999px;
      color: var(--ink);
      background: transparent;
      text-decoration: none;
      font-family: var(--serif);
      font-size: 22px;
      transition: background .25s, color .25s, transform .25s;
    }

    .enter-button:hover {
      color: var(--paper);
      background: var(--ink);
      transform: translateY(-3px);
    }

    /* ===== 主頁頂部：淨色 Banner ===== */
    .banner {
      position: relative;
      background: var(--oat);
      padding: 70px 24px 68px;
      text-align: center;
    }

    .banner .logo {
      width: 170px;
      height: 170px;
    }

    .banner .slogan {
      max-width: 850px;
      margin: 12px auto 0;
      font-size: clamp(34px, 5.6vw, 68px);
    }

    .language {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .banner > .language {
      position: absolute;
      top: 20px;
      right: 24px;
    }

    .language button {
      min-width: 44px;
      min-height: 44px;
      padding: 8px;
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
    }

    .language button[aria-pressed="true"] {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: var(--gold);
      text-underline-offset: 7px;
    }

    /* ===== Banner 下方三個主題入口 ===== */
    .main-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }

    .main-nav a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 92px;
      padding: 24px 30px;
      text-decoration: none;
      transition: background .25s;
    }

    .main-nav a + a {
      border-left: 1px solid var(--line);
    }

    .main-nav a:hover { background: var(--ivory); }

    .nav-number {
      color: var(--gold);
      font-size: 11px;
      letter-spacing: .1em;
    }

    .nav-label {
      flex: 1;
      font-family: var(--serif);
      font-size: 23px;
    }

    .arrow { font-size: 22px; }

    /* ===== 意念文字：可自行修改中英文內容 ===== */
    .manifesto {
      padding: 112px 0 120px;
      text-align: center;
    }

    .manifesto .eyebrow {
      color: var(--gold);
      margin-bottom: 30px;
    }

    .manifesto h2 {
      max-width: 850px;
      margin: 0 auto 28px;
      font-size: clamp(42px, 6.8vw, 82px);
      line-height: 1.08;
      text-wrap: balance;
    }

    .manifesto h2 em {
      color: var(--blue);
      font-weight: 400;
    }

    .manifesto .message {
      max-width: 570px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.95;
      text-wrap: pretty;
    }

    .small-line {
      width: 44px;
      height: 1px;
      background: var(--gold);
      margin: 36px auto 0;
    }

    /* ===== 首頁服務方案 ===== */
    .services {
      background: var(--paper);
      padding: 80px 0 88px;
      border-block: 1px solid var(--line);
    }

    .section-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px 30px;
      margin-bottom: 38px;
    }

    .section-heading .eyebrow {
      color: var(--muted);
      margin: 0;
    }

    .section-heading h2 {
      font-size: clamp(34px, 4.5vw, 52px);
      margin: 0;
    }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--line);
    }

    .service-card {
      min-width: 0;
      padding: 34px 28px 10px 0;
    }

    .service-card + .service-card {
      padding-left: 28px;
      border-left: 1px solid var(--line);
    }

    .service-number {
      display: block;
      color: var(--gold);
      font-family: var(--serif);
      font-size: 30px;
      font-style: italic;
      margin-bottom: 42px;
    }

    .service-card h3 {
      font-size: 29px;
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .service-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.9;
      margin-bottom: 20px;
    }

    .text-link {
      display: inline-block;
      padding-block: 12px;
      text-underline-offset: 6px;
      text-decoration-color: var(--gold);
      font-size: 13px;
    }

    /* ===== 合作案例預留區：未放真實案例前不展示虛構實績 ===== */

    .case-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px;
    }

    .case-media {
      aspect-ratio: 16 / 10;
      background: var(--oat);
      display: grid;
      place-items: center;
      overflow: hidden;
      margin-bottom: 22px;
    }

    .case-media.alternate { background: #DEE3E2; }

    .case-media span {
      color: var(--ink);
      font-family: var(--serif);
      font-size: 58px;
      font-style: italic;
      opacity: .4;
    }

    /* 加入圖片時使用此 class，會自動填滿展示位置 */
    .case-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .case-card h3 {
      font-size: 27px;
      margin-bottom: 8px;
    }

    .case-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.8;
    }

    /* ===== 三個主題畫面：保留標題，內容區暫時留空 ===== */
    .sub-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-block: 20px;
      border-bottom: 1px solid var(--line);
    }

    .home-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 44px;
      font-family: var(--serif);
      font-size: 25px;
      letter-spacing: .12em;
      text-decoration: none;
    }

    .sub-main {
      min-height: 75vh;
      padding-block: 76px;
    }

    .sub-main > .eyebrow { color: var(--gold); }

    .sub-main h1 {
      font-size: clamp(42px, 7vw, 84px);
      line-height: 1.1;
      margin-bottom: 40px;
    }

    .page-content {
      min-height: 260px;
      border-top: 1px solid var(--line);
      padding-top: 36px;
    }

    /* ===== 全站頁尾 ===== */
    .site-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      padding-block: 28px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .04em;
      line-height: 1.8;
    }

    .site-footer p { margin: 0; }

    .site-footer a {
      display: inline-block;
      padding-block: 8px;
      text-underline-offset: 4px;
    }

    /* ===== 顯示畫面的輕微進場效果 ===== */
    .view:not([hidden]) {
      animation: appear .45s ease both;
    }

    @keyframes appear {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== 手機版 ===== */
    @media (max-width: 700px) {
      .wrap { width: calc(100% - 36px); }

      .entrance .logo {
        width: 220px;
        height: 220px;
      }

      .banner { padding: 68px 20px 48px; }

      .banner .logo {
        width: 145px;
        height: 145px;
      }

      .banner > .language { right: 14px; top: 12px; }

      .main-nav { grid-template-columns: 1fr; }

      .main-nav a {
        min-height: 72px;
        padding: 18px 24px;
      }

      .main-nav a + a {
        border-left: 0;
        border-top: 1px solid var(--line);
      }

      .nav-label { font-size: 22px; }

      .manifesto { padding: 76px 0 82px; }

      .manifesto .message { font-size: 15px; }

      .services { padding-block: 60px; }

      .service-grid, .case-grid { grid-template-columns: 1fr; }

      .service-card,
      .service-card + .service-card {
        padding: 28px 0;
        border-left: 0;
      }

      .service-card + .service-card {
        border-top: 1px solid var(--line);
      }

      .service-number { margin-bottom: 20px; }

      .sub-main { padding-top: 55px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    /* ===== V2 紙張、毛冷線及更精緻的小字排版 ===== */
    body::after {
      content: ""; position: fixed; inset: 0; z-index: 20;
      pointer-events: none; opacity: .09;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%3E%3Cfilter%20id%3D%27paper%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.035%20.48%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23paper%29%27%20opacity%3D%27.65%27%2F%3E%3C%2Fsvg%3E");
      background-repeat: repeat;
    }
    .entrance-inner { width: min(100%, 880px); }
    .entrance .logo {
      width: clamp(280px, 32vw, 350px); height: auto;
      max-width: 100%; margin-bottom: -10px;
      filter: drop-shadow(0 8px 12px rgb(48 68 83 / .08));
    }
    .entrance .slogan {
      font-size: clamp(34px, 5.8vw, 60px);
      color: var(--ink); margin-bottom: 34px;
    }
    .enter-button { font-size: 20px; }
    .banner { padding: 76px 0 48px; text-align: left; }
    .banner-layout {
      display: grid; grid-template-columns: 230px minmax(0, 1fr);
      align-items: center; gap: clamp(20px, 4vw, 62px);
    }
    .banner-logo { text-align: center; }
    .banner .logo { width: 240px; max-width: 100%; height: auto; }
    .banner-copy { min-width: 0; }
    .banner .slogan {
      font-size: clamp(30px, 4.2vw, 51px);
      line-height: 1.2; margin: 0 0 34px;
      text-wrap: balance;
    }
    .main-nav {
      background: transparent; gap: 10px;
      border: 0; grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .main-nav a {
      min-height: 68px; padding: 12px 14px; gap: 10px;
      border: 1px solid rgb(86 102 118 / .24);
      border-radius: 3px; align-items: center;
      background: rgb(250 248 243 / .25);
    }
    .main-nav a + a { border: 1px solid rgb(86 102 118 / .24); }
    .main-nav a:hover { background: var(--paper); }
    .nav-label { font-size: 18px; line-height: 1.35; }
    .nav-number { font-size: 10px; }
    .arrow { font-size: 17px; }
    .manifesto h2 { font-size: clamp(36px, 5.8vw, 66px); }
    .manifesto .message { font-size: 15px; }
    .section-heading h2 { font-size: clamp(29px, 3.8vw, 43px); }
    .service-card h3 { font-size: 25px; }
    .case-card h3 { font-size: 23px; }
    .sub-main h1 { font-size: clamp(36px, 6vw, 68px); }
    html:lang(zh-Hant) .nav-label { font-size: 15px; line-height: 1.65; }
    html:lang(zh-Hant) .manifesto h2 {
      font-size: clamp(28px, 4vw, 46px); line-height: 1.55;
    }
    html:lang(zh-Hant) .manifesto h2 em { font-style: normal; }
    html:lang(zh-Hant) .section-heading h2 {
      font-size: clamp(25px, 3vw, 34px); line-height: 1.5;
    }
    html:lang(zh-Hant) .service-card h3,
    html:lang(zh-Hant) .case-card h3 { font-size: 21px; line-height: 1.6; }
    html:lang(zh-Hant) .sub-main h1 {
      font-size: clamp(30px, 4.5vw, 48px); line-height: 1.5;
    }
    html:lang(zh-Hant) .manifesto .message,
    html:lang(zh-Hant) .service-card p,
    html:lang(zh-Hant) .case-card p { font-size: 14px; line-height: 2; }
    html:lang(zh-Hant) .eyebrow { letter-spacing: .12em; }

    /* 連線走左側預留空間，毛冷球標記每個 section */
    .journey { position: relative; isolation: isolate; }
    .journey > section { position: relative; z-index: 1; }
    .journey .wrap { width: min(1060px, calc(100% - 132px)); }
    .journey > .services { background: rgb(250 248 243 / .55); }
    #yarn-map {
      position: absolute; inset: 0; width: 100%; height: 100%;
      z-index: 2; overflow: hidden; pointer-events: none;
    }
    .yarn-line { fill: none; stroke: #A78A61; stroke-width: 1.5; opacity: .65; }
    .yarn-fibre {
      fill: none; stroke: #E9DFCA; stroke-width: .65;
      stroke-dasharray: 2 3; opacity: .85;
    }
    .manifesto { padding-block: 108px; }
    .service-grid { gap: 0; }

    /* 公司資料及社交平台；未設定網址時顯示非連結狀態 */
    .site-footer {
      display: grid; grid-template-columns: 1fr auto;
      align-items: start; gap: 32px; padding-block: 42px 26px;
    }
    .footer-company {
      font-family: var(--serif); font-size: 23px;
      color: var(--ink); letter-spacing: .015em; margin-bottom: 8px !important;
    }
    .footer-meta { font-size: 12px; line-height: 1.9; }
    .social-list { display: flex; gap: 12px; flex-wrap: wrap; }
    .social-link {
      display: inline-flex !important; align-items: center;
      justify-content: center; width: 44px; height: 44px;
      border: 1px solid var(--line); border-radius: 50%;
      color: var(--ink); background: rgb(250 248 243 / .45);
    }
    a.social-link:hover { border-color: var(--gold); background: var(--oat); }
    .social-link[aria-disabled="true"] { opacity: .48; cursor: default; }
    .social-link svg { width: 18px; height: 18px; }
    .social-caption { font-size: 11px; margin-top: 8px !important; }
    .footer-bottom {
      grid-column: 1 / -1; display: flex; flex-wrap: wrap;
      justify-content: space-between; gap: 12px 24px;
      border-top: 1px solid var(--line); padding-top: 18px;
    }
    @media (max-width: 900px) {
      .banner-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; }
      .banner .logo { width: 185px; }
      .main-nav { grid-template-columns: 1fr; gap: 7px; }
      .main-nav a { min-height: 48px; padding: 9px 14px; }
      .banner .slogan { font-size: clamp(27px, 4.4vw, 42px); margin-bottom: 22px; }
    }
    @media (max-width: 700px) {
      .entrance { padding: 36px 20px; }
      .entrance .logo { width: min(285px, 88vw); height: auto; }
      .entrance .slogan { font-size: clamp(32px, 8.5vw, 42px); }
      .banner { padding: 74px 0 38px; }
      .banner-layout { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
      .banner .logo { width: 145px; max-width: none; transform: translateX(-22px); }
      .banner .slogan { font-size: clamp(25px, 5.8vw, 36px); }
      .nav-label { font-size: 16px; }
      html:lang(zh-Hant) .nav-label { font-size: 14px; }
      .nav-number { display: none; }
      .main-nav a + a { border: 1px solid rgb(86 102 118 / .24); }
      .journey .wrap { width: calc(100% - 76px); margin-left: 54px; margin-right: 22px; }
      .manifesto { padding-block: 78px; }
      .manifesto h2 { font-size: clamp(32px, 8vw, 43px); }
      .section-heading h2 { font-size: 30px; }
      .service-card h3 { font-size: 24px; }
      .case-card h3 { font-size: 22px; }
      .site-footer { grid-template-columns: 1fr; gap: 26px; }
      .footer-bottom { grid-column: 1; }
    }
    @media (max-width: 360px) {
      .banner-layout { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
      .banner .logo { width: 124px; transform: translateX(-20px); }
      .main-nav a { padding-inline: 10px; }
    }

  
/* 2026-09-23 入口尺寸及藝術背景；保留原有紙張與毛冷線 */
.entrance {position:relative; isolation:isolate; min-height:72svh; padding:86px 24px 58px; overflow:hidden;}
.entrance > .language {position:absolute; top:18px; right:24px; z-index:3;}
.entrance .logo {width:clamp(150px,18vw,220px); height:auto; margin-bottom:8px;}
.entrance .slogan {font-size:clamp(25px,3.4vw,38px); margin-bottom:26px;}
.entrance .enter-button {font-size:17px; min-height:46px; padding:10px 28px;}
.entrance::before {content:'';position:absolute;inset:12% -8%;z-index:-1;background:radial-gradient(ellipse at 20% 40%,#d9e2dc88,transparent 36%),radial-gradient(ellipse at 80% 70%,#e6d5ba77,transparent 34%);}
.art-motifs {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;color:#aa8650;opacity:.32;}
.journey {background-image:radial-gradient(ellipse at 95% 20%,#d9e2dc55,transparent 25%);}
.contact-details {font-style:normal;line-height:2;max-width:640px;}
.contact-details p {margin-bottom:24px;}
.contact-details a {overflow-wrap:anywhere;text-underline-offset:5px;}
@media(max-width:700px){.entrance .logo{width:170px}.entrance .slogan{font-size:27px}.entrance{min-height:68svh}.art-motifs{opacity:.2}}

/* 公司介紹 */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,76px);align-items:center}
.about-grid figure{margin:0}.about-grid img{width:100%;height:auto;display:block;border-radius:160px 160px 8px 8px}
.about-copy h2{font-size:clamp(28px,3.2vw,42px);line-height:1.25}.about-copy p{font-size:15px;line-height:1.95;color:var(--muted)}
.about-services{margin-top:90px}.about-services>h2{font-size:34px}
/* 合作畫廊，可觸控、鍵盤及按鈕操作 */
.gallery-intro{max-width:650px;line-height:1.9;color:var(--muted)}
.gallery-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin:25px 0}
.gallery-controls button,.dialog-close{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:22px;cursor:pointer}
.gallery-controls button:disabled{opacity:.35;cursor:default}
.concept-gallery{--card-width:min(70vw,560px);display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:25px max(0px,calc((100% - var(--card-width))/2)) 40px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.concept-card{flex:0 0 min(70vw,560px);width:min(70vw,560px);max-width:none;scroll-snap-align:center;border:0;padding:0;background:transparent;text-align:left;color:var(--ink);cursor:pointer;transform:scale(.9);opacity:.62;transition:transform .35s,opacity .35s}
.concept-card.is-active{transform:scale(1);opacity:1}.concept-card:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.concept-art{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:120px 120px 5px 5px;background:#dbe2dc;position:relative}
.concept-art-1{background:#e8d9c7;border-radius:5px 120px 5px 5px}.concept-art-2{background:#d5dfe6;border-radius:120px 5px 120px 5px}
.concept-art::before{content:'';position:absolute;width:65%;height:65%;border:1px solid #aa865055;border-radius:50%;transform:rotate(-25deg) scaleX(.7)}
.concept-symbol{font:100px var(--serif);color:var(--blue)}.concept-art img{width:100%;height:100%;object-fit:cover;position:relative}
.concept-caption{display:block;padding:24px 4px}.concept-caption small{font-size:11px;color:var(--muted);letter-spacing:.06em}.concept-caption strong{display:block;font:30px var(--serif);margin-top:10px}
#concept-dialog{border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:64px 38px 38px;max-width:min(620px,calc(100% - 32px));max-height:85svh;overflow:auto;border-radius:8px}
#concept-dialog::backdrop{background:rgb(30 44 55 / .55);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:16px;top:12px}#concept-dialog h2{font-size:34px}#concept-detail{line-height:1.9;margin-bottom:28px}
html:lang(zh-Hant) .about-copy h2{font-size:30px;line-height:1.6}html:lang(zh-Hant) .slogan{font-style:normal;line-height:1.5}
@media(max-width:700px){.about-grid{grid-template-columns:1fr}.about-grid figure{max-width:290px;margin:auto}.about-copy p{font-size:14px}.about-services{margin-top:55px}.concept-gallery{--card-width:76vw;gap:12px;padding-inline:max(0px,calc((100% - var(--card-width))/2))}.concept-card{flex-basis:76vw;max-width:none;width:76vw}.concept-caption strong{font-size:25px}}

.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}
.contact-form-panel h2{font-size:34px}.form-notice{font-size:14px;color:var(--muted);line-height:1.8}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#contact-form label{display:block;min-width:0;font-size:13px;margin-bottom:24px}#contact-form label>span{display:block;margin-bottom:10px}
#contact-form input,#contact-form textarea{display:block;width:100%;min-width:0;border:1px solid var(--line);background:var(--paper);padding:14px;font:16px var(--body);color:var(--ink);border-radius:3px}
#contact-form textarea{resize:vertical}#contact-form input:focus-visible,#contact-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#contact-form button:disabled{opacity:.5;cursor:not-allowed;transform:none;background:transparent;color:var(--ink)}
@media(max-width:700px){.contact-layout{grid-template-columns:1fr;gap:28px}.form-grid{grid-template-columns:1fr;gap:0}}

/* 裝飾不接收操作，主頁保留毛冷線。 */
.home-motifs{z-index:0;opacity:.18}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 2026-09-23 更清楚的文字、固定英文頁尾與跨裝置箭咀 */
body{font-weight:500;min-height:100svh;display:flex;flex-direction:column}
h1,h2,h3,.slogan,.enter-button,.home-link{font-weight:600}
p{line-break:strict;word-break:normal;text-wrap:pretty}
.manifesto .message{max-width:720px;text-wrap:balance;line-height:2}
.manifesto h2{text-wrap:balance}
.main-nav .nav-label{font-size:20px;font-weight:700;line-height:1.45;color:var(--ink)}
html:lang(zh-Hant) .main-nav .nav-label{font-size:17px;font-weight:700}
.main-nav a{background:rgb(250 248 243 / .5)}
.service-card p,.case-card p,.about-copy p,.manifesto .message,.gallery-intro{color:#4d5d68;font-weight:500}
.concept-caption strong{font-weight:600}
.sentence-stop{font-size:.76em;line-height:0}
.phrase-end{white-space:nowrap}
.arrow-icon{width:19px;height:19px;display:inline-block;vertical-align:-.15em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.gallery-controls button{display:grid;place-items:center}
.site-footer{margin-top:auto;padding-top:24px;padding-bottom:14px;gap:14px 24px;align-items:center;font-size:10px}
.footer-company{font-family:var(--body);font-size:12px;font-weight:500;margin-bottom:0!important;line-height:1.8}
.footer-established{font-size:10px;display:inline-block;margin-left:10px;color:var(--muted);white-space:nowrap}
.footer-bottom{padding-top:10px;gap:8px 18px;font-size:10px}
.social-list{gap:6px}.social-link{width:36px;height:36px}.social-link svg{width:15px;height:15px}
.entrance{min-height:76svh}.about-grid{align-items:start}
@media(max-width:700px){.main-nav .nav-label{font-size:18px}html:lang(zh-Hant) .main-nav .nav-label{font-size:16px}.site-footer{grid-template-columns:1fr;gap:10px;padding-top:22px;padding-bottom:12px}.footer-established{margin-left:0;display:block}.footer-company{font-size:11px}.manifesto .message{font-size:14px;text-wrap:pretty}.entrance{min-height:70svh}}

/* 創意背景，維持中央閱讀區及紙紋，所有裝飾不接收點擊 */
body{background-image:url('/assets/creative-background.svg');background-size:1400px 900px;background-position:center top;background-repeat:repeat-y}
.banner{isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#e4d9c4,#dfe8df 65%,#e7ddce)}
.banner::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/creative-background.svg') center 42%/cover no-repeat;opacity:.85}
.banner::after{content:'';position:absolute;right:5%;bottom:-65px;width:170px;height:170px;border:1px solid #aa865066;border-radius:50%;box-shadow:0 0 0 22px #faf8f322,0 0 0 44px #faf8f322;z-index:-1;pointer-events:none}
.sub-header{background:rgb(250 248 243 / .8);border-radius:0 0 18px 18px;padding-inline:18px}
.sub-main{position:relative}.page-content{background:rgb(250 248 243 / .78);border-radius:24px;padding:30px;box-shadow:0 12px 45px #30445305}
.page-about{background-position:left 80px}.page-partnerships{background-position:right 160px}.page-contact{background-position:center 40px}
.entrance::before{background:radial-gradient(ellipse at 20% 40%,#aecabd88,transparent 38%),radial-gradient(ellipse at 80% 70%,#dcc19877,transparent 38%)}
.entrance-brand{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(28px,3.4vw,38px);color:var(--ink);letter-spacing:.1em;line-height:1.15;margin:6px 0 16px}
.service-card{border-top:3px solid #aa865066}.service-card:nth-child(2){border-top-color:#8daea0}.service-card:nth-child(3){border-top-color:#829db3}
.case-media{background:radial-gradient(circle at 75% 25%,#faf8f3aa 0 22%,transparent 22%),linear-gradient(135deg,#e6dccb,#d1dfd7)}
.case-media.alternate{background:radial-gradient(circle at 20% 75%,#faf8f388 0 25%,transparent 25%),linear-gradient(45deg,#d7e1e6,#e6dccb)}
.site-footer{background:rgb(242 238 230 / .88)}
@media(max-width:700px){
 body{background-size:780px auto;background-position:center top}
 .page-content{padding:20px 16px;border-radius:18px}
 .banner-layout{grid-template-columns:88px minmax(0,1fr);gap:14px}
 .banner .logo{width:126px;transform:translateX(-18px)}
 .main-nav{gap:7px}.main-nav a,.main-nav a+a{min-height:44px;padding:8px 11px;gap:8px;border:1px solid #56667638;border-left:3px solid #aa8650;border-radius:12px 3px 12px 3px;background:linear-gradient(110deg,#faf8f3e8,#faf8f377);box-shadow:0 3px 9px #30445306}
 .main-nav a:nth-child(2){border-left-color:#7d9f8f}.main-nav a:nth-child(3){border-left-color:#7894ac}
 .main-nav .nav-label{font-size:15px;line-height:1.35}html:lang(zh-Hant) .main-nav .nav-label{font-size:14px;line-height:1.5}
 .main-nav .arrow-icon{width:16px;height:16px}
 .entrance-brand{font-size:27px;margin-bottom:14px}
 .contact-layout{min-width:0}.contact-form-panel{min-width:0}
}