/** Shopify CDN: Minification failed

Line 375:89 Unexpected "0%"
Line 376:2 Unexpected "60%"
Line 376:39 Unexpected "100%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection (INDEX:4) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:5) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:contact-form (INDEX:6) */
/* The field register, 01–NN, as the original runs it down the left of each label. */
.cf-no{font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.1em;
  color:var(--faint);margin-right:8px}

  .cf { padding-block: clamp(38px, 6vw, 84px); background: var(--paper); }
  .cf-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
    text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
  .cf-h { margin: 0 0 14px; }
  .cf-intro { font-size: 14.5px; line-height: 1.72; color: var(--body);
    max-width: 58ch; margin: 0 0 clamp(22px, 3vw, 38px); }
  .cf-form { border-top: 2px solid var(--ink); padding-top: clamp(18px, 2.4vw, 28px); }

  .cf-grid { display: grid; gap: clamp(14px, 1.8vw, 22px);
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
  .cf-f-w { grid-column: 1 / -1; }

  .cf-sub { grid-column: 1 / -1; padding-top: 10px; }
  .cf-sub-t { font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--faint);
    display: block; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

  .cf-lab { display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
  .cf-req { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--faint); font-weight: 400; }

  .cf-in { width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line2); border-radius: 0;
    padding: 11px 13px; transition: border-color .18s var(--ease); }
  .cf-in:hover { border-color: var(--faint); }
  .cf-in:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .cf-in::placeholder { color: var(--faint); }
  .cf-ta { resize: vertical; line-height: 1.6; }

  /* Country code is fixed width; the number takes the rest */
  .cf-phone-row { display: flex; gap: 8px; }
  .cf-cc { flex: 0 0 clamp(140px, 22%, 210px); }
  .cf-num { flex: 1 1 auto; min-width: 0; }

  .cf-help { font-size: 11.5px; line-height: 1.5; color: var(--sub); }
  .cf-cl { display: flex; align-items: flex-start; gap: 10px; font-size: 13px;
    line-height: 1.55; color: var(--body); cursor: pointer; }
  .cf-cl input { margin-top: 3px; flex: 0 0 auto; }

  .cf-actions { display: flex; flex-wrap: wrap; align-items: center;
    gap: 16px; margin-top: clamp(20px, 2.6vw, 30px); }
  .cf-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--sub);
    flex: 1 1 18em; }

  .cf-ok { margin: 0 0 18px; padding: 14px 16px; background: var(--sunk);
    border-left: 3px solid var(--ink); font-size: 14px; line-height: 1.65; color: var(--ink); }
  .cf-err { margin: 0 0 18px; padding: 14px 16px; background: var(--gray);
    border-left: 3px solid var(--ink); font-size: 13.5px; color: var(--body); }
  .cf-err ul { margin: 8px 0 0; padding-left: 18px; }

  /* Responsive rules come AFTER the base rules — media queries add no specificity */
  @media (max-width: 700px) {
    .cf-grid { grid-template-columns: minmax(0, 1fr); }
    .cf-phone-row { flex-wrap: wrap; }
    .cf-cc { flex: 1 1 100%; }
    .cf-submit { width: 100%; justify-content: center; }
  }
/* END_SECTION:contact-form */

/* START_SECTION:cs-grid (INDEX:7) */
/* ── the rhythm breaks, from site/assets/css/cases.css ── */
.c-brk{grid-column:1/-1;margin-block:clamp(10px,2vw,22px)}
.c-brk-q{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(26px,4vw,44px);text-align:center}
.c-bq{font-family:var(--bebas);font-weight:400;font-size:clamp(23px,4.4vw,42px);
  line-height:1.06;letter-spacing:.02em;color:var(--ink);margin:0 auto 10px;
  max-width:20ch;text-wrap:balance}
.c-bn{font-size:13px;color:var(--sub);margin:0 auto;max-width:46ch}
.c-brk-cta{background:var(--brand-dark);color:#fff;
  padding:clamp(28px,4.4vw,48px) clamp(20px,4vw,44px);text-align:center}
.c-bk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 10px}
.c-bt{font-family:var(--bebas);font-weight:400;font-size:clamp(26px,5vw,46px);
  line-height:1.03;letter-spacing:.02em;color:#fff;margin:0 0 20px;text-wrap:balance}
.c-ba{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ── the overlay, from site/assets/css/cases.css ── */
/* ── 灯箱 ─────────────────────────────────── */
.c-lb{position:fixed;inset:0;z-index:200;background:rgba(6,12,18,.97);
  display:flex;flex-direction:column}
.c-lb[hidden]{display:none}
.c-lb-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px var(--gut);flex:0 0 auto;border-bottom:1px solid rgba(255,255,255,.12)}
.c-lb-t{min-width:0}
.c-lb-t b{display:block;font-family:var(--bebas);font-weight:400;font-size:20px;
  letter-spacing:.035em;color:#fff;line-height:1.15}
.c-lb-t span{display:block;font-size:11px;color:rgba(255,255,255,.55);margin-top:2px}
.c-lb-x{flex:0 0 auto;width:38px;height:38px;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.1);border:0;color:#fff;font-size:20px;line-height:1;
  display:grid;place-items:center}
.c-lb-x:hover{background:rgba(255,255,255,.2)}
.c-lb-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.c-lb-rail{flex:1 1 auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:center}
.c-lb-rail::-webkit-scrollbar{display:none}
.c-lb-rail img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;
  scroll-snap-align:center;padding:14px var(--gut)}
.c-lb-bot{flex:0 0 auto;padding:13px var(--gut) calc(13px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12)}
.c-lb-c{font-family:var(--mono);font-size:11.5px;color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:9px;margin:0}
.c-lb-dots{display:flex;gap:5px}
.c-lb-dots i{width:5px;height:5px;border-radius:100px;background:rgba(255,255,255,.3);
  transition:background .2s,width .2s}
.c-lb-dots i.on{background:#fff;width:16px}
.c-lb-hint{color:rgba(255,255,255,.4)}

/* ═══ Installed work ═════════════════════════════════════ */
.cs{padding-block:clamp(24px,3.4vw,44px) clamp(40px,6vw,84px)}
.cs-head{max-width:62ch;margin-bottom:clamp(16px,2.4vw,26px)}
.cs-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px;opacity:.62}

.cs-bar{position:sticky;top:0;z-index:5;background:var(--paper);
  border-block:1px solid var(--line);margin-bottom:clamp(20px,3vw,34px)}
.cs-bar-in{display:flex;align-items:center;gap:14px;justify-content:space-between}
.cs-bar-c{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  padding-block:clamp(12px,1.8vw,16px);min-width:0}
.cs-bar-c::-webkit-scrollbar{display:none}
.cs-bar-r{font-family:var(--mono);font-size:11px;margin:0;opacity:.6;flex:0 0 auto}
.cs-bar-subs{padding-bottom:clamp(10px,1.4vw,14px)}
.cs-bar-s{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.cs-bar-s::-webkit-scrollbar{display:none}
.cs-bar-s[hidden]{display:none}
.cs-chip{flex:0 0 auto;appearance:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;white-space:nowrap;display:inline-flex;
  align-items:baseline;gap:7px;padding:8px 12px;border-radius:2px;
  border:1px solid var(--line2);background:transparent;color:var(--sub);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.cs-chip--s{font-weight:500;font-size:11.5px;padding:6px 10px}
.cs-cn{font-family:var(--mono);font-size:10px;color:var(--faint)}
.cs-chip:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.cs-chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.cs-chip.is-on .cs-cn{color:rgba(255,255,255,.68)}
.cs-chip:disabled{opacity:.4;cursor:not-allowed}
.cs-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.cs-grid{display:grid;gap:clamp(16px,2.2vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cs-card{margin:0;min-width:0}
.cs-card[hidden]{display:none}
.cs-m{display:block;position:relative;overflow:hidden;aspect-ratio:1/1;
  background:var(--sunk)}
.cs-m img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.cs-card:hover .cs-m img{transform:scale(1.03)}
.cs-no,.cs-fr{position:absolute;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;padding:3px 6px;background:rgba(0,0,0,.62);color:#fff}
.cs-no{top:8px;left:8px}
.cs-fr{top:8px;right:8px}
.cs-b{display:block;padding-top:10px}
.cs-t{display:block;font-size:13px;font-weight:600;line-height:1.36;color:var(--ink)}
.cs-s{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.cs-empty{margin-top:40px;color:var(--faint);font-size:14px}
.cs-empty[hidden]{display:none}
.cs-foot{margin-top:clamp(20px,3vw,34px);font-size:12.5px;line-height:1.72;
  opacity:.72;max-width:78ch}
.cs-foot p{margin:0}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(max-width:560px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cs-t{font-size:12px}
  .cs-bar-in{flex-direction:column;align-items:stretch;gap:0}
  .cs-bar-r{align-self:flex-end;padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
  .cs-m img,.cs-card:hover .cs-m img{transition:none;transform:none}
}
/* END_SECTION:cs-grid */

/* START_SECTION:ct-desk (INDEX:8) */
/* ── 0 · 折叠块（原生 details/summary）─────────────────────
   抄 factory.css 的 .fc-jump-d 那一套。本页用在两处：附件区 08、
   四城时区表。两处都**不写 open** —— 默认收起，桌面端也收起：
   深色台是 sticky + max-height，收起同样帮它。
   summary 一律走 flex + list-style:none，不然 Safari 会留三角。
   padding 全部长写法：这两条以后要是被挂到 .wrap 上，
   padding:X 0 会把 .wrap 的左右内距抹平。 */
.ct-fold{min-width:0}
.ct-fold-s{list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;min-height:46px;cursor:pointer}
.ct-fold-s::-webkit-details-marker{display:none}
.ct-fold-s:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ct-fold-c{flex:0 0 auto;opacity:.55;transition:transform .22s var(--ease)}
.ct-fold[open]>.ct-fold-s .ct-fold-c{transform:rotate(180deg)}

/* ── 2 · 分屏骨架 ─────────────────────────────────────────── */
.ct-split-sec{padding-bottom:clamp(56px,8vw,104px)}
.ct-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,3.6vw,58px);align-items:start}

.ct-formcol{min-width:0}

/* ── 2a · 表单 ────────────────────────────────────────────── */
.ct-form{border-top:2px solid var(--ink)}
.ct-form[hidden]{display:none}

.ct-f{padding:20px 0 22px;border-bottom:1px solid var(--line);min-width:0}
fieldset.ct-f{border:0;border-bottom:1px solid var(--line);margin:0;padding:20px 0 22px}

.ct-lab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
/* legend 不认 display:flex（部分引擎会当没看见），所以单独退回块级 + 行内间距 */
legend.ct-lab{display:block;padding:0;width:100%}
legend.ct-lab i{margin-right:8px}
legend.ct-lab .ct-req,legend.ct-lab .ct-opt{margin-left:7px}
.ct-lab i{font-style:normal;font-family:var(--mono);font-size:11px;
  letter-spacing:0;color:var(--brand);opacity:.55}

.ct-req,.ct-opt{font-size:9px;letter-spacing:.13em;font-weight:700;text-transform:uppercase;
  padding:1px 6px;border:1px solid var(--line2);color:var(--faint)}
.ct-req{color:var(--brand);border-color:var(--brand-line)}

.ct-help{margin-top:9px;font-size:12.5px;line-height:1.6;color:var(--sub);max-width:54ch}

.ct-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,34px)}
.ct-pair .ct-f{border-bottom:1px solid var(--line)}

.ct-in{display:block;width:100%;margin-top:11px;min-height:48px;padding:10px 2px;
  font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ct-in::placeholder{color:var(--faint);opacity:1}
.ct-in:hover{border-bottom-color:var(--sub)}
.ct-in:focus{border-bottom-color:var(--brand);background:var(--brand-tint)}
.ct-ta{min-height:158px;resize:vertical;padding:12px 12px 14px;line-height:1.7;
  border:1px solid var(--line2)}
.ct-ta:focus{border-color:var(--brand)}

/* 三道门的选择卡 */
.ct-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.ct-card{position:relative;display:block;cursor:pointer;min-width:0}
.ct-card input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ct-card-in{position:relative;display:grid;align-content:start;gap:7px;height:100%;
  min-height:152px;padding:15px 14px 17px;background:var(--paper);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease),
    box-shadow .3s var(--ease),transform .3s var(--ease)}
.ct-card-in::after{content:"";position:absolute;top:13px;right:13px;width:15px;height:15px;
  border:1px solid var(--line2);border-radius:50%;
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ct-card:hover .ct-card-in{border-color:var(--k);background:var(--kt);transform:translateY(-2px)}
.ct-card input:focus-visible+.ct-card-in{outline:2px solid var(--brand);outline-offset:3px}
.ct-card input:checked+.ct-card-in{border-color:var(--k);background:var(--kt);
  box-shadow:inset 0 0 0 1px var(--k)}
.ct-card input:checked+.ct-card-in::after{border-color:var(--k);background:var(--k);
  box-shadow:inset 0 0 0 3px var(--paper)}

.ct-card-i{width:30px;height:30px;color:var(--line2);margin:2px 0 1px;
  transition:color .3s var(--ease)}
.ct-card b{font-size:16.5px;color:var(--ink);letter-spacing:.005em}
.ct-card-d{font-size:12.5px;line-height:1.5;color:var(--sub)}
.ct-card:hover .ct-card-i,.ct-card input:checked+.ct-card-in .ct-card-i{color:var(--k)}

/* 路由提示条（手机上深色台在上面，这条是就地反馈）*/
.ct-route{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 14px;
  min-height:44px;background:var(--gray);border-left:2px solid var(--line2);
  font-size:12.5px;line-height:1.45;color:var(--sub);
  transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.ct-route-d{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--line2);
  transition:background .35s var(--ease)}
.ct-route.is-set{background:var(--kt);border-left-color:var(--k);color:var(--ink)}
.ct-route.is-set .ct-route-d{background:var(--k)}

/* 附件 —— 08 是 optional，绝大多数人直接跳过，所以整块收进 .ct-fold */
.ct-f>.ct-fold>.ct-fold-s{min-height:0;padding-top:2px;padding-bottom:2px}
.ct-f>.ct-fold>.ct-fold-s .ct-fold-c{color:var(--faint)}
.ct-drop{position:relative;display:grid;justify-items:center;gap:7px;text-align:center;
  margin-top:13px;padding:26px 18px;cursor:pointer;
  background:var(--gray);border:1px dashed var(--line2);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.ct-drop:hover,.ct-drop.is-over{background:var(--brand-tint);border-color:var(--brand)}
.ct-drop:focus-within{outline:2px solid var(--brand);outline-offset:3px}
.ct-file{position:absolute;width:1px;height:1px;opacity:0}
.ct-drop-i{width:26px;height:26px;color:var(--faint)}
.ct-drop:hover .ct-drop-i,.ct-drop.is-over .ct-drop-i{color:var(--brand)}
.ct-drop-t{font-size:13.5px;color:var(--body)}
.ct-drop-t b{color:var(--brand)}
.ct-drop-s{font-size:10px;letter-spacing:.09em;color:var(--faint);text-transform:uppercase}

.ct-files{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:6px}
.ct-clear{margin-top:11px;min-height:44px;padding:0 2px;background:none;border:0;cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);
  transition:color .25s var(--ease)}
.ct-clear:hover{color:var(--con)}
.ct-clear[hidden]{display:none}

/* 发送 */
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-top:24px}
.ct-note{flex:1 1 240px;max-width:40ch;font-size:12px;line-height:1.55;color:var(--sub)}

/* 提交后的「收据」 */
.ct-done{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--brand)}
.ct-done[hidden]{display:none}
.ct-done-in{padding:clamp(22px,3.2vw,38px)}
.ct-done-in:focus{outline:none}
.ct-done-h{margin:12px 0 16px;font-size:clamp(27px,4vw,44px)}
.ct-done-p{font-size:15px;line-height:1.7;max-width:52ch;color:var(--body)}

.ct-done-n{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--sub);max-width:50ch}
.ct-done-a{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:24px}
.ct-done-l{font-size:13px;color:var(--sub)}

/* ── 2b · 深色台 ──────────────────────────────────────────── */
.ct-desk{--k:var(--brand);background:var(--brand-dark);color:rgba(255,255,255,.72);min-width:0}
.ct-desk-in{padding:clamp(20px,2.4vw,30px)}
.ct-desk h3{color:rgba(255,255,255,.97)}
.ct-desk a{color:rgba(255,255,255,.95)}
.ct-desk .tbd{color:rgba(255,255,255,.66);vertical-align:1px}@media(min-width:981px){
  /* 内容比视口高时给面板自己一条滚动条。**不要**加 overscroll-behavior:contain ——
     那会让滚轮停在面板里，页面像卡住了。 */
  .ct-desk{position:sticky;top:calc(var(--nav-h) + 12px);align-self:start;
    max-height:calc(100vh - var(--nav-h) - 26px);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
  .ct-desk::-webkit-scrollbar{width:7px}
  .ct-desk::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24)}
}

.ct-deskk{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}

/* 合肥实时时间：site.js 往 [data-hefei] 里写 <b>HH:MM</b><span>…</span> */
.ct-clock{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
.ct-clock::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.3);transition:background .4s var(--ease)}
.ct-clock.is-open::before{background:var(--own);animation:ct-pulse 2.8s var(--ease) infinite}
.ct-clock b{font-family:var(--bebas);font-weight:400;font-size:clamp(34px,4.6vw,46px);
  line-height:.9;letter-spacing:.03em;color:rgba(255,255,255,.98);font-variant-numeric:tabular-nums}
.ct-clock span{flex:1 1 150px;font-size:12px;line-height:1.45;color:rgba(255,255,255,.6)}0%{box-shadow:0 0 0 2px var(--own-tint)}
  60%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 2px var(--own-tint)}

.ct-hours{margin-top:12px;font-size:9.5px;line-height:1.7;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}

/* 时区承诺 —— 好东西，所以是折不是删。它挡在 WhatsApp 号码前面 280px，
   默认收起能把号码往上提近一屏。 */
.ct-zones{margin-top:20px;padding-top:4px;border-top:1px solid rgba(255,255,255,.16)}
.ct-fold-s-d{padding-top:11px;padding-bottom:11px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.ct-fold-s-d .ct-fold-c{color:rgba(255,255,255,.6)}
.ct-fold-s-d:focus-visible{outline-color:rgba(255,255,255,.8)}
.ct-zone{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 12px;
  align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ct-zone-h{padding:11px 0 7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.36);border-bottom-color:rgba(255,255,255,.16)}
.ct-z-c{font-size:12.5px;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ct-z-n,.ct-z-w{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em}
.ct-z-n{color:rgba(255,255,255,.95);min-width:4.2em;text-align:right}
.ct-z-w{color:rgba(255,255,255,.5);min-width:7.6em;text-align:right}
/* 逐行点亮由 contact.js 加 .lit —— 规则挂在 .js 下，没有 JS 时行是直接看得见的 */
.js .ct-zone[data-tz]{opacity:0;transform:translateY(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .ct-zone[data-tz].lit{opacity:1;transform:none}
/* 此刻我们的工作时间正好落在那座城市的白天 */
.ct-zone.is-live .ct-z-c::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:7px;border-radius:50%;background:var(--own);vertical-align:middle}
.ct-zone.is-live .ct-z-w{color:rgba(255,255,255,.86)}
.ct-zone.is-home{border-bottom-color:rgba(255,255,255,.2)}
.ct-zone.is-home .ct-z-c{color:rgba(255,255,255,.98);font-weight:600}
.ct-zone.is-home .ct-z-w{color:rgba(255,255,255,.8)}
.ct-zones-n{margin-top:12px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.55)}

/* 三张脸：同一格叠放 + 交叉淡入。叠放规则必须挂 .js */
.ct-faces{display:grid;gap:26px;margin-top:24px}
.js .ct-faces{gap:0}
.js .ct-face{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}
.js .ct-face.is-on{opacity:1;visibility:visible;transform:none}

.ct-face{min-width:0;padding-left:16px;border-left:2px solid rgba(255,255,255,.16)}
.ct-face.k-con,.ct-face.k-dis,.ct-face.k-own{border-left-color:var(--k)}
  .ct-desk .tbd{color:color-mix(in srgb,var(--con) 46%,white)}
/* eyebrow 删掉之后 h3 成了 .ct-face 的头一个孩子，不再需要那 9px 让位 */
.ct-face-h{font-size:clamp(20px,2.4vw,27px)}

.ct-face-dl{margin:17px 0 0}
.ct-face-dl>div{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:10px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.1)}
.ct-face-dl dt{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding-top:3px}
.ct-face-dl dd{margin:0;font-size:12.8px;line-height:1.55;color:rgba(255,255,255,.84)}
.ct-face-a{font-size:12.8px;font-weight:600}
/* 深色台里的链接：.ul 的扫线默认是藏起来的，在这里改成常驻淡线，
   不然一行白色粗体看不出可以点。 */
.ct-desk .ul::after{transform:scaleX(1);opacity:.34;
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.ct-desk .ul:hover::after{opacity:1}

.ct-face-dl-ghost dd{color:rgba(255,255,255,.34);font-style:italic}
.ct-ghosts{display:flex;gap:16px;margin-top:20px}
.ct-ghosts svg{width:34px;height:34px;color:rgba(255,255,255,.2)}

/* 三条线 */
.ct-lines{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.ct-lines-k{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42)}
.ct-chan{list-style:none;margin:8px 0 0;padding:0}
.ct-ch{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:46px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ct-ch svg{width:21px;height:21px;color:rgba(255,255,255,.42)}
.ct-ch-t{font-size:13px;color:rgba(255,255,255,.88)}
.ct-ch-v{font-size:11px;text-align:right}
/* 号码和邮箱是真的，所以做成把手：手机上一点就进 WhatsApp。
   .ul 的扫线在深色台里已改成常驻淡线（见上面 .ct-desk .ul）。 */
.ct-ch-a{font-family:var(--mono);letter-spacing:-.01em;font-weight:600;
  overflow-wrap:anywhere}
.ct-lines-n{margin-top:12px;font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.5)}
.ct-lines-n b{color:rgba(255,255,255,.84);font-weight:600}

.ct-desk-foot{margin-top:22px;padding-top:15px;border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.6)}@media(max-width:1080px){
  .ct-cards{grid-template-columns:1fr}
  /* 装饰编号 01 / SPECIFY & BUILD 那行已删，"k k" 这一轨也要一起去掉，
     留着会多出一条 row-gap。 */
  .ct-card-in{min-height:0;grid-template-columns:34px minmax(0,1fr);
    grid-template-areas:"i t" "i d";column-gap:14px;row-gap:4px;padding:14px}
  .ct-card-i{grid-area:i;width:28px;height:28px;align-self:start;margin:2px 0 0}
  .ct-card b{grid-area:t}
  .ct-card-d{grid-area:d}
}@media(max-width:980px){
  .ct-vow-in{grid-template-columns:minmax(0,1fr)}
  .ct-vow-p{max-width:none}
  .ct-split{grid-template-columns:minmax(0,1fr)}
  .ct-desk{order:-1;position:static;max-height:none;overflow:visible}
  .ct-place-grid{grid-template-columns:minmax(0,1fr)}
  .ct-else-g{grid-template-columns:1fr}
  .ct-out{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .ct-out-k{grid-column:1/-1}
  .ct-out b{grid-column:1}
  .ct-out span:not(.ct-out-k){grid-column:1}
  .ct-out svg{grid-column:2;grid-row:2/4;margin:0}
}@media(max-width:620px){
  .ct-pair{grid-template-columns:minmax(0,1fr)}
  .ct-cards{grid-template-columns:1fr}

  /* 事实表只剩 Legal name / Trading since 两行，窄屏上保持两列（标签列收窄），
     每行 62px → 34px。⚠ 千万别把 .ct-face-dl 一起摘出来 —— 它的 dd 是整句话，
     改成两列反而更高。 */
  .ct-facts>div{grid-template-columns:6.6em minmax(0,1fr);gap:10px}
  .ct-face-dl>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .ct-send{gap:14px}
  .ct-note{flex-basis:100%}
  .ct-z-w{min-width:6.8em}
  .ct-zones-n,.ct-lines-n{font-size:11px}
  /* 邮箱地址比一整行还长，窄屏上让把手自己占一行，别挤成两截 */
  .ct-ch{grid-template-columns:22px minmax(0,1fr);row-gap:2px}
  .ct-ch-v{grid-column:2;text-align:left}
}@media(prefers-reduced-motion:reduce){
  .js .ct-face{transform:none}
  .ct-clock.is-open::before{animation:none}
  .ct-card:hover .ct-card-in,.ct-out:hover,.ct-out:hover svg{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   2026-08-26 重做：首屏 / 直达线 / 公司带
   赵总：「too bland」「删掉不必要的，这页只有表单和联系方式重要」
   ══════════════════════════════════════════════════════════════ */

/* ══ 首屏 ══════════════════════════════════════════
   和 about / factory 一套：深色实景照 + 渐变压暗 + 逐字标题。
   比 about 矮一截 —— 这是工具页，表单要尽早进视野。 */
.ct-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--brand-dark);
  min-height:clamp(340px,52vh,470px);
  padding-top:calc(var(--nav-h) + clamp(20px,3vw,36px))}
.ct-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 52%}
.ct-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,.34) 30%,
    rgba(11,11,11,.82) 74%,rgba(11,11,11,.95) 100%)}
.ct-hero-in{position:relative;z-index:2;width:100%;
  padding-bottom:clamp(24px,4vw,44px)}
.ct-hero-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 12px}
.ct-hero-h{font-family:var(--bebas);font-weight:400;
  font-size:clamp(42px,8.6vw,88px);line-height:.9;letter-spacing:.008em;
  color:#fff;margin:0 0 16px;text-wrap:balance}
.ct-hero-l{font-size:clamp(14px,1.5vw,15.5px);line-height:1.72;
  color:rgba(255,255,255,.74);max-width:54ch;margin:0 0 clamp(20px,2.6vw,30px)}

/* ══ 两条直达线 ════════════════════════════════════
   站上的图形约定：**圆的是能点的，方的是印上去的。**
   这两条都真的会有人接，所以都是圆角、都是 <a>。
   蓝色只给 WhatsApp 一条 —— 那是最快的那条。 */
.ct-lines{display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,14px);margin:0 0 20px}
.ct-line{display:grid;gap:2px;padding:13px clamp(16px,2vw,22px);
  border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.26);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),
    transform .2s var(--ease)}
.ct-line:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5);
  transform:translateY(-1px)}
.ct-line:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ct-line-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.ct-line-v{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:.01em}
.ct-line-n{font-size:11px;color:rgba(255,255,255,.58);line-height:1.4}
.ct-line-wa{background:var(--brand);border-color:var(--brand)}
.ct-line-wa .ct-line-k,.ct-line-wa .ct-line-n{color:rgba(255,255,255,.8)}
.ct-line-wa:hover{background:var(--brand);border-color:#fff}

/* 首屏时钟：site.js 注入 <b>16:08</b> <span>Hefei UTC+8 · …</span> */
.ct-hero-clock{margin:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:rgba(255,255,255,.55);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ct-hero-clock b{font-family:var(--bebas);font-size:19px;letter-spacing:.04em;
  color:#fff;line-height:1}
.ct-hero-clock.is-open b{color:var(--brand)}

/* ══ 表单区上缘 ════════════════════════════════════
   首屏改成深色贴边之后，表单那节要自己补回上内距。 */
.ct-split-sec{padding-top:clamp(34px,5vw,64px)}

/* ══ 公司窄带（--sunk，全页第 3 个明度层）══════════ */
.ct-co{background:var(--sunk)}
.ct-co-in{display:grid;gap:clamp(20px,3vw,44px)}
.ct-co-k{color:var(--faint)}
.ct-co-h{margin:0 0 10px;letter-spacing:.015em}
.ct-co-n{margin:0;font-size:13.5px;line-height:1.72;color:var(--body);max-width:52ch}
.ct-co-f{display:grid;gap:0;margin:0;border-top:1px solid var(--line2);align-self:start}
.ct-co-f>div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);
  gap:10px clamp(14px,2vw,26px);align-items:baseline;
  padding-block:11px;border-bottom:1px solid var(--line2)}
.ct-co-f dt{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.ct-co-f dd{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink)}

/* ── 响应式：媒体查询不增加特异性，必须排在同名基础规则**之后** ── */
@media(min-width:880px){
  .ct-co-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
}
@media(max-width:600px){
  /* 手机上两条线各占一整行，指头好按 */
  .ct-line{flex:1 1 100%}
  .ct-hero{min-height:clamp(320px,64vh,420px)}
}
/* END_SECTION:ct-desk */

/* START_SECTION:ct-measure (INDEX:9) */
/* ══════════════ Before you message · the annotated elevation ══════════════
   Carried from site/assets/css/for-contractors.css. Every selector is scoped under
   .ct-sheet-sec because sections/ct-desk.liquid already owns a different .ct-note and
   section stylesheets are concatenated theme-wide. */

/* Tokens. In the static page these sit in :root in for-contractors.css; there is no such
   file here, so the band carries its own. --ct-k falls back to a neutral white where
   color-mix is unsupported — better no colour than a muddy one. */
.ct-sheet-sec{
  --ct-w:var(--paper);
  --ct-tx2:rgba(255,255,255,.54);
  --ct-tx3:rgba(255,255,255,.36);
  --ct-hair:rgba(255,255,255,.11);
  --ct-hair2:rgba(255,255,255,.22);
  --ct-k:rgba(255,255,255,.74);
}
@supports (color:color-mix(in srgb,red,blue)){
  .ct-sheet-sec{--ct-k:color-mix(in srgb,var(--con) 44%,var(--ct-w))}
}

/* The dark-page rewrite of the section head. base .sh is a two-column grid whose first
   column held a drawing number (A-01…A-03); that number is gone, so collapse to one
   column or the heading is pinched by an empty auto column. */
.ct-sheet-sec .sh{grid-template-columns:minmax(0,1fr)}
.ct-sheet-sec .sh .note{color:var(--ct-tx2)}

.ct-sheet-sec .ct-sheet{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(20px,3.2vw,52px);align-items:start}

.ct-sheet-sec .ct-plate{margin:0;position:sticky;top:calc(var(--nav-h) + 6px);align-self:start;
  border:1px solid var(--ct-hair2);background:rgba(0,0,0,.16)}
.ct-sheet-sec .ct-dwg{display:block;width:100%;height:auto;max-height:min(62vh,540px)}
.ct-sheet-sec .ct-base{color:rgba(255,255,255,.46)}
.ct-sheet-sec .ct-frame{stroke:rgba(255,255,255,.16)}
.ct-sheet-sec .ct-ann{color:var(--ct-k)}
.ct-sheet-sec .ct-dot{fill:currentColor;stroke:none}
.ct-sheet-sec .ct-tx{fill:currentColor;font-family:var(--mono);font-size:17px;
  letter-spacing:.14em;opacity:.72}
.ct-sheet-sec .ct-tx-b{font-family:var(--bebas);font-size:31px;letter-spacing:.06em;opacity:1}

/* Drawn one annotation at a time. --L is written per element by the script below.
   The transition is declared ONLY on the .is-on side — with no transition in the initial
   state the first style pass cannot tween from 0 to L, which would flash the finished
   drawing. */
.js .ct-sheet-sec .ct-ann{opacity:.001}
.js .ct-sheet-sec .ct-ann path,.js .ct-sheet-sec .ct-ann line,
.js .ct-sheet-sec .ct-ann polyline{
  stroke-dasharray:var(--L);stroke-dashoffset:var(--L)}
.js .ct-sheet-sec .ct-ann text,.js .ct-sheet-sec .ct-ann .ct-dot{opacity:0}

.js .ct-sheet-sec .ct-ann.is-on{opacity:1;transition:opacity .3s var(--ease)}
.js .ct-sheet-sec .ct-ann.is-on path,.js .ct-sheet-sec .ct-ann.is-on line,
.js .ct-sheet-sec .ct-ann.is-on polyline{
  stroke-dashoffset:0;transition:stroke-dashoffset .95s var(--ease)}
.js .ct-sheet-sec .ct-ann.is-on text{opacity:.72;transition:opacity .5s .38s var(--ease)}
.js .ct-sheet-sec .ct-ann.is-on .ct-dot{opacity:1;transition:opacity .45s .3s var(--ease)}
/* The current one is held one step brighter */
.ct-sheet-sec .ct-ann.is-cur{color:var(--ct-w)}

/* The notes */
.ct-sheet-sec .ct-notes{list-style:none;margin:0;padding:0}
/* max-width:none is NOT in the original. ct-desk.liquid's .ct-note sets max-width:40ch at
   lower specificity, and that is the one property of its rule that would otherwise reach
   these list items and squeeze the column. */
.ct-sheet-sec .ct-note{display:flex;align-items:center;min-height:clamp(300px,56vh,480px);
  max-width:none;border-bottom:1px solid var(--ct-hair)}
.ct-sheet-sec .ct-note:first-child{border-top:1px solid var(--ct-hair)}
.ct-sheet-sec .ct-note-in{padding:22px 0 22px 22px;border-left:2px solid transparent;
  transition:border-color .5s var(--ease),opacity .5s var(--ease),padding-left .5s var(--ease)}
.js .ct-sheet-sec .ct-note-in{opacity:.34}
.js .ct-sheet-sec .ct-note.is-cur .ct-note-in{opacity:1;border-left-color:var(--ct-k);
  padding-left:26px}
.ct-sheet-sec .ct-sym{display:inline-block;font-family:var(--bebas);font-size:26px;
  line-height:1;letter-spacing:.06em;color:var(--ct-k);margin-bottom:12px}
.ct-sheet-sec .ct-note h3{font-size:clamp(17px,2.1vw,21px);line-height:1.28;
  margin-bottom:12px;color:var(--ct-w);font-family:var(--sans);font-weight:600;
  letter-spacing:-.005em}
.ct-sheet-sec .ct-note p{font-size:14px;line-height:1.72;color:var(--ct-tx2);max-width:46ch}

/* The title block under the sheet. The 1px gaps are the container colour showing through,
   not borders — an empty cell would show as a pale block. */
.ct-sheet-sec .ct-block{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  margin:clamp(34px,5vw,56px) 0 0;background:var(--ct-hair);border:1px solid var(--ct-hair)}
.ct-sheet-sec .ct-block>div{background:var(--brand-dark);padding:14px 16px}
.ct-sheet-sec .ct-block dt{font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ct-tx3);margin-bottom:5px}
.ct-sheet-sec .ct-block dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ct-w)}
.ct-sheet-sec .ct-block-w{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ct-sheet-sec .ct-block-w dd{line-height:1.65}

@media(max-width:900px){
  /* The sheet stops being pinned. Once the notes lose their dead height (below) they no
     longer feed the pinned drawing any scroll distance to track, and it would just take
     34vh of readable viewport. Both code paths run the same idempotent show(), so the
     notes fire in quick succession and the drawing still ends up fully marked up. */
  .ct-sheet-sec .ct-sheet{grid-template-columns:1fr;gap:16px}
  .ct-sheet-sec .ct-plate{position:static;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    background-color:var(--brand-dark);
    background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28));
    border:0;border-bottom:1px solid var(--ct-hair2);padding-block:8px 12px}
  /* 960x640 is only about 226px tall at 375px wide — no need to cap it further */
  .ct-sheet-sec .ct-dwg{max-height:none}
  .ct-sheet-sec .ct-notes{margin-top:6px}
  /* This was min-height:clamp(280px,50vh,420px), purely to feed the pinned drawing.
     Three notes, nine sentences, 1,218px. The drawing is not pinned here, so the dead
     height goes with it. Desktop (>900px) keeps its 56vh. */
  .ct-sheet-sec .ct-note{min-height:0}
  .ct-sheet-sec .ct-note-in{padding-left:16px}
  .js .ct-sheet-sec .ct-note.is-cur .ct-note-in{padding-left:18px}
}

@media(max-width:620px){
  /* 339px of content at 375px wide: a 250px minimum collapses to one column anyway */
  .ct-sheet-sec .ct-block-w{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

  /* With the dead height gone the symbol sits beside the text, three or four lines a note */
  .ct-sheet-sec .ct-note-in{display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;padding-block:16px;flex:1 1 auto;min-width:0}
  .ct-sheet-sec .ct-sym{grid-column:1;grid-row:1/span 2;align-self:start;
    margin-bottom:0;font-size:22px;padding-top:1px}
  .ct-sheet-sec .ct-note h3{grid-column:2;margin-bottom:6px}
  .ct-sheet-sec .ct-note p{grid-column:2;max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .ct-sheet-sec .ct-plate{position:static}
  .js .ct-sheet-sec .ct-ann{opacity:1}
  .js .ct-sheet-sec .ct-ann path,.js .ct-sheet-sec .ct-ann line,
  .js .ct-sheet-sec .ct-ann polyline{stroke-dashoffset:0}
  .js .ct-sheet-sec .ct-ann text,.js .ct-sheet-sec .ct-ann .ct-dot{opacity:1}
  .js .ct-sheet-sec .ct-ann text{opacity:.72}
  .js .ct-sheet-sec .ct-note-in{opacity:1}
  .ct-sheet-sec .ct-note{min-height:0}
}
/* END_SECTION:ct-measure */

/* START_SECTION:ct-simple (INDEX:10) */
.cs{padding-block:calc(var(--nav-h) + clamp(28px,5vw,58px)) clamp(48px,8vw,96px)}
.cs-in-wrap{min-width:0}
.cs-head{max-width:60ch;margin-bottom:clamp(26px,4vw,44px)}
.cs-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px}
.cs-h{margin:0 0 14px;letter-spacing:.015em;text-wrap:balance}
.cs-lede{font-size:14px;line-height:1.72;color:var(--body);max-width:56ch}
.cs-lede p{margin:0 0 8px}

/* The two channels that answer fastest, before the form rather than after it. */
.cs-fast{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cs-fast-a{display:flex;flex-direction:column;gap:3px;text-decoration:none;
  padding:11px 15px;border:1px solid var(--line2);border-radius:2px;color:var(--ink);
  transition:border-color .18s var(--ease)}
.cs-fast-a:hover{border-color:var(--brand)}
.cs-fast-a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cs-fast-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.cs-fast-a b{font-size:13.5px;font-weight:600}

.cs-form{max-width:660px;display:grid;gap:clamp(16px,2.4vw,22px)}
.cs-f{display:block;min-width:0;border:0;padding:0;margin:0}
.cs-lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.cs-req{color:var(--brand)}
.cs-opt{opacity:.7}
.cs-in{width:100%;min-height:46px;padding:0 13px;border:1px solid var(--line2);
  border-radius:2px;background:var(--paper);color:var(--ink);font:inherit;font-size:15px;
  transition:border-color .2s var(--ease)}
.cs-in:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.cs-area{padding:12px 13px;min-height:132px;line-height:1.6;resize:vertical}
.cs-file{padding:11px 13px;min-height:auto}
.cs-hint{margin:7px 0 0;font-size:12px;line-height:1.6;color:var(--faint)}
.cs-err{margin:0;padding:11px 13px;border-left:2px solid var(--con);background:var(--sunk);
  font-size:13.5px;color:var(--ink)}

.cs-row{display:grid;gap:clamp(16px,2.4vw,22px)}
@media(min-width:660px){ .cs-row{grid-template-columns:1fr 1fr} }

/* The three doors, as targets rather than a list of radios. */
.cs-door-g{display:grid;gap:10px}
@media(min-width:560px){ .cs-door-g{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cs-door{position:relative;display:block;cursor:pointer}
.cs-door input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;
  cursor:pointer}
.cs-door-in{display:flex;flex-direction:column;gap:4px;min-height:64px;
  padding:13px 15px;border:1px solid var(--line2);border-radius:2px;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.cs-door-in b{font-size:14px;font-weight:600;color:var(--ink)}
.cs-door-in i{font-style:normal;font-size:12px;line-height:1.5;color:var(--sub)}
.cs-door:hover .cs-door-in{border-color:var(--brand)}
.cs-door input:checked + .cs-door-in{border-color:var(--brand);background:var(--brand-tint)}
.cs-door input:focus-visible + .cs-door-in{outline:2px solid var(--brand);outline-offset:2px}

.cs-tel{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:8px}
.cs-send{margin-top:4px}
.cs-send .btn{width:100%}
@media(min-width:560px){ .cs-send .btn{width:auto} }

/* The confirmation. Replaces the form, because there is nothing left to fill in. */
.cs-done{border-left:2px solid var(--own,var(--brand));padding:4px 0 4px 18px;max-width:56ch}
.cs-done-i{display:block;width:30px;height:30px;color:var(--own,var(--brand));margin-bottom:12px}
.cs-done-i svg{width:100%;height:100%}
.cs-done-h{font-family:var(--bebas);font-weight:400;font-size:clamp(24px,4vw,36px);
  letter-spacing:.02em;line-height:1.06;color:var(--ink);margin:0 0 12px}
.cs-done-p{font-size:14px;line-height:1.72;color:var(--body)}
.cs-done-p p{margin:0 0 9px}
.cs-done-a{margin:20px 0 0}
/* END_SECTION:ct-simple */

/* START_SECTION:custom-section (INDEX:11) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:ds-apply (INDEX:12) */
/* ═══ Distributor closing panel ═══════════════════════════
   Copied from site/assets/css/for-distributors.css. The accent is --dis, the
   distributor door's colour; brand blue belongs to the navigation only. */

/* 封面错峰（避开 .d1/.d2/.d3；正文列表一律用 base.css 的 dl1–dl6） */
.js .rv.ds-s1{transition-delay:.09s}

.ds-eye{color:var(--dis)}
.ds-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ds-mi{width:30px;height:30px;color:var(--dis);display:block;flex:0 0 auto}

.ds-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.ds-btn{background:var(--dis);border-color:var(--dis)}
.ds-btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.ds-btn-g{background:transparent;color:var(--dis);border-color:var(--dis)}
.ds-btn-g:hover{background:var(--dis);color:var(--paper);border-color:var(--dis)}

.ds-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:18px 30px;margin-top:clamp(24px,3vw,36px);padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--dis);background:var(--dis-tint)}
.ds-line-p{font-size:13.5px;color:var(--body);max-width:56ch;margin-top:8px}
/* ⚠ 这里原来是 white-space:nowrap。site.js 注入的那句后来加长成
   「open now, usually answered within 2 hours」，nowrap 一钉，375 上撑出
   355px、整页横向溢出 17px。时间那行（b，display:block）自己不换行就够了。 */
.ds-clock{font-size:12.5px;color:var(--sub);text-wrap:pretty}
.ds-clock b{font-family:var(--bebas);font-size:22px;white-space:nowrap;letter-spacing:.05em;color:var(--dis);
  display:block;line-height:1.1}
/* The one rule that is not a straight copy. On the static page this block sat under the
   three workshop photographs, so its space was above it; here it heads the panel. */
.ds-apply .ds-line{margin-top:0;margin-bottom:clamp(28px,4vw,44px)}

/* ── 05 · 出口 ────────────────────────────────────────────── */
.ds-apply{background:var(--gray);border-top:1px solid var(--line);
  padding:clamp(56px,8vw,104px) 0 clamp(56px,8vw,100px)}
/* 左侧那张 1:1 成品门照片（.ds-exit-ph）删了：手机上 .ds-exit 塌成一列，
   它正好排在联系文案上面，把 WhatsApp 按钮往下推将近半屏 —— 买家已经
   决定要问价的那一刻，不该再滑一屏才够得着入口。栅格的第二列一并收掉。 */
.ds-exit{display:block;max-width:640px}

.ds-exit-tx .eyebrow{margin-bottom:14px}
.ds-exit-tx .d2{margin-bottom:20px}
.ds-exit-tx .ds-cta{margin-top:22px}

/* 已经写好一半的那条消息。加粗的是他自己要填的，虚线是空格。 */
.ds-msg{font-size:14.5px;line-height:1.75;color:var(--body);background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--dis);
  padding:15px 18px;max-width:50ch}
.ds-msg b{color:var(--dis);font-weight:700;border-bottom:1px dashed currentColor}

/* 号码与邮箱明写一份 —— 北美不一定装 WhatsApp，得能整段抄走 */
.ds-hand{list-style:none;margin:22px 0 0;padding:0;max-width:50ch}
.ds-hand li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  padding:8px 0;border-bottom:1px dashed var(--line)}
.ds-hand li:last-child{border-bottom:0}
.ds-hand-k{color:var(--faint);letter-spacing:.14em;text-transform:uppercase;flex:0 0 74px}
.ds-hand-v{font-size:13.5px;color:var(--ink);word-break:break-word}
.ds-copy{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dis);background:none;border:1px solid var(--dis);padding:6px 10px;
  min-height:32px;cursor:pointer;margin-left:auto;
  transition:background .25s var(--ease),color .25s var(--ease)}
.ds-copy:hover{background:var(--dis);color:var(--paper)}

.ds-exit-n{margin-top:20px;font-size:12.5px;line-height:1.7;color:var(--sub);max-width:48ch}

/* ── 手机端压间距 ─────────────────────────────────────────────
   .ds-apply 是 section，里面才是 .wrap。写 padding:X 0 这种简写会把同用
   .wrap 的类的左右内距清成 0 —— 本页踩过，这里一律不用简写。 */
@media(max-width:640px){
  .ds-apply{padding-block:40px}
}

/* ── 打印：这一页很可能被打成 PDF 发给经销商 ───────────────── */
@media print{
  .ds-copy{display:none}
  .ds-line{background:none}
}
/* END_SECTION:ds-apply */

/* START_SECTION:fh-overlay (INDEX:13) */
/* ═══════════════════════════════════════════════════════════
   for-homeowners.css · 业主门
   版式：一封短信。亮底、暖气质、行距宽，所有强调走 --own。
   不用卡片阴影堆气氛 —— 只用细线、留白和一点绿。

   2026-08 砍薄：这一页只剩五块（首屏 / 数字 / 叠加器 / 工厂 / 出口）。
   2026-08 下旬补数据后加回一块：下单流程（.fh-flow*，排在工厂和出口之间，
   走 tint 底，正好把「白 → 灰 → 白 → 灰 → 深」的节奏接上）。
   同时新增 .fh-p / .fh-p-u（单价双币种）和 .fh-freight（运费实话）。
   删掉的样式：三步流程 .fh-step*、手绘路线 .fh-routeline、
   before-after 滑块 .fh-ba-*、五个方向 .fh-dir*、量尺 .fh-ms-*、
   经销商三卡 .fh-dl-*、首屏两张图纸 .fh-sheets/.fh-sh-*。
   页面上已经没有对应的 DOM，别再往回加。

   注意（踩过的坑）：
   · 错峰延时用 base.css 的 .dl1–.dl6。**不要用 d1–d3** ——
     那是展示字阶（Bebas 30–104px），正文会被渲染成全大写大字。
     本页原来那套 .fh-s1–.fh-s5 已经删掉，跟 dl* 重复。
   · 线稿门（.fh-ov-art）三个门型是叠着切 opacity 的，不能 display:none ——
     site.js 量不到隐藏元素的路径长，dasharray 会写成 1，门会变成一条线。
   · 颜色一律走 base.css 的 token，本文件里不写十六进制。
   ═══════════════════════════════════════════════════════════ */

/* 这一页是「业主门」，眉标和章节号跟着 --own 走，不用品牌蓝。
   收尾块的 eyebrow 已删（和首屏那句重复），这里只剩首屏一处。 */
.fh-hero .eyebrow,
.fh-num-sec .sh .k,.fh-ov-sec .sh .k,.fh-fac-sec .sh .k,
.fh-flow-sec .sh .k{color:var(--own)}
/* 本页只剩叠加器那三樘线稿门用同一副笔 */
.fh-ov-art{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 真实安装照。不是渲染图。原来那句图注已删 —— #onsite 的 .fh-ov-badge
   和 #works 的 note 各说了一遍「实拍不是渲染」，这里第三遍是纯高度。 */
.fh-fig{margin:0;min-width:0}
/* ═══ 02 · 线稿门叠在照片上（全站唯一的互动）══════════════ */
.fh-ov{display:grid;gap:clamp(22px,3vw,38px);
  grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);align-items:start}
.fh-ov-fig{margin:0;min-width:0}
.fh-ov-stage{position:relative;overflow:hidden;aspect-ratio:1000/562;
  background:var(--sunk);border:1px solid var(--line)}
.fh-ov-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none}
.fh-ov-ghost{position:absolute;left:var(--x,44%);top:var(--y,99%);width:var(--w,40%);
  aspect-ratio:300/320;transform:translate(-50%,-100%);cursor:grab;touch-action:none;
  -webkit-tap-highlight-color:transparent}
.fh-ov-ghost:active,.fh-ov.is-drag .fh-ov-ghost{cursor:grabbing}
.fh-ov-ghost::after{content:"";position:absolute;inset:-14px;border:1px dashed var(--paper);
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.fh-ov-ghost:hover::after,.fh-ov-ghost:focus-visible::after{opacity:.55}
/* 三个门型叠着切 opacity。不能 display:none —— site.js 量不到隐藏元素。 */
.fh-ov-art{position:absolute;inset:0;width:100%;height:100%;
  stroke:var(--paper);stroke-width:2.2;opacity:0;visibility:hidden;
  filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--brand-dark) 62%,transparent));
  transition:opacity .35s var(--ease)}
.fh-ov-art.is-on{opacity:1;visibility:visible}
/* 把照片拖进舞台时的反馈 */
.fh-ov.is-over .fh-ov-stage{outline:2px dashed var(--own);outline-offset:-7px}
.fh-ov-badge{position:absolute;left:12px;bottom:12px;padding:5px 10px;
  background:var(--paper);color:var(--sub);border:1px solid var(--line);
  font-size:10px;letter-spacing:.1em}
/* 右侧说明栏。A/B/C 三个字母标签（.fh-ov-k）已删 —— 三个按钮、一根滑杆、
   一个上传按钮本来就自解释，编号是给自己看的。分隔线还在，够分块了。 */
.fh-ov-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.fh-ov-block{padding-top:14px;border-top:1px solid var(--line)}
.fh-ov-block:first-child{border-top:0;padding-top:0}
.fh-ov-styles{display:flex;flex-wrap:wrap;gap:8px}
.fh-ov-style{min-height:44px;padding:0 16px;background:none;border:1px solid var(--line2);
  color:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.fh-ov-style:hover{border-color:var(--own);color:var(--own)}
.fh-ov-style.is-on{background:var(--own);border-color:var(--own);color:var(--paper)}
.fh-ov-hint{font-size:13px;line-height:1.6;color:var(--sub);margin-bottom:14px}
.fh-ov-w{display:flex;align-items:center;gap:14px;min-height:44px}
.fh-ov-w>span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  flex:0 0 auto}
/* 滑杆本身要有 44px 的可点高度，轨道细不代表手指细 */
.fh-ov-w input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--own);height:44px}
.fh-ov-file{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fh-ov-load{position:relative;overflow:hidden;color:var(--own);border-color:var(--own);
  text-transform:none;letter-spacing:.06em;font-size:12.5px}
.fh-ov-load:hover{background:var(--own);color:var(--paper)}
.fh-ov-input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.fh-ov-reset{min-height:44px;padding:0 8px;background:none;border:0;cursor:pointer;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  text-decoration:underline;text-underline-offset:4px}
.fh-ov-reset:hover{color:var(--ink)}
/* 一条脚注收三件事：这只是草图 / 照片不离开这个标签页 / 要真图去 WhatsApp。
   原来隐私承诺独占一个带底色的块（.fh-ov-priv），已并进来 ——
   ⚠ 「nothing is uploaded, stored or sent」这句一个字都不能再删，
   它是页面对用户做的承诺，不是文案。 */
.fh-ov-real{font-size:12.5px;line-height:1.65;color:var(--faint);padding-top:14px;
  border-top:1px solid var(--line);max-width:56ch}
@media(max-width:900px){
  .fh-ov{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
/* 线稿是按 viewBox 缩放的，屏幕一小笔画就细成头发丝 —— 手动加粗 */
  .fh-ov-art{stroke-width:3}
.fh-ov-stage{aspect-ratio:4/3}
/* 三个门型按钮横滑。wrap 的话「Light Luxury Minimal」在 375px 下自己占一行，
     三个堆成 148px；nowrap 出血一行滑完。 */
  .fh-ov-styles{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.fh-ov-styles::-webkit-scrollbar{display:none}
.fh-ov-style{flex:0 0 auto}
}
/* END_SECTION:fh-overlay */

/* START_SECTION:footer (INDEX:14) */
.foot-top { display: grid; gap: clamp(26px, 4vw, 54px); }
  .foot-brand { display: flex; flex-direction: column; gap: 14px; }
  .foot-blurb { font-size: 13px; line-height: 1.7; max-width: 34ch; }
  .foot-cols { display: grid; gap: clamp(20px, 3vw, 40px);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .foot-col { display: flex; flex-direction: column; }
  .foot-legal-l { display: inline-flex; flex-wrap: wrap; gap: 4px 14px;
    margin-left: 14px; }
  .foot-social { display: flex; gap: 10px; list-style: none; margin: 4px 0 0; padding: 0; }
  .foot-social a { display: grid; place-items: center; width: 34px; height: 34px;
    border: 1px solid currentColor; border-radius: 100px; opacity: .55;
    transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .foot-social a:hover { opacity: 1; transform: translateY(-2px); }
  .foot-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
    opacity: 1; }
  .foot-addr { font-size: 12.5px; line-height: 1.6; opacity: .7; padding-top: 4px; }

  @media (min-width: 860px) {
    .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  }
/* END_SECTION:footer */

/* START_SECTION:hm-cases (INDEX:16) */
/* ═══ Selected work ══════════════════════════════════════ */
.hm-casegrid{gap:clamp(16px,2.4vw,30px)}
.hm-case{display:block;text-decoration:none;color:var(--body);
  border-top:1px solid var(--ink);padding-top:14px}
.hm-cshot{margin:0;overflow:hidden;background:var(--sunk);aspect-ratio:16/10}
.hm-cshot img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  transition:transform .9s var(--ease),filter .6s var(--ease)}
.hm-case:hover .hm-cshot img{transform:scale(1.04);filter:none}
.hm-cmeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;
  font-size:10.5px;letter-spacing:.12em;color:var(--faint)}
.hm-case h3{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink);
  font-weight:600;max-width:32ch}
.hm-caseall{display:inline-block;margin-top:clamp(20px,2.6vw,30px);font-size:13px}

/* ⚠ Three cards. Two columns here leaves the third alone on row two with a gap
   beside it. Three columns gives ~240px each, matching the rail's lower bound. */
@media(max-width:940px){
  .hm-casegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .hm-casegrid{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:minmax(240px,1fr);overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    /* ⚠ scroll-padding must be written in a matching pair with padding — snap aligns to
   the snapport, which is the scrollport reduced by SCROLL-padding, not padding.
   Without it the left gutter is eaten and the first card sticks to the screen edge. */
    padding-inline:var(--gut);scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-bottom:10px}
  .hm-case{scroll-snap-align:start}
}
/* END_SECTION:hm-cases */

/* START_SECTION:hm-cert (INDEX:17) */
.hm-certlink-w{margin:10px 0 0}
.hm-certlink{font-size:12.5px;font-weight:600}

/* ═══ Trust wall ═════════════════════════════════════════ */
.hm-certlist{list-style:none;margin:clamp(20px,3vw,34px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid rgba(255,255,255,.20)}
.hm-certlist li{display:grid;gap:6px;padding-block:clamp(14px,2vw,20px);
  border-bottom:1px solid rgba(255,255,255,.20)}
.hm-cs{font-family:var(--bebas);font-size:clamp(20px,2.6vw,28px);line-height:1;
  letter-spacing:.03em;color:#fff}
.hm-cd{font-size:13px;line-height:1.65;color:rgba(255,255,255,.72);max-width:56ch}
.hm-cn{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55)}
.hm-certfoot{margin:clamp(18px,2.6vw,28px) 0 0;font-size:12.5px;line-height:1.75;
  color:rgba(255,255,255,.62);max-width:74ch}
.hm-mktnotes{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);
  margin-top:clamp(18px,2.6vw,28px);
  padding-top:clamp(14px,2vw,20px);border-top:1px solid rgba(255,255,255,.16)}
.hm-mktnotes p{margin:0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.hm-mk{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:3px}

@media(min-width:820px){
  .hm-certlist{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(24px,4vw,60px)}
}
/* END_SECTION:hm-cert */

/* START_SECTION:hm-cta (INDEX:18) */
/* the eyebrow and the note, matching .c-k and .c-end-n in site/assets/css/cases.css */
.hm-ctak{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 12px}
.hm-ctanote{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.62);margin-top:18px}
.hm-ctanote p{margin:0}

/* ═══ Closing call to action ═════════════════════════════ */
.hm-ctah{margin:0;color:#fff;font-size:clamp(34px,5.6vw,72px);letter-spacing:.02em;
  text-wrap:balance}
.hm-ctalede{margin:clamp(14px,2vw,22px) 0 0;color:rgba(255,255,255,.78);max-width:46ch}
.hm-steps{list-style:none;margin:clamp(24px,3.4vw,40px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid rgba(255,255,255,.20)}
.hm-steps li{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);
  padding-block:clamp(12px,1.8vw,17px);border-bottom:1px solid rgba(255,255,255,.20);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.hm-sn{font-family:var(--bebas);font-size:18px;letter-spacing:.06em;
  color:rgba(255,255,255,.45);flex:0 0 auto;min-width:2em}
.hm-ctaacts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  margin-top:clamp(22px,3vw,34px)}
.hm-clock{margin:clamp(18px,2.4vw,26px) 0 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;color:rgba(255,255,255,.55);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hm-clock b{font-family:var(--bebas);font-size:19px;letter-spacing:.04em;
  color:#fff;line-height:1}
.hm-clock.is-open b{color:#fff}

.hm-exits{margin:clamp(16px,2.2vw,24px) 0 0;font-size:12.5px;line-height:1.9;
  color:rgba(255,255,255,.72);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.hm-exits-l{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6}
.hm-exits .ul{color:#fff}

@media(max-width:640px){
  .hm-ctaacts .btn{flex:1 1 auto;justify-content:center}
}
/* END_SECTION:hm-cta */

/* START_SECTION:hm-doors (INDEX:19) */
/* ═══ Three doors ════════════════════════════════════════ */
.hm-door{position:relative;isolation:isolate;overflow:hidden;display:block;
  min-height:clamp(300px,38vw,430px);text-decoration:none;color:#fff;
  border-top:2px solid var(--ink)}
.hm-dbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;transition:transform .9s var(--ease)}
.hm-door:hover .hm-dbg{transform:scale(1.04)}
.hm-dscrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,18,18,.18) 0%,rgba(18,18,18,.52) 52%,
    rgba(18,18,18,.86) 100%)}
.hm-din{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;height:100%;padding:clamp(18px,2.2vw,28px)}
.hm-din h3{margin:0 0 8px;color:#fff}
.hm-din p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82);
  max-width:30ch}
/* Audience accents. In greyscale only lightness separates them, so this hairline helps */
.hm-door.k-con{border-top-color:var(--con)}
.hm-door.k-dis{border-top-color:var(--dis)}
.hm-door.k-own{border-top-color:var(--own)}

@media(max-width:900px){
    .hm-door{min-height:clamp(240px,52vw,320px)}
}
/* END_SECTION:hm-doors */

/* START_SECTION:hm-hero (INDEX:20) */
/* ── Hero: full-bleed video, centred copy ────────────────
   Height uses 100svh, not 100vh — on phones 100vh jumps when the address bar
   retracts. svh is the small-viewport height and stays put. Capped at 860px so
   the copy does not float alone in the middle of a 4K screen. */
.hm-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,860px);display:grid;place-items:center;
  background:var(--brand-dark)}
.hm-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
/* Scrim: heavy top and bottom, light in the middle — the castings are in the middle */
.hm-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.78) 0%,rgba(20,20,20,.42) 42%,
    rgba(20,20,20,.82) 100%)}
.hm-heroin{position:relative;z-index:2;text-align:center;
  padding-block:clamp(90px,14vh,150px)}
.hm-h1{font-size:clamp(40px,7.4vw,104px);letter-spacing:.02em;
  margin:0;text-wrap:balance}
.hm-h1 span{display:block}
/* The two lines are inverted on purpose: line 1 dimmed, line 2 full white.
   The noise recedes, the courtyard appears — the typography restates the sentence. */
.hm-h1 span:first-child{color:rgba(255,255,255,.52)}
.hm-h1 span+span{color:#fff}
.hm-lede{margin:clamp(18px,2.4vw,28px) auto 0;color:rgba(255,255,255,.78);
  max-width:44ch}
.hm-acts{margin-top:clamp(26px,3.4vw,40px);display:flex;gap:14px;
  flex-wrap:wrap;justify-content:center}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(max-width:640px){
  .hm-hero{min-height:min(92svh,720px)}
  .hm-h1{font-size:clamp(36px,10.5vw,54px)}
  .hm-acts .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  /* Respect reduced motion: a looping background video is a classic vestibular trigger.
   ⚠ But hiding it WITHOUT a fallback leaves a flat empty panel, so the poster fills in.
   Its URL arrives inline via --hero-poster (Liquid cannot run in here). */
  .hm-vid{display:none}
  .hm-hero{background-image:var(--hero-poster);
    background-size:cover;background-position:50% 50%}
}
/* END_SECTION:hm-hero */

/* START_SECTION:hm-series (INDEX:21) */
/* ═══ Three product lines ════════════════════════════════ */
.hm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px)}
.hm-ser{display:flex;flex-direction:column;text-decoration:none;color:var(--body);
  border-top:1px solid var(--ink);padding-top:14px}
.hm-serart{display:block;overflow:hidden;background:var(--sunk);
  aspect-ratio:4/3;margin-bottom:14px}
.hm-serimg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.hm-ser:hover .hm-serimg{transform:scale(1.04)}
.hm-serk{display:block;font-size:11px;letter-spacing:.14em;color:var(--faint);
  margin-bottom:6px}
.hm-ser h3{margin:0 0 8px;color:var(--ink)}
.hm-sercn{display:block;font-size:12px;letter-spacing:.02em;line-height:1.6;
  color:var(--sub)}
/* Render badge. The about page states "Nothing here is a render", so anything that
   IS a render must say so — the two pages must not contradict each other. */
.hm-sernote{display:inline-block;align-self:flex-start;margin-top:10px;/* ⚠ align-self is required: .hm-ser is a flex column, and the default stretch
   pulls this small badge to the full card width, where it reads as an empty field. */
  font-family:var(--mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line2);padding:3px 7px}

@media(max-width:900px){
  .hm-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:600px){
  .hm-strip{grid-template-columns:minmax(0,1fr)}
}
/* END_SECTION:hm-series */

/* START_SECTION:hm-testimonials (INDEX:22) */
/* ═══ Full quotes (installed work) ═══════════════════════
   Transcribed from site/assets/css/cases.css so the ported band sets the same as the
   page it came from. */
.ts{padding-block:clamp(34px,5vw,72px);border-bottom:1px solid var(--line)}
.ts-head{max-width:62ch;margin-bottom:clamp(22px,3.4vw,40px)}
.ts-h{font-family:var(--bebas);font-weight:400;font-size:clamp(28px,5.4vw,54px);
  line-height:1.02;letter-spacing:.02em;color:var(--ink);margin:0 0 12px}
.ts-sub{font-size:13.5px;line-height:1.72;color:var(--sub);margin:0;max-width:56ch}
.ts-sub p{margin:0}
.ts-body{display:grid;gap:clamp(16px,2.6vw,34px)}
.ts-aside{min-width:0}
.ts-mark{display:block;font-family:var(--bebas);font-size:76px;line-height:.6;
  color:var(--line2)}
.ts-aside-t{font-family:var(--bebas);font-weight:400;font-size:clamp(22px,3vw,30px);
  line-height:1.06;letter-spacing:.02em;color:var(--ink);margin:14px 0 18px}
.ts-nav{display:flex;align-items:center;gap:12px}
.ts-b{width:38px;height:38px;flex:0 0 auto;border-radius:100px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--paper);color:var(--body);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.ts-b:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ts-b:disabled{opacity:.35;cursor:default}
.ts-b:disabled:hover{border-color:var(--line2);background:var(--paper);color:var(--body)}
.ts-b:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ts-rail{flex:1 1 auto;height:1px;background:var(--line2);position:relative;min-width:40px}
.ts-rail i{position:absolute;left:0;top:-1px;height:3px;background:var(--brand);
  width:20%;transition:left .3s var(--ease),width .3s var(--ease)}
/* ⚠ scroll-padding must match the inline padding, or the first card is cut in half when
   the rail snaps — the same trap every other rail in this theme hit. */
.ts-track{display:flex;gap:clamp(12px,1.8vw,20px);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
  scroll-padding-inline:var(--gut)}
.ts-track::-webkit-scrollbar{display:none}
.ts-c{flex:0 0 min(84%,340px);scroll-snap-align:start;min-width:0;margin:0;
  display:flex;flex-direction:column;border:1px solid var(--line);
  background:var(--paper);padding:clamp(16px,2.2vw,22px)}
.ts-q{margin:0 0 14px;font-size:13.5px;line-height:1.74;color:var(--body);flex:1 1 auto}
.ts-w{display:flex;align-items:center;gap:11px;padding-top:14px;
  border-top:1px solid var(--line);margin-top:auto}
.ts-av{width:38px;height:38px;flex:0 0 auto;border-radius:100px;object-fit:cover}
.ts-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.ts-who b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.2}
.ts-who i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.ts .ts-stars{display:inline-flex;gap:3px;margin-bottom:14px}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:900px){
  .ts-body{grid-template-columns:minmax(0,4fr) minmax(0,9fr);align-items:start}
  .ts-c{flex:0 0 min(46%,340px)}
}
@media(prefers-reduced-motion:reduce){
  .ts-rail i{transition:none}
}

/* ═══ Customer quotes ════════════════════════════════════ */
.tm-top{max-width:64ch;margin-bottom:clamp(20px,3vw,34px)}
.tm-top .d2{margin:0 0 12px}
.tm-agg{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;
  font-family:var(--mono);font-size:12px;color:var(--faint)}
.tm-agg b.num{font-family:var(--bebas);font-size:30px;color:var(--ink);line-height:1}
.tm-of{margin-left:-5px}
.tm-n{color:var(--sub)}
.tm-n b{color:var(--ink);font-weight:400}
.tm-g{display:grid;gap:clamp(12px,1.8vw,20px)}
.tm-c{margin:0;background:var(--paper);border:1px solid var(--line);
  padding:clamp(15px,2vw,20px);display:flex;flex-direction:column;min-width:0}
.tm-c blockquote{margin:0 0 14px;font-size:13.5px;line-height:1.68;color:var(--ink);
  font-weight:500;flex:1 1 auto}
.tm-c figcaption{display:flex;align-items:center;gap:10px;padding-top:13px;
  border-top:1px solid var(--line);min-width:0}
.tm-c figcaption img{width:34px;height:34px;flex:0 0 auto;border-radius:100px;
  object-fit:cover;background:var(--sunk)}
.tm-c figcaption span{min-width:0;display:flex;flex-direction:column;gap:1px}
.tm-c figcaption b{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
.tm-c figcaption i{font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--faint)}
/* Anonymity notice. Small, but it must be present — it is the line between an
   anonymised real testimonial and impersonation. */
.tm-disc{margin:clamp(14px,2vw,20px) 0 0;font-size:11.5px;line-height:1.65;
  color:var(--faint);max-width:70ch}
.tm-more{display:inline-flex;align-items:center;gap:7px;
  margin-top:clamp(14px,2vw,20px);font-size:13px;font-weight:600}

/* Responsive rules come after the base rules */
@media(min-width:640px){
  .tm-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1000px){
  .tm-g{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* END_SECTION:hm-testimonials */

/* START_SECTION:jr-index (INDEX:23) */
/* ═══ Journal cards ══════════════════════════════════════ */
.jr-index{padding-block:clamp(38px,6vw,92px)}
.jr-index--tint{background:var(--gray)}
.jr-index--sunk{background:var(--sunk)}
.jr-index--dark{background:var(--brand-dark);color:#fff}
.jr-head{max-width:62ch;margin-bottom:clamp(20px,3vw,34px)}
.jr-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px;opacity:.62}
.jr-date{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55;margin:0 0 12px}

/* Card grid, ported from the static site's .ab-jr-* rules. */
.ab-jr-g{display:grid;gap:clamp(14px,2.2vw,26px)}
.ab-jr-c{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;
  border:1px solid var(--line);background:var(--paper);padding:clamp(15px,2vw,20px);
  transition:border-color .25s var(--ease),transform .45s var(--ease)}
.ab-jr-c:hover{border-color:var(--brand);transform:translateY(-3px)}
.ab-jr-c:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.ab-jr-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}
.ab-jr-t{font-family:var(--bebas);font-weight:400;font-size:clamp(18px,2.2vw,23px);
  line-height:1.08;letter-spacing:.03em;color:var(--ink);margin:0 0 9px}
.ab-jr-d{font-size:12.5px;line-height:1.62;color:var(--sub);margin:0 0 14px;flex:1 1 auto}
.ab-jr-go{font-size:11.5px;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:6px}
.ab-jr-go .ar{transition:transform .3s var(--ease)}
.ab-jr-c:hover .ab-jr-go .ar{transform:translateX(3px)}
.ab-jr-all{display:inline-flex;align-items:center;gap:7px;
  margin-top:clamp(16px,2.4vw,26px);font-size:13px;font-weight:600}

/* ⚠ On a dark band the card keeps its own paper ground, so its type must NOT inherit
   the section's white — base.css sets .ab-jr-t colour explicitly and it would win
   anyway, but the description and eyebrow would not. */
.jr-index--dark .ab-jr-c{background:var(--paper);color:var(--ink)}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:760px){.ab-jr-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.ab-jr-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){
  .ab-jr-c,.ab-jr-go .ar{transition:none}
}
/* END_SECTION:jr-index */

/* START_SECTION:page-hero (INDEX:24) */
/* ── `side`: the photograph beside the copy, not behind it ──
   site/for-homeowners.html's hero. A light paper band with two soft tints and the
   photograph in the second column — NOT a full-bleed background, which is what made
   near-black hero text land on a busy photograph with no scrim. */
/* Two classes on purpose: .pg-hero--light sets a flat background further down the
   sheet and would otherwise win on source order and drop the tints. */
.pg-hero.pg-hero--side{
  background:
    radial-gradient(90% 70% at 8% -10%, var(--own-tint), transparent 62%),
    radial-gradient(70% 60% at 100% 0%, var(--brand-tint), transparent 60%),
    var(--paper);
  color:var(--ink);
  align-items:center;
}
.pg-hero--side .pg-hero-in{display:grid;gap:clamp(30px,5vw,62px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.pg-hero--side .pg-hero-copy{min-width:0}
.pg-hero-fig{margin:0;min-width:0}
.pg-hero-shot{width:100%;height:auto;display:block;background:var(--sunk)}
@media(max-width:900px){
  /* One column on a phone, and the photograph after the words — the copy is what a
     visitor came for. */
  .pg-hero--side .pg-hero-in{grid-template-columns:minmax(0,1fr);gap:34px}
}

/* ── The contractors elevation ─────────────────────────────
   From site/assets/css/for-contractors.css. It MUST stay absolutely positioned: .pg-hero is
   display:flex, so an in-flow SVG becomes a flex item and takes width away from the
   headline — on a 375px screen it took 176px of it. .pg-hero is already position:relative,
   which is what this positions against. */
.ct-hero-art{position:absolute;left:0;right:0;bottom:-8px;width:100%;height:auto;
  color:rgba(255,255,255,.9);opacity:.13;pointer-events:none}

/* ═══ Page hero ══════════════════════════════════════════ */
.pg-hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(340px,var(--pgh-min,70vh),700px)}
.pg-hero--dark{background:var(--brand-dark);color:#fff}
.pg-hero--light{background:var(--paper);color:var(--ink)}
.pg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pgh-focal,50% 46%)}
/* Scrim: heavy top and bottom, light in the middle where the castings are.
   Strength is scaled by --pgh-scrim; 100% is the strength the page was designed at. */
.pg-hero--photo::after{content:"";position:absolute;inset:0;
  opacity:var(--pgh-scrim,1);
  background:linear-gradient(180deg,rgba(11,11,11,.58) 0%,rgba(11,11,11,.20) 33%,
    rgba(11,11,11,.80) 76%,rgba(11,11,11,.94) 100%)}
/* Drafting grid: used by the audience pages and the quote page */
.pg-hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 28px)}
.pg-hero-in{position:relative;z-index:2;width:100%;
  /* ⚠ The nav is fixed and overlays these heroes (html.nav-over), and .pg-hero is
     align-items:flex-end — so content taller than the band grows upward and lands behind
     the logo. Every hero on the static site opens with calc(var(--nav-h) + …) for exactly
     this reason. The clamp stays as the gap BELOW the nav. */
  padding-top:calc(var(--nav-h) + clamp(28px,5vw,58px));
  padding-bottom:clamp(28px,5vw,58px)}

.pg-hero-back{display:inline-block;margin-bottom:14px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:currentColor;opacity:.62;text-decoration:none}
.pg-hero-back:hover{opacity:1}
.pg-hero-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px;opacity:.62}
.pg-hero-h{font-family:var(--bebas);font-weight:400;
  font-size:clamp(40px,8.4vw,96px);line-height:.9;letter-spacing:.01em;
  margin:0 0 18px;text-wrap:balance}
/* ⚠ Target the LINE span only. `.pg-hero-h span` also hits the per-word
   .sw spans that data-split injects, which puts one word per line. */
.pg-hero-ln{display:block}
/* ⚠ Which line dims is a setting, not hardcoded — the homepage dims line 1 while
   the works, about and cases pages dim line 2. Hardcoding inverts five pages. */
.pg-hero-dim{opacity:.45}
.pg-hero-l{font-size:clamp(14px,1.6vw,16.5px);line-height:1.72;
  max-width:58ch;opacity:.8}
.pg-hero-l p{margin:0 0 10px}
.pg-hero-l p:last-child{margin-bottom:0}
.pg-hero-em{margin-top:clamp(16px,2.2vw,24px);padding-left:16px;
  border-left:2px solid currentColor;font-size:14px;line-height:1.7;max-width:52ch}
.pg-hero-em p{margin:0}

.pg-hero-facts{display:grid;gap:0;margin:clamp(20px,3vw,32px) 0 0;
  border-top:1px solid currentColor}
/* Label above, value under it. The first version used space-between, which
   threw the phone number to the far right of a 1180px row, half a screen from
   its own label. */
.pg-hero-facts>div{display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;padding-block:11px;border-bottom:1px solid currentColor}
.pg-hero-facts dt{margin:0;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.pg-hero-facts dd{margin:0;font-size:15px;font-weight:600;line-height:1.45}
.pg-hero-facts dd a{text-decoration:none}
.pg-hero-facts .num{font-family:var(--bebas);font-size:28px;line-height:1}
.pg-hero-sub{font-size:12px;font-weight:400;opacity:.62}

.pg-hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.8vw,30px)}
.pg-hero-clock{margin:clamp(16px,2.2vw,24px) 0 0;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;opacity:.6;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pg-hero-clock b{font-family:var(--bebas);font-size:19px;letter-spacing:.04em;
  opacity:1;line-height:1}

/* ⚠ base.css sets heading and link colours EXPLICITLY
   (h1,h2,h3,h4{color:var(--ink)} and .ul{color:var(--ink)}), so the section's
   own `color:#fff` never cascades into them. On a dark hero the email link
   rendered near-black on near-black. Every text colour must be restated per scheme. */
.pg-hero--dark .pg-hero-h,
.pg-hero--dark .pg-hero-facts dd,
.pg-hero--dark .pg-hero-facts dd a,
.pg-hero--dark .pg-hero-l,
.pg-hero--dark .pg-hero-em{color:#fff}
.pg-hero--light .pg-hero-h,
.pg-hero--light .pg-hero-facts dd,
.pg-hero--light .pg-hero-facts dd a{color:var(--ink)}
/* Long values (an email address) must wrap rather than run off the row */
.pg-hero-facts dd{overflow-wrap:anywhere}

/* Border colour follows the scheme — never use --line on a dark background */
.pg-hero--dark .pg-hero-facts,
.pg-hero--dark .pg-hero-facts>div{border-color:rgba(255,255,255,.20)}
.pg-hero--light .pg-hero-facts,
.pg-hero--light .pg-hero-facts>div{border-color:var(--line)}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(max-width:640px){
  .pg-hero{min-height:clamp(300px,58vh,440px)}
  .pg-hero-acts .btn{flex:1 1 auto;justify-content:center}
}
/* END_SECTION:page-hero */

/* START_SECTION:pg-faq (INDEX:27) */
/* ═══ Questions and answers ══════════════════════════════ */
.pg-faq{padding-block:clamp(38px,6vw,92px)}
.pg-faq--sunk{background:var(--sunk)}
.pg-faq-head{max-width:62ch;margin-bottom:clamp(20px,3vw,36px)}
.pg-faq-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.pg-faq-g{display:grid;gap:clamp(18px,2.6vw,32px)}
.pg-faq-col{min-width:0}
.pg-faq-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:4px;border-bottom:2px solid var(--ink)}
.pg-faq-ch h3{font-family:var(--bebas);font-weight:400;
  font-size:clamp(20px,2.6vw,26px);letter-spacing:.035em;color:var(--ink);
  margin:0;line-height:1}
.pg-faq-ch .ul{font-size:11.5px;white-space:nowrap}
.pg-faq-q{border-bottom:1px solid var(--line2)}
.pg-faq-q summary{list-style:none;cursor:pointer;padding-block:12px;padding-right:22px;
  position:relative;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);
  transition:color .16s}
.pg-faq-q summary::-webkit-details-marker{display:none}
.pg-faq-q summary:hover{color:var(--brand)}
.pg-faq-q summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Plus turning into a minus */
.pg-faq-q summary::after,.pg-faq-q summary::before{content:"";position:absolute;
  right:2px;top:50%;background:var(--faint);transition:transform .22s var(--ease)}
.pg-faq-q summary::before{width:11px;height:1px;margin-top:-.5px}
.pg-faq-q summary::after{width:1px;height:11px;margin-top:-5.5px;right:7px}
.pg-faq-q[open] summary::after{transform:rotate(90deg)}
.pg-faq-a{padding:0 22px 14px 0;font-size:13px;line-height:1.72;color:var(--body)}
.pg-faq-a p{margin:0 0 10px}
.pg-faq-a p:last-child{margin-bottom:0}
.pg-faq-foot{margin-top:clamp(18px,2.6vw,26px);font-size:12.5px;line-height:1.72;
  color:var(--sub);max-width:70ch}
.pg-faq-foot p{margin:0}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:900px){
  .pg-faq-g{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* END_SECTION:pg-faq */

/* START_SECTION:pg-gallery (INDEX:28) */
/* ═══ Photo set ══════════════════════════════════════════ */
.pg-gal{padding-block:clamp(38px,6vw,92px)}
.pg-gal--tint{background:var(--gray)}
.pg-gal--sunk{background:var(--sunk)}
.pg-gal--dark{background:var(--brand-dark);color:#fff}
.pg-gal-head{max-width:62ch;margin-bottom:clamp(20px,3vw,36px)}
.pg-gal-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px;opacity:.62}
.pg-gal-h{margin:0 0 12px}
.pg-gal-note{margin:0;max-width:56ch;line-height:1.72}
.pg-gal-note p{margin:0 0 8px}
.pg-gal-note p:last-child{margin-bottom:0}

/* The shared device: a grid on desktop, a snap rail on phones. Columns via --gal-cols. */
.pg-gal-strip{display:grid;gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-gal-strip figure{margin:0;min-width:0}
.pg-gal-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  display:block;background:var(--sunk)}
.pg-gal figcaption{margin-top:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;line-height:1.55;opacity:.66}
.pg-gal-wide{margin:clamp(14px,2.2vw,26px) 0 0}
.pg-gal-wide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.pg-gal-hint{margin:10px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;opacity:.5}

/* Picture beside text */
.pg-gal-split{display:grid;gap:clamp(22px,3.6vw,54px);align-items:center}
.pg-gal-splitart img{width:100%;height:auto;display:block}
.pg-gal-splittxt{font-size:14px;line-height:1.78}
.pg-gal-splittxt p{margin:0 0 14px;max-width:50ch}
.pg-gal-splittxt p:last-child{margin-bottom:0}
.pg-gal-inset{margin:22px 0 0;max-width:230px}
.pg-gal-inset img{width:100%;height:auto;display:block}

.pg-gal-visit{margin-top:clamp(20px,3vw,34px);padding-top:clamp(14px,2vw,20px);
  border-top:1px solid var(--line)}
.pg-gal--dark .pg-gal-visit{border-top-color:rgba(255,255,255,.2)}
.pg-gal-visit-t{font-size:14px;line-height:1.72;max-width:56ch}
.pg-gal-visit-t p{margin:0}
.pg-gal-clock{margin:clamp(16px,2.2vw,22px) 0 0;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;opacity:.6}
.pg-gal-clock b{font-family:var(--bebas);font-size:19px;opacity:1}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:900px){
  .pg-gal-strip{grid-template-columns:repeat(var(--gal-cols,4),minmax(0,1fr))}
  .pg-gal-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* ⚠ scroll-padding must be written in a matching pair with padding — snap aligns to
   the snapport, which is the scrollport reduced by SCROLL-padding, not padding.
   Without it the left gutter is eaten and the first card sticks to the screen edge. */
@media(max-width:899px){
  .pg-gal--rail .pg-gal-strip,
  .pg-gal--grid-then-rail .pg-gal-strip{
    display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:var(--gut);scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-bottom:8px}
  .pg-gal--rail .pg-gal-strip::-webkit-scrollbar,
  .pg-gal--grid-then-rail .pg-gal-strip::-webkit-scrollbar{display:none}
  .pg-gal--rail .pg-gal-strip figure,
  .pg-gal--grid-then-rail .pg-gal-strip figure{
    flex:0 0 min(78%,320px);scroll-snap-align:start}
}
/* END_SECTION:pg-gallery */

/* START_SECTION:pg-process (INDEX:29) */
/* ══════════════════════════════════════════════════════════
   The line band, from site/assets/css/factory.css.

   Pulled with _assets-pipeline/_css-extract.py so the @media wrappers survive. A flat
   `re.findall(r"[^{}]+\{[^{}]*\}", css)` collapses them: --cell's 86% / 46% / 31.5%
   all land unconditionally and the last one wins, so a phone renders desktop-width cells.

   ⚠ The class names here are the ORIGINAL's, on purpose. The port had renamed the outer
     structure to .pc-* while leaving the inner devices as .fc-*, which meant factory.js
     could not be used and every .pc-* rule had to be hand-maintained. Renaming the markup
     back means this stylesheet and site/assets/js/factory.js both apply as written.
   ══════════════════════════════════════════════════════════ */
.fc-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--faint);margin:0 0 13px}
.fc-bar{position:sticky;top:0;z-index:40;background:var(--paper); border-bottom:1px solid var(--line)}
.fc-bar-c{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none; padding:11px var(--gut)}
.fc-bar-c::-webkit-scrollbar{display:none}
.fc-bar-c a{flex:0 0 auto;font-size:12.5px;font-weight:600;text-decoration:none; padding:8px 13px;border:1px solid var(--line2);color:var(--body);border-radius:100px; white-space:nowrap;display:inline-flex;gap:7px;align-items:center; transition:border-color .16s,color .16s,background .16s}
.fc-bar-c a:hover,.fc-bar-c a.on{border-color:var(--ink);background:var(--ink); color:var(--paper)}
.fc-bar-c a b{font-family:var(--mono);font-size:10.5px;font-weight:600;opacity:.55}
.fc-bar-c a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fc-line{padding-top:clamp(26px,4vw,54px)}
.fc-lead{max-width:62ch;margin:0 0 clamp(26px,3.8vw,44px)}
.fc-lead .fc-k{margin-bottom:9px}
.fc-lead .d2{margin:0 0 14px;letter-spacing:.015em;text-wrap:balance}
.fc-lead .note{margin:0;max-width:56ch;line-height:1.72}
.fc-st{border-top:1px solid var(--line);padding-block:clamp(22px,3.4vw,40px); scroll-margin-top:66px;position:relative}
.fc-st::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:2px; background:var(--brand);transform:scaleX(0);transform-origin:left; transition:transform .5s var(--ease)}
.js .fc-st.in::before{transform:scaleX(1)}
.fc-st-h{display:flex;gap:clamp(12px,2.4vw,26px);align-items:flex-start;margin:0 0 16px}
.fc-st-n{flex:0 0 auto;font-family:var(--bebas);font-size:clamp(34px,6vw,62px); line-height:.82;color:var(--brand);opacity:.28;letter-spacing:.02em}
.fc-st-h h3{font-family:var(--bebas);font-weight:400;font-size:clamp(22px,3.4vw,34px); letter-spacing:.028em;color:var(--ink);margin:0 0 7px;line-height:1.04}
.fc-st-d{margin:0;font-size:13.5px;color:var(--body);max-width:54ch;line-height:1.68}
.fc-spec{display:inline-block;margin:9px 0 0;padding:5px 9px;border-radius:2px; background:var(--sunk);color:var(--sub); font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; line-height:1.35}
.fc-rail{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch; margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
.fc-rail::-webkit-scrollbar{display:none}
.fc-rail{--cell:86%}
.fc-rail figure{flex:0 0 var(--cell);margin:0;scroll-snap-align:center}
@media(min-width:760px){
  .fc-rail{--cell:46%}
}
@media(min-width:1100px){
  .fc-rail{--cell:31.5%}
}
.fc-vid{flex:0 0 calc(var(--cell) * .421875) !important}
.fc-vid video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block; background:var(--brand-dark)}
.fc-rail img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; background:var(--sunk)}
.fc-rail figcaption{margin-top:7px;font-family:var(--mono);font-size:10px; letter-spacing:.04em;color:var(--faint);line-height:1.5}
.fc-st-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}
.fc-st-c{font-family:var(--mono);font-size:11px;color:var(--faint);flex:0 0 auto}
.fc-st-c b{color:var(--ink);font-weight:600}
.fc-dots{display:flex;gap:4px;flex:0 0 auto}
.fc-dots i{width:5px;height:5px;border-radius:100px;background:var(--line2); transition:background .2s,width .2s}
.fc-dots i.on{background:var(--brand);width:15px}
.fc-st-p{flex:1 1 240px;font-size:12px;color:var(--sub);font-style:italic;min-width:0}
.js .fc-st .fc-rail img{filter:saturate(.34);transition:filter .8s var(--ease)}
.js .fc-st.in .fc-rail img{filter:none;transition-delay:.18s}
.js .fc-st.in .fc-rail figure:nth-child(2) img{transition-delay:.3s}
.js .fc-st.in .fc-rail figure:nth-child(3) img{transition-delay:.42s}
.js .fc-st.in .fc-rail figure:nth-child(4) img{transition-delay:.54s}
.fc-watch{margin-top:10px}
.fc-watch summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer; list-style:none;padding:6px 11px 6px 9px;border-radius:2px; border:1px solid var(--line2);background:var(--paper); font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--sub);transition:border-color .16s,color .16s}
.fc-watch summary::-webkit-details-marker{display:none}
.fc-watch summary:hover{border-color:var(--brand);color:var(--brand)}
.fc-watch summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.fc-watch-i{width:0;height:0;flex:0 0 auto; border-left:7px solid currentColor;border-top:5px solid transparent; border-bottom:5px solid transparent;transition:transform .2s var(--ease)}
.fc-watch[open] .fc-watch-i{transform:rotate(90deg)}
.fc-watch summary i{font-style:normal;color:var(--faint);letter-spacing:.04em}
.fc-watch-b{margin-top:12px}
.fc-watch-b video{width:100%;max-width:min(320px,72vw);height:auto;display:block; background:var(--brand-dark);border-radius:2px}
.fc-watch-c{margin:8px 0 0;font-size:11.5px;line-height:1.6;color:var(--faint); max-width:44ch}
.fc-spec-sec{padding-block:clamp(34px,5vw,68px)}
.fc-spec-g{display:grid;gap:clamp(20px,3.4vw,42px)}
@media(min-width:820px){
  .fc-spec-g{grid-template-columns:1.15fr .85fr}
}
@media(prefers-reduced-motion:reduce){
  .js .fc-st .fc-rail img{filter:none;transition:none}
  .fc-st::before{transition:none;transform:scaleX(1)}
}

/* The footnote is the port's own: the static band ends with the last stop. */
.pc-foot{margin-top:clamp(20px,3vw,34px);font-size:12.5px;line-height:1.7;color:var(--sub)}
.pc-foot p{margin:0 0 8px}
.pc-foot p:last-child{margin-bottom:0}
/* END_SECTION:pg-process */

/* START_SECTION:pg-register (INDEX:30) */
/* ═══ Register ═══════════════════════════════════════════ */
.pg-reg{padding-block:clamp(38px,6vw,92px)}
.pg-reg--tint{background:var(--gray)}
.pg-reg--sunk{background:var(--sunk)}
.pg-reg--dark{background:var(--brand-dark);color:#fff}
.pg-reg--deep{background:var(--brand-deep);color:#fff}
.pg-reg-rule{border:0;border-top:1px solid var(--line);margin:0 0 clamp(22px,3vw,38px)}
.pg-reg--dark .pg-reg-rule{border-top-color:rgba(255,255,255,.2)}

.pg-reg-head{margin-bottom:clamp(20px,3vw,36px);max-width:70ch}
.pg-reg-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 10px;opacity:.62}
.pg-reg-h{margin:0 0 12px}
.pg-reg-note{margin:0;max-width:60ch;line-height:1.72}
.pg-reg-note p{margin:0 0 8px}
.pg-reg-note p:last-child{margin-bottom:0}
/* Square means stamped on, round means clickable — the site's graphic convention */
.pg-reg-stamp{display:inline-block;margin-top:12px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border:1px solid currentColor;opacity:.7}
.pg-reg-stamp--solid{background:var(--ink);color:var(--paper);border-color:var(--ink);opacity:1}

.pg-reg-list{margin:0;padding:0;list-style:none;display:grid;gap:0;
  border-top:1px solid var(--line)}
.pg-reg--dark .pg-reg-list{border-top-color:rgba(255,255,255,.2)}
.pg-reg-row{display:grid;gap:4px clamp(16px,3vw,40px);
  padding-block:clamp(12px,1.8vw,18px);border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,1fr)}
.pg-reg--dark .pg-reg-row{border-bottom-color:rgba(255,255,255,.2)}
.pg-reg-row.is-em{background:var(--brand-tint)}
.pg-reg-lab{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.62;display:flex;align-items:baseline;
  gap:8px;flex-wrap:wrap}
.pg-reg-val{margin:0;font-size:14px;line-height:1.6}
.pg-reg-fig{font-family:var(--bebas);font-size:clamp(24px,3.4vw,38px);line-height:1}
.pg-reg-unit{font-family:var(--mono);font-size:11px;opacity:.6;margin-left:6px}
.pg-reg-sub{margin:0;font-size:12.5px;line-height:1.6;opacity:.7}
.pg-reg-dec{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.5}
/* Status tag: held, on file, or not held — three states, readable at a glance */
.pg-reg-st{font-style:normal;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor}
.pg-reg-st--none{opacity:.55}

dt.pg-reg-year{margin:0;font-family:var(--bebas);font-size:clamp(24px,3.6vw,40px);line-height:1;
  color:var(--brand)}
.pg-reg--dark .pg-reg-year{color:#fff}
dd.pg-reg-ev{margin:0;font-size:14px;line-height:1.66;max-width:52ch}

/* Grouped sub-registers: the contact page's three desks. */
.pg-reg-groups{display:grid;gap:clamp(20px,3vw,38px)}
.pg-reg-group{min-width:0}
.pg-reg-gh{font-family:var(--bebas);font-weight:400;font-size:clamp(19px,2.4vw,25px);
  line-height:1.06;letter-spacing:.03em;color:var(--ink);margin:0 0 12px;
  padding-bottom:10px;border-bottom:2px solid var(--ink)}
.pg-reg-group.k-con .pg-reg-gh{border-bottom-color:var(--con)}
.pg-reg-group.k-dis .pg-reg-gh{border-bottom-color:var(--dis)}
.pg-reg-group.k-own .pg-reg-gh{border-bottom-color:var(--own)}
.pg-reg--dark .pg-reg-gh,.pg-reg--deep .pg-reg-gh{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.pg-reg-gl{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:12.5px;font-weight:600}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:860px){
  .pg-reg-groups{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2.4vw,34px)}
}

.pg-reg-tw{overflow-x:auto}
.pg-reg-t{width:100%;border-collapse:collapse;font-size:13px}
.pg-reg-t th,.pg-reg-t td{text-align:left;padding:10px 12px;
  border-bottom:1px solid var(--line);vertical-align:top}
.pg-reg-t thead th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.62;border-bottom:2px solid var(--ink)}
.pg-reg-t tbody th{font-weight:600;color:var(--ink)}
/* The note sits under the value rather than beside it — a spec sentence in the middle
   column would otherwise force the third column off the page on a phone. */
.pg-reg-tsub{display:block;font-size:12px;line-height:1.6;opacity:.72;padding-top:4px}
.pg-reg-t .pg-reg-st{display:inline-flex;margin:0 0 5px}
/* ⚠ A dark table needs its own borders and heading rule: --line and --ink are the
   light-ground tokens, and on brand-dark they come out near-invisible and near-black. */
.pg-reg--dark .pg-reg-t th,.pg-reg--dark .pg-reg-t td,
.pg-reg--deep .pg-reg-t th,.pg-reg--deep .pg-reg-t td{border-bottom-color:rgba(255,255,255,.18)}
.pg-reg--dark .pg-reg-t thead th,.pg-reg--deep .pg-reg-t thead th{
  border-bottom-color:rgba(255,255,255,.55)}
.pg-reg--dark .pg-reg-t tbody th,.pg-reg--deep .pg-reg-t tbody th{color:#fff}

.pg-reg-callout{margin-top:clamp(18px,2.6vw,28px);padding:16px 18px;
  background:var(--sunk);border-left:3px solid var(--ink);
  font-size:13.5px;line-height:1.72}
.pg-reg-callout p{margin:0}
.pg-reg-prices{margin-top:clamp(20px,3vw,34px);padding:clamp(16px,2.4vw,24px);
  border:1px solid var(--line)}
.pg-reg-ph{margin:0 0 8px;font-size:14px}
.pg-reg-pn{font-size:12.5px;line-height:1.66;opacity:.75}
.pg-reg-pn p,.pg-reg-pf p{margin:0}
.pg-reg-bands{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.pg-reg-bands li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-block:9px;border-bottom:1px solid var(--line)}
.pg-reg-bands b{flex:1 1 12em;font-weight:600;font-size:13px}
.pg-reg-alt{opacity:.6}
.pg-reg-pf{margin-top:12px;font-size:11.5px;line-height:1.6;opacity:.65}
.pg-reg-foot{margin-top:clamp(18px,2.6vw,26px);font-size:12.5px;line-height:1.75;
  opacity:.72;max-width:74ch}
.pg-reg-foot p{margin:0 0 8px}
.pg-reg-foot p:last-child{margin-bottom:0}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:760px){
  .pg-reg-row{grid-template-columns:minmax(0,13em) minmax(0,1fr);align-items:baseline}
  .pg-reg-sub,.pg-reg-dec{grid-column:2}
  .pg-reg--timeline .pg-reg-row{grid-template-columns:minmax(0,4.4em) minmax(0,1fr)}
  .pg-reg-head--rail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    gap:clamp(20px,4vw,52px);align-items:start;max-width:none}
}
/* END_SECTION:pg-register */

/* START_SECTION:pg-steps (INDEX:31) */
/* ═══ Numbered steps ═════════════════════════════════════ */
.pg-steps{padding-block:clamp(38px,6vw,92px)}
.pg-steps--tint{background:var(--gray)}
.pg-steps--sunk{background:var(--sunk)}
.pg-steps--dark{background:var(--brand-dark);color:#fff}
.pg-steps-head{max-width:62ch;margin-bottom:clamp(20px,3vw,34px)}
.pg-steps-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 12px;opacity:.62}
.pg-steps-l{list-style:none;margin:0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--line)}
.pg-steps--dark .pg-steps-l{border-top-color:rgba(255,255,255,.2)}
.pg-steps-l li{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);
  padding-block:clamp(12px,1.8vw,18px);border-bottom:1px solid var(--line)}
.pg-steps--dark .pg-steps-l li{border-bottom-color:rgba(255,255,255,.2)}
.pg-steps-n{font-family:var(--bebas);font-size:clamp(18px,2.4vw,26px);
  letter-spacing:.06em;flex:0 0 auto;min-width:2em;opacity:.45}
.pg-steps-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.pg-steps-t{font-size:14px;font-weight:600;line-height:1.4}
.pg-steps-x{font-size:13.5px;line-height:1.66;opacity:.82;max-width:56ch}
.pg-steps-m{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.55}
.pg-steps-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,2.8vw,30px)}
.pg-steps-foot{margin-top:clamp(16px,2.4vw,24px);font-size:12.5px;line-height:1.72;
  opacity:.72;max-width:72ch}
.pg-steps-foot p{margin:0}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:820px){
  .pg-steps-l--columns{grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:0;column-gap:clamp(20px,3vw,44px)}
  .pg-steps-l--columns li{border-top:1px solid var(--line);border-bottom:0;
    align-items:flex-start;flex-direction:column;gap:8px}
  .pg-steps--dark .pg-steps-l--columns li{border-top-color:rgba(255,255,255,.2)}
}
@media(max-width:640px){
  .pg-steps-acts .btn{flex:1 1 auto;justify-content:center}
}
/* END_SECTION:pg-steps */

/* START_SECTION:pr-idx (INDEX:32) */
/* ── the factory pointer, from site/assets/css/products.css ── */
.pr-specln{background:var(--gray);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(18px,2.4vw,26px) 0}
.pr-specln-in{display:flex;align-items:center;justify-content:space-between;
  gap:14px clamp(20px,4vw,44px);flex-wrap:wrap}
.pr-specln p{font-size:13.5px;line-height:1.7;color:var(--body);max-width:62ch;margin:0}
.pr-specln .ul{font-size:13px;white-space:nowrap}

/* ═══ Catalogue ══════════════════════════════════════════
   Transcribed from site/assets/css/products.css. */

/* Two views. ⚠ The design cards are hidden by DISPLAY, never by a hidden attribute —
   that is deliberate in the original so crawlers and a visitor without JavaScript still
   reach all 65. */
[data-pr-view="all"] [data-only="line"],
[data-pr-view="line"] [data-only="all"]{display:none}
[data-pr-view="all"] .pr-idx{display:none}

.pr-idx-sec{padding-block:0}
.pr-trust{margin-top:clamp(16px,2vw,22px);display:flex;align-items:flex-start;gap:8px;
  font-size:12.5px;line-height:1.6;color:var(--sub);max-width:82ch}
.pr-trust-s{width:12px;height:12px;flex:0 0 auto;margin-top:3px;color:var(--brand)}
.pr-trust b{color:var(--ink);font-weight:600}

/* ── landing: three line cards ── */
.pl-sec{border-top:1px solid var(--line);padding-block:clamp(34px,5.4vw,84px);
  overflow:hidden}
.pl-sec:first-of-type{border-top:0}
.pl-in{display:grid;gap:clamp(20px,3.4vw,56px);align-items:center}
.pl-fig{margin:0;overflow:hidden;background:var(--sunk);aspect-ratio:4/3}
.pl-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.1s var(--ease)}
/* ⚠ Fail-safe reveal: if the animation never fires it is a slightly enlarged picture,
   still visible. Never hide a whole block behind opacity:0. */
.js .pl-fig.in img{transform:none}
.pl-txt{min-width:0}
.pl-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px}
/* The line name is the largest type on the screen — it is an entrance, not a card title */
.pl-n{font-family:var(--bebas);font-weight:400;font-size:clamp(46px,9vw,104px);
  line-height:.86;letter-spacing:.025em;color:var(--ink);margin:0 0 10px}
.pl-cnt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--faint);margin:0 0 14px}
.pl-cnt b{font-family:var(--bebas);font-size:26px;color:var(--brand);line-height:1}
.pl-basis{color:var(--sub);font-family:var(--sans);font-size:11.5px}
.pl-l{font-size:13.5px;line-height:1.68;color:var(--sub);max-width:46ch;margin:0 0 16px}
.pl-ss{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0}
/* Square stamps: printed on, not clickable */
.pl-s{display:inline-flex;align-items:baseline;gap:6px;border-radius:2px;
  padding:5px 9px;background:var(--sunk);color:var(--sub);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}
.pl-s i{font-style:normal;color:var(--faint)}
.pl-go .ar{transition:transform .3s var(--ease)}
.pl-go:hover .ar{transform:translateX(3px)}

/* ── in-line: the line head, and the series chips ──
   Verbatim from site/assets/css/products.css.

   ⚠ .pr-lh-bg has NO opacity. An earlier version of this file added opacity:.5, which
      over the brand-dark backing and under the scrim left the cover photograph invisible
      — the band read as a flat black box, which is exactly what the client reported. The
      gradient alone is what darkens it enough for white type. */
.pr-browse{border-bottom:1px solid var(--line)}
.pr-lh[hidden]{display:none}
.pr-lh-hero{position:relative;overflow:hidden;background:var(--brand-dark);
  min-height:clamp(260px,34vw,400px);display:flex;align-items:flex-end}
.pr-lh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 46%}
.pr-lh-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,.3) 40%,
    rgba(11,11,11,.82) 100%)}
.pr-lh-in{position:relative;z-index:2;width:100%;
  padding-block:clamp(22px,3vw,40px)}
.pr-back{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:16px;transition:color .2s}
.pr-back:hover{color:#fff}
.pr-lh-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 10px}
.pr-lh-n{font-family:var(--bebas);font-weight:400;font-size:clamp(42px,8vw,92px);
  line-height:.86;letter-spacing:.025em;color:#fff;margin:0 0 8px}
.pr-lh-c{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6);margin:0 0 12px}
.pr-lh-c b{font-family:var(--bebas);font-size:26px;color:#fff;line-height:1;
  margin-right:4px}
.pr-lh-b{font-family:var(--sans);font-size:11.5px;color:rgba(255,255,255,.66)}
.pr-lh-l{font-size:13.5px;line-height:1.68;color:rgba(255,255,255,.78);
  max-width:52ch;margin:0}

.pr-sts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1);
  padding:clamp(16px,2.2vw,22px) var(--gut)}
.pr-sts::-webkit-scrollbar{display:none}
.pr-st{flex:0 0 auto;appearance:none;cursor:pointer;font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 12px;border-radius:2px;border:1px solid var(--line2);
  background:var(--paper);color:var(--body);
  transition:background .16s,border-color .16s,color .16s}
.pr-st i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--faint)}
.pr-st:hover{border-color:var(--ink);color:var(--ink)}
.pr-st.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.pr-st.is-on i{color:rgba(255,255,255,.68)}
.pr-st:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── the grid ── */
.pr-idx{padding-block:clamp(20px,3vw,40px) clamp(40px,6vw,80px)}
.pr-grp{padding-block:clamp(22px,3vw,40px);border-top:1px solid var(--line)}
.pr-grp:first-child{border-top:0;padding-top:clamp(8px,1.4vw,16px)}
.pr-grp[hidden]{display:none}
.pr-grp-h{display:grid;gap:4px 14px;margin-bottom:clamp(14px,2vw,22px);
  grid-template-columns:auto 1fr}
.pr-grp-n{font-family:var(--bebas);font-weight:400;font-size:clamp(22px,3.4vw,32px);
  letter-spacing:.03em;color:var(--ink);margin:0;line-height:1.04}
.pr-grp-c{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  align-self:baseline;white-space:nowrap}
.pr-grp-l{grid-column:1/-1;font-size:12.5px;line-height:1.62;color:var(--sub);
  max-width:56ch;margin:0}
.pr-grid{margin-top:clamp(26px,3.4vw,40px);display:grid;gap:clamp(18px,2.2vw,30px);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.pr-m{display:block;text-decoration:none;color:inherit;min-width:0}
/* 4:3, not 1:1 — the gate renders are landscape, and a square frame crops the head and
   the base off the very thing being shown. */
.pr-m-img{display:block;position:relative;overflow:hidden;
  aspect-ratio:4/3;background:var(--sunk)}
.pr-m-img img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.pr-m-img .pr-b{opacity:0}
.pr-m:hover .pr-m-img .pr-a{opacity:0}
.pr-m:hover .pr-m-img .pr-b{opacity:1}
.pr-m:hover .pr-m-img img{transform:scale(1.04)}
.pr-m-foot{display:block;padding-top:11px}
.pr-m-foot .code{display:block;font-size:12.5px;letter-spacing:.05em;color:var(--ink)}
/* The series name is a caption, not a heading — as ten headings it cut the grid up. */
.pr-m-s{display:block;font-style:normal;margin-top:2px;
  font-size:11.5px;color:var(--faint)}
.pr-m:hover .code{color:var(--brand)}
.pr-m:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.pr-empty{margin-top:40px;color:var(--faint);font-size:14px}
.pr-empty[hidden]{display:none}
.pr-idx-foot{font-size:12.5px;line-height:1.72;opacity:.72;max-width:82ch;
  padding-bottom:clamp(20px,3vw,36px)}
.pr-idx-foot p{margin:0}

/* Responsive rules come AFTER the base rules — media queries add no specificity */
@media(min-width:860px){
  .pl-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  /* Even sections swap sides, so three of them do not read identically */
  .pl-sec:nth-of-type(even) .pl-fig{order:2}
}
@media(max-width:619px){.pl-fig{aspect-ratio:3/2}}
@media(max-width:520px){
  .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pr-m-foot .code{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .pr-m-img img,.pl-fig img{transition:none}
  .pr-m:hover .pr-m-img img{transform:none}
}
/* END_SECTION:pr-idx */

/* START_SECTION:product (INDEX:33) */
.pd{padding-block:clamp(28px,5vw,64px) clamp(48px,8vw,96px)}
.pd-in{display:grid;gap:clamp(22px,3.4vw,46px);align-items:start}
@media(min-width:900px){
  .pd-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.pd-shots{display:grid;gap:clamp(10px,1.6vw,16px);min-width:0}
.pd-shot{margin:0}
.pd-shot img{width:100%;height:auto;display:block;background:var(--sunk)}
.pd-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px}
.pd-h{margin:0 0 6px;letter-spacing:.02em}
.pd-series{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--sub);
  margin:0 0 18px}
.pd-desc{font-size:13.5px;line-height:1.72;color:var(--body);max-width:56ch}
.pd-desc p{margin:0 0 10px}
.pd-note{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--faint);max-width:52ch}
.pd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pd-back{margin:16px 0 0;font-size:12.5px}
/* END_SECTION:product */

/* START_SECTION:rq-quote (INDEX:34) */
/* ═══════════════════════════════════════════════════════════
   询价 —— 全站唯一出口
   版式概念：一张「工单」。左栏是常驻的询价清单（docket），
   右栏是三步表单，横向滑动切换，顶部一条进度线。
   其它页是「读」，这一页是「填」：窄栏、密排、状态明确。

   2026-08 重排：第一步变成赵总指定的三个问题（.rq-ask），末尾挂一张
   .rq-hand 出口卡把三个答案拼成一句话推给 WhatsApp；左栏顶部也常驻一颗
   .rq-dk-wa。表单降级成备选，视觉语言不动。

   注意：
   · 没有 JS 时三个 pane 直接竖着排开（.js 才启用滑轨）。
   · 面板靠 transform 切换，不用 display:none —— 高度由 JS 写在 .rq-stage 上。
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · 深色报头 ─────────────────────────────────────────── */
.rq-mast{position:relative;background:var(--brand-dark);color:rgba(255,255,255,.74);
  padding:calc(var(--nav-h) + clamp(38px,6vw,72px)) 0 clamp(38px,5vw,66px);overflow:hidden}
.rq-mast::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 92px);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 78%)}
.rq-mast>.wrap{position:relative}

.rq-dateline{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:clamp(22px,3.4vw,34px);
  color:rgba(255,255,255,.5)}
.rq-dateline span{position:relative;padding-left:15px;letter-spacing:.11em;font-size:10.5px}
.rq-dateline span::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;
  background:currentColor}

/* 2026-08 精简：右侧的 .rq-plate 图纸标题栏整块删了（五行全是别处已有的复述，
   手机端它塌成通栏，把 WhatsApp 按钮往下顶四分之一屏）。报头收成单列。 */
.rq-head{display:grid;grid-template-columns:minmax(0,1fr);align-items:end}

.rq-h1{color:var(--paper);font-size:clamp(40px,7.6vw,86px)}
.rq-h1 span{display:block}
.rq-lede{color:rgba(255,255,255,.72);margin-top:clamp(16px,2.2vw,24px);max-width:52ch}
.rq-lede b{color:var(--paper);font-weight:600}

/* ── 2 · 进度条（吸顶）────────────────────────────────────── */
.rq-bar{position:sticky;top:64px;z-index:40;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.rq-track{position:absolute;left:0;right:0;top:0;height:2px;background:var(--sunk)}
.rq-fill{display:block;height:100%;width:calc(var(--p,4) * 1%);background:var(--brand);
  transition:width .55s var(--ease)}
.rq-bar-in{display:flex;align-items:center;gap:16px}
.rq-steps{list-style:none;margin:0;padding:0;display:flex;flex:1;min-width:0}
.rq-steps li{flex:1;min-width:0;display:flex}
.rq-step{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:52px;
  padding:8px 10px 8px 0;background:none;border:0;cursor:default;text-align:left;
  color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.04em;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .35s var(--ease),border-color .35s var(--ease)}
.rq-step b{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
  border:1px solid currentColor;border-radius:50%;font-family:var(--mono);font-size:10.5px;
  letter-spacing:0;transition:background .35s var(--ease),color .35s var(--ease),
  border-color .35s var(--ease)}
.rq-step i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-step.is-done{color:var(--body);cursor:pointer}
.rq-step.is-done b{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.rq-step.is-done:hover{color:var(--brand)}
.rq-step.is-on{color:var(--brand);border-bottom-color:var(--brand)}
.rq-step.is-on b{border-color:var(--brand);color:var(--brand)}
.rq-bar-tag{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--con);border:1px solid var(--con);padding:3px 9px}
@media(max-width:860px){.rq-bar-tag{display:none}}
@media(max-width:600px){
  .rq-step i{display:none}
  .rq-step{flex:0 0 auto;padding-right:0;min-height:48px}
  .rq-steps li{flex:0 0 auto;margin-right:18px}
  .rq-steps li:last-child{margin-right:0}
  .rq-steps{flex:1}
}

/* ── 3 · 骨架：左清单 / 右表单 ────────────────────────────── */
.rq-body{padding:clamp(30px,4.4vw,58px) 0 clamp(60px,8vw,104px)}
.rq-grid{display:grid;grid-template-columns:288px minmax(0,1fr);gap:clamp(24px,3.6vw,54px);
  align-items:start}
.rq-main{min-width:0}
@media(max-width:980px){
  .rq-grid{grid-template-columns:minmax(0,1fr)}
  .rq-docket{order:2}
  .rq-main{order:1}
}

/* ── 4 · 询价清单 ─────────────────────────────────────────── */
.rq-docket{border:1px solid var(--line);background:var(--gray);
  border-top:2px solid var(--brand)}
@media(min-width:981px){.rq-docket{position:sticky;top:136px}}
.rq-dk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:15px 18px;border-bottom:1px solid var(--line2)}
.rq-dk-head h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.rq-dk-n{font-family:var(--mono);font-size:11px;color:var(--sub);letter-spacing:.04em}
.rq-dk-sec{padding:16px 18px;border-bottom:1px solid var(--line)}
/* 置顶的真出口。表单是备选，WhatsApp 才是主路径，所以它坐在最上面 */
.rq-dk-talk{background:var(--paper)}
.rq-dk-wa{width:100%;justify-content:center;margin-bottom:13px}
/* 邮箱地址比默认那一行宽，给这一块把键列收窄一点，别在 @ 后面断行 */
.rq-dk-talk .rq-sheet li{grid-template-columns:58px minmax(0,1fr);gap:9px}
.rq-dk-talk .rq-sheet .v{font-size:11.5px}
.rq-dk-talk .rq-sheet a.v{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.rq-dk-sec:last-child{border-bottom:0}
.rq-dk-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin-bottom:11px}

.rq-list{list-style:none;margin:0;padding:0}
.rq-list li{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:10px;
  align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.rq-list li:first-child{padding-top:0}
.rq-list li:last-child{border-bottom:0;padding-bottom:0}
.rq-list .th{width:34px;height:34px;background:var(--sunk);overflow:hidden}
.rq-list .th img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.rq-list .c{display:block;font-family:var(--mono);font-size:11.5px;color:var(--brand);
  letter-spacing:.02em}
.rq-list .t{display:block;font-size:12.5px;color:var(--ink);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis}
.rq-x{width:34px;height:44px;background:none;border:0;color:var(--faint);cursor:pointer;
  display:grid;place-items:center;transition:color .25s}
.rq-x:hover{color:var(--con)}
.rq-x svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none}

.rq-empty p{font-size:12.5px;line-height:1.65;color:var(--sub)}
.rq-empty a{color:var(--brand);font-weight:600}
.rq-seed{margin-top:12px;background:none;border:1px dashed var(--line2);color:var(--sub);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  min-height:44px;width:100%;padding:0 10px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s}
.rq-seed:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint)}
.rq-clear{display:inline-flex;align-items:center;margin-top:6px;background:none;border:0;
  padding:0;min-height:44px;font-size:11.5px;color:var(--faint);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.rq-clear:hover{color:var(--con)}

/* 随填随显的工单摘要 */
.rq-sheet{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rq-sheet li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;
  font-size:12.5px;align-items:baseline}
.rq-sheet dt,.rq-sheet .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
.rq-sheet .v{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.rq-sheet .v.pending{color:var(--faint);font-weight:400}
.rq-dk-note{font-size:11px;line-height:1.6;color:var(--faint)}
.rq-dk-note a{color:var(--sub);text-decoration:underline;text-underline-offset:2px}

/* ── 5 · 步骤舞台 ─────────────────────────────────────────── */
.rq-stage{position:relative}
.js .rq-stage{overflow:hidden;transition:height .55s var(--ease)}
.js .rq-panes{display:flex;align-items:flex-start;width:300%;transition:transform .55s var(--ease);
  transform:translateX(calc(var(--i,0) * -33.3333%))}
.rq-pane{padding:2px 2px 4px}
.js .rq-pane{width:33.3333%;flex:0 0 33.3333%}
.js .rq-pane[aria-hidden="true"]{visibility:hidden;transition:visibility 0s linear .55s}
.js .rq-pane[aria-hidden="false"]{visibility:visible;transition:visibility 0s}
@media(prefers-reduced-motion:reduce){
  .js .rq-panes{transition:none}
  .js .rq-stage{transition:none}
}
/* 没有 JS：三段竖排，各自带一条分隔 */
html:not(.js) .rq-pane+.rq-pane{border-top:1px solid var(--line);margin-top:34px;padding-top:34px}

.rq-q{font-family:var(--bebas);font-size:clamp(26px,3.6vw,40px);letter-spacing:.03em;
  color:var(--ink);line-height:1.02;margin:0 0 9px;margin-bottom:clamp(18px,2.6vw,26px)}
/* 后两步还留着 .rq-say，两个下边距会叠 —— 标题后面紧跟 .rq-say 时收回去 */
.rq-q:has(+ .rq-say){margin-bottom:6px}
.rq-say{font-size:14px;color:var(--sub);max-width:56ch;margin-bottom:clamp(22px,3vw,32px)}

/* ── 6 · 身份三选一（横排工单行）─────────────────────────── */
.rq-who{display:grid;gap:12px;border:0;padding:0;margin:0;min-width:0}
.rq-who legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.rq-row{--k:var(--brand);--kt:var(--brand-tint);
  display:block;position:relative;background:var(--paper);border:1px solid var(--line);
  cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),
  box-shadow .3s var(--ease),transform .3s var(--ease)}
.rq-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--k);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.rq-row:hover{border-color:var(--line2);transform:translateY(-1px);
  box-shadow:0 14px 34px -26px rgba(24,24,24,.55)}
.rq-row input{position:absolute;opacity:0;width:1px;height:1px}
.rq-row-in{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;
  padding:18px 20px 18px 17px;align-items:start}
.rq-row-i{width:34px;height:34px;stroke:var(--k);fill:none;stroke-width:1.2;
  opacity:.85;transition:opacity .3s}
.rq-row-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.rq-row-t{display:block;font-family:var(--bebas);font-size:23px;letter-spacing:.04em;
  color:var(--ink);line-height:1}
.rq-row-d{display:block;font-size:13px;color:var(--sub);line-height:1.55;margin-top:5px;
  max-width:44ch}
.rq-tick{width:22px;height:22px;border:1px solid var(--line2);border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;margin-top:3px;
  transition:border-color .3s,background .3s}
.rq-tick svg{width:11px;height:11px;stroke:var(--paper);stroke-width:2;fill:none;
  opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.rq-row:has(input:checked){border-color:var(--k);background:var(--kt)}
.rq-row:has(input:checked)::before{transform:scaleY(1)}
.rq-row:has(input:checked) .rq-tick{background:var(--k);border-color:var(--k)}
.rq-row:has(input:checked) .rq-tick svg{opacity:1;transform:none}
.rq-row:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
/* :has 不支持时的兜底 —— JS 会加 .on */
.rq-row.on{border-color:var(--k);background:var(--kt)}
.rq-row.on::before{transform:scaleY(1)}
.rq-row.on .rq-tick{background:var(--k);border-color:var(--k)}
.rq-row.on .rq-tick svg{opacity:1;transform:none}
@media(max-width:560px){
  .rq-row-in{grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"ico tick" "txt txt";gap:12px;padding:16px 16px 18px 14px}
  .rq-row-i{grid-area:ico;width:28px;height:28px}
  .rq-row-in>span:not(.rq-tick){grid-area:txt;min-width:0}
  .rq-tick{grid-area:tick;justify-self:end;margin:0}
  .rq-row-d{max-width:none}
}

/* ── 6b · 第一步的三个问题 ────────────────────── */
.rq-ask{margin-bottom:clamp(24px,3.4vw,36px)}
.rq-ask-h{display:flex;align-items:baseline;gap:11px;margin-bottom:14px;padding-bottom:9px;
  border-bottom:1px solid var(--line)}
.rq-ask-n{flex:0 0 auto;font-size:10px;letter-spacing:.13em;color:var(--brand)}
.rq-ask-h b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35}
.rq-ask>.rq-f{max-width:430px}
.rq-ask>.rq-f.full{max-width:none}

/* 价格带。赵总给的是定制区间，不是报价——美元换算必须把汇率写出来 */
.rq-price{list-style:none;margin:16px 0 0;padding:0;border:1px solid var(--line);
  background:var(--paper)}
.rq-price li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 16px;
  align-items:baseline;padding:10px 14px;border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.rq-price li:last-child{border-bottom:0}
.rq-price li.on{background:var(--brand-tint)}
.rq-price .p{font-size:13px;font-weight:700;color:var(--ink)}
.rq-price .cny{font-family:var(--mono);font-size:12.5px;color:var(--brand);text-align:right;
  white-space:nowrap}
.rq-price .usd{font-family:var(--mono);font-size:11.5px;color:var(--faint);text-align:right;
  white-space:nowrap;min-width:14ch}
@media(max-width:560px){
  .rq-price li{grid-template-columns:minmax(0,1fr) auto}
  .rq-price .usd{grid-column:2;min-width:0}
}
.rq-price-n{margin-top:11px;font-size:11.5px;line-height:1.65;color:var(--faint)}
.rq-price-n b{color:var(--body);font-weight:600}
.rq-price-s{margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* 主出口：三个答案拼成的那句话，一键丢进 WhatsApp */
.rq-hand{border:1px solid var(--brand-line);border-left:3px solid var(--brand);
  background:var(--brand-tint);padding:clamp(16px,2.4vw,22px);
  margin-top:clamp(24px,3.4vw,34px)}
.rq-hand-k{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin-bottom:10px}
.rq-hand-msg{font-size:14.5px;line-height:1.6;font-weight:600;color:var(--ink);
  border-left:2px solid var(--brand-line);padding-left:13px;overflow-wrap:anywhere}
.rq-hand-a{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:17px}
.rq-hand-ic{width:15px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4;flex:0 0 auto}
.rq-hand-n{margin-top:13px;font-size:11.5px;line-height:1.7;color:var(--sub)}
.rq-hand-n b{color:var(--ink);font-weight:600}
.rq-hand-n .code{color:var(--brand)}

/* ── 7 · 字段 ─────────────────────────────────────────────── */
.rq-set{display:none}
.rq-set.on{display:block}
html:not(.js) .rq-set{display:block;margin-bottom:26px}
html:not(.js) .rq-set::before{content:attr(data-title);display:block;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:12px}

.rq-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  gap:18px 20px;border:0;padding:0;margin:0;min-width:0}
.rq-fields legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rq-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.rq-f.full{grid-column:1/-1}
.rq-f>label:not(.rq-drop),.rq-f>.lab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.rq-f em{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--faint);font-weight:600}
.rq-f em.req{color:var(--con)}
.rq-in{font:inherit;font-size:14.5px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line2);padding:11px 13px;min-height:46px;width:100%;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
textarea.rq-in{min-height:106px;resize:vertical;line-height:1.6}
select.rq-in{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),
  linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px,calc(100% - 12px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.rq-in:hover{border-color:var(--line2)}
.rq-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.rq-in::placeholder{color:var(--faint)}
.rq-hint{font-size:11.5px;color:var(--faint);line-height:1.55}
.rq-hint .code{color:var(--sub)}
.rq-err{font-size:11.5px;color:var(--con);font-weight:600;letter-spacing:.02em}
.rq-f.bad .rq-in{border-color:var(--con)}
.rq-f.bad>label{color:var(--con)}

/* 尺寸对：宽 × 高 */
.rq-dim{display:grid;grid-template-columns:1fr 18px 1fr;gap:8px;align-items:center}
.rq-dim .x{text-align:center;color:var(--faint);font-size:13px}

/* 上传 */
.rq-drop{position:relative;display:block;border:1px dashed var(--line2);background:var(--paper);
  padding:20px 18px;text-align:center;cursor:pointer;
  transition:border-color .25s,background .25s}
.rq-drop:hover,.rq-drop.over{border-color:var(--brand);background:var(--brand-tint)}
.rq-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.rq-drop svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.3;
  margin:0 auto 8px}
.rq-drop b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.rq-drop b u{text-decoration-thickness:1px;text-underline-offset:2px}
.rq-drop span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--faint);margin-top:5px}
.rq-files{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:5px}
.rq-files li{display:flex;justify-content:space-between;gap:12px;font-size:12px;
  color:var(--body);border-bottom:1px solid var(--line);padding-bottom:5px}
.rq-files .sz{font-family:var(--mono);font-size:11px;color:var(--faint);flex:0 0 auto}

/* 复选芯片 */
.rq-chips{display:flex;flex-wrap:wrap;gap:8px}
.rq-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;
  padding:0 16px;border:1px solid var(--line2);background:var(--paper);cursor:pointer;
  font-size:12.5px;color:var(--body);transition:border-color .25s,background .25s,color .25s}
.rq-chip input{position:absolute;opacity:0;width:1px;height:1px}
.rq-chip:hover{border-color:var(--brand-line)}
.rq-chip:has(input:checked){border-color:var(--brand);background:var(--brand-tint);
  color:var(--brand);font-weight:600}
.rq-chip.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand);font-weight:600}
.rq-chip:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.rq-chip .cd{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--faint);
  margin-left:8px}
.rq-chip:has(input:checked) .cd,.rq-chip.on .cd{color:var(--brand)}

/* 单选一行（是否私标）*/
.rq-radios{display:flex;flex-wrap:wrap;gap:8px}
.rq-radios .rq-chip{min-width:96px;justify-content:center}

/* 说明块 */
.rq-flag{grid-column:1/-1;border-left:2px solid var(--con);background:var(--con-tint);
  padding:13px 15px;font-size:12.5px;line-height:1.65;color:var(--body)}
.rq-flag b{color:var(--ink)}

/* ── 8 · 步进导航 ─────────────────────────────────────────── */
.rq-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,3.4vw,36px);
  padding-top:20px;border-top:1px solid var(--line)}
.rq-back{background:none;border:0;color:var(--sub);font-size:12.5px;cursor:pointer;
  min-height:46px;padding:0 4px;display:inline-flex;align-items:center;gap:8px;
  transition:color .25s}
.rq-back svg{width:13px;height:9px;stroke:currentColor;stroke-width:1.4;fill:none;
  transition:transform .3s var(--ease)}
.rq-back:hover{color:var(--ink)}
.rq-back:hover svg{transform:translateX(-3px)}
.rq-next[disabled]{opacity:.42;cursor:not-allowed;pointer-events:none}
.rq-tip{font-size:11.5px;color:var(--faint);flex:1 1 180px;min-width:0;line-height:1.5}

/* ── 9 · 完成态 ───────────────────────────────────────────── */
.rq-done{display:none}
.rq-done.on{display:block}
.js .rq-done.on{animation:rq-in .6s var(--ease) both}
@keyframes rq-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rq-done-in{border:1px solid var(--brand-line);background:var(--brand-tint);
  padding:clamp(24px,3.6vw,42px)}
.rq-seal{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.rq-seal svg{width:44px;height:44px;stroke:var(--brand);fill:none;stroke-width:1.3;
  flex:0 0 auto}
.js .rq-done.on .rq-seal svg circle,.js .rq-done.on .rq-seal svg path{
  stroke-dasharray:180;stroke-dashoffset:180;animation:rq-draw 1.1s var(--ease) .15s forwards}
@keyframes rq-draw{to{stroke-dashoffset:0}}
.rq-seal-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--con);border:1px solid var(--con);padding:3px 9px;display:inline-block}
.rq-done h2{font-family:var(--bebas);font-size:clamp(28px,4vw,44px);letter-spacing:.03em;
  line-height:1.02;color:var(--ink);margin-bottom:12px}
.rq-done>.rq-done-in>p{font-size:14px;color:var(--body);max-width:58ch}
.rq-recap{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:16px 20px}
.rq-recap div{border-top:1px solid var(--brand-line);padding-top:9px;min-width:0}
.rq-recap dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sub);margin-bottom:4px}
.rq-recap dd{margin:0;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.5;
  overflow-wrap:anywhere}
.rq-recap dd.pending{color:var(--faint);font-weight:400}
.rq-done-note{margin-top:24px;padding:13px 15px;background:var(--paper);
  border-left:2px solid var(--con);font-size:12.5px;line-height:1.65;color:var(--body)}
.rq-done-a{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:24px}
.rq-done-a .ul{font-size:13px}

/* ── 10 · 尾部：一条流程带 ────────────────────────────────── */
/* 2026-08 精简：.rq-after（Four things worth knowing 四张卡）和深色段的
   .rq-flow（三张流程卡）整块删了 —— 两块都是全页第三、第四次讲同样的事。
   四张卡里唯一别处没有的 EXW/DDP、HS 编码、无起订量已并进 .rq-price-s。 */

/* 定制流程条（深色段）—— 不声称几步，只把它们按顺序排出来 */
.rq-seq-w{margin-top:clamp(28px,3.8vw,46px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid rgba(255,255,255,.18)}
.rq-seq-k{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:15px}
.rq-seq{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
  counter-reset:rqs}
.rq-seq li{counter-increment:rqs;display:flex;align-items:center;gap:9px;
  padding:7px 13px 7px 10px;border:1px solid rgba(255,255,255,.18);
  font-size:12px;line-height:1.35;color:rgba(255,255,255,.8)}
.rq-seq li::before{content:counter(rqs,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
.rq-seq-n{margin-top:16px;font-size:12.5px;line-height:1.7;max-width:76ch;
  color:rgba(255,255,255,.66)}
.rq-seq-n b{color:var(--paper);font-weight:600}
/* 手机端：11 个芯片换行叠成 314px。改成一条横滑轨道（抄 factory 的 .fc-gal）。
   出血用 --gut —— base.css 的 .wrap 就是 padding-inline:var(--gut)，
   factory 里那个 --pad 根本没定义，负 margin 其实没生效。
   .rq-seq 不和 .wrap 同用，但仍然只写 margin-inline / padding-* 长写法。 */
@media(max-width:760px){
  .rq-seq{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);scroll-padding-inline:var(--gut);padding-bottom:2px}
  .rq-seq::-webkit-scrollbar{display:none}
  .rq-seq li{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}

/* ── 11 · 错峰（不能用 base 的 .d1–.d3，那三个同时是排版类）──── */
.js .rq-h1 span.rv:nth-child(2){transition-delay:.09s}
.js .rq-h1 span.rv:nth-child(3){transition-delay:.18s}
.js .rq-lede.rv{transition-delay:.26s}

/* 深色段落里的章节小标题：把基座的灰字提亮 */
.dark .sh .k{color:var(--paper);opacity:.5}
.dark .sh .note{color:rgba(255,255,255,.6)}

/* 导航 CTA 指的就是本页 —— site.js 会给它加 aria-current，
   base.css 于是把字染成品牌蓝，跟按钮底色撞成隐形。只在这一页修回来。 */
.nav .navcta[aria-current]{color:var(--paper)}
.nav .navcta[aria-current]::after{display:none}

/* ── 12 · 手机端密排（2026-08 精简）────────────────────────
   重复的整块删完之后，留白再收一档。两个这个项目踩过的坑：
   · .rq-grid 和 .wrap 是同一个元素上的两个类，这里只动 gap，
     绝不写 padding 简写 —— 写了会把 .wrap 的 padding-inline 清成 0，
     文字直接贴屏幕边，上面那条负 margin 横滑轨道还会把整页顶出横向溢出。
   · .rq-body 是 section，不带 .wrap，但一样只写 padding-top/bottom 长写法。 */
@media(max-width:700px){
  .rq-body{padding-top:24px;padding-bottom:34px}
  .rq-grid{gap:18px}
  .rq-ask{margin-bottom:20px}
}
/* END_SECTION:rq-quote */

/* START_SECTION:rs-register (INDEX:35) */
/* ── the request panel, from site/assets/css/resources.css ──
   The two `.js .rs-gate{height:0}` rules are left out on purpose: they animate a
   panel that JavaScript opens, and this one is a <details> that opens itself. */
.rs-gate{overflow:hidden}
.rs-gate-in{padding:2px 8px 22px 70px}
.rs-gl{font-size:12.5px;line-height:1.6;color:var(--sub);max-width:64ch;margin-bottom:14px}
.rs-gl b{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--brand);margin-right:8px;font-weight:700}
.rs-gl .tbd{margin-left:5px}
.rs-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px 14px;align-items:end;max-width:700px}
.rs-f{display:block;min-width:0}
.rs-f>span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.rs-f>span i{font-style:normal;opacity:.7}
.rs-f input{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line2); border-radius:2px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px; transition:border-color .25s var(--ease)}
.rs-f input::placeholder{color:var(--faint)}
.rs-f input:hover{border-color:var(--line2)}
.rs-f.err input{border-color:var(--con)}
.rs-form .btn{border-radius:2px}
.rs-err{grid-column:1/-1;margin:0;font-family:var(--mono);font-size:10.5px; letter-spacing:.06em;color:var(--con);min-height:0}
.rs-err:empty{display:none}
.rs-fine{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.04em; color:var(--faint);line-height:1.7}
.rs-ok{display:flex;align-items:flex-start;gap:10px;border-left:2px solid var(--own); padding:6px 0 6px 12px;font-size:13px;line-height:1.6;color:var(--body);max-width:64ch}
.rs-ok svg{width:15px;height:15px;flex:0 0 auto;margin-top:4px;fill:none;stroke:var(--own); stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rs-ok b{color:var(--ink);font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
@media(max-width:720px){
  .rs-form{grid-template-columns:1fr}
  .rs-form .btn{justify-content:center}
  .rs-gate-in{padding-left:12px}
}
@media(prefers-reduced-motion:reduce){
}
/* <details> supplies its own marker; the row draws its own state glyph. */
.rs-row > summary{list-style:none;cursor:pointer}
.rs-row > summary::-webkit-details-marker{display:none}
.rs-row[open] .rs-ac{transform:rotate(90deg)}
.rs-ac{transition:transform .2s var(--ease)}

/* ═══ Document register ══════════════════════════════════
   The page runs against the grain of the rest of the site on purpose: dense, tight
   leading, monospace, hairlines — a filing cabinet, not a brochure.
   Only rs- rules belonging to the cover and the register are here. */

/* One column set shared by the head row and every document row, so they line up */
.rs-head,
.rs-line{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 74px 62px 122px 34px;
  grid-template-areas:"ix nm ty sz st ac";
  align-items:center;
  gap:0 14px;
}
.rs-head .rs-ix,.rs-line .rs-ix{grid-area:ix}
.rs-head .rs-nm,.rs-line .rs-nm{grid-area:nm}
.rs-head .rs-ty,.rs-line .rs-ty{grid-area:ty}
.rs-head .rs-sz,.rs-line .rs-sz{grid-area:sz}
.rs-head .rs-st,.rs-line .rs-st{grid-area:st}
.rs-head .rs-ac,.rs-line .rs-ac{grid-area:ac}

/* Sprite */
.rs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rs-i{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ══════════ 1 · Cover ══════════ */
.rs-cover{position:relative;overflow:hidden;background:var(--gray);
  border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + clamp(38px,6vw,74px)) 0 clamp(40px,6vw,68px)}
/* Drafting grid, drawn with --line and faded by a mask — no new colour */
.rs-cover::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 62%,transparent);
          mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 62%,transparent)}
.rs-cover>.wrap{position:relative}
.rs-cover-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.82fr);
  gap:clamp(30px,5vw,66px);align-items:end}

.rs-cover-l .eyebrow{margin-bottom:14px}
.rs-cover .d1x{font-size:clamp(42px,7.4vw,90px);margin-bottom:22px}
.rs-cover-l .lede{max-width:46ch}
/* --brand-line is not defined in this theme; --line2 is the nearest token */
.rs-cover-n{margin-top:18px;max-width:52ch;font-size:13.5px;line-height:1.7;color:var(--sub);
  border-left:2px solid var(--brand-line,var(--line2));padding-left:14px}
.rs-cover-n p{margin:0}

.rs-cover-r{display:flex;flex-direction:column;gap:16px;min-width:0}
.rs-sheet{width:100%;height:auto;color:var(--line2);display:block}

/* Title block */
.rs-block{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  background:var(--paper);border:1px solid var(--line2)}
.rs-block-h{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;
  padding:9px 13px;border-bottom:1px solid var(--line2);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sub)}
.rs-block dt,.rs-block dd{border-top:1px solid var(--line);margin:0;padding:8px 13px;
  font-family:var(--mono);line-height:1.5}
.rs-block dt{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap}
.rs-block dd{font-size:12px;color:var(--ink);border-left:1px solid var(--line);
  overflow-wrap:anywhere}
.rs-block .rs-block-h+dt,.rs-block .rs-block-h+dt+dd{border-top:0}

/* ══════════ 2 · Shelf ══════════ */
.rs-reg{padding:clamp(34px,5vw,58px) 0 clamp(58px,8vw,96px)}
.rs-shelf{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:start}
.js .rs-shelf:not(.is-on){display:none}

.rs-spine{position:sticky;top:96px}
.rs-glyph{width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;margin-bottom:16px;display:block}
.rs-spine .eyebrow{display:block;margin-bottom:6px}
.rs-spine .d3{margin-bottom:12px}
.rs-sp-d{font-size:13.5px;line-height:1.65;color:var(--sub);max-width:34ch}
.rs-sp-l{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:18px}
.rs-sp-a{display:inline-block;font-size:12.5px}
.rs-sp-a::before{content:"\2192 ";color:var(--brand)}

.rs-tally{margin:20px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.rs-tally>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--line)}
.rs-tally dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.rs-tally dd{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:700}

/* ── The register itself ── */
.rs-list{min-width:0}
.rs-head{padding:0 0 8px;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint)}
.rs-rows{border-bottom:1px solid var(--line2)}
.rs-row{border-bottom:1px solid var(--line)}
.rs-row:last-child{border-bottom:0}

.rs-line{width:100%;text-align:left;background:none;border:0;padding:12px 8px 12px 12px;
  min-height:58px;cursor:pointer;
  box-shadow:inset 0 0 0 0 var(--brand);
  transition:background .28s var(--ease),box-shadow .28s var(--ease)}
.rs-line:hover{background:var(--gray)}

.rs-ix{font-size:10.5px;letter-spacing:.1em;color:var(--faint);align-self:start;
  padding-top:3px;transition:color .28s var(--ease)}
.rs-line:hover .rs-ix{color:var(--brand)}
.rs-nm{min-width:0}
.rs-t{display:block;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.rs-d{display:block;font-size:12.5px;line-height:1.5;color:var(--sub);margin-top:3px}
.rs-ty{justify-self:start;border:1px solid var(--line2);border-radius:2px;padding:2px 6px;
  font-size:9.5px;letter-spacing:.1em;color:var(--sub);line-height:1.4}
.rs-sz{font-size:11.5px;color:var(--faint);letter-spacing:.04em}

.rs-pill{display:inline-flex;align-items:center;gap:6px;border-radius:2px;
  padding:3px 9px;border:1px solid var(--k);background:var(--kt);color:var(--k);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;line-height:1.6}
.rs-pill::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;
  flex:0 0 auto}
.rs-row[data-state="avail"]{--k:var(--own);--kt:var(--own-tint)}
.rs-row[data-state="req"]  {--k:var(--brand);--kt:var(--brand-tint)}

.rs-ac{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--line2);border-radius:50%;color:var(--sub);
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .35s var(--ease)}
.rs-line:hover .rs-ac{border-color:var(--brand);color:var(--brand)}

/* ── Rows fade in one after another when the register is reached ── */
.js .rs-shelf .rs-row{opacity:0}
.js .rs-shelf.lit .rs-row{opacity:1;animation:rsRow .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 34ms)}
@keyframes rsRow{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ══════════ Responsive ══════════ */
@media(max-width:1080px){
  .rs-head,.rs-line{grid-template-columns:52px minmax(0,1fr) 66px 116px 34px;
    grid-template-areas:"ix nm ty st ac"}
  .rs-head .rs-sz,.rs-line .rs-sz{display:none}
}
@media(max-width:920px){
  .rs-shelf{grid-template-columns:1fr;gap:22px}
  .rs-spine{position:static}
  .rs-glyph{margin-bottom:12px}
  .rs-sp-d{max-width:56ch}
  .rs-tally{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .rs-sp-l{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
}
@media(max-width:900px){
  .rs-cover-in{grid-template-columns:1fr}
  .rs-cover-r{max-width:420px}
}
@media(max-width:620px){
  .rs-head{display:none}
  .rs-line{grid-template-columns:auto auto minmax(0,1fr) 34px;
    grid-template-areas:"nm nm nm ac" "ix ty st ac";
    gap:9px 10px;padding:13px 6px 13px 12px}
  .rs-line .rs-nm{margin-bottom:2px}
  .rs-ix{align-self:center;padding-top:0}
  .rs-st{justify-self:start}
  .rs-ac{align-self:start}
  .rs-t{font-size:14px}
}
@media(max-width:400px){
  .rs-line{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .js .rs-shelf .rs-row{opacity:1}
  .js .rs-shelf.lit .rs-row{animation:none}
}
/* END_SECTION:rs-register */

/* START_SECTION:search (INDEX:36) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:37) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:38) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:44) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */