@font-face {
  font-family: "Oracle Helvetica";
  src: url("HelveticaLTStd-Bold.woff2") format("woff2"),
       local("Helvetica LT Pro Bold"),
       local("HelveticaLTPro-Bold");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

* { box-sizing: border-box; }
a, button, .thumbnail { -webkit-tap-highlight-color: transparent; }
.site-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: #45615f url("oracle-background.png") left bottom / cover no-repeat;
}

html { height: 100%; background: #45615f; overflow: hidden; }

body {
  width: 100%;
  height: 100%;
  min-width: 1024px;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: "Oracle Helvetica", "Helvetica LT Pro Bold", "Helvetica LT Pro", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  background: transparent;
}

.site-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 0 2.1484375vw 3rem;
}

.masthead {
  position: relative;
  height: max(12.5vw, 128px);
}

.wordmark {
  position: absolute;
  top: max(3.125vw, 32px);
  left: 0;
  display: flex;
  align-items: center;
  height: max(3.125vw, 32px);
  transform: translate(-5px, 8px);
  color: inherit;
  /* PSD: 75 px at the 2048 px reference viewport. */
  font-size: clamp(2.4rem, 3.662109vw, 4.9375rem);
  font-family: "Oracle Helvetica", "Helvetica LT Pro Bold", "Helvetica LT Pro", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
}

.intro {
  position: absolute;
  top: max(6.25vw, 64px);
  left: 0;
  width: 100%;
  height: max(3.125vw, 32px);
  transform: translate(-1px, 1px);
}
.intro h1 {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  /* PSD text layer is 790 px wide on a 3840 px canvas. */
  font-size: clamp(1.25rem, 1.5625vw, 1.98rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}
.intro a {
  position: absolute;
  top: max(3.125vw, 32px);
  display: block;
  transform: translate(1px, calc(-50% + 1px));
  color: inherit;
  font-size: clamp(.8rem, .849609375vw, 1.0875rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none;
}
.intro a:hover, .intro a:focus-visible { text-decoration: underline; }
.intro h1 .intro-title-link {
  position: static;
  transform: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.intro h1 .intro-title-link:hover, .intro h1 .intro-title-link:focus-visible { text-decoration: underline; }

.more-intro {
  display: none;
}
.more-intro h1 {
  position: absolute;
  top: max(6.25vw, 64px);
  left: 0;
  display: flex;
  align-items: center;
  height: max(3.125vw, 32px);
  margin: 0;
  transform: translate(-1px, 1px);
  font-size: clamp(1.25rem, 1.5625vw, 1.98rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}
.more-intro a {
  position: absolute;
  top: max(9.375vw, 96px);
  left: 0;
  display: block;
  transform: translate(0, calc(-50% + 2px));
  color: inherit;
  font-size: clamp(.8rem, .849609375vw, 1.0875rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none;
}
.more-intro a:hover, .more-intro a:focus-visible { text-decoration: underline; }
.more-intro h1 .more-title-link {
  position: static;
  transform: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.more-intro h1 .more-title-link:hover, .more-intro h1 .more-title-link:focus-visible { text-decoration: underline; }

.primary-nav {
  position: relative;
  display: flex;
  align-items: center;
  height: max(3.125vw, 32px);
}
.primary-nav a {
  position: absolute;
  top: 50%;
  transform: translate(-1px, calc(-50% + 2px));
  color: inherit;
  /* PSD navigation layers are 42 px tall on the 3840 px canvas. */
  font-size: clamp(1.15rem, 1.416016vw, 1.8375rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
}
.primary-nav a:nth-child(1) { left: 0; }
.primary-nav a:nth-child(2) { left: 8.958984375vw; }
.primary-nav a:nth-child(3) { left: 23.4619140625vw; }
.primary-nav a:nth-child(4) { left: 37.658203125vw; }
.primary-nav a:nth-child(5) { left: 46.7041015625vw; }
.primary-nav a:hover, .primary-nav a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }

.more-page {
  display: none;
  margin-left: -.15625vw;
  height: max(3.125vw, 32px);
  padding: 0;
  align-items: center;
}
.more-page p {
  margin: 0;
  font-size: clamp(1.15rem, 1.416016vw, 1.8375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}
#more:target, #more.is-active { display: flex; }
body:has(#more:target) .home-page,
body:has(#more:target) .primary-nav,
body:has(#more:target) .intro,
body:has(#more.is-active) .home-page,
body:has(#more.is-active) .primary-nav,
body:has(#more.is-active) .intro { display: none; }
body:has(#more:target) .more-intro,
body:has(#more.is-active) .more-intro { display: block; }

.clients-page,
.works-page {
  display: none;
  width: 54.9vw;
  margin-left: .416666667vw;
  padding: 1.3vw 1.2vw;
  background: rgba(0, 0, 0, .25);
}
.clients-page {
  /* Matches the Select Works panel height while keeping both client cards centered vertically. */
  padding-block: 1.075vw;
  transform: translate(-9px, 1px);
}
.works-page { transform: translate(-9px, 1px); }
#clients:target, #clients.is-active { display: block; }
body:has(#clients:target) .home-page,
body:has(#clients.is-active) .home-page { display: none; }
body:has(#clients:target) .primary-nav a[href="#clients"],
body:has(#clients.is-active) .primary-nav a[href="#clients"] { text-decoration: underline; text-underline-offset: .18em; }

.client-grid {
  display: grid;
  grid-template-columns: 24.53125vw 25.052083vw;
  column-gap: 2.9vw;
}
.client-card {
  display: block;
  overflow: hidden;
  background: #111;
}
.client-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .18s ease;
}
.client-card:hover img, .client-card:focus-visible img { transform: scale(1.015); }
.client-card:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

#selected-works:target, #selected-works.is-active { display: block; }
body:has(#selected-works:target) .home-page,
body:has(#selected-works.is-active) .home-page { display: none; }
body:has(#selected-works:target) .primary-nav a[href="#selected-works"],
body:has(#selected-works.is-active) .primary-nav a[href="#selected-works"] { text-decoration: underline; text-underline-offset: .18em; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2vw;
}
.video-embed {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
}
.contact-page {
  display: none;
  width: 19.661458vw;
  height: 7.8125vw;
  margin-left: 46.71875vw;
  padding: 1.2vw;
  background: rgba(0, 0, 0, .25);
  transform: translateX(-204px);
}
#contact:target, #contact.is-active { display: block; }
body:has(#contact:target) .home-page,
body:has(#contact.is-active) .home-page { display: none; }
body:has(#contact:target) .primary-nav a[href="#contact"],
body:has(#contact.is-active) .primary-nav a[href="#contact"] { text-decoration: underline; text-underline-offset: .18em; }
.contact-detail {
  display: block;
  width: max-content;
  color: inherit;
  font-size: clamp(1.1rem, 1.416016vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  text-decoration: none;
}
.contact-content {
  transform: scale(.76);
  transform-origin: top left;
}
.contact-detail + .contact-detail { margin-top: .45vw; }
.contact-detail:hover, .contact-detail:focus-visible { text-decoration: underline; }
.instagram-link {
  display: block;
  width: 2.65vw;
  margin-top: .6vw;
  transform: scale(.62);
  transform-origin: top left;
}
.instagram-link img { display: block; width: 100%; height: auto; }
.instagram-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.gallery-page {
  display: none;
  margin-top: 0;
  padding: clamp(1.25rem, 1vw, 1.3rem);
  padding-block: calc(clamp(1.25rem, 1vw, 1.3rem) + 7.5px);
  background: rgba(0, 0, 0, .25);
  transform: translateY(1px) scale(.70);
  transform-origin: top left;
}
#photography:target, #photography.is-active { display: block; }
body:has(#photography:target) .home-page,
body:has(#photography.is-active) .home-page { display: none; }
body:has(#photography:target) .primary-nav a[href="#photography"],
body:has(#photography.is-active) .primary-nav a[href="#photography"] { text-decoration: underline; text-underline-offset: .18em; }

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 10vw);
  justify-content: space-between;
  column-gap: 0;
  /* The grid spacing preserves equal panel insets without changing panel dimensions. */
  row-gap: calc(clamp(1.25rem, 1.5vw, 2rem) + 1.05vw - 4px);
}
.thumbnail {
  aspect-ratio: 1.45 / 1;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(7, 12, 11, .74);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbnail:hover { background: rgba(7, 12, 11, .9); }
.thumbnail:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 767px) {
  .desktop-break { display: none; }
  body {
    height: 100svh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .site-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100svh;
    padding: 1.25rem 1rem 2rem;
    overflow: hidden;
    transform: translateY(34px);
    transform-origin: top left;
  }
  .mobile-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mobile-scroll-area::-webkit-scrollbar { display: none; }

  .masthead { display: grid; height: auto; gap: .8rem; }
  .wordmark, .intro, .more-intro h1, .more-intro a {
    position: static;
    transform: none;
  }
  .wordmark {
    display: block;
    height: auto;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: .95;
    transform: translateX(-3px) scale(1.25);
    transform-origin: left center;
  }
  .intro {
    width: auto;
    height: auto;
    transform: scale(.75);
    transform-origin: left top;
  }
  .intro h1, .more-intro h1 { display: block; height: auto; font-size: clamp(1.25rem, 5.7vw, 1.75rem); line-height: 1.05; }
  .intro a, .more-intro a { position: static; display: inline-block; margin-top: .7rem; font-size: 1rem; }
  .more-intro > a { transform: translate(1px, calc(-50% + 1px)); }
  .intro > a {
  }
  .more-intro {
    display: none;
    width: auto;
    height: auto;
    transform: scale(.75);
    transform-origin: left top;
  }
  .more-intro h1 {
    transform: none;
  }
  .intro h1 .intro-title-link, .more-intro h1 .more-title-link { display: inline; margin-top: 0; }

  .primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: .65rem 1rem;
    height: auto;
    margin-top: 0;
  }
  .primary-nav a { position: static; transform: none; font-size: clamp(.95rem, 4.3vw, 1.15rem); line-height: 1.1; }
  .primary-nav a:nth-child(n) { left: auto; }

  .more-page { height: auto; margin: 0; padding: 0; }
  .more-page p { font-size: clamp(.95rem, 4.3vw, 1.15rem); line-height: 1.1; }

  .clients-page, .works-page, .gallery-page, .contact-page {
    width: 100%;
    height: auto;
    margin: 2rem 0 0;
    transform: none;
  }
  .more-page, .clients-page, .works-page, .gallery-page {
    max-height: calc(100svh - 17rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .clients-page { padding: 1rem; }
  .works-page {
    padding: 1rem;
    transform: scale(1);
    transform-origin: center top;
    max-height: calc(100svh - 20rem);
    padding-bottom: 1rem;
    scroll-padding-bottom: 1rem;
  }
  .client-grid, .video-grid { grid-template-columns: 1fr; gap: 1rem; }

  .contact-page { padding: 1.25rem; transform: scale(.75); transform-origin: left top; }
  .contact-content { transform: none; }
  .contact-detail { font-size: clamp(1rem, 5vw, 1.35rem); }
  .contact-detail + .contact-detail { margin-top: .75rem; }
  .instagram-link { width: 2.5rem; margin-top: 1rem; }

  .gallery-page { padding: 1rem; transform-origin: left top; }
  .gallery-page {
    max-height: calc(100svh - 20rem);
    padding-bottom: 1rem;
    scroll-padding-bottom: 1rem;
  }
  .more-page,
  .clients-page,
  .works-page,
  .gallery-page {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
  }
  body:has(#selected-works:target) .site-shell,
  body:has(#selected-works.is-active) .site-shell,
  body:has(#photography:target) .site-shell,
  body:has(#photography.is-active) .site-shell {
    display: block;
    height: 100svh;
    min-height: 0;
    padding: 0 1rem 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform: none;
  }
  body:has(#selected-works:target) .site-shell::-webkit-scrollbar,
  body:has(#selected-works.is-active) .site-shell::-webkit-scrollbar,
  body:has(#photography:target) .site-shell::-webkit-scrollbar,
  body:has(#photography.is-active) .site-shell::-webkit-scrollbar { display: none; }
  body:has(#selected-works:target) .masthead,
  body:has(#selected-works.is-active) .masthead,
  body:has(#photography:target) .masthead,
  body:has(#photography.is-active) .masthead {
    margin-top: calc(34px + 1.25rem);
  }
  body:has(#selected-works:target) .mobile-scroll-area,
  body:has(#selected-works.is-active) .mobile-scroll-area,
  body:has(#photography:target) .mobile-scroll-area,
  body:has(#photography.is-active) .mobile-scroll-area {
    overflow: visible;
  }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; transform: none; }

}

@media (min-width: 768px) {
  .primary-nav a[href="#contact"] { margin-left: -10px; }
  .more-page p { transform: translateY(1.9px); }
}

.gallery a.thumbnail { display: block; }