/* Shared reading and navigation rules. Keep each collection's art direction. */
:root{--vis-display:'Cormorant Garamond','Noto Serif TC',serif;--vis-copy:'DM Sans','Noto Sans TC',sans-serif;--vis-reading:#625c54;--vis-anchor-offset:112px}
html{scroll-padding-top:var(--vis-anchor-offset)}
[id]{scroll-margin-top:var(--vis-anchor-offset)}
.site-nav .nav-links,.site-nav .site-links,.topbar .top-links{gap:24px}
.site-nav .nav-links a,.site-nav .site-links a,.topbar .top-links a,.main-nav>a,.main-nav .nav-service>a{font-size:13px;letter-spacing:.1em}
.site-nav .nav-links a,.site-nav .site-links a{min-height:44px;display:inline-flex;align-items:center}
.site-nav .nav-submenu a{display:block}
.site-nav .brand img,.topbar .logo img,.bar-logo img{height:28px;width:auto}
.shared-mobile-nav.open{max-height:min(560px,calc(100dvh - var(--vis-nav-height)));overflow-y:auto;overscroll-behavior:contain}
.shared-nav-toggle{width:44px;height:44px}
.shared-nav-toggle span{left:5px;width:34px}
.shared-nav-toggle span:nth-child(1){top:12px}.shared-nav-toggle span:nth-child(2){top:21px}.shared-nav-toggle span:nth-child(3){top:30px}
.shared-nav-toggle[aria-expanded="true"] span:nth-child(1),.shared-nav-toggle[aria-expanded="true"] span:nth-child(3){top:21px}
.shared-mobile-nav a{font-family:var(--vis-display);min-height:52px}

/* Separate the reading column from the photograph, including while scrolling. */
body.kinetic-page .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto;gap:clamp(36px,5vw,80px);min-height:88svh;align-items:center;padding:140px 5vw 80px}
body.kinetic-page .hero-copy{grid-column:1;grid-row:1;max-width:none;transform:none;opacity:1;will-change:auto}
body.kinetic-page .hero-media{grid-column:2;grid-row:1;aspect-ratio:4/3;transform:none;will-change:auto}
body.kinetic-page .hero-media img,body.kinetic-page .hero-media video{transform:none;will-change:auto}
body.kinetic-page .hero h1{font-family:var(--vis-display);font-size:clamp(38px,4.1vw,64px);line-height:1.35;letter-spacing:-.025em}
body.kinetic-page .hero p{font-size:16px;color:var(--vis-reading);line-height:1.9}
body.kinetic-page .eyebrow,body.kinetic-page .kicker{font-size:12px;letter-spacing:.18em;color:#805e43}
body.kinetic-page .body,body.kinetic-page .dark .body{color:var(--vis-reading);font-size:16px}
body.kinetic-page .card p,body.kinetic-page .guide-card p,body.kinetic-page .fact p,body.kinetic-page .dark .card p{font-size:15px;color:var(--vis-reading)}
body.kinetic-page .card-no,body.kinetic-page .card-link,body.kinetic-page .guide-card b{font-size:12px;letter-spacing:.08em}
body.kinetic-page .hero .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:28px}
body.kinetic-page .hero-actions .button{margin:0;padding:15px 20px;background:var(--kinetic-ink);color:var(--kinetic-bg);border:0;font-size:13px;min-height:48px}
.hero-text-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;border-bottom:1px solid currentColor}
body.kinetic-page .section{padding:clamp(76px,8vw,120px) 0}
body.kinetic-page .section-head{gap:6vw;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:64px}
body.kinetic-page .card{grid-template-columns:130px minmax(200px,.9fr) minmax(0,1.3fr);gap:28px}
body.kinetic-page .card-link{grid-column:2 / -1;justify-self:start;min-height:44px;display:inline-flex;align-items:center}
body.kinetic-plans .card.plan-choice{grid-template-columns:minmax(190px,.85fr) minmax(220px,.85fr) minmax(0,1.3fr);align-items:start;padding:38px 0;gap:32px}
body.kinetic-plans .price{margin:0;font-size:clamp(34px,3.4vw,52px);line-height:1.3}
body.kinetic-plans .price small{display:block;margin-top:10px;font-size:12px;color:var(--vis-reading)}
body.kinetic-plans .clean-list{margin:0;min-width:0}
body.kinetic-plans .clean-list li{font-size:15px;line-height:1.85}
body.kinetic-plans article.card .clean-list{grid-column:2 / -1}
body.kinetic-plans .plan-choice:hover{padding-left:0;background:rgba(154,114,82,.04)}
.footer-nav{font-size:12px;letter-spacing:.08em}

/* Homepage typography and content-safe utility navigation. */
#hero .hero-title,.section .h2,.njp-text .h2,.njp-text .h2 em,.contact-title{font-family:var(--vis-display)}
.home-chapter-nav.is-suppressed,.home-chapter-nav.visible.is-suppressed{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(120%)}
#homeChapterNav{bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.home-chapter-nav.visible{transform:translateX(-50%)}
.home-chapter-link{min-height:44px;font-size:13px}
.mobile-nav.open{max-height:min(600px,calc(100dvh - 80px));overflow-y:auto}

/* Collection labels use the same optical scale on light and dark pages. */
.filterbar .filter{min-height:44px;font-size:13px;padding:10px 18px}
.cover-index,.cover-subtitle,.work-copy p{font-size:13px}
.bar-logo{display:flex;align-items:center}
.mag-back{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.archive-nav>a,.archive-footer a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.archive-nav .archive-links{display:flex;gap:24px;align-items:center}
.archive-links a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
.topbar #primary-nav{gap:24px;font-family:var(--vis-copy);font-size:13px;letter-spacing:.08em}

/* Tables remain real tables. An explicit scroll region preserves comparisons. */
.comparison-region{position:relative;margin:28px 0;max-width:100%}
.comparison-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#9a7252 #e8e0d6}
.comparison-scroll:focus-visible{outline:2px solid #9a7252;outline-offset:4px}
.comparison-scroll .compare-table{display:table;margin:0;width:100%}
.comparison-hint{display:none;font:400 13px/1.6 var(--vis-copy);color:#625c54;margin:0 0 12px}
.article-copy>section{scroll-margin-top:var(--vis-anchor-offset)}

@media(min-width:701px){
  .showcase .intro{width:30%;padding-right:20px;pointer-events:auto}
  .showcase .intro h1{white-space:normal;font-size:clamp(30px,3vw,48px);line-height:1.4}
  .showcase .intro p{max-width:100%;font-size:15px}
}
@media(max-width:1100px) and (min-width:761px){
  body.kinetic-plans .card.plan-choice{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body.kinetic-plans .plan-choice .clean-list{grid-column:1 / -1}
  .site-nav .nav-links,.topbar .top-links{gap:18px}
}
@media(max-width:900px){
  body.kinetic-page .hero{grid-template-columns:1fr;gap:28px;min-height:auto;padding:112px 5vw 56px}
  body.kinetic-page .hero-media{grid-column:1;grid-row:2;aspect-ratio:4/3}
  body.kinetic-page .hero-copy{grid-column:1;grid-row:1;max-width:680px}
  body.kinetic-page .hero h1{font-size:clamp(36px,6vw,52px)}
}
@media(max-width:760px){
  :root{--vis-anchor-offset:92px}
  body.kinetic-page .hero{padding:104px 18px 40px;gap:24px}
  body.kinetic-page .hero h1{font-size:clamp(34px,10vw,44px);line-height:1.4;letter-spacing:-.025em}
  body.kinetic-page .hero p{font-size:15px;line-height:1.85}
  body.kinetic-page .section{padding:60px 0}
  body.kinetic-page .section-head{grid-template-columns:1fr;gap:24px;margin-bottom:36px}
  body.kinetic-page .card,body.kinetic-page .card.plan-choice{display:grid;grid-template-columns:1fr;gap:16px;padding:28px 0}
  body.kinetic-page .card h3{margin:0;font-size:28px}
  body.kinetic-page .card-link,body.kinetic-plans article.card .clean-list{grid-column:1}
  body.kinetic-page .card-link,body.kinetic-page .guide-card b{display:inline-flex}
  body.kinetic-plans .price{font-size:38px}
  body.kinetic-plans .price small{display:inline;margin-left:10px}
  body.kinetic-page .contact-links{margin-top:32px}
  .nav-toggle{width:44px;height:44px}
  .nav-toggle span{left:5px;width:34px}
  .nav-toggle span:nth-child(1){top:12px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:30px}
  .nav-toggle.open span:nth-child(1),.nav-toggle.open span:nth-child(3){top:21px}
  .home-chapter-link{min-width:56px;min-height:44px;font-size:12px}
  .home-chapter-nav.is-suppressed{opacity:0;visibility:hidden;pointer-events:none}
  .filterbar{width:calc(100% - 24px);padding:4px 0;overflow:visible;flex-wrap:nowrap;justify-content:center;gap:4px}
  .filterbar .filter{flex:1 1 0;min-width:0;padding:10px 4px;font-size:12px;letter-spacing:0}
  body.detail-mode .filterbar{flex-wrap:wrap;background:#1b1916}
  .comparison-hint{display:block}
  .comparison-scroll .compare-table{min-width:660px}
  .comparison-scroll .compare-table th,.comparison-scroll .compare-table td{min-width:0;font-size:14px;padding:16px 14px}
  .comparison-scroll .compare-table th:first-child,.comparison-scroll .compare-table td:first-child{position:sticky;left:0;z-index:1;background:#f6f0e6;min-width:72px;box-shadow:3px 0 8px rgba(0,0,0,.05)}
  .comparison-scroll .compare-table th:first-child{z-index:2}
  .topbar #primary-nav a{min-height:44px;display:inline-flex;align-items:center}
  .menu-toggle{min-width:44px;min-height:44px;transform:none}
  .archive-nav .archive-links{gap:14px;flex-wrap:wrap;justify-content:flex-end;max-width:64%}
  .archive-links a{font-size:12px}
  .archive-nav img{max-width:110px;height:auto}
  /* Reduce repeated transitions without removing case studies or service information. */
  body:has(#homeChapterNav) .section{padding-top:56px;padding-bottom:56px}
  body:has(#homeChapterNav) .imgband.theater{min-height:56svh}
  body:has(#homeChapterNav) .section-head{margin-bottom:32px}
  #about,#motion,#gs3d,#plans,#process,#quote,#faq,#contact{padding-top:64px;padding-bottom:64px}
  .option-card{padding:22px 14px}
  .option-card .o-name{font-size:14px;line-height:1.6}
  .mobile-tech-summary{font:300 24px/1.5 var(--vis-display);cursor:pointer;padding:24px 0;color:inherit}
  .mobile-tech-summary:focus-visible{outline:2px solid #9a7252;outline-offset:4px}
  .mobile-tech-details{border-top:1px solid rgba(128,111,96,.25);border-bottom:1px solid rgba(128,111,96,.25)}
  #staging:has(.mobile-tech-details),#color-grade:has(.mobile-tech-details){padding:28px 18px}
}
@media(min-width:761px){.mobile-tech-summary{display:none}}
@media(max-width:340px){.filterbar{flex-wrap:wrap}.filterbar .filter{flex:0 1 30%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Lift the mobile chapter menu above the device safe area. */
@media(max-width:760px){
  #homeChapterNav{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}