/* ================================================================
 MEIER LIFT DYNAMICS — MULTI-PAGE CREATIVE DIRECTION
 Approved home, capabilities, restoration, dossier and contact design retained.
 These rules introduce exceptional subpage storytelling and responsive refinements.
 ================================================================ */
:root {
  --ease-strong: cubic-bezier(.16, 1, .3, 1)
}

body {
  isolation: isolate
}

.nav-desktop a.active {
  color: var(--acid)
}

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  background: #b4fc75;
  color: #0a130c;
  transform: translateY(103%);
  visibility: hidden;
  transition: transform .64s var(--ease-strong), visibility .64s;
  pointer-events: none
}

.page-curtain span {
  font: 700 clamp(15px, 2.2vw, 29px) var(--mono);
  letter-spacing: .14em
}

body.is-transitioning .page-curtain {
  visibility: visible;
  transform: translateY(0)
}

/* Distinct interior cinematic hero — 2D authentic original photography */
.inner-hero {
  isolation: isolate;
  position: relative;
  min-height: 680px;
  height: min(880px, 90svh);
  color: var(--white);
  overflow: hidden;
  background: #09100b
}

.inner-media,
.inner-media::before,
.inner-media::after {
  position: absolute;
  inset: 0
}

.inner-media {
  z-index: 0;
  overflow: hidden
}

.inner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.06);
  filter: contrast(1.12) saturate(.72)
}

.inner-media::before {
  content: '';
  z-index: 1;
  background: linear-gradient(90deg, #07100c 0%, rgba(7, 14, 10, .94) 28%, rgba(7, 14, 10, .45) 62%, rgba(7, 14, 10, .12) 100%), linear-gradient(0deg, #08100c 0%, transparent 31%)
}

.inner-media::after {
  content: '';
  z-index: 2;
  background: linear-gradient(0deg, rgba(12, 46, 26, .28), transparent 75%);
  mix-blend-mode: screen
}

.inner-glow {
  position: absolute;
  z-index: 1;
  width: 58%;
  height: 90%;
  top: -10%;
  left: 13%;
  pointer-events: none;
  background: radial-gradient(circle, #4e9d4d22 0%, transparent 68%);
  filter: blur(75px)
}

.inner-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 119px, rgba(179, 250, 180, .055) 120px), repeating-linear-gradient(0deg, transparent 0 119px, rgba(179, 250, 180, .055) 120px);
  mask-image: linear-gradient(90deg, transparent 0%, black 60%)
}

.inner-content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding-top: 116px;
  padding-bottom: 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.inner-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #c0d7c5;
  font: 600 10px var(--mono);
  letter-spacing: .08em
}

.inner-breadcrumb a {
  color: #9aaea0;
  transition: color .2s
}

.inner-breadcrumb a:hover {
  color: var(--acid)
}

.inner-breadcrumb span:last-child {
  color: var(--acid)
}

.inner-title-wrap {
  width: min(100%, 1300px);
  position: relative
}

.inner-index {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #b4d5ba;
  font: 600 10px var(--mono);
  letter-spacing: .13em;
  margin-bottom: 29px
}

.inner-index .index-mark {
  background: var(--acid)
}

.inner-heading {
 font: 900 clamp(105px, 12vw, 150px)/.74 var(--display);
  letter-spacing: 0em;
  text-transform: uppercase;
  margin: 0 0 34px;
  max-width: 1500px;
  animation: innerHeading 1.2s var(--ease-strong) both;
  filter: drop-shadow(0 12px 36px #0008);
}

.inner-heading em {
  display: inline-block;
  font-style: normal;
  color: var(--acid)
}

@keyframes innerHeading {
  from {
    opacity: 0;
    transform: translateY(65px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.inner-description {
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.68;
  color: #dbe4da;
  max-width: 610px
}

.inner-cue {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: var(--acid);
  font: 700 10px var(--mono);
  letter-spacing: .08em;
  margin-top: 15px;
  width: max-content;
  border-bottom: 1px solid #8ece75;
  padding-bottom: 12px;
  transition: gap .35s
}

.inner-cue:hover {
  gap: 42px
}

.inner-cue span {
  font-size: 18px
}

.inner-bottom {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
  border-top: 1px solid rgba(194, 237, 190, .2);
  color: #a8bcae;
  font: 600 9px var(--mono);
  letter-spacing: .06em
}

.inner-bottom i {
  font-style: normal;
  color: var(--acid);
  margin: 0 9px
}

.inner-work-page .inner-media img {
  object-position: center 47%
}

.inner-contact-page .inner-media img {
  object-position: center 37%
}

/* Home, editorial intro */
.home-services-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin: 55px 0 52px
}

.home-services-head h2 {
  color: var(--white);
  font-size: clamp(68px, 8vw, 144px)
}

.home-services-head h2 em {
  color: var(--acid)
}

.home-services-head p {
  margin: 0 0 8px;
  max-width: 350px;
  color: #a7bcb0;
  font-size: 15px;
  line-height: 1.85
}

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px
}

.home-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  overflow: hidden;
  background: #1b261d;
  border: 1px solid rgba(188, 231, 184, .13);
  padding: 12px 12px 28px;
  transition: border-color .35s, transform .5s var(--ease)
}

.home-service-card:hover {
  border-color: var(--acid);
  transform: translateY(-9px)
}

.home-service-image {
  height: 285px;
  overflow: hidden;
  margin-bottom: 25px;
  background: #344639
}

.home-service-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #0c100d55 0%, transparent 35%)
}

.home-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65);
  transition: transform 1.1s var(--ease), filter .7s
}

.home-service-card:hover img {
  transform: scale(1.09);
  filter: saturate(.98)
}

.home-service-num {
  display: block;
  margin: 0 8px 11px;
  color: #a2bea7;
  font: 500 9px var(--mono)
}

.home-service-card h3 {
  font: 800 clamp(31px, 3.5vw, 57px)/.95 var(--display);
  letter-spacing: -.04em;
  margin: 0 8px;
  color: var(--white)
}

.home-service-arrow {
  position: absolute;
  bottom: 24px;
  right: 21px;
  font: 400 30px/1 Arial;
  color: var(--acid);
  transition: transform .3s
}

.home-service-card:hover .home-service-arrow {
  transform: translate(4px, -5px)
}

.home-services-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  gap: 20px;
  color: #8ea397;
  font: 600 9px var(--mono);
  letter-spacing: .08em
}

.home-feature-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 50px;
  align-items: center;
  margin-top: 55px
}

.home-feature-copy .small-serial {
  display: block;
  margin-bottom: 25px;
  color: #587261
}

.home-feature-copy p {
  font-size: 15px;
  line-height: 1.9;
  color: #47594d;
  max-width: 480px;
  margin: 30px 0 35px
}

.home-feature-photo {
  position: relative;
  min-height: 540px;
  display: block;
  overflow: hidden;
  background: #1f2e25
}

.home-feature-photo .image-cover {
  height: 100%;
  position: absolute;
  inset: 0
}

.home-feature-photo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: contrast(1.09)
}

.home-feature-photo-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  color: #131f17;
  background: var(--acid);
  font: 700 11px var(--mono);
  letter-spacing: .11em
}

.home-feature-photo-mark b {
  font-size: 26px;
  line-height: 1
}

/* Universal premium closing call-to-action */
.page-cta {
  background: #121b15;
  padding: clamp(85px, 10vw, 160px) 0;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.page-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  align-items: end;
  gap: 30px
}

.page-cta .small-serial,
.services-question .small-serial {
  display: block;
  color: var(--green);
  margin-bottom: 28px
}

.page-cta .xl-heading {
  font-size: clamp(90px, 11vw, 150px);
  color: var(--white)
}

.page-cta .xl-heading em {
  color: var(--acid)
}

.page-cta-side p {
  color: #adbdaf;
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 30px;
  max-width: 380px
}

.cta-wide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  max-width: 510px;
  background: var(--acid);
  color: #09110c;
  padding: 15px;
  border-radius: 25px;
  font: 700 11px var(--mono);
  letter-spacing: .04em;
  transition: background .3s, transform .35s var(--ease)
}

.cta-wide:hover {
  background: #d2ffa9;
  transform: translateY(-3px)
}

.cta-wide b {
  font: 400 27px Arial
}

.cta-phone {
  display: inline-block;
  color: #abc5b0;
  border-bottom: 1px solid #7a977f;
  margin-top: 21px;
  padding-bottom: 8px;
  font: 500 10px var(--mono)
}

/* Services — approved animated capability selector + rich original details */
.services-deep {
  background: var(--paper)
}

.service-detail {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(40px, 7vw, 115px);
  padding: clamp(75px, 9vw, 155px) 0;
  border-bottom: 1px solid #1122172d;
  scroll-margin-top: 80px
}

.service-detail.reverse .service-detail-copy {
  order: 2
}

.service-detail.reverse .service-detail-media {
  order: 1
}

.service-detail-copy {
  position: relative;
  z-index: 2
}

.service-index {
  display: block;
  color: #278554;
  font: 700 10px var(--mono);
  letter-spacing: .12em;
  margin-bottom: 29px
}

.service-detail-title {
  font: 900 clamp(75px, 7vw, 135px)/.82 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: #111711
}

.service-detail-title em {
  font-style: normal;
  color: #2a935b
}

.service-subtitle {
  display: block;
  margin-bottom: 24px;
  font: 800 clamp(20px, 2vw, 33px)/1 var(--display);
  text-transform: uppercase
}

.service-detail-copy>p {
  font-size: 14px;
  line-height: 1.9;
  color: #48544b;
  max-width: 500px
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 35px;
  border-top: 1px solid #17241a2b;
  max-width: 530px
}

.service-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid #17241a2b;
  color: #19291d;
  font-size: 13px;
  line-height: 1.55
}

.bullet-check {
  flex: none;
  color: #258451;
  font: 700 19px Arial
}

.service-detail-media {
  position: relative;
  min-height: 680px;
  padding: 0 35px 35px 0
}

.service-detail-main {
  position: relative;
  width: 100%;
  height: 630px;
  overflow: hidden;
  background: #1d2c21;
    border-radius: 25px;
  box-shadow: 0 35px 55px #11181122
}

.service-detail-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(.8);
    border-radius: 25px;
  transition: transform 1.3s var(--ease)
}

.service-detail-media:hover .service-detail-main img {
  transform: scale(1.06)
}

.service-detail-inset {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42%;
  height: 260px;
  overflow: hidden;
  border: 5px solid var(--paper);
  background: #26362b;
  border-radius: 25px;

  box-shadow: 0 20px 35px #101b1330
}

.service-detail-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.service-detail-media-label {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 12px 14px;
  background: #141f19;
  color: #d2f5d5;
  font: 700 9px var(--mono);
  letter-spacing: .08em
}

.services-question {
  border-top: 1px solid #ffffff22
}

.service-question-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: end;
  gap: 55px
}

.service-question-grid .xl-heading {
  color: var(--white);
  font-size: clamp(75px, 8vw, 140px)
}

.service-question-grid .xl-heading em {
  color: var(--acid)
}

.service-question-grid p {
  max-width: 520px;
  color: #b5c5b9;
  line-height: 1.85;
  font-size: 15px;
  margin-bottom: 30px
}

/* Our Work — authentic restoration imagery and process footage */
.work-intro-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  align-items: end;
  margin-top: 55px
}

.work-intro .xl-heading {
  font-size: clamp(70px, 8vw, 145px)
}

.work-intro-copy {
  border-left: 3px solid #298b53;
  padding-left: 30px
}

.work-intro-copy p {
  font-size: 15px;
  line-height: 1.9;
  color: #45594c
}

.work-intro-copy p:last-child {
  margin-bottom: 0
}

.chipper-process-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 55px;
  margin: 55px 0
}

.chipper-process-head h2 {
  font-size: clamp(76px, 8vw, 145px)
}

.chipper-process-head>p {
  max-width: 450px;
  color: #46574c;
  font-size: 14px;
  line-height: 1.85
}

.chipper-process-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px
}

.chipper-process-gallery figure {
  position: relative;
  margin: 0;
  aspect-ratio: .7;
  overflow: hidden;
  border-radius: 25px;
  background: #253528
}

.chipper-process-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.15s var(--ease);
  filter: saturate(.82)
}

.chipper-process-gallery figure:hover img {
  transform: scale(1.07)
}

.chipper-process-gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 25px 13px 15px;
  background: linear-gradient(0deg, rgba(5, 9, 6, .91), transparent);
  color: #f8fff7;
  font: 600 9px var(--mono);
  letter-spacing: .04em
}

.boom-case {
  background: linear-gradient(180deg, #121a14, #09100c)
}

.boom-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 65px;
  margin: 55px 0
}

.boom-intro .small-serial {
  display: block;
  margin-bottom: 23px;
  color: #9dc8a6
}

.boom-intro .xl-heading {
  color: var(--white);
  font-size: clamp(90px, 9.3vw, 130px)
}

.boom-intro .xl-heading em {
  color: var(--acid)
}

.boom-intro>p {
  max-width: 510px;
  font-size: 15px;
  line-height: 1.9;
  color: #bbcebe;
  margin-bottom: 10px
}

.boom-focus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.boom-photo {
  height: 570px;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  background: #1a2920
}

.boom-photo .image-cover {
  position: absolute;
  inset: 0
}

.boom-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  transition: transform 1.2s var(--ease)
}

.boom-photo:hover img {
  transform: scale(1.04)
}

.boom-photo-label {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 11px 13px;
  background: #0c130ee5;
  color: #ebfaef;
  font: 700 10px var(--mono)
}

.boom-photo-label.accent {
  background: var(--acid);
  color: #0b120c
}

.process-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 80px
}

.process-photo {
  margin: 0;
  position: relative;
  height: 330px;
    border-radius: 25px;
  overflow: hidden;
  background: #283b2d
}

.process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
  filter: saturate(.7);
  transition: transform 1s var(--ease)
}

.process-photo:hover img {
  transform: scale(1.08)
}

.process-photo figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 18px 17px;
  background: linear-gradient(0deg, #060c08ec, transparent);
  font: 700 9px var(--mono);
  letter-spacing: .08em;
  color: #f2f8ef
}

.shop-films {
  background: #111a15
}

.films-title {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 55px;
  align-items: end;
  margin: 55px 0
}

.films-title .small-serial {
  display: block;
  color: #94bf9a;
  margin-bottom: 24px
}

.films-title .xl-heading {
  color: var(--white);
  font-size: clamp(80px, 8.6vw, 155px)
}

.films-title .xl-heading em {
  color: var(--acid)
}

.films-title>p {
  color: #abbfae;
  line-height: 1.9;
  font-size: 15px;
  max-width: 470px
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.video-card {
  background: #1a261c;
  border: 1px solid #ffffff1b;
  overflow: hidden;
  min-width: 0;
  border-radius: 25px;
  transition: border-color .35s, transform .45s var(--ease)
}

.video-card:hover {
  border-color: #a9fb75;
  transform: translateY(-5px)
}

.video-frame {
  position: relative;
  aspect-ratio: 1.15;
  background: #132016;
    border-radius: 25px;
  overflow: hidden
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
    border-radius: 25px;
  background: #102016;
  cursor: pointer
}

.video-counter {
  position: absolute;
  pointer-events: none;
  top: 14px;
  left: 14px;
  padding: 9px 11px;
  background: #0a170ccc;
  color: var(--acid);
  font: 600 10px var(--mono)
}

.video-card-copy {
  padding: 25px 22px 29px
}

.video-card-copy h3 {
  margin: 0 0 12px;
  color: var(--white);
  font: 800 clamp(32px, 3vw, 49px)/.93 var(--display);
  text-transform: uppercase
}

.video-card-copy p {
  margin: 0;
  color: #a5b9ac;
  line-height: 1.7;
  font-size: 13px
}

.films-footnote {
  font: 500 10px var(--mono);
  letter-spacing: .05em;
  color: #9bb4a2;
  margin-top: 35px
}

/* Contact: original approved form, complemented by real field photography */
.contact-extra {
  background: #0e1a13
}

.contact-extra-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: center;
  margin-top: 50px
}

.contact-extra-grid .small-serial {
  display: block;
  color: #96c79f;
  margin-bottom: 30px
}

.contact-extra-grid .xl-heading {
  color: var(--white);
  font-size: clamp(75px, 8.5vw, 145px)
}

.contact-extra-grid .xl-heading em {
  color: var(--acid)
}

.contact-extra-grid p {
  font-size: 14px;
  color: #b5cbb9;
  line-height: 1.9;
  max-width: 470px;
  margin: 30px 0 38px
}

.contact-extra-photo {
  position: relative;
  height: 620px;
  background: #213826;
  overflow: hidden
}

.contact-extra-photo .image-cover {
  position: absolute;
  inset: 0
}

.contact-extra-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8)
}

.contact-extra-photo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #b1fa79;
  color: #111b12;
  padding: 20px 24px;
  font: 700 10px var(--mono)
}

/* Fine responsive behavior */
@media(max-width:1300px) {
  .home-service-card {
    min-height: 380px
  }

  .home-service-image {
    height: 220px
  }

  .home-service-card h3 {
    font-size: clamp(33px, 3.1vw, 48px)
  }

  .service-detail-media {
    min-height: 575px
  }

  .service-detail-main {
    height: 540px
  }

  .service-detail-inset {
    height: 220px
  }
}

@media(max-width:1090px) {
  .inner-hero {
    height: 760px;
    min-height: 670px
  }

  .inner-heading {
    font-size: clamp(100px, 12vw, 155px)
  }

  .home-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-service-card {
    min-height: 440px
  }

  .home-service-image {
    height: 290px
  }

  .service-detail {
    gap: 32px
  }

  .service-detail-title {
    font-size: clamp(65px, 7.5vw, 95px)
  }

  .service-detail-media {
    min-height: 530px
  }

  .service-detail-main {
    height: 480px
  }

  .service-detail-inset {
    height: 195px
  }

  .work-intro-grid,
  .boom-intro,
  .films-title {
    gap: 35px
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .contact-extra-photo {
    height: 530px
  }
}

@media(max-width:800px) {
  .inner-hero {
    height: 760px;
    min-height: 680px
  }

  .inner-content {
    padding-top: 110px;
    padding-bottom: 110px
  }

  .inner-heading {
    font-size: clamp(84px, 14.3vw, 130px)
  }

  .inner-media::before {
    background: linear-gradient(90deg, rgba(7, 14, 10, .91) 0%, rgba(7, 14, 10, .7) 60%, rgba(7, 14, 10, .23) 100%), linear-gradient(0deg, #08100c 0%, transparent 50%)
  }

  .home-services-head,
  .chipper-process-head {
    display: block
  }

  .home-services-head p,
  .chipper-process-head>p {
    margin-top: 30px;
    max-width: 520px
  }

  .home-feature-grid,
  .page-cta-grid,
  .service-question-grid,
  .work-intro-grid,
  .boom-intro,
  .films-title,
  .contact-extra-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .home-feature-photo {
    min-height: 500px
  }

  .page-cta-side {
    max-width: 520px
  }

  .service-detail {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 75px
  }

  .service-detail.reverse .service-detail-copy,
  .service-detail.reverse .service-detail-media {
    order: initial
  }

  .service-detail-media {
    min-height: 570px;
    max-width: 730px;
    width: 100%
  }

  .service-detail-main {
    height: 525px
  }

  .service-detail-inset {
    height: 205px;
    width: 34%
  }

  .service-detail-copy>p {
    max-width: 680px
  }

  .boom-focus {
    grid-template-columns: 1fr 1fr
  }

  .boom-photo {
    height: 450px
  }

  .process-gallery {
    gap: 9px;
    margin-top: 50px
  }

  .process-photo {
    height: 240px
  }

  .chipper-process-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .chipper-process-gallery figure {
    aspect-ratio: 1
  }

  .contact-extra-photo {
    height: 450px
  }
}

@media(max-width:560px) {
  .inner-hero {
    height: 690px;
    min-height: 630px
  }

  .inner-content {
    padding-top: 100px;
    padding-bottom: 100px
  }

  .inner-heading {
    font-size: clamp(66px, 15vw, 98px);
    margin-bottom: 22px
  }

  .inner-index {
    font-size: 8px;
    margin-bottom: 24px
  }

  .inner-description {
    font-size: 13px;
    line-height: 1.75
  }

  .inner-breadcrumb {
    font-size: 9px;
    gap: 9px
  }

  .inner-bottom {
    font-size: 8px;
    height: 64px
  }

  .inner-bottom>span:last-child {
    display: none
  }

  .inner-cue {
    font-size: 9px
  }

  .home-services-head {
    margin: 40px 0 30px
  }

  .home-services-head h2 {
    font-size: clamp(64px, 13vw, 87px)
  }

  .home-services-head p {
    font-size: 13px
  }

  .home-service-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .home-service-card {
    min-height: 265px;
    padding: 6px 6px 23px
  }

  .home-service-image {
    height: 171px;
    margin-bottom: 18px
  }

  .home-service-card h3 {
    font-size: clamp(24px, 7vw, 37px);
    margin: 0 5px
  }

  .home-service-num {
    font-size: 7px;
    margin: 0 5px 9px
  }

  .home-service-arrow {
    font-size: 19px;
    right: 10px;
    bottom: 13px
  }

  .home-services-foot {
    display: block;
    line-height: 1.7
  }

  .home-services-foot a {
    display: inline-flex;
    margin-top: 15px
  }

  .home-feature-grid {
    gap: 32px;
    margin-top: 36px
  }

  .home-feature-copy .xl-heading {
    font-size: clamp(73px, 14.3vw, 100px)
  }

  .home-feature-copy p {
    font-size: 13px
  }

  .home-feature-photo {
    min-height: 380px
  }

  .page-cta {
    padding-block: 80px
  }

  .page-cta .xl-heading {
    font-size: clamp(74px, 15vw, 103px)
  }

  .page-cta-side p {
    font-size: 13px
  }

  .cta-wide {
    padding: 20px 16px;
    font-size: 9px
  }

  .cta-wide b {
    font-size: 22px
  }

  .service-detail {
    padding-block: 65px;
    gap: 25px
  }

  .service-detail-title {
    font-size: clamp(64px, 12.2vw, 89px)
  }

  .service-index {
    font-size: 8px
  }

  .service-subtitle {
    font-size: 23px
  }

  .service-detail-copy>p {
    font-size: 13px
  }

  .service-list li {
    font-size: 12px;
    gap: 12px
  }

  .service-detail-media {
    min-height: 390px;
    padding: 0 20px 20px 0
  }

  .service-detail-main {
    height: 370px
  }

  .service-detail-inset {
    width: 44%;
    height: 155px;
    border-width: 5px
  }

  .service-detail-media-label {
    font-size: 7px;
    left: 10px;
    top: 10px;
    padding: 9px
  }

  .service-question-grid .xl-heading {
    font-size: clamp(70px, 13vw, 90px)
  }

  .service-question-grid p {
    font-size: 13px
  }

  .work-intro .xl-heading,
  .chipper-process-head h2 {
    font-size: clamp(69px, 13vw, 99px)
  }

  .work-intro-copy {
    padding-left: 19px
  }

  .work-intro-copy p,
  .chipper-process-head>p {
    font-size: 13px
  }

  .chipper-process-gallery {
    gap: 8px
  }

  .chipper-process-gallery figure {
    aspect-ratio: .78
  }

  .chipper-process-gallery figcaption {
    font-size: 7px
  }

  .boom-intro .xl-heading {
    font-size: clamp(68px, 13vw, 95px)
  }

  .boom-intro>p {
    font-size: 13px
  }

  .boom-focus {
    grid-template-columns: 1fr 1fr;
    gap: 7px
  }

  .boom-photo {
    height: 290px
  }

  .boom-photo-label {
    font-size: 7px;
    left: 9px;
    top: 9px;
    padding: 7px 8px
  }

  .process-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }

  .process-photo {
    height: 210px
  }

  .process-photo:last-child {
    grid-column: 1/-1
  }

  .process-photo figcaption {
    font-size: 8px;
    padding: 20px 9px 10px
  }

  .films-title .xl-heading {
    font-size: clamp(71px, 13vw, 103px)
  }

  .films-title>p {
    font-size: 13px
  }

  .video-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .video-frame {
    aspect-ratio: 1.42
  }

  .video-card-copy {
    padding: 20px
  }

  .video-card-copy h3 {
    font-size: 37px
  }

  .contact-extra-grid .xl-heading {
    font-size: clamp(70px, 12.5vw, 95px)
  }

  .contact-extra-grid p {
    font-size: 13px
  }

  .contact-extra-photo {
    height: 380px
  }
}

@media(max-width:365px) {
  .inner-heading {
    font-size: 14vw
  }

  .home-service-card h3 {
    font-size: 6.4vw
  }

  .home-service-image {
    height: 142px
  }

  .home-feature-photo {
    min-height: 325px
  }

  .boom-photo {
    height: 250px
  }

  .service-detail-title {
    font-size: 12vw
  }
}

@media(prefers-reduced-motion:reduce) {
  .inner-heading {
    animation: none
  }

  .page-curtain {
    transition: none
  }

  .home-service-card,
  .video-card,
  .cta-wide {
    transition: none
  }
}

/* Final narrow-viewport guardrails verified against 320px and 390px layouts. */
.inner-hero,
.inner-media {
  contain: paint
}

.inner-media img {
  max-width: none
}

@media(max-width:560px) {

  .page-cta-grid,
  .service-question-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .page-cta .xl-heading {
    font-size: clamp(52px, 17vw, 71px)
  }

  .page-cta .xl-heading em {
    overflow-wrap: normal
  }

  .inner-media img {
    transform: none
  }

  .inner-heading {
    max-width: 100%;
    overflow-wrap: normal
  }
}

@media(max-width:560px) {
  .chipper-process-head .xl-heading {
    font-size: clamp(46px, 12.2vw, 82px)
  }

  .boom-intro {
    grid-template-columns: minmax(0, 1fr)
  }

  .boom-intro .xl-heading {
    font-size: clamp(45px, 12vw, 80px)
  }
}

/* Clip only stray decorative ink, without reducing usable page width. */
main {
  overflow-x: clip
}