/* Rebuilt inner pages. Loaded after homepage.css, which supplies the shared base,
   services accordion, partners, work marquee, footer, cursor and page transition. */

/* As the theme: body clips horizontal overflow too, so phones never widen the layout viewport. */
body.inner-page { overflow-x: clip; }

/* Page transition curtain: as the original site, it covers everything, header included
   (homepage.css layers it under the header). */
html::after { z-index: 2147483647; }
html.leaving::after { pointer-events: auto; }

/* Theme text animations: each animated element has its own wrapper (the handler's trigger), and
   split lines clip their characters until they rise into place. */
.text-wrapper { display: flow-root; width: 100%; }
.anim_line { display: block; overflow: hidden; }
.line-holder { display: block; overflow: hidden; }
/* Services accordion titles (theme entrance: characters rise inside clipped lines). */
.service .ser_tit_line { overflow: hidden; padding-right: 10px; }

/* ---------- layout wrappers (theme "wrapper-wide") ---------- */
.wrap-wide {
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 576px) {
  .wrap-wide { max-width: 90%; }
}
@media (min-width: 992px) {
  .wrap-wide { max-width: 950px; }
}
@media (min-width: 1200px) {
  .wrap-wide { max-width: 1174px; }
}
/* Wide screens, as the theme: 1274px from 1450px, 1500px from 1600px. */
@media (min-width: 1450px) {
  .wrap-wide { max-width: 1274px; }
}
@media (min-width: 1600px) {
  .wrap-wide { max-width: 1500px; }
}

/* ---------- page header ---------- */
.page-header {
  position: relative;
  z-index: 2;
  padding-top: 115px;
  margin-bottom: 150px;
  background: #131517;
}
.page-header-wrap {
  width: 100%;
  margin-inline: auto;
  transform: translateY(50%);
}
@media (min-width: 576px) {
  .page-header-wrap { max-width: 95%; }
}
@media (min-width: 992px) {
  .page-header-wrap { max-width: 960px; }
}
@media (min-width: 1200px) {
  .page-header-wrap { max-width: 1200px; }
}
@media (min-width: 1600px) {
  .page-header-wrap { max-width: 1500px; }
}
.page-title {
  display: inline-block;
  margin: 0 0 0 8px;
  padding: 0 25px 0 0;
  font-size: 9vh;
  line-height: 10vh;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
}
@media (max-width: 450px) {
  .page-header { padding-top: 100px; margin-bottom: 100px; }
  .page-header-wrap { max-width: 100%; }
  .page-title { margin-left: 15px; padding-right: 20px; }
}

/* Theme title block (journal index and archives, Contact, Privacy Policy): a floated, padded box. */
.page-header .page-heading {
  display: block;
  float: left;
  margin: 0;
  padding: 0 15px;
  color: hsla(0, 0%, 100%, 0.1);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: normal;
}
.page-header .page-header-wrap { position: relative; }
.page-header .page-header-wrap::after { content: ""; display: table; clear: both; }
.page-heading .big-title {
  display: block;
  margin: 0 0 0 -7px;
  padding-right: 10px;
  color: #fff;
  font-size: 9vh;
  font-weight: 700;
  line-height: 10vh;
  letter-spacing: -0.06em;
}
@media (max-width: 450px) {
  .page-heading .big-title { margin-left: 0; padding-right: 5px; }
}
/* Title entrance (theme aliothPageHeader): characters rise inside each word. */
.page-heading .pt-word { overflow: hidden; padding-right: 5px; }
.page-heading .pt-char { transform: translateY(100%); }

/* ---------- intro statements ---------- */
.intro {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
  color: #7a7a7a;
}
.intro-aside,
.intro-copy {
  width: 100%;
}
@media (min-width: 1025px) {
  .intro-aside { width: var(--intro-offset, 35%); }
  .intro-copy { width: calc(100% - var(--intro-offset, 35%)); }
}
@media (max-width: 1024px) {
  .intro-aside { display: none; }
}
/* The theme nested a second wide wrapper inside these sections (90% of 90%). */
@media (min-width: 576px) and (max-width: 991px) {
  .intro, .capabilities > .wrap-wide { max-width: 81%; }
}
.intro-copy {
  display: flex;
  flex-direction: column;
}
.statement {
  margin: 30px 0;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #fff;
}
.statement-muted {
  color: #7a7a7a;
}
.intro-spacer {
  height: 50px;
}

/* ---------- divider (theme separator, grows on scroll) ---------- */
hr.alioth-seperator {
  display: block;
  width: 0%;
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: rgba(25, 27, 29, 0.6);
}
.no-js hr.alioth-seperator,
.reduced-motion hr.alioth-seperator {
  width: 100%;
}

/* ---------- image collage ---------- */
.collage {
  display: flex;
  flex-wrap: wrap;
}
.collage-col {
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .collage-col { width: 50%; }
}
.collage-col::after {
  content: "";
  display: table;
  clear: both;
}
.single-image {
  position: relative;
  display: block;
  width: var(--w, 100%);
  margin: 0;
  float: left;
}
.single-image.align-right { float: right; }
.single-image.center { float: none; margin-inline: auto; }
.single-image img {
  display: block;
  width: 100%;
  max-width: unset;
  height: auto;
}
.single-image img.image-reveal-pending { visibility: hidden; }
.img-anim-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.img-anim-wrapper img { transform: scale(1.2); }
.img-anim-ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}
.collage-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Dark accordion variant (Services index, Motion): same spacing as light, homepage colours. */
.services.services-dark {
  padding-top: 0;
  padding-bottom: 65px;
  margin-bottom: 0;
}
.services-dark > .container { margin-bottom: 100px; }
.services-dark .services-rule { width: 0; margin-bottom: 20px; background: #ccc; }
.services-dark .service:first-of-type { border-top: 0; }

/* ---------- capabilities list (light band) ---------- */
.capabilities {
  display: flow-root;
  background: #e8e8e8;
  padding: var(--cap-top, 20px) 0 0;
}
.capabilities > .wrap-wide {
  margin-bottom: calc(120px + var(--cap-extra, 0px));
}
@media (max-width: 1024px) {
  .capabilities > .wrap-wide { margin-bottom: calc(100px + var(--cap-extra-t, 0px)); }
}
.capability {
  display: grid;
  grid-template-columns: 33.333% 66.666%;
}
.capability:last-child {
  padding-bottom: 20px;
}
.capability-title {
  align-self: start;
  margin: 32px 7px 24px 19px;
  font-size: 1.5rem;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: rgba(25, 27, 29, 0.6);
}
.capability-text {
  align-self: center;
  margin: 26px 20px 20px 13px;
  font-size: 19.6px;
  line-height: 1.5em;
  font-weight: 500;
  letter-spacing: -0.75px;
  color: #7a7a7a;
}
.capability > hr.alioth-seperator {
  grid-column: 1 / -1;
  justify-self: center;
  width: 0;
  max-width: calc(100% - 20px);
  margin: 30px 10px;
  background: #bcbcbc;
}


/* Branding: rows were placed directly in one column (no inner columns). */
@media (min-width: 768px) {
  .capabilities-flat .capability { grid-template-columns: 33.56% 66.44%; }
  .capabilities-flat .capability-title { margin-left: 9px; margin-right: 0; }
  .capabilities-flat .capability-text { margin-left: 0; margin-right: 10px; }
  .capabilities-flat .capability > hr.alioth-seperator { margin-top: 10px; }
}

/* ---------- services accordion, light variant ---------- */
.services.services-light,
.services.services-dark {
  display: flow-root;
}
.services.services-light {
  background: #e8e8e8;
  padding-top: 0;
  padding-bottom: 65px;
  margin-bottom: 0;
  color: #191b1d;
}
.services-light > .container {
  margin-bottom: 100px;
}
.services-light .services-rule {
  width: 0;
  margin-bottom: 20px;
  background: rgba(25, 27, 29, 0.6);
}
.services-light .service,
.services-light .service:first-of-type {
  border: 0;
  box-shadow: inset 0 -1px rgba(25, 27, 29, 0.6);
}
.services-light .service h2,
.services-light .service-chevron {
  color: #191b1d;
}
.services-light .service-content {
  color: #54595f;
}
.services-light .service-description,
.services-light .service-content a {
  color: #191b1d;
}

/* ---------- related work (SEO block kept from capture) ---------- */
.related-service-work {
  max-width: 1174px;
  margin: 60px auto;
  padding: 0 24px;
}
.related-service-work h2 {
  margin: 0 0 1em;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.related-service-work p {
  font-size: 20px;
  line-height: 1.4;
}
/* Inner pages: partners columns as the original (24.664% / 75%). */
@media (min-width: 768px) {
  .inner-page .partners .editorial-row { grid-template-columns: 24.664% 75%; }
  .inner-page .partners .editorial-row h2 { margin-bottom: 0; }
}
@media (max-width: 1024px) {
  .capability > hr.alioth-seperator { margin-top: 10px; }
}
@media (min-width: 768px) {
  .inner-page .client-logos { grid-template-columns: repeat(5, 1fr); }
}
/* The logo grid (the theme's animation trigger) starts below its rule, as the original's did. */
.inner-page .client-logos { position: relative; border-top: 0; }
.inner-page .client-logos::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--logos-gap, 0px) - 1px);
  left: 0;
  right: 0;
  border-top: 1px solid var(--rule);
}
.inner-page .partners .editorial-row > .text-wrapper { margin-top: -30px; padding-top: 30px; }
@media (min-width: 992px) {
  .inner-page .client-logos { --logos-gap: 26px; margin-top: 27px; padding: 0 0 55px; row-gap: 57px; }
  .inner-page .partners { padding-bottom: calc(99px + var(--partners-extra, 0px)); }
}
.inner-page .work-link { height: 325px; }
/* Theme "page nav": marquee 150px/225px, caption centred beneath it. */
.inner-page .work-link > a { padding: 50px 0; }
.inner-page .work-marquee { letter-spacing: -0.06em; font-weight: var(--nav-weight, 800); }
.inner-page .work-caption { color: var(--nav-caption, #fff); }
/* The theme page nav kept its 150px title on phones (the homepage reel link shrinks to 80px). */
@media (max-width: 767px) {
  .inner-page .work-marquee { font-size: 150px; line-height: 225px; }
}
/* Page nav whose title line-height was 2em at tablet and phone widths (About). */
@media (max-width: 1024px) {
  .inner-page .work-link-tall { height: 400px; }
  .inner-page .work-link-tall .work-marquee { font-size: 150px; line-height: 300px; }
  .inner-page .work-link-tall .work-caption { top: 319px; }
}
/* Our Work: the 2em title line-height applied at every width. */
.inner-page .work-link-tall-all { height: 400px; }
.inner-page .work-link-tall-all .work-marquee { font-size: 150px; line-height: 300px; }
.inner-page .work-link-tall-all .work-caption { top: 319px; }
.inner-page .work-caption {
  top: 255px;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  white-space: nowrap;
}
/* Theme arrow: absolutely placed at the caption's top right, rotated, 10% white. */
.inner-page .work-caption > span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  font-size: inherit;
  font-family: Arial, sans-serif;
  opacity: 0.1;
  transform: translateY(-65%) translateX(65%) rotate(-45deg);
}
@media (max-width: 450px) {
  .inner-page .work-caption { width: 100%; text-align: center; }
  .inner-page .work-caption > span {
    right: auto;
    left: 50%;
    transform: translateY(-150%) translateX(-50%) rotate(-45deg);
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .inner-page .partners { max-width: 81%; }
}
@media (max-width: 575px) {
  .intro-copy { padding: 0 28px 0 9px; }
}
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
.related-service-work a {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  hr.alioth-seperator { width: 100% !important; }
  .img-anim-wrapper img { transform: none !important; }
  .img-anim-ov { display: none; }
}

/* ---------- Services index specifics ---------- */
.intro-index { margin-bottom: 0; }
.intro-index .statement:first-child { margin-top: 35px; }
.intro-index .intro-spacer { height: 100px; }
.intro-index hr.alioth-seperator { margin: 0; background: #ccc; }
@media (max-width: 1024px) {
  .intro-index .intro-aside { display: block; height: 102px; }
}
.services.services-plain { padding-bottom: 0; }

/* ---------- phones (the original layout's mobile breakpoint), kept last so it wins ---------- */
@media (max-width: 767px) {
  .intro { margin-bottom: 25px; }
  .capability { grid-template-columns: 1fr; }
  .capability-title { margin: 32px 38px 24px 19px; }
  .capability-text { margin: 26px 37px 20px 19px; }
  .capabilities { padding-top: var(--cap-top-m, 11px); }
  .capabilities > .wrap-wide { margin-bottom: calc(24px + var(--cap-extra-m, 0px)); }
  .capability > hr.alioth-seperator { margin-bottom: 10px; }
  .services-light > .container,
  .services-dark > .container { margin-bottom: 25px; }
  .intro-index { margin-bottom: 0; }
  .capabilities-flat .capability > hr.alioth-seperator { margin-bottom: 30px; }
  .services-light .service,
  .services-dark .service { margin-bottom: 0; }
}

/* ---------- shared theme widgets: Vimeo player (Plyr), scrolling text ---------- */
.alioth-embed-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.alioth-embed-video .embed-video,
.alioth-embed-video .embed-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.alioth-embed-video .plyr--full-ui input[type="range"] { color: #000; }
.alioth-embed-video .plyr--video .plyr__control.plyr__tab-focus,
.alioth-embed-video .plyr--video .plyr__control:hover { background: #000; }
.alioth-embed-video .plyr__control--overlaid { background: #000; }
.alioth-embed-video .plyr__video-embed iframe { top: -50%; height: 200%; }
.alioth-embed-video .plyr--full-ui.plyr--video .plyr__control--overlaid { display: none; }
.alioth-embed-video .plyr__controls { opacity: 0; }
.alioth-embed-video.video-play .plyr__controls { opacity: 1; }
.alioth-embed-video .video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 123px;
  height: 123px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.49);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.alioth-embed-video .video-overlay:hover,
.alioth-embed-video .video-overlay:focus-visible { width: 130px; height: 130px; }
.alioth-embed-video .play-button {
  position: absolute;
  top: 50%;
  left: 53%;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid #fff;
  transform: translate(-50%, -50%);
}
.alioth-embed-video.video-play .video-overlay { opacity: 0; pointer-events: none; }
@media (max-width: 450px) {
  .alioth-embed-video .video-overlay { width: 80px; height: 80px; }
  .alioth-embed-video .play-button {
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-width: 15px;
  }
}
.scrollable-text {
  display: inline-flex;
  white-space: nowrap;
}