/* Rabblends-only overrides. Keep small. */

/* Hero photo: hair in the upper third. */
.b-hero__media img {
  object-position: 50% 30%;
}

/* The work — desktop stagger, mobile bleed rhythm. */
.work__a .b-figure__media img { object-position: 50% 26%; }
.work__b .b-figure__media img { object-position: 50% 34%; }
.work__c .b-figure__media img { object-position: 50% 46%; }

@media (min-width: 1024px) {
  .work__grid { align-items: start; }
  .work__a { grid-column: 1 / 8; }
  .work__b { grid-column: 9 / 13; margin-top: 20vh; }
}
@media (max-width: 1023px) {
  .work__a { margin-inline: calc(-1 * var(--gutter)); }
  .work__a figcaption { padding-inline: var(--gutter); }
}

.work__c { margin: 0; }
.work__c .b-figure__media { aspect-ratio: 16 / 9; max-height: 80vh; }
.work__c figcaption { padding-inline: var(--gutter); }
@media (max-width: 1023px) {
  .work__c .b-figure__media { aspect-ratio: 4 / 5; max-height: none; }
}

.work__more { margin-top: var(--space-8); }

/* Prices tail. */
.prices__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

/* The barber. */
.rab__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.rab__text p {
  font-size: var(--step-1);
  max-width: 36ch;
}
@media (min-width: 1024px) {
  .rab__text { grid-column: 1 / 6; align-self: center; }
  .rab__media { grid-column: 7 / 13; }
}
@media (max-width: 1023px) {
  .rab__media {
    margin-inline: calc(-1 * var(--gutter));
    margin-top: var(--space-8);
  }
  .rab__media figcaption { padding-inline: var(--gutter); }
}
.rab__media .b-figure__media img { object-position: 50% 28%; }

/* Quote band. Attribution sits on sage, so it needs full-contrast ink. */
.quote-band { background: var(--sage); }
.quote-band .b-quote__attr { color: var(--ink); }
.quote-band { padding-block: clamp(80px, 12vw, 160px); }

/* The studio. */
.studio__media { margin: 0; }
.studio__media .b-figure__media { aspect-ratio: 4 / 5; }
.studio__media .b-figure__media img { object-position: 50% 50%; }
@media (min-width: 1024px) {
  .studio__media .b-figure__media { aspect-ratio: 4 / 3; max-height: 85vh; }
}
.studio__info { margin-top: var(--space-8); }
@media (min-width: 1024px) {
  .studio__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
}

/* Footer fine print. */
.b-footer__disclaimer { margin-top: var(--space-8); }

/* Leave room for the fixed booking bar on small screens. */
@media (max-width: 860px) {
  body { padding-bottom: 76px; }
}