@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Light.woff2) format("woff2");font-weight:300;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#fff;color:#222;font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.nav{font-family:"IBM Plex Sans",Arial,sans-serif !important;position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;padding:42px 45px;font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.nav a:hover{opacity:.6}
.nav .home{width:290px}.nav .home b{font-weight:700}
.nav .works{width:225px}
.nav .contact{margin-left:auto}
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:transparent}
.hero .logo{z-index:0}
.hero .logo{position:relative;width:29.5vw;max-width:600px;min-width:220px;margin-top:9vh}
.hero.has-video .logo{display:none}
.page{padding:160px 45px 80px}
.page h1{font-size:18px;font-weight:700;text-transform:uppercase;margin-bottom:40px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ph{aspect-ratio:4/3;background:#f2f2f2;display:flex;align-items:center;justify-content:center;font-size:14px;text-transform:uppercase;color:#999}
.ph-cap{margin-top:10px;font-size:14px;text-transform:uppercase}
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1200px}
.about p{font-size:20px;line-height:1.5;margin-bottom:20px}
@media(max-width:760px){.nav{padding:22px 20px;font-size:13px;gap:18px}.nav .home,.nav .works{width:auto}
.hero .logo{width:62vw}.page{padding:110px 20px 60px}.grid,.about{grid-template-columns:1fr}}
.cats{background:#fff;padding:0 45px 45px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.1vw,16px)}
.card{display:block}
.card img{display:block;width:100%;height:auto}
@media(max-width:999px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:599px){.cats{padding:0 20px 20px}.cat-grid{grid-template-columns:1fr}}
.hero video{clip-path:inset(0 0 3px 0)}
/* Portrait / mobile: show the whole 16:9 video frame (white bg blends with video) */
@media (max-aspect-ratio: 1/1), (max-width: 860px){
  .hero{height:auto;min-height:0;aspect-ratio:16/9;margin-top:90px;background:#fff}
  .hero video{object-fit:contain;clip-path:inset(0 0 3px 0)}
}
.about-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:"IBM Plex Sans",Arial,sans-serif;padding:120px 24px 60px}
.about-hero h1{font-weight:700;font-size:clamp(40px,4.4vw,72px);line-height:1.05;margin:0;letter-spacing:-.01em}
.about-hero .tag{font-weight:700;font-size:clamp(20px,2.1vw,34px);line-height:1.3;margin:.25em 0 0}
.about-hero .motto{font-weight:300;font-size:clamp(17px,1.7vw,26px);margin:3.2em 0 0}
.hero video{pointer-events:none}
.hero video::-webkit-media-controls,.hero video::-webkit-media-controls-start-playback-button,.hero video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
.contact-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:110px 45px 40px;background:#fff}
.contact-wrap{position:relative;width:100%;max-width:1600px}
.contact-wrap img{display:block;width:100%;height:auto}
.contact-wrap .hot{position:absolute;display:block;cursor:pointer}
/* Always show the full video frame (no crop); white bg blends with the white video */
.hero{background:#fff}
.hero video{object-fit:contain!important;top:90px;height:calc(100% - 90px)}
@media (max-aspect-ratio: 1/1), (max-width: 860px){.hero video{top:0;height:100%}}
.hero img.anim{position:absolute;left:0;width:100%;object-fit:contain;z-index:2;pointer-events:none;top:90px;height:calc(100% - 90px);clip-path:inset(0 0 3px 0)}
@media (max-aspect-ratio: 1/1), (max-width: 860px){.hero img.anim{top:0;height:100%}}
.snd{position:fixed;right:22px;bottom:22px;z-index:20;width:44px;height:44px;border-radius:50%;border:1px solid #111;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.snd svg{width:20px;height:20px}

.cw-m{display:none}
@media (max-width:860px){.cw-d{display:none}.cw-m{display:block}.contact-page{padding:90px 0 0;align-items:flex-start}}

.about-link{position:fixed;inset:0;z-index:9;display:block;cursor:pointer}
img,video{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

.foot{text-align:center;font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif;font-size:14px;color:#111;padding:28px 16px;background:#fff;position:relative;z-index:10}
.foot{font-family:"Calibri Light",Calibri,Carlito,"Segoe UI",Arial,sans-serif;font-weight:300;color:#8a8a8a;padding:10px 16px 8px}
@font-face{font-family:"P2P XLight";src:url(fonts/SourceSans3-ExtraLight.woff2) format("woff2");font-weight:200;font-display:swap}
.foot{font-family:"P2P XLight","Calibri Light",Calibri,sans-serif;font-weight:200}