/* Maintained integration fixes, loaded after the imported page styles. */
/* UI symbols must keep their monochrome brand colour on iOS and WeChat.
   Existing wrappers retain all dimensions, spacing and animation hooks. */
svg.site-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  overflow: visible;
  color: inherit;
  vertical-align: -.125em;
  pointer-events: none;
}
/* Legacy inner pages leave the header pointer-transparent. Only its controls
   should receive clicks, so the transparent header does not cover the artwork. */
#lf-nav-v4-root :is(.cbx-brand, .cbx-nav__link, .cbx-contact, .cbx-menu-toggle) {
  pointer-events: auto;
  touch-action: manipulation;
}
#lf-nav-v4-root :is([inert], [inert] *) { pointer-events: none; }
#lf-nav-v4-root .cbx-nav > [data-lf-cbx-action="news"] { display: inline-flex !important; }
#lf-nav-v4-root .lf-nav-sub-link { color: #f5f0e4; }

/* The gallery remains on its original white background throughout its motion.
   Its text must not inherit the earlier hero scene's pale ink variables. */
#lf5-module { --home-ink: #252422; --home-muted: #625e58; }
#lf5-module :is(.heading, .motion .heading, .projectInfo, .projectInfo h3, .bigWord) {
  color: #252422 !important;
}
#lf5-module :is(.meta, .scrollHint, .totalNumber) { color: #625e58 !important; }

/* Match the homepage's neutral white canvas on the two business pages. */
body[data-lf-page="services"],
body[data-lf-page="contact"],
body[data-lf-page="services"] .taxi-w,
body[data-lf-page="services"] .off-track,
body[data-lf-page="services"] .image.is-horizontal-scroll,
body[data-lf-page="contact"] #contact-hero,
body[data-lf-page="contact"] .style_page__hvPY1 {
  background-color: #fff !important;
}

.site-contact-details {
  display: grid;
  grid-template-columns: .82fr 1fr 2fr;
  width: min(100%, 960px);
  margin-top: 34px;
  border-top: 1px solid #d8d1c5;
  border-bottom: 1px solid #d8d1c5;
  text-align: left;
}
.site-contact-detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 19px 22px;
  border-right: 1px solid #d8d1c5;
  color: #252422;
  font-style: normal;
  text-decoration: none;
}
.site-contact-detail:first-child { padding-left: 2px; }
.site-contact-detail:last-child { padding-right: 2px; border-right: 0; }
.site-contact-detail span {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #625e58;
  font-size: 13px;
  font-weight: 600;
}
.site-contact-detail span small {
  font-size: 9px;
  font-weight: 550;
  letter-spacing: .1em;
}
.site-contact-detail strong {
  min-width: 0;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 560;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.site-contact-detail:last-child strong {
  font-size: clamp(13px, 1vw, 16px);
  white-space: nowrap;
}
a.site-contact-detail { transition: color .25s ease; }
a.site-contact-detail:hover { color: #f47735; }
a.site-contact-detail:focus-visible { outline: 2px solid #f47735; outline-offset: 4px; }

.site-phone { display: none; }
@media (max-width: 960px) {
  .site-phone {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 970;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    border: 1px solid #ff7417;
    border-radius: 50%;
    background: #ff7417;
    color: #252422;
    box-shadow: 0 5px 20px #25242226;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .site-phone svg { display: block; width: 25px; height: 25px; pointer-events: none; }
  .site-phone:focus-visible { outline: 3px solid #252422; outline-offset: 4px; }
  .site-phone:active { background: #f5f0e4; }
  #lf-nav-v4-root[data-menu-visible="true"] ~ .site-phone { visibility: hidden; }
}

@media (max-width: 640px) {
  .site-contact-details { grid-template-columns: 1fr; margin-top: 28px; }
  .site-contact-detail,
  .site-contact-detail:first-child,
  .site-contact-detail:last-child {
    gap: 7px;
    padding: 15px 0;
    border-right: 0;
    border-bottom: 1px solid #d8d1c5;
  }
  .site-contact-detail:last-child { border-bottom: 0; }
  .site-contact-detail span { font-size: 11px; }
  .site-contact-detail span small { font-size: 8px; }
  .site-contact-detail strong { font-size: 15px; line-height: 1.55; }
  .site-contact-detail:last-child strong { font-size: 15px; white-space: normal; }
  /* Keep the kicker above the existing eyebrow and animated title, including
     short phones. The retained animation still owns opacity and translation. */
  html[data-lf-reference-copy="six"] #root .finale-kicker {
    top: calc(10% - 30px) !important;
    left: 50%;
    right: auto;
    width: calc(100% - 40px);
    max-width: none;
    font-size: 10px;
    gap: 12px;
  }
  html[data-lf-reference-copy="six"] #root .finale-kicker span { font-size: 8px; }
  html[data-lf-reference-copy="six"] #root .finale-copy h2 {
    font-size: clamp(18px, 5.8vw, 23px);
  }
  html[data-lf-reference-copy="six"] #root .finale-copy h2 > span:nth-child(n) {
    display: inline-block !important;
    font-size: inherit;
  }
  html[data-lf-reference-copy="six"] #root .finale-copy h2 > span:nth-child(n+2) { margin-left: .17em; }
  html[data-lf-reference-copy="six"] #root .finale-copy h2 > span:nth-child(n)::before { content: none; }
}

@media (max-width: 900px) {
  /* The source is 1920 × 1080. A portrait cover crop hides most of the film. */
  .lf-about-showreel { min-height: 0 !important; }
  .lf-about-film {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden !important;
  }
  .lf-about-film :is(video, .lf-film-fallback) { object-fit: contain !important; }
  .lf-about-film-brand {
    left: 3%; top: 3%; width: 18%; padding: 3px 5px; border-radius: 4px;
  }
  .lf-about-film-logo-cover { width: 26%; height: 15%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .lf-film-open { right: 12px; bottom: 12px; width: 60px; height: 60px; font-size: 10px; }
  .lf-film-dialog { max-height: calc(100svh - 100px); }
  .lf-film-dialog video { max-height: calc(100svh - 100px); object-fit: contain; }
}
/* The gallery's transparent 3D plane must not intercept its projected links.
   Only the current card handles input; the existing animation owns that state. */
#gallery .world { pointer-events: none; }
#gallery .work:not([aria-hidden="true"]) .projectLink { pointer-events: auto; }
.service-art-link{color:inherit;text-decoration:none;cursor:pointer}
.service-art-link:focus-visible{outline:3px solid #ff5b1a;outline-offset:8px}
/* Retain the original 4rem parallax overscan while fitting complete cutouts
   inside its clipped frame. Only the five replacement mascots receive padding. */
.horizontal-item-img-w[data-service-mascot] > .image.is-horizontal-scroll {
  box-sizing: border-box;
  padding: 2rem;
  object-fit: contain;
}

/* Give the retained finale lettering its own space on phones and tablets. */
@media (max-width:640px) {
  html[data-lf-reference-copy="six"] #root .lf-ref-hello { top:50%; }
}
@media (min-width:641px) and (max-width:991px) {
  html[data-lf-reference-copy="six"] #root .finale-copy { width:30%; }
  html[data-lf-reference-copy="six"] #root .finale-copy h2 { font-size:clamp(27px,4.4vw,43px); }
  html[data-lf-reference-copy="six"] #root .lf-ref-value-description { max-width:26vw; }
}
@media (max-width:960px) {
  /* Reserve space for the fixed phone button in each footer's layout. */
  .n-banner-caption { padding-right:72px; box-sizing:border-box; }
  #contact-hero [class*="style_heroFooter__"] { padding-right:72px; box-sizing:border-box; }
  #contact-hero [class*="style_summary__"] { min-width:0; }
}