@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --black:#101010;
  --text:#141414;
  --muted:#69717c;
  --soft:#8c949e;
  --line:#e3e5e7;
  --card:#f7f7f6;
  --max:1262px;
  --contact-max:1346px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font:inherit}
.header{
  width:var(--max);height:64px;
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;z-index:20
}
.brand{display:flex;flex-direction:column;gap:4px}
.brand strong{font-size:18px;font-weight:900;letter-spacing:-.055em;line-height:1}
.brand span{font-size:8px;color:#6d7680;font-weight:700;letter-spacing:.17em}
.nav{display:flex;gap:39px;margin-left:auto;margin-right:40px;height:100%;align-items:center}
.nav a{height:100%;display:flex;align-items:center;position:relative;font-size:12px;color:#626a74;font-weight:500}
.nav a.active,.nav a:hover{color:#111}
.nav a.active:after{content:"";position:absolute;bottom:18px;left:0;right:0;margin:auto;height:2px;background:#111}
.header-contact{font-size:11px;font-weight:700;color:#111}
.header-contact span{margin-left:10px;font-size:15px}
.menu{display:none;background:none;border:0}
.work{
  width:var(--max);margin:0 auto;
  padding:151px 0 0;
}
.section-heading{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:25px
}
.section-heading small,.contact-card small{
  display:block;color:#65707b;font-size:10px;font-weight:700;
  letter-spacing:.18em;line-height:1
}
.section-heading h1{
  margin:9px 0 0;font-size:66px;line-height:.86;
  font-weight:900;letter-spacing:-.075em
}
.story-count{
  margin-bottom:8px;color:#77818c;font-size:9px;font-weight:700;
  letter-spacing:.14em
}
.story-count i{display:inline-block;width:30px;height:1px;background:#111;vertical-align:middle;margin-right:10px}
.filters{
  display:flex;gap:9px;flex-wrap:wrap;
  margin-bottom:13px
}
.filter{
  background:#fff;border:1px solid #dfe1e3;border-radius:999px;
  padding:10px 18px;color:#242a30;font-size:11px;font-weight:500;
  line-height:1;transition:.18s ease
}
.filter.active,.filter:hover{background:#111;color:#fff;border-color:#111}
.video-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:12px;row-gap:13px
}
.card{min-width:0}
.thumb{
  position:relative;width:100%;aspect-ratio:16/9;
  display:block;border:0;border-radius:6px;overflow:hidden;
  padding:0;background:#eceeef;isolation:isolate
}
.poster,.autoplay-video,.drive-preview{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.poster{z-index:2;transition:opacity .3s ease}
.autoplay-video{z-index:1}
.drive-preview{z-index:1}
.drive-preview iframe{width:100%;height:100%;border:0;display:block}
.thumb.autoplay-playing .poster{opacity:0}
.fallback{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:13px;background:linear-gradient(135deg,#e9eaeb,#cfd2d5)
}
.fallback b{font-size:12px;font-weight:900;letter-spacing:-.03em}
.fallback span{font-size:8px;color:#707780;font-weight:700;letter-spacing:.12em;margin-top:4px}
.play-circle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.92);
  background:rgba(0,0,0,.3);color:#fff;z-index:6;
  display:grid;place-items:center;font-size:10px;padding-left:2px;
  backdrop-filter:blur(2px)
}
.duration{
  position:absolute;right:6px;bottom:6px;z-index:7;
  padding:4px 6px;border-radius:4px;background:#111;color:#fff;
  font-size:8px;font-weight:800
}
.card h2{
  margin:7px 0 2px;font-size:12px;line-height:1.25;
  font-weight:800;letter-spacing:-.025em
}
.card>p{margin:0;color:#7a838d;font-size:9px;line-height:1.3;font-weight:400}
.card>p b{font-weight:400;color:#aaa}
.contact{
  width:var(--contact-max);margin:0 auto;
  padding:51px 0 0
}
.contact-card{
  min-height:164px;
  border:1px solid #e1e3e4;border-radius:14px;
  background:#fafaf9;
  display:grid;
  grid-template-columns:1.05fr 1px 1.12fr 1px 1.15fr 1px 1fr;
  align-items:stretch;
  padding:24px 42px
}
.contact-column{display:flex;flex-direction:column;justify-content:center}
.contact-column small{font-size:9px}
.intro{padding-right:32px}
.intro h2{
  margin:9px 0 9px;font-size:37px;line-height:.9;
  letter-spacing:-.065em;font-weight:900
}
.intro p{
  margin:0;max-width:270px;color:#68717b;
  font-size:10px;line-height:1.55
}
.divider{width:1px;background:#dcdedf}
.details{padding:0 37px;gap:13px}
.detail{display:flex;align-items:center;gap:11px}
.detail-icon{width:22px;height:22px;display:grid;place-items:center;flex:none}
.detail-icon svg{width:18px;height:18px;fill:none;stroke:#111;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.detail>span:last-child{display:flex;flex-direction:column;gap:2px}
.detail strong{font-size:12px;font-weight:800}
.detail em{font-size:8px;color:#77808a;font-style:normal}
.social{padding:0 35px}
.socials{display:flex;gap:18px;margin-top:13px}
.socials a{
  width:43px;height:43px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:#111;font-size:19px;font-weight:800
}
.socials a:nth-child(1){background:#e62117}
.socials a:nth-child(2){background:linear-gradient(135deg,#feda75,#d62976,#4f5bd5)}
.socials a:nth-child(3){background:#1877f2}
.socials a:nth-child(4){background:#25d366}
.socials .yt{font-size:13px}
.socials .fb{font-family:Arial;font-size:23px}
.socials .wa{font-size:24px;transform:rotate(-20deg)}
.social-labels{display:flex;gap:19px;margin-top:7px}
.social-labels span{font-size:8px;color:#4f5861;min-width:43px;text-align:center}
.cta{padding-left:35px;align-items:stretch}
.btn{
  min-height:40px;border-radius:7px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;font-weight:800
}
.btn.dark{background:#111;color:#fff}
.btn.dark span{font-size:15px;font-weight:400}
.cta p{margin:17px 0 0;color:#818992;font-size:8px;line-height:1.8;letter-spacing:.17em;font-weight:700}
.footer{
  width:var(--contact-max);margin:0 auto;
  border-top:1px solid var(--line);
  margin-top:0;padding:40px 42px 20px
}
.footer-main{display:grid;grid-template-columns:1.2fr .75fr 1fr .75fr;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:6px}
.footer-brand strong{font-size:17px;font-weight:900;letter-spacing:-.05em}
.footer-brand span{font-size:8px;color:#77808a;font-weight:700;letter-spacing:.15em}
.footer-nav{display:flex;flex-direction:column;gap:9px}
.footer-nav a,.footer-socials a{font-size:10px;color:#505861}
.footer-socials{display:flex;gap:13px;flex-wrap:wrap}
.footer-motto{font-size:8px;line-height:2.1;color:#7b838c;letter-spacing:.2em;text-align:right;font-weight:700}
.footer-bottom{border-top:1px solid var(--line);margin-top:31px;padding-top:14px;display:flex;justify-content:space-between;color:#999ea3;font-size:8px}
.modal{display:none;position:fixed;inset:0;z-index:100}
.modal.open{display:block}
.modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.modal-box{position:absolute;width:min(1050px,92vw);left:50%;top:50%;transform:translate(-50%,-50%);background:#000;border-radius:9px;overflow:hidden}
.modal-close{position:absolute;right:10px;top:10px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;font-size:23px}
.modal-video{aspect-ratio:16/9}
.modal-video iframe{width:100%;height:100%;border:0}
@media(max-width:1200px){
  :root{--max:calc(100% - 60px);--contact-max:calc(100% - 40px)}
}
@media(max-width:850px){
  .header{width:calc(100% - 40px)}
  .nav{display:none}.nav.open{display:flex;position:absolute;top:60px;left:0;right:0;height:auto;background:#fff;border:1px solid var(--line);padding:16px;flex-direction:column;align-items:flex-start;gap:15px;border-radius:8px}
  .nav a{height:auto}.nav a.active:after{display:none}
  .menu{display:block;margin-left:16px}.menu i{display:block;width:19px;height:2px;background:#111;margin:4px}
  .header-contact{margin-left:auto}
  .work{padding-top:115px}
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .contact-card{grid-template-columns:1fr 1px 1fr;row-gap:22px}
  .contact-card .social{grid-column:1}.contact-card .cta{grid-column:3}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  :root{--max:calc(100% - 28px);--contact-max:calc(100% - 28px)}
  .header{width:calc(100% - 28px)}
  .header-contact{display:none}
  .section-heading{align-items:flex-start;gap:20px;flex-direction:column}
  .section-heading h1{font-size:58px}
  .story-count{align-self:flex-end}
  .filters{overflow:auto;flex-wrap:nowrap;padding-bottom:3px}
  .filter{white-space:nowrap}
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact{padding-top:40px}
  .contact-card{display:flex;flex-direction:column;padding:28px 24px;gap:24px}
  .divider{height:1px;width:100%}
  .intro,.details,.social,.cta{padding:0}
  .cta{align-items:stretch}
  .socials{gap:10px}
  .social-labels{gap:10px}
  .footer{width:calc(100% - 28px);padding-left:0;padding-right:0}
  .footer-main{grid-template-columns:1fr}
  .footer-motto{text-align:left}
  .footer-bottom{flex-direction:column;gap:8px}
}