/* ═══════════════════════════════════════════════════
   KEYFRAMES.hk — 共用樣式
   主色：Graphite / Gold
   ═══════════════════════════════════════════════════ */

:root{
  --bg:#0b0b0d;
  --bg2:#141417;
  --bg3:#1c1c20;
  --bg4:#232328;
  --line:#2a2a30;
  --line2:#3a3a42;
  --txt:#f2f0ec;
  --txt2:#9a9791;
  --txt3:#6a6862;
  --gold:#b68c52;
  --gold2:#d4b896;
  --wa:#25D366;
  --email:#EA4335;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

::selection{background:var(--gold);color:#0b0b0d}

/* ═══ NAV ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,11,13,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s;
}
.nav.scrolled{background:rgba(11,11,13,.97)}
.nav-in{
  max-width:1240px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  height:66px;
}
.brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;font-weight:600;letter-spacing:.5px;
  white-space:nowrap;
}
.brand em{color:var(--gold);font-style:normal}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{
  font-size:.82rem;color:var(--txt2);
  letter-spacing:.4px;transition:color .2s;position:relative;
}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--gold)}
.nav-cta{
  background:var(--gold);color:#0b0b0d!important;
  padding:9px 20px;border-radius:22px;
  font-weight:500;font-size:.8rem!important;
}
.nav-cta:hover{background:var(--gold2)}
.nav-toggle{
  display:none;width:38px;height:38px;
  background:transparent;border:1px solid var(--line);
  border-radius:8px;color:var(--txt);cursor:pointer;
  font-size:1.1rem;line-height:1;
}
@media(max-width:900px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-links{
    position:absolute;top:66px;left:0;right:0;
    background:rgba(11,11,13,.99);
    backdrop-filter:blur(16px);
    flex-direction:column;gap:0;
    padding:8px 24px 20px;
    border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.show{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);width:100%}
  .nav-links .nav-cta{
    border:none;margin-top:14px;
    text-align:center;width:100%;
  }
}

/* ═══ LAYOUT ═══ */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section{position:relative}

/* ═══ HERO ═══ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;align-items:center;
  overflow:hidden;
  padding:120px 0 80px;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  z-index:0;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,11,13,.75) 0%,rgba(11,11,13,.88) 55%,rgba(11,11,13,.97) 100%),
    radial-gradient(ellipse at 30% 40%,rgba(182,140,82,.10) 0%,transparent 60%);
}
.hero-in{position:relative;z-index:1;max-width:760px}
.hero-tag{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.95rem;color:var(--gold);
  letter-spacing:4px;text-transform:uppercase;
  margin-bottom:20px;
}
.hero h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem,7.5vw,5.2rem);
  font-weight:500;line-height:1.05;
  margin-bottom:22px;letter-spacing:-.5px;
}
.hero h1 em{color:var(--gold2);font-style:normal}
.hero p{
  font-size:1.02rem;color:var(--txt2);
  max-width:540px;margin-bottom:34px;line-height:1.75;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:32px;
  font-size:.88rem;font-weight:500;
  border:1px solid transparent;
  transition:all .25s var(--ease);
  cursor:pointer;
}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-em{background:var(--email);color:#fff}
.btn-em:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-line{border-color:var(--line2);color:var(--txt)}
.btn-line:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#0b0b0d}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px)}

/* ═══ STATS ═══ */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-top:60px;
}
.stat{background:var(--bg2);padding:26px 20px;text-align:center}
.stat-n{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;color:var(--gold);line-height:1;margin-bottom:6px;
}
.stat-l{
  font-size:.66rem;color:var(--txt3);
  letter-spacing:2px;text-transform:uppercase;
}
@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat-n{font-size:1.9rem}
}

/* ═══ SECTION ═══ */
.sec{padding:110px 0}
.sec-alt{background:var(--bg2)}
.sec-head{margin-bottom:52px;max-width:680px}
.sec-eyebrow{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.9rem;color:var(--gold);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;
}
.sec h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,4.5vw,3rem);
  font-weight:500;line-height:1.12;margin-bottom:16px;
}
.sec h2 em{color:var(--gold2);font-style:normal}
.sec-sub{font-size:.98rem;color:var(--txt2);line-height:1.75}
.rule{width:44px;height:1px;background:var(--gold);margin:22px 0}

/* ═══ CARD GRID ═══ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
.card{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:14px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;
  display:flex;flex-direction:column;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line2);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.card-thumb{
  position:relative;aspect-ratio:16/10;
  background:var(--bg3);overflow:hidden;
}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.card:hover .card-thumb img{transform:scale(1.05)}
.card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.card-t{
  font-size:1.06rem;font-weight:500;
  margin-bottom:7px;line-height:1.35;
}
.card-d{font-size:.84rem;color:var(--txt2);line-height:1.6;margin-bottom:16px}
.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.tag{
  font-size:.66rem;color:var(--txt3);
  border:1px solid var(--line);padding:3px 9px;border-radius:12px;
  letter-spacing:.4px;
}
.tag-hl{color:var(--gold);border-color:rgba(182,140,82,.42)}

/* ═══ EXTERNAL LINK CARD ═══ */
.card-ext{
  background:var(--bg2);
  border:1px solid var(--line);border-radius:14px;
  padding:26px;display:flex;flex-direction:column;
  transition:all .3s var(--ease);
}
.card-ext:hover{
  border-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(182,140,82,.12);
}
.card-ext-n{
  font-family:'Cormorant Garamond',serif;
  font-size:.88rem;color:var(--gold);letter-spacing:2px;margin-bottom:12px;
}
.card-ext-t{font-size:1.08rem;font-weight:500;margin-bottom:8px}
.card-ext-d{font-size:.84rem;color:var(--txt2);line-height:1.6;margin-bottom:18px}
.card-ext-l{
  margin-top:auto;font-size:.82rem;color:var(--gold);
  display:flex;align-items:center;gap:6px;
}
.card-ext:hover .card-ext-l{gap:10px}
.card-ext-l svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══ FILTER BAR ═══ */
.filter{
  position:sticky;top:66px;z-index:50;
  background:rgba(11,11,13,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.filter-in{
  display:flex;gap:8px;
  overflow-x:auto;padding:13px 24px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.filter-in::-webkit-scrollbar{display:none}
.fbtn{
  flex-shrink:0;
  padding:8px 18px;border-radius:20px;
  border:1px solid var(--line);
  background:transparent;color:var(--txt2);
  font-size:.8rem;cursor:pointer;
  transition:all .2s;white-space:nowrap;
}
.fbtn:hover{border-color:var(--line2);color:var(--txt)}
.fbtn.on{background:var(--gold);border-color:var(--gold);color:#0b0b0d;font-weight:500}

/* ═══ VIDEO ═══ */
.vthumb{
  position:relative;aspect-ratio:16/9;
  background:#000;cursor:pointer;overflow:hidden;
}
.vthumb.portrait{aspect-ratio:9/16}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s}
.vthumb:hover img{transform:scale(1.04);filter:brightness(.6)}
.vplay{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;
  background:rgba(11,11,13,.5);
  border:1.5px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--ease);pointer-events:none;
}
.vthumb:hover .vplay{
  background:var(--gold);border-color:var(--gold);
  transform:translate(-50%,-50%) scale(1.1);
}
.vplay svg{width:19px;height:19px;fill:#fff;margin-left:3px;transition:fill .3s}
.vthumb:hover .vplay svg{fill:#0b0b0d}
.vdur{
  position:absolute;right:10px;bottom:10px;
  background:rgba(11,11,13,.8);backdrop-filter:blur(4px);
  padding:3px 8px;border-radius:4px;
  font-size:.7rem;color:var(--txt2);letter-spacing:.5px;
}
.vbadge{
  position:absolute;left:10px;top:10px;
  background:rgba(11,11,13,.82);backdrop-filter:blur(4px);
  padding:4px 9px;border-radius:4px;
  font-size:.64rem;color:var(--gold);letter-spacing:.8px;
}

/* ═══ MODAL ═══ */
.modal{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.94);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.modal.open{display:flex}
.modal-box{max-width:1120px;width:100%;position:relative}
.modal-box video{
  width:100%;max-height:76vh;background:#000;
  border-radius:10px;display:block;
}
.modal-x{
  position:absolute;top:-44px;right:0;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:transparent;color:#fff;
  font-size:20px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.modal-x:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.modal-info{margin-top:20px;display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.modal-info h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:500;margin-bottom:6px;
}
.modal-info p{font-size:.86rem;color:var(--txt2);line-height:1.65;max-width:600px}

/* ═══ CTA BAR ═══ */
.cta-band{
  padding:80px 0;text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg2);
}
.cta-band h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,4vw,2.6rem);font-weight:500;margin-bottom:12px;
}
.cta-band p{font-size:.92rem;color:var(--txt2);margin-bottom:30px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ═══ FOOTER ═══ */
.footer{border-top:1px solid var(--line);padding:60px 0 34px}
.foot-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:44px;
}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:600;margin-bottom:12px;
}
.foot-brand em{color:var(--gold);font-style:normal}
.foot-p{font-size:.83rem;color:var(--txt2);line-height:1.7;max-width:300px}
.foot-col h5{
  font-size:.68rem;color:var(--txt3);
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:16px;font-weight:500;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{
  font-size:.85rem;color:var(--txt2);
  transition:color .2s;
}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{
  border-top:1px solid var(--line);padding-top:26px;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  font-size:.76rem;color:var(--txt3);letter-spacing:.4px;
}
.socials{display:flex;gap:16px}
.socials a{
  font-size:.8rem;color:var(--txt2);
  transition:color .2s;
}
.socials a:hover{color:var(--gold)}

/* ═══ FLOAT CONTACT ═══ */
.float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:flex;flex-direction:column;gap:10px;
}
.float a{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:transform .25s var(--ease);
}
.float a:hover{transform:scale(1.1)}
@media(max-width:600px){
  .float{right:14px;bottom:14px}
  .float a{width:42px;height:42px;font-size:1rem}
}

/* ═══ REVEAL ═══ */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* ═══ BREADCRUMB ═══ */
.crumb{
  font-size:.76rem;color:var(--txt3);
  letter-spacing:.5px;margin-bottom:20px;
}
.crumb a{color:var(--txt3);transition:color .2s}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 8px;opacity:.5}

/* ═══ PAGE HEAD ═══ */
.page-head{padding:130px 0 60px;position:relative;overflow:hidden}
.page-head-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.page-head-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.82),rgba(11,11,13,.96));
}
.page-head-in{position:relative;z-index:1;max-width:760px}

/* ═══ NOTICE BAR ═══ */
.notice{
  background:rgba(182,140,82,.10);
  border:1px solid rgba(182,140,82,.3);
  border-radius:12px;padding:18px 22px;
  font-size:.86rem;color:var(--txt2);line-height:1.65;
  margin-bottom:40px;
}
.notice strong{color:var(--gold2);font-weight:500}

/* ═══ FAQ ═══ */
.faq{max-width:780px;margin:0 auto}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:22px 0;cursor:pointer;
  font-size:1rem;font-weight:500;line-height:1.45;
  transition:color .2s;
}
.faq-q:hover{color:var(--gold)}
.faq-icon{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--gold);
  transition:transform .3s var(--ease);
}
.faq-i.open .faq-icon{transform:rotate(45deg)}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .4s var(--ease);
  font-size:.9rem;color:var(--txt2);line-height:1.75;
}
.faq-a-in{padding:0 40px 24px 0}

/* ═══ RESPONSIVE ═══ */
@media(max-width:700px){
  .sec{padding:78px 0}
  .hero{min-height:80vh;padding:100px 0 60px}
  .stats{margin-top:40px}
}

/* ═══════════════════════════════════════════════════════
   PREMIUM UPGRADE — 2026-10-07
   质感提升：细腻质感、动效、字体优化、微交互
   ═══════════════════════════════════════════════════════ */

/* ── 1. 全域质感优化 ── */
body{
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}

/* 细腻噪点纹理 — 减低纯色死板感 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;
  pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* 中央 nav/footer 根節點：body>* 會將佢哋壓到 z-index:1，
   但首頁 .portal 同為 z-index:1 且 DOM 靠後，會遮住 fixed nav 搶走 click。
   呢度強行將 nav 根節點抬到 portal 之上，令 nav 同語言掣恢復可點擊。
   footer 根節點亦抬到 2，避免同級 z-index:1 兄弟爭位。*/
#kf-nav-root{position:fixed;top:0;left:0;right:0;z-index:1000}
#kf-footer-root{position:relative;z-index:2}

/* 選中文本更明顯 */
::selection{background:rgba(182,140,82,.35);color:#fff}

/* 捲軸美化 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{
  background:var(--bg4);border-radius:5px;
  border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}

/* ── 2. 流體字體（clamp 全站） ── */
.sec-eyebrow{
  font-size:clamp(.78rem,.9vw,.9rem);
  letter-spacing:clamp(2px,.4vw,3.5px);
}
.sec h2{
  font-size:clamp(2rem,4.8vw,3.2rem);
  letter-spacing:-.4px;
}
.half h2{
  font-size:clamp(2.1rem,4.8vw,3.4rem);
  letter-spacing:-.4px;
}

/* Cormorant Garamond 變體字重，層次更細 */
.sec h2 em,.half h2 em{
  font-weight:400;font-style:italic;
  color:var(--gold);
  opacity:.92;
}

/* ── 3. Nav 增強 ── */
.nav{
  transition:background .35s var(--ease),border-color .35s var(--ease),
             box-shadow .35s var(--ease);
}
.nav.scrolled{
  box-shadow:0 1px 0 rgba(182,140,82,.14),0 12px 40px rgba(0,0,0,.28);
}
.brand{
  font-size:1.42rem;
  letter-spacing:1px;
  position:relative;
}
.brand::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:0;height:1px;background:var(--gold);
  transition:width .4s var(--ease);
}
.brand:hover::after{width:100%}

/* nav 底線 hover 動畫 */
.nav-links a:not(.nav-cta){
  padding:4px 0;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:color .25s,background-size .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover{
  background-size:100% 1px;
}
.nav-cta{
  position:relative;overflow:hidden;
  transition:background .3s var(--ease),transform .25s var(--ease);
}
.nav-cta::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-100%);
  transition:transform .6s var(--ease);
}
.nav-cta:hover::after{transform:translateX(100%)}

/* ── 4. Button sheen 效果 ── */
.btn{
  position:relative;overflow:hidden;
  letter-spacing:.3px;
}
.btn::after{
  content:'';position:absolute;top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transition:left .65s var(--ease);
}
.btn:hover::after{left:140%}

/* ── 5. Card 深度增強 ── */
.card{
  position:relative;
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease);
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(160deg,rgba(182,140,82,.07),transparent 45%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.card:hover::before{opacity:1}
.card:hover{
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(182,140,82,.18);
}
.card-t{
  letter-spacing:.1px;
  transition:color .3s;
}
.card:hover .card-t{color:var(--gold2)}

/* tag 微動 */
.tag{
  transition:all .25s;
}
.card:hover .tag{border-color:var(--line2)}

/* ── 6. 縮圖疊層增強 ── */
.vthumb::after,.feat-vis::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,13,.4) 100%);
  pointer-events:none;transition:opacity .4s;
}
.vthumb:hover::after,.feat:hover .feat-vis::after{opacity:0}

/* 播放鍵脈動 */
.vplay,.feat-play{
  position:relative;
}
.vplay::before,.feat-play::before{
  content:'';position:absolute;inset:-8px;
  border-radius:50%;border:1px solid rgba(255,255,255,.18);
  opacity:0;transform:scale(.85);
  transition:opacity .4s,transform .5s var(--ease);
}
.vthumb:hover .vplay::before,.feat:hover .feat-play::before{
  opacity:1;transform:scale(1);
}

/* ── 7. Stats 精緻化 ── */
.stat{
  position:relative;transition:background .35s;
}
.stat::after{
  content:'';position:absolute;bottom:0;left:50%;
  width:0;height:1px;background:var(--gold);
  transform:translateX(-50%);
  transition:width .45s var(--ease);
}
.stat:hover{background:var(--bg3)}
.stat:hover::after{width:56px}
.stat-n{
  transition:color .35s,transform .35s var(--ease);
  display:inline-block;
}
.stat:hover .stat-n{color:var(--gold2);transform:translateY(-2px)}

/* ── 8. Portal half 圖片 zoom ── */
.half-bg{
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease),filter .6s;
}
.half:hover .half-bg{transform:scale(1.07)}
.half::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,transparent 40%,rgba(182,140,82,.09) 100%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.half:hover::after{opacity:1}

/* ── 9. Gold 裝飾線 ── */
.rule{
  position:relative;width:44px;height:1px;
  background:var(--gold);overflow:visible;
}
.rule::after{
  content:'';position:absolute;left:0;top:-3px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}

/* ── 10. Scroll reveal 增強 ── */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* stagger 延遲 */
[data-reveal][style*="transition-delay"]{transition-delay:inherit}

/* ── 11. Focus 狀態（無障礙） ── */
a:focus-visible,button:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ── 12. 圖片載入 fade ── */
img{
  background:var(--bg3);
  transition:opacity .6s var(--ease);
}
img.loaded{opacity:1}

/* ── 13. Modal 精緻化 ── */
.modal-box{
  animation:mdIn .4s var(--ease);
}
@keyframes mdIn{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal{
  animation:fadeIn .3s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-x{
  transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.modal-x:hover{transform:rotate(90deg)}

/* ── 14. 表單（報價） premium ── */
.qform{
  background:var(--bg2);border:1px solid var(--line);
  border-radius:18px;padding:34px;
}
.qfield{margin-bottom:22px}
.qlabel{
  display:block;font-size:.72rem;color:var(--txt3);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:11px;
}
.qopts{display:flex;gap:9px;flex-wrap:wrap}
.qopt{
  padding:11px 20px;border-radius:12px;
  border:1px solid var(--line);background:transparent;
  color:var(--txt2);font-size:.86rem;cursor:pointer;
  transition:all .25s var(--ease);font-family:inherit;
}
.qopt:hover{border-color:var(--line2);color:var(--txt);transform:translateY(-1px)}
.qopt.on{
  background:rgba(182,140,82,.14);border-color:var(--gold);
  color:var(--gold2);font-weight:500;
}
.qsummary{
  background:var(--bg3);border:1px solid var(--line);
  border-radius:12px;padding:20px;margin:26px 0;
}
.qsum-row{
  display:flex;justify-content:space-between;gap:16px;
  font-size:.86rem;margin-bottom:9px;
}
.qsum-row:last-child{margin-bottom:0}
.qsum-row .lbl{color:var(--txt3)}
.qsum-row .val{color:var(--txt);font-weight:500;text-align:right}
.qsum-total{
  border-top:1px solid var(--line);padding-top:12px;margin-top:12px;
  font-size:1rem;
}
.qsum-total .val{color:var(--gold2);font-size:1.15rem}

/* ── 15. Blog 排版增強 ── */
.post:hover .post-t{color:var(--gold2)}
.post-t{
  font-size:1.55rem;letter-spacing:-.2px;
  transition:color .3s var(--ease);
}
.article-body p{
  text-wrap:pretty;
}
.article-body h2{
  position:relative;padding-left:0;
}
.article-body h2::before{
  content:'';position:absolute;left:-24px;top:.55em;
  width:12px;height:1px;background:var(--gold);
}
@media(max-width:800px){.article-body h2::before{display:none}}

/* 首字下沉（可選 class） */
.dropcap::first-letter{
  font-family:'Cormorant Garamond',serif;
  font-size:3.4em;float:left;line-height:.85;
  padding:4px 12px 0 0;color:var(--gold2);font-weight:500;
}

/* ── 16. Link-in-Bio 卡片微動 ── */
.bio-stat>div{transition:background .3s}
.bio-stat>div:hover{background:var(--bg3)}

/* ── 17. 列印優化（客戶要列印報價） ── */
@media print{
  .nav,.float,.modal,.filter,.cta-band,.foot-grid{display:none!important}
  body{background:#fff;color:#000}
  .sec{padding:20px 0}
}

/* ═══════════════════════════════════════════════════════
   NAV DROPDOWN — 「作品」下拉：相片 / 影片
   ═══════════════════════════════════════════════════════ */
.nav-links{position:relative}
.nav-drop{position:relative}
.nav-drop > a{
  display:inline-flex;align-items:center;gap:5px;
}
.nav-drop > a::after{
  content:'';width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--ease);
  margin-left:1px;
}
.nav-drop:hover > a::after{transform:rotate(45deg) translateY(1px)}

.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:-14px;
  min-width:210px;padding:8px;
  background:rgba(14,14,17,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 54px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all .32s var(--ease);
  z-index:120;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav-drop-menu::before{
  content:'';position:absolute;top:-6px;left:28px;
  width:11px;height:11px;
  background:rgba(14,14,17,.98);
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.nav-drop-menu a{
  display:flex;align-items:flex-start;gap:11px;
  padding:11px 13px;border-radius:9px;
  font-size:.86rem;color:var(--txt2);
  background:none!important;background-size:0!important;
  transition:background .2s,color .2s;
}
.nav-drop-menu a:hover{background:var(--bg3)!important;color:var(--txt)!important}
.nav-drop-menu a.on{color:var(--gold2)}
.nav-drop-ico{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  background:rgba(182,140,82,.13);border:1px solid rgba(182,140,82,.26);
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:var(--gold);
}
.nav-drop-txt{flex:1;min-width:0}
.nav-drop-t{display:block;font-size:.86rem;font-weight:500;line-height:1.3}
.nav-drop-d{display:block;font-size:.72rem;color:var(--txt3);margin-top:2px;line-height:1.4}

/* 手機版：dropdown 變成展開列表 */
@media(max-width:900px){
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;box-shadow:none;
    padding:0 0 0 14px;margin:2px 0;
    min-width:0;
  }
  .nav-drop-menu::before{display:none}
  .nav-drop-menu a{padding:10px 0;border-bottom:1px solid var(--line)}
  .nav-drop-menu a:last-child{border-bottom:none}
  .nav-drop > a{border-bottom:1px solid var(--line);padding:13px 0;width:100%}
  .nav-drop > a::after{display:none}
  .nav-drop{corder:8}
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL EFFECTS SYSTEM v2 — 2026-10-08
   頭版 Ken Burns · 視差層 · cursor 光暈 · 動態標題 · 分割線 · hover 圖片 zoom
   全部純 CSS / 零外部依賴 / 尊重 prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 頭版 Ken Burns（背景緩慢推近） ── */
@keyframes kenburns{
  0%   {transform:scale(1.00) translate(0,0)}
  100% {transform:scale(1.14) translate(-1.2%, -1.4%)}
}
.hero-bg,.page-head-bg,.half-bg{
  animation:kenburns 28s cubic-bezier(.16,.84,.44,1) infinite alternate;
  will-change:transform;
}
/* hover 暫停，改為互動 zoom */
.half:hover .half-bg{animation-play-state:paused}

/* 半版反向 ken burns（有變化） */
@keyframes kenburns-alt{
  0%   {transform:scale(1.12) translate(1%,1%)}
  100% {transform:scale(1.01) translate(0,0)}
}
.half:nth-child(even) .half-bg{animation-name:kenburns-alt}

/* ── 2. 頭版漸層動態（呼吸感） ── */
@keyframes breathe{
  0%,100%{opacity:.72}
  50%    {opacity:.92}
}
.hero-bg::after{animation:breathe 9s ease-in-out infinite}

/* ── 3. Cursor 光暈（大範圍，非常見） ── */
.cursor-glow{
  position:fixed;top:0;left:0;
  width:640px;height:640px;
  margin:-320px 0 0 -320px;
  border-radius:50%;
  pointer-events:none;z-index:1;
  background:radial-gradient(circle,
    rgba(182,140,82,.075) 0%,
    rgba(182,140,82,.035) 32%,
    transparent 68%);
  opacity:0;
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor-glow.on{opacity:1}

/* 細版光點（更明顯） */
.cursor-dot{
  position:fixed;top:0;left:0;
  width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;pointer-events:none;z-index:200;
  background:var(--gold2);
  opacity:0;transition:opacity .35s,transform .2s;
}
.cursor-dot.on{opacity:.75}

/* 互動元素 hover 時 dot 放大 */
.cursor-dot.big{transform:scale(3.2);opacity:1;background:var(--gold)}

/* ── 4. 頭版文字逐行上升 ── */
@keyframes lineUp{
  from{opacity:0;transform:translateY(110%)}
  to  {opacity:1;transform:translateY(0)}
}
.hero-in>*,.page-head-in>*{
  animation:lineUp .95s cubic-bezier(.16,.84,.44,1) both;
}
.hero-in>*:nth-child(1),.page-head-in>*:nth-child(1){animation-delay:.05s}
.hero-in>*:nth-child(2),.page-head-in>*:nth-child(2){animation-delay:.16s}
.hero-in>*:nth-child(3),.page-head-in>*:nth-child(3){animation-delay:.27s}
.hero-in>*:nth-child(4),.page-head-in>*:nth-child(4){animation-delay:.38s}
.hero-in>*:nth-child(5),.page-head-in>*:nth-child(5){animation-delay:.49s}
.hero-in>*:nth-child(6),.page-head-in>*:nth-child(6){animation-delay:.60s}

/* mask 效果配合 */
.hero-in>*,.page-head-in>*{
  clip-path:inset(0 0 0 0);
}

/* ── 5. 標題光掃（hero h1） ── */
.hero h1 em,.page-head h1 em{
  position:relative;display:inline-block;
  background:linear-gradient(100deg,
    var(--gold2) 30%,
    #fff8e8 48%,
    var(--gold2) 66%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:shine 7s ease-in-out infinite;
}
@keyframes shine{
  0%,100%{background-position:120% 0}
  50%    {background-position:-20% 0}
}

/* ── 6. 細分割線金色流動 ── */
.rule{
  position:relative;overflow:visible;
}
.rule::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  animation:ruleFlow 3.4s ease-in-out infinite;
}
@keyframes ruleFlow{
  0%,100%{opacity:.4;transform:translateX(-30%)}
  50%    {opacity:1;transform:translateX(30%)}
}
.rule::after{
  animation:dotPulse 2.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.7}
  50%    {transform:translateX(-50%) scale(1.5);opacity:1}
}

/* ── 7. 圖片 hover 精細 zoom（比之前更慢更柔） ── */
.card-vis,.g-vis,.post-vis,.yt-vis{
  overflow:hidden;position:relative;
}
.card-vis img,.g-vis img,.post-vis img{
  transition:transform 1.05s cubic-bezier(.16,.84,.44,1),filter .55s;
}
.card:hover .card-vis img{transform:scale(1.07)}
.g-card:hover .g-vis img{transform:scale(1.08)}
.post:hover .post-vis img{transform:scale(1.06)}

/* ── 7.5 自訂游標 ──
   ⚠️ 呢度曾經補過 .cursor-glow / .cursor-dot 但漏咗載入。
   現已抽去 assets/fx.css（單一來源，深淺兩套設計共用，
   用 CSS 變數自動適配），kf-fx.js 效果 1 靠fx.css 生效。
   唔好再喺呢度重複定義，避免兩邊規則打架。 */

/* ── 8. 傾斜跟隨（卡片 3D 感） ── */
.tilt{
  transform:perspective(1000px) rotateX(0) rotateY(0);
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.16,.84,.44,1),
             box-shadow .45s;
}
.tilt:hover{
  box-shadow:0 26px 66px rgba(0,0,0,.55),
             0 0 0 1px rgba(182,140,82,.22);
}

/* ── 8.5 表單 focus 光暈 ──
   已抽去 assets/fx.css（kf-fx.js 效果 7 靠它生效）。 */

/* ── 9. 磁吸按鈕（magnetic） ── */
.btn,.nav-cta,.fbtn{
  transform:translate(0,0);
  transition:transform .28s cubic-bezier(.16,.84,.44,1),
             box-shadow .28s,background .25s,border-color .25s,color .25s;
}
.btn:hover,.nav-cta:hover{
  transform:translate(0,-3px) scale(1.02);
  box-shadow:0 10px 30px rgba(182,140,82,.22);
}

/* ── 10. 進度條（scroll progress） ── */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;
  height:2px;z-index:150;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(182,140,82,.5);
}

/* ── 11. 頁面載入過場 ── */
.page-curtain{
  position:fixed;inset:0;z-index:999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:curtainUp .95s cubic-bezier(.76,0,.24,1) .15s both;
  pointer-events:none;
}
.page-curtain::after{
  content:'KEYFRAMES';
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;letter-spacing:8px;
  color:var(--gold);
  animation:curtainFade .5s ease .5s both;
}
@keyframes curtainUp{
  0%  {transform:translateY(0)}
  100%{transform:translateY(-100%)}
}
@keyframes curtainFade{
  0%  {opacity:0}
  40% {opacity:1}
  100%{opacity:0}
}

/* ── 12. 數字 count-up 視覺輔助 ── */
[data-count]{
  position:relative;
}
.stat-n,.about-num{
  font-variant-numeric:tabular-nums;
}

/* ── 13. 服務卡圖片疊層文字 ── */
.svc-card{
  position:relative;overflow:hidden;
  border-radius:16px;border:1px solid var(--line);
  min-height:280px;display:flex;align-items:flex-end;
  transition:border-color .4s;
}
.svc-card:hover{border-color:var(--gold)}
.svc-card-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.1s cubic-bezier(.16,.84,.44,1);
}
.svc-card:hover .svc-card-bg{transform:scale(1.09)}
.svc-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.15) 0%,rgba(11,11,13,.9) 78%);
}
.svc-card-in{position:relative;z-index:2;padding:26px;width:100%}
.svc-card-n{
  font-family:'Cormorant Garamond',serif;font-size:.82rem;
  color:var(--gold);letter-spacing:2px;margin-bottom:8px;
  display:block;
}
.svc-card-t{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;font-weight:500;line-height:1.15;margin-bottom:8px;
}
.svc-card-d{font-size:.83rem;color:var(--txt2);line-height:1.6;margin-bottom:14px}
.svc-card-go{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.8rem;color:var(--gold);font-weight:500;
  transition:gap .3s var(--ease);
}
.svc-card:hover .svc-card-go{gap:12px}
.svc-card-go svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ── 14. Trusted by logo 區 ── */
.trusted{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
.trusted-i{
  background:var(--bg2);padding:26px 18px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;min-height:92px;
  transition:background .35s;
}
.trusted-i:hover{background:var(--bg3)}
.trusted-n{
  font-size:.9rem;font-weight:500;color:var(--txt2);
  line-height:1.4;letter-spacing:.4px;
  transition:color .3s;
}
.trusted-i:hover .trusted-n{color:var(--gold)}
.trusted-i img{max-height:40px;filter:grayscale(1) opacity(.55);transition:filter .4s}
.trusted-i:hover img{filter:grayscale(0) opacity(1)}

/* placeholder 狀態 */
.trusted-empty{
  grid-column:1/-1;background:var(--bg2);
  padding:44px 24px;text-align:center;
}
.trusted-empty p{font-size:.88rem;color:var(--txt3);line-height:1.7;margin-bottom:14px}
.trusted-hint{
  display:inline-block;font-family:ui-monospace,Menlo,monospace;
  font-size:.74rem;color:var(--gold2);
  background:rgba(182,140,82,.1);border:1px solid rgba(182,140,82,.3);
  padding:9px 16px;border-radius:8px;text-align:left;
}

/* ── 15. 主創觀點 quote 區 ── */
.creator{
  background:linear-gradient(150deg,
    rgba(182,140,82,.075) 0%,
    rgba(182,140,82,.02) 45%,
    transparent 100%);
  border:1px solid rgba(182,140,82,.22);
  border-radius:18px;padding:42px 38px;
  position:relative;overflow:hidden;
}
.creator::before{
  content:'”';
  position:absolute;top:-22px;left:20px;
  font-family:'Cormorant Garamond',serif;
  font-size:11rem;color:rgba(182,140,82,.10);
  line-height:1;pointer-events:none;
}
.creator-role{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.68rem;color:var(--gold);
  letter-spacing:2.4px;text-transform:uppercase;
  padding:6px 14px;border-radius:20px;
  background:rgba(182,140,82,.10);
  border:1px solid rgba(182,140,82,.28);
  margin-bottom:22px;
}
.creator-q{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-style:italic;color:var(--txt);
  line-height:1.55;margin-bottom:26px;position:relative;z-index:1;
}
.creator-txt{
  font-size:.94rem;color:var(--txt2);line-height:1.85;
  position:relative;z-index:1;
}
.creator-sign{
  margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(182,140,82,.2);
  font-size:.8rem;color:var(--txt3);letter-spacing:.5px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}

/* ── 16. 時間軸節點脈動 ── */
.flow-i::before{
  animation:nodePulse 3s ease-in-out infinite;
}
@keyframes nodePulse{
  0%,100%{box-shadow:0 0 0 4px rgba(182,140,82,.12)}
  50%    {box-shadow:0 0 0 9px rgba(182,140,82,.05)}
}

/* ── 17. Timeline 進度感 ── */
.trusted-grid,.gear-list{transition:background .4s}

/* ── 18. 尊重系統設定：減少動態 ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .hero-bg,.page-head-bg,.half-bg{animation:none;transform:none}
  .cursor-glow,.cursor-dot,.scroll-progress{display:none!important}
  .page-curtain{display:none!important}
}

/* ── 19. 移動版簡化（效能） ── */
@media(max-width:820px){
  .cursor-glow{display:none}
  .hero-bg,.page-head-bg,.half-bg{
    animation-duration:40s;
  }
  .page-curtain{display:none}
}

/* ── 20. 列印時關閉所有效果 ── */
@media print{
  .cursor-glow,.cursor-dot,.scroll-progress,.page-curtain{display:none!important}
  .hero-bg,.page-head-bg{animation:none}
}

/* PAGE TRANSITIONS（6 種轉場）已搬至 assets/fx.css ——
   原本只喺呢個檔，令淺色頁（shared.css）冇樣式。
   而家 fx.css 做單一來源，深淺兩套設計都靠 CSS 變數自動適配。 */

/* ═══ 防止手機版內容撐爆 viewport（橫向滾動）═══
   process-steps / gallery-grid 等 grid 在 390px 闊度會被內容撐開，
   令整頁可以左右拖動。min-width:0 + auto-fit 解決。 */
@media(max-width:600px){
  .process-steps{grid-template-columns:1fr!important;min-width:0}
  .process-steps>*{min-width:0;overflow-wrap:break-word}
  .gallery-grid{grid-template-columns:repeat(2,1fr)!important;min-width:0}
  .gallery-grid>*{min-width:0}
  .grid-2,.grid-3,.grid-4,.cols-2,.cols-3,.cols-4{grid-template-columns:1fr!important;min-width:0}
  .card,.svc-card,.process-steps,.pricing-wrap>*{min-width:0;overflow-wrap:break-word}
  /* table 唔好撐爆容器：包 .table-wrap 可橫向滾，裸 table 則縮 */
  table{max-width:100%}
  .ai-process{grid-template-columns:repeat(2,1fr)!important;min-width:0}
  .ai-process>*{min-width:0}
}

/* ═══ Blog「重點速讀」TL;DR box（GEO：AI 引擎提取直接答案）═══ */
.tldr{
  margin:0 0 30px;padding:20px 24px;
  background:rgba(182,140,82,.07);
  border:1px solid rgba(182,140,82,.22);
  border-left:3px solid var(--gold,#B68C52);
  border-radius:0 10px 10px 0;
}
.tldr-t{
  font-family:var(--sans,'Inter',sans-serif);
  font-size:.72rem;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold,#B68C52);margin-bottom:10px;
}
.tldr ul{margin:0;padding:0;list-style:none}
.tldr li{
  position:relative;padding:5px 0 5px 22px;
  font-size:.92rem;line-height:1.75;color:#5a5450;
}
.tldr li::before{
  content:"";position:absolute;left:2px;top:14px;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold,#B68C52);
}
@media(max-width:600px){ .tldr{padding:16px 18px;margin:0 0 24px} .tldr li{font-size:.88rem} }