/* Fedpump's motion layer: smooth wheel scrolling, word reveals and image stacks. */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* The navigation floats over the photography, then becomes denser on scroll. */
.site-header {
  inset: 18px 24px auto;
  width: min(calc(100% - 48px), 1328px);
  margin-inline: auto;
  height: 84px;
  border: 1px solid #ffffff36;
  border-radius: 18px;
  background: linear-gradient(110deg, #102637aa, #18314470);
  box-shadow: 0 12px 36px #03111c16, inset 0 1px 0 #ffffff0d;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  transition: height .45s var(--ease), background .45s, box-shadow .45s;
}
.site-header .header-inner { width: calc(100% - 42px); }
.site-header .brand img { height: 64px; width: 96px; }
.site-header.is-scrolled { height: 68px; background: #0a1b2be3; border-bottom-color: #ffffff30; }
.site-header.is-scrolled .brand img { height: 54px; }
.site-header .button { border-radius: 9px; }
.reading-progress { height: 2px; }
.hero { height: max(790px, 100svh); max-height: 1050px; }
.hero-video { left: 0; width: 100%; opacity: .78; object-position: center; }
.hero:after {
  background: linear-gradient(90deg, #071b2bf2 0%, #071b2bb3 35%, #071b2b24 83%), linear-gradient(0deg, #071725f0 0%, transparent 40%);
}
.hero-content { padding-top: clamp(190px, 23svh, 260px); }
.hero h1, .hero-description, .hero-actions { animation: none; }
.js-motion .hero-video {
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(var(--hero-scale, 1.08));
  transform-origin: 60% 40%;
}
.js-motion .hero-content { will-change: auto; }

/* Natural text remains in the document; spans only provide the visual reveal. */
.word-mask { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.motion-word { display: inline-block; }
.js-motion .word-reveal .motion-word {
  opacity: 0;
  transform: translate3d(0, 105%, 0) rotate(2deg);
  transition: transform .85s var(--ease), opacity .65s ease;
  transition-delay: var(--word-delay, 0ms);
  transform-origin: left bottom;
}
.js-motion .word-reveal.words-visible .motion-word { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
.js-motion .hero-eyebrow,
.js-motion .hero-description,
.js-motion .hero-actions,
.js-motion .hero-proof { opacity: 0; translate: 0 22px; transition: opacity .9s ease, translate 1.1s var(--ease); }
.js-motion.hero-ready .hero-eyebrow,
.js-motion.hero-ready .hero-description,
.js-motion.hero-ready .hero-actions,
.js-motion.hero-ready .hero-proof { opacity: 1; translate: 0 0; }
.hero-description { transition-delay: .2s !important; }
.hero-actions { transition-delay: .32s !important; }
.hero-proof { transition-delay: .44s !important; }

.js-motion .reveal { transform: translate3d(0, 36px, 0); transition-duration: 1s; }
.js-motion .reveal.visible { transform: translate3d(0, 0, 0); }
.js-motion .section-heading.reveal { transform: none; }
.about-image-frame { height: 470px; overflow: hidden; border-radius: 12px; }
.about-image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 43% center; filter: saturate(.3); }
.js-motion .media-reveal { clip-path: inset(9% 0 9% 0 round 14px); opacity: .25; transition: clip-path 1.4s var(--ease), opacity 1s ease; }
.js-motion .media-reveal.visible { clip-path: inset(0 0 0 0 round 14px); opacity: 1; }
.js-motion [data-parallax] { transform: translate3d(0, var(--image-shift, 0px), 0) scale(1.12); }
.service-detail { border-radius: 14px; }
.experience-card { border-radius: 10px; box-shadow: 0 15px 35px #0b1c2c16; }
.service-option { transition: background .35s, padding .45s var(--ease); }
.service-detail-content { transition: opacity .3s; }

/* Like the reference, each photograph pins while the next glass panel covers it. */
.workshop-section {
  position: relative;
  padding-bottom: 100px;
  background: radial-gradient(ellipse at 4% 30%, #c9d9db80, transparent 54%), radial-gradient(ellipse at 100% 70%, #edb77128, transparent 58%), #eff2ed;
}
.workshop-section > .container { position: relative; }
.workshop-section .section-heading { margin-bottom: 64px; }
.stack-gallery { display: block; position: relative; isolation: isolate; }
.workshop-panel {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: stretch;
  height: clamp(510px, 71svh, 700px);
  margin-bottom: 56px;
  padding: 38px;
  border: 1px solid #ffffffd6;
  border-radius: 24px;
  background: #f9faf6d9;
  box-shadow: 0 18px 60px #24403e0b, inset 0 1px 0 #ffffff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: center top;
}
.workshop-panel:last-child { margin-bottom: 0; }
.js-motion .workshop-panel { position: sticky; top: 116px; transform: scale(var(--panel-scale, 1)); opacity: var(--panel-opacity, 1); }
.workshop-panel-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 15px 10px 15px 4px; }
.panel-index { font-family: 'Manrope', sans-serif; color: #a4723c; font-size: 12px; font-weight: 700; display: flex; gap: 14px; align-items: center; margin-bottom: 38px; }
.panel-index > span { color: #677977; font-size: 9px; font-weight: 500; letter-spacing: 1.8px; }
.workshop-panel h3 { font-size: clamp(35px, 3.8vw, 55px); line-height: 1.1; letter-spacing: -2.3px; font-weight: 600; }
.workshop-panel h3 em { font-style: normal; color: #81908c; }
.workshop-panel-copy > p { max-width: 350px; color: #5e706e; font-size: 13px; line-height: 1.9; margin-top: 25px; }
.capability-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.capability-tags span { font-size: 7px; letter-spacing: 1.1px; color: #63736b; padding: 6px 9px; border: 1px solid #c8d0c5; border-radius: 30px; }
.workshop-panel .inline-link { margin-top: 32px; font-size: 11px; }
.stack-gallery .gallery-photo { height: 100%; min-height: 0; width: 100%; border-radius: 15px; grid-column: auto; }
.stack-gallery .gallery-photo img { height: 100%; object-fit: cover; object-position: center; filter: saturate(.85); transition: filter .6s ease; }
.stack-gallery .gallery-photo:hover img { filter: saturate(1.1); }
.stack-gallery .gallery-photo .photo-label { font-size: 9px; letter-spacing: 1.6px; bottom: 24px; left: 24px; right: 24px; }
.panel-reverse .workshop-panel-copy { order: 2; padding-left: 15px; }
.panel-reverse .gallery-photo { order: 1; }
.workshop-panel:nth-child(3) img { object-position: 48% 30%; }
.stack-gallery .gallery-photo:focus-visible { outline-offset: -7px; outline-color: var(--gold); }
.workshop-panel:focus-within { opacity: 1; }
.process-section { position: relative; z-index: 1; }

@media (max-width: 1150px) {
  .workshop-panel { gap: 32px; padding: 30px; }
  .workshop-panel h3 { font-size: 43px; }
  .about-image-frame { height: 430px; }
  .site-header .desktop-nav { gap: 25px; margin-right: 12px; }
}
@media (max-width: 850px) {
  .site-header { inset: 14px 16px auto; width: calc(100% - 32px); height: 76px; border-radius: 15px; }
  .site-header .header-inner { width: calc(100% - 30px); }
  .site-header .brand img { width: 83px; height: 59px; }
  .site-header .desktop-nav { gap: 18px; margin-right: 4px; }
  .hero { min-height: 780px; max-height: none; height: 100svh; }
  .hero-content { padding-top: 185px; }
  .hero-video { width: 100%; left: 0; opacity: .65; }
  .about-image-frame { height: 470px; }
  .workshop-panel { height: 570px; padding: 25px; gap: 28px; }
  .workshop-panel h3 { font-size: 36px; letter-spacing: -1.6px; }
  .workshop-panel-copy > p { font-size: 12px; }
  .panel-index { margin-bottom: 27px; }
  .panel-index > span { font-size: 8px; letter-spacing: 1.2px; }
  .capability-tags { margin-top: 20px; }
  .workshop-panel .inline-link { font-size: 10px; margin-top: 25px; }
  .js-motion .workshop-panel { top: 104px; }
}
@media (max-width: 600px) {
  .site-header { inset: 12px 12px auto; width: calc(100% - 24px); height: 66px; border-radius: 13px; }
  .site-header .header-inner { width: calc(100% - 24px); }
  .site-header .brand img { height: 53px; width: 74px; }
  .site-header.is-scrolled { height: 62px; }
  .site-header.is-scrolled .brand img { height: 49px; }
  .mobile-nav:not([hidden]) { margin-top: 10px; border: 1px solid #ffffff25; border-radius: 13px; box-shadow: 0 15px 35px #06132266; }
  .hero { height: 100svh; min-height: 740px; }
  .hero-content { padding-top: 155px; }
  .hero-video { opacity: .6; width: 100%; left: 0; }
  .hero:after { background: linear-gradient(90deg, #0b1c2cd6, #0b1c2c70), linear-gradient(0deg, #081622f2 0%, transparent 75%); }
  .hero h1 { font-size: clamp(46px, 12vw, 70px); }
  .hero-caption { right: 20px; bottom: 30px; max-width: 130px; }
  .about-image-frame { height: 335px; }
  .workshop-section { padding-bottom: 65px; }
  .workshop-section .section-heading { margin-bottom: 34px; }
  .workshop-panel { display: flex; flex-direction: column; gap: 22px; height: calc(100svh - 120px); min-height: 610px; max-height: 740px; padding: 22px; margin-bottom: 35px; border-radius: 20px; }
  .js-motion .workshop-panel { top: 92px; }
  .workshop-panel-copy, .panel-reverse .workshop-panel-copy { order: 0; padding: 4px 0 0; flex-shrink: 0; }
  .panel-index { margin-bottom: 18px; font-size: 10px; }
  .panel-index > span { font-size: 7px; letter-spacing: 1.5px; }
  .workshop-panel h3 { font-size: 34px; line-height: 1.08; letter-spacing: -1.5px; }
  .workshop-panel h3 br { display: none; }
  .workshop-panel h3 br:after { content: ' '; }
  .workshop-panel-copy > p { margin-top: 15px; font-size: 11px; line-height: 1.8; }
  .capability-tags { margin-top: 14px; gap: 6px; }
  .capability-tags span { font-size: 6px; padding: 4px 7px; letter-spacing: .8px; }
  .workshop-panel .inline-link { margin-top: 17px; font-size: 10px; }
  .stack-gallery .gallery-photo, .panel-reverse .gallery-photo { order: 1; height: auto; min-height: 220px; flex: 1; border-radius: 12px; }
  .stack-gallery .gallery-photo img { position: absolute; inset: 0; }
  .stack-gallery .gallery-photo .photo-label { font-size: 7px; bottom: 16px; left: 16px; right: 16px; }
}
@media (max-height: 700px) {
  .js-motion .workshop-panel { position: relative; top: auto; opacity: 1; transform: none; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .workshop-panel { height: auto; max-height: none; min-height: 0; }
  .stack-gallery .gallery-photo { flex: none; height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .workshop-panel, .js-motion .workshop-panel { position: relative; top: auto; opacity: 1; transform: none; }
  .motion-word, .js-motion .word-reveal .motion-word { opacity: 1; transform: none; transition: none; }
  .js-motion .media-reveal { opacity: 1; clip-path: none; transition: none; }
  .js-motion [data-parallax] { transform: none; }
  .js-motion .hero-eyebrow, .js-motion .hero-description, .js-motion .hero-actions, .js-motion .hero-proof { opacity: 1; translate: none; }
}