/* Services Hub panoramic hero. Loaded after the existing site stylesheet. */
body.studio-page .studio-services .services-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 65svh, 700px);
  overflow: hidden;
  color: #fff;
  background: #1e2624;
}

body.studio-page .studio-services .services-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 21, 19, .50), rgba(9, 21, 19, .62) 50%, rgba(9, 21, 19, .78));
  content: '';
  pointer-events: none;
}

body.studio-page .studio-services .services-hero .services-breadcrumb {
  position: absolute;
  z-index: 2;
  top: 29px;
  right: 0;
  left: 0;
  min-height: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

body.studio-page .studio-services .services-hero .services-breadcrumb :is(a, [aria-current]) {
  color: #fff;
}

body.studio-page .studio-services .services-hero-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(560px, 65svh, 700px);
  padding-block: 110px 72px;
}

body.studio-page .studio-services .services-hero-copy {
  align-items: center;
  width: min(100%, 880px);
  margin: auto;
  padding: 0;
  text-align: center;
}

body.studio-page .studio-services .services-hero-eyebrow {
  margin-bottom: 18px;
  color: #fff;
  font-size: 12px;
  letter-spacing: .15em;
}

body.studio-page .studio-services .services-hero h1 {
  max-width: 16ch;
  color: #fff;
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

body.studio-page .studio-services .services-hero-intro {
  max-width: 59ch;
  margin-top: 22px;
  color: #f4f5f1;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.58;
}

body.studio-page .studio-services .services-hero-actions {
  justify-content: center;
  margin-top: 28px;
}

body.studio-page .studio-services .services-hero-primary {
  width: 181px;
  min-width: 181px;
  min-height: 48px;
  white-space: nowrap;
}

body.studio-page .studio-services .services-hero-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #1e2624;
}

body.studio-page .studio-services .services-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

body.studio-page .studio-services #services-routes-title {
  scroll-margin-top: 40px;
}

@media (max-width: 800px) {
  body.studio-page .studio-services .services-hero-layout {
    min-height: 560px;
    padding-block: 110px 55px;
  }

  body.studio-page .studio-services .services-hero h1 {
    font-size: clamp(38px, 7vw, 52px);
  }
}

@media (max-width: 600px) {
  body.studio-page .studio-services .services-hero-layout {
    min-height: 560px;
    padding-block: 92px 50px;
  }

  body.studio-page .studio-services .services-hero::after {
    background: linear-gradient(180deg, rgba(9, 21, 19, .52), rgba(9, 21, 19, .72) 48%, rgba(9, 21, 19, .88));
  }

  body.studio-page .studio-services .services-hero .services-breadcrumb {
    top: 20px;
  }

  body.studio-page .studio-services .services-hero h1 {
    max-width: 15ch;
    font-size: clamp(36px, 9vw, 40px);
  }

  body.studio-page .studio-services .services-hero-intro {
    margin-top: 16px;
    font-size: 16px;
  }

  body.studio-page .studio-services .services-hero-primary {
    width: 100%;
    min-width: 0;
  }

  body.studio-page .studio-services .services-hero-actions {
    width: 100%;
  }

  body.studio-page .studio-services .services-hero-media img {
    object-position: 50% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.studio-page .studio-services .services-hero-primary {
    transition: none;
  }
}

@media (forced-colors: active) {
  body.studio-page .studio-services .services-hero {
    color: CanvasText;
    background: Canvas;
  }

  body.studio-page .studio-services .services-hero::after {
    display: none;
  }

  body.studio-page .studio-services .services-hero :is(h1, .services-hero-eyebrow, .services-hero-intro, .services-breadcrumb, .services-breadcrumb a, .services-breadcrumb [aria-current]) {
    color: CanvasText;
  }
}

/* Use the homepage's image-overlay navigation on the Services landing hero. */
body.studio-page:has(.studio-services) .studio-header { position: absolute; inset: 0 0 auto; z-index: 20; background: transparent; border: 0; color: #fff; }
body.studio-page:has(.studio-services) .header-row { height: 128px; }
body.studio-page:has(.studio-services) .studio-header .brand-logo-on-light { display: none; }
body.studio-page:has(.studio-services) .studio-header .brand-logo-on-dark { display: block; }
body.studio-page:has(.studio-services) .header-row nav a,
body.studio-page:has(.studio-services) .studio-header .language { color: #fff; }
body.studio-page:has(.studio-services) .header-row nav a::after { background: #fff; }
body.studio-page:has(.studio-services) .studio-header .language { padding-left: 18px; border-left: 1px solid #cbc8bf; }
/* The site's later navigation script applies its own color tokens; scope the
   contrast lock to this photo-backed header only. */
body.studio-page:has(.studio-services) .studio-header .header-row nav a,
body.studio-page:has(.studio-services) .studio-header .language { color: #fff !important; }
body.studio-page:has(.studio-services) .studio-header .header-row nav a::after { background: #fff !important; }
body.studio-page:has(.studio-services) .studio-header .header-brief { width: 246px; height: 48px; min-height: 48px; padding: 12px 24px; border: 2px solid #69c3b2 !important; border-radius: 6px; background: #69c3b2 !important; color: #fff !important; font-size: 14px; font-weight: 750; transition: background-color .18s, border-color .18s, color .18s; }
body.studio-page:has(.studio-services) .studio-header .header-brief:is(:hover, :focus-visible) { background: transparent !important; border-color: #69c3b2 !important; color: #69c3b2 !important; }
body.studio-page:has(.studio-services) .studio-header :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #222; }
body.studio-page .studio-services .services-hero,
body.studio-page .studio-services .services-hero-layout { min-height: max(520px, 62svh); }
body.studio-page .studio-services .services-hero::after { background: linear-gradient(180deg, rgba(9,21,19,.70), rgba(9,21,19,.38) 40%, rgba(9,21,19,.72)); }
body.studio-page .studio-services .services-hero .services-breadcrumb { top: 150px; }
body.studio-page .studio-services .services-hero-layout { padding-block: 172px 30px; }
body.studio-page .studio-services .services-hero h1 { max-width: none; font-size: 38px; }
@media (max-width: 1199px) {
  body.studio-page:has(.studio-services) .header-row { height: 120px; }
  body.studio-page:has(.studio-services) .studio-header .menu-toggle { color: #fff !important; border-color: #fff !important; background: #222 !important; }
  body.studio-page:has(.studio-services) .studio-header .header-row nav { background: #222 !important; border: 0; }
  body.studio-page .studio-services .services-hero .services-breadcrumb { top: 140px; }
}
@media (max-width: 800px) {
  body.studio-page:has(.studio-services) .header-row { height: 108px; }
  body.studio-page .studio-services .services-hero,
  body.studio-page .studio-services .services-hero-layout { min-height: max(520px, 62svh); }
  body.studio-page .studio-services .services-hero-layout { padding-block: 155px 20px; }
  body.studio-page .studio-services .services-hero .services-breadcrumb { top: 119px; }
  body.studio-page .studio-services .services-hero h1 { max-width: 15ch; font-size: 25px; }
}
@media (forced-colors: active) {
  body.studio-page:has(.studio-services) .studio-header .brand-logo-on-light { display: block; }
  body.studio-page:has(.studio-services) .studio-header .brand-logo-on-dark { display: none; }
}

/* Approved three photographic service routes, scoped to the Services Hub. */
.studio-services .services-routes-list { display:flex; width:100%; gap:14px; min-height:570px; perspective:1300px; }
.studio-services .services-routes-list .service-route { position:relative; isolation:isolate; display:block; flex:1 1 0; min-width:0; min-height:570px; overflow:hidden; border:0; border-radius:8px; color:#fff; background:#263630; text-decoration:none; transform-style:preserve-3d; transition:flex-grow .6s cubic-bezier(.684,.153,.25,1),transform .6s cubic-bezier(.684,.153,.25,1),opacity .3s ease; }
.studio-services .services-routes-list .service-route::after { content:''; position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,rgba(12,25,22,.55),rgba(12,25,22,.04) 27%,rgba(12,25,22,.5) 55%,rgba(12,25,22,.9) 100%); }
.studio-services .services-routes-list .service-route-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; transform:none; transition:transform .8s cubic-bezier(.684,.153,.25,1); }
.studio-services .services-routes-list .service-route-fitout .service-route-image { object-position:53% center; }
.studio-services .services-routes-list .service-route-reinstatement .service-route-image { object-position:54% center; }
.studio-services .services-routes-list .service-route-body { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; min-height:570px; padding:clamp(22px,2.2vw,34px); background:none; }
.studio-services .services-routes-list .service-route-meta { display:flex; align-items:baseline; gap:10px; padding:0; color:#fff; background:none; }
.studio-services .services-routes-list .service-route-number { color:#fff; font-size:12px; }
.studio-services .services-routes-list .service-route-kicker { color:#fff; font-size:11px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.studio-services .services-routes-list .service-route-content { min-width:0; margin-top:auto; padding:0; background:none; }
.studio-services .services-routes-list .service-route-title { max-width:18ch; min-height:0; color:#fff; font-size:clamp(27px,2.2vw,34px); line-height:1.12; text-wrap:balance; }
.studio-services .services-routes-list .service-route-summary { max-width:32ch; margin:16px 0 0; color:#fff; font-size:15px; line-height:1.5; }
.studio-services .services-routes-list .service-route-details { max-height:0; overflow:hidden; opacity:0; transform:translateY(10px); transition:max-height .42s ease,opacity .25s ease,transform .42s ease; }
.studio-services .services-routes-list .service-route-details p { margin:16px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.42); color:#fff; font-size:14px; line-height:1.5; }
.studio-services .services-routes-list .service-route-details strong { display:block; margin-bottom:4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.studio-services .services-routes-list .service-route:is(:hover,:focus-visible) .service-route-details { max-height:240px; opacity:1; transform:none; }
.studio-services .services-routes-list .service-route-link { display:inline-flex; align-items:center; justify-content:space-between; gap:18px; min-height:46px; margin-top:18px; padding:10px 14px; border:1px solid rgba(255,255,255,.9); border-radius:4px; color:#fff; background:transparent; font-size:12px; line-height:1.4; font-weight:650; text-transform:uppercase; transition:background-color .2s ease,color .2s ease; }
.studio-services .services-routes-list .service-route:is(:hover,:focus-visible) .service-route-link { background:#fff; color:#19332d; }
.studio-services .services-routes-list .service-route-image-note { position:absolute; top:52px; right:24px; padding:4px 6px; color:#fff; background:rgba(12,25,22,.7); font-size:10px; line-height:1.4; }
.studio-services .services-routes-list .service-route:focus-visible { outline:3px solid #00c7b1; outline-offset:5px; }
@media (hover:hover) and (pointer:fine) and (min-width:901px) {
  .studio-services .services-routes-list:has(.service-route:is(:hover,:focus-visible)) .service-route { flex-grow:.7; opacity:.82; }
  .studio-services .services-routes-list:has(.service-route:is(:hover,:focus-visible)) .service-route:is(:hover,:focus-visible) { flex-grow:1.6; opacity:1; transform:translateY(-6px); }
  .studio-services .services-routes-list .service-route:is(:hover,:focus-visible) .service-route-image { transform:scale(1.04); }
}
@media (max-width:900px) {
  .studio-services .services-routes-list { flex-direction:column; min-height:0; }
  .studio-services .services-routes-list .service-route,.studio-services .services-routes-list .service-route-body { flex:none; min-height:390px; }
  .studio-services .services-routes-list .service-route-body { padding:22px; }
  .studio-services .services-routes-list .service-route-title { font-size:28px; }
}
@media (hover:none) {
  .studio-services .services-routes-list .service-route-details { max-height:none; opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .studio-services .services-routes-list .service-route,.studio-services .services-routes-list .service-route-image,.studio-services .services-routes-list .service-route-details { transition:none; }
}