/* ---- Pre-script layout guard ----
   In the source, #film comes before the site content, and service-page-layout.js
   rearranges it after load. Without this, the browser paints that raw order first
   (the funnel sitting where the hero belongs) and it visibly snaps into place.
   Hide it until the script signals ready. The animation is a failsafe: if the
   script never runs, the page reveals itself anyway. */
#film, #site { visibility: hidden; animation: svcLayoutReveal 0s linear 2.5s forwards; }
@keyframes svcLayoutReveal { to { visibility: visible; } }
html.svc-layout-ready #film,
html.svc-layout-ready #site { visibility: visible; animation: none; }
html {
  scroll-behavior: auto;
}

x-dc {
  display: block;
}

#dc-root,
#dc-root > .sc-host {
  height: auto !important;
  min-height: 100%;
}

#sitenav {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 1000 !important;
}

#service-overview {
  position: relative;
  min-height: calc(100vh - 71px);
  overflow: hidden;
  background: #1A1A1A;
  font-family: 'Outfit', system-ui, sans-serif;
}

#service-overview-scene,
#service-overview-scene > .service-overview-content {
  width: 100%;
  min-height: calc(100vh - 71px);
}

#service-overview-scene > .service-overview-content {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: clamp(54px, 8vh, 88px) !important;
  padding-bottom: clamp(54px, 8vh, 88px) !important;
}

#service-overview-scene .service-overview-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#service-overview-scene .service-overview-secondary-link {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: none !important;
}

#service-overview-scene .service-overview-actions-with-cases {
  display: flex !important;
}

#service-overview-scene .service-overview-actions-with-cases .service-overview-book-link {
  justify-content: center;
}

#service-overview-scene .service-overview-quick-links {
  width: min(430px, 86vw);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  margin-top: 34px;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.84) !important;
  font-size: 15px !important;
  text-align: center;
  text-decoration: none !important;
  transition: transform .48s cubic-bezier(.16, 1, .3, 1), color .3s ease;
  will-change: transform;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link + .service-overview-secondary-link {
  border-left: 1px solid rgba(255,255,255,.18) !important;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link::after {
  content: "↘";
  margin-left: 10px;
  color: #6fb698;
  font-size: 16px;
  transition: transform .48s cubic-bezier(.16, 1, .3, 1), color .3s ease;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-label {
  position: relative;
  display: inline-block;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(111,182,152,.72), #9acdb7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .64s cubic-bezier(.65, 0, .35, 1);
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:hover,
#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-4px);
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:hover .service-overview-secondary-label::after,
#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:focus-visible .service-overview-secondary-label::after {
  transform: scaleX(1);
  transform-origin: left center;
}

#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:hover::after,
#service-overview-scene .service-overview-quick-links .service-overview-secondary-link:focus-visible::after {
  color: #91c9b1;
  transform: translate(2px, 2px);
}

#film,
#how-it-works,
#work,
#book,
#case-studies {
  scroll-margin-top: 71px;
}

#film {
  height: 2400vh !important;
}

/* Contained paid-acquisition process film */
.service-how-it-works {
  padding: clamp(88px, 12vh, 138px) clamp(22px, 5vw, 72px) clamp(46px, 7vh, 76px);
  background: #eef1ef;
  font-family: 'Outfit', system-ui, sans-serif;
}

.service-how-it-works__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}

.service-how-it-works__copy {
  max-width: 720px;
}

.service-how-it-works__eyebrow,
.case-studies__eyebrow {
  display: block;
  margin-bottom: 16px;
  color: #2f8f6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.service-how-it-works h2 {
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
}

.service-how-it-works h2 span {
  color: #2f8f6b;
}

.service-how-it-works p {
  max-width: 650px;
  margin: 24px 0 0;
  color: #5d6862;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 500;
  line-height: 1.5;
}

.service-how-it-works__controls {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.service-how-it-works__play {
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 16px 24px;
  border: 1px solid #2f8f6b;
  border-radius: 13px;
  background: #277659;
  box-shadow: 0 14px 34px rgba(31,94,71,.22);
  color: #fff;
  cursor: pointer;
  font: 600 16px/1 'Outfit', system-ui, sans-serif;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .35s ease;
}

.service-how-it-works__play:hover,
.service-how-it-works__play:focus-visible {
  background: #1f5e47;
  box-shadow: 0 18px 42px rgba(31,94,71,.3);
  transform: translateY(-3px);
}

.service-how-it-works__play-icon {
  font-size: 11px;
}

.service-how-it-works__scroll-cue {
  color: #707a75;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

#film.service-film-embed {
  box-sizing: border-box;
  height: 620vh !important;
  padding: 18px clamp(12px, 3vw, 36px) 72px;
  background: #eef1ef !important;
}

#film.service-film-embed #stage {
  top: 82px !important;
  width: min(1180px, 100%);
  height: calc(100vh - 104px) !important;
  min-height: min(560px, calc(100vh - 104px));
  max-height: 760px;
  margin: 0 auto;
  border: 1px solid rgba(26,26,26,.12);
  border-radius: 28px;
  box-shadow: 0 28px 90px rgba(24,37,31,.16);
}

.service-film-skip {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 49;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(26,26,26,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 24px rgba(26,26,26,.08);
  backdrop-filter: blur(12px);
  color: #37423d !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: auto;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s ease;
}

.service-film-skip:hover,
.service-film-skip:focus-visible {
  background: #fff;
  color: #1f5e47 !important;
  transform: translateY(-2px);
}

.service-has-embedded-film #work {
  display: none;
}

/* Paid acquisition case studies */
.case-studies {
  padding: clamp(78px, 11vh, 132px) 32px;
  background: #f5f7f6;
  border-bottom: 1px solid #e2e6ea;
}

.case-studies__inner {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.case-studies__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: clamp(42px, 6vw, 68px);
}

.case-studies__heading {
  margin: 0;
  font-size: clamp(38px, 6vw, 70px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  color: #1a1a1a;
}

.case-studies__intro {
  max-width: 460px;
  margin: 0 0 5px;
  color: #66716b;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.5;
}

.case-studies__heading-dot {
  color: #2f8f6b;
}

.case-study {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  min-height: 610px;
  margin-top: 24px;
  border: 1px solid #dde3e0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(18, 33, 27, .08);
}

.case-study__index {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(26,26,26,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  color: #243029;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.case-study__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  padding: clamp(34px, 5vw, 64px);
}

.case-study__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.case-study__logo {
  display: block;
  width: auto;
  max-width: min(170px, 50%);
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
}

.case-study__type {
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid #dce4e0;
  border-radius: 999px;
  color: #59645f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-study__objective-label {
  display: block;
  margin-bottom: 10px;
  color: #2f8f6b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case-study__objective {
  max-width: 520px;
  margin: 0;
  color: #1a1a1a;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.case-study__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.case-study__metric {
  min-width: 0;
  padding: 20px 14px 18px;
  border: 1px solid #e2e6ea;
  border-radius: 14px;
  background: #f8faf9;
}

.case-study__number {
  display: block;
  color: #1f5e47;
  font-size: clamp(25px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  white-space: nowrap;
}

.case-study__label {
  display: block;
  margin-top: 9px;
  color: #647069;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.25;
  text-transform: uppercase;
}

.case-study__note {
  margin: -25px 0 0;
  color: #78817c;
  font-size: 11px;
  line-height: 1.45;
}

.case-study__creative-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #16201c;
}

.case-study__creative {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 15px;
  background: #243029;
}

.case-study__creative img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  display: block;
  object-fit: cover;
}

/* Where a case study has no second proof asset, the objective card takes the
   full width rather than leaving an empty column beside it. */
.case-study__proof:has(> :only-child) {
  grid-template-columns: minmax(0, 546px);
  justify-content: center;
}

/* A slot holding a still keeps that ad's own shape, so a 4:5 image dropped into
   a row of 9:16 videos is neither cropped nor floated in black bands. */
.case-study__media--video .case-study__creative:has(> img) {
  align-self: start;
  aspect-ratio: auto;
}

.case-study__media--video .case-study__creative > img {
  height: auto;
}

/* Never crop a creative. Where a slot's shape does not match the ad's, the ad
   is contained inside it rather than cut. */
.case-study__creative img {
  min-height: 0;
  object-fit: contain;
}

/* A single slot holding every static ad from the campaign, so image ads sit
   beside video ads in one row without stretching the section. */
.case-study__creative--collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: 10px;
  background: #16201c;
}

.case-study__creative--collage img {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 9px;
  object-fit: contain;
}

.case-study__creative--collage img:first-of-type {
  grid-column: 1 / -1;
}

/* Says plainly whether an ad ran as video or as a static image. */
.case-study__creative-type {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(10,14,12,.72);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.case-study__creative-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(10, 16, 13, .82);
  backdrop-filter: blur(9px);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.case-study--falastin {
  background: #101413;
  border-color: #101413;
}

.case-study--falastin .case-study__index {
  border-color: rgba(255,255,255,.16);
  background: rgba(16,20,19,.78);
  color: #8ed0b3;
}

.case-study--falastin .case-study__type,
.case-study--falastin .case-study__metric {
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
}

.case-study--falastin .case-study__type,
.case-study--falastin .case-study__label,
.case-study--falastin .case-study__note {
  color: rgba(255,255,255,.62);
}

.case-study--falastin .case-study__objective {
  color: #fff;
}

.case-study--falastin .case-study__number {
  color: #8ed0b3;
}

.case-study--falastin .case-study__creative-grid {
  background: #eae2d3;
}

.case-study--falastin .case-study__creative {
  background: #d8cfbe;
}

@media (max-width: 900px) {
  .service-how-it-works__inner,
  .case-studies__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-how-it-works__controls {
    align-items: flex-start;
  }

  .case-study {
    grid-template-columns: 1fr;
  }

  .case-study__creative-grid {
    min-height: 490px;
  }
}

@media (max-width: 620px) {
  /* 2026-09-04: the strip is the one-row marquee on a phone too, Jad's call ('just like on the website');
     the marks a touch smaller and closer so more than two are on screen */
  section.brand-marquee > div > div { zoom: .78; }
  section.brand-marquee > div > div > img { margin: 0 26px !important; }
  /* the film's funnel on a phone: its chips overlapped (Jad, 2026-09-04); smaller pills, same places */
  #fun span[style*="border-radius"] { padding: 3px 7px !important; font-size: 8.5px !important; letter-spacing: .04em !important; }
  /* 2026-09-04: the hero has to fit the small viewport (Safari's bars take ~170px): less padding */
  #service-overview-scene > .service-overview-content {
    min-height: auto;
    padding-top: 28px !important;
    padding-bottom: 16px !important;
  }

  #service-overview-scene .service-overview-actions {
    margin-top: 16px !important;
  }

  #service-overview-scene .service-overview-quick-links {
    width: min(100%, 360px);
    margin-top: 20px;
  }

  #service-overview-scene .service-overview-quick-links .service-overview-secondary-link {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .service-how-it-works {
    padding: 74px 20px 34px;
  }

  .service-how-it-works__inner {
    gap: 32px;
  }

  .service-how-it-works__play {
    min-width: 210px;
  }

  #film.service-film-embed {
    height: 560vh !important;
    padding: 10px 10px 52px;
  }

  #film.service-film-embed #stage {
    top: 72px !important;
    height: calc(100vh - 86px) !important;
    min-height: min(520px, calc(100vh - 86px));
    border-radius: 20px;
  }

  .service-film-skip {
    top: 12px;
    right: 12px;
  }

  .case-studies__header {
    gap: 22px;
  }

  .case-studies {
    padding-right: 18px;
    padding-left: 18px;
  }

  .case-study {
    border-radius: 19px;
  }

  .case-study__content {
    gap: 30px;
    padding: 30px 24px;
  }

  .case-study__brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-study__type {
    margin-left: 0;
  }

  .case-study__metrics {
    grid-template-columns: 1fr;
  }

  .case-study__metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .case-study__label {
    margin-top: 0;
    text-align: right;
  }

  .case-study__note {
    margin-top: -16px;
  }

  .case-study__creative-grid {
    min-height: 390px;
    gap: 7px;
    padding: 8px;
  }

  .case-study__creative {
    border-radius: 10px;
  }

  .case-study__creative img {
    min-height: 390px;
  }

  .case-study__creative-badge {
    right: 5px;
    bottom: 5px;
    left: 5px;
    padding: 7px 5px;
    font-size: 8px;
  }
}

/* Paid acquisition: compact process embed and editorial case studies */
.service-how-it-works {
  padding: clamp(76px, 10vh, 118px) clamp(22px, 5vw, 72px) clamp(30px, 4vh, 46px);
}

.service-how-it-works__inner {
  display: block;
  width: min(1180px, 100%);
  text-align: center;
}

.service-how-it-works h2 {
  font-size: clamp(44px, 6.4vw, 76px);
}

#film.service-film-embed {
  box-sizing: border-box;
  height: auto !important;
  padding: 0 clamp(18px, 4vw, 52px) clamp(82px, 11vh, 128px);
  overflow: visible;
  background: #eef1ef !important;
}

.service-film-window {
  position: relative;
  width: min(1180px, 100%);
  height: min(760px, calc(100vh - 112px));
  min-height: min(560px, calc(100vh - 112px));
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(26,26,26,.12);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(24,37,31,.16);
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.service-film-window::-webkit-scrollbar {
  display: none;
}

#film.service-film-embed .service-film-window #stage {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 27px;
  box-shadow: none;
}

.service-film-scroll-spacer {
  position: relative;
  width: 1px;
  /* Scroll distance per scene. Taller spacer, slower film. */
  height: 1000%;
  pointer-events: none;
}

#film.service-film-embed #sc8 {
  display: none !important;
}

.case-studies--editorial {
  padding: clamp(82px, 11vh, 136px) clamp(20px, 5vw, 64px);
  background: #f7f8f7;
}

.case-studies--editorial .case-studies__inner {
  width: min(1120px, 100%);
}

.case-studies--editorial .case-studies__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.8vw, 36px);
  margin-bottom: clamp(8px, 1.2vw, 16px);
  text-align: center;
}

.case-studies--editorial .case-studies__heading {
  font-size: clamp(44px, 6.4vw, 76px);
}

.case-studies--editorial .case-study {
  display: block;
  min-height: 0;
  margin: 0;
  padding: clamp(54px, 7vw, 84px) 0 clamp(76px, 10vw, 120px);
  overflow: visible;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-studies--editorial .case-study + .case-study {
  padding-top: clamp(72px, 9vw, 106px);
}

.case-studies--editorial .case-study--enimsay {
  padding-top: clamp(28px, 3.5vw, 42px);
  padding-bottom: clamp(60px, 7vw, 84px);
  border-top: 0;
}

.case-study__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}

.case-studies--editorial .case-study__logo {
  width: auto;
  height: clamp(22px, 2.6vw, 32px);
  max-width: min(210px, 38vw);
  object-fit: contain;
}


.case-studies--editorial .case-study--enimsay .case-study__logo {
  height: clamp(112px, 12vw, 148px) !important;
  max-width: min(360px, 64vw);
  max-height: none;
}

.case-studies--editorial .case-study--falastin .case-study__logo {
  height: clamp(40px, 4.8vw, 58px);
  max-width: min(360px, 64vw);
  max-height: none;
}

.case-study__results-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) repeat(3, minmax(120px, .66fr));
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

.case-study__identity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}

.case-studies--editorial .case-study__identity .case-study__objective {
  max-width: 330px;
  margin-top: -17px;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

.case-studies--editorial .case-study__results-row .case-study__metric {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(18px, 2vw, 26px) 0;
  border: 0;
  text-align: center;
}

.case-study__results-row .case-study__label {
  text-align: center;
}

.case-studies--editorial .case-study__objective {
  max-width: 520px;
  margin: 0;
  color: #49534e;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.4;
  text-align: right;
}

.case-studies--editorial .case-study__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 28px);
  margin-top: clamp(42px, 6vw, 70px);
  padding: clamp(18px, 3vw, 26px) clamp(14px, 3vw, 24px);
  background: #f2f5f3;
  border-radius: 18px;
}

.case-studies--editorial .case-study--enimsay .case-study__metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-studies--editorial .case-study__metric {
  padding: clamp(25px, 3.4vw, 38px) clamp(12px, 2.5vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.case-studies--editorial .case-study__metric:first-child {
  padding-left: 0;
}

.case-studies--editorial .case-study__metric + .case-study__metric {
  border-left: 0;
}

.case-studies--editorial .case-study__results-row .case-study__metric + .case-study__metric {
  border-left: 0;
}

.case-studies--editorial .case-study__number,
.case-studies--editorial .case-study--falastin .case-study__number {
  color: #1f5e47;
  font-size: clamp(34px, 5vw, 62px);
}

.case-studies--editorial .case-study__label,
.case-studies--editorial .case-study--falastin .case-study__label {
  margin-top: 11px;
  color: #66716b;
  font-size: 10px;
  letter-spacing: .11em;
}

.case-studies--editorial .case-study--falastin .case-study__number {
  color: #1f5e47;
}

.case-studies--editorial .case-study--falastin .case-study__label {
  color: #66716b;
}

.case-studies--editorial .case-study__note,
.case-studies--editorial .case-study--falastin .case-study__note {
  margin: 13px 0 0;
  color: #7a837e;
  font-size: 11px;
}

.case-study__media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  margin-top: clamp(42px, 6vw, 70px);
}

.case-studies--editorial .case-study__creative {
  overflow: hidden;
  border-radius: 18px;
  background: #121715;
  box-shadow: 0 18px 50px rgba(20,32,27,.11);
}

.case-study__media--square .case-study__creative {
  aspect-ratio: 1;
}

.case-studies--editorial .case-study__media--square img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.case-study__media--video {
  width: min(930px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.case-study__media-title {
  margin: clamp(52px, 7vw, 84px) 0 0;
  color: #1a1a1a;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-align: center;
}

.case-study__media-title + .case-study__media--video {
  margin-top: 20px;
}

.case-study__media-title + .case-study__media--square {
  margin-top: 20px;
}

.case-study--enimsay .case-study__media-title {
  margin-top: clamp(36px, 4vw, 48px);
}

.case-study__creative-label {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 3;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(10,14,12,.72);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.case-study__media--video .case-study__creative {
  aspect-ratio: 9 / 16;
}

.case-study__media--video video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #0b0d0c;
}

.case-study__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0 0 0 3px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: rgba(17,24,21,.68);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  font: 600 15px/1 system-ui, sans-serif;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), background .25s ease;
}

.case-study__video-play:hover,
.case-study__video-play:focus-visible {
  background: rgba(31,94,71,.92);
  transform: translate(-50%, -50%) scale(1.08);
}

.case-study__creative.is-playing .case-study__video-play {
  padding-left: 0;
  opacity: .86;
  transform: translate(-50%, -50%) scale(.94);
}

.case-study__creative.is-playing:hover .case-study__video-play,
.case-study__creative.is-playing .case-study__video-play:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
}

/* Sound toggle. The ad creatives carry real audio, so the viewer gets an
   explicit control rather than hunting for the native volume slider. Sits as a
   second chip under the "Ad 01" label so it reads as part of the same system. */
.case-study__video-sound {
  position: absolute;
  top: 48px;
  left: 13px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 7px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(10,14,12,.72);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}

.case-study__video-sound:hover,
.case-study__video-sound:focus-visible {
  background: rgba(31,94,71,.92);
  color: #fff;
}

.case-study__video-sound .cs-snd-i {
  width: 15px;
  height: 15px;
  flex: none;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.case-study__video-sound .cs-snd-i path + path {
  fill: none;
}

.case-study__video-sound[data-sound="on"] .cs-snd-i--off,
.case-study__video-sound[data-sound="off"] .cs-snd-i--on {
  display: none;
}

.case-study__video-sound[data-sound="off"] {
  color: rgba(255,255,255,.66);
}

.case-study__caption-test {
  width: min(1040px, 100%);
  margin: clamp(46px, 6vw, 68px) auto 0;
}

.case-study__caption-test > h3 {
  margin: 0 0 18px;
  color: #1a1a1a;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-align: center;
}

.case-study__caption-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.case-study__caption-card {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid #d9dfdc;
  border-radius: 18px;
  background: #f8faf9;
}

.case-study__caption-card > span {
  display: inline-flex;
  margin-bottom: 17px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #1f5e47;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
}

.case-study__caption-card p {
  margin: 0;
  color: #3f4944;
  font-size: 14px;
  line-height: 1.55;
}

.case-study__caption-card p + p {
  margin-top: 12px;
}

@media (max-width: 620px) {
  .case-study__creative.is-playing .case-study__video-play {
    opacity: .7;
  }

  .service-how-it-works {
    padding: 70px 20px 26px;
  }

  /* the film runs edge to edge on a phone, and the window is only as tall as a chapter needs, so
     the scene fills it instead of floating in the top half */
  #film.service-film-embed {
    height: auto !important;
    padding: 0 0 64px;
  }

  .service-film-window {
    height: min(600px, calc(100svh - 92px));
    min-height: min(520px, calc(100svh - 92px));
    width: auto;
    margin: 0 14px;
    border-radius: 16px;
  }

  #film.service-film-embed .service-film-window #stage {
    top: 0 !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0;
  }

  .case-studies--editorial {
    padding: 76px 20px 96px;
  }

  .case-studies--editorial .case-studies__header {
    margin-bottom: 46px;
  }

  .case-studies--editorial .case-study {
    padding: 42px 0 82px;
    border-radius: 0;
  }

  .case-study__summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
  }

  .case-studies--editorial .case-study__objective {
    max-width: 340px;
    text-align: left;
  }

  .case-studies--editorial .case-study__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
  }

  .case-studies--editorial .case-study__metric {
    display: block;
    padding: 22px 10px;
  }

  .case-studies--editorial .case-study__metric:first-child {
    padding-left: 0;
  }

  .case-studies--editorial .case-study__number,
  .case-studies--editorial .case-study--falastin .case-study__number {
    font-size: clamp(27px, 9vw, 38px);
  }

  .case-studies--editorial .case-study__label,
  .case-studies--editorial .case-study--falastin .case-study__label {
    margin-top: 8px;
    font-size: 8px;
    line-height: 1.35;
    text-align: left;
  }

  .case-study__media {
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 8px); /* one creative per view; a peeking tile had its badge cut at the screen edge */ /* one caption per view; what peeks of the next is inside its padding */
    grid-template-columns: none;
    gap: 12px;
    margin-top: 38px;
    overflow-x: auto;
    padding: 0 20px 24px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  /* the video creatives are sized by a more specific rule above; match it so one tile fills a view */
  .case-studies--editorial .case-study__media--video,
  .case-study__media--video {
    grid-auto-columns: min(62vw, 240px); /* a creative and the edge of the next: the row reads as a row */
    grid-template-columns: none;
  }

  .case-study__media::-webkit-scrollbar {
    display: none;
  }

  .case-studies--editorial .case-study__creative {
    scroll-snap-align: start;
  }
}

/* Case-study proof and stronger chapter separation */
.case-studies--editorial .case-study + .case-study {
  margin-top: clamp(54px, 8vw, 94px);
  padding-top: clamp(72px, 9vw, 108px);
  border-top: 4px solid #1f5e47;
}

.case-studies--editorial .case-study--enimsay .case-study__metric:first-child .case-study__number {
  font-size: clamp(31px, 4.7vw, 56px);
}

.case-study__proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(30px, 4vw, 46px);
}

.case-study__proof-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9dfdc;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(20,32,27,.08);
}

.case-study__proof-item img {
  display: block;
  width: 100%;
  height: auto;
}

.case-study__proof-item--meta {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: visible;
  gap: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-study__proof-shot {
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #d9dfdc;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(20,32,27,.07);
}

.case-study__proof-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1008 / 98;
  object-fit: cover;
}

.case-study__proof-item--calendar {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.case-study__proof-item--calendar img {
  flex: 1 1 auto;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

.case-study__proof-item--campaign-creative img {
  flex: 1 1 auto;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

/* The side column must not dictate the height of the proof row, and nothing in
   the case studies may be cropped. Images are contained, never covered, so a
   creative is always shown whole. */
.case-study__proof-item--campaign-creative,
.case-study__proof-item--calendar {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #10201a;
}

.case-study__proof-item--campaign-creative > img,
.case-study__proof-item--calendar > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* Falastina has no Meta screenshot for this campaign, so the slot was showing a
   thin slice of a creative cropped to the Meta strip ratio. Hide it there. */
.case-study--falastina .case-study__proof-shot {
  display: none;
}

/* FALASTIN's side creative carries its headline at the top, so anchor the crop
   there rather than centring it and slicing the type. */
.case-study--falastin .case-study__proof-item--campaign-creative > img {
  object-position: center top;
}

.case-study--falastin .case-study__proof-shot img {
  aspect-ratio: 1620 / 51;
}

.case-study__proof-item .case-study__proof-statement {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  /* Fixed, not flex-grow: the objective card is the same size on every case
     study rather than stretching to match its neighbouring creative. */
  flex: 0 0 auto;
  height: clamp(300px, 32vw, 360px);
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 46px);
  border: 0;
  border-radius: 18px;
  background: #173c2e;
  box-shadow: 0 22px 55px rgba(23,60,46,.2);
  color: #f8faf9;
  text-align: left;
  text-transform: none;
}

.case-study__proof-statement > span {
  display: block;
  margin-bottom: 20px;
  color: #91c9b1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.case-study__proof-statement > strong {
  display: block;
  font-size: clamp(28px, 3.4vw, 43px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.04;
}

.case-study__proof-item figcaption {
  padding: 13px 17px 14px;
  border-top: 1px solid #e4e8e6;
  color: #6b756f;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .case-studies--editorial .case-study + .case-study {
    margin-top: 44px;
    padding-top: 68px;
    border-top-width: 4px;
  }

  .case-studies--editorial .case-study--enimsay .case-study__metric:first-child .case-study__number {
    font-size: clamp(22px, 6.8vw, 28px);
    letter-spacing: -.045em;
  }

  .case-study__proof {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
  }

  .case-study__results-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
  }

  .case-study__identity {
    grid-column: 1 / -1;
    align-items: center;
    padding: 0 0 20px;
  }

  .case-study__identity .case-study__objective {
    margin-top: -14px;
    text-align: center;
  }

  .case-studies--editorial .case-study__results-row .case-study__metric {
    min-width: 0;
    padding: 22px 10px;
    border: 0;
  }

  .case-study__results-row .case-study__metric:first-of-type {
    border-left: 0;
  }

  /* three metrics across a phone: the labels were too small to read under the big numbers */
  .case-studies--editorial .case-study__results-row .case-study__label {
    font-size: 12px;
    letter-spacing: .07em;
    line-height: 1.3;
  }

  .case-study__caption-grid {
    grid-template-columns: 1fr;
  }

  .case-study__caption-test > h3 {
    text-align: left;
  }

  .case-study__proof-item {
    border-radius: 14px;
  }

  .case-study__proof-item--meta img {
    width: 100%;
    max-width: 100%;
  }

  .case-study__proof-item .case-study__proof-statement {
    height: auto;
    min-height: 240px;
    padding: 28px 24px;
  }

  .case-study__proof-statement > strong {
    font-size: clamp(28px, 9vw, 38px);
  }

  .case-study__media-title {
    margin-top: 48px;
    text-align: left;
  }

  .case-study__proof-item figcaption {
    position: sticky;
    left: 0;
    width: fit-content;
    min-width: 100%;
    box-sizing: border-box;
    background: #fff;
    font-size: 9px;
  }
}

/* ---- Case study tab toggle (premium segmented control) ---- */
/* tabbed panels sit tight under the tabs, no scroll-era dead space, and every
   panel starts at the same Y so switching tabs never shifts the layout */
.case-studies--editorial .case-study[data-cs-panel],
.case-studies--editorial .case-study[data-cs-panel] + .case-study[data-cs-panel] {
  padding-top: clamp(4px, 0.8vw, 10px);
  margin-top: 0;
  border-top: 0;
}
/* the dc template framework strips the boolean `hidden` attribute, so panels are
   hidden with a class instead; must win over .case-study { display:block } */
.case-studies--editorial .case-study.cs-off { display: none !important; }

/* one consistent, readable identity logo size across all three case studies
   (shrinks Enimsay's oversized mark, enlarges the tiny Falastina wordmark) */
.case-studies--editorial .case-study[data-cs-panel] .case-study__logo {
  height: clamp(44px, 5vw, 60px) !important;
  max-width: min(280px, 58vw) !important;
  max-height: none !important;
}
/* compact the tabbed case-study panels so a single case study isn't overly tall */
.case-studies--editorial .case-study[data-cs-panel] { padding-bottom: clamp(24px, 3vw, 40px); }
.case-studies--editorial .case-study[data-cs-panel] .case-study__results-row { margin-bottom: 0; }
.case-studies--editorial .case-study[data-cs-panel] .case-study__proof { margin-top: clamp(18px, 2.4vw, 30px); }
.case-studies--editorial .case-study[data-cs-panel] .case-study__media-title { margin-top: clamp(26px, 3.2vw, 40px); }
.case-studies--editorial .case-study[data-cs-panel] .case-study__caption-test { margin-top: clamp(26px, 3.2vw, 40px); }
.cs-tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  padding: 6px; border-radius: 100px;
  background: linear-gradient(180deg, #f4f6f5, #eef1ef);
  box-shadow: inset 0 1px 2px rgba(26,26,26,.05), 0 1px 0 #fff;
}
.cs-tab {
  appearance: none; cursor: pointer; font: inherit; border: 0;
  background: transparent; border-radius: 100px;
  padding: 12px 26px; color: #6c766f; letter-spacing: .005em;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: color .25s ease, background .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.cs-tab span { font-weight: 500; color: #a4aca6; margin-left: 3px; transition: color .25s ease; }
.cs-tab:hover { color: #1f5e47; }
.cs-tab:hover span { color: #7d968b; }
.cs-tab.is-active {
  color: #16241d; background: #fff;
  box-shadow: 0 8px 22px rgba(24,37,31,.12), 0 1px 2px rgba(24,37,31,.06);
  transform: translateY(-1px);
}
.cs-tab.is-active span { color: #2f8f6b; }
@media (max-width: 640px) {
  .cs-tabs { gap: 3px; padding: 5px; }
  .cs-tab { padding: 11px 16px; font-size: 12.5px; }
  .cs-tab span { display: none; }
}

/* Falastina pending / placeholder treatment */
.case-studies--editorial .case-study--falastina .case-study__number--pending { color: #aeb6b0; font-weight: 700; }
.case-studies--editorial .case-study--falastina .case-study__logo { height: clamp(30px, 3.6vw, 46px); max-width: min(320px, 60vw); max-height: none; }
.case-study__proof-shot--pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 260px; border-radius: 16px;
  background: repeating-linear-gradient(135deg, #f3f5f4 0 14px, #eef1ef 14px 28px);
  border: 1px solid #e2e6ea;
}
.case-study__pending-note { color: #8a938d; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; }
.case-study__proof-sub { margin: 8px 0 0; color: #66716b; font-size: 14px; line-height: 1.4; }

/* ---- Site footer ----
   Mirrors src/components/Footer.astro + the .ftr rules in src/styles/site.css so the
   standalone service pages carry the same footer as the rest of thegrowthproject.me.
   Prefixed tpf- because these pages load the _ds kit, not site.css. */
.tpf { padding: 64px 32px 60px; background: #1A1A1A; color: #fff; }
.tpf-wrap { max-width: 1180px; margin: 0 auto; }
.tpf-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.tpf-brand { max-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.tpf-brand > a { text-decoration: none; }
.tpf-brand p { font-size: 14px; line-height: 1.55; color: #fff; margin: 0; }
.tpf-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.tpf-col { display: flex; flex-direction: column; gap: 10px; }
.tpf-h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.tpf-col a { font-size: 14px; color: #fff; text-decoration: none; transition: opacity .15s ease; }
.tpf-col a:hover { opacity: .7; }
/* 2026-09-04, Jad: the nine services in three columns with the title centred above them */
.tpf-col:first-child { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 28px; row-gap: 10px; }
.tpf-col:first-child .tpf-h { grid-column: 1 / -1; text-align: center; }
@media (max-width: 900px) { .tpf-cols { gap: 32px 40px; } }

/* Falastina runs two video ads and three image ads. The image ads sit together
   as one collage tile so the row stays three slots wide instead of six. */
@media (min-width: 621px) {
  .case-study--falastina .case-study__media {
    width: min(930px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.case-study__creative--collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: 8px;
  padding: 10px;
  aspect-ratio: 9 / 16;
  background: #121715;
}

.case-study__creative--collage > img {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 9px;
  object-fit: contain;
}

.case-study__creative--collage > img:first-of-type {
  grid-column: 1 / -1;
}

/* FAQ in two columns so nine questions do not run the page long. Each answer
   opens inside its own column, so the other column does not jump. */
.faq-wrap {
  --faq-gap: clamp(20px, 3vw, 44px);
}

.faq-wrap > details.faq {
  break-inside: avoid;
}

@media (min-width: 900px) {
  .faq-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--faq-gap);
    align-items: start;
  }
}

/* Below the desktop breakpoint the proof row stacks, so the objective card is
   the same width on every case study instead of half-width only where a second
   proof asset happens to exist. */
@media (max-width: 900px) {
  .case-study__proof,
  .case-study__proof:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

/* ---------- mobile polish on the case studies ---------- */
@media (max-width: 620px) {
  /* Section headings read centred on a phone, matching the section titles. */
  /* left-aligned on a phone, like the arrows under the rows: centred, "A/B tested captions" sat
     right under the gap between the first two creatives, the lane the ball takes through the row */
  .case-study__media-title,
  .case-study__caption-test > h3 {
    text-align: left;
    padding-left: 20px;
  }

  /* Slightly smaller creatives so a card is not the whole screen. */
  .case-study__media {
    grid-auto-columns: min(70vw, 268px);
    padding-right: 0;
    /* Each slot keeps its own height. Stretching them to the tallest left a
       strip of slot background under the shorter ones. */
    align-items: start;
  }

  /* The slot had a fixed 9:16 shape while the video sized itself inside it,
     which left a thin strip of the slot's background showing beneath. Letting
     the video set the height removes it. */
  .case-study__media--video .case-study__creative {
    aspect-ratio: auto;
    background: #0b0d0c;
  }

  .case-study__media--video video {
    height: auto;
    /* Use the file's own ratio, not an assumed 9:16, or a clip that is a few
       pixels off leaves a strip of the slot showing under it. */
    aspect-ratio: auto;
  }

  /* Captions swipe side by side instead of stacking into a tall column. */
  .case-study__caption-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%; /* a caption and the edge of the next */
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .case-study__caption-grid::-webkit-scrollbar { display: none; }

  .case-study__caption-card {
    scroll-snap-align: start;
  }

  /* The booking embed needs room; a short box made it scroll inside itself. */
  /* The element carries an inline height, so the override has to win. */
  #cal-inline {
    height: 640px !important;
    overflow: hidden;
  }
}

/* Desktop drops the funnel a little below the title; the inline style on the
   element means this has to win explicitly. */
@media (min-width: 621px) {
  #funwrap {
    margin-top: clamp(38px, 7vh, 74px) !important;
  }
}

/* The mobile card carried ~200px of slack between the funnel and the scroll
   hint. Shorter card, same composition, less scrolling to get past it. */
@media (max-width: 620px) {
  /* Room for the scenes: a phone screen minus the header and a strip of the next section. The
     scenes place their cards by the stage height, so a short window stacked them on the heading. */
  #film.service-film-embed .service-film-window {
    height: min(700px, calc(100svh - 150px));
    min-height: min(560px, calc(100svh - 150px));
  }
  /* the opening funnel a touch smaller, so a page with a subtitle keeps it clear of the hint */
  #film.service-film-embed #sc0 #fun { zoom: .9; }
  /* the opening scene starts near the top of the window, so its funnel clears the hint */
  #film.service-film-embed #sc0 { padding-top: 40px !important; }
}

/* The mobile hero was pinned to full viewport height, leaving a band of dark
   dead space under the two quick links. Let it size to its content instead. */
@media (max-width: 620px) {
  #service-overview,
  #service-overview-scene,
  #service-overview-scene > .service-overview-content {
    min-height: 0;
  }

  #service-overview-scene > .service-overview-content {
    padding-top: clamp(28px, 5vh, 46px) !important;
    padding-bottom: clamp(26px, 4vh, 40px) !important;
  }

  #service-overview-scene .service-overview-quick-links {
    margin-top: 22px;
  }
}


/* ---------------------------------------------------------------------------
   Mobile pass, 2026-08-28. Three columns of metrics do not fit on a 375px
   phone, and the separators above were 1px rules, which are against house
   style. Space and a soft field do the work instead.
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .case-studies--editorial .case-study__metrics,
  .case-studies--editorial .case-study--enimsay .case-study__metrics {
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .case-studies--editorial .case-study__metric + .case-study__metric { border-left: 0; }
}
@media (max-width: 400px) {
  .case-studies--editorial .case-study__metrics,
  .case-studies--editorial .case-study--enimsay .case-study__metrics {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------------
   House style: no hairlines. 2026-08-28.

   The hero on these pages is a clone of the film's final scene, and that scene
   carries inline 1px rules from the design system export, so they cannot be
   removed at source without regenerating the export. Override them here. The
   proof strip keeps its shape from spacing and a soft field instead, and the
   two quick links are separated by a gap rather than a vertical rule.
   --------------------------------------------------------------------------- */
#service-overview-scene [style*="border-top: 1px solid"],
#service-overview-scene [style*="border-bottom: 1px solid"],
#service-overview-scene [style*="border-left: 1px solid"],
#service-overview-scene [style*="border-right: 1px solid"],
.service-overview-content [style*="border-top: 1px solid"],
.service-overview-content [style*="border-bottom: 1px solid"],
.service-overview-content [style*="border-left: 1px solid"],
.service-overview-content [style*="border-right: 1px solid"] {
  border-color: transparent !important;
}

/* The divider between Case Studies and How it works */
#service-overview-scene .service-overview-quick-links .service-overview-secondary-link + .service-overview-secondary-link {
  border-left: 0 !important;
}
#service-overview-scene .service-overview-quick-links {
  gap: 10px;
}

@media (max-width: 620px) {
  /* 2026-09-03: side by side after all, at a size that fits 375px: the ball rests in the gap between
     them, as on desktop, instead of having to pass a stack */
  #service-overview-scene .service-overview-quick-links {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(430px, 92vw);
  }
  #service-overview-scene .service-overview-quick-links .service-overview-secondary-label { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Phone tap targets, 2026-08-28.
   These pages do not load site.css, so the fixes made there never reached them.
   Everything a thumb has to hit is brought up to 44px. Measured at 375px:
   case study tabs were 35px, the sound toggle 31px, the play button 34px, and
   the footer links 18px stacked 10px apart.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* 2026-09-04, Jad: cleaner and less busy (mirrors the Astro footer) */
  .tpf { padding: 44px 20px 34px; }
  .tpf-in { gap: 30px; }
  .tpf-brand { max-width: none; gap: 12px; }
  .tpf-brand p { font-size: 13.5px; color: rgba(255, 255, 255, .7); max-width: 34ch; }
  .tpf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; width: 100%; }
  .tpf-col { gap: 0; margin: 0; }
  .tpf-col a { padding: 8px 0; font-size: 14px; color: #fff; line-height: 1.3; }
  .tpf-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .55); margin: 0 0 4px; padding: 0; }
  .tpf-col:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0; }
  .tpf-col:first-child .tpf-h { grid-column: 1 / -1; text-align: left; }
  .tpf-bottom { margin-top: 30px; padding-top: 18px; font-size: 12px; color: rgba(255, 255, 255, .6); gap: 10px; }
}
@media (max-width: 640px) {
  .cs-tab { padding: 16px 18px; font-size: 13px; }
  .case-study__video-sound { padding: 14px 14px; font-size: 10px; }
}

/* The film's own controls. The export pins these with #id !important inside its
   own @media (max-width: 780px), so these need a heavier selector to win.
   Checked before growing them: the play button sits 25px right of the rail and
   is anchored bottom-left, so at 44px it grows up and right, into empty space. */
@media (max-width: 780px) {
  button#playbtn { width: 44px !important; height: 44px !important; }

  /* Scene dots were 7x7 and clickable. The dot still LOOKS 7px: padding grows
     only the hit area, background-clip keeps the paint inside the dot, and the
     999px radius clamps to a circle at the content box. gap drops to 2px so the
     visual spacing stays about what it was. */
  /* div#rail, not #rail: the export sets gap with !important at equal
     specificity and sits later in the cascade, so a plain #rail loses.
     4px of side padding with gap:0 reproduces the original 15px pitch
     exactly (7px dot + 8px gap), so nothing moves on screen. */
  div#rail { gap: 0 !important; }
  #rail > div {
    box-sizing: content-box !important;
    padding: 18px 4px !important;
    background-clip: content-box !important;
  }
}

/* Both logo links were about 31px tall. */
.sh-logo, .tpf-brand > a { display: inline-flex; align-items: center; min-height: 44px; }

/* The "visit the live site" links sit inside a fake browser address bar, so
   they cannot just be made taller without the mock looking wrong. This leaves
   every visible pixel alone and extends only the touch area, above and below
   the pill, to 44px. Nothing interactive sits directly above or below it. */
@media (max-width: 900px) {
  a.ca-live__url, .wlp-site-url > a { position: relative; }
  a.ca-live__url::after, .wlp-site-url > a::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* ---------------------------------------------------------------------------
   Brand marquee on phones, 2026-08-28.
   The homepage marquee already shrinks its logos and tightens their margins
   under 700px. These nine pages get their marquee from the design system
   export, which carries no mobile treatment: 46px margins each side and full
   size logos meant one logo filled the whole strip, so FALASTIN was permanently
   half faded and read as "ALASTIN". Same approach as the homepage.
   transform: scale does not change layout width, so the margin has to come
   down as well or the gaps just get wider.
--------------------------------------------------------------------------- */
@media (max-width: 700px) {
  section.brand-marquee img {
    margin-left: 22px !important;
    margin-right: 22px !important;
    transform: scale(.82);
    transform-origin: center;
  }
}

/* the booking heading sits at the same size as the Case Studies and How it works headings */
#book .book-heading {margin: 0;
  font-size: clamp(38px, 6vw, 70px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  color: #1a1a1a;
  color: #FFFFFF;
}


/* ---------------------------------------------------------------------------
   Phone rows, 2026-09-03. A row that scrolls sideways gets a pair of arrows
   and a count under it (service-page-layout.js adds them), so it is obvious
   there is more to see. Desktop rows show everything and need none.
   --------------------------------------------------------------------------- */
.csr-nav { display: none; }
@media (max-width: 620px) {
  /* left-aligned: centred, the arrows sat right under the gap between the first two cards, the one
     lane the ball has through a row on a phone */
  .csr-nav { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 4px 0 0; padding-left: 20px; }
  .csr-btn { width: 40px; height: 40px; border-radius: 999px; border: 0; padding: 0; background: #FFFFFF; box-shadow: 0 6px 18px rgba(26, 26, 26, .14); color: #1A1A1A; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .csr-btn svg { width: 18px; height: 18px; }
  .csr-btn:disabled { opacity: .35; cursor: default; }
  .csr-count { min-width: 44px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #79838B; font-variant-numeric: tabular-nums; }
  .case-study__media, .case-study__caption-grid { scroll-behavior: smooth; }
}