/* 3drenders.com — static rebuild.
 *
 * Wix ships two separate designs for this site: a desktop one built from
 * full-bleed strips with components pinned to measured offsets, and a mobile
 * one laid out on a fixed 320px canvas. Both are reproduced here.
 *
 * The base rules below are the mobile design, made fluid so it fills the
 * viewport instead of being zoomed the way Wix does it. Everything from
 * "DESKTOP" onwards is the desktop design, behind a 751px media query.
 *
 * Per-element geometry arrives as custom properties on the elements themselves
 * (--l, --t, --w, --h), written by build.py from measurements taken off the
 * live site at 1425px and 1905px. That is what lets the rebuild track the
 * original at every desktop width rather than only at the one it was measured
 * on. They are custom properties rather than inline left/top so that the
 * mobile layout can ignore them.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: helvetica-w01-light;
  src: url(/assets/fonts/helvetica-w01-light.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+D, U+20-7E, U+A0-FF, U+152-153, U+160-161, U+178, U+17D-17E,
                 U+192, U+2C6, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E,
                 U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC,
                 U+2122, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B,
                 U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB01-FB02;
}
@font-face {
  font-family: helvetica-w01-light;
  src: url(/assets/fonts/helvetica-w02-light.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+100-12B, U+12E-137, U+139-149, U+14C-151, U+154-15F,
                 U+162-177, U+179-17C, U+218-21B, U+2C7, U+2D8-2D9, U+2DB, U+2DD;
}
@font-face {
  font-family: helvetica-w01-roman;
  src: url(/assets/fonts/helvetica-w01-roman.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: helvetica-w01-bold;
  src: url(/assets/fonts/helvetica-w01-bold.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: futura-lt-w01-book;
  src: url(/assets/fonts/futura-lt-w01-book.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: futura-lt-w01-light;
  src: url(/assets/fonts/futura-lt-w01-light.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'avenir-lt-w01-35-light';
  src: url(/assets/fonts/avenir-lt-w01-35-light.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: raleway;
  src: url(/assets/fonts/raleway-400-latin.woff2) format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: raleway;
  src: url(/assets/fonts/raleway-400-latin-ext.woff2) format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'open sans';
  src: url(/assets/fonts/open-sans-700.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'open sans';
  src: url(/assets/fonts/open-sans-400.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --teal: #169E91;
  --teal-dark: #116866;
  --ink: #595959;
  --navy: #282E45;
  --navy-deep: #10121C;
  --white: #fff;

  --body: helvetica-w01-light, helvetica, arial, sans-serif;
  --body-roman: helvetica-w01-roman, helvetica, arial, sans-serif;
  --display: raleway, helvetica, arial, sans-serif;

  --band: 20px;   /* section side inset; 80px on desktop */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

img { display: block; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: #116DFF; padding: 8px 14px;
  font-family: helvetica, arial, sans-serif; font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

.d-only { display: none; }

/* Wix's mobile page container starts 18px below the 96px header. */
main { margin-top: 18px; }

/* ============================================================ MOBILE BASE */

/* --- header ------------------------------------------------------------ */

.site-header {
  position: relative; z-index: 60;
  height: 96px; background: var(--white);
}
.site-header__logo {
  position: absolute; left: 50%; top: 16px; width: 124px; height: 63px;
  transform: translateX(-50%);
}
.site-header__logo svg { width: 100%; height: 100%; }
.logo-mark path { fill: var(--teal); }
.logo-mark--light path { fill: var(--white); }

/* .btn sets display:flex, so the header CTA needs the more specific rule. */
.nav { display: none; }
.site-header .header-cta { display: none; }

.menu-toggle {
  position: absolute; left: 13px; top: 23px; width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 0; cursor: pointer; z-index: 3;
}
.menu-toggle span { position: relative; width: 24px; height: 2px; background: var(--teal); }
.menu-toggle span::before, .menu-toggle span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--teal);
}
.menu-toggle span::before { top: -8px; }
.menu-toggle span::after { top: 8px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 100; background: var(--teal);
  transform: translateX(-100%); transition: transform .3s ease-in-out;
  overflow-y: auto;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { transform: translateX(0); }
.mobile-menu__close {
  position: absolute; left: 13px; top: 23px; width: 50px; height: 50px;
  background: none; border: 0; cursor: pointer;
}
.mobile-menu__close::before, .mobile-menu__close::after {
  content: ''; position: absolute; left: 12px; top: 24px;
  width: 26px; height: 3px; background: var(--white);
}
.mobile-menu__close::before { transform: rotate(45deg); }
.mobile-menu__close::after { transform: rotate(-45deg); }
.mobile-menu > ul { padding: 96px 0 40px; }
.mobile-menu li { position: relative; }
.mobile-menu a, .mobile-menu .mobile-menu__parent {
  display: block; width: 100%; height: 56px; line-height: 56px;
  font-family: var(--body-roman); font-size: 16px; color: var(--white);
  text-align: center; background: none; border: 0; cursor: pointer;
}
.mobile-menu__caret {
  position: absolute; left: 40px; top: 0; width: 50px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; z-index: 2;
}
.mobile-menu__caret svg { width: 16px; height: 11px; fill: var(--white); transition: transform .2s; }
.mobile-menu li.is-open > .mobile-menu__caret svg { transform: rotate(180deg); }
.mobile-menu__sub { display: none; padding: 0 0 8px; }
.mobile-menu li.is-open > .mobile-menu__sub { display: block; }
.mobile-menu__sub a { height: 44px; line-height: 44px; font-size: 15px; opacity: .9; }

/* --- shared shell ------------------------------------------------------ */

.strip { position: relative; width: 100%; overflow: hidden; }
.strip__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.strip__bgwrap { position: absolute; inset: 0; z-index: 0; }
.strip__body { position: relative; z-index: 1; }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 160px; height: 42px; margin: 0 auto;
  border: 2px solid var(--white); border-radius: 200px; background: var(--teal);
  font-family: var(--body-roman); font-size: 16px; letter-spacing: .1em;
  color: var(--white); text-align: center;
  transition: background .2s;
}
/* Wix leaves a 4px gap after the label for an optional icon, which nudges the
 * text 2px left of centre. */
.btn span { margin-right: 4px; line-height: normal; }
.btn:hover { background: transparent; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--teal); }

.h-page {
  font-family: var(--display); font-size: 28px; font-weight: 400;
  line-height: normal; color: var(--ink);
}
.h-section {
  font-family: var(--display); font-size: 23px; font-weight: 400;
  line-height: normal; color: var(--ink); text-align: center;
}
.page-sub { font-size: 16px; line-height: 24px; color: var(--ink); }

.prose p { font-size: 18px; line-height: 27px; color: var(--ink); min-height: 27px; }
.prose ul { padding-left: 32.4px; list-style: disc; }
.prose ul li { font-size: 18px; line-height: 27px; color: var(--ink); }

/* --- home: hero -------------------------------------------------------- */

.hero { background: var(--navy); }
.hero__inner { position: relative; min-height: 391px; padding: 79px 0 0; }
.hero__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }
.hero__title {
  position: relative; margin-bottom: 17px;
  font-family: 'open sans', sans-serif; font-size: 28px; font-weight: 700;
  line-height: normal; color: var(--white); text-align: center;
}
.hero__sub {
  position: relative;
  font-size: 16px; line-height: 24px; color: var(--white); text-align: center;
}
.hero__buttons { position: relative; padding: 44px 0 62px; }
.hero__buttons .btn + .btn { margin-top: 27px; }

.features { position: relative; }
.features__card {
  position: relative; height: 75px; margin-bottom: 15px;
  display: flex; align-items: center; background: var(--white);
}
.features__card:last-child { margin-bottom: 0; }
.feature-bar {
  position: absolute; left: 28px; top: 15px; width: 5px; height: 46px;
  border-left: 3px solid var(--teal-dark);
}
.feature-label {
  position: absolute; left: 57px;
  font-size: 16px; line-height: 20px; color: var(--ink);
}
.features__card:nth-child(2) .feature-label,
.features__card:nth-child(3) .feature-label { font-size: 15px; }
.features__card:nth-child(4) .feature-label { left: 61px; }

/* --- home: portfolio --------------------------------------------------- */

.portfolio { background: var(--white); padding: 44px 0 0; }
.pcard {
  position: relative; width: calc(100% - 40px); margin: 101px auto 0;
  min-height: 329px; padding-bottom: 50px;
}
/* The outline is drawn as an overlay rather than a border: Wix puts it on an
 * inner box, so a real border here would inset every child by 1px. */
.pcard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--teal-dark); border-radius: 5px;
}
.pcard__fill {
  position: absolute; left: 11px; right: 11px; top: 11px; bottom: 11px;
  background: var(--navy); border-radius: 5px;
}
/* The icon overhangs the top of the card, as it does on the live mobile site.
 * Height comes from the SVG's own ratio so each icon keeps its proportions. */
.pcard__icon { position: relative; width: 60px; margin: -20px auto 0; }
.pcard__icon svg { display: block; width: 100%; height: auto; }
.pcard__icon path { fill: var(--teal); }
.pcard__icon [data-color="2"] { fill: var(--teal-dark); }
.pcard__title {
  position: relative; margin-top: 25px;
  font-family: var(--display); font-size: 21px; font-weight: 400;
  line-height: normal; color: var(--white); text-align: center;
}
.pcard__text {
  position: relative; margin: 48px 24px 0;
  font-size: 16px; line-height: 24px; color: var(--white); text-align: center;
}
.pcard__cta { position: relative; margin-top: 36px; }
.pcard__link { position: absolute; inset: 0; z-index: 3; }
.portfolio__rule { margin: 44px var(--band) 0; border-top: 1px solid #000; }

/* --- home: services ---------------------------------------------------- */

.services { background: var(--white); padding: 20px 0 40px; }
.services__heading { margin-bottom: 30px; }
.scard { position: relative; margin-bottom: 44px; }
.scard__imglink { display: block; }
.scard__img { width: 100%; height: 230px; object-fit: cover; }
.scard__title {
  /* 240px is where the six titles break onto the same lines as the live
   * mobile design. */
  margin: 22px auto 0; max-width: 240px;
  font-family: var(--display); font-size: 25px; font-weight: 400;
  line-height: 36px; color: var(--ink); text-align: center;
}
.scard__more {
  margin-top: 12px;
  font-size: 16px; line-height: 24px; color: var(--teal); text-align: center;
}
.scard__more a { color: var(--teal); }
.scard__more a:hover { text-decoration: underline; }
.scard__cta { margin-top: 20px; }

/* --- home: contact ----------------------------------------------------- */

.contact { background: var(--navy-deep); padding: 20px 0 30px; }
.contact__heading {
  margin-bottom: 28px;
  font-family: var(--display); font-size: 28px; font-weight: 400;
  line-height: normal; color: var(--white); text-align: center;
}
.contact__form { width: calc(100% - 40px); margin: 0 auto; padding: 0 10px; }
.contact__form .field { margin-bottom: 26px; }
.field__label {
  display: block; margin: 0 0 2px;
  font-size: 16px; line-height: 16px; color: var(--white);
}
.field--req .field__label::after { content: ' *'; }
.field input, .field textarea {
  width: 100%; height: 37px; padding: 0 10px;
  border: 2px solid var(--white); border-radius: 5px;
  background: var(--white); color: var(--navy);
  font-family: var(--body); font-size: 16px;
}
.field textarea { height: 200px; padding: 8px 10px; resize: vertical; }
.btn-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42px;
  border: 2px solid var(--white); border-radius: 300px;
  background: var(--teal); color: var(--white);
  font-family: var(--body); font-size: 16px; cursor: pointer;
  transition: background .2s;
}
.btn-submit span { line-height: 22.4px; }
.btn-submit:hover { background: transparent; }
.form-thanks {
  margin-top: 10px;
  font-family: 'avenir-lt-w01-35-light', var(--body);
  font-size: 16px; line-height: 22.4px; color: var(--white);
  opacity: 0; transition: opacity .3s;
}
.is-sent .form-thanks { opacity: 1; }
.contact__form .form-thanks { text-align: center; font-family: futura-lt-w01-book, var(--body); }

/* --- inner pages ------------------------------------------------------- */

.page-body { position: relative; }
.about__title, .service__title, .careers__title, .gallery__title {
  margin: 0 var(--band) 20px;
}
.about__prose, .service__prose, .service__expertise, .careers__prose {
  margin: 0 var(--band) 24px;
}
.service__card { display: none; }
.careers__title { text-align: center; }

.slider { position: relative; }
.slider__track {
  display: flex; gap: 5px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }
/* Slides keep their measured size; the track scrolls instead of squeezing.
 * The images are wrapped in an anchor for the viewer, so the rule has to cover
 * both shapes. */
.slider__track > img, .slider__track > a { flex: none; }
.slider__track img { object-fit: cover; }
.slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 23px; height: 39px; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.slider__nav svg { width: 23px; height: 39px; color: #fff; }
.slider__nav--prev { left: 12px; }
.slider__nav--next { right: 23px; }
.slider__nav[hidden] { display: none; }

.service__strip { margin: 0 0 30px; }
.service__strip .slider__track { gap: 15px; padding: 0 var(--band); }
.service__strip img { width: 286px; height: 286px; }

/* careers form */
.careers__form { width: calc(100% - 40px); margin: 0 auto 40px; }
.careers__form h2 {
  margin-bottom: 24px;
  font-family: var(--display); font-size: 24px; font-weight: 400;
  color: #000; text-align: center;
}
.careers__form .field { margin-bottom: 18px; }
.careers__form .field__label {
  font-family: futura-lt-w01-book, var(--body); font-size: 14px; line-height: 14px;
  color: #373B4D; margin: 0 0 6px;
}
/* Teal-filled fields, matching the live careers form. */
.careers__form .field input, .careers__form .field select {
  width: 100%; height: 50px; padding: 0 12px;
  border: 1px solid #EFEFF4; border-radius: 5px;
  background: var(--teal); color: var(--white);
  font-family: futura-lt-w01-light, var(--body); font-size: 17px; line-height: 23.8px;
}
.careers__form .field input::placeholder { color: rgba(255, 255, 255, .8); }
.careers__form .field input::-webkit-datetime-edit { color: var(--white); }
.field--select { position: relative; }
.field--select select { appearance: none; -webkit-appearance: none; }
.field__caret {
  position: absolute; right: 20px; bottom: 22px; width: 12px; height: 6px;
  fill: var(--white); pointer-events: none;
}
.field__datebox {
  position: relative; border: 1px solid #EFEFF4; border-radius: 5px; background: var(--teal);
}
.careers__form .field--date input { border: 0; border-radius: 0; background: none; }
.careers__form .field--date input::-webkit-calendar-picker-indicator { opacity: 0; }
.field__cal {
  position: absolute; right: 16px; top: 17px; width: 16px; height: 15px;
  fill: var(--white); pointer-events: none;
}
.careers__file {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 45px; margin-bottom: 18px; border: 1px dashed #919191; cursor: pointer;
  font-family: 'avenir-lt-w01-35-light', var(--body); font-size: 14px;
  line-height: 19.6px; color: #919191;
}
.careers__file-icon { fill: #919191; }
.careers__apply {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px; border: 0; border-radius: 0;
  background: var(--teal); color: var(--white);
  font-family: var(--body); font-size: 16px; cursor: pointer;
  transition: opacity .2s;
}
.careers__apply span { line-height: 22.4px; }
.careers__apply:hover { opacity: .85; }
.careers__form .form-thanks { color: #000; text-align: center; }

/* galleries */
.gallery__grid { margin: 0 var(--band); padding-bottom: 30px; }
.jrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.jrow:last-child { margin-bottom: 0; }
.jcell { display: block; min-width: 0; flex: var(--f); aspect-ratio: var(--ar); }
.jcell--fixed { height: var(--jh); }
.jcell img { width: 100%; height: 100%; object-fit: cover; }

/* On mobile the live Pro Gallery abandons the desktop justified rows and lays
 * the images out as a 2-column grid of square, cover-cropped tiles (measured
 * 157x156 on the 320px Wix canvas). Flatten the rows into one grid to match,
 * rather than shrinking whole desktop rows down to the narrow column. */
@media (max-width: 750px) {
  .gallery--justified .gallery__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .gallery--justified .jrow { display: contents; }
  .gallery--justified .jcell,
  .gallery--justified .jcell--fixed {
    flex: none; height: auto; aspect-ratio: 1;
  }
}

.pblock { position: relative; margin-bottom: 44px; padding: 0 var(--band); }
.pblock__title {
  font-family: var(--display); font-size: 28px; font-weight: 400;
  line-height: normal; color: var(--ink);
}
.pblock__sub { margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--ink); }
.pblock__slider { margin: 20px calc(var(--band) * -1) 0; }
.pblock__slider .slider__track { padding: 0 var(--band); }

/* --- lightbox ---------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: var(--white);
  overflow: hidden;
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  /* Inset so the chevrons sit beside the image rather than on top of it. The
   * filename title is hidden, so the image gets the full height. */
  position: absolute; left: 56px; right: 56px; top: 64px; bottom: 64px;
}
/* Two stacked layers so one image can cross-fade into the next, the way the
 * Wix viewer does it: 0.6s ease, both moving at once. */
.lightbox__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .6s ease;
}
.lightbox__img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lightbox__img { transition: none; }
}
/* The viewer titles are raw filenames, which look untidy, so hide them. */
.lightbox__title { display: none; }
.lightbox__nav, .lightbox__close {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #000; cursor: pointer;
}
.lightbox__nav {
  top: 50%; width: 50px; height: 50px; margin-top: -25px;
}
.lightbox__nav--prev { left: 4px; transform: scaleX(-1); }
.lightbox__nav--next { right: 4px; }
.lightbox__nav[hidden] { display: none; }
.lightbox__close { right: 12px; top: 12px; width: 44px; height: 44px; }
.lightbox__expand { left: 12px; top: 12px; width: 44px; height: 44px; }

/* --- footer ------------------------------------------------------------ */

.site-footer {
  position: relative; background: var(--teal-dark); color: var(--white);
  padding: 20px 0 30px; text-align: center;
}
.site-footer__logo { width: 150px; height: 77px; margin: 0 auto; }
.site-footer__logo svg { width: 100%; height: 100%; }
.site-footer__info {
  /* Matches the 268px column Wix uses, so the address wraps the same way. */
  max-width: 268px; margin: 36px auto 0;
  font-size: 16px; line-height: 25px; color: var(--white);
}
.site-footer__info p { min-height: 25px; }
.social { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }
.social img { width: 40px; height: 40px; }

/* ================================================================ DESKTOP */

@media (min-width: 751px) {
  :root { --band: 80px; }

  .d-only { display: block; }
  .m-only { display: none !important; }

  /* --- header ---------------------------------------------------------- */

  /* The header sits over the top of the page body rather than above it — Wix
   * starts the body at y=1 so the hero art runs up under the header bar. It is
   * pinned, and hides itself on a downward scroll (see site.js). */
  .site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 100px;
    transition: top .2s;
  }
  .site-header.is-hidden { top: -101px; }
  main { position: relative; margin-top: 1px; }

  .site-header__logo { left: 17px; top: 9px; width: 156px; height: 80px; transform: none; }

  .nav { display: block; position: absolute; left: 240px; top: 25px; height: 50px; }
  .nav__item { position: absolute; top: 0; height: 50px; }
  .nav__link {
    display: block; width: 100%; height: 50px; padding: 0 10px;
    font-family: var(--body); font-size: 16px; line-height: 50px;
    color: var(--ink); text-align: center; white-space: nowrap;
    background: none; border: 0; cursor: pointer;
  }
  .nav__link:hover, .nav__item--open > .nav__link,
  .nav__link[aria-current] { color: var(--teal); }
  .nav__menu {
    position: absolute; top: 57px; left: 50%; transform: translateX(-50%);
    min-width: 100%; background: var(--white);
    visibility: hidden; opacity: 0;
    transition: opacity .15s ease-in-out, visibility .15s;
  }
  .nav__item--open .nav__menu, .nav__item:hover .nav__menu,
  .nav__item:focus-within .nav__menu { visibility: visible; opacity: 1; }
  .nav__menu a {
    display: block; height: 31px; padding: 0 5px;
    font-family: var(--body); font-size: 16px; line-height: 31px;
    color: var(--ink); text-align: center; white-space: nowrap;
  }
  .nav__menu a:hover { color: var(--teal); }

  .site-header .header-cta { display: flex; position: absolute; right: 25px; top: 29px; }

  /* --- shared ---------------------------------------------------------- */

  .btn { width: 142px; height: 40px; margin: 0; }

  /* Wix pins some section backgrounds to the viewport: an over-tall wrapper
   * with a sticky, viewport-height image inside a clipped section. */
  .strip__bgwrap {
    inset: auto; position: absolute; left: 0; top: -100vh; width: 100%;
    height: calc(100% + 200vh);
  }
  .strip__bgwrap .strip__bg {
    position: sticky; inset: auto; top: 0; width: 100%; height: 100vh;
  }
  .strip__body { position: absolute; inset: 0; }
  .hero__inner { display: contents; }

  .h-page { font-size: 40px; line-height: 57px; margin-top: -5px; }
  .h-section { font-size: 30px; line-height: 42px; margin-top: -3.5px; }

  /* --- home: hero ------------------------------------------------------ */

  .hero { height: 738px; }
  .hero__scrim {
    inset: auto; position: absolute;
    left: var(--band); right: var(--band); top: 100px; height: 532px;
  }
  .hero__title {
    position: absolute; left: 98px; top: 302px; width: 580px; height: 62px;
    margin: -3px 0 0; font-size: 40px; line-height: 62px; text-align: left;
  }
  .hero__sub {
    position: absolute; left: 98px; top: 383px; width: 450px; text-align: left;
  }
  .hero__buttons {
    position: absolute; left: 98px; top: 491px; padding: 0;
    display: flex; gap: 43px;
  }
  .hero__buttons .btn + .btn { margin-top: 0; }

  .features {
    position: absolute; left: var(--band); right: var(--band); top: 632px;
    height: 84px; display: flex; gap: 15px;
  }
  .features__card { flex: 1 1 0; height: 84px; margin: 0; }
  .feature-bar { position: absolute; left: var(--l); top: 651px; }
  .feature-label {
    position: absolute; left: var(--l); top: 662px; width: 194px; font-size: 16px;
  }
  .feature-label:hover { color: var(--teal); }

  /* --- home: portfolio ------------------------------------------------- */

  .portfolio { height: 588px; padding: 0; }
  .portfolio__heading {
    position: absolute; left: calc(50% - 290px); top: 73px; width: 580px; height: 42px;
  }
  .portfolio__rule {
    position: absolute; left: calc(50% - 490px); top: 543px; width: 980px; margin: 0;
  }
  .pcard {
    position: absolute; left: var(--l); top: 162px; width: 298px; height: var(--h);
    min-height: 0; margin: 0; padding: 0;
  }
  .pcard__fill { left: 0; top: -1px; }
  .pcard__fill {
    left: -1px; right: auto; top: -2px; bottom: auto; width: 298px; height: 300px;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease-in-out, visibility .4s;
  }
  .pcard:hover .pcard__fill, .pcard:focus-within .pcard__fill {
    opacity: 1; visibility: visible;
  }
  .pcard__icon {
    position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
    margin: 0; transform-origin: 50% 50%; transition: transform .4s ease-in-out;
  }
  .pcard:hover .pcard__icon, .pcard:focus-within .pcard__icon {
    transform: translateY(-69.65px) scale(1.48);
  }
  .pcard__title {
    position: absolute; left: 75px; top: 144px; width: 148px; height: 36px;
    font-size: 25px; line-height: 36px; margin-top: -3px; color: var(--teal-dark);
    transition: transform .4s ease-in-out, color .4s ease-in-out;
  }
  .pcard:hover .pcard__title, .pcard:focus-within .pcard__title {
    transform: translateY(-70px); color: var(--white);
  }
  .pcard__cta {
    position: absolute; left: 75px; top: var(--t); margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease-in-out, visibility .4s;
  }
  .pcard:hover .pcard__cta, .pcard:focus-within .pcard__cta {
    opacity: 1; visibility: visible;
  }
  .pcard__text {
    position: absolute; left: 24px; top: 206px; width: 250px; margin: 0;
    color: var(--ink);
    transition: transform .4s ease-in-out, color .4s ease-in-out;
  }
  /* On hover the description floats up under the title so the revealed
     "Go to page" button no longer crowds it, and turns white on the fill. */
  .pcard:hover .pcard__text, .pcard:focus-within .pcard__text {
    transform: translateY(-92px); color: var(--white);
  }

  /* --- home: services -------------------------------------------------- */

  .services { height: 1096px; padding: 0; }
  .services__heading {
    position: absolute; left: calc(50% - 290px); top: 50px; width: 580px;
    height: 42px; margin-bottom: 0;
  }
  .scard { position: static; margin: 0; }
  .scard__imglink { position: absolute; left: var(--l); top: var(--t); width: var(--w); }
  .scard__img { height: 198px; }
  .scard__title {
    position: absolute; left: var(--l); top: var(--t); width: var(--w);
    max-width: none; margin: -3px 0 0;
  }
  .scard__more {
    position: absolute; left: var(--l); top: var(--t); width: 250px; margin: 0;
  }
  .scard__cta { position: absolute; left: var(--l); top: var(--t); margin: 0; }

  /* --- home: contact --------------------------------------------------- */

  .contact { height: 601px; padding: 0; }
  .contact__heading {
    position: absolute; left: calc(50% - 290px); top: 54px; width: 580px; height: 57px;
    margin: -5px 0 0; font-size: 40px; line-height: 57px;
  }
  .contact__form {
    position: absolute; left: calc(50% - 378px); top: 162px; width: 757px; height: 386px;
    margin: 0;
  }
  .contact__form .field { position: absolute; margin: 0; }
  .field--half { left: 0; top: 0; width: 368px; }
  .field--right { left: 389px; }
  .field--email { left: 0; top: 71px; width: 757px; }
  .field--message { left: 0; top: 144px; width: 757px; }
  .field__label { font-size: 14px; line-height: 14px; }
  .field input, .field textarea {
    height: 44px; padding: 0 12px; font-size: 18px; line-height: 25.2px;
  }
  .field textarea { height: 88px; padding: 10px 12px; }
  .contact__form .btn-submit {
    position: absolute; left: 226px; top: 273px; width: 305px; height: 50px;
  }
  .contact__form .form-thanks {
    position: absolute; left: 0; top: 332px; width: 757px; margin: 0;
  }

  /* --- inner pages ----------------------------------------------------- */

  .strip.about, .strip.service, .strip.careers, .strip.gallery { height: var(--h); }
  .strip.gallery--justified { height: auto; }

  .about__title { position: absolute; left: 97px; top: 245px; width: 580px; margin: -5px 0 0; }
  .about__prose { position: absolute; left: 97px; top: 327px; width: 734px; margin: 0; }

  .service__card {
    display: block; position: absolute; left: calc(50% - 490px); top: 164px;
    width: 980px; height: 960px;
  }
  .service__title {
    position: absolute; left: calc(50% - 464px); top: 229px; width: var(--w);
    margin: -5px 0 0;
  }
  .service__prose, .service__expertise {
    position: absolute; left: calc(50% - 464px); top: var(--t); width: 615px; margin: 0;
  }
  .slider.service__strip {
    position: absolute; left: 0; top: var(--t); width: 100%; margin: 0; overflow: hidden;
  }
  .service__strip .slider__track { padding: 0; }

  .careers__title {
    position: absolute; left: calc(50% - 289px); top: 147px; width: 580px; margin: -5px 0 0;
  }
  .careers__prose {
    position: absolute; left: calc(50% - 431px); top: 234px; width: 866px; margin: 0;
  }
  .careers__form {
    position: absolute; left: calc(50% - 382px); top: 552px; width: 766px; height: 489px;
    margin: 0;
  }
  .careers__form h2 {
    position: absolute; left: 0; top: 7.5px; width: 766px; margin: 0;
    font-size: 30px; line-height: 42px;
  }
  .careers__form .field { position: absolute; width: 368px; margin: 0; }
  .cf-a { left: 0; }
  .cf-b { left: 399px; }
  .cf-r1 { top: 79px; }
  .cf-r2 { top: 174px; }
  .cf-r3 { top: 269px; }
  .careers__form .field input, .careers__form .field select { width: 368px; }
  .field__caret { left: 335.5px; right: auto; top: 41px; bottom: auto; }
  .field__datebox { width: 368px; height: 50px; }
  .careers__form .field--date input { width: 310px; height: 48px; }
  .field__cal { left: 331px; right: auto; top: 16px; }
  .careers__file { position: absolute; left: 0; top: 372px; width: 368px; margin: 0; }
  .careers__apply { position: absolute; left: 399px; top: 372px; width: 367px; margin: 0; }
  .careers__form .form-thanks {
    position: absolute; left: 0; top: 442px; width: 766px; margin: 0;
  }

  .gallery__title {
    position: absolute; left: 97px; top: 245px; width: 580px; z-index: 1; margin: -5px 0 0;
  }
  .gallery__sub {
    position: absolute; left: 97px; top: 302px; width: 666px; z-index: 1;
  }
  .gallery__grid {
    position: relative; z-index: 1;
    margin: 0 var(--band); padding-top: 357px; padding-bottom: var(--pb);
  }
  .jrow { flex-wrap: nowrap; }

  .pblock { position: static; margin: 0; padding: 0; }
  .pblock__title {
    position: absolute; left: var(--l); top: var(--t); width: 580px; height: 57px;
    font-size: 40px; line-height: 57px; margin-top: -5px;
  }
  .pblock__sub {
    position: absolute; left: var(--l); top: var(--t); width: 666px; margin: 0;
  }
  .slider.pblock__slider {
    position: absolute; left: var(--band); right: var(--band); top: var(--t);
    height: var(--h); margin: 0;
  }
  .pblock__slider .slider__track { padding: 0; }

  /* --- lightbox -------------------------------------------------------- */

  /* With the filename title hidden, the image is centred across the full
     viewport with the chevrons at the edges. */
  .lightbox__stage { left: 72px; right: 72px; top: 74px; bottom: 74px; width: auto; }
  .lightbox__nav--prev { left: 24px; transform: scaleX(-1); }
  .lightbox__nav--next { right: 24px; left: auto; }
  .lightbox__close { right: 30px; top: 30px; width: 38px; height: 44px; }
  .lightbox__expand { left: 35px; top: 26px; width: 38px; height: 44px; }

  /* --- footer ---------------------------------------------------------- */

  .site-footer {
    height: 365px; padding: 0; text-align: left;
    box-shadow: 0 0 5px rgba(0, 0, 0, .7);
  }
  .site-footer__logo {
    position: absolute; left: 97px; top: 17px; width: 156px; height: 80px; margin: 0;
  }
  .site-footer__info {
    position: absolute; left: 97px; top: 132px; width: 268px; margin: 0;
  }
  /* The subscribe form was removed; the social row now fills the right side,
     vertically centred against the address block, with larger icons. */
  .social {
    position: absolute; right: 107px; top: 150px; gap: 22px; margin: 0;
  }
  .social img { width: 42px; height: 42px; }
}