.examples { color: var(--ink-deep) }
.examples-width { width: min(1180px, calc(100% - 80px)); margin-inline: auto }
.examples-head { border-bottom: 1px solid var(--line) }
.examples-head > div { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px }
.examples-head .brand-logo { width: 132px }
.examples .text-link { gap: 9px; width: fit-content; color: var(--blue-dark) }
.examples .eyebrow { color: var(--blue-dark); font-size: 11px; letter-spacing: .135em }
.examples-intro { padding-block: 38px 32px }
.examples-intro .eyebrow { display: flex; align-items: center; gap: 10px }
.examples-intro .eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--lime) }
.examples-intro h1 { margin-top: 9px; font-size: clamp(37px, 5.4vw, 70px); text-wrap: balance }
.examples-intro p:last-child { margin-top: 12px; max-width: 68ch; color: var(--muted) }
.production-feature { display: grid; grid-template-columns: 1.75fr 1fr; align-items: center; gap: clamp(22px, 3.8vw, 52px); padding-block: 25px 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.film-player { position: relative; min-width: 0; background: #0b1723 }
.film-player video { display: block; width: 100%; height: auto; aspect-ratio: 16/9 }
.film-start {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 12px 22px; border: 1px solid #94b8cf; border-radius: 4px;
  color: #fff; background: #112432ed; font: 650 15px/1.35 var(--sans); cursor: pointer;
}
.film-start::before { content: "▶"; margin-right: 9px; color: var(--blue) }
.film-start:disabled { cursor: progress }
.home-views { padding-block: clamp(42px, 5vw, 72px) }
.home-views-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 25px }
.home-views-heading h2 { color: var(--ink-deep); font-size: clamp(34px, 3.6vw, 54px); text-wrap: balance }
.home-views-heading .text-link { color: var(--blue-dark); gap: 9px }
.home-views-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px) }
.home-views-grid figure { min-width: 0; margin: 0 }
.home-views-grid figcaption { padding-top: 13px }
.home-views-grid h3 { color: var(--ink-deep); font-size: clamp(20px, 1.8vw, 26px) }
.home-views-grid figcaption p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.55 }
.home-views-map { display: block; position: relative; overflow: hidden; aspect-ratio: 16/9; background: #0b1723 }
.home-views-map img { position: absolute; max-width: none; height: auto }
/* Frame the map in each thumbnail. The linked image includes the viewer sidebar. */
.home-views-map.operator-map img { width: 166.4%; left: -48.6%; top: -29.3% }
.home-views-map.spacing-map img { width: 152%; left: -35.7%; top: -19.8% }
@media (max-width: 760px) {
  .home-views-grid { grid-template-columns: 1fr; row-gap: 25px }
}
.film-copy h2 { margin: 10px 0 14px; font-size: clamp(29px, 3vw, 44px); text-wrap: balance }
.examples figcaption > p:not(.eyebrow), .film-copy > p:not(.eyebrow) { line-height: 1.65; color: var(--muted) }
.film-copy .text-link, .example-stills .text-link { margin-top: 14px }
.example-stills { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 42px); padding-block: 32px 60px }
.example-stills figure { min-width: 0; margin: 0 }
.example-shot { display: block; background: #0b1723 }
.example-shot svg { width: 100%; height: auto }
.example-stills figcaption { padding-top: 15px }
.example-stills h2 { margin: 6px 0 9px; font-size: clamp(26px, 2.5vw, 36px) }
@media (max-width: 760px) {
  .examples-width { width: calc(100% - 36px) }
  .examples-intro { padding-block: 27px 23px }
  .production-feature { grid-template-columns: 1fr; gap: 17px; padding-block: 20px 24px }
  .film-copy h2 { margin-block: 6px 10px }
}
@media (max-width: 570px) {
  .examples-head > div { min-height: 66px }
  .examples-head .brand-logo { width: 106px }
  .example-stills { grid-template-columns: 1fr; padding-top: 24px; gap: 32px }
}
.home-views-map.orders-map { background: #f7fafc }
.home-views-map.orders-map img { inset: 0; width: 100%; height: 100%; object-fit: contain }
.contact-block { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line, #dce5eb) }
.contact-block h3 { color: var(--ink-deep, #20262b); font-size: 22px }
.contact-block p { margin-top: 8px }
.contact-line a { color: var(--blue-dark, #0064aa); font-weight: 600; overflow-wrap: anywhere }
.orders-shot { display: block; background: #f7fafc; border: 1px solid var(--line, #dce5eb) }
.orders-shot img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: contain }