/* Services opening. Every rule is scoped to the new page. */
.brawnd-services-page {
  --service-paper: #f1eee7;
  --service-ink: #30262a;
  --service-wine: #50333e;
  background: var(--service-paper);
  color: var(--service-ink);
}
.brawnd-services-hero {
  min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.5svh, 28px);
  padding: 104px 7vw 36px;
  overflow: hidden;
}
.brawnd-services-opening {
  position: relative; flex: 0 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate;
}
.brawnd-services-art { width: min(100svh, 1040px); max-width: 100%; margin: 0 auto; }
.brawnd-services-illustration { width: 100%; height: auto; display: block; overflow: visible; }
.brawnd-services-page .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.brawnd-services-opening:focus-visible { outline: 2px solid var(--service-wine); outline-offset: -5px; }
.brawnd-services-opening:focus-visible .brawnd-services-motion-help {
  position: absolute; inset: auto 20px 20px; width: auto; height: auto;
  padding: 0; margin: 0; clip-path: none; white-space: normal;
  color: #786a6e; font: 11px/1.4 var(--body, sans-serif); text-align: center;
}

/* A single JavaScript clock articulates the facing figures and hand gestures.
   Keeping body, hands, props and effects on that clock makes pause exact. */
.brawnd-services-illustration .service-paper { fill: var(--service-paper); }
.brawnd-services-illustration .service-skin { fill: var(--service-paper); }
.brawnd-services-illustration .service-shirt { fill: var(--service-paper); }
.brawnd-services-illustration .service-solid { fill: var(--service-ink); }
.brawnd-services-illustration .story-dress { fill: var(--service-paper); }
.brawnd-services-illustration .story-arm-outline { stroke: var(--service-ink); stroke-width: 8; fill: none; }
.brawnd-services-illustration .story-arm-fill { stroke: var(--service-paper); stroke-width: 4.5; fill: none; }
.brawnd-services-illustration { contain: layout style; }

/* Two offset lines converge before the notes and circles arrive. */
.brawnd-services-manifesto {
  position: relative; isolation: isolate; width: 100%; flex: 1 0 auto;
  --service-statement-size: clamp(56px, min(6.6vw, 11.2svh), 112px);
  padding: 0; box-sizing: border-box;
  display: grid; align-content: end;
}
.brawnd-services-statement { position: relative; width: min(100%, 1280px); margin: auto; }
.brawnd-services-page .brawnd-services-statement-heading {
  position: relative; left: -.3em; z-index: 1; width: max-content; max-width: 100%; margin: 0 auto;
  font: 400 var(--service-statement-size)/.98 var(--brawnd-heading-font, Georgia, serif);
  letter-spacing: -.05em;
}
.brawnd-services-line { display: block; width: max-content; max-width: 100%; will-change: transform; }
.brawnd-services-line-first { margin-left: 0; }
.brawnd-services-line-second { margin-left: 3.5em; }
.brawnd-services-note { position: relative; z-index: 2; margin: 0; width: calc(var(--service-statement-size) * 3.2); color: #65595d; font: 400 clamp(11px, .84vw, 13px)/1.55 var(--body, sans-serif); }
.brawnd-services-note-first { position: absolute; top: 5%; left: calc(50% + var(--service-statement-size) * 2.7); }
.brawnd-services-note-second { position: absolute; bottom: 0; right: calc(50% + var(--service-statement-size) * 2.7); }
.brawnd-services-orbits { position: absolute; inset: 0; z-index: 0; pointer-events: none; font-size: var(--service-statement-size); }
.brawnd-services-orbits span { position: absolute; top: calc(50% - .445em); transform: translateY(-50%); width: 2.85em; aspect-ratio: 1; border-radius: 50%; background: #e5e0d9; }
.brawnd-services-orbits span:first-child { left: calc(50% - 3.925em); }
.brawnd-services-orbits span:last-child { left: calc(50% + 1.075em); }
/* Hide only after the observer is ready: no-JS and reduced-motion stay readable. */
.brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-line-first { opacity: 0; transform: translateX(100vw) skewX(-12deg); }
.brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-line-second { opacity: 0; transform: translateX(-100vw) skewX(12deg); }
.brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-note { opacity: 0; transform: translateY(15px); }
.brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-orbits { opacity: 0; transform: translateX(12%) scale(.85); }
.brawnd-services-manifesto.is-armed .brawnd-services-line { transition: none; }
.brawnd-services-manifesto.is-armed .brawnd-services-note { transition: opacity .8s ease .7s, transform .8s ease .7s; }
.brawnd-services-manifesto.is-armed .brawnd-services-orbits { transition: opacity 1s ease 1s, transform 1.5s cubic-bezier(.16,1,.3,1) 1s; }
@media (min-width: 761px) and (max-width: 1100px) {
  .brawnd-services-art { width: 88svh; }
  .brawnd-services-note { position: relative; inset: auto; display: inline-block; vertical-align: top; width: 43%; margin-top: 24px; }
  .brawnd-services-note-first { margin-right: 10%; }
  .brawnd-services-orbits { bottom: auto; height: calc(var(--service-statement-size) * 1.96); }
}
@media (min-width: 761px) and (max-height: 700px) {
  .brawnd-services-hero { padding-top: 96px; padding-bottom: 36px; gap: 12px; }
  .brawnd-services-art { width: 86svh; }
  .brawnd-services-note { line-height: 1.4; }

}
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 700px) {
  .brawnd-services-art { width: 66svh; }
}
@media (max-width: 760px) {
  .brawnd-services-hero { min-height: 100svh; padding: 100px 24px 52px; gap: 32px; }
  .brawnd-services-art { width: min(145%, 600px); max-width: none; flex-shrink: 0; }
  .brawnd-services-manifesto { padding: 20px 0 0; }
  .brawnd-services-manifesto { --service-statement-size: clamp(28px, 8.5vw, 58px); }
  .brawnd-services-line-first { margin-left: 0; }
  .brawnd-services-note { position: relative; inset: auto; width: min(100%, 360px); font-size: 13px; }
  .brawnd-services-note-first { margin: 32px 0 18px; }
  .brawnd-services-note-second { margin-left: auto; }
  .brawnd-services-orbits { bottom: auto; height: calc(var(--service-statement-size) * 1.96); }
}
/* Mirrored keyframes keep one circle rising while the other falls. */
.brawnd-services-manifesto.is-revealed .brawnd-services-orbits span {
  animation: brawnd-service-orbit-bob 4.5s ease-in-out 0s infinite both;
  animation-play-state: paused;
}
.brawnd-services-manifesto.is-revealed .brawnd-services-orbits span:last-child { animation-name: brawnd-service-orbit-bob-right; }
.brawnd-services-opening.is-playing + .brawnd-services-manifesto.is-revealed .brawnd-services-orbits span { animation-play-state: running; }
@keyframes brawnd-service-orbit-bob {
  0%, 100% { transform: translateY(calc(-50% + 18px)); }
  50% { transform: translateY(calc(-50% - 18px)); }
}
@keyframes brawnd-service-orbit-bob-right {
  0%, 100% { transform: translateY(calc(-50% - 18px)); }
  50% { transform: translateY(calc(-50% + 18px)); }
}
@media (prefers-reduced-motion: reduce) {
  .brawnd-services-manifesto *, .brawnd-services-illustration * { transition: none !important; animation: none !important; }
  .brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-line,
  .brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-note,
  .brawnd-services-manifesto.is-armed:not(.is-revealed) .brawnd-services-orbits { opacity: 1; transform: none; }
}