:root { --vx-color-1:#f1f3f0; --vx-color-2:#45bedf; --vx-color-3:#b5e5ed; --vx-color-4:#101719; --vx-background:#101719; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#101719; color:#f1f3f0; font-family:"TikTok Sans",sans-serif; font-weight:400; font-stretch:100%; letter-spacing:0; line-height:1.45; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid #45bedf; outline-offset:6px; }
h1,h2,h3,nav,.button,.contact-link { font-family:"TikTok Sans",sans-serif; font-weight:400; font-stretch:100%; letter-spacing:-.02em; line-height:1.1; }
h1,h2,h3,p,figure { margin:0; }
img { display:block; max-width:100%; height:auto; }
.section { padding:120px 5vw; scroll-margin-top:20px; }
.section h2 { font-size:clamp(48px,7.5vw,108px); }
.opening { position:relative; padding:0 5vw; overflow:hidden; background:#0e2025; }
header { position:relative; display:flex; justify-content:space-between; align-items:center; padding:32px 0; gap:24px; z-index:2; }
.logo { width:245px; }
nav { display:flex; gap:32px; font-size:16px; }
nav a { padding:10px 0; }
nav a:hover { color:#45bedf; }
.hero-copy { position:relative; z-index:1; padding-top:38px; }
h1 { font-size:clamp(68px,10.2vw,150px); font-weight:500; }
.hero-bottom { display:flex; justify-content:space-between; align-items:center; padding:26px 0 36px; }
.hero-bottom p { font-size:24px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; background:#45bedf; color:#101719; border:0; border-radius:80px; padding:21px 28px; font-size:18px; cursor:pointer; transition:background .2s; }
.button:hover { background:#b5e5ed; }
.button img { width:24px; height:24px; }
.hero-photo { position:relative; width:min(900px,100%,var(--sharp)); margin:0 auto; aspect-ratio:1.95; object-fit:cover; object-position:center; }
.intro { background:#101719; }
.intro h2 { max-width:1200px; margin-bottom:100px; font-size:clamp(44px,6.3vw,88px); }
.directions-head { display:flex; justify-content:flex-end; margin-bottom:48px; }
.directions-head h3 { font-size:30px; width:50%; }
.directions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #ffffff30; }
.direction { display:flex; align-items:flex-start; gap:32px; padding:35px 32px 35px 0; border-bottom:1px solid #ffffff30; }
.direction:nth-child(even) { padding-left:35px; border-left:1px solid #ffffff30; }
.direction p { max-width:420px; font-size:22px; }
.number { color:#45bedf; font-size:18px; }
.work { padding-top:40px; }
.direction-showcase { display:grid; grid-template-columns:1.2fr 1fr; gap:70px; align-items:center; padding:50px 0 100px; }
.direction-showcase h2 { font-size:clamp(48px,5.5vw,78px); margin-bottom:30px; }
.direction-showcase p { color:#aebabc; max-width:540px; font-size:20px; }
.photo-pair { display:flex; flex-direction:column; align-items:center; gap:26px; }
.photo-pair img { width:min(100%,var(--sharp)); }
.photo-pair img:nth-child(2) { align-self:flex-end; }
.case { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 64px; align-items:start; border-top:1px solid #ffffff30; padding:64px 0; }
.case-image { background:#182629; display:flex; justify-content:center; padding:24px 0; min-height:300px; align-items:center; }
.case-image img { width:min(100%,var(--sharp)); }
.case-copy h3 { font-size:clamp(28px,3vw,44px); margin-bottom:30px; }
.case-copy p { font-size:18px; color:#b8c4c5; margin-top:20px; }
.case-copy p:first-of-type { color:#f1f3f0; }
.case-text { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding-left:0; }
.case-composition { padding:30px; background:#1b2c30; border-radius:8px; }
.case-stat { display:flex; align-items:center; gap:30px; padding:8px 0 25px; }
.case-stat strong { font-size:100px; letter-spacing:-.02em; line-height:1.1; font-weight:400; color:#45bedf; }
.case-stat span { max-width:210px; font-size:22px; }
.composition-note { border-top:1px solid #ffffff30; padding-top:22px; font-size:17px; color:#b8c4c5; }
.vxk-flow__steps { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr; gap:35px; }
.vxk-flow__step { position:relative; min-height:140px; padding:26px; background:#eaf0ed; color:#101719; border-radius:4px; }
.vxk-flow__step h4 { font-size:27px; margin:0 0 14px; font-weight:400; letter-spacing:-.02em; line-height:1.1; }
.vxk-flow__step p { font-size:18px; }
.vxk-flow__step:not(:last-child)::after { content:""; position:absolute; bottom:-35px; left:50%; height:35px; width:1px; background:#45bedf; }
.vxk-flow__step.is-now { background:#45bedf; }
.broadcast-inputs { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.broadcast-inputs span { position:relative; padding:20px; border:1px solid #5a7a80; font-size:20px; border-radius:4px; }
.broadcast-inputs span::after { content:""; position:absolute; top:100%; height:33px; left:50%; width:1px; background:#45bedf; }
.broadcast-output { margin-top:32px; padding:26px; background:#45bedf; color:#101719; font-size:30px; letter-spacing:-.02em; line-height:1.1; }
.broadcast>p { margin-top:22px; color:#b8c4c5; }
.no-break { white-space:nowrap; }
@media(max-width:800px) {
.case-text { grid-template-columns:minmax(0,1fr); }
.broadcast-output { font-size:26px; overflow-wrap:anywhere; }
.case-composition { padding:24px; }
.broadcast-inputs span { font-size:17px; padding:15px; }
.intro h2 { font-size:40px!important; }
}
.case-text .case-copy h3 { max-width:760px; }
.case-text .case-copy p { max-width:740px; }
.vxk-metrics__grid { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vxk-tile { display:flex; align-items:center; gap:40px; padding:38px; border-radius:8px; color:#101719; }
.vxk-tile--accent { background:var(--vx-color-2); }
.vxk-tile--light { background:var(--vx-color-1); }
.vxk-tile__figure { font-size:100px; font-weight:400; letter-spacing:-.02em; line-height:1.1; }
.vxk-tile p { max-width:230px; font-size:21px; }
.awards { background:#eaf0ed; color:#101719; color-scheme:light; }
.awards h2 { margin-bottom:70px; }
.letters { display:grid; grid-template-columns:repeat(4,1fr); gap:48px 24px; }
.letter-link { display:block; background:#fff; padding:16px; transition:box-shadow .2s; }
.letter-link:hover { box-shadow:0 6px 30px #10171920; }
.letter-link img { width:100%; aspect-ratio:.71; object-fit:contain; }
figcaption { margin-top:20px; }
figcaption h3 { font-size:21px; }
figcaption p { margin-top:8px; color:#657276; }
.team { background:#eaf0ed; color:#101719; padding-top:50px; color-scheme:light; }
.team h2 { margin-bottom:65px; }
.people { display:grid; grid-template-columns:repeat(3,1fr); gap:65px 32px; }
.people figure { width:min(100%,260px); }
.people img { width:min(100%,var(--sharp)); border-radius:6px; }
.people figcaption h3 { font-size:26px; }
.experts { font-size:clamp(32px,4.5vw,64px); letter-spacing:-.02em; line-height:1.1; max-width:1050px; padding-top:100px; }
.experts span { color:#198fa9; }
.contacts { background:#45bedf; color:#101719; color-scheme:light; }
.contact-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:90px; margin-top:70px; }
.contact-grid p { font-size:22px; }
.contact-link { display:block; font-size:clamp(26px,3.2vw,48px); margin-top:32px; }
.email { font-size:clamp(24px,2.8vw,38px); margin-top:16px; }
.location h3 { font-size:30px; margin-bottom:18px; }
.map-link { display:flex; align-items:center; gap:24px; margin-top:28px; }
.map-link>img { width:160px; height:160px; object-fit:cover; border-radius:50%; }
.map-link span { max-width:140px; font-size:18px; }
.map-link span img { width:24px; margin-top:10px; }
.request { display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.request>div p { font-size:20px; color:#aebabc; max-width:430px; margin-top:35px; }
form { display:flex; flex-direction:column; gap:28px; }
form label { display:block; color:#b8c4c5; font-size:16px; }
form input:not([type=checkbox]),form textarea { display:block; width:100%; border:0; border-bottom:1px solid #ffffff50; padding:12px 0; border-radius:0; background:transparent; color:#f1f3f0; outline:none; }
form input:focus,form textarea:focus { border-color:#45bedf; }
form textarea { resize:vertical; }
form .consent { display:flex; align-items:flex-start; gap:14px; font-size:14px; }
.consent input { accent-color:#45bedf; width:20px; height:20px; flex-shrink:0; margin:0; }
.consent a { text-decoration:underline; }
.privacy-link { font-size:14px; text-decoration:underline; color:#aebabc; margin-top:-12px; }
form .button { width:100%; }
.honey { position:absolute!important; left:-10000px; width:1px!important; }
.form-status { min-height:22px; font-size:16px; }
footer { position:relative; padding:45px 5vw; background:#0c282f; color:#f1f3f0; min-height:480px; height:80svh; max-height:800px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; }
.back-top { display:flex; align-items:center; gap:8px; }
.back-top img { width:20px; height:20px; filter:invert(1); }
.footer-top p { font-size:14px; color:#bed0d3; }
.wordmark { font-size:clamp(50px,9vw,130px); letter-spacing:-.02em; line-height:1.1; margin-top:90px; }
dialog { border:0; background:#eaf0ed; padding:32px; max-width:95vw; max-height:95svh; }
dialog::backdrop { background:#000c; }
.letter-full { max-width:min(var(--sharp),80vw); max-height:85svh; object-fit:contain; }
.close-dialog { position:absolute; top:8px; right:8px; border:0; background:#45bedf; padding:6px; cursor:pointer; }
.close-dialog img { width:24px; height:24px; }
.legal { background:#eaf0ed; color:#101719; color-scheme:light; padding:60px max(24px,calc((100vw - 960px)/2)); }
.legal h1 { font-size:clamp(36px,5vw,64px); margin:50px 0; }
.legal p { margin:24px 0; font-size:18px; }
.legal a { text-decoration:underline; }
@media(max-width:800px) {
.section { padding:75px 6vw; }
header { flex-direction:column; align-items:flex-start; padding:24px 0; gap:20px; }
.logo { width:210px; }
nav { width:100%; gap:0; justify-content:space-between; font-size:14px; }
.opening { padding:0 6vw; }
.hero-copy { padding-top:30px; }
h1 { font-size:clamp(39px,8.8vw,70px); }
.hero-bottom { align-items:flex-start; flex-direction:column; gap:26px; }
.hero-bottom p { font-size:21px; }
.hero-photo { aspect-ratio:1.35; }
.button { padding:18px 24px; font-size:17px; }
.intro h2 { font-size:44px; margin-bottom:50px; }
.directions-head h3 { width:100%; font-size:25px; }
.directions { grid-template-columns:1fr; }
.direction,.direction:nth-child(even) { padding:24px 0; border-left:0; gap:24px; }
.direction p { font-size:20px; }
.direction-showcase { grid-template-columns:1fr; gap:40px; padding:0 0 65px; }
.direction-showcase:not(:first-child) { padding-top:70px; }
.direction-showcase h2 { font-size:44px; }
.photo-pair { flex-direction:row; align-items:center; gap:20px; }
.photo-pair img { max-width:55%; }
.photo-pair img:nth-child(2) { max-width:35%; align-self:center; }
.case { grid-template-columns:minmax(0,1fr); gap:30px; padding:42px 0; }
.case-image { min-height:0; padding:16px 0; }
.case-copy h3 { font-size:30px; }
.case-copy p { font-size:17px; }
.case-text { padding-left:0; }
.vxk-metrics__grid { grid-template-columns:1fr; }
.vxk-tile { padding:26px; gap:24px; }
.vxk-tile__figure { font-size:72px; }
.vxk-tile p { font-size:19px; }
.letters { grid-template-columns:repeat(2,1fr); gap:36px 16px; }
.letter-link { padding:8px; }
figcaption h3 { font-size:17px; }
figcaption p { font-size:14px; }
.people { grid-template-columns:repeat(2,1fr); gap:36px 22px; }
.people figcaption h3 { font-size:20px; }
.experts { padding-top:60px; font-size:36px; }
.contact-grid { grid-template-columns:1fr; gap:55px; margin-top:45px; }
.contact-grid p { font-size:20px; }
.request { grid-template-columns:1fr; gap:50px; }
.section h2 { font-size:48px; }
.awards h2 { font-size:42px; }
.footer-top { flex-direction:column; gap:24px; }
footer { height:85svh; padding:36px 6vw; min-height:520px; }
.wordmark { font-size:9vw; margin-top:55px; }
}
@media(max-width:360px) {
.section h2 { font-size:39px; }
.intro h2 { font-size:30px!important; }
.awards h2 { font-size:32px; }
.direction-showcase { grid-template-columns:minmax(0,1fr); }
.vxk-metrics__grid { grid-template-columns:minmax(0,1fr); }
.vxk-tile { padding:22px; gap:18px; }
.vxk-tile__figure { font-size:60px; }
.vxk-tile p { min-width:0; font-size:17px; }
.case-stat { gap:20px; }
.case-stat strong { font-size:80px; }
.case-stat span { font-size:19px; min-width:0; overflow-wrap:anywhere; }
nav { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }