/* Rebuilt one-off pages: About, Approach, Credentials, Our Work.
   Loaded after pages.css. Values are measured from the original captured pages (see
   tools/fidelity/README.md); widget internals follow the original Alioth theme CSS so the
   verbatim theme handlers (assets/js/pages-widgets.js) behave as before. Solid colours only. */

/* ---------- shared layout (theme "wrapper-wide" / "wrapper-smaller", page-builder columns) ---------- */
.one-off .wrap-wide {
  display: flow-root; /* the original containers were flex: child margins never collapsed through them */
  margin-bottom: 100px;
}
.wrap-smaller {
  width: 100%;
  margin: 0 auto 100px;
  padding: 10px;
}
@media (min-width: 576px) {
  .wrap-smaller { max-width: 90%; }
}
@media (min-width: 768px) {
  .wrap-smaller { max-width: 88%; }
}
@media (min-width: 992px) {
  .wrap-smaller { max-width: 790px; }
}
@media (min-width: 1200px) {
  .wrap-smaller { max-width: 850px; }
}
@media (min-width: 1450px) {
  .wrap-smaller { max-width: 950px; }
}
@media (min-width: 1600px) {
  .wrap-smaller { max-width: 1200px; }
}
@media (max-width: 576px) {
  .one-off .wrap-wide { width: 95%; max-width: 100%; margin-bottom: 25px; }
  .wrap-smaller { max-width: 90%; margin-bottom: 25px; }
}
.row,
.one-off .wrap-wide.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 100%;
  padding: 10px;
}
.col:empty { padding: 0; } /* empty columns had no padding in the original */
@media (min-width: 768px) {
  .col-third { width: 33.333%; }
  .col-two-thirds { width: 66.666%; }
}

/* Theme text sizes (text-wrapper h3 / h4 / h5). Margins never collapse (each was its own widget). */
.has-anim {
  display: block;
  width: 100%;
}

/* ---------- About: hero (theme "personal head") ---------- */
.alioth-personal-head {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #191b1d;
}
.aph-image {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: 35%;
  transform: translateX(-50%);
  transform-origin: bottom;
}
.aph-image img {
  display: block;
  width: 100%;
  height: auto;
}
.aph-name {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 200px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.07em;
  text-align: center;
  color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.aph-name .name-front { line-height: 1em; }
.aph-name.back { z-index: 4; }
.aph-name .name-back,
.aph-name.back .name-front {
  opacity: 0;
  visibility: hidden;
}
.aph-name.back .name-back {
  opacity: 1;
  visibility: visible;
}
.aph-details {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  width: 84%;
  height: 200px;
  transform: translate(-50%, -50%);
}
.aph-welc { display: none; }
.aph-sub-text {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 30%;
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.4);
  transform: translateY(200px);
}
.mobile-br { display: none; }
@media (min-width: 1290px) {
  .mobile-br { display: inline; }
}
.circular-button {
  position: absolute;
  bottom: 10%;
  left: 20%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  text-decoration: none;
}
.circular-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.circular-button span i { display: block; margin-top: 10px; }
.circular-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 0%;
  height: 0%;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}
.circular-button:hover::after,
.circular-button:focus-visible::after { width: 100%; height: 100%; }
.circular-button:hover,
.circular-button:focus-visible { color: #191b1d; }
.circular-button:focus-visible span { opacity: 1; }
@media (min-width: 768px) {
  .aph-image { width: 900px; }
}
@media (min-width: 389px) and (max-width: 767px) {
  .aph-image { width: 550px; }
}
@media (max-width: 388px) {
  .aph-image { width: 500px; }
}
@media (min-width: 821px) {
  .aph-name { left: 55%; font-size: 15vw; }
  .aph-sub-text { right: 20%; }
}
@media (max-width: 1024px) {
  .aph-name .name-front,
  .aph-name .name-back { font-size: 1.2em; }
}
@media (min-width: 450px) and (max-width: 900px) {
  .aph-name { top: 50%; left: 0; font-size: 100px; transform: translateY(-50%); }
  .aph-name.back { display: none; }
  .aph-name .name-back { opacity: 1; visibility: visible; }
  .aph-details { top: auto; bottom: 15%; width: 50%; transform: translateX(-50%); }
  .aph-sub-text { max-width: 100%; text-align: center; transform: translateY(-100px); }
  .circular-button { z-index: 10; bottom: 5%; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 820px) {
  .aph-name { left: 0; }
}
@media (max-width: 449px) {
  .aph-name { top: 50%; left: 0; font-size: 60px; transform: translateY(-50%); }
  .aph-name.back { display: none; }
  .aph-name .name-back { opacity: 1; visibility: visible; line-height: 1em; }
  .aph-details { top: auto; bottom: 0; transform: translateX(-50%); }
  .aph-sub-text { max-width: 100%; text-align: center; transform: translateY(-100px); }
  .circular-button { display: none; }
}

/* ---------- About: at a glance + counters ---------- */
.one-off main > section { display: flow-root; }
.glance {
  padding-top: 140px;
  margin-bottom: 140px;
}
.glance h2 {
  margin: 30px 0 30px -1px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #fff;
}
.glance-text {
  margin: 31.92px 0 44px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: rgba(255, 255, 255, 0.4);
}
hr.glance-rule {
  margin: 0 0 20px;
  background: rgba(255, 255, 255, 0.2);
}
.counters {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.counters > li {
  width: 33%;
  margin-bottom: 30px;
}
@media (max-width: 1024px) {
  .counters > li { width: 50%; }
}
.a-number-counter {
  position: relative;
  display: block;
}
.ac-number {
  position: relative;
  display: inline-block;
  height: 100px;
  padding-inline-end: 8px;
  overflow-y: hidden;
  font-size: 100px;
  line-height: 100px;
  font-weight: 700;
  letter-spacing: -7.5px;
  color: #fff;
}
.ac-number span { display: block; }
.numbers-wrapper { transform: translateY(28%); }
span.ac-sign {
  display: inline-block;
  padding-bottom: 20px;
  overflow: hidden;
  vertical-align: top;
  font-size: 100px;
  line-height: 100px;
  font-weight: 700;
  letter-spacing: -7.5px;
}
.ac-title {
  display: block;
  margin-top: -1px;
  overflow: hidden;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.4);
}
.ac-title span {
  display: block;
  transform: translateY(100%);
  transition: transform 0.5s ease 1s;
}
.a-number-counter.count_inview .ac-title span { transform: translateY(0%); }
.ac-title::before {
  content: "";
  display: block;
  width: 0%;
  height: 1px;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.7s ease;
}
.a-number-counter.count_inview .ac-title::before,
.reduced-motion .ac-title::before { width: 80%; }
@media (max-width: 767px) {
  .counters { margin-bottom: 40px; }
  .glance .ac-number {
    font-size: 5.5em;
    line-height: var(--ac-lh-m, 100px);
    letter-spacing: var(--ac-ls-m, -7.5px);
  }
}

/* ---------- About: showreel band ---------- */
.video-band {
  display: flow-root;
  margin-bottom: -70px;
  background: #ebebeb;
}
.video-inner { margin-top: -120px; } /* on an inner box, so the parallax trigger starts where the original's did */
@media (max-width: 1024px) {
  .video-inner { margin-top: -70px; }
}
@media (max-width: 767px) {
  .video-inner { margin-bottom: 70px; }
}

/* ---------- About: design for every interaction (light band) ---------- */
.interaction {
  display: flow-root;
  background: #ebebeb;
  color: #191b1d;
}
.interaction-title {
  margin: 90px 0 110px -1px;
  font-size: 90px;
  line-height: 0.9em;
  font-weight: 700;
  letter-spacing: -5px;
  color: #191b1d;
}
.interaction-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.interaction-row > :first-child { flex: 0 1 35%; }
.interaction-row > :last-child { flex: 0 1 100%; min-width: 0; }
.interaction-copy { display: flex; flex-direction: column; }
.glance .col-two-thirds { display: flex; flex-direction: column; }
.interaction-services { padding: 10px; }
.interaction-label,
.interaction-text {
  margin: 31.92px 0 24px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: rgba(25, 27, 29, 0.6);
}
.interaction-text:not(.is-muted) { color: #191b1d; }
.interaction-list {
  margin: 30.06px 0 18px -1px;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 35px;
  color: rgba(25, 27, 29, 0.6);
}
@media (max-width: 1024px) {
  .interaction-row > :last-child { flex-basis: 65%; }
  .interaction-services { padding: 0; }
}
@media (max-width: 767px) {
  .interaction-title {
    margin: 42px -20px 62px -1px;
    font-size: 3em;
    letter-spacing: -2px;
  }
  .interaction-row { flex-wrap: wrap; }
  .interaction-row > * { flex-basis: 100% !important; }
  .interaction-label { margin-bottom: -0.92px; }
  .interaction-text.is-muted { margin-top: 27px; }
  .interaction-services .interaction-label { margin-top: 67px; }
  .interaction-list { margin-top: 9.92px; margin-bottom: 52px; }
}

/* ---------- About: team (dark band) ---------- */
.team {
  display: flow-root;
  background: #191b1d;
}
.team > .wrap-wide { padding-top: 10px; }
.team-head { display: flex; flex-direction: column; padding: 0 10px 10px; }
.team > .wrap-wide { margin-bottom: 0; }
.team-head hr.alioth-seperator {
  margin: 0 0 20px;
  background: rgba(25, 27, 29, 0.6);
}
/* As the original: the heading is the band colour (#191B1D on #191B1D). */
.team-title {
  margin: 90px 0 90px -1px;
  font-size: 90px;
  line-height: 0.9em;
  font-weight: 700;
  letter-spacing: -5px;
  color: #191b1d;
}
.team-grid {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-col {
  width: 33.333%;
  padding: 10px;
}
.alioth-team-member {
  position: relative;
  display: block;
  width: 100%;
}
.member-image,
.member-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.member-meta {
  position: absolute;
  left: 10%;
  bottom: 10%;
}
.member-name {
  margin: 0;
  font-size: 30px;
  line-height: 39px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}
.member-title {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.4);
}
.member-socials {
  position: absolute;
  top: 10%;
  left: 10%;
}
.member-socials ul { margin: 0; padding: 0; list-style: none; }
.member-socials li {
  display: block;
  overflow: hidden;
  padding: 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.member-socials li a {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transform: translateY(100%);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.member-socials li a:hover { color: #fff; }
.alioth-team-member:hover .member-socials a,
.member-socials a:focus-visible { transform: translateY(0); }


/* ---------- About: offering, values, partners ---------- */
.about-offering { padding-top: 170px; }
.about-partners { padding-top: 75px; }
.split-row {
  display: grid;
  grid-template-columns: 24.664% 75%;
  align-items: start;
}
.split-label {
  margin: 31.92px 0 24px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #fff;
}
.split-statement {
  margin: 30px 0 80px -1px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #7a7a7a;
}
.split-text {
  margin: 31.92px 0 74px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #7a7a7a;
}
.value-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.value-row {
  display: grid;
  grid-template-columns: 24.666% 25% 50%;
  align-items: start;
  margin-bottom: 20px;
}
.value-row:last-child { margin-bottom: 0; }
.values-title,
.value-name,
.value-text {
  position: relative;
  margin: 52.92px 0 24px -1px;
  font-size: 24px;
  line-height: 35px;
  letter-spacing: -0.75px;
}
.values-title,
.value-name {
  font-weight: 700;
  color: #fff;
}
.value-text {
  font-weight: 400;
  color: #7a7a7a;
}
.value-row:not(:first-child) .value-name,
.value-row:not(:first-child) .value-text { margin-top: 72.92px; }
/* Animated wrappers start below the theme divider (21px + 20px spacing), as the original's did. */
.value-row:not(:first-child) > .text-wrapper { margin-top: 41px; }
.value-row:not(:first-child) > .text-wrapper > .value-name,
.value-row:not(:first-child) > .text-wrapper > .value-text { margin-top: 31.92px; }
/* The theme dividers: 1px rules 10px below each row's top. */
.values-title::before,
.value-name::before,
.value-text::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 0;
  top: -42.92px;
  border-top: 1px solid #d2d2d250;
}
.value-row:not(:first-child) .value-name::before,
.value-row:not(:first-child) .value-text::before { top: -62.92px; }
.value-lead:empty { display: block; }
.alioth-clients {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 51px 0 0; /* the logos (the animation trigger) start 50px below the rule, as the original */
  padding: 0;
  list-style: none;
}
.alioth-clients::before {
  content: "";
  position: absolute;
  top: -51px;
  left: 0;
  right: 0;
  border-top: 1px solid #7a7a7a;
}
.a-client {
  margin-bottom: 50px;
  text-align: center;
}
.a-client img {
  width: 100%;
  height: auto;
  vertical-align: baseline;
}
@media (max-width: 767px) {
  .split-text { margin-bottom: 24px; }
}
@media (max-width: 1024px) {
  .value-row { grid-template-columns: 1fr; }
  .value-row > .value-lead { display: none; }
}
@media (max-width: 767px) {
  .split-row { grid-template-columns: 1fr; }
  .value-text::before { display: none; }
  .value-row .value-text { margin-top: 31.92px; }
  .value-row:not(:first-child) .value-text { margin-top: 51.92px; }
  .value-row:not(:first-child) > .text-wrapper > .value-text { margin-top: 10.92px; }
}
@media (max-width: 576px) {
  .split-row, .value-rows { width: 95%; margin-left: 0; }
}

@media (max-width: 1024px) {
  .about-offering .split-row { grid-template-columns: 1fr; }
}
/* Inner sections were also "wrapper-wide": 90% of the outer wrapper between 576 and 991px. */
@media (min-width: 576px) and (max-width: 991px) {
  .team-head, .team-grid, .split-row, .value-rows { max-width: 90%; margin-inline: auto; }
}

/* ---------- testimonials (About, Approach, Credentials) ---------- */
.a-testimonials { display: block; }
@media (max-width: 767px) {
  .a-testimonials.wide-phone { margin-right: -20px; } /* About only */
}
.a-testimonals-control {
  display: block;
  margin-bottom: 30px;
}
.a-test-prev,
.a-test-next {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 18px;
  line-height: 27px;
  color: #fff;
  cursor: pointer;
}
.a-test-prev { margin-right: 10px; }
.a-test-next { margin-left: 10px; }
.a-test-prev::after,
.a-test-next::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-top: -2.4px;
  vertical-align: middle;
  background: #000;
}
.a-test-next::before { margin-right: -11px; }
.a-test-prev::after { margin-left: -11px; }
.a-test-frac { display: inline-block; }
span.a-test-current,
span.a-test-total {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #fff;
  opacity: 0.7;
}
.a-testimonials-count {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 1px;
  margin: -3px 10px 0;
  vertical-align: middle;
  background: #191b1d;
}
/* Auto-advancing slider (Credentials): longer, dimmed track with a progress bar. */
.a-testimonials.autoplay .a-testimonials-count { width: 100px; background: rgba(255, 255, 255, 0.2); }
@media (max-width: 450px) {
  .a-testimonials.autoplay .a-testimonials-count { width: 50px; }
}
.a-testimonials-count span {
  position: absolute;
  left: 0;
  width: 0%;
  height: 100%;
  background: #fff;
}
.a-testimonials-wrapper {
  position: relative;
  display: block;
  width: 100%;
}
.a-testimonial {
  position: absolute;
  margin: 0;
  visibility: hidden;
}
.a-testimonial.active,
.a-testimonials:not(.is-ready) .a-testimonial:first-child {
  position: relative;
  visibility: visible;
}
.a-testimonials.is-ready .a-testimonial.active { position: absolute; }
.testimonial-text {
  margin: 0 0 40px;
  font-size: 36px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -1.2px;
  color: #fff;
}
.testimonial-meta { display: inline-block; }
.testimonial-name,
.testimonial-brand {
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: #fff;
}
.testimonial-name { margin-bottom: 10px; }
.testimonial-meta div,
.testimonial-text div { display: block; overflow: hidden; }
.testimonial-meta div span,
.testimonial-text div span { display: block; }
@media (max-width: 450px) {
  .testimonial-text { font-size: 25px; line-height: 34px; }
}

/* ---------- Approach / Credentials: intro ---------- */
.page-intro {
  padding-top: 200px;
  margin-bottom: -100px;
}
.page-intro > .wrap-wide { display: flex; flex-direction: column; }
.page-eyebrow {
  margin: 30px 0 -20px -1px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #7a7a7a91;
}
.page-statement {
  margin: 0.67em 0 calc(1em - 50px);
  font-size: 6.5rem;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: -5px;
  color: #fff;
}
.page-intro-spacer { height: 50px; }
hr.page-intro-rule {
  margin: 90px 0 0;
  background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 1024px) {
  .page-statement { font-size: 3.5rem; letter-spacing: -3px; }
}
@media (max-width: 767px) {
  .page-statement { font-size: 3.2rem; }
  .page-intro > .wrap-wide { margin-bottom: 95px; }
}

/* ---------- Approach: promise ---------- */
.promise-copy { display: flex; flex-direction: column; }
.promise-statement {
  margin: 0.83em 0 calc(1em - 20px);
  font-size: 36px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
}
.promise-text {
  margin: 31.92px 0 24px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Approach / Credentials: methodology (theme "awards" lists) ---------- */
.methodology > .wrap-wide { display: flex; flex-direction: column; }
.method-spacer { height: 70px; }
hr.method-rule {
  margin: 0 0 20px;
  background: rgba(255, 255, 255, 0.2);
}
.method-head {
  display: flex;
  margin-top: 70px;
  padding: 10px;
}
.method-head-a { flex: 0 1 36.66%; padding-bottom: 100px; }
.method-head-b { flex: 0 1 75%; min-width: 0; padding-left: 10px; }
.method-head-a, .method-head-b { display: flex; flex-direction: column; }
.method-title,
.method-text {
  margin: 31.92px 0 24px -1px;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: #fff;
}
.method-text { color: #7a7a7a; }
/* Credentials set this paragraph at the theme's h3 size. */
.methodology-large .method-text { margin: 30px 0 30px -1px; font-size: 30px; line-height: 40px; }
.method-awards {
  display: flex;
  gap: 46px;
  padding: 10px;
}
.method-gap { flex: 0 1 95%; padding-right: 20px; }
.method-col { flex: 0 1 100%; min-width: 0; padding-right: 20px; }
.method-col:last-child { padding: 10px; }
.alioth-awards {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.a-award {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  margin-bottom: 30px;
  padding-bottom: 20px;
}
.a-award .award-body { display: block; overflow: hidden; }
.award-dets { display: block; float: left; }
.award-title {
  display: block;
  margin: 0;
  overflow: hidden;
  font-size: 25px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}
.award-loc {
  display: block;
  margin: 10px 0 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.award-title span,
.award-loc span { display: block; }
.a-award::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 0%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transition: width 0.7s ease 0.4s;
}
.a-award.is_inview::after,
.reduced-motion .a-award::after { width: 100%; }
@media (max-width: 1024px) {
  .method-head { margin-top: 0; padding: 0 0 50px; }
  .method-head-a { flex-basis: 50%; padding-bottom: 0; }
  .method-head-b { flex-basis: 100%; }
  .method-awards { gap: 0; }
  .method-gap { flex-basis: 50%; padding-right: 0; }
  .method-col { flex-basis: 50%; padding-right: 10px; }
  .method-col:last-child { padding: 0 10px 0 0; }
}
@media (max-width: 767px) {
  .method-head, .method-awards { flex-wrap: wrap; }
  .method-head > * { flex-basis: 100% !important; }
  .method-title { margin-bottom: 59px; }
  .method-gap { display: none; }
  .method-col, .method-col:last-child { flex-basis: 100%; padding: 0; }
}
@media (max-width: 450px) {
  .award-title { font-size: 20px; }
}

/* ---------- Approach / Credentials: scrolling values strip ---------- */
.values-strip {
  margin-bottom: 100px;
  overflow: hidden;
}
.strip-text {
  margin: 0.67em 0 1em;
  font-size: 10vw;
  line-height: 65px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #ffffff30;
}

/* ---------- Approach / Credentials: "Our Recent Work" pinned carousel (theme CSS) ---------- */
.recent-work {
  margin-top: -300px;
  padding: 10px;
}
.portfolio-showcase.carousel-showcase {
  position: relative;
  width: 100%;
  height: 100vh;
  transform: translate(0, 0); /* contains the fixed-position titles, as GSAP's pin transform did */
}
.cas-project-wrapper {
  position: absolute;
  top: 50%;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
}
.cas-project {
  position: relative;
  display: block;
  width: 50vw;
  height: 50vh;
  margin-right: 300px;
}
.cas-project:last-child { margin-right: 0; }
.cs-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cs-image img,
.cs-image video {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.cas-headline {
  position: absolute;
  top: 50%;
  left: 8.5%;
  max-width: 80vw;
  padding-left: 5%;
  transform: translateY(-50%);
}
.cas-titles {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 250px;
  overflow: hidden;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cas-titles .cas-titles-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  transform: translateY(250px);
}
.cas-titles .cs-title {
  padding: 50px 0;
  font-size: 150px;
  line-height: 150px;
  font-weight: 700;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.cas-titles .cs-title a {
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.cas-project .cs-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cas-progress {
  position: fixed;
  bottom: 7.5%;
  left: 50%;
  display: block;
  width: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(-50%);
}
.cas-progress span {
  position: absolute;
  left: 0;
  width: 0%;
  height: 100%;
  background: #fff;
}
.cas-bg-text {
  position: fixed;
  top: 10%;
  left: 0;
  font-size: 200px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.07em;
  white-space: nowrap;
  opacity: 0.02;
}
.showcase-footer {
  position: absolute;
  bottom: 7.5%;
  left: 50%;
  z-index: 1;
  width: 83%;
  pointer-events: none;
  transform: translateX(-50%);
}
.showcase-footer-left,
.showcase-footer-right {
  display: block;
  float: left;
  width: 50%;
  height: 100%;
  pointer-events: all;
}
.showcase-footer-right { float: right; text-align: right; }
.scroll-notice {
  position: relative;
  display: inline-block;
  width: auto;
}
.scroll-notice span:last-child {
  position: relative;
  display: block;
  width: auto;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.4);
  writing-mode: vertical-lr;
}
span.sn_bef {
  position: absolute;
  bottom: 140%;
  left: 10px;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
}
.a-plus-button {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.a-plus-button::before,
.a-plus-button::after {
  content: "";
  position: absolute;
  display: block;
  background: #fff;
}
.a-plus-button::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}
.a-plus-button::after {
  top: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  transform: translateX(-50%);
  transition: transform 0.6s ease;
}
.a-plus-button a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
}
.a-plus-button a > span {
  position: absolute;
  top: 30%;
  left: 50%;
  display: inline-block;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.a-plus-button a > span > span {
  display: block;
  transform: translateY(100%);
  transition: transform 0.3s ease 0.3s;
}
.a-plus-button:hover a > span > span,
.a-plus-button a:focus-visible > span > span { transform: translateY(0); }
.a-plus-button:hover::after,
.a-plus-button:focus-within::after { transform: translateX(-50%) rotate(270deg); }
@media (min-width: 450px) and (max-width: 900px) {
  .cas-project { width: 75vw; height: 70vh; }
  .cas-titles .cs-title { font-size: 100px; }
}
@media (max-width: 450px) {
  .cas-headline { max-width: 70vw; padding-left: 0; }
  .cas-project { width: 80vw; height: 60vh; margin-right: 50px; }
  .cas-titles { height: 80px; }
  .cas-titles .cas-titles-wrap { transform: translateY(80px); }
  .cas-titles .cs-title { padding: 20px 0; font-size: 40px; line-height: 40px; }
  .cas-progress { display: none; }
  .showcase-footer { bottom: 3.5%; }
}

/* ---------- Credentials ---------- */
.page-credentials .page-intro { padding-top: 240px; margin-bottom: 0; }
.page-credentials .page-statement {
  margin-bottom: 1em;
  font-size: 5rem;
}
.cred-statement { margin-top: -140px; }
.cred-statement-col { width: 100%; }
.cred-statement-text {
  margin: 0.83em 0 1em;
  font-size: 3rem;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #7a7a7a;
}
.profile-copy { display: flex; flex-direction: column; }
.profile-title {
  margin: 0.83em 0 calc(1em - 20px);
  font-size: 36px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
}
.profile-text {
  margin: 30px 0 10px -1px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: -0.75px;
  color: rgba(255, 255, 255, 0.4);
}
.profile-text:last-child { margin-bottom: 30px; }
.cred-services > .wrap-wide { display: flex; flex-direction: column; }
hr.cred-rule {
  width: 100%;
  height: 1px;
  margin: 2px 0 0;
  border: 0;
  background: #7a7a7a;
}
.cred-services-spacer { height: 47px; }
.cred-services-text {
  margin: 0.67em 0 1em;
  font-size: 5rem;
  line-height: 1.2em;
  font-weight: 700;
  letter-spacing: -5px;
  color: #fff;
}
.cred-clients > .wrap-wide { display: flex; flex-direction: column; }
hr.cred-rule-thin { margin: 1px 0 21px; }
.cred-clients-spacer { height: 120px; }
.page-eyebrow.cred-clients-title { margin-bottom: 50px; }
.cred-client-cols {
  display: flex;
  gap: 46px;
  padding: 10px;
}
.cred-client-list {
  flex: 0 1 100%;
  min-width: 0;
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
}
.cred-client-list:last-child { padding: 10px; }
.cred-client-list li {
  font-size: 48px;
  line-height: 65px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
}
.cred-client-list li:first-child { margin-top: 32.16px; }
.cred-client-list li:last-child { margin-bottom: 48px; }
@media (min-width: 768px) {
  .cred-statement-col { width: 50%; }
  .cred-statement-gap { width: 49.332%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cred-statement-col { width: 55%; }
}
@media (max-width: 1024px) {
  .page-credentials .page-statement,
  .cred-services-text { font-size: 3.5rem; letter-spacing: -3px; }
  .cred-client-cols { gap: 0; }
  .cred-client-list,
  .cred-client-list:last-child { padding: 0 10px 0 0; }
}
@media (max-width: 767px) {
  .page-credentials .page-statement { font-size: 2.6rem; letter-spacing: -2px; }
  .cred-statement-text { font-size: 2rem; }
  .cred-services-text { font-size: 2.4rem; letter-spacing: -2.5px; }
  .cred-services > .wrap-wide { margin-bottom: 95px; }
  .cred-client-cols { flex-wrap: wrap; }
  .cred-client-list,
  .cred-client-list:last-child { flex-basis: 100%; padding: 0; }
}

/* ---------- Our Work ---------- */
/* Page title reveal (theme): SplitText words/chars, created only when the animation runs. */
.page-title .pt-word { overflow: hidden; padding-right: 5px; }
.page-title .pt-char { transform: translateY(100%); }
.ow-intro {
  margin: -150px 0 -100px;
  padding: 20px;
}
.ow-intro-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.ow-intro-spacer { height: 10vh; margin-bottom: 20px; }
.ow-intro-text {
  margin: 0.83em 0 1em;
  font-size: 36px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #7a7a7a;
}
.work-grid {
  margin-bottom: 100px;
  padding: 20px;
}
.work-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.work-row {
  display: flex;
  margin-bottom: 100px;
}
.work-row:first-child { margin: 50px 0; }
.work-row-right { justify-content: flex-end; }
.work-tile { width: 100%; }
.work-tile-padded { padding: 10px; }
.alioth-single-project {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
.alioth-single-project a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.sw-image {
  display: block;
  width: 100%;
  overflow: hidden;
}
.sw-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: scale(1.1) translateY(-4%);
}
.sw-image video {
  width: 100%;
  height: 100%;
}
.sw-detail {
  position: relative;
  display: block;
  padding: 30px 0 0 30px;
}
.sw-title {
  display: block;
  margin: 0 0 5px;
  font-size: 35px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.06em;
  color: #fff;
}
.sw-cat {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.4);
}
.work-archive .values-strip { margin-bottom: 100px; }
.archive-row {
  display: flex;
  margin: -70px 0 100px;
}
.archive-col { width: 50%; padding: 20px; }
.services.services-our-work { padding-top: 120px; }
.services-our-work .services-rule { background: rgba(25, 27, 29, 0.6); }
/* The theme drew each item's rule over the item (220px rows), not below it. */
.services-our-work .service {
  border-bottom: 0;
  box-shadow: inset 0 -1px var(--rule);
}
@media (min-width: 768px) {
  .ow-intro-col { width: 65%; }
  .work-tile { width: 67%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .ow-intro-col { width: 80%; }
  .work-tile { width: 100%; }
}
@media (max-width: 1024px) {
  .work-grid { padding: 0; }
  .work-row, .work-row:first-child { margin: 0; }
  .archive-row { margin-top: 0; }
}
@media (min-width: 576px) and (max-width: 991px) {
  .archive-row { max-width: 90%; margin-inline: auto; }
}
@media (max-width: 767px) {
  .ow-intro { margin: -100px 0 0; }
  .ow-intro-text { font-size: 1.8em; line-height: 1.5em; }
  .work-row:first-child { margin-top: 50px; }
  .archive-row { flex-wrap: wrap; margin-top: 50px; }
  .archive-col { width: 100%; }
}
@media (max-width: 576px) {
  .archive-row { width: 95%; margin-left: 0; margin-bottom: 25px; }
  .services-our-work > .container { width: 95%; }
}
@media (max-width: 767px) {
  .services.services-our-work { width: 100%; }
}
@media (max-width: 450px) {
  .sw-title { font-size: 25px; letter-spacing: -0.04em; }
  .sw-cat { font-size: 16px; letter-spacing: -0.02em; }
}