html {
    /* keep the site's own colours: stop browsers (e.g. Chrome/Samsung "dark mode for websites") from darkening it */
    color-scheme: only light;
    /* dark page scroll bar, as before (the light colour scheme above would otherwise make it white) */
    scrollbar-color: #5c5c5c #141414;
    /* no overflow setting here: the page is kept screen-wide by body below. An overflow
       value on html would stop "body { overflow: hidden }" (set while a service form is
       open) from locking the page, so you could scroll away from the form. */
}
body {
    display: block;
    width: 100%;
    font-family: "Google Sans",sans-serif;
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
}
/* the dark scroll bar is only for the page itself; inner scroll areas (forms, chat) keep their own */
body * {
    scrollbar-color: auto;
}
html::-webkit-scrollbar {
    width: 12px;
    background: #141414;
}
html::-webkit-scrollbar-thumb {
    background: #5c5c5c;
    border-radius: 6px;
    border: 3px solid #141414;
}
html::-webkit-scrollbar-thumb:hover {
    background: #7a7a7a;
}
*, :after, :before, html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, :after, :before {
    outline: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
}
img {
    width: 100%;
}
:root {

}

.loading_wrap {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 100;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.progress_bar {
    position: relative;
    display: flex;
    color: #fff;
    font-size: 9px;
    text-align: center;
    flex-direction: column;
}
.progress_bar svg > path {
  animation: blinker 2.5s linear infinite;
}
.progress_count {
    padding-top: 5px;
}
@keyframes blinker {
  50% {
    opacity: 0.5;
  }
}

/* The 3D canvas is fixed behind the whole page. It shows through the first
   section and through the window of the expanding section; everything else
   has its own white background. */
.intro_canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background: black;
    /* !important: three.js writes the width in whole pixels, but some phones
       (e.g. Samsung) have a screen width with a fraction of a pixel, which left
       a thin white line down the right edge over the dark parts of the page */
    width: 100% !important;
    height: 100%;
    will-change: transform;
}
html {
    background: #fff;
}
footer.contact {
    background: #fff;
}


.nav_container {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    left: 0%;
    top: 0%;
    right: 0%;
    width: 100%;
    max-width: 1300px;
    padding: 15px 25px;
    margin: auto;
    z-index: 1;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
}
.nav_logo svg.hils {
    fill: #fbfbfb;
    height: 50px;
}
.nav_logo {
    display: flex;
    align-items: flex-end;
    text-decoration: none;
}
.nav_logo_text {
    color: #fbfbfb;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}
.nav_container .burger {
    display: none;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
    outline: none;
}
.burger__icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    height: 18px;
    width: 26px;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-around;
}
.burger__line {
    background-color: #fff;
    position: relative;
    height: 2px;
    width: 100%;
}
.section__wrapper {
    position: relative;
    height: auto;
    width: 100%;
}
.sticky__wrapper {
    position: absolute;
    left: 50%;
    z-index: 5;
    pointer-events: auto;
}

.preview__wrapper {
    position: relative;
    padding-top: 37px
}
.preview__screen {
    position: relative;
    width: 100%;
    background: #fff;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%);
    border-radius: 10px;
    overflow: hidden;
}
.browser__Card {
    display: flex;
    height: 100%;
    width: 100%;
    margin: 0;
    justify-content: flex-start;
    flex-direction: column;
}
.browser__header {
    position: relative;
    flex-basis: 35px;
    padding: 9px 110px;
}
.browser__button, .browser__user {
    display: flex;
    grid: auto/repeat(3,1fr);
    gap: 0 6px;
    position: absolute;
    top: calc(50% - 6px);
    left: 20px;
}
.browser__button span, .browser__user span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ecf2f7;
}
.browser__url {
    display: flex;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: 4px;
    color: #002c59;
    background-color: #ecf2f7;
    letter-spacing: .2px;
}
.browser__user {
    /* right: 9%; */
    left: 88%;
    flex-direction: column;
    align-items: center;
    align-content: center;
}
.browser__content {
    background: #fbfbfb;
    padding: 20px;
}
.title__preview {
    position: relative;
    padding: 5px 20px 0;
}
.title__preview svg {
    fill: #fbfbfb;
    /* height: 42px; */
    /* width: 189px; */
    width: 32%;
    min-width: 95px;
    max-width: 150px;
}
path.write_w {
    stroke: #3e3e3e;
    stroke-width: 41.6654;
}
.description__preview {
    padding: 0 10%;
    margin: 20px 0;
    font: 400 11.6px Proxima Nova,sans-serif;
    letter-spacing: -.005em;
    line-height: 26px;
}
.description__preview:after {
    display: block;
    content: "";
    position: absolute;
    clear: both;
}
.btn__hire {
    right: 0;
    float: right;
    margin: 20px -20px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.btn__text {
    font-size: 17px;
    margin-right: 5px;
    pointer-events: none;
}
.btn__icon {
    fill: #000;
    width: 30px;
    height: 30px;
}

.jobs__Card {
    position: absolute;
    height: 250px;
    width: 100%;
    margin: 0;
    background: linear-gradient(#fff 100%, #f1f1f1 200%);
}
.office_screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 22%;
    background-position: 45% 70%;
}
.sticky_office {
    position: absolute;
    fill: #8b8b8b;
    width: 90%;
    height: 102%;
    bottom: -32px;
    left: 17px;
}
.jobs_card_content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% - 35px);
    -webkit-perspective: 450px;
    -moz-perspective: 450px;
    -ms-perspective: 450px;
    perspective: 450px;
    pointer-events: none;
}
.jobs_graphics {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    border-radius: 16px;
    /*transform: scale(0.4) rotate3d(0.5,-2,0,52deg);*/
    transform:  rotate(-8.0639deg) rotateY(-49.861deg) rotateX(17.246deg) scale(0.4);
    transform-origin: 85% 72%;
    transition: 0.4s;
    box-shadow: 3px 3px 3px 3px rgb(40 40 40 / 20%);
}
.screen > .jobs_graphics {
    transform: none;
    background: none;
    box-shadow: none;
    transition: 0.8s;
}
.jobs_graphics:before {
    content: '';
    display: block;
    position: absolute;
    width: 50%;
    height: 20%;
    margin: auto;
    right: -10px;
    left: 0;
    bottom: -15%;
    background: linear-gradient(transparent 30%, #fff );
    border-radius: 50%;
    transform: rotate(355deg);
    box-shadow: -2px 8px 3px -2px rgb(40 40 40 / 20%);
    transition: .5s;
}
.screen > .jobs_graphics:before {
    bottom: 10%;
    opacity: 0;
}
.jobs_graphics .cards {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #d7d7d7;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    image-rendering: pixelated;
    backface-visibility: hidden;
    overflow: hidden;
}
#pc_vid {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.graphic__phone {
    position: absolute;
    bottom: -60px;
    left: -93px;
    width: 146px;
    height: 296px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    border-radius: 23px;
    background: #f6f9fc;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%);
    transition: 0.3s;
}
.graphic__phone.in {
    bottom: -2px;
    opacity: 1;
    visibility: visible;
}
.screen > .graphic__phone {
    bottom: 60px;
    opacity: 0;
    visibility: hidden;
}
.phone__screen {
    position: relative;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 19px;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000);
}








section, footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: 100vh;
    height: var(--vh);
    width: 100%;
}
.section__content {
    position: relative;
    height: 100%;
    width: 95%;
    max-width: 1080px;
    margin: auto;
    pointer-events: none;
}

.intro__section {

}
.works__section {
    height: auto;
    min-height: 100vh;
    background: #fff;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.works__section .section__content {
    flex-grow: 1;
    height: 100vh;
    min-height: var(--vh);
}
.work_section_text {
    display: grid;
    width: 40%;
    height: 100%;
    text-align: left;
    align-content: center;
    align-items: center;
    justify-items: center;
}
.work__header {
    color: #0a2540;
    font-size: 20px;
    font-weight: 500;
    font-family: Gotham Pro,sans-serif;
}
.work__body {
    padding: 20px 0;
    font: 400 17px Proxima Nova,sans-serif;
    line-height: 26px;
}



.marquee__section {
    position: relative;
    overflow-x: clip;          /* the tilted text is a little wider than the screen */
    padding: 30px 0;
    font-family: initial;
}
/* lab flask watermark behind "Let's frame your world" */
.marquee__section::before {
    content: "";
    background: url(../img/icons/lab-flask.svg) no-repeat center / contain;
    aspect-ratio: 340 / 440;
    position: absolute;
    left: 5vw;
    bottom: clamp(10px, 5vw, 27px);   /* clear of the service tabs below */
    height: clamp(200px, 34vw, 460px);
    opacity: 0.3;
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 0;
}
.marquee-wrap {
    position: relative;
    z-index: 1;
    pointer-events: none;
    left: 0;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  .marquee {
    display: inline-block;
    font-size: 20vw;
    color: rgb(17 17 17 / 0%);
    will-change: transform;
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
    -webkit-text-stroke-color: #bdb296;
    text-stroke-color: #bdb296;
  }



.expanding__section {
    padding: 4.5% 0;
    justify-content: center;
}
.expanding__section:before {
    background-image: url(/img/expanding/release-noodles.svg);
    content: "";
    display: block;
    position: absolute;
    width: 287px;
    height: 212px;
    top: 0;
    right: 0;
    transform: rotateY(180deg);
}
.expanding__section:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 6%;
    top: 0;
    left: 0;
    background: #ffffff;
}
.expanding__section .view {
    position: relative;
    display: flex;
    height: 100%;
    width: 90%;
    margin: auto;
    /* see-through: the live star canvas shows behind it */
    background-color: transparent;
    flex-direction: row;
    justify-content: flex-end;
}
/* White frame around the see-through window (the section's padding and side
   margins), with a hole exactly where .view is. */
.expanding__section .view_mask {
    position: absolute;
    /* reaches 3px past the section's top and bottom so no hairline of the dark
       background can show at the joins with the sections above and below */
    top: -3px;
    left: 0;
    width: 100%;
    height: calc(100% + 6px);
    z-index: -1;
    padding: calc(4.5% + 3px) 5%;
    background: #fff;
    pointer-events: none;
    /* the slanted window is cut out of the white frame here (no SVG shapes needed) */
    --window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 2000 2000' preserveAspectRatio='none'%3E%3Cpolygon points='313.4,141.8 1997,20.4 1708,1926.6 32.6,1806.4'/%3E%3C/svg%3E");
    -webkit-mask: var(--window) content-box 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: var(--window) content-box 0 0 / 100% 100% no-repeat exclude, linear-gradient(#000 0 0);
}
/* the decorative squiggles live in the frame too, so they stop at the window edge */
.expanding__section:before {
    display: none;
}
.expanding__section .view_mask:before {
    background-image: url(/img/expanding/release-noodles.svg);
    content: "";
    display: block;
    position: absolute;
    width: 287px;
    height: 212px;
    top: 0;
    right: 0;
    transform: rotateY(180deg);
}

@keyframes animatedstars {
    0% {
      background-position: -100% 0px;
    }
}

.expanding__section .slider_view {
    height: 100%;
    width: 82%;
    right: 0;
}
@media (min-width: 861px) {
    /* White wedge over the top and left of the window, drawn above the cards but
       under the tabs (it comes first in .view): the cards slide behind the tabs and
       disappear under the white along the slanted edge, as with the old top SVG.
       Same corner points as the window cut out of .view_mask. */
    .expanding__section .view::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: #fff;
        pointer-events: none;
        clip-path: polygon(0 0, 100% 0, 100% 1.02%, 15.67% 7.09%, 0 100%);
    }
}
.intro__section:after,.expanding__section .slider_view:after,.form_bg:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=);
    background-size: 3px 3px;
    background-repeat: repeat;
    background-position: 0 0;
    opacity: .7;
    pointer-events: none;
}
.intro__section:after {
    display: none;
}
.expanding__section .view__content {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 40px 0 30px;
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    perspective: 1500px;
}
.panel_collection_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-width: 260vw;                          /* fallback */
    min-width: calc(var(--cards, 10) * 26vw);  /* same card width however many cards there are */
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    transform: rotateY(355deg);
    transform-origin: left;
}
.view__content .panel {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex: 1 1 0px;
    height: 60%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.view__content .panel:nth-child(1) {
    margin-left: 1vw;
}
.view__content .panel:last-child {
    margin-right: 1vw;
}
.view__content .panel:not(:last-child) {
    margin-right: 3vw;
}
.view__content .panel .imageholder {
    width: 100%;
    padding: 32px;
    border-radius: 15px;
    background-size: cover;
    background-position-x: center;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%), 0 4px 8px 3px rgb(0 0 0 / 15%);
    transition: transform 0.4s;
    transition-timing-function: ease-in-out;
}
.view__content .card_link {
    /* optional link set in admin: the whole card is clickable */
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
}
.view__content .panel .imageholder:hover {
    transform: scale(0.96);
}
.view__content .panel > div {
    position: absolute;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.view__content .s_embed {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s;
    transition-timing-function: ease-in-out;
    z-index: 1;
}
.view__content .panel .imageholder:hover .s_embed {
    transform: scale(1.18);
}
[style*="/3.webp"]:before {
    content: '';
    display: inherit;
    position: absolute;
    width: inherit;
    height: inherit;
    background: #d90039;
    opacity: 0.2;
    border-radius: inherit;
}
.tabsnav__vertical {
    display: flex;
    height: 100%;
    left: 0;
    z-index: 1;
}
.tabs__item:not(:last-child) {
    margin-right: 10px;
}
.tabs__item {
    position: relative;
    cursor: pointer;
    height: 110%;
    width: 4vw;
    min-width: 50px;
    left: 0;
    top: -5%;
}
.tabs__bar {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    cursor: pointer;
    transform-origin: 0% 50%;
    /* no side shadow: it showed as thin grey lines where the bars stick out above and below the window */
}
.tabs__title {
    position: relative;
    cursor: pointer;
    margin: 0;
    height: 100%;
    font-weight: normal;
    line-height: 1;
    display: flex;
    color: #399abe;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    white-space: nowrap;
    transform: rotate(-90deg);
}

.tabs__content {
    position: fixed;
    height: 100%;
    min-height: var(--vh);
    width: 100%;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.tabscontent__item {
    position: relative;
    z-index: 50;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background: #fff;
}
.jobs__item, .form_bg {
    position: absolute;
    width: 100%;
    height: 100%;
}
.form__header {
    height: auto !important;
}
.form__header:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: linear-gradient(transparent 80%, #fff );
}
.form__header img {
    display: none;
}
.web [src*="/web"], .prints [src*="/print"], .transfers [src*="/transfer"],
.bn-web [src*="/web"], .bn-print [src*="/print"], .bn-transfer [src*="/transfer"] {
    display: block !important;
}
.bn-custom-on .form__header img:not(.bn-custom) {
    display: none !important;   /* a picture uploaded in admin replaces the built-in one */
}
.bn-custom-on .form__header img.bn-custom {
    display: block !important;
}
.form__header, .form__footer {
    position: absolute;
    width: 100%;
    height: 100%;
}
.form__footer {/*30vw 60vw*/
      background: linear-gradient(transparent -40%,#399abe 0%, #000 150%);
}
.form__content {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.form__content:after {
    content: '';
    display: block;
    padding: 20px;
}
.form__content::-webkit-scrollbar {
    width: 5px;
}
.form__content::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background: #e3e7ec;
}
.form__content::-webkit-scrollbar-thumb:hover {
  background: #c0c4c8;
}
.clients__ {
    position: relative;
    width: 80%;
    min-width: 200px;
    max-width: 1000px;
    margin: 10% auto;
}
.form_page_header {
  position: relative;
  padding: 35px 40px;
  margin-bottom: 35px;
  color: #fffffb;
  text-align: center;
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 24px 0px rgb(0 0 0 / 26%);
  -moz-box-shadow: 0px 3px 24px 0px rgba(0,0,0,0.26);
  box-shadow: 0px 3px 24px 0px rgb(0 0 0 / 26%);
}
.form_page_header:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    border-radius: inherit;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(8px);
}
.form_page_header >* {
    z-index: 1;
}
.form_title {
    position: relative;
    margin: 0;
    font-size: 3vw;
    font-weight: bold;
}
.form_description {
    position: relative;
    display: block;
    padding: 10px 0;
    font-size: 15px;
}
#job-details {
    background-color: #fff;
    padding: 61px 40px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 24px 0px rgb(0 0 0 / 26%);
    -moz-box-shadow: 0px 3px 24px 0px rgba(0,0,0,0.26);
    box-shadow: 0px 3px 24px 0px rgb(0 0 0 / 26%);
}
label.quest_, .radio_quest {
    margin-top: 30px;
}
.btn__back__tabscontent {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 25px;
    cursor: pointer;
    transition: 0.3s;
}
.btn__back__tabscontent:hover {
    transform: scale(1.1);
}

.customer-details div {
    display: flex;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
}
.customer-details input,
.work-group input[type="text"],
.work-group input[type="date"],
.work-group input[type="file"],
.work-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #c3ced6;
    border-radius: 6px;
    background: #fff;
    color: #0a2540;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.customer-details input:focus,
.work-group input[type="text"]:focus,
.work-group input[type="date"]:focus,
.work-group textarea:focus {
    border-color: #399abe;
    box-shadow: 0 0 0 3px rgb(57 154 190 / 22%);
}
.work-group, .work-group > div:not(.radio_quest) {
    display: flex;
    flex-direction: column;
}
.work-group input[type="text"], .work-group input[type="date"], .work-group input[type="file"], .work-group textarea {
    margin-top: 10px;
    resize: vertical;
}
.work-group textarea {
    min-height: 110px;
}
.work-group .quest_ {
    font-weight: 500;
    line-height: 1.45;
}
.work-group .is-optional .quest_::after {
    content: " (optional)";
    font-weight: 400;
    color: #7b8a95;
}
/* radio answers: bigger, easier to tap */
.radio_quest br {
    display: none;
}
.radio_quest .label-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    cursor: pointer;
}
.radio_quest input[type="radio"],
.radio_quest input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex: none;
    accent-color: #399abe;
}
.radio_quest input[type="radio"]:disabled + *,
.radio_quest .label-control:has(input:disabled) {
    color: #a3adb5;
    cursor: default;
}
/* a field that still needs attention */
.customer-details input.has-error,
.work-group .has-error input[type="text"],
.work-group .has-error input[type="date"],
.work-group .has-error input[type="file"],
.work-group .has-error textarea {
    border-color: #d93025;
    box-shadow: 0 0 0 3px rgb(217 48 37 / 14%);
}
.work-group .has-error .quest_ {
    color: #d93025;
}
/* Result of a submit. Sticks to the bottom of the form area so it is
   visible wherever the visitor has scrolled to. */
.form_status {
    position: -webkit-sticky;
    position: sticky;
    bottom: 16px;
    z-index: 2;
    margin: 0 2px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 6px 22px rgb(0 0 0 / 18%);
}
.form_status:empty {
    display: none;
}
.form_status.is-error {
    color: #b3261e;
    background: #fdeeec;
    border: 1px solid #f3c9c3;
}
.form_status.is-ok {
    color: #12683d;
    background: #eaf7f1;
    border: 1px solid #bfe5d4;
    font-weight: 500;
}
.radio_quest p {
    margin-top: 0;
}
.submit-btn {
    color: #fff;
    background-color: #399abe;
    font-size: 16px;
    border: 0;
    padding: 11px 25px;
    margin: 20px 2px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.4s;
}
.submit-btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}
.submit-btn:hover:not(:disabled) {
    box-shadow: 0 12px 16px 0 rgb(0 0 0 / 24%), 0 17px 50px 0 rgb(0 0 0 / 19%);
}
footer.contact {
    padding-top: 60px;
    padding-bottom: 60px;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    justify-content: center;
    flex-direction: row;
}
.footer__logo {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 52%;
    height: 100%;
    background: linear-gradient(-45deg, #fbfbfb, #f1f1f1 10%);
    color: #476282;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-basis: 52%;
    -ms-flex-preferred-size: 52%;
    flex-basis: 52%;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0px 2px 3px rgb(0 0 0 / 20%);
    border-radius: 0 0 40% 0 / 0 0 5% 0;
}
.footer__logo:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    background: white;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: inset 0px 2px 3px rgb(0 0 0 / 20%);
}
.footer__logo:after {
    content: '';
    position: absolute;
    display: block;
    width: 50%;
    height: 50%;
    background: #000;
    z-index: -2;
    right: -4px;
    top: -4px;
    transform: skew(-2deg, -2deg);
}
.footer__shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
}
.footer__shadow:after {
    content: "";
    position: absolute;
    width: 50%;
    height: 55%;
    bottom: 4%;
    right: 1%;
    transform: skew(2deg) rotate(1deg);
    box-shadow: 1px 8px 12px rgb(31 31 31 / 60%);
    transform-origin: left bottom;
    border-radius: inherit;
}
.footer__logo svg.hils {
    fill: #399abe;
    height: 83px;
}
.footer__logo span.dark {
    font: 500 44px/54px "Google Sans",sans-serif;
    margin: 32px 0 4px;
}
.footer__logo .dark {
    margin: 0 0 27px;
    font: 500 18px/28px "Google Sans",sans-serif;
}
.btn_contact {
    background-color: #399abe;
    color: #fff;
    font-size: 20px;
    line-height: 16px;
    white-space: nowrap;
    text-decoration: none;
    padding: 20px 52px;
    border-radius: 8px;
    letter-spacing: .21px;
    cursor: pointer;
}

.footer__contact {
    display: flex;
    -webkit-flex-basis: 55%;
    -ms-flex-preferred-size: 55%;
    flex-basis: 35%;
    width: 100%;
    padding: 30px 0 30px 10%;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.feedback__email, .feedback__address {
    margin-top: 41px;
}
.feedback__map {
    position: relative;
    width: 90%;
    height: 150px;
    margin-top: 10px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    z-index: 1;
    overflow: hidden;
}
.feedback__map > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}
.feedback__map > div:first-child {
    background-size: cover;
    filter: blur(1px);
}
.footer__contact svg {
    fill: #374d63;
    width: 40px;
    height: 30px;
    margin-right: 5px;
}
.feedback__itemTitle {
    margin-bottom: 9px;
    font: 400 22px/1em Proxima Nova,sans-serif;
    letter-spacing: .015em;
    color: #0a2540;
    font-weight: 500;
}
.feedback__itemLink {
    display: flex;
    color: #191919;
    text-decoration: none;
    font: 400 15px Proxima Nova,sans-serif;
    line-height: 26px;
    letter-spacing: .1px;
    cursor: pointer;
}
.modal-window {
    position: absolute;
    background-color: rgb(0 0 0 / 40%);
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: 2;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.close_modal {
    position: absolute;
    right: 20px;
    width: 30px;
    margin: 20px;
    text-align: center;
    cursor: pointer;
}
.close_modal:after {
    content: "\00d7";
    display: inline-block;
    color: #fff;
    font-size: 40px;
}
.contact-form {
    position: absolute;
    top: 50%;
    width: 40%;
    left: 0;
    right: 0;
    margin: auto;
    padding: 15px;
    max-width: 500px;
    visibility: hidden;
    opacity: 0;
    background: #fdfdfd;
    font-size: 13px;
    font-family: 'Nunito', sans-serif;
    border-radius: 5px;
    transform: scale(1.2) translate(0, -50%);
    z-index: 2;
}
.contact-form input, .contact-form textarea {
    border: none;
    outline: none;
    resize: none;
    width: 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.contact-form .email, .contact-form .message, .contact-form .name {
  position: relative;
}
.contact-form .email input:focus, .contact-form .email textarea:focus, .contact-form .message input:focus, .contact-form .message textarea:focus, .contact-form .name input:focus, .contact-form .name textarea:focus {
  background: #f4f5f6;
}
.contact-form label {
  color: #cbd0d3;
  left: 23px;
  position: absolute;
  top: 23px;
  -moz-transition: all, 150ms;
  -o-transition: all, 150ms;
  -webkit-transition: all, 150ms;
  transition: all, 150ms;
}
.contact-form .typing label {
  color: #399abe;
  font-size: 10px;
  top: 7px;
}
.contact-form .email, .contact-form .name {
  width: calc(50% - 1px);
}
.contact-form .email input, .contact-form .name input {
  padding: 23px 0 8px 23px;
}
.contact-form .email {
  border-left: 1px #e6e6e6 solid;
  float: right;
}
.contact-form .message {
  border-bottom: 1px #e6e6e6 solid;
  border-top: 1px #e6e6e6 solid;
  clear: both;
}
.contact-form .message textarea {
  height: 200px;
  padding: 23px;
}
.contact-form .name {
  float: left;
}
.contact-form .submit {
	position: relative;
	background: #f4f5f6;
	padding: 5px 20px;
  text-align: left;
}
.contact-form .submit > * {
    display: inline-block;
}
.contact-form .submit .button {
    position: absolute;
    right: 1.5vw;
    top: -20px;
    width: 100px;
    padding: 9px 0;
    color: #fff;
    background: #3498db;
	  background: #399abe;
    border: 3px #fff solid;
    box-shadow: 0px 3px 1px -2px #e6e6e6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}
.contact-form .submit .button:hover {
  background: #4aa3df;
}
.contact-form .submit .button:active {
  background: #258cd1;
}
.contact-form .submit .button:focus {
  border-color: #b6daf2;
  -moz-box-shadow: #75b9e7 0 0 4px 1px, #75b9e7 0 0 4px 1px inset;
  -webkit-box-shadow: #75b9e7 0 0 4px 1px, #75b9e7 0 0 4px 1px inset;
  box-shadow: #75b9e7 0 0 4px 1px, #75b9e7 0 0 4px 1px inset;
}
.contact-form .submit .user-message {
    color: #2d7a97;
    margin: 10px 0;
}

@media only screen and (max-width: 1255px) {
	.preview__screen, .jobs_card_content {
        width: 90%;
	}
}
@media only screen and (max-width: 1220px) {
    .work_section_text {
        margin-left: 4%;
    }
    .work__header {
        font-size: 18px;
    }
    .work__body {
        font-size: 15px;
    }
    .panel_collection_list {
        min-width: 300vw;
        min-width: calc(var(--cards, 10) * 30vw);
    }
    .view__content .panel:not(:last-child) {
        margin-right: 4vw;
    }
    .footer__logo span.dark {
        font-size: 30px;
        margin-top: 15px;
        line-height: 1.3;
    }
    .footer__logo .dark {
        font-size: 17px;
        margin-bottom: 20px;
    }
    .btn_contact {
        font-size: 16px;
        padding: 15px 25px;
    }
}
@media only screen and (max-width: 1060px) {
    .title__preview {
        padding: 3px 40px 0 5px;
    }
    .description__preview {
        margin: 10px 0;
        padding: 0 7%;
    }
    .btn__hire {
        margin: 10px -20px;
    }
    .graphic__phone {
        width: 107px;
        height: 232px;
        border-radius: 14px;
        padding: 4px;
    }
    .phone__screen {
        border-radius: 10px;
    }
    .graphic__phone.in {
        bottom: 8px;
    }
    .feedback__itemTitle {
        font-size: 18px;
    }
    .feedback__itemLink {
        font-size: 14px;
    }
    .feedback__email, .feedback__address {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 980px) {
  .browser__content {
      padding: 16px;
  }
  .title__preview {
      padding-left: 3px;
  }
  .description__preview {
      padding: 0 5%;
  }
}
@media only screen and (min-width: 861px) {
  .expanding__section .slider_view:after {
      height: 80%;
      top: 10%;
      background: linear-gradient(105deg, rgb(0 0 0 / 55%), transparent 40%);
      opacity: 1;
  }
}
@media only screen and (max-width: 860px) {
    .intro__section:after {
        display: block;
    }
    .graphic__phone {
        width: 124px;
        height: 263px;
    }
    .expanding__section {
        padding: unset;
        align-items: center;
        align-content: center;
    }
    .expanding__section:before,.expanding__section:after {
        display: none;
    }
    .expanding__section .view_mask {
        padding: 3px 0;
        z-index: 1;              /* over the cards; the service buttons come later in the page, so they stay on top */
        --window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 2000 2000' preserveAspectRatio='none'%3E%3Cpolygon points='313.4,85 2000,12.2 2000,800 1708,1956 0,1882.4 0,1200'/%3E%3C/svg%3E");
    }
    .expanding__section .view_mask:before {
        display: none;
    }
    .expanding__section .view {
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .expanding__section .slider_view {
        position: absolute;
        width: 100%;
        overflow: hidden;
    }
    .expanding__section .view__content {
        transform: translate(0px, -100%);
    }
    .panel_collection_list {
        height: 100%;
        width: 100%;
        min-width: auto;
        justify-content: center;
        transform: none;
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        -ms-perspective: 800px;
        perspective: 800px;
    }

    .view__content .panel {
        position: absolute;
        left: 50%;
        height: 40%;
        width: 30%;
        min-height: 200px;
        min-width: 200px;
        border-radius: 10px;
    }
    .view__content .panel > * {
        /*display: none !important;*/
    }
    .tabsnav__vertical {
        position: absolute;
        width: 50%;
        height: 70%;
        margin: auto;
        right: 0;
        background: none;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .tabs__item {
        width: 100%;
        height: 90px;
        margin: 5% 0 !important;
    }
    .tabs__bar {
        border-radius: 10px;
        transform-origin: 50% 50%;
    }
    .tabs__title {
        transform: none;
    }
    .tabs__content {
        position: unset;
    }
}

@media only screen and (max-width: 660px) {
    .nav_container .burger {
         /* display: block; */
    }
    .nav_logo svg.hils {
        height: 40px;
    }
    .nav_logo_text {
        font-weight: 500;
    }

    .intro__section .section__content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .sticky__wrapper {
        position: relative;
        width: 100%;
        max-width: 407px;
        margin: auto;
        margin-bottom: 7%;
        left: 0;
        right: 0;
    }
    .preview__wrapper {
        top: 0;
        padding-top: 0;
    }
    .preview__screen, .jobs_card_content {
        width: 100%;
        height: 100%;
    }
    .browser__header {
        padding: 9px 90px !important;
    }
    .title__preview {
        padding: 5px 4.5% 0;
    }
    .description__preview {
        padding: 0 5%;
        font-size: 12px;
        line-height: 25px;
    }
    .work__header {
        padding: 0 10px;
    }
    .work_section_text {
        width: 100%;
        text-align: center;
        padding: 0 50px;
        margin-left: 0;
    }
    .sticky_office {
        height: auto;
        width: auto;
        bottom: -13px;
        left: 3px;
    }
    .jobs_graphics {
        top: -10%;
        /*left: 8.5%;*/
        padding: 5px;
        width: 90%;
        max-height: 280px;
        transform: rotate(-8.0639deg) rotateY(-49.861deg) rotateX(12deg) scale(0.4);
    }
    .screen > .jobs_graphics {
        top: 0;
        left: 0 !important;
        width: 100%;
        padding: 10px;
        max-height: 100%;
    }
    .jobs_graphics:before {
        display: none;
    }
    .office_screen {
        background-position: 47% 75%;
    }
    .graphic__phone {
        left: unset;
        right: 16px;
        width: 28px;
        height: 43px;
        padding: 3px;
        border-radius: 5px;
        transform: rotate(21deg) skewX(313deg);
    }
    .graphic__phone.in {
        bottom: 4px;
    }
    .phone__screen {
        border-radius: 1px;
    }
    .customer-details div {
        flex-direction: column;
    }
    .contact-form {
    		width: 60%;
    		min-width: 300px;
    		border-radius: 10px;
  	}
  	.contact-form > * {
    		border-radius: 10px;
    		overflow: hidden;
  	}
    .close_modal {
      margin: 5px;
    }
}
@media only screen and (max-width: 615px) {
    footer.contact {
        padding: 30px 0 25px;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .footer__logo {
        width: 90%;
        padding: 30px 20px 40px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }
    .footer__logo svg.hils {
        height: 69px;
    }
    .footer__logo span.dark {
        font-size: 30px;
        margin: 13px 0 4px;
        line-height: 54px;
    }
    .footer__logo .dark {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .btn_contact {
        font-size: 17px;
        padding: 14px 35px;
    }
    .footer__contact {
        text-align: center;
        padding: 20px;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: space-evenly;
        -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
    }
    .footer__contact > div > div, .footer__contact a > *:not(svg, .feedback__map div) {
        display: none;
    }
    .footer__contact > div:not(.contact-form,.modal-window)  {
        margin: 0;
        padding: 20px 0;
    }
    .footer__contact svg {
        margin: 0;
    }
    .feedback__address svg {
        display: block !important;
    }
    .feedback__map {
        position: absolute;
        bottom: -155px;
    }
    footer.contact > span{
        position: relative !important;
    }
    .feedback__itemLink {
        height: 44px;
        border-radius: 50%;
        border: 2px solid #898989;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }
    .modal-window {
        z-index: 1;
    }
}

@media only screen and (max-width: 500px) {
    .nav_logo svg.hils {
        height: 30px;
    }
    .nav_logo_text {
        font-size: 16px;
    }
    .sticky__wrapper {
        width: 85%;
    }
    .browser__content {
        padding: 10px;
    }
    .btn__hire {
        margin: 15px 0px;
    }
    .contact-form .email, .contact-form .name {
  		width: 100%;
  	}
  	.contact-form .email {
  		border-left: none;
  		border-top: 1px #e6e6e6 solid;
  	}
    .close_modal {
      margin: 0;
    }
    .close_modal:after {
      font-size: 35px;
    }
}


@media only screen and (max-width: 420px) {
    .browser__url {
        min-width: 50px;
    }
    .browser__header {
         padding: 9px 35% !important;
    }
    .graphic__phone {
        display: none;
    }

    .clients__ {
        width: 85%;
    }
    .form_title {
        font-size: 25px;
    }
    .form_title,.form_description,#job-details {
        padding-right: 30px;
        padding-left: 30px;
    }
    .contact-form .submit .user-message {
      font-size: 12px;
      color: #2f2f2f;
    }
    .contact-form .submit .button:focus {
      border-color: unset;
      box-shadow: unset;
    }
}
@media only screen and (max-width: 375px) {
    .form_page_header {
      padding: 30px;
    }
    .clients__ {
        width: 90%;
    }
    .form_title, .form_description, #job-details {
        padding-right: 25px;
        padding-left: 25px;
    }
    #job-details {
        padding-top: 40px;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 320px) {
    .works__section {
        height: auto;
        min-height: 100vh;
    }
}

/* service form: hints, file picker */
.work-group .hlq-hint {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 400;
    color: #7b8a95;
}
.work-group p.quest_ .hlq-hint {
    display: inline;
    margin: 0;
}
.work-group input[type="file"] {
    padding: 10px;
    background: #f7f9fa;
    cursor: pointer;
}
.work-group .hlq {
    margin-top: 30px;
}
.work-group .hlq label.quest_,
.work-group .hlq.radio_quest {
    margin-top: 0;
}
.work-group .hlq.radio_quest {
    margin-top: 30px;
}

/* ── Tall screens wider than 860px (e.g. an upright iPad Pro) ──
   The services section stays full height (the tap animation needs it), but its
   dark window is limited and centred; the footer, being last, simply gets shorter. */
@media (min-width: 861px) and (max-aspect-ratio: 9/10) {
    :root { --exh: min(calc(var(--vh, 100vh) - 9vw), 72vw); }
    .expanding__section { padding: 0; align-items: center; }
    .expanding__section .view { height: var(--exh); }
    .expanding__section .view_mask { padding: calc((var(--vh, 100vh) - var(--exh)) / 2 + 3px) 5%; }
    footer.contact { height: min(var(--vh, 100vh), 68vw); }
}