*{box-sizing:border-box}html,body{margin:0;background:#000;color:#87898c;font-family:Arial,sans-serif}body{min-width:320px}.header-bg{position:fixed;z-index:50;top:0;left:0;right:0;height:173px;background:#000}.header{position:fixed;z-index:51;top:0;left:50%;transform:translateX(-50%);width:min(1200px,100%);height:173px}.logo{position:absolute;left:159px;top:33px;width:331px;height:114px;object-fit:contain}.contact{position:absolute;right:31px;top:47px;width:249px;text-align:right;font:14px/16px "Lucida Sans Unicode","Lucida Grande",sans-serif}.contact p{margin:0 0 15px}.contact a{color:#87898c;text-decoration:underline}.contact .name{color:#b5075b}.page{width:min(1200px,100%);margin:0 auto;padding-top:174px}.gallery{width:100%;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 4px}.tile{display:block;height:160px;overflow:hidden;cursor:zoom-in;background:#111;flex:0 0 auto}.tile img{display:block;width:100%;height:100%;object-fit:cover}.videos{position:relative;height:653px;margin-top:115px;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif}.v{position:absolute;width:315px}.v p{height:29px;margin:0 0 15px;padding:5px;font-size:15px;line-height:18px}.pink{color:#b5075b}.video{width:315px;height:187px;background:#111;position:relative;overflow:hidden}.video iframe{width:100%;height:100%;border:0;display:block}.video button{width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#111;position:relative}.video button img{width:100%;height:100%;object-fit:cover;display:block}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:48px;border-radius:12px;background:rgba(0,0,0,.72)}.play:after{content:"";position:absolute;left:28px;top:13px;border-left:20px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}.v1{left:36px;top:0}.v2{left:443px;top:0}.v3{left:850px;top:0}.v4{left:443px;top:301px}.footer{position:absolute;right:31px;top:430px;width:309px;text-align:right;color:#67686b;font:10px/12px "Lucida Sans Unicode","Lucida Grande",sans-serif}.footer p{margin:0}.mobile-contact{display:none}
@media(max-width:768px){
.header-bg,.header{height:190px}.header .contact{display:none}.logo{left:50%;transform:translateX(-50%);top:28px;width:220px;height:auto}.page{padding-top:190px}.videos{margin:72px 0 0;display:flex;flex-direction:column;align-items:center;gap:54px;height:auto}.v{position:static;width:min(400px,54vw)}.v p{font-size:12px;line-height:16px;height:auto;margin:0 0 13px;padding:0}.video{width:100%;height:auto;aspect-ratio:315/187}.mobile-contact{display:block;order:10;width:min(400px,70vw);text-align:right;margin:28px 0 8px;font:14px/22px "Lucida Sans Unicode","Lucida Grande",sans-serif}.mobile-contact p{margin:0 0 12px}.mobile-contact a{color:#87898c;text-decoration:underline}.mobile-contact .name{color:#b5075b}.footer{position:static;order:11;width:min(400px,70vw);text-align:right;margin:24px 0 38px;font-size:10px;line-height:12px}.overlay img{max-width:calc(100% - 70px)}
}
@media(max-width:480px){.header-bg,.header{height:150px}.logo{top:22px;width:190px}.page{padding-top:150px}.videos{margin-top:52px;gap:42px}.v{width:86vw}.mobile-contact,.footer{width:86vw}.mobile-contact{font-size:12px;line-height:18px}}
.overlay{position:fixed;z-index:100;inset:0;background:#000;display:none;align-items:center;justify-content:center}.overlay.on{display:flex}.overlay img{max-width:calc(100% - 130px);max-height:calc(100% - 60px);object-fit:contain}.overlay button{position:absolute;border:0;background:transparent;color:#aaa;cursor:pointer}.x{right:18px;top:8px;font-size:42px}.prev,.next{top:50%;transform:translateY(-50%);font-size:54px;width:64px;height:100px}.prev{left:0}.next{right:0}.count{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11px;color:#666}
@media(max-width:900px){.header{height:130px}.header-bg{height:130px}.logo{left:18px;top:25px;width:230px;height:auto}.contact{right:18px;top:30px;font-size:11px;line-height:14px;width:210px}.page{padding-top:131px}.gallery{gap:3px}.videos{height:auto;margin:60px 18px;display:grid;grid-template-columns:1fr 1fr;gap:30px}.v{position:static;width:100%}.video{width:100%;aspect-ratio:315/187;height:auto}.footer{position:static;grid-column:1/-1;width:auto;text-align:right}.v p{height:auto}.tile{height:120px}}@media(max-width:560px){.contact{display:none}.logo{left:16px;width:207px}.videos{grid-template-columns:1fr}.tile{height:95px}}

@media(max-width:768px){.header-bg,.header{height:190px!important}.header .contact{display:none!important}.logo{left:50%!important;transform:translateX(-50%)!important;top:28px!important;width:220px!important;height:auto!important}.page{padding-top:190px!important}.videos{height:auto!important;margin:72px 0 0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:54px!important}.v{position:static!important;width:min(400px,54vw)!important}.v p{font-size:12px!important;line-height:16px!important;height:auto!important;margin:0 0 13px!important;padding:0!important}.video{width:100%!important;height:auto!important;aspect-ratio:315/187}.mobile-contact{display:block!important;order:10;width:min(400px,70vw);text-align:right;margin:28px 0 8px;font:14px/22px "Lucida Sans Unicode","Lucida Grande",sans-serif}.mobile-contact p{margin:0 0 12px}.mobile-contact a{color:#87898c;text-decoration:underline}.mobile-contact .name{color:#b5075b}.footer{position:static!important;order:11;grid-column:auto!important;width:min(400px,70vw)!important;text-align:right!important;margin:24px 0 38px!important;font:10px/12px "Lucida Sans Unicode","Lucida Grande",sans-serif!important}}
@media(max-width:480px){.header-bg,.header{height:150px!important}.logo{top:22px!important;width:190px!important}.page{padding-top:150px!important}.videos{margin-top:52px!important;gap:42px!important}.v{width:86vw!important}.mobile-contact,.footer{width:86vw!important}.mobile-contact{font-size:12px!important;line-height:18px!important}}

/* v11: CSS-only responsive columns. Avoid rebuilding the gallery on resize,
   which could change document height while scrolling and cause jumps. */
.gallery{--cols:6}
@media(max-width:1199px){.gallery{--cols:5}}
@media(max-width:899px){.gallery{--cols:4}}
@media(max-width:767px){.gallery{--cols:3}}
@media(max-width:479px){.gallery{--cols:2}}
html{overflow-y:scroll;scroll-behavior:auto}

/* v8: keep contact in fixed header also on narrow layouts */
.mobile-contact{display:none!important}
@media(max-width:768px){
  .header .contact{display:block!important;right:16px!important;top:38px!important;width:220px!important;font-size:11px!important;line-height:14px!important}
  .header .contact p{margin:0 0 12px!important}
  .logo{left:16px!important;transform:none!important;top:28px!important;width:220px!important}
}
@media(max-width:560px){
  .header .contact{display:block!important;right:12px!important;top:30px!important;width:185px!important;font-size:9px!important;line-height:12px!important}
  .header .contact p{margin-bottom:9px!important}
  .logo{left:12px!important;width:175px!important;top:25px!important}
}
@media(max-width:400px){
  .header .contact{width:160px!important;font-size:8px!important;line-height:11px!important}
  .logo{width:150px!important}
}

/* v9 gallery: real responsive column switching; do not squeeze a fixed six-column row */
.gallery{display:grid!important;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))!important;gap:4px!important;width:100%!important}
.tile{width:auto!important;height:auto!important;aspect-ratio:196/160!important;overflow:hidden!important;display:block!important}
.tile img{width:100%!important;height:100%!important;object-fit:cover!important}
@media(max-width:899px){.gallery{gap:3px!important}}

/* v10: one shared content geometry for header/gallery/video/footer */
:root{--content-width:1200px;--edge:0px}
.header{width:min(var(--content-width),100%);}
.page{width:min(var(--content-width),100%);}
/* desktop: align logo with gallery's left edge; contact with gallery's right edge */
.logo{left:var(--edge)!important}
.contact{right:var(--edge)!important}
.gallery{gap:4px!important}
/* keep the fixed header opaque over scrolling tiles */
.header-bg{background:#000!important;z-index:50}
.header{z-index:51}
@media(max-width:1199px){
  :root{--edge:0px}
  .header,.page{width:100%}
  .logo{left:0!important}
  .contact{right:0!important}
}
@media(max-width:900px){
  /* retain shared edges at responsive widths */
  .logo{left:0!important}
  .contact{right:0!important}
  .videos{margin-left:0!important;margin-right:0!important}
}
@media(max-width:768px){
  .logo{left:0!important}
  .header .contact{right:0!important}
}
@media(max-width:560px){
  .logo{left:0!important}
  .header .contact{right:0!important}
}

/* Language controls stay in the free space below the contact details. */
.language-switcher{position:absolute;right:0;bottom:8px;display:flex;gap:4px}
.language-switcher button{font:12px/1.4 Arial,sans-serif;color:#aaa;background:#111;border:1px solid #444;border-radius:3px;padding:6px 10px;min-height:32px;cursor:pointer}
.language-switcher button[aria-pressed="true"]{color:#fff;border-color:#b5075b;background:#700438}
.language-switcher button:hover{color:#fff;border-color:#b5075b}
.language-switcher button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v p{height:auto;min-height:29px}
@media(max-width:768px){.language-switcher{right:4px;bottom:10px}}

/* Service cards use real text so labels can follow the selected language. */
.tile-pink{background:#db1280}.tile-green{background:#116d35}.tile-purple{background:#7d2ac0}.tile-orange{background:#ff6b21}.tile-blue{background:#373fb2}
.text-tile{display:flex!important;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#fff;container-type:inline-size}
.text-tile span{display:block;max-width:100%;padding:8px;font:400 clamp(10px,7cqw,25px)/1.45 Arial,sans-serif;white-space:pre-line;overflow-wrap:anywhere}
.text-preview{width:min(700px,calc(100vw - 130px),calc((100dvh - 80px)*1.4));aspect-ratio:7/5;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px;font:400 clamp(15px,4vw,48px)/1.45 Arial,sans-serif;white-space:pre-line;overflow-wrap:anywhere}
.text-preview:not([hidden]){display:flex}
.overlay [hidden]{display:none!important}
@media(max-width:480px){.text-preview{width:calc(100vw - 100px);padding:10px;font-size:clamp(14px,4vw,20px)}}