/* PINpoint 2026 premium system — Together-inspired, original brand palette retained. */
:root{
  --premium-max:1280px;
  --premium-gutter:clamp(20px,3.2vw,44px);
  --premium-mono:'JetBrains Mono','Noto Sans TC',monospace;
  --premium-radius:5px;
  --premium-dark:#171411;
  --premium-paper:#fbfaf7;
  --premium-warm:#f1ede4;
  --premium-line:rgba(23,20,17,.14);
  --premium-gold:#cda665;
}

/* Dialogs must always render above the fixed navigation and mobile CTA. */
.panel-overlay,.case-overlay{z-index:20000!important}
.detail-panel,.case-panel{z-index:20001!important}
.detail-panel .dp-header,.case-panel .cp-bar{z-index:20002!important}
.detail-panel .dp-close,.case-panel .cp-close{display:flex!important;opacity:1!important;visibility:visible!important}

/* Unified case drawer — homepage, cases and video pages. */
.panel-overlay,.case-overlay{
  background:rgba(18,15,12,.72)!important;
  backdrop-filter:blur(14px)!important;
  transition:opacity .38s ease!important;
}
.detail-panel,.case-panel{
  width:min(760px,94vw)!important;
  background:#f4f0e8!important;
  border-left:1px solid rgba(168,130,74,.48)!important;
  box-shadow:-30px 0 76px rgba(0,0,0,.28)!important;
  transition:transform .62s cubic-bezier(.16,1,.3,1)!important;
}
.detail-panel .dp-header,.case-panel .cp-bar{
  min-height:72px!important;padding:14px 24px 14px 30px!important;
  background:rgba(20,17,14,.98)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(14px)!important;
  position:sticky!important;top:0!important;flex:0 0 72px!important;
}
.detail-panel .dp-eyebrow,.case-panel .cp-label{
  color:#d7b270!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.26em!important;
}
.detail-panel .dp-close,.case-panel .cp-close{
  position:static!important;width:44px!important;height:44px!important;
  min-width:44px!important;min-height:44px!important;border-radius:0!important;
  border:1px solid rgba(255,255,255,.32)!important;background:transparent!important;
  color:#fff!important;font-size:19px!important;
}
.detail-panel .dp-close:hover,.case-panel .cp-close:hover{
  border-color:#d7b270!important;background:#d7b270!important;color:#171411!important;
}
.detail-panel .dp-hero,.case-panel .cp-photo{height:390px!important}
.detail-panel .dp-hero img,.case-panel .cp-photo img{
  width:100%!important;height:100%!important;object-fit:cover!important;
  object-position:center 24%!important;
}
.detail-panel .dp-hero::after,.case-panel .cp-photo::after{
  background:linear-gradient(to top,rgba(20,17,14,.94),rgba(20,17,14,.05) 68%)!important;
}
.detail-panel .dp-hero-label,.case-panel .cp-photo-label{
  padding:34px 36px!important;
}
.detail-panel .dp-ind,.case-panel .cp-photo-ind{color:#d7b270!important;font-size:14px!important;font-weight:500!important}
.detail-panel .dp-title,.case-panel .cp-photo-name{font-size:clamp(32px,4vw,46px)!important;line-height:1.12!important}
.detail-panel .dp-body,.case-panel .cp-body{padding:40px 36px 68px!important}
.detail-panel .dp-stats,.case-panel .cp-stats{
  gap:1px!important;background:rgba(23,20,17,.14)!important;
  border:1px solid rgba(23,20,17,.1)!important;margin-bottom:34px!important;
}
.detail-panel .dp-stat,.case-panel .cp-stat{background:#ebe3d5!important;padding:24px 14px!important}
.detail-panel .dp-stat-n,.case-panel .cp-stat-n{color:#8d6534!important}
.detail-panel .dp-stat-l,.case-panel .cp-stat-l{color:#655b50!important;font-weight:400!important}
.detail-panel .dp-section-title,.case-panel .cp-sec-h{
  color:#171411!important;font-size:21px!important;margin-top:30px!important;
  padding-top:26px!important;
}
.detail-panel .dp-text,.case-panel .cp-p{color:#554d43!important;line-height:1.9!important}
.detail-panel .dp-tag,.case-panel .cp-tag{background:transparent!important;border-color:rgba(141,101,52,.38)!important;color:#79552e!important}
.detail-panel .dp-quote,.case-panel .cp-quote{
  background:#e9dfcf!important;border-left:3px solid #a8824a!important;
  padding:24px 26px!important;margin:30px 0!important;color:#171411!important;
}

body{font-weight:300;letter-spacing:-.01em;background:var(--premium-paper)}
p{line-height:1.75}
#loader{display:none!important}
.cur-ring,.cur-dot{display:none!important}

/* One decorative language: a restrained gold ribbon. */
main::before{
  content:'';position:fixed;z-index:5200;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#6f4f28 0%,#d6b472 48%,#8a642f 100%);
  pointer-events:none;
}

/* Navigation */
.site-nav,.site-nav.scrolled{
  background:rgba(23,20,17,.96)!important;color:#fff!important;
  border-color:rgba(255,255,255,.11)!important;box-shadow:none!important;
  backdrop-filter:blur(18px);height:72px!important;
}
.nav-brand,.nav-brand a{color:#fff!important}.nav-brand em{color:var(--premium-gold)!important}
.nav-tag{color:rgba(255,255,255,.5)!important;font-family:var(--premium-mono);font-size:9px!important}
.nav-links a{color:rgba(255,255,255,.68)!important;border-radius:var(--premium-radius)!important}
.nav-links a:hover,.nav-links a.active{color:#fff!important;background:rgba(255,255,255,.08)!important}
.nav-links a::after{background:var(--premium-gold)!important}
.nav-cta{background:var(--premium-gold)!important;color:var(--premium-dark)!important;border-radius:var(--premium-radius)!important;box-shadow:none!important;font-family:var(--premium-mono);font-size:14px!important}
.nav-toggler span{background:#fff!important}

/* Editorial type hierarchy */
.hero-h1,.page-h1,.ct-h1,.s01-h1,.post-title,.guide-hero h1{
  font-family:'Noto Sans TC',sans-serif!important;font-weight:500!important;
  letter-spacing:-.055em!important;line-height:1.04!important;text-wrap:balance;
}
.hero-h1{font-size:clamp(48px,6.8vw,100px)!important}
.page-h1{font-size:clamp(46px,6.2vw,82px)!important}
.sec-h2,.cta-strip-h,.cs-h2,.intro-statement,.form-title{
  letter-spacing:-.04em!important;line-height:1.12!important;text-wrap:balance;
}
.sec-eyebrow,.page-eyebrow,.hero-kicker-txt,.intro-label,.tb-label,.cs-kicker,
.card-tag,.article-cat,.post-cat,.form-eyebrow,.footer-copy,.footer-brand-sub{
  font-family:var(--premium-mono)!important;text-transform:uppercase!important;
  font-weight:500!important;font-size:14px!important;line-height:1.4!important;
}
.sec-eyebrow::before,.page-eyebrow::before,.intro-label::before,.tb-label::before,.cs-kicker::before{width:18px!important}

/* Layout rhythm */
.sec,.sec-sm,.articles-preview,.testimonial-block{
  padding-left:max(var(--premium-gutter),calc((100vw - var(--premium-max))/2 + var(--premium-gutter)))!important;
  padding-right:max(var(--premium-gutter),calc((100vw - var(--premium-max))/2 + var(--premium-gutter)))!important;
}
.sec{padding-top:clamp(76px,8vw,112px)!important;padding-bottom:clamp(76px,8vw,112px)!important}
.page-hero{min-height:min(760px,82svh)!important}
.page-hero-body{max-width:var(--premium-max)!important;width:100%!important;padding-left:var(--premium-gutter)!important;padding-right:var(--premium-gutter)!important}
.page-hero-bg img{filter:grayscale(45%) contrast(1.05)!important;opacity:.24!important}

/* Flat, precise surfaces */
.card-item,.sm-card,.case-card-item,.tc,.ind-cell,.proof-cell,.ch-card,.exp-cell,
.article-card,.related-post,.aeo-grid details,.check,.svc-mega,.audience-card,.flow-step,
.client-row,.plan,.contact-info{
  border-radius:var(--premium-radius)!important;box-shadow:none!important;
  border:1px solid var(--premium-line)!important;
}
.card-item:hover,.sm-card:hover,.case-card-item:hover,.ch-card:hover,.article-card:hover{
  transform:translateY(-3px)!important;box-shadow:none!important;border-color:rgba(111,79,40,.52)!important;
}
.card-grid,.article-list,.conversion-grid{gap:12px!important}
.article-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.card-body,.article-info{padding:26px!important}
.card-title,.article-title{font-family:'Noto Sans TC',sans-serif!important;font-weight:500!important;letter-spacing:-.025em!important}
.card-excerpt,.article-excerpt{color:#6f6a62!important}
.card-thumb,.article-cover,.ci-thumb{border-radius:4px 4px 0 0!important}

/* Buttons follow the compact mono system. */
.btn-ink,.btn-gold,.btn-ghost,.btn-outline,.sub-btn,.dp-cta,.ap-cta,.load-more-btn{
  min-height:46px!important;border-radius:var(--premium-radius)!important;box-shadow:none!important;
  font-family:var(--premium-mono)!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;padding:13px 24px!important;
  transition:background .2s,color .2s,border-color .2s,transform .2s!important;
}
.btn-gold{background:var(--premium-gold)!important}.btn-gold::before{display:none!important}
.btn-ink:hover,.btn-gold:hover,.btn-outline:hover,.btn-ghost:hover{letter-spacing:.04em!important;transform:translateY(-2px)!important}

/* Homepage bands */
.hero{min-height:min(900px,100svh)!important;background:var(--premium-dark)!important}
.hero-body{width:min(100%,var(--premium-max));padding-left:var(--premium-gutter)!important;padding-right:var(--premium-gutter)!important;margin:0 auto}
.hero::after{
  content:'';position:absolute;right:-8%;top:12%;width:46vw;height:74%;opacity:.2;
  background:linear-gradient(135deg,transparent 0 30%,#79562b 30% 37%,#d2ad6c 37% 45%,#8c6734 45% 52%,transparent 52%);
  transform:skewX(-12deg);pointer-events:none;
}
.hero-h1-sub{font-family:'Noto Sans TC',sans-serif!important;font-size:clamp(17px,1.7vw,24px)!important;letter-spacing:-.02em!important;line-height:1.45!important}
.hero-h1 em{font-style:normal;color:var(--premium-gold)}
.hero-manifesto{max-width:620px!important;font-size:17px!important;line-height:1.75!important}
.hero-fit span,.sm-tag,.dp-tag{border-radius:3px!important;font-family:var(--premium-mono)!important;font-size:14px!important}
.marquee-wrap{padding:13px 0!important}.marquee-item-txt{font-family:var(--premium-mono)!important;font-size:14px!important}
.intro{max-width:var(--premium-max);margin:0 auto}.intro-left,.intro-right{padding:90px var(--premium-gutter)!important}
.sm-header,.cs-header{padding-left:max(var(--premium-gutter),calc((100vw - var(--premium-max))/2 + var(--premium-gutter)))!important;padding-right:max(var(--premium-gutter),calc((100vw - var(--premium-max))/2 + var(--premium-gutter)))!important}
.sm-grid{max-width:var(--premium-max);margin:0 auto;background:transparent!important;gap:1px!important}
.sm-card{border-radius:0!important;box-shadow:none!important}.sm-card-num{font-family:'Noto Sans TC',sans-serif!important;font-weight:500!important;font-size:64px!important}
.work-proof{max-width:var(--premium-max);margin:0 auto}.wp-n{font-family:'Noto Sans TC',sans-serif!important;font-weight:500!important;letter-spacing:-.05em}
.work-proof .wp-cell:nth-child(2){background:linear-gradient(135deg,#d7b579,#bd914d)!important}
.work-proof .wp-cell:nth-child(2) .wp-n,.work-proof .wp-cell:nth-child(2) .wp-l{color:var(--premium-dark)!important}
.cs-grid{max-width:var(--premium-max);margin-left:auto!important;margin-right:auto!important;gap:14px!important}.cs-card{margin:0!important;border-radius:var(--premium-radius)!important}
.testimonial-block{background-image:none!important}.tb-grid{gap:14px!important}.tb-item,.tb-item-glod{border:1px solid var(--premium-line);padding:30px!important}

/* Forms */
.fi,.fs,.ft{border-radius:var(--premium-radius)!important;border-color:rgba(255,255,255,.18)!important;min-height:48px}
.rl{border-radius:var(--premium-radius)!important}
.sub-btn{background:var(--premium-gold)!important}

/* Footer becomes a deliberate sign-off. */
footer{padding-top:0!important;border-top:1px solid rgba(255,255,255,.12)}
.footer-statement{
  max-width:var(--premium-max);margin:0 auto;padding:54px 0 34px;
  font-family:'Noto Sans TC',sans-serif;font-size:clamp(62px,12vw,168px);
  font-weight:500;letter-spacing:-.08em;line-height:.82;color:rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;
}
.footer-statement span{color:rgba(205,166,101,.22)}
.footer-top{border-top:0!important;border-bottom-color:rgba(255,255,255,.12)!important}
.footer-links a{font-family:var(--premium-mono)!important;font-size:14px!important}

/* Mobile */
@media(max-width:991px){
  .site-nav,.site-nav.scrolled{height:66px!important}
  .hero{min-height:auto!important}.hero-body{padding-top:116px!important;padding-bottom:76px!important}
  .hero::after{right:-35%;width:90vw;opacity:.13}
  .hero-bottom{grid-template-columns:1fr!important}.hero-ctas{width:100%;flex-direction:row!important}
  .hero-ctas a{flex:1}
  .intro{grid-template-columns:1fr!important}.intro-left,.intro-right{padding:64px 24px!important}
  .sm-grid{margin:0 20px}.cs-grid{margin-left:20px!important;margin-right:20px!important}
  .footer-statement{padding-top:42px;font-size:20vw}
  .article-list{grid-template-columns:1fr!important}
}
@media(max-width:640px){
  .hero-h1{font-size:clamp(42px,13vw,62px)!important}.hero-body{padding-left:20px!important;padding-right:20px!important}
  .hero-ctas{flex-direction:column!important}.hero-ctas a{width:100%}
  .sec,.sec-sm,.articles-preview,.testimonial-block{padding-left:20px!important;padding-right:20px!important}
  .sm-header,.cs-header{padding-left:20px!important;padding-right:20px!important}
  .sm-card{padding:38px 26px!important}.sm-card-desc{height:auto!important}
  .work-proof{grid-template-columns:1fr 1fr!important}.wp-cell{padding:40px 14px!important}
  .footer-statement{letter-spacing:-.09em}
  .mobile-consult{border-radius:var(--premium-radius)!important;background:rgba(23,20,17,.98)!important}
  .mobile-consult strong{border-radius:3px!important;font-family:var(--premium-mono)!important}
}