/* Adelle webfont files are stored locally in assets/fonts. */
@font-face {
  font-family: 'Adelle';
  src: url('../assets/fonts/Adelle-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adelle';
  src: url('../assets/fonts/Adelle-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Adelle';
  src: url('../assets/fonts/Adelle-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Proxima Nova webfonts are stored locally in assets/fonts. */
@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/proximanova_light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/proximanova_regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/proximanova_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/proximanova_extrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../assets/fonts/proximanova_black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Proxima Nova falls back to Arial until licensed webfont files are added. */

:root{
  --page-max: 1060px;
  --side-w: 245px;
  --text: #111;
  --muted: #6b6b6b;
  --light: #b5b5b5;
  --line: #eee;
  --font-logo: 'Adelle', Georgia, serif;
  --font-body: 'Proxima Nova', Arial, sans-serif;
  /* CHANGE THESE TWO VALUES ONLY */
  --mobile-logo-size: 22px;
  --facebook-mobile-logo-size: 15px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:#fff;font-family:var(--font-body);font-size:16px;line-height:1.65}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.mobile-topbar{
  height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-left:1px solid #eee;background:#fff;position:sticky;top:0;z-index:20;
}
.top-logo{font-family:var(--font-logo);font-weight:600;font-size:23px;letter-spacing:-.02em}
.flag{display:inline-block;width:33px;height:24px;margin-top: 3px; margin-left:8px;vertical-align:-1px;background:url('../assets/estonia-flag.svg') center/contain no-repeat}
.hamburger{width:38px;height:38px;border:0;background:transparent;padding:0;position:relative;cursor:pointer}
.hamburger span,.hamburger:before,.hamburger:after{content:"";position:absolute;left:7px;top:50%;display:block;width:24px;height:2px;background:#111;border-radius:2px;transition:transform .22s ease, opacity .18s ease}
.hamburger:before{transform:translateY(-8px)}
.hamburger span{transform:translateY(0)}
.hamburger:after{transform:translateY(8px)}
.hamburger.is-open span{opacity:0}
.hamburger.is-open:before{transform:translateY(0) rotate(45deg)}
.hamburger.is-open:after{transform:translateY(0) rotate(-45deg)}

.mobile-menu{display:none;position:fixed;inset:76px 0 auto 0;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.08);z-index:19;padding:24px}
.mobile-menu.is-open{display:block}
.mobile-menu a,.mobile-menu button{display:block;font-family:var(--font-logo);font-size:19px;margin:0 0 14px;color:#777;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.mobile-menu a.active{color:#000;font-weight:700}
.lang-submenu{display:none;margin:4px 0 0 14px}.lang-submenu.is-open{display:block}.lang-toggle:after{
  font-size:14px;margin-left:6px;color:#aaa}

.page-shell{width:min(var(--page-max), calc(100% - 42px));margin:0 auto;display:block;padding:34px 0 56px}
.sidebar{display:none}
.content{min-width:0}

.brand-title{font-family:var(--font-logo);font-weight:600;font-size:32px;line-height:.95;letter-spacing:-.035em;margin:0 0 46px}
.nav-block{font-family:var(--font-logo);font-size:18px;line-height:1.15}
.nav-heading{font-family:var(--font-logo);font-weight:700;font-size:16px;margin:0 0 16px;text-transform:uppercase}
.nav-list{list-style:none;margin:0 0 28px;padding:0}.nav-list li{margin:0 0 10px}.nav-list a{color:#777}.nav-list a.active{color:#000;font-weight:700}.nav-list a:hover{color:#000}
.lang{color:#aaa;
}
.lang select {
  border:0;
  background:transparent;
  color:#999;
  font-family:var(--font-logo);
  font-size:18px;
  padding-left: 0;
  padding-bottom: 15px;
}

.page-title{text-align:center;font-family:var(--font-body);font-weight:800;font-size:30px;line-height:1;margin:18px 0 42px;letter-spacing:.02em;text-transform:uppercase}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:55px 28px}
.work-card img{width:100%;height:auto;box-shadow:none}.work-card h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:26px 0 2px}
.work-card h3{font-family:var(--font-logo);font-size:24px;font-weight:600;line-height:1.2;margin:10px 0 2px}
.work-card2 h3{font-family:var(--font-logo);font-size:24px;font-weight:600;line-height:1.2;margin:10px 0 2px}
.work-card p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
.work-card2 img{width:100%;height:auto;box-shadow:none}.work-card2 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:26px 0 2px}.work-card2 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
.work-card3 img{width:100%;height:auto;box-shadow:none}.work-card3 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:26px 0 2px}.work-card3 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
.work-card4 img{width:100%;height:auto;box-shadow:none}.work-card4 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:26px 0 2px}.work-card4 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}


.project-shot{margin:15px auto 46px;max-width:650px}
.project-shot h3 {margin:15px auto 46px;max-width:650px}
.project-shot img{width:100%;height:auto}
.project-shot2{margin:15px auto 46px}.project-shot2 img{width:100%;height:auto}
.body-copy{max-width:950px;margin:28px auto;color:#555;font-size:15px;line-height:1.85}.spacer{height:24px}
.body-copy2 {max-width:950px;margin:28px auto;color:#000;font-size:28px;font-weight:600;line-height:1.85}.spacer{height:24px}
.about-wrap{max-width:720px;margin:0 auto;text-align:center}
.avatar{
    width:142px;
    height:142px;
    border-radius:50%;
    overflow:hidden;
    margin:20px auto 44px;
    position:relative;
}

.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
  .avatar:after{content:"";position:absolute;right:10px;top:50%}.about-copy{text-align:left;color:#555;font-size:18px;line-height:1.75;margin:0 0 42px}
  .btn{display:inline-block;border:1px solid #111;border-radius:5px;padding:12px 32px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;transition:background-color .2s ease,color .2s ease}
  .btn2{
    display:inline-block;
    border:1px solid #111;
    border-radius:5px;
    margin-top:50px;
    margin-bottom:50px;
    padding:12px 32px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#111;
    background:#fff;
    text-decoration:none;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

.btn2:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}
.btn-center{
    text-align:center;
}

.contact-wrap{max-width:720px;margin:0 auto}
.contact-intro{font-size:18px;line-height:1.8;color:#444;margin-bottom:34px}
.contact-intro a{color:#477ee8;text-decoration:none;transition:color .2s ease,text-decoration-color .2s ease}
.contact-intro a:hover,.contact-intro a:focus{color:#111;text-decoration:underline;text-decoration-color:#111}
.project-intro{max-width:950px;margin:28px auto;color:#555;font-size:15px;line-height:1.85; margin-bottom:38px; margin-top:-10px}
.project-intro a{color:#477ee8;text-decoration:none;transition:color .2s ease,text-decoration-color .2s ease}
.project-intro a:hover,.project-intro a:focus{color:#111;text-decoration:underline;text-decoration-color:#111}
.form-row{margin:0 0 26px}.form-row label{display:block;font-weight:700;margin-bottom:8px}.form-row input,.form-row textarea{width:100%;border:1px solid #d9d9d9;padding:13px 18px;font:18px var(--font-body);color:#444}.form-row textarea{min-height:160px;resize:vertical}.submit{background:#fff;border:1px solid #111;border-radius:5px;padding:13px 38px;font-weight:800;font-size:17px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.btn:hover,.btn:focus,.submit:hover,.submit:focus{background:#111;color:#fff}

.site-footer{text-align:center;color:#aaa;font-family:var(--font-logo);padding:28px 0 50px}.back-top{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;color:#888;font-size:20px;cursor:pointer}.back-top:before{content:'↑';font-family:Arial,sans-serif}.copyright{font-size:16px}

@media (min-width:760px){
  .mobile-topbar,.mobile-menu{display:none!important}
  .page-shell{display:grid;grid-template-columns:var(--side-w) 1fr;gap:45px;padding:28px 0 64px;width:min(1275px, calc(100% - 80px))}
  .sidebar{display:block;position:sticky;top:30px;align-self:start;padding-top:42px}
  .page-title{font-size:31px;margin-top:18px;margin-bottom:46px}
  .portfolio-grid{grid-template-columns:1fr 1fr;gap:75px 37px}
  .work-card img{width:100%;height:326px;box-shadow:none; object-fit:cover;object-position:top center}.work-card h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .work-card2 img{width:100%;height:400px;box-shadow:none; object-fit:cover;object-position:top center}.work-card2 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card2 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .work-card3 img{width:100%;height:335px;box-shadow:none; object-fit:cover;object-position:top center}.work-card3 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card3 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .work-card4 img{width:100%;height:385px;box-shadow:none; object-fit:cover;object-position:top center}.work-card4 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card4 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .project-shot{max-width:950px}
  .contact-wrap,.about-wrap{max-width:690px}.site-footer{grid-column:2;padding-top:28px}.brand-title{font-size:34px}
  .project-shot2 {
    max-width:400px; 
    margin: auto;}
}
.body-copy2 h3 {max-width:950px;margin:28px auto;color:#555;font-size:22px;font-weight:600;line-height:1.85}.spacer{height:24px}

@media (min-width:1100px){
  .page-shell{gap:60px}.content{padding-top:12px}
  .work-card img{width:100%;height:365px;box-shadow:none; object-fit:cover;object-position:top center}.work-card h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .work-card2 img{width:100%;height:425px;box-shadow:none; object-fit:cover;object-position:top center}.work-card2 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card2 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
   .work-card3 img{width:100%;height:340px;box-shadow:none; object-fit:cover;object-position:top center}.work-card3 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card3 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
  .work-card4 img{width:100%;height:400px;box-shadow:none; object-fit:cover;object-position:top center}.work-card4 h2{font-family:var(--font-logo);font-size:24px;font-weight:400;line-height:1.2;margin:33px 0 2px}.work-card4 p{font-family:var(--font-logo);color:#8a8a8a;font-size:18px;margin:0}
}
.lang-toggle:after{
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7";   /* fa-caret-down */
    font-size: 14px;
    margin-left: 0px;
    padding-bottom: 5px;
    color: #aaa;
}




/* Haabersti image preview */
.project-shot img{cursor:pointer}
.project-shot2 img{cursor:pointer}
.image-preview{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:64px 76px 88px;background:rgba(0,0,0,.92);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.image-preview.is-open{opacity:1;visibility:visible}
.image-preview__figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.image-preview__image{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;box-shadow:0 10px 45px rgba(0,0,0,.45);user-select:none;-webkit-user-drag:none}
.image-preview__title{width:100%;padding:14px 18px 0;color:#fff;text-align:center;font:600 18px/1.4 var(--font-body)}
.image-preview__close,.image-preview__nav{position:absolute;border:0;background:transparent;color:#fff;cursor:pointer;line-height:1;transition:opacity .2s ease,transform .2s ease}
.image-preview__close{top:18px;right:24px;font-size:48px;font-weight:300}
.image-preview__nav{top:50%;transform:translateY(-50%);font-size:52px;padding:18px}
.image-preview__prev{left:12px}.image-preview__next{right:12px}
.image-preview__close:hover,.image-preview__close:focus,.image-preview__nav:hover,.image-preview__nav:focus{opacity:.7}
.image-preview__nav:hover,.image-preview__nav:focus{transform:translateY(-50%) scale(1.08)}
body.preview-open{overflow:hidden}
@media (max-width:700px){
  .image-preview{padding:66px 16px 104px}
  .image-preview__image{max-height:calc(100vh - 190px)}
  .image-preview__close{top:12px;right:14px;font-size:42px}
  .image-preview__nav{top:auto;bottom:22px;font-size:38px;padding:10px 22px;background:rgba(255,255,255,.1);border-radius:4px}
  .image-preview__prev{left:20px}.image-preview__next{right:20px}
  .image-preview__title{font-size:16px;padding-top:12px}
}

/* Original-size desktop preview with scrollbars */
@media (min-width:701px){
  .image-preview__figure{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    overflow:auto;
    display:block;
    text-align:center;
    scrollbar-gutter:stable;
  }
  .image-preview__image{
    display:block;
    width:auto;
    height:auto;
    max-width:none;
    max-height:none;
    margin:0 auto;
    object-fit:unset;
  }
  .image-preview__title{
    position:fixed;
    left:50%;
    bottom:22px;
    z-index:2;
    width:auto;
    max-width:calc(100vw - 180px);
    padding:10px 18px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.7);
    border-radius:4px;
  }
   .lightbox-content {
      overflow-x: auto;
      overflow-y: hidden;
  }

  .lightbox-content img {
      width: auto;
      max-width: 1700px;
      height: auto;
      max-height: calc(100vh - 140px);
      display: block;
      margin: 0 auto;
  }
}

/* Progressive disclosure, language controls and forms */
.more-works[hidden]{display:none!important}
.order-form-wrap{margin-top:70px;padding-top:42px;border-top:1px solid #e2e2e2}
.form-row select{width:100%;border:1px solid #d9d9d9;padding:13px 18px;font:18px var(--font-body);color:#444;background:#fff}
.form-status{min-height:1.5em;margin:0 0 18px;font-weight:700}
.form-status.is-success{color:#176b34}.form-status.is-error{color:#a51d1d}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media (max-width:760px){.order-form-wrap{margin-top:45px;padding-top:32px}.form-row input,.form-row textarea,.form-row select{font-size:16px}}

/* =========================================================
   MOBILE / FACEBOOK HEADER CONTROLS
   Change only these variables in :root:
   --mobile-logo-size
   --facebook-mobile-logo-size
   Desktop styling above this section remains unchanged.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
}
body{max-width:100%}

.mobile-topbar > *{min-width:0}
.top-logo{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  max-width:calc(100% - 48px);
  white-space:nowrap;
  line-height:1.1;
}
.top-logo .flag{flex:0 0 33px}

/* Keep galleries inside the viewport without breaking sticky positioning. */
.page-shell,.content,.portfolio-grid,
.portfolio-grid > a,
.work-card,.work-card2,.work-card3,.work-card4{
  max-width:100%;
  min-width:0;
}
.portfolio-grid,.portfolio-grid > a,
.work-card,.work-card2,.work-card3,.work-card4{
  overflow-x:clip;
}
@supports not (overflow:clip){
  .portfolio-grid,.portfolio-grid > a,
  .work-card,.work-card2,.work-card3,.work-card4{overflow-x:hidden}
}
.work-card img,.work-card2 img,.work-card3 img,.work-card4 img{
  width:100%;
  max-width:100%;
}

@media (max-width:759px){
  .mobile-topbar{
    position:-webkit-sticky;
    position:sticky;
    top:0;
    width:100%;
    z-index:100;
  }
  .top-logo{font-size:var(--mobile-logo-size)}
}

@media (max-width:480px){
  .mobile-topbar{height:70px;padding-left:16px;padding-right:14px}
  .mobile-menu{inset:70px 0 auto 0}
  .top-logo{letter-spacing:-.025em}
  .top-logo .flag{
    width:27px;height:20px;flex-basis:27px;margin-left:6px;
  }
  .page-shell{
    width:100%;max-width:100%;padding-left:18px;padding-right:18px;
  }
  .portfolio-grid{width:100%;max-width:100%;min-width:0}
  .work-card3 img,.work-card4 img{
    height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:center;
  }
}

/* Facebook app browser only. JavaScript adds .facebook-browser to <html>. */
@media (max-width:759px){
  html.facebook-browser body{
    padding-top:var(--facebook-header-height, 70px);
  }
  html.facebook-browser .mobile-topbar{
    position:fixed !important;
    top:0;left:0;right:0;
    width:100%;
    min-height:70px;
    height:auto;
    padding:8px 14px 8px 16px;
    z-index:1000;
  }
  html.facebook-browser .mobile-menu{
    position:fixed;
    top:var(--facebook-header-height, 70px);
    right:0;left:0;
    z-index:999;
  }
  html.facebook-browser .top-logo{
    display:block;
    flex:1 1 auto;
    min-width:0;
    max-width:calc(100% - 52px);
    font-size:var(--facebook-mobile-logo-size) !important;
    line-height:1.08;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    letter-spacing:-.015em;
  }
  html.facebook-browser .top-logo .flag{
    display:inline-block;
    width:24px;height:18px;
    margin-left:5px;
    vertical-align:middle;
  }
}