:root{
  --kinetic-bg:#f4f1ea;
  --kinetic-ink:#171512;
  --kinetic-muted:#756f67;
  --kinetic-accent:#9a7252;
  --kinetic-line:rgba(23,21,18,.16);
  --kinetic-ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body.kinetic-page{background:var(--kinetic-bg);color:var(--kinetic-ink);overflow-x:clip}
body.kinetic-page .shell{width:min(1280px,calc(100% - 8vw))}

/* Secondary pages intentionally stay light and quiet. Motion supplies the drama. */
body.kinetic-page .site-nav{color:var(--kinetic-ink);background:rgba(244,241,234,.82);border:0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
body.kinetic-page .site-nav.is-scrolled,
body.kinetic-page .site-nav.scrolled{background:rgba(244,241,234,.92);border-bottom-color:var(--kinetic-line);box-shadow:none}
body.kinetic-page .site-nav .brand img{filter:invert(1)}
body.kinetic-page .site-nav .nav-links a{color:rgba(23,21,18,.72)}
body.kinetic-page .site-nav .nav-links a:hover,
body.kinetic-page .site-nav .nav-links a[aria-current="page"]{color:var(--kinetic-ink)}
body.kinetic-page .site-nav .nav-cta{border:0;background:transparent;color:var(--kinetic-ink);padding:10px 0;border-bottom:1px solid currentColor}
body.kinetic-page .site-nav .nav-submenu{border-color:var(--kinetic-line);background:rgba(244,241,234,.96);box-shadow:0 24px 70px rgba(29,23,18,.1)}
body.kinetic-page .site-nav .nav-submenu a:hover,
body.kinetic-page .site-nav .nav-submenu a[aria-current="page"]{background:rgba(23,21,18,.06)}

body.kinetic-page .hero{
  --hero-p:0;
  min-height:100svh;
  padding:clamp(124px,14vh,170px) 4vw clamp(64px,8vh,94px);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:1fr auto;
  gap:0;
  align-items:center;
  overflow:visible;
  background:var(--kinetic-bg);
  color:var(--kinetic-ink);
}
body.kinetic-page .hero:after{display:none}
body.kinetic-page .hero-media{
  position:relative;
  inset:auto;
  z-index:1;
  grid-column:4 / 12;
  grid-row:1;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#d8d2c8;
  transform:translate3d(calc(var(--hero-p) * -2vw),calc(var(--hero-p) * 1.5vh),0) scale(calc(1 + var(--hero-p) * .18));
  transform-origin:center;
  will-change:transform;
}
body.kinetic-page .hero-media img,
body.kinetic-page .hero-media video{width:100%;height:100%;object-fit:cover;filter:none;transform:scale(calc(1.035 - var(--hero-p) * .035));will-change:transform}
body.kinetic-page .hero-copy{
  position:relative;
  z-index:2;
  grid-column:1 / 6;
  grid-row:1;
  width:auto;
  max-width:600px;
  margin:0;
  padding:0;
  transform:translate3d(0,calc(var(--hero-p) * -42px),0);
  opacity:calc(1 - var(--hero-p) * 1.25);
  will-change:transform,opacity;
}
body.kinetic-page .eyebrow{margin-bottom:24px;color:var(--kinetic-accent);font-size:10px;letter-spacing:.28em}
body.kinetic-page .hero h1{max-width:10em;margin:0;font-family:'Noto Serif TC','Cormorant Garamond',serif;font-size:clamp(44px,5.2vw,78px);font-weight:300;line-height:1.18;letter-spacing:-.035em;text-wrap:balance}
body.kinetic-page .hero p{max-width:32em;margin-top:26px;color:var(--kinetic-muted);font-size:clamp(14px,1.15vw,17px);line-height:1.9}
body.kinetic-page .article-meta{color:var(--kinetic-muted)}
body.kinetic-page .hero-copy .button{margin-top:28px;background:transparent;color:var(--kinetic-ink);padding:10px 0;border-bottom:1px solid currentColor}
body.kinetic-page .hero-scroll{grid-column:11/13;grid-row:2;justify-self:end;color:var(--kinetic-muted);font-size:9px;letter-spacing:.2em}

body.kinetic-page .crumbs{display:none}
body.kinetic-page .service-dock{border-color:rgba(23,21,18,.1);background:rgba(244,241,234,.78);box-shadow:0 14px 44px rgba(35,29,24,.1)}
body.kinetic-page .service-dock a.active{background:var(--kinetic-ink);color:var(--kinetic-bg);box-shadow:none}

.kinetic-portal{--portal-p:0;position:relative;height:142vh;background:var(--kinetic-bg)}
.kinetic-frame{position:sticky;top:13vh;width:min(68vw,1080px);aspect-ratio:16/9;margin:0 auto;overflow:hidden;background:#d5d0c8;transform:scale(calc(.82 + var(--portal-p) * .18));transform-origin:center;will-change:transform}
.kinetic-frame img,.kinetic-frame video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--portal-p) * .08));will-change:transform}
.kinetic-frame video{background:#111}
.kinetic-caption{position:absolute;left:4vw;right:4vw;top:calc(13vh + min(38.25vw,607px) + 24px);display:flex;justify-content:space-between;color:var(--kinetic-muted);font-size:10px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase}
.kinetic-caption span:last-child{color:var(--kinetic-accent)}

body.kinetic-page .section{padding:clamp(110px,14vw,210px) 0;background:transparent;color:var(--kinetic-ink)}
body.kinetic-page .section.dark{background:transparent;color:var(--kinetic-ink)}
body.kinetic-page .section-head{grid-template-columns:minmax(0,.9fr) minmax(300px,.75fr);gap:14vw;margin-bottom:clamp(70px,9vw,120px)}
body.kinetic-page .section h2{font-family:'Noto Serif TC','Cormorant Garamond',serif;font-size:clamp(38px,5vw,72px);font-weight:300;line-height:1.28;letter-spacing:-.035em}
body.kinetic-page .lead{font-size:clamp(22px,2.35vw,34px);line-height:1.6}
body.kinetic-page .body,
body.kinetic-page .dark .body{color:var(--kinetic-muted);font-size:15px;line-height:2.05}
body.kinetic-page .kicker{color:var(--kinetic-accent)}

/* Lists replace the previous boxed-card aesthetic. */
body.kinetic-page .cards,
body.kinetic-page .guide-grid,
body.kinetic-page .pricing-factors,
body.kinetic-page .fact-grid{display:block;border:0;border-top:1px solid var(--kinetic-line);background:transparent}
body.kinetic-page .card,
body.kinetic-page .guide-card,
body.kinetic-page .pricing-factors>div,
body.kinetic-page .fact{position:relative;display:grid;grid-template-columns:120px minmax(220px,.75fr) minmax(260px,1fr) auto;gap:30px;min-height:0;padding:34px 0;align-items:center;border-bottom:1px solid var(--kinetic-line);background:transparent;color:var(--kinetic-ink);transition:padding .55s var(--kinetic-ease),opacity .4s}
body.kinetic-page .card:hover,
body.kinetic-page .guide-card:hover{padding-left:18px}
body.kinetic-page .card-no,
body.kinetic-page .guide-card span{color:var(--kinetic-accent);font-size:10px;letter-spacing:.16em}
body.kinetic-page .card h2,
body.kinetic-page .card h3,
body.kinetic-page .guide-card h3{margin:0;font-family:'Noto Serif TC','Cormorant Garamond',serif;font-size:clamp(24px,2.5vw,38px);font-weight:300;line-height:1.35}
body.kinetic-page .card p,
body.kinetic-page .guide-card p,
body.kinetic-page .pricing-factors p,
body.kinetic-page .fact p,
body.kinetic-page .dark .card p{margin:0;color:var(--kinetic-muted);font-size:13px;line-height:1.8}
body.kinetic-page .card-link,
body.kinetic-page .guide-card b{margin:0;padding:0;color:var(--kinetic-ink);font-size:10px;letter-spacing:.12em;white-space:nowrap}

.kinetic-preview{position:fixed;z-index:1100;left:0;top:0;width:min(34vw,520px);aspect-ratio:16/10;pointer-events:none;opacity:0;transform:translate3d(var(--preview-x,0),var(--preview-y,0),0) scale(.92);transition:opacity .25s,transform .6s var(--kinetic-ease);overflow:hidden;background:#d8d2c8}
.kinetic-preview.is-visible{opacity:1;transform:translate3d(var(--preview-x,0),var(--preview-y,0),0) scale(1)}
.kinetic-preview img{width:100%;height:100%;object-fit:cover}

body.kinetic-page .service-process{background:var(--kinetic-ink);color:var(--kinetic-bg)}
body.kinetic-page .service-process .process-head{grid-template-columns:minmax(0,.85fr) minmax(280px,.75fr);gap:14vw}
body.kinetic-page .service-process .process-head p{color:rgba(244,241,234,.58)}
body.kinetic-page .service-steps{grid-template-columns:repeat(4,1fr);gap:36px}
body.kinetic-page .service-steps:before,
body.kinetic-page .service-steps:after{top:8px}
body.kinetic-page .service-step{padding:0}
body.kinetic-page .service-step i{width:17px;height:17px;background:var(--kinetic-ink)}
body.kinetic-page .service-step h3{font-family:'Noto Serif TC','Cormorant Garamond',serif}
body.kinetic-page .service-step p{color:rgba(244,241,234,.58)}
body.kinetic-page .pricing-framework{border-color:rgba(244,241,234,.18)}
body.kinetic-page .pricing-factors{border-top-color:rgba(244,241,234,.18)}
body.kinetic-page .pricing-factors>div{grid-template-columns:1fr;border-bottom-color:rgba(244,241,234,.18);color:var(--kinetic-bg)}
body.kinetic-page .pricing-factors p{color:rgba(244,241,234,.58)}

body.kinetic-page .article-layout{grid-template-columns:190px minmax(0,820px);gap:11vw}
body.kinetic-page .article-toc{top:120px}
body.kinetic-page .answer-box,
body.kinetic-page .callout{padding:0 0 30px;border:0;border-bottom:1px solid var(--kinetic-line);background:transparent}
body.kinetic-page .editorial-figure{margin:70px 0;overflow:hidden}
body.kinetic-page .editorial-figure img{transform:scale(1.06);transition:transform 1.4s var(--kinetic-ease)}
body.kinetic-page .editorial-figure.in img{transform:scale(1)}
body.kinetic-page .compare-table{border-top:1px solid var(--kinetic-line)}

body.kinetic-page .contact-grid{gap:14vw}
body.kinetic-page .contact-link{padding:34px 0;transition:padding .5s var(--kinetic-ease)}
body.kinetic-page .contact-link:hover{padding-left:18px}
body.kinetic-page .cta{padding:0;background:transparent}
body.kinetic-page .cta .button,
body.kinetic-page .button{background:var(--kinetic-ink);color:var(--kinetic-bg)}
body.kinetic-page .footer{background:var(--kinetic-ink)}

.kinetic-reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--kinetic-ease),transform 1.1s var(--kinetic-ease)}
.kinetic-reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  body.kinetic-page .hero{min-height:auto;padding:110px 5vw 72px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:34px}
  body.kinetic-page .hero-media{grid-column:1;grid-row:2;aspect-ratio:4/3;transform:scale(calc(1 + var(--hero-p) * .08))}
  body.kinetic-page .hero-copy{grid-column:1;grid-row:1;max-width:680px;transform:none;opacity:1}
  body.kinetic-page .hero-scroll{display:none}
  body.kinetic-page .section-head{gap:50px}
  body.kinetic-page .card,
  body.kinetic-page .guide-card,
  body.kinetic-page .fact{grid-template-columns:76px minmax(180px,.8fr) 1fr;}
  body.kinetic-page .card-link,
  body.kinetic-page .guide-card b{display:none}
  .kinetic-preview{display:none}
}

@media(max-width:760px){
  body.kinetic-page .shell{width:calc(100% - 36px)}
  body.kinetic-page .site-nav{background:rgba(244,241,234,.93)}
  body.kinetic-page .shared-nav-toggle{color:var(--kinetic-ink)}
  body.kinetic-page .shared-mobile-nav{background:rgba(244,241,234,.98);color:var(--kinetic-ink)}
  body.kinetic-page .shared-mobile-nav a{border-color:var(--kinetic-line)}
  body.kinetic-page .hero{padding:104px 18px 56px;gap:28px}
  body.kinetic-page .hero h1{font-size:clamp(38px,11.4vw,54px);line-height:1.22;letter-spacing:-.045em}
  body.kinetic-page .hero p{margin-top:18px;font-size:13px}
  body.kinetic-page .hero-media{aspect-ratio:4/3}
  .kinetic-portal{height:108vh}
  .kinetic-frame{top:19vh;width:calc(100vw - 36px);aspect-ratio:4/3;transform:scale(calc(.9 + var(--portal-p) * .1))}
  .kinetic-caption{top:calc(19vh + (100vw - 36px) * .75 + 16px);left:18px;right:18px;font-size:8px}
  body.kinetic-page .section{padding:92px 0}
  body.kinetic-page .section-head,
  body.kinetic-page .service-process .process-head{grid-template-columns:1fr;gap:30px;margin-bottom:54px}
  body.kinetic-page .section h2{font-size:clamp(34px,10vw,48px)}
  body.kinetic-page .card,
  body.kinetic-page .guide-card,
  body.kinetic-page .pricing-factors>div,
  body.kinetic-page .fact{display:block;padding:28px 0}
  body.kinetic-page .card h2,
  body.kinetic-page .card h3,
  body.kinetic-page .guide-card h3{margin:14px 0 12px;font-size:27px}
  body.kinetic-page .card p,
  body.kinetic-page .guide-card p{font-size:13px}
  body.kinetic-page .service-steps{display:block}
  body.kinetic-page .service-step{min-height:0;margin:0;padding:30px 0;border-radius:0;border-bottom:1px solid rgba(244,241,234,.16);background:transparent}
  body.kinetic-page .service-step i{display:none}
  body.kinetic-page .pricing-framework{display:block}
  body.kinetic-page .article-layout{display:block}
  body.kinetic-page .article-toc{position:static;display:flex;gap:14px;margin-bottom:56px;overflow-x:auto}
  body.kinetic-page .article-toc span{display:none}
  body.kinetic-page .article-toc a{flex:none;white-space:nowrap}
  body.kinetic-page .contact-grid{display:block}
  body.kinetic-page .contact-links{margin-top:70px}
  body.kinetic-page .cta{display:block}
  body.kinetic-page .cta .button{margin-top:30px}
}

@media(prefers-reduced-motion:reduce){
  body.kinetic-page .hero-media,
  body.kinetic-page .hero-media img,
  body.kinetic-page .hero-copy,
  .kinetic-frame,
  .kinetic-frame img,
  .kinetic-reveal{transform:none!important;opacity:1!important;transition:none!important}
}
