/* Dedicated Services page only. The images stick; the copy stays in native flow. */
.brawnd-service-details {
  --detail-paper: #1b1417;
  --detail-ink: #f1eee7;
  --detail-pin: 88px;
  position: relative;
  color: var(--detail-ink);
  background: var(--detail-paper);
}
.brawnd-service-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  position: relative;
  isolation: isolate;
}
.brawnd-service-detail-media {
  position: sticky;
  top: var(--detail-pin);
  grid-column: 1;
  grid-row: var(--detail-row);
  align-self: start;
  z-index: var(--detail-row);
  height: calc(100svh - var(--detail-pin));
  min-height: 420px;
  margin: 0;
  padding: clamp(30px, 5vw, 88px) clamp(24px, 6vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(26px, 4svh, 48px);
  overflow: hidden;
  box-sizing: border-box;
}
.brawnd-service-detail-media { background: #eeeae3; color: #30262a; }
.brawnd-service-detail-media--ux,
.brawnd-service-detail-media--brand { background: #271d22; color: #f1eee7; }
.brawnd-service-detail-media figcaption {
  width: min(100%, 250px);
  margin: 0;
  font: 400 clamp(10px, .75vw, 12px)/1.4 var(--body, sans-serif);
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.brawnd-service-detail-copy {
  background: var(--detail-paper);
  grid-column: 2;
  grid-row: var(--detail-row);
  position: relative;
  min-width: 0;
  min-height: max(100svh, 820px);
  padding: clamp(64px, 8svh, 112px) clamp(32px, 7.5vw, 144px);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  scroll-margin-top: 100px;
}
.brawnd-service-detail-inner { width: 100%; max-width: 460px; margin: auto; }
.brawnd-service-detail-number { display: block; margin-bottom: 25px; font: 500 10px/1.4 var(--body, sans-serif); letter-spacing: .12em; color: #b9aaae; }
.brawnd-services-page .brawnd-service-detail-copy h3 {
  margin: 0 0 22px;
  max-width: none;
  color: var(--detail-ink);
  font: 400 clamp(34px, 3.2vw, 58px)/1.05 var(--brawnd-heading-font, Georgia, serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.brawnd-service-detail-copy p { margin: 0 0 16px; color: #c6babc; font: 400 clamp(13px, .93vw, 16px)/1.65 var(--body, sans-serif); }
.brawnd-services-page .brawnd-service-detail-copy h4 { margin: 44px 0 18px; color: #b9aaae; font: 400 10px/1.4 var(--body, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.brawnd-service-detail-copy ul { margin: 0; padding: 0; list-style: none; }
.brawnd-service-detail-copy li { padding: 11px 0; border-bottom: 1px solid #59464f; font: 400 clamp(13px, .95vw, 16px)/1.4 var(--body, sans-serif); }
.brawnd-service-detail-copy a { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; margin-top: 24px; color: var(--detail-ink); font: 500 12px/1.4 var(--body, sans-serif); text-decoration: none; }
.brawnd-service-detail-copy a span { display: inline-block; font-size: 20px; transition: transform .2s ease; }
.brawnd-service-detail-copy a:hover span { transform: translate(3px, -3px); }
.brawnd-service-detail-copy a:focus-visible { outline: 2px solid #d5bdc5; outline-offset: 5px; }
/* Original interface and identity concepts; preserve each complete composition. */
.brawnd-service-detail-illustration { display: block; width: 100%; max-width: 580px; height: auto; aspect-ratio: 4 / 3; object-fit: contain; flex: 0 1 auto; min-height: 0; border-radius: 4px; }
/* Six stationary cuts cover the join before releasing the actual chapter. */
.brawnd-services-page.is-services-journey[data-services-paper="detail"] { background: #1b1417; }
.brawnd-services-page.is-services-journey .brawnd-service-details { background: transparent; }
.brawnd-service-details.is-detail-cut-covered { clip-path: inset(100%); }
.brawnd-services-detail-cuts { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.brawnd-services-detail-cuts[hidden] { display: none !important; }
.brawnd-services-detail-cuts > i { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #1b1417; will-change: transform; }
@media (max-width: 1000px) and (min-width: 761px) {
  .brawnd-service-detail-copy { padding: 64px 32px; }
  .brawnd-service-detail-media { padding-inline: 30px; }
}
@media (max-width: 760px) {
  .brawnd-service-detail-grid { display: block; }
  .brawnd-service-detail-media { position: relative; top: auto; height: auto; min-height: 0; padding: 52px 32px 60px; gap: 32px; }
  .brawnd-service-detail-copy { min-height: 0; padding: 44px 28px 64px; }
  .brawnd-services-page .brawnd-service-detail-copy h3 { font-size: clamp(34px, 8vw, 48px); }
  .brawnd-service-detail-copy p { font-size: 14px; }
  .brawnd-service-detail-copy li { font-size: 14px; padding-block: 13px; }
  .brawnd-service-detail-illustration { max-width: 440px; }
}
@media (prefers-reduced-motion: reduce) {
  .brawnd-service-detail-media { position: relative; top: auto; }
  .brawnd-services-detail-cuts { display: none !important; }
  .brawnd-service-detail-copy a span { transition: none; }
}
@media print {
  .brawnd-services-detail-cuts { display: none !important; }
  .brawnd-service-detail-grid { display: block; }
  .brawnd-service-detail-media { position: relative; top: auto; height: auto; min-height: 0; max-height: 400px; break-inside: avoid; }
  .brawnd-service-detail-copy { min-height: 0; padding: 24px; break-inside: avoid; }
}

/* Keep the first service title clear of the fixed header after the cut reveal. */
@media (min-width: 761px) {
  #service-web .brawnd-service-detail-inner { transform: translateY(40px); }
  #service-web { padding-bottom: calc(clamp(64px, 8svh, 112px) + 40px); padding-top: calc(clamp(64px, 8svh, 112px) + 40px); }
}