/* Independent interaction styles; captured layout styles are kept per page. */
:root { --site-font: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }
body, button, input, textarea, select { font-family: var(--site-font); }
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.hamburger-click-area, .close-responsive-click-area, .masthead-arrow-container { background: none; border: 0; cursor: pointer; padding: 0; }
.js-responsive-nav { display: none; }
body.menu-open { overflow: hidden; }
body.menu-open .js-responsive-nav { display: block; position: fixed; inset: 0; z-index: 1001; }
.js-responsive-nav .responsive-nav { height: 100dvh; }
.grid--main { gap: 20px; align-items: flex-start; visibility: visible; }
.grid__item-container { margin: 0 !important; max-width: 100%; flex: none !important; overflow: hidden; cursor: zoom-in; }
.grid__item-image { opacity: 1 !important; }
.asset-needed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: #ededed; color: #555; border: 1px dashed #aaa; font-family: var(--site-font); font-size: 16px; text-align: center; }
.asset-needed small { font-size: 14px; }
.video-wrap > .asset-needed { width: 100%; height: 100%; min-height: 100vh; }
.brand-media { position: absolute; inset: 0; background: #fff; }
.splash .splash-image .brand-animation, .splash .splash-image .brand-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; z-index: 0; }
.splash .splash-image .brand-poster { display: none; }
@media(max-width:980px) {
  body[data-page="/home"] .splash .splash-image .brand-animation,
  body[data-page="/home"] .splash .splash-image .brand-poster {
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    transform: none;
    object-position: 50% 50%;
  }
}
/* A brief brand transition connects the portfolio's pages. */
.page-logo-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.page-logo-transition.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.page-logo-transition.is-entering { transition: none; }
.page-logo-graphic {
  display: block;
  width: clamp(11rem, 36vw, 22rem);
  max-width: 80vw;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  object-position: center;
}
html.chesler-transition-pending::before,
html.chesler-transition-pending::after {
  content: "";
  position: fixed;
  z-index: 10001;
  pointer-events: none;
}
html.chesler-transition-pending::before { inset: 0; background: #fff; }
html.chesler-transition-pending::after {
  top: 50%;
  left: 50%;
  width: clamp(11rem, 36vw, 22rem);
  max-width: 80vw;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("brand/logo.png") center / contain no-repeat;
}
@media(prefers-reduced-motion:reduce) {
  .page-logo-transition,
  html.chesler-transition-pending::before,
  html.chesler-transition-pending::after { display: none; }
}
.grid__item-container .asset-needed { position: absolute; inset: 0; padding: 12px; font-size: 14px; }
.project-module-image > .asset-needed, .image-wrap > .asset-needed { min-height: 240px; width: 100%; }
.contact-preview-note { margin: 22px 0 0; font-size: 14px; line-height: 1.6; }
button.submit-button { border: 0; cursor: pointer; }
/* Page calls to action share one style, independent of captured module IDs. */
.project-module-button { max-width: 100% !important; }
body .modules .project-module-button .button-module,
body .modules .project-module-form .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: min(100%, 14rem);
  max-width: 100%;
  min-height: 4rem;
  height: auto;
  padding: 1rem 2.25rem;
  border: 2px solid #022a55;
  border-radius: 999px;
  background: #fff;
  color: #022a55;
  font-family: var(--site-font);
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal !important;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
body .modules .project-module-button .button-module::before,
body .modules .project-module-button .button-module::after { content: none; }
body .modules .project-module-button .button-module:hover,
body .modules .project-module-form .submit-button:hover {
  background: #022a55;
  color: #fff;
  text-decoration: none;
}
body .modules .project-module-button .button-module:focus-visible,
body .modules .project-module-form .submit-button:focus-visible {
  outline: 3px solid #022a55;
  outline-offset: 5px;
}
.project-module-form .submit-button .submit-text { font: inherit; white-space: normal; }
.splash-modules .project-module-tree .tree-wrapper { gap: 1rem; flex-wrap: wrap; }
.splash-modules .project-module-tree .tree-child-wrapper { flex: 1 1 10rem !important; }
body .splash-modules .modules .project-module-tree .button-module { min-width: min(100%, 10rem); }
@media(max-width:540px) {
  body .modules .project-module-button .button-module,
  body .modules .project-module-form .submit-button { padding: .875rem 1.5rem; min-height: 3.5rem; }
}
/* The Services process follows a staggered, connected sequence. */
.services-process {
  --process-number-size: clamp(4rem, 7vw, 7rem);
  --process-number-column: calc(var(--process-number-size) * 1.3);
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  text-align: left;
}
.services-process .process-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--process-number-column) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2vw, 2rem);
  width: 84%;
  min-height: var(--process-number-size);
  margin: 0 0 4rem;
  padding: 0;
}
.services-process .process-step:nth-child(even) { margin-left: 16%; }
.services-process .process-step:last-child { margin-bottom: 0; }
.services-process .process-number {
  color: #aaa;
  font-family: var(--site-font);
  font-size: var(--process-number-size);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  text-align: center;
}
.services-process .process-copy { min-width: 0; padding-top: .4rem; }
.services-process .process-copy h3,
.services-process .process-copy p,
.services-overview .service-label,
.services-overview .service-item,
.services-overview .service-note {
  color: #999;
  font-family: var(--site-font);
  font-size: clamp(1.125rem, 1.125rem + .8vw, 1.875rem);
  font-style: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
.services-process .process-copy h3 { margin: 0 0 .65rem; }
.services-process .process-copy h3,
.services-overview .service-label { font-weight: 700; line-height: 1.25; }
.services-process .process-copy p,
.services-overview .service-item,
.services-overview .service-note { font-weight: 300; line-height: 1.45; }
.services-process .process-copy p { margin: 0; padding: 0; }
.services-overview { text-align: left; }
.services-overview .service-item { margin: 0 0 1.25rem; padding: 0; }
.services-overview .service-note { margin: 2rem 0 0; padding: 0; text-align: center; }
.services-process .process-step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--process-number-column) / 2);
  top: -2rem;
  height: 1.25rem;
  border-left: 1px solid #d6d6d6;
}
.services-process .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--process-number-column) / 2);
  top: calc(var(--process-number-size) + .75rem);
  bottom: -2rem;
  width: 19.047619%;
  border-left: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
}
.services-process .process-step:nth-child(even):not(:last-child)::after {
  left: calc(var(--process-number-column) / 2 - 19.047619%);
  border-left: 0;
  border-right: 1px solid #d6d6d6;
}
@media(max-width:760px) {
  .services-process .process-step { width: 100%; }
  .services-process .process-step:nth-child(even) { margin-left: 0; }
  .services-process .process-step:not(:last-child)::after,
  .services-process .process-step:nth-child(even):not(:last-child)::after {
    left: calc(var(--process-number-column) / 2);
    width: 0;
    border-left: 1px solid #d6d6d6;
    border-right: 0;
    border-bottom: 0;
  }
}
@media(max-width:540px) {
  .services-process { --process-number-size: 3rem; --process-number-column: 4rem; }
  .services-process .process-copy h3,
  .services-overview .service-label { font-size: 1.25rem; }
  .services-process .process-copy p,
  .services-overview .service-item,
  .services-overview .service-note { font-size: 1.125rem; }
}
.site-lightbox { position: fixed; inset: 0; z-index: 3000; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; background: rgba(255,255,255,.96); color: #282828; padding: 68px 22px 24px; }
.site-lightbox[hidden] { display: none; }
.site-lightbox figure { margin: 0; min-width: 0; text-align: center; overflow: auto; max-height: calc(100dvh - 105px); }
.site-lightbox img { max-width: 100%; max-height: calc(100dvh - 155px); width: auto; height: auto; display: block; margin: auto; cursor: zoom-in; object-fit: contain; }
.site-lightbox.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.site-lightbox figcaption { padding: 12px; font-size: 14px; line-height: 1.5; }
.site-lightbox button { border: 1px solid #999; background: white; border-radius: 50%; width: 48px; height: 48px; cursor: pointer; font-size: 22px; }
.site-lightbox .viewer-close { position: absolute; top: 16px; right: 22px; }
body.viewer-open { overflow: hidden; }
@media(max-width:540px) {
  .grid--main { gap: 10px; }
  .site-lightbox { grid-template-columns: 36px 1fr 36px; padding: 68px 8px 24px; gap: 4px; }
  .site-lightbox button { width: 36px; height: 36px; font-size: 18px; }
  .site-header .logo-text { font-size: clamp(20px, 6vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
  .splash .module-text span[style*="font-size:38px"] { font-size: clamp(24px,7vw,38px) !important; line-height: 1.2; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } .splash .splash-image .brand-animation { display: none; } .splash .splash-image .brand-poster { display: block; } }