/* Class-based equivalents of Webflow's per-element grid rules, so CMS-repeated items lay out correctly */
.right-service-item { justify-self: end; }
.right-team { grid-area: span 1 / span 3 / span 1 / span 3; }
.left-project-brand, .project-info-grid { grid-area: span 1 / span 1 / span 1 / span 1; }
@media screen and (max-width: 991px) { .right-service-item { justify-self: auto; } }
@media screen and (max-width: 479px) { .right-team { grid-column: span 1 / span 1; } .left-service-item { grid-area: span 1 / span 1 / span 1 / span 1; } }
.master-legal ul { padding-left: 1.2em; }
.body-article img { max-width: 100%; height: auto; border-radius: var(--radius--radius-3, 12px); }

.headline-home-services { justify-content: space-between; align-items: flex-start; gap: 24px; }
.services-intro { width: 100%; max-width: 332px; opacity: .64; }
@media screen and (max-width: 767px) { .headline-home-services { flex-direction: column; } .services-intro { max-width: none; } }
.team-role { margin-top: .5rem; }
.team-text { max-width: 36rem; }

.hero-subheading { max-width: 34rem; margin: 1rem auto 1.5rem; opacity: .72; font-size: 1.05rem; line-height: 1.5; }
.experience-label { margin-bottom: 2rem; display: inline-flex; }
.exp-dates { min-width: 8rem; opacity: .64; }
.exp-note { opacity: .64; margin-top: .25rem; }
@media screen and (max-width: 479px) { .hero-subheading { font-size: .95rem; margin: .75rem auto 1.25rem; } }

.experience-section .right-service-item { flex-direction: column; align-items: flex-start; max-width: 22rem; }
.service-item .text-h1, .service-item .text-h4 { word-break: normal; overflow-wrap: normal; hyphens: manual; }
@media screen and (max-width: 479px) { .home-services-section .service-item .text-h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); } }
/* Stephen Crowther wordmark has a descender (p) — keep cap height identical to the original logo */
.logo-nav { height: calc(100% * 23.2 / 19); margin-bottom: calc(-100% * 4.2 / 19); }
/* Hero: left-aligned headline, subheading and button */
.headline-home-hero { text-align: left; align-items: flex-start; margin-left: 0; margin-right: auto; }
.headline-home-hero .hero-subheading { margin-left: 0; margin-right: 0; }
.home-hero-bottom-tile { justify-content: flex-end; }
/* Hero: full-width container so copy lines up with the nav; headline bottom aligned with the corner labels */
.hero-home-section .main-container { max-width: none; }
@media screen and (min-width: 768px) {
  .home-hero-wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .home-hero-wrap .headline-home-hero { margin: 0; }
  .home-hero-wrap .home-hero-bottom-tile { flex: 0 0 auto; }
}
@media screen and (max-width: 767px) {
  .home-hero-bottom-tile { justify-content: flex-start; }
  .home-hero-bottom-tile .text-align-right { text-align: left; }
}
/* Image slider: centre the active slide on phones (mask must match the smaller image width) */
@media screen and (max-width: 767px) { .mask-images { max-width: 290px; } }
/* Adaptive badges (toggled by /js/site.js) */
.label-master.badge-on-light, .label-master.badge-on-dark { transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.label-master.badge-on-light { background-color: #101012 !important; color: #F9F3EC !important; box-shadow: inset 0 1px 1px 0 rgba(249,243,236,.16), inset 0 -1px 2px 0 rgba(0,0,0,.4) !important; }
.label-master.badge-on-dark { background-color: #F9F3EC !important; color: #101012 !important; box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.6), inset 0 -1px 2px 0 rgba(16,16,18,.16) !important; }
.label-master.badge-on-light *, .label-master.badge-on-dark * { color: inherit !important; }
/* Project cards: flick through project images on hover */
.flick-stack { position: absolute; inset: 0; pointer-events: none; }
.flick-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.flick-frame.is-on { opacity: 1; }

/* Case study v2: brief, chapters (pair / wide / trio / video), highlights, CTA band */
.project-brief { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; margin-top: 96px; padding-top: 32px; border-top: 1px solid rgba(16,16,18,.12); }
.project-brief-col { display: flex; flex-direction: column; gap: 12px; }
.project-brief-text { margin: 0; font-size: 1.15rem; line-height: 1.55; max-width: 36rem; }
.chapter-copy { display: flex; flex-direction: column; gap: 16px; }
.chapter-heading { margin: 0; }
.chapter-video { display: block; }
.project-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project-trio-item { position: relative; overflow: hidden; border-radius: var(--radius--radius-3, 12px); aspect-ratio: 4 / 5; }
.section.project-highlights-section { padding-top: 0; padding-bottom: 200px; }
.project-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.project-highlight { display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.section.project-cta-section { padding-top: 0; padding-bottom: 160px; }
.project-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 64px; border-radius: var(--radius--radius-3, 12px); background: rgba(249,243,236,.06); box-shadow: inset 0 1px 1px 0 rgba(249,243,236,.12); }
.project-cta-copy { display: flex; flex-direction: column; gap: 16px; max-width: 40rem; }
.project-cta-text { margin: 0; opacity: .72; font-size: 1.1rem; line-height: 1.55; }
@media screen and (max-width: 991px) {
  .project-brief { margin-top: 64px; gap: 32px; }
  .section.project-highlights-section { padding-bottom: 120px; }
  .project-cta { padding: 40px; }
}
@media screen and (max-width: 767px) {
  .project-brief { grid-template-columns: 1fr; }
  .project-trio { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -16px; padding-right: 16px; }
  .project-trio-item { flex: 0 0 78%; scroll-snap-align: start; }
  .project-highlights { grid-template-columns: 1fr; gap: 32px; }
  .project-highlight { min-height: 0; gap: 24px; }
  .project-cta { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}
/* Underline links: the hover reveals a text-shadow copy; make it follow the (scroll-animated) text colour */
.link-text { text-shadow: 0 1.25em 0 currentColor; }

/* Case study chapters: keep each image at its natural shape instead of fixed heights */
.project-chapter .project-brand-halves { grid-template-columns: 1.5625fr 1fr; align-items: start; }
.project-chapter .project-brand-halves > .image-wrap-project-brand { height: auto; aspect-ratio: 5 / 4; }
.project-chapter .project-brand-halves > .image-wrap-project-brand + .image-wrap-project-brand { aspect-ratio: 4 / 5; }
.project-chapter .image-wrap-project-brand.large { height: auto; aspect-ratio: 3 / 2; }
.project-chapter .image-wrap-project-brand > .image-cover { position: absolute; inset: 0; }
.project-chapter .overlay-image-with-tag { z-index: 2; }
@media screen and (max-width: 767px) {
  .project-chapter .project-brand-halves { grid-template-columns: 1fr; }
}

/* Services: big background is a soft, blurred wash of the hovered design shot */
.service-bg-image > .image-cover { filter: blur(48px) saturate(1.1); transform: scale(1.15); }

/* Case study "page" layout: a full-length landing page in a browser frame that slowly scrolls top to bottom */
.page-showcase { display: flex; flex-direction: column; gap: var(--_spacing---spacing--16, 16px); }
.page-frame { position: relative; border-radius: var(--radius--radius-3, 12px); overflow: hidden; background: #1b1c1f; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.page-frame-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; background: #26272b; }
.page-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.page-frame-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; }
.page-frame-img { display: block; width: 100%; height: auto; will-change: transform; animation: page-scroll 26s ease-in-out infinite alternate; }
.page-frame:hover .page-frame-img { animation-play-state: paused; }
.page-frame .overlay-image-with-tag { z-index: 2; top: 34px; }
@keyframes page-scroll {
  0%, 6% { transform: translateY(0); }
  94%, 100% { transform: translateY(calc(-100% + 100cqh)); }
}
@media (prefers-reduced-motion: reduce) { .page-frame-img { animation: none; } }
@media screen and (max-width: 767px) {
  .page-frame-view { aspect-ratio: 4 / 5; }
  .page-frame-bar { height: 26px; padding: 0 12px; }
  .page-frame .overlay-image-with-tag { top: 26px; }
}