/* First-party static layout for the temporary portfolio archive. */
:root {
  --offline-gutter: clamp(18px, 3vw, 52px);
  --offline-content: 1440px;
  --offline-ink: #161616;
  --offline-paper: #fff;
  --offline-pink: #f2b8b4;
}

*, *::before, *::after { box-sizing: border-box; }
html { color: var(--offline-ink); background: var(--offline-paper); font-size: 20px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--offline-ink);
  background: var(--offline-paper);
  font-family: Poppins, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
img, svg { max-width: 100%; }
img { vertical-align: middle; }
a { color: inherit; }
.hidden, .floating-cart { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.header-skip-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Manrope, Arial, sans-serif;
  font-weight: 500;
}
h2, h3 { font-size: clamp(1.65rem, 2.83vw, 2.037rem); line-height: 1.1424; }
h4 { font-size: clamp(1.3rem, 2.11vw, 1.518rem); line-height: 1.1712; }

/* Header: replace JS-calculated positioning with a predictable flex layout. */
.header {
  position: absolute !important;
  inset: 0 0 auto;
  z-index: 20;
  width: 100%;
  color: #fff;
  background: transparent !important;
}
.header-announcement-bar-wrapper { position: relative !important; }
.header-inner {
  min-height: clamp(82px, 10.64vw, 154px);
  padding: 2.5vw var(--offline-gutter) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.header-title-nav-wrapper { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.header-title-text a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  -webkit-text-stroke: .65px #000;
  paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}
.header-title-text { font-family: Manrope, Arial, sans-serif; font-size: 1rem; line-height: 1; }
.header-nav-list, .header-actions, .header-actions-action { display: flex; align-items: center; }
.header-nav-list { margin: 0; padding: 0; list-style: none; }
.header-nav-list { gap: clamp(16px, 2.2vw, 36px); }
.header-nav-item a { color: inherit; text-decoration: none; }
.header-nav-item--active a { text-decoration: underline; text-underline-offset: 5px; }
.header-background { position: absolute; inset: 0; z-index: -1; background: transparent !important; }
.header-display-mobile, .header-burger, .header-menu { display: none !important; }

/* Squarespace normally applies these dimensions with runtime component CSS. */
.header-icon,
.header-icon svg,
.header-actions svg,
.sqs-svg-icon--wrapper,
.sqs-svg-icon--wrapper > div,
.sqs-svg-icon--social {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}
.sqs-svg-icon--list { display: flex !important; justify-content: center; align-items: center; }
.sqs-use--icon, .header-icon use { fill: currentColor; }

/* General section containment and the classic 12-column editor grid. */
.page-section {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
}
.section-height--large { min-height: 100vh; }
.section-height--medium { min-height: 66vh; }
.section-height--small { min-height: 33vh; }
.vertical-alignment--middle { align-items: center; }
.horizontal-alignment--center { justify-content: center; }
.page-section > .section-border,
.page-section > .section-background,
.section-border > .section-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  pointer-events: none;
}
.section-background img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
.section-background-overlay { position: absolute; inset: 0; }
/* Squarespace generated the divider SVG at runtime. Use a static curved mask. */
.section-border[style*="clip-path"] {
  clip-path: ellipse(110% 100% at 50% 0%) !important;
}
.page-section[data-fluid-engine-section].section-height--medium.has-background:first-of-type {
  min-height: 77.25vh;
}
.page-section.black > .section-border > .section-background,
.page-section.black > .section-background { background-color: #000; }
.page-section.bright > .section-border > .section-background,
.page-section.bright > .section-background { background-color: var(--offline-pink); }
.page-section.bright .section-background-overlay { background: rgba(242, 184, 180, .78); }
.page-section > .content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  padding: 6.6vmax var(--offline-gutter);
}
.content-wrapper:not(.portfolio-grid-overlay) { max-width: var(--offline-content); margin-inline: auto; }
.page-section > .content-wrapper > .content { width: 100%; }
.sqs-layout, .sqs-row { width: 100%; }
.sqs-layout { max-width: 1049px; margin-inline: auto; }
.sqs-row { display: flex; flex-wrap: wrap; }
.sqs-col-1 { width: 8.333333%; }
.sqs-col-2 { width: 16.666667%; }
.sqs-col-3 { width: 25%; }
.sqs-col-4 { width: 33.333333%; }
.sqs-col-5 { width: 41.666667%; }
.sqs-col-6 { width: 50%; }
.sqs-col-7 { width: 58.333333%; }
.sqs-col-8 { width: 66.666667%; }
.sqs-col-9 { width: 75%; }
.sqs-col-10 { width: 83.333333%; }
.sqs-col-11 { width: 91.666667%; }
.sqs-col-12 { width: 100%; }
.sqs-block { position: relative; }
.sqs-block-html { padding-inline: 17px; }
.sqs-block-spacer { min-height: 34px; padding-inline: 17px; }
.sqs-block-spacer > .sqs-block-content { min-height: 34px; }
.video-block, .image-block { padding: 17px; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }

/* Home portfolio grid. */
.portfolio-grid-overlay {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.portfolio-grid-overlay .grid-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  background: #222;
}
.portfolio-grid-overlay .grid-image,
.portfolio-grid-overlay .grid-image-inner-wrapper { position: absolute; inset: 0; }
.portfolio-grid-overlay .grid-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.portfolio-grid-overlay .portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  transition: opacity .18s ease;
}
.portfolio-grid-overlay .portfolio-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  opacity: 0;
  transition: opacity .18s ease;
}
.portfolio-grid-overlay .portfolio-title {
  margin: 0;
  color: #fff;
  -webkit-text-stroke: .75px #000;
  paint-order: stroke fill;
  text-shadow: 0 1px 3px #000, 0 0 7px rgba(0, 0, 0, .8);
}
.portfolio-grid-overlay .grid-item:hover .portfolio-overlay,
.portfolio-grid-overlay .grid-item:focus-visible .portfolio-overlay,
.portfolio-grid-overlay .grid-item:hover .portfolio-text,
.portfolio-grid-overlay .grid-item:focus-visible .portfolio-text { opacity: 1; }

/* Project images: respect the source proportions instead of forcing runtime boxes. */
.sqs-block-image img:not([elementtiming="nbf-background"]),
.image-block img:not([elementtiming="nbf-background"]),
.sqs-image img:not([elementtiming="nbf-background"]) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
.sqs-block-image .fluid-image-container,
.sqs-block-image .content-fill,
.image-block-wrapper { height: auto !important; min-height: 0 !important; }
.sqs-block-image .fluid-image-container,
.sqs-block-image .content-fill { position: relative !important; }
.sqs-block-image .content-fill img { position: relative !important; }

/* Videos unavailable to the archive get a deliberate, stable placeholder. */
.video-block .intrinsic,
.video-block .embed-block-wrapper,
.video-block .sqs-video-wrapper { width: 100%; }
.video-block .embed-block-wrapper {
  position: relative;
  height: auto !important;
  padding-bottom: 0 !important;
  aspect-ratio: 16 / 9;
}
.video-block .sqs-video-wrapper { position: absolute; inset: 0; }
.video-block .sqs-video-overlay,
.video-block .sqs-video-overlay img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.video-block .sqs-video-overlay { opacity: 1 !important; }
.video-block .sqs-video-overlay img { object-fit: cover; }
.offline-local-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.offline-youtube-ready .sqs-video-overlay {
  cursor: pointer;
}
.offline-youtube-ready .sqs-video-overlay:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
}
.offline-youtube-embed {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.offline-youtube-note {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  translate: -50% 0;
  padding: 8px 12px;
  color: #fff;
  background: rgba(0, 0, 0, .76);
  font: 500 13px/1.2 Poppins, Arial, sans-serif;
  white-space: nowrap;
}
.offline-video-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 42%);
}
.offline-video-card strong { display: none; }
.offline-video-card span {
  align-self: end;
  justify-self: center;
  padding: 8px 12px;
  color: #fff;
  background: rgba(0,0,0,.72);
  font-size: 13px;
  line-height: 1.25;
}

/* Previous/next navigation normally depends on the removed template CSS. */
.item-pagination {
  display: flex;
  width: 100%;
  padding: var(--offline-gutter);
  background: #fff;
}
.item-pagination-link {
  display: flex !important;
  align-items: center;
  gap: 18px;
  min-width: 0;
  margin-left: auto;
  color: inherit;
  text-decoration: none;
}
.item-pagination-title { margin: 0; line-height: 1; }
.item-pagination-prev-next { display: none; }
.item-pagination-icon { flex: 0 0 9px; width: 9px; height: 16px; }
.item-pagination-icon svg { display: block; width: 9px !important; height: 16px !important; }
.gallery-section { min-height: 100px !important; }
.gallery-section > .content-wrapper { padding: 0 !important; }

/* Footer and utility cleanup. */
.footer-sections .content-wrapper { padding-inline: var(--offline-gutter); }
.social-account-links-v2-block { padding-block: 18px; }
.footer-sections { position: relative; }

@media (max-width: 767px) {
  html { font-size: 16px; }
  h2, h3 { font-size: clamp(1.45rem, 7vw, 2rem); }
  h4 { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }
  .header { color: #fff; background: transparent !important; }
  .header-inner { min-height: 70px; padding-block: 18px !important; }
  .header-display-desktop .header-nav, .header-display-desktop .header-actions { display: none !important; }
  .header-display-desktop { display: block !important; }
  .section-height--large { min-height: 100vh; }
  .sqs-row { display: block; }
  [class*="sqs-col-"] { width: 100%; }
  .sqs-col-1 > .sqs-block-spacer { display: none; }
  .sqs-block-html { padding-inline: 0; }
  .video-block, .image-block { padding-inline: 0; }
  .item-pagination { padding-block: 25px; }
  .portfolio-grid-overlay { grid-template-columns: 1fr; }
  .portfolio-grid-overlay .portfolio-text,
  .portfolio-grid-overlay .portfolio-overlay { opacity: 1; }
  .portfolio-grid-overlay .portfolio-text { align-items: end; justify-items: start; text-align: left; }
  .portfolio-grid-overlay .portfolio-overlay {
    background: linear-gradient(to top, rgba(0,0,0,.58), transparent 55%);
  }
}