/* 正風毛筆 — Hero 標題用 */
    @font-face {
      font-family: 'MasaFont';
      src: url('../fonts/font-01-e6562d3e.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'MasaFont';
      src: url('../fonts/font-02-f153f3ce.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    /* ============================================
       方案1：極簡自然光 V2 — 原版 wabi-sabi + 金光質感
       是枝裕和的安靜 + 劍來的暖金深度
       ============================================ */
    :root {
      --bg: #f3ede2;             /* 暖米白 */
      --bg-warm: #ebe4d6;        /* 暖紙 */
      --bg-card: #eae3d4;        /* 卡片 */
      --bg-ardex: #e4dccb;       /* Ardex 區 */

      --text: #1e1c18;           /* 深棕墨 */
      --text-mid: #3f392f;
      --text-dim: rgba(30,28,24,0.74);
      --text-muted: rgba(30,28,24,0.56);

      --gold: #a08040;           /* 暖金（低調版） */
      --gold-dark: #72591f;      /* 小字與連結用，符合對比需求 */
      --gold-bright: #b89848;
      --gold-warm: rgba(160,128,64,0.2);
      --gold-glow: rgba(160,128,64,0.08);

      --brick: #8a5040;          /* 紅磚 */
      --stone: #6a6358;          /* 石灰 */
      --accent-red: #9b2f22;     /* 重點紅 */

      --hairline: rgba(30,28,24,0.1);
      --hairline-strong: rgba(30,28,24,0.18);

      --font-display: 'LXGW WenKai TC', 'Noto Serif TC', serif;       /* 霞鶩文楷 — 繁體完整 */
      --font-heading: 'Noto Serif TC', serif;                      /* 專業宋體 — 產品標題 */
      --font-body: 'Noto Sans TC', sans-serif;

      --fs-xs: 0.82rem;
      --fs-sm: 0.96rem;
      --fs-base: 1.1rem;
      --fs-lg: clamp(1.5rem, 2.8vw, 2rem);
      --fs-xl: clamp(2.8rem, 7vw, 4.8rem);

      --sp-4: 4px;  --sp-8: 8px;  --sp-12: 12px; --sp-16: 16px;
      --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px;

      --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      color: var(--text);
      background-color: var(--bg);
      background-image:
        /* 金色黃昏光暈 */
        radial-gradient(ellipse 1000px 600px at 75% 8%,
          rgba(180,152,72,0.08), transparent 55%),
        radial-gradient(ellipse 800px 500px at 15% 60%,
          rgba(160,128,64,0.04), transparent 50%),
        /* 紙張纖維 */
        repeating-linear-gradient(92deg, rgba(120,100,70,0.02) 0 1px, transparent 1px 4px);
      line-height: 1.9;
      letter-spacing: 0.02em;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: var(--font-heading);
      font-weight: 600;
      line-height: 1.35;
      color: var(--text);
    }
    p { max-width: 65ch; }
    a { color: inherit; }

    .wrap {
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      padding: 0 var(--sp-32);
    }

    .rv {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    }
    .rv.vis { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .rv { opacity: 1; transform: none; transition: none; }
    }
    .no-js .rv { opacity: 1; transform: none; }

    /* ============================================
       HERO — 暖光 + 留白 + 毛筆字
       ============================================ */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--sp-96) var(--sp-32);
      position: relative;
      overflow: hidden;
      background:
        /* 右上角金色光暈（黃昏感） */
        radial-gradient(ellipse 700px 500px at 80% 15%,
          rgba(184,152,72,0.12), transparent 55%),
        /* 左下角柔光 */
        radial-gradient(ellipse 500px 400px at 10% 80%,
          rgba(160,128,64,0.06), transparent 50%),
        var(--bg);
    }

    /* 金光粒子 */
    .hero__dust {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }
    .dust {
      position: absolute;
      width: 2px; height: 2px;
      background: var(--gold);
      border-radius: 50%;
      opacity: 0;
      animation: dustFloat 14s ease-in-out infinite;
    }
    @keyframes dustFloat {
      0%, 100% { opacity: 0; transform: translateY(0); }
      30% { opacity: 0.5; }
      70% { opacity: 0.3; }
      100% { transform: translateY(-80px); opacity: 0; }
    }

    .hero__inner {
      max-width: 960px;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .hero__era {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: var(--fs-xs);
      letter-spacing: 0.55em;
      color: var(--gold);
      margin-bottom: var(--sp-32);
    }

    .hero__title {
      font-family: 'MasaFont', var(--font-display);
      font-size: var(--fs-xl);
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.15;
      color: var(--text);
      margin-bottom: var(--sp-16);
    }

    .hero__sub {
      font-weight: 300;
      font-size: var(--fs-sm);
      letter-spacing: 0.35em;
      color: var(--text-mid);
      margin: 0 auto var(--sp-32);
    }

    .hero__divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-16);
      margin: var(--sp-24) auto;
    }
    .hero__divider-line {
      width: 60px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-warm), transparent);
    }
    .hero__divider-dot {
      width: 6px; height: 6px;
      background: var(--gold);
      transform: rotate(45deg);
    }

    .hero__tagline {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--fs-base);
      color: var(--text-dim);
      letter-spacing: 0.15em;
    }

    .hero__stats {
      display: flex;
      justify-content: center;
      gap: var(--sp-48);
      margin-top: var(--sp-64);
      list-style: none;
    }
    .hero__stat-num {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      color: var(--gold);
      display: block;
      line-height: 1;
      margin-bottom: var(--sp-4);
    }
    .hero__stat-label {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      letter-spacing: 0.12em;
    }

    /* ============================================
       HIGHLIGHTS
       ============================================ */
    .highlights {
      padding: var(--sp-24) 0;
      border-top: 1px solid var(--hairline-strong);
      border-bottom: 1px solid var(--hairline-strong);
      background: linear-gradient(180deg, rgba(160,128,64,0.04), transparent);
    }
    .highlights__list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--sp-12) var(--sp-48);
      list-style: none;
    }
    .highlights__item {
      font-weight: 500;
      font-size: var(--fs-sm);
      letter-spacing: 0.1em;
      color: var(--text-mid);
      position: relative;
      padding-left: var(--sp-16);
    }
    .highlights__link {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid var(--hairline-strong);
      transition: color 160ms ease, border-color 160ms ease;
    }
    .highlights__link:hover,
    .highlights__link:focus-visible {
      color: var(--gold);
      border-color: currentColor;
    }
    .highlights__item::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      width: 5px; height: 5px;
      background: var(--gold);
      transform: translateY(-50%) rotate(45deg);
    }

    /* ============================================
       SECTION
       ============================================ */
    .sect { padding: var(--sp-96) 0 var(--sp-64); }

    .sect__label {
      font-weight: 500;
      font-size: var(--fs-xs);
      letter-spacing: 0.3em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: var(--sp-12);
      display: inline-block;
      padding-left: var(--sp-24);
      position: relative;
    }
    .sect__label::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      width: 16px; height: 2px;
      background: var(--gold);
    }

    .sect__title {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(1.7rem, 3.2vw, 2.3rem);
      letter-spacing: 0.1em;
      margin-bottom: var(--sp-48);
      position: relative;
      display: inline-block;
      color: var(--text);
    }
    .sect__title::after {
      content: '';
      position: absolute;
      left: 0; bottom: -10px;
      width: 48px; height: 2px;
      background: linear-gradient(90deg, var(--gold), transparent);
    }

    .sect-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, var(--hairline-strong) 30%, var(--gold-warm) 50%, var(--hairline-strong) 70%, transparent 95%);
      border: none;
    }

    /* ============================================
       PRODUCTS — TAB 分頁
       ============================================ */
    .tabs {
      margin-bottom: var(--sp-48);
    }
    .tabs__nav {
      display: flex;
      flex-wrap: nowrap;
      gap: var(--sp-32);
      list-style: none;
      border-bottom: 1px solid var(--hairline-strong);
      margin-bottom: var(--sp-32);
      overflow-x: auto;
      padding-right: var(--sp-8);
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: var(--sp-8);
      scrollbar-width: none;
    }
    .tabs__nav::-webkit-scrollbar { display: none; }
    .tabs__nav::after {
      content: "";
      flex: 0 0 var(--sp-8);
    }
    .tabs__btn {
      background: none;
      border: none;
      font-family: var(--font-body);
      font-size: clamp(0.88rem, 1.18vw, var(--fs-sm));
      font-weight: 500;
      color: var(--text-mid);
      padding: var(--sp-10) 24px;
      cursor: pointer;
      white-space: nowrap;
      border-bottom: 2px solid transparent;
      transition: all 0.3s var(--ease);
      letter-spacing: 0.02em;
    }
    .tabs__btn:hover {
      color: var(--text);
    }
    .tabs__btn.active {
      color: var(--gold);
      border-bottom-color: var(--gold);
    }
    .tabs__panel {
      display: none;
    }
    .tabs__panel.active {
      display: block;
    }

    /* 產品卡片 */
    .prod-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      align-items: start;
      gap: var(--sp-16);
      list-style: none;
    }
    .prod-card {
      padding: var(--sp-24);
      border: 1px solid var(--hairline);
      background: var(--bg-card);
      transition: border-color 0.3s var(--ease);
      position: relative;
    }
    .prod-card[id] { scroll-margin-top: 80px; }
    .prod-card:hover {
      border-color: var(--gold-warm);
    }
    .prod-card--clickable {
      cursor: pointer;
    }
    .prod-card__cover-link {
      position: absolute;
      inset: 0;
      z-index: 2;
      border: 0;
    }
    .prod-card__cover-link:focus-visible {
      outline: 2px solid var(--gold);
      outline-offset: 3px;
    }
    .prod-card--clickable .prod-card__link {
      position: relative;
      z-index: 3;
    }
    .prod-card__name {
      font-family: var(--font-heading);
      font-size: var(--fs-base);
      font-weight: 600;
      line-height: 1.45;
      margin-bottom: var(--sp-8);
      color: var(--text);
    }
    .prod-card__desc {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      line-height: 1.75;
      max-width: none;
    }
    .prod-card__desc strong {
      color: var(--text-mid);
      font-weight: 600;
    }
    .text-emphasis-red {
      color: var(--accent-red);
      font-weight: 700;
    }
    .prod-card__line {
      display: block;
      margin-top: var(--sp-4);
    }
    .usage-table {
      margin-top: var(--sp-12);
      border: 1px solid var(--hairline);
      background: rgba(255, 255, 255, 0.36);
      overflow: hidden;
    }
    .usage-table__title {
      margin: 0;
      padding: 8px 10px;
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text);
      background: rgba(181, 137, 47, 0.12);
      border-bottom: 1px solid var(--hairline);
    }
    .usage-table table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: var(--fs-xs);
      line-height: 1.45;
      color: var(--text-mid);
    }
    .usage-table th,
    .usage-table td {
      padding: 8px 10px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid var(--hairline);
    }
    .usage-table th {
      font-weight: 700;
      color: var(--text);
      background: rgba(251, 250, 247, 0.7);
    }
    .usage-table tr:last-child td {
      border-bottom: 0;
    }
    .usage-table__hint {
      margin: 0;
      padding: 8px 10px;
      font-size: var(--fs-xs);
      line-height: 1.5;
      color: var(--text-dim);
      border-top: 1px solid var(--hairline);
    }
    .color-card {
      margin-top: var(--sp-16);
    }
    .color-card__title {
      margin: 0 0 var(--sp-8);
      font-family: var(--font-heading);
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text-mid);
    }
    .color-card__link {
      display: block;
      cursor: zoom-in;
    }
    .color-card__link:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .color-card__img {
      display: block;
      width: 100%;
      max-height: 320px;
      object-fit: contain;
      object-position: center center;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      background: #fbfaf7;
    }
    .color-card__hint {
      margin-top: var(--sp-8);
      font-size: var(--fs-xs);
      color: var(--text-muted);
      line-height: 1.5;
    }
    .prod-note {
      margin-top: var(--sp-16);
      font-size: var(--fs-xs);
      line-height: 1.6;
      color: var(--text-dim);
    }
    .panel-guides {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px 24px;
      margin-top: var(--sp-24);
      padding-top: var(--sp-16);
      border-top: 1px solid var(--line);
    }
    .panel-guides__title {
      margin: 0;
      color: var(--text);
      font-size: var(--fs-sm);
      font-weight: 700;
    }
    .panel-guides__links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
    }
    .panel-guides .prod-card__link { margin-top: 0; }
    .inline-link {
      color: var(--gold-dark);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    .inline-link:hover { color: var(--text); }
    .prod-card__img {
      display: block;
      width: 100%;
      height: 300px;
      object-fit: contain;
      object-position: center center;
      background: #fbfaf7;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      padding: var(--sp-12);
      margin-bottom: var(--sp-16);
    }
    .prod-card__img--compact {
      height: 260px;
      padding: var(--sp-24);
    }
    .prod-card__img--cement {
      aspect-ratio: 4 / 3;
      height: auto;
      object-fit: cover;
      object-position: center center;
      padding: 0;
      background: #fbfaf7;
    }
    .prod-card__img--chc-real {
      height: 220px;
    }
    .prod-card__doc-link {
      display: block;
      text-decoration: none;
      cursor: zoom-in;
    }
    .prod-card__doc-link:focus-visible .prod-card__img {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }
    .prod-card__img[data-lightbox-image] {
      cursor: zoom-in;
    }
    .prod-card__img[data-lightbox-image]:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }
    .photo-watermark {
      position: relative;
      margin-bottom: var(--sp-16);
    }
    .photo-watermark .prod-card__img {
      margin-bottom: 0;
    }
    .photo-watermark__label,
    .tile-lightbox__viewport[data-watermark]::after {
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.36);
      border-radius: 3px;
      background: rgba(20, 18, 15, 0.56);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(4px);
      pointer-events: none;
    }
    .photo-watermark__label {
      position: absolute;
      left: var(--sp-12);
      bottom: var(--sp-12);
      z-index: 2;
    }
    .prod-card__img--document {
      height: 420px;
      object-fit: contain;
      object-position: center center;
      padding: var(--sp-8);
      background: #fbfaf7;
    }

    .prod-card__img--scene {
      height: 220px;
      object-fit: cover;
      object-position: center center;
      padding: 0;
      background: var(--bg-card);
    }
    .prod-card__img--packshot {
      height: 320px;
      object-fit: contain;
      object-position: center center;
      padding: var(--sp-8);
      background: #fbfaf7;
    }
    .prod-card__img--spc {
      height: 190px;
      object-fit: cover;
      object-position: center center;
      padding: 0;
      background: var(--bg-card);
    }
    .prod-card__img--unitbath {
      height: 260px;
      object-fit: contain;
      object-position: center center;
      padding: var(--sp-8);
      background: #fff;
    }
    .prod-card__img--nice-floor {
      height: 380px;
      object-fit: contain;
      object-position: center center;
      padding: 0;
      background: #fbfaf7;
    }
    .showroom-gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-16);
      margin: 0 0 var(--sp-32);
    }
    .showroom-gallery__item {
      position: relative;
      margin: 0;
    }
    .showroom-gallery__item::after {
      content: "協力建材";
      position: absolute;
      left: var(--sp-12);
      bottom: var(--sp-12);
      z-index: 1;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.36);
      border-radius: 3px;
      background: rgba(20, 18, 15, 0.56);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.08em;
      backdrop-filter: blur(4px);
      pointer-events: none;
    }
    .showroom-gallery__img {
      display: block;
      width: 100%;
      aspect-ratio: 15 / 16;
      object-fit: cover;
      object-position: center bottom;
      background: var(--bg-card);
      border: 1px solid var(--hairline);
      border-radius: 4px;
      cursor: zoom-in;
    }
    .showroom-gallery__img:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 3px;
    }
    .prod-card__source {
      display: block;
      margin-top: var(--sp-8);
      font-size: var(--fs-xs);
      line-height: 1.5;
      color: var(--text-muted);
    }
    .hiland-detail {
      background: var(--bg-warm);
    }
    .hiland-detail__intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--sp-24);
      align-items: end;
      margin-bottom: var(--sp-32);
    }
    .hiland-detail__intro p {
      max-width: 58ch;
      margin: 0;
      color: var(--text-dim);
      line-height: 1.8;
    }
    .hiland-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-12);
      justify-content: flex-end;
    }
    .hiland-size-block,
    .hiland-series {
      margin-top: var(--sp-32);
    }
    .hiland-size-block h3,
    .hiland-series h3,
    .hiland-group h3,
    .hiland-series-card h3 {
      margin: 0;
      font-family: var(--font-display);
      letter-spacing: 0;
      color: var(--text);
    }
    .hiland-size-list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-8);
      margin-top: var(--sp-12);
    }
    .hiland-size-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: var(--sp-4) var(--sp-12);
      border: 1px solid var(--hairline-strong);
      border-radius: 4px;
      background: #fbfaf7;
      color: var(--text-mid);
      font-size: var(--fs-xs);
      line-height: 1.2;
      white-space: nowrap;
    }
    .hiland-size-chip--link {
      cursor: pointer;
      text-decoration: none;
      transition: border-color .2s ease, color .2s ease, background .2s ease;
    }
    .hiland-size-chip--link:hover,
    .hiland-size-chip--link:focus-visible {
      color: var(--gold);
      border-color: var(--gold);
      background: #fffaf0;
      outline: none;
    }
    .hiland-groups {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--sp-16);
      margin-top: var(--sp-24);
    }
    .hiland-group {
      border: 1px solid var(--hairline);
      background: var(--bg-card);
      padding: var(--sp-24);
      border-radius: 4px;
    }
    .hiland-group p {
      margin: var(--sp-16) 0 0;
      color: var(--text-dim);
      line-height: 1.7;
    }
    .hiland-series-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: var(--sp-16);
      list-style: none;
      margin: var(--sp-16) 0 0;
      padding: 0;
    }
    .hiland-series-card {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg-card);
      min-height: 100%;
      scroll-margin-top: 96px;
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    .hiland-series-card:target,
    .hiland-series-card--focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(154, 123, 47, .18);
      transform: translateY(-2px);
    }
    .hiland-series-card img {
      width: 100%;
      height: 150px;
      object-fit: cover;
      display: block;
      background: #fbfaf7;
    }
    .imported-tile-grid {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      align-items: start;
    }
    .imported-tile-grid .hiland-series-card img {
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
      object-position: center;
      padding: 0;
      cursor: zoom-in;
    }
    .imported-tile-grid .hiland-series-card img:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: -3px;
    }
    .imported-tile-grid .hiland-series-card__body {
      display: none;
    }
    .tile-lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      place-items: center;
      padding: var(--sp-24);
    }
    body.has-lightbox {
      overflow: hidden;
    }
    .tile-lightbox.is-open {
      display: grid;
    }
    .tile-lightbox__backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(24, 21, 16, .78);
      cursor: zoom-out;
    }
    .tile-lightbox__dialog {
      position: relative;
      z-index: 1;
      width: min(1120px, 94vw);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      gap: var(--sp-12);
      padding: var(--sp-16);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 6px;
      background: var(--bg-card);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    }
    .tile-lightbox__close {
      align-self: flex-end;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      background: #fbfaf7;
      color: var(--text);
      font: inherit;
      padding: 6px 12px;
      cursor: pointer;
    }
    .tile-lightbox__close:focus-visible {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }
    .tile-lightbox__viewport {
      position: relative;
      width: 100%;
      max-height: 74vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fbfaf7;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      cursor: zoom-in;
    }
    .tile-lightbox__viewport[data-watermark]::after {
      content: attr(data-watermark);
      position: absolute;
      left: var(--sp-16);
      bottom: var(--sp-16);
      z-index: 3;
    }
    .tile-lightbox__img {
      width: 100%;
      max-height: 74vh;
      object-fit: contain;
      background: transparent;
      border: 0;
      border-radius: 0;
      transform-origin: center center;
      transition: transform .12s ease-out;
      cursor: zoom-in;
      user-select: none;
      touch-action: none;
    }
    .tile-lightbox__img.is-zoomed {
      cursor: grab;
    }
    .tile-lightbox__img.is-dragging {
      cursor: grabbing;
      transition: none;
    }
    .tile-lightbox__caption {
      margin: 0;
      color: var(--text-mid);
      font-size: var(--fs-sm);
    }
    .hiland-series-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: var(--sp-16);
    }
    .hiland-series-card__type {
      margin-bottom: var(--sp-8);
      color: var(--gold);
      font-size: var(--fs-xs);
    }
    .hiland-card-specs {
      display: grid;
      gap: var(--sp-6);
      margin-top: var(--sp-10);
    }
    .hiland-card-specs__label {
      color: var(--text-muted);
      font-size: .72rem;
      letter-spacing: .08em;
    }
    .hiland-card-specs__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-6);
    }
    .hiland-card-specs__chip {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 2px var(--sp-8);
      border: 1px solid var(--hairline);
      border-radius: 4px;
      background: rgba(255, 252, 246, .78);
      color: var(--text-mid);
      font-size: .72rem;
      line-height: 1.25;
      white-space: nowrap;
    }
    .hiland-series-card p {
      flex: 1;
      margin: var(--sp-12) 0 var(--sp-8);
      color: var(--text-dim);
      font-size: var(--fs-sm);
      line-height: 1.7;
    }
    @media (max-width: 720px) {
      .prod-card__img--scene { height: 190px; }
      .prod-card__img--packshot { height: 280px; }
      .prod-card__img--spc { height: 150px; }
      .prod-card__img--nice-floor { height: 320px; }
      .hiland-detail__intro { grid-template-columns: 1fr; }
      .hiland-actions { justify-content: flex-start; }
      .hiland-series-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    }
    @media (max-width: 720px) {
      .prod-card__img { height: 240px; }
      .prod-card__img--compact { height: 220px; }
    }
    .prod-card__link {
      display: inline-block;
      margin-top: var(--sp-8);
      font-size: var(--fs-xs);
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid var(--gold-warm);
      transition: all 0.3s var(--ease);
    }
    .prod-card__link:hover {
      color: var(--gold-bright);
      border-color: var(--gold-bright);
    }

    /* 車輛相簿 */
    .fleet__intro {
      font-size: var(--fs-base);
      color: var(--text-dim);
      margin-bottom: var(--sp-32);
      max-width: 50ch;
    }
    .fleet__gallery {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--sp-16);
      align-items: stretch;
    }
    .fleet__photo {
      aspect-ratio: 4/3;
      border: 1px solid var(--hairline);
      border-radius: 4px;
      overflow: hidden;
      background: var(--bg-card);
      position: relative;
      isolation: isolate;
    }
    .fleet__photo::after {
      content: '';
      position: absolute;
      inset: auto 0 0;
      height: 42%;
      background: linear-gradient(180deg, transparent, rgba(20, 17, 12, 0.58));
      z-index: 1;
      pointer-events: none;
    }
    .fleet__photo::before {
      content: '協力建材';
      position: absolute;
      top: var(--sp-12);
      right: var(--sp-12);
      z-index: 3;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, 0.36);
      border-radius: 3px;
      background: rgba(20, 18, 15, 0.56);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(4px);
      pointer-events: none;
    }
    .fleet__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
    }
    .fleet__photo--feature {
      grid-column: 1 / -1;
      aspect-ratio: 21 / 9;
    }
    .fleet__photo--feature img {
      object-fit: cover;
      object-position: center 46%;
      background: var(--bg-card);
    }
    .fleet__photo--yard {
      grid-column: span 2;
      aspect-ratio: 8/5;
    }
    .fleet__photo--yard img {
      object-position: 58% center;
    }
    .fleet__photo--wide {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 4.5;
    }
    .fleet__photo--wide img {
      object-fit: cover;
      object-position: 58% center;
    }
    .fleet__photo--panorama {
      grid-column: 1 / -1;
      aspect-ratio: 16 / 4.5;
    }
    .fleet__photo--panorama img {
      object-fit: cover;
      object-position: center center;
    }
    .fleet__caption,
    .fleet__tag {
      position: absolute;
      z-index: 2;
      color: #fff;
      text-shadow: 0 1px 8px rgba(0,0,0,.45);
    }
    .fleet__caption {
      left: var(--sp-16);
      right: var(--sp-16);
      bottom: var(--sp-14);
      font-size: var(--fs-xs);
      line-height: 1.55;
      letter-spacing: 0.08em;
    }
    .fleet__caption strong {
      display: block;
      font-family: var(--font-heading);
      font-size: var(--fs-base);
      color: #fff;
      margin-bottom: 2px;
    }
    .fleet__tag {
      top: var(--sp-12);
      left: var(--sp-12);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border: 0;
      background: rgba(33, 28, 18, .70);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      font-size: var(--fs-xs);
      letter-spacing: 0.12em;
      white-space: nowrap;
    }
    .fleet__tag--sand {
      left: auto;
      right: 15%;
      top: 45%;
      background: rgba(52, 47, 39, .76);
    }
    .fleet__tag--privacy {
      top: auto;
      left: auto;
      right: var(--sp-12);
      bottom: var(--sp-12);
      opacity: .88;
    }
    .fleet__tag--daf6 {
      top: auto;
      left: 54%;
      bottom: 29%;
      background: rgba(232, 222, 198, .86);
      color: var(--text);
      text-shadow: none;
      font-size: 11px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      border-radius: 3px;
      padding: 2px 6px;
    }
    @media (max-width: 900px) {
      .fleet__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fleet__photo--yard,
      .fleet__photo--wide,
      .fleet__photo--panorama { grid-column: 1 / -1; aspect-ratio: 16 / 6.48; }
      .fleet__photo--feature { grid-column: 1 / -1; aspect-ratio: 18 / 9; }
      .fleet__tag--sand { right: var(--sp-12); top: 40%; }
    }
    .ardex {
      background: var(--bg-ardex);
      position: relative;
      overflow: hidden;
      padding: var(--sp-40);
      border: 1px solid var(--hairline);
      border-radius: 6px;
    }
    .ardex__german-mark {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 180px;
      height: 5px;
      margin-bottom: var(--sp-24);
      border-radius: 999px;
      overflow: hidden;
    }
    .ardex__german-mark span:nth-child(1) { background: #111; }
    .ardex__german-mark span:nth-child(2) { background: #b21f24; }
    .ardex__german-mark span:nth-child(3) { background: #d9a51f; }
    .ardex__top {
      display: flex;
      align-items: baseline;
      gap: var(--sp-16);
      margin-bottom: var(--sp-8);
      flex-wrap: wrap;
    }
    .ardex__title {
      font-family: var(--font-heading);
      font-size: var(--fs-xl);
      font-weight: 600;
      color: var(--text);
      margin: 0;
      letter-spacing: 0.04em;
    }
    .ardex__badge {
      display: inline-block;
      font-size: var(--fs-xs);
      letter-spacing: 0.18em;
      color: var(--gold-dark);
      border: 1px solid var(--gold-dark);
      padding: 4px 12px;
      border-radius: 2px;
    }
    .ardex__kicker {
      margin: 0 0 var(--sp-16);
      color: var(--gold-dark);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .ardex__desc {
      max-width: 940px;
      font-size: var(--fs-base);
      color: var(--text-dim);
      line-height: 1.95;
      margin-bottom: var(--sp-24);
    }
    .ardex__stats {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--sp-12);
      margin: 0 0 var(--sp-32);
      padding: 0;
    }
    .ardex__stats li {
      min-height: 92px;
      padding: var(--sp-16);
      border: 1px solid rgba(174, 130, 43, .28);
      border-radius: 4px;
      background: rgba(255, 255, 255, .32);
    }
    .ardex__stats strong {
      display: block;
      color: var(--text);
      font-family: var(--font-heading);
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1;
      margin-bottom: var(--sp-8);
      letter-spacing: 0.02em;
    }
    .ardex__stat--revenue strong {
      font-size: clamp(21px, 2vw, 28px);
      line-height: 1.12;
      overflow-wrap: anywhere;
    }
    .ardex__stats span {
      display: block;
      color: var(--text-mid);
      font-size: var(--fs-xs);
      line-height: 1.45;
      letter-spacing: 0.08em;
    }
    .ardex__ref-title {
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: var(--fs-base);
      color: var(--text-mid);
      margin: var(--sp-32) 0 var(--sp-16);
      letter-spacing: 0.06em;
    }
    .ardex__refs {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--sp-16);
      margin-bottom: var(--sp-24);
    }
    .ardex__ref {
      margin: 0;
    }
    .ardex__ref img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 4px;
    }
    .ardex__ref figcaption {
      font-size: var(--fs-xs);
      color: var(--text-mid);
      margin-top: var(--sp-4);
      letter-spacing: 0.04em;
    }

    /* ============================================
       ABOUT
       ============================================ */
    .about__body {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--sp-48);
      align-items: start;
    }
    .about__text {
      font-size: var(--fs-base);
      color: var(--text-dim);
      line-height: 2.05;
    }
    .about__text + .about__text { margin-top: var(--sp-16); }
    .about__badges {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--sp-12);
    }
    .about__badge {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      padding: var(--sp-16) var(--sp-24);
      border: 1px solid var(--hairline);
      font-size: var(--fs-sm);
      letter-spacing: 0.04em;
      color: var(--text-mid);
      transition: border-color 0.4s var(--ease);
    }
    .about__badge:hover { border-color: var(--gold-warm); }
    .about__badge-mark {
      width: 6px; height: 6px;
      background: var(--gold);
      flex-shrink: 0;
      transform: rotate(45deg);
    }

    /* ============================================
       CONTACT
       ============================================ */
    .contact__body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-48);
      align-items: start;
    }
    .contact__list { list-style: none; }
    .contact__item {
      padding: var(--sp-16) 0;
      border-bottom: 1px solid var(--hairline);
    }
    .contact__item:first-child { padding-top: 0; }
    .contact__label {
      display: block;
      font-weight: 500;
      font-size: var(--fs-xs);
      letter-spacing: 0.25em;
      color: var(--gold);
      margin-bottom: var(--sp-4);
    }
    .contact__val { font-size: var(--fs-base); }
    .contact__val a {
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline);
      transition: all 0.3s var(--ease);
    }
    .contact__val a:hover { border-color: var(--gold); color: var(--gold); }
    .contact__phone-line {
      display: flex;
      align-items: center;
      gap: var(--sp-48);
      flex-wrap: wrap;
    }
    .contact__line {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      flex-wrap: wrap;
    }
    .contact__line--inline {
      gap: var(--sp-12);
    }
    .contact__line-qr {
      display: block;
      width: 132px;
      max-width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border: 1px solid var(--hairline-strong);
      border-radius: 4px;
      background: #fff;
    }
    .contact__line-note {
      font-size: var(--fs-xs);
      line-height: 1.6;
      color: var(--text-dim);
    }
    .contact__line-actions {
      display: grid;
      gap: var(--sp-8);
      align-items: start;
    }
    .contact__line-add {
      display: none;
      min-height: 44px;
      padding: 10px 14px;
      align-items: center;
      justify-content: center;
      border: 1px solid #06c755 !important;
      border-radius: 4px;
      background: #f7fff9;
      color: #075e39 !important;
      font-size: var(--fs-sm);
      font-weight: 600;
      line-height: 1.2;
    }
    .contact__line-add:hover {
      border-color: #049b42 !important;
      background: #edfff2;
      color: #064d30 !important;
    }
    .contact__rating {
      font-size: var(--fs-sm);
      color: var(--text-dim);
      margin-top: var(--sp-24);
    }
    .contact__rating a,
    .footer__link {
      text-decoration: none;
      border-bottom: 1px solid var(--hairline-strong);
    }
    .contact__rating a:hover,
    .contact__rating a:focus-visible,
    .footer__link:hover,
    .footer__link:focus-visible {
      color: var(--gold);
      border-bottom-color: var(--gold);
    }
    .contact__map-wrap {
      width: 100%; min-height: 340px;
      border: 1px solid var(--hairline-strong);
    }
    .contact__map-wrap iframe {
      width: 100%; height: 100%; min-height: 340px; border: 0; display: block;
      filter: grayscale(20%) contrast(0.95) sepia(8%);
      transition: filter 0.6s var(--ease);
    }
    .contact__map-wrap:hover iframe {
      filter: grayscale(0%) contrast(1);
    }

    /* ============================================
       FAQ
       ============================================ */
    .sect--faq {
      background: rgba(255, 255, 255, .18);
    }
    .faq-list {
      max-width: 920px;
      border-top: 1px solid var(--hairline-strong);
    }
    .faq-item {
      border-bottom: 1px solid var(--hairline-strong);
    }
    .faq-item summary {
      position: relative;
      padding: var(--sp-24) 44px var(--sp-24) 0;
      color: var(--text);
      font-family: var(--font-heading);
      font-size: var(--fs-base);
      line-height: 1.55;
      cursor: pointer;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: var(--sp-8);
      width: 28px;
      height: 28px;
      border: 1px solid var(--hairline-strong);
      border-radius: 50%;
      color: var(--gold);
      font-family: var(--font-body);
      font-size: 20px;
      line-height: 25px;
      text-align: center;
      transform: translateY(-50%);
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p {
      max-width: 76ch;
      padding: 0 var(--sp-48) var(--sp-24) 0;
      color: var(--text-dim);
      font-size: var(--fs-sm);
    }

    /* ============================================
       MATERIAL CALCULATOR
       ============================================ */
    .sect--calculator {
      padding: var(--sp-48) 0 var(--sp-32);
      background: #eef1ed;
    }
    .sect--calculator .sect__title { margin-bottom: var(--sp-16); }
    .calculator__intro {
      max-width: 720px;
      margin-bottom: var(--sp-16);
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: 1.55;
      letter-spacing: 0;
    }
    .material-calculator {
      padding: var(--sp-16) 0 0;
      border-top: 1px solid var(--hairline-strong);
      letter-spacing: 0;
    }
    .calculator__modes { border: 0; }
    .calculator__legend {
      margin-bottom: var(--sp-8);
      color: var(--text-mid);
      font-size: var(--fs-sm);
      font-weight: 600;
    }
    .calculator__mode-list {
      display: inline-grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--sp-8);
      width: min(100%, 460px);
      margin-bottom: var(--sp-16);
    }
    .calculator__mode { position: relative; }
    .calculator__mode input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .calculator__mode span {
      display: flex;
      min-height: 44px;
      padding: 8px 12px;
      align-items: center;
      justify-content: center;
      border: 1px solid #aab3aa;
      border-radius: 4px;
      background: #fafbf9;
      color: #2d352f;
      font-size: var(--fs-sm);
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
      cursor: pointer;
      transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
    }
    .calculator__mode input:checked + span {
      border-color: #33483a;
      background: #33483a;
      color: #fff;
    }
    .calculator__mode input:focus-visible + span {
      outline: 2px solid var(--gold-dark);
      outline-offset: 3px;
    }
    .calculator__layout {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(260px, .45fr);
      gap: var(--sp-16);
      align-items: stretch;
    }
    .calculator__form-area {
      min-width: 0;
      padding: var(--sp-16);
      border: 1px solid #c7cec7;
      background: rgba(255, 255, 255, .58);
    }
    .calculator__common-fields,
    .calculator__fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-12);
    }
    .calculator__panel {
      margin-top: var(--sp-12);
      padding-top: var(--sp-12);
      border-top: 1px solid #d2d7d1;
    }
    .calculator__panel[hidden] { display: none; }
    .calculator__fields--grout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calculator__field {
      display: grid;
      gap: 6px;
      min-width: 0;
      color: #303731;
      font-size: var(--fs-sm);
      font-weight: 600;
      line-height: 1.4;
    }
    .calculator__field--wide { grid-column: span 1; }
    .calculator__field input,
    .calculator__field select {
      width: 100%;
      min-width: 0;
      min-height: 44px;
      padding: 8px 10px;
      border: 1px solid #aeb7af;
      border-radius: 4px;
      background: #fff;
      color: var(--text);
      font: inherit;
      font-weight: 400;
      letter-spacing: 0;
    }
    .calculator__field input:focus,
    .calculator__field select:focus {
      border-color: #52695a;
      outline: 2px solid rgba(82, 105, 90, .18);
      outline-offset: 1px;
    }
    .calculator__compound {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 112px;
      gap: var(--sp-8);
    }
    .calculator__hint {
      margin-top: var(--sp-8);
      color: var(--text-dim);
      font-size: var(--fs-xs);
      line-height: 1.55;
    }
    .calculator__actions {
      display: flex;
      gap: var(--sp-8);
      margin-top: var(--sp-12);
    }
    .calculator__submit,
    .calculator__reset {
      min-height: 44px;
      padding: 8px 16px;
      border-radius: 4px;
      font: inherit;
      font-size: var(--fs-sm);
      font-weight: 600;
      letter-spacing: 0;
      cursor: pointer;
    }
    .calculator__submit {
      border: 1px solid #33483a;
      background: #33483a;
      color: #fff;
    }
    .calculator__submit:hover { background: #26372c; }
    .calculator__reset {
      border: 1px solid #9ca69d;
      background: transparent;
      color: #3b453e;
    }
    .calculator__reset:hover { background: rgba(255, 255, 255, .72); }
    .calculator__result {
      display: flex;
      min-height: 190px;
      padding: 20px;
      flex-direction: column;
      justify-content: center;
      border-left: 4px solid #52695a;
      background: #f8faf7;
    }
    .calculator__result-label {
      margin-bottom: var(--sp-8);
      color: #52695a;
      font-size: var(--fs-xs);
      font-weight: 700;
      text-transform: uppercase;
    }
    .calculator__result strong {
      color: #1f2922;
      font-family: var(--font-heading);
      font-size: 1.4rem;
      line-height: 1.35;
    }
    .calculator__result p {
      margin-top: var(--sp-8);
      color: var(--text-dim);
      font-size: var(--fs-sm);
      line-height: 1.55;
    }
    .calculator__result.is-error { border-left-color: var(--accent-red); }
    .calculator__result.is-error .calculator__result-label { color: var(--accent-red); }
    .calculator__source {
      margin-top: var(--sp-8);
      color: var(--text-dim);
      font-size: var(--fs-xs);
    }
    .calculator__source a {
      margin-left: 4px;
      color: var(--gold-dark);
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
    }

    /* ============================================
       KNOWLEDGE HUB + GUIDES
       ============================================ */
    .sect--knowledge {
      padding: var(--sp-64) 0 var(--sp-48);
      background: rgba(255, 255, 255, .18);
    }
    .sect--knowledge .sect__title { margin-bottom: var(--sp-24); }
    .knowledge-intro {
      max-width: 720px;
      margin: 0 0 var(--sp-24);
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: 1.7;
    }
    .knowledge-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-12);
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .knowledge-card { min-width: 0; }
    .knowledge-card__link {
      display: grid;
      grid-template-columns: 136px minmax(0, 1fr);
      height: 100%;
      overflow: hidden;
      border: 1px solid var(--hairline-strong);
      border-radius: 4px;
      background: var(--bg-card);
      color: inherit;
      text-decoration: none;
      transition: border-color .25s var(--ease), transform .25s var(--ease);
    }
    .knowledge-card__link:hover,
    .knowledge-card__link:focus-visible {
      border-color: var(--gold);
      transform: translateY(-2px);
      outline: none;
    }
    .knowledge-card__media {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      aspect-ratio: auto;
      overflow: hidden;
      border-right: 1px solid var(--hairline);
      background: #fbfaf7;
    }
    .knowledge-card__media img {
      display: block;
      width: 100%;
      height: 100%;
      padding: var(--sp-8);
      object-fit: contain;
      object-position: center;
      background: #fbfaf7;
      transition: transform .35s var(--ease);
    }
    .knowledge-card--self .knowledge-card__media img,
    .knowledge-card__media--cover img {
      padding: 0;
      object-fit: contain;
    }
    .knowledge-card__link:hover .knowledge-card__media img,
    .knowledge-card__link:focus-visible .knowledge-card__media img { transform: none; }
    .knowledge-card--self .knowledge-card__media::after {
      content: "協力建材";
      position: absolute;
      right: var(--sp-12);
      bottom: var(--sp-12);
      z-index: 1;
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, .36);
      border-radius: 3px;
      background: rgba(20, 18, 15, .56);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: .08em;
      pointer-events: none;
    }
    .knowledge-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      min-width: 0;
      padding: var(--sp-16);
    }
    .knowledge-card__type {
      margin-bottom: var(--sp-4);
      color: var(--gold-dark);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: .14em;
    }
    .knowledge-card__title {
      margin: 0 0 var(--sp-8);
      color: var(--text);
      font-family: var(--font-heading);
      font-size: 1.16rem;
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: 0;
    }
    .knowledge-card__desc {
      margin: 0;
      color: var(--text-dim);
      font-size: .9rem;
      line-height: 1.6;
    }
    .knowledge-card__more {
      margin-top: auto;
      padding-top: 10px;
      color: var(--gold-dark);
      font-size: var(--fs-sm);
      font-weight: 600;
    }
    .knowledge-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--sp-16);
    }
    .knowledge-actions .prod-card__link { margin-top: 0; }
    .guide-page { background: var(--bg-warm); }
    .guide__breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-8);
      margin-bottom: var(--sp-24);
      color: var(--text-muted);
      font-size: var(--fs-xs);
    }
    .guide__breadcrumb a {
      color: var(--text-dim);
      text-decoration: none;
      border-bottom: 1px solid var(--hairline-strong);
    }
    .guide__header {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
      gap: var(--sp-48);
      align-items: center;
      margin-bottom: var(--sp-48);
    }
    .guide__header > * { min-width: 0; }
    .guide__eyebrow {
      margin: 0 0 var(--sp-12);
      color: var(--gold);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    .guide__title {
      margin: 0 0 var(--sp-20);
      color: var(--text);
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 400;
      line-height: 1.25;
      letter-spacing: 0;
    }
    .guide__lede {
      max-width: 60ch;
      margin: 0;
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: 1.95;
    }
    .guide__meta {
      margin-top: var(--sp-16);
      color: var(--text-muted);
      font-size: var(--fs-xs);
    }
    .guide__hero-media {
      position: relative;
      min-width: 0;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      border: 1px solid var(--hairline-strong);
      border-radius: 4px;
      background: #fbfaf7;
    }
    .guide__hero-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .guide__hero-media--cover img { object-fit: cover; }
    .guide__hero-media--self::after {
      content: "協力建材";
      position: absolute;
      right: var(--sp-12);
      bottom: var(--sp-12);
      padding: 5px 10px;
      border: 1px solid rgba(255, 255, 255, .36);
      border-radius: 3px;
      background: rgba(20, 18, 15, .56);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: .08em;
      pointer-events: none;
    }
    .guide__content { max-width: 920px; margin: 0 auto; }
    .guide__answer {
      margin: 0 0 var(--sp-40);
      padding: var(--sp-24) var(--sp-24) var(--sp-24) var(--sp-32);
      border-left: 4px solid var(--gold);
      background: rgba(255, 255, 255, .34);
      color: var(--text);
      font-size: var(--fs-base);
      line-height: 1.9;
    }
    .guide__section {
      padding: var(--sp-40) 0;
      border-top: 1px solid var(--hairline-strong);
    }
    .guide__section h2 {
      margin: 0 0 var(--sp-20);
      color: var(--text);
      font-family: var(--font-heading);
      font-size: clamp(1.65rem, 2.5vw, 2.25rem);
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: 0;
    }
    .guide__section h3 {
      margin: var(--sp-24) 0 var(--sp-12);
      color: var(--text);
      font-size: var(--fs-lg);
      font-weight: 600;
      line-height: 1.5;
    }
    .guide__section p,
    .guide__section li {
      color: var(--text-dim);
      font-size: var(--fs-base);
      line-height: 1.9;
    }
    .guide__section p + p { margin-top: var(--sp-16); }
    .guide__list { display: grid; gap: var(--sp-12); padding-left: 1.3em; }
    .guide-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--hairline-strong);
      border-radius: 4px;
      background: rgba(255, 255, 255, .28);
    }
    .guide-table {
      width: 100%;
      min-width: 620px;
      border-collapse: collapse;
      text-align: left;
    }
    .guide-table th,
    .guide-table td {
      padding: var(--sp-16);
      border-bottom: 1px solid var(--hairline);
      color: var(--text-dim);
      font-size: var(--fs-sm);
      line-height: 1.65;
      vertical-align: top;
    }
    .guide-table th {
      background: rgba(160, 128, 64, .09);
      color: var(--text);
      font-weight: 600;
    }
    .guide-table tr:last-child td { border-bottom: 0; }
    .guide__note {
      margin-top: var(--sp-16);
      color: var(--text-muted);
      font-size: var(--fs-xs);
      line-height: 1.75;
    }
    .guide__sources { margin: 0; padding-left: 1.25em; }
    .guide__sources li + li { margin-top: var(--sp-8); }
    .guide__sources a { color: var(--text-dim); text-underline-offset: 3px; }
    .guide__cta {
      display: flex;
      justify-content: space-between;
      gap: var(--sp-24);
      align-items: center;
      margin-top: var(--sp-40);
      padding: var(--sp-32) 0;
      border-top: 1px solid var(--hairline-strong);
      border-bottom: 1px solid var(--hairline-strong);
    }
    .guide__cta p {
      max-width: 58ch;
      margin: 0;
      color: var(--text-dim);
      line-height: 1.75;
    }
    .guide__cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-16);
      flex-shrink: 0;
    }
    .guide__cta-actions .prod-card__link { margin-top: 0; }
    @media (max-width: 960px) {
      .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .guide__header { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
      .guide__hero-media { width: 100%; max-width: 680px; }
    }
    @media (max-width: 620px) {
      .knowledge-page .sect__label {
        display: block;
        margin-bottom: 14px;
      }
      .knowledge-page .sect__title {
        display: block;
        max-width: 100%;
        font-size: 1.8rem;
        line-height: 1.25;
        letter-spacing: 0;
        overflow-wrap: anywhere;
      }
      .knowledge-grid { grid-template-columns: 1fr; }
      .knowledge-card__link { grid-template-columns: 104px minmax(0, 1fr); }
      .knowledge-card__body { padding: var(--sp-12); }
      .knowledge-card__title { font-size: 1rem; }
      .knowledge-card__desc { font-size: .84rem; line-height: 1.55; }
      .guide__title {
        max-width: 100%;
        font-size: 2rem;
        overflow-wrap: anywhere;
      }
      .guide__answer { padding: var(--sp-20); }
      .guide__section { padding: var(--sp-32) 0; }
      .guide__cta { align-items: flex-start; flex-direction: column; }
    }

    /* ============================================
       FOOTER
       ============================================ */
    .footer {
      padding: var(--sp-48) 0;
      border-top: 1px solid var(--hairline);
      text-align: center;
    }
    .footer__text {
      font-size: var(--fs-xs);
      color: var(--text-muted);
      letter-spacing: 0.18em;
    }
    .footer__mark {
      display: inline-block;
      margin: 0 var(--sp-12);
      color: var(--gold);
    }
    .footer__credit {
      display: inline-block;
      white-space: nowrap;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
      .wrap { padding: 0 var(--sp-24); }
      .hero { padding: var(--sp-64) var(--sp-24); }
      .hero__stats { gap: var(--sp-32); flex-wrap: wrap; }
      .basics { grid-template-columns: 1fr; }
      .finishing { grid-template-columns: 1fr; }
      .chemicals__row { grid-template-columns: 1fr; gap: var(--sp-8); }
      .ardex { padding: var(--sp-32) var(--sp-24); }
      .ardex__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .about__body { grid-template-columns: 1fr; gap: var(--sp-32); }
      .about__badges { flex-direction: row; flex-wrap: wrap; }
      .contact__body { grid-template-columns: 1fr; gap: var(--sp-32); }
      .contact__phone-line { align-items: flex-start; gap: var(--sp-24); }
      .contact__line-scan { display: none; }
      .contact__line-add { display: inline-flex; }
      .calculator__layout { grid-template-columns: 1fr; }
      .calculator__result { min-height: 150px; }
      .contact__map-wrap { min-height: 260px; }
      .contact__map-wrap iframe { min-height: 260px; }
      .showroom-gallery { grid-template-columns: 1fr; }
      .sect { padding: var(--sp-64) 0 var(--sp-48); }
      .sect--calculator { padding: 40px 0 var(--sp-24); }
    }
    @media (max-width: 460px) {
      .prod-grid { grid-template-columns: 1fr; }
      .prod-card { padding: var(--sp-16); }
      .ardex__stats { grid-template-columns: 1fr; }
      .ardex__german-mark { width: 140px; }
      .calculator__mode span { padding: 8px 6px; font-size: .78rem; }
      .calculator__form-area { padding: var(--sp-16); }
      .calculator__common-fields,
      .calculator__fields,
      .calculator__fields--grout { grid-template-columns: 1fr; }
      .calculator__compound { grid-template-columns: minmax(0, 1fr) 92px; }
      .calculator__actions { display: grid; grid-template-columns: 1fr 1fr; }
      .calculator__result { padding: var(--sp-16); }
    }

    :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    ::selection { background: rgba(160,128,64,0.18); color: var(--text); }
  

    /* Standalone subpage header */
    .page-top {
      border-bottom: 1px solid var(--hairline);
      background: rgba(248, 244, 236, .82);
      backdrop-filter: blur(12px);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .page-top__inner {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--sp-16);
    }
    .brand {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text);
      text-decoration: none;
      white-space: nowrap;
    }
    .top-link {
      color: var(--gold);
      text-decoration: none;
      border-bottom: 1px solid var(--gold-warm);
      font-size: var(--fs-xs);
      white-space: nowrap;
      margin-left: var(--sp-8);
    }
    @media (max-width: 720px) {
      .page-top {
        background: #f8f4ec;
        backdrop-filter: none;
      }
      .page-top__inner {
        width: min(100% - 28px, 1120px);
        align-items: flex-start;
        flex-direction: column;
        padding: var(--sp-12) 0;
      }
    }