/* Two websites, one visual showcase. The original site captures stay intact. */
.website-showcase { margin-top: 65px; padding-top: 46px; border-top: 1px solid #15151535; scroll-margin-top: 30px; }
.website-showcase-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 27px; }
.website-showcase-heading h3 { margin: 0; font-size: clamp(40px,4.2vw,66px); line-height: 1; font-weight: 550; letter-spacing: -.065em; }
.website-showcase-heading h3 em { font-family: var(--serif); font-weight: 400; }
.website-tabs { display: flex; gap: 7px; flex-shrink: 0; padding: 5px; border: 1px solid #15151520; border-radius: 11px; background: #e8e5df; }
.website-tabs button { display: flex; align-items: center; gap: 12px; min-height: 61px; padding: 12px 16px; border: 1px solid transparent; border-radius: 7px; background: none; color: #746d64; font: inherit; font-size: 11px; white-space: nowrap; text-align: left; transition: background .25s,color .25s,box-shadow .25s; }
.website-tabs button[aria-selected=true] { background: #fff9fc; border-color: #86466528; color: #63394f; box-shadow: 0 3px 10px #4a273513; }
.website-tabs [data-website-tab=meteor][aria-selected=true] { background: #f2f8fc; border-color: #28587835; color: #214961; }
.website-tab-icon { display: grid; place-items: center; width: 31px; height: 31px; flex-shrink: 0; border: 1px solid #86466525; border-radius: 8px; color: #864665; }
.website-tab-icon svg { width: 20px; height: 20px; }
[data-website-tab=meteor] .website-tab-icon { color: #285878; border-color: #28587830; }
.website-tab-copy strong { display: block; font-size: 11px; line-height: 1.5; font-weight: 550; }
.website-tab-copy small { display: block; font-size: 8px; line-height: 1.7; color: #8a7b82; font-weight: 400; margin-top: 3px; }
[data-website-tab=meteor] .website-tab-copy small { color: #718596; }
.website-tabs button>span:last-child { font-size: 7px; opacity: .55; }
.website-tab-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #864665; }
[data-website-tab=meteor] .website-tab-dot { background: #285878; }
.career-portfolio .website-showcase .website-panel { margin: 0; padding: 0; border: 0; scroll-margin-top: 30px; outline: none; }
.website-panels { isolation: isolate; }
.website-stage { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); align-items: center; gap: clamp(28px,4vw,60px); min-height: 560px; padding: clamp(30px,4vw,60px); border-radius: 5px; overflow: hidden; }
.website-stage-quyen { background: #e9dde3; color: #513444; }
.website-stage-meteor { background: #102b41; color: #e8f4ff; }
.website-caption { min-width: 0; position: relative; z-index: 2; align-self: start; padding-top: 20px; }
.website-eyebrow { font-size: 8px; letter-spacing: .1em; line-height: 1.8; }
.website-caption h4 { margin: 28px 0 0; font-size: clamp(50px,5.5vw,82px); font-weight: 500; line-height: .96; letter-spacing: -.065em; }
.website-caption h4 em { font-family: var(--serif); font-weight: 400; }
.website-tagline { font-size: 12px; line-height: 1.8; margin-top: 23px; max-width: 245px; color: #735365; }
.website-stage-meteor .website-tagline { color: #b1c9da; }
.website-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 23px; }
.website-tags span { padding: 7px 11px; border: 1px solid #86466535; border-radius: 24px; font-size: 8px; white-space: nowrap; }
.website-stage-meteor .website-tags span { border-color: #aacfe940; color: #c3dff2; }
.website-case-button { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 160px; min-height: 43px; margin-top: 29px; padding: 8px 0; background: none; color: inherit; border-bottom: 1px solid currentColor; font-size: 11px; text-align: left; }
.website-case-button>span { font-size: 22px; transition: translate .3s; }
.website-preview { display: block; position: relative; width: 100%; min-width: 0; height: 430px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.website-browser { display: block; position: absolute; top: 0; right: 0; width: 95%; overflow: hidden; border: 1px solid #86466530; border-radius: 8px; background: #fdf9f6; box-shadow: 0 23px 45px #57344627; transform: perspective(1000px) rotateY(-3deg) rotateZ(1deg); transition: transform .7s var(--ease); transform-origin: center; }
.website-browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; background: #fbf6f7; color: #735365; font-size: 7px; }
.website-browser-dots { display: flex; gap: 4px; }
.website-browser-dots i { width: 4px; height: 4px; border-radius: 50%; background: #b59ba9; }
.website-screen { display: block; aspect-ratio: 1.4; overflow: hidden; }
.website-screen img { display: block; width: 100%; height: auto; }
.website-scroll-image { animation: website-tour 24s ease-in-out infinite; animation-play-state: paused; will-change: transform; }
.website-stage.is-in-view .website-scroll-image { animation-play-state: running; }
.website-preview:focus-visible .website-scroll-image { animation-play-state: paused; }
@keyframes website-tour { 0%,5% { transform: translateY(0); } 46%,60% { transform: translateY(-42%); } 100% { transform: translateY(0); } }
.website-stage-quyen .website-scroll-image { animation-name: website-booking-tour; }
@keyframes website-booking-tour { 0%,5% { transform: translateY(0); } 46%,60% { transform: translateY(-27%); } 100% { transform: translateY(0); } }
.website-booking-card { display: block; position: absolute; left: 0; bottom: 0; width: 55%; max-width: 310px; overflow: hidden; border: 1px solid #86466535; border-radius: 9px; background: #fdf9f6; box-shadow: 0 20px 42px #57344635; animation: website-detail-float 7s ease-in-out infinite; animation-play-state: paused; }
.website-stage.is-in-view .website-booking-card,.website-stage.is-in-view .website-seo-card { animation-play-state: running; }
.website-booking-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; padding: 13px; color: #864665; font-size: 6px; letter-spacing: .06em; border-bottom: 1px solid #86466525; }
.website-booking-label>span { color: #8e7382; font-size: 5px; }
.website-booking-crop { display: block; position: relative; aspect-ratio: 600/520; overflow: hidden; }
.website-booking-crop img { position: absolute; top: 0; left: 0; width: 214%; max-width: none; height: auto; transform: translate(-48.4%,-51.5%); }
@keyframes website-detail-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.website-preview-arrow { display: grid; place-items: center; position: absolute; right: 0; bottom: 4px; width: 48px; height: 48px; border-radius: 50%; background: var(--highlight-yellow); color: var(--ink); box-shadow: var(--yellow-control-shadow); font-size: 28px; transition: rotate .3s; }
.website-meteor-visual { position: relative; min-width: 0; }
.website-stage-meteor .website-browser { border-color: #8fc3e040; background: #0b1b29; box-shadow: 0 23px 45px #0004; transform: perspective(1000px) rotateY(-3deg) rotateZ(-1deg); }
.website-stage-meteor .website-browser-bar { background: #e6f1f9; color: #3d5d74; }
.website-stage-meteor .website-browser-dots i { background: #8eafc6; }
.website-seo-card { position: absolute; left: 0; bottom: 0; z-index: 1; width: 230px; padding: 19px 20px 15px; border: 1px solid #c3e5fa55; border-radius: 9px; background: #e5f2fc; color: #173b56; box-shadow: 0 20px 40px #0003; animation: website-detail-float 7s ease-in-out infinite; animation-play-state: paused; pointer-events: none; }
.website-seo-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 9px; }
.website-seo-head strong { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -.06em; }
.website-seo-head small { font-size: 12px; letter-spacing: 0; margin-left: 2px; }
.website-seo-subtitle { margin-top: 6px; font-size: 7px; color: #53758d; }
.website-seo-spark { display: block; width: 100%; height: auto; margin: 13px 0 4px; overflow: visible; }
.website-seo-line { fill: none; stroke: #377ca7; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.website-seo-point { fill: #285878; }
.website-seo-value { font: 9px var(--font); fill: #285878; }
.website-seo-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; border-top: 1px solid #28587825; padding-top: 10px; font-size: 7px; color: #53758d; }
.website-seo-foot strong { font-size: 10px; font-weight: 500; color: #173b56; }
.website-preview-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; color: #847968; font-size: 8px; line-height: 1.8; }
.website-preview-meta>span:last-child { font-size: 7px; letter-spacing: .08em; }
@media(hover:hover) and (pointer:fine) { .website-preview:hover .website-browser { transform: perspective(1000px) rotateY(0deg) rotateZ(0deg) translateY(-5px); } .website-preview:hover .website-preview-arrow { rotate: 45deg; } .website-case-button:hover>span { translate: 3px -3px; } }
@media(min-width:761px) and (max-width:1100px) { .website-showcase-heading { align-items: start; flex-direction: column; gap: 22px; } .website-stage { gap: 28px; padding: 34px; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); } .website-caption h4 { font-size: 58px; } .website-preview { height: 375px; } .website-booking-card { width: 66%; } .website-seo-card { width: 205px; } }
@media(max-width:760px) {
  .website-showcase { margin-top: 41px; padding-top: 30px; scroll-margin-top: 20px; }
  .website-showcase-heading { display: block; padding-bottom: 21px; }
  .website-showcase-heading h3 { font-size: clamp(35px,8vw,47px); }
  .website-tabs { margin-top: 23px; width: 100%; gap: 5px; padding: 4px; }
  .website-tabs button { flex: 1; justify-content: center; gap: 8px; padding: 11px 9px; font-size: 10px; min-height: 59px; }
  .website-tab-icon { width: 27px; height: 29px; border-radius: 6px; }
  .website-tab-icon svg { width: 17px; height: 17px; }
  .website-tab-copy strong { font-size: 9px; }
  .website-tab-copy small { font-size: 6px; }
  .website-tabs button>span:last-child { font-size: 6px; }
  .website-stage { grid-template-columns: minmax(0,1fr); min-height: 0; padding: 27px 23px 26px; gap: 26px; }
  .website-caption h4 { font-size: clamp(36px,9vw,48px); margin-top: 15px; }
  .website-caption { padding-top: 0; }
  .website-caption h4 br { display: none; }
  .website-caption h4 em { margin-left: .13em; }
  .website-eyebrow { font-size: 6px; }
  .website-tagline { font-size: 10px; margin-top: 14px; max-width: 100%; }
  .website-tags { margin-top: 16px; }
  .website-tags span { font-size: 7px; padding: 6px 10px; }
  .website-case-button { margin-top: 15px; min-width: 150px; font-size: 10px; min-height: 38px; }
  .website-preview { height: clamp(320px,82vw,385px); }
  .website-browser { width: 96%; }
  .website-browser-bar { padding: 10px 11px; font-size: 6px; }
  .website-booking-card { width: 67%; max-width: 260px; }
  .website-booking-label { padding: 11px; font-size: 6px; }
  .website-booking-label>span { font-size: 5px; }
  .website-preview-arrow { width: 43px; height: 43px; font-size: 25px; }
  .website-seo-card { width: 200px; padding: 16px; }
  .website-seo-head strong { font-size: 30px; }
  .website-preview-meta { padding-top: 13px; font-size: 7px; }
  .website-preview-meta>span:last-child { font-size: 6px; }
}
@media(max-width:370px) { .website-tabs button { gap: 6px; font-size: 9px; padding-left: 6px; padding-right: 6px; } .website-tabs button>span:last-child { display: none; } .website-tab-icon { width: 23px; height: 27px; } .website-tab-copy strong { font-size: 8px; } .website-stage { padding-left: 18px; padding-right: 18px; } .website-caption h4 { font-size: 34px; } .website-preview { height: 300px; } .website-booking-card { width: 77%; } .website-seo-card { width: 180px; } }
@media(prefers-reduced-motion:reduce) { .website-scroll-image,.website-booking-card,.website-seo-card { animation: none!important; } .website-browser,.website-preview-arrow,.website-case-button>span { transition: none; } .website-preview:hover .website-browser { transform: none; } }
.motion-off .website-scroll-image,.motion-off .website-booking-card,.motion-off .website-seo-card { animation: none!important; }