/* Home services — "rethinQ OS for the trades" interactive graphic (#rethinq-os).
   Points are <details name="rq-os"> so they work without JS and only one opens at a time.
   Section background matches the illustration's off-white so the image has no visible edge. */
.rq-home-services-page section.rq-os { background: #FDFBF8; }
.rq-home-services-page .rq-os .block-note { margin-bottom: 0; }
.rq-home-services-page .rq-os .rq-stage { position: relative; }
.rq-home-services-page .rq-os .rq-art-box { overflow: hidden; }
.rq-home-services-page .rq-os .rq-art { display: block; width: 100%; height: auto; }
.rq-home-services-page .rq-os .rq-line { stroke: #B9B2D6; stroke-width: 2.5; fill: none; transition: stroke 0.2s; }
.rq-home-services-page .rq-os .rq-screen { fill: none; stroke: transparent; stroke-width: 8; transition: stroke 0.2s; }
.rq-home-services-page .rq-os .rq-badge circle { fill: var(--deep-purple); transition: fill 0.2s; }
.rq-home-services-page .rq-os .rq-badge text { fill: var(--paper); font: 700 22px var(--font-body); }

/* highlight the open point's own line, its screen and the screen number */
.rq-home-services-page .rq-os .rq-stage:has([data-pt="1"][open]) .l1,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="2"][open]) .l2,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="3"][open]) .l3,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="4"][open]) .l4,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="5"][open]) .l5,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="6"][open]) .l6,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="7"][open]) .l7,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="8"][open]) .l8,
.rq-home-services-page .rq-os .rq-stage:has([data-pt="9"][open]) .l9,
.rq-home-services-page .rq-os .rq-stage:has([data-screen="1"][open]) .m1 .rq-screen,
.rq-home-services-page .rq-os .rq-stage:has([data-screen="2"][open]) .m2 .rq-screen,
.rq-home-services-page .rq-os .rq-stage:has([data-screen="3"][open]) .m3 .rq-screen { stroke: var(--crimson); }
.rq-home-services-page .rq-os .rq-stage:has([data-screen="1"][open]) .m1 .rq-badge circle,
.rq-home-services-page .rq-os .rq-stage:has([data-screen="2"][open]) .m2 .rq-badge circle,
.rq-home-services-page .rq-os .rq-stage:has([data-screen="3"][open]) .m3 .rq-badge circle { fill: var(--crimson); }

.rq-home-services-page .rq-os .rq-group-title { font-family: var(--font-display); color: var(--deep-purple); font-size: 20px; font-weight: 500; margin: 28px 0 10px; display: flex; align-items: center; gap: 10px; }
.rq-home-services-page .rq-os .rq-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--deep-purple); color: var(--paper); font: 700 13px var(--font-body); flex: none; }
.rq-home-services-page .rq-os details { background: #fff; border: 1px solid var(--hairline); border-radius: 999px; margin: 0 0 10px; }
.rq-home-services-page .rq-os details[open] { border-radius: 14px; border-color: var(--crimson); box-shadow: var(--shadow-lift); }
.rq-home-services-page .rq-os summary { list-style: none; cursor: pointer; padding: 11px 18px; font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--deep-purple); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rq-home-services-page .rq-os summary::-webkit-details-marker { display: none; }
.rq-home-services-page .rq-os .rq-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--crimson); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rq-home-services-page .rq-os .rq-label { flex: 1; }
.rq-home-services-page .rq-os summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--crimson); transition: transform 0.2s; }
.rq-home-services-page .rq-os details[open] summary::after { transform: rotate(45deg); }
.rq-home-services-page .rq-os summary:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; border-radius: 999px; }
.rq-home-services-page .rq-os details p { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }

/* Desktop: points float around the illustration, each joined to its screen by its own line.
   Opening a point grows its box downwards and wider, with the label staying put. Points are placed so an open
   box never fully covers a neighbour. The height animates to auto where interpolate-size is supported and to
   an assumed height (--h, set per point in body.html) elsewhere; browsers without ::details-content just open. */
@media (min-width: 880px) {
  .rq-home-services-page .rq-os .rq-group { display: contents; }
  .rq-home-services-page .rq-os .rq-group-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .rq-home-services-page .rq-os details { position: absolute; --w0: clamp(182px, 15vw, 205px); width: var(--w0); transform: translate(calc(var(--w0) / -2), -22px); margin: 0; z-index: 1; border-color: #CFCBD9; border-radius: 22px; transition: width 0.3s var(--ease), border-radius 0.3s var(--ease), border-color 0.2s, box-shadow 0.3s var(--ease); }
  .rq-home-services-page .rq-os details[open] { z-index: 3; width: 270px; border-radius: 14px; border-color: var(--crimson); box-shadow: 0 0 0 1.5px var(--crimson), var(--shadow-lift); }
  .rq-home-services-page .rq-os details:not([open]):hover { border-color: var(--crimson); }
  .rq-home-services-page .rq-os details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete; }
  .rq-home-services-page .rq-os details[open]::details-content { block-size: var(--h, 140px); }
  /* Email, SMS and Call recording sit above other points, so they open upwards over their own screen: the label stays put at the bottom */
  .rq-home-services-page .rq-os details[data-open="up"] { display: flex; flex-direction: column-reverse; }
  /* the label stays where it is while the box grows rightwards */
  .rq-home-services-page .rq-os details[data-open="up"][open] { transform: translate(calc(var(--w0) / -2), calc(-100% + 22px)); }
  .rq-home-services-page .rq-os details[data-open="up"] p { padding: 14px 18px 2px; }
  .rq-home-services-page .rq-os details p { width: 270px; opacity: 0; transition: opacity 0.2s ease 0.1s; }
  .rq-home-services-page .rq-os details[open] p { opacity: 1; }
}
@supports (interpolate-size: allow-keywords) {
  @media (min-width: 880px) {
    .rq-home-services-page .rq-os { interpolate-size: allow-keywords; }
    .rq-home-services-page .rq-os details[open]::details-content { block-size: auto; }
  }
}
@media (min-width: 880px) and (max-width: 1199px) {
  .rq-home-services-page .rq-os summary { padding: 10px 14px; gap: 8px; font-size: 14px; }
}
/* Mobile: illustration on top (empty sky trimmed), points listed by screen underneath */
@media (max-width: 879px) {
  .rq-home-services-page .rq-os .rq-line { display: none; }
  .rq-home-services-page .rq-os .rq-art { margin-top: -14%; }
  .rq-home-services-page .rq-os details,
  .rq-home-services-page .rq-os details[open] { border-radius: 12px; }
}

/* "The coordination tax" intro spans the full section width (CJ, Alluv review) */
.rq-home-services-page section[data-screen-label="The Coordination Tax"] .block-note { max-width: none; }

/* "Try the AI receptionist" call band (#try-ai-receptionist), same layout as on /rethinq-os.
   Lavender here, not dark, because the next section on this page is already dark. */
.rq-home-services-page section.rq-call { padding: 44px 0; }
.rq-home-services-page .rq-call-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; }
.rq-home-services-page .rq-call .block-title { margin-bottom: 10px; }
.rq-home-services-page .rq-call .block-note { margin: 0; max-width: 560px; }
.rq-home-services-page .rq-call-act { flex: none; text-align: center; }
.rq-home-services-page .rq-call .btn-primary svg { width: 18px; height: 18px; }
.rq-home-services-page .rq-call-num { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 879px) {
  .rq-home-services-page .rq-call-wrap { flex-direction: column; align-items: flex-start; }
  .rq-home-services-page .rq-call-act { text-align: left; }
}
/* the number in the AI Receptionist point */
.rq-home-services-page .rq-os details p a { color: var(--crimson); white-space: nowrap; }