/* ═══════════════════════════════════════════════════
   OCTARINE — rotator.css  (homepage services rotator)
   Pinned scroll: .rot is tall, .rot-stage is sticky, so the page
   holds still while the dial (left quarter) turns and the panel
   (right three quarters) swaps. Below 800px, or with reduced
   motion, it falls back to a plain stacked list.
   Markup: the .rot section in /index.php   Script: /assets/js/rotator.js
═══════════════════════════════════════════════════ */
.rot {
  --n: 5; --mark: clamp(64px, 6.2vw, 92px); --R: calc(var(--mark) / 2 + clamp(40px, 3.8vw, 60px));
  --rot-h: clamp(440px, 58vh, 540px);                           /* the pinned stage is only as tall as its content */
  --stick: max(110px, calc((100vh - var(--rot-h)) / 2));         /* it pins centred in the viewport, clear of the header */
  position: relative; z-index: 2; box-sizing: border-box;
  padding: var(--section-half) 0;                                 /* same gap as every other section */
  height: calc(var(--rot-h) + (var(--n) - 1) * 32vh + var(--section-gap));
}
.rot-stage {
  position: sticky; top: var(--stick); height: var(--rot-h);
  display: grid; grid-template-columns: 1fr 3fr; gap: 0 4rem; align-items: center;
  max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter);
}

/* ── Dial (left quarter). The wheel's origin sits on the mark's centre;
   each label is rotated about that point and pushed out along its radius. ── */
.rot-dial { position: relative; height: 100%; }
.rot-wheel { position: absolute; left: calc(var(--mark) / 2); top: 50%; width: 0; height: 0; }
.rot-mark { position: absolute; left: 0; top: 0; width: var(--mark); max-width: none; height: auto; transform: translate(-50%, -50%); }
.rot-item {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  transform: rotate(var(--a, 0deg)) translate(var(--R), -50%);
  font-family: var(--font-heading); font-weight: 300; font-size: clamp(22px, 2.1vw, 30px); line-height: 1; white-space: nowrap;
  color: var(--section-text); background: transparent; border: 0; border-radius: 10px;
  padding: 0.25rem 0.5rem; cursor: pointer; opacity: var(--o, 0);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  will-change: transform, opacity;
}
/* Selected label: brand orange, no box. Day uses the deeper orange from the brand gradient (3.4:1 on cream) because pure #FF6B02 is too faint on light. */
.rot-item[aria-selected="true"] { color: #d25a28; }
body[data-theme="dusk"] .rot-item[aria-selected="true"] { color: var(--brand-orange); }
.rot-item:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

/* ── Panels (right three quarters) ── */
.rot-panels { position: relative; height: 100%; }
.rot-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.5s;
}
.rot-panel.is-active { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.rot-copy { position: relative; z-index: 1; max-width: 62rem; padding-left: clamp(2rem, 5.5vw, 5.5rem); }
.rot-count { font-family: var(--font-nav); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--section-eyebrow); margin: 0 0 1.5rem; }
.rot-title { font-family: var(--font-heading); font-weight: 300; font-size: var(--h2); line-height: var(--leading-heading); letter-spacing: -0.02em; color: var(--section-text-strong); margin: 0 0 1.5rem; }
.rot-lead { font-family: var(--font-body); font-weight: 300; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--section-text-strong); margin: 0 0 1.25rem; max-width: 46ch; }
.rot-text { font-family: var(--font-body); font-weight: 300; font-size: var(--p); line-height: var(--leading); color: var(--section-text); margin: 0 0 2rem; max-width: 68ch; }

/* ── Static fallback: phones and reduced motion ── */
@media (max-width: 800px), (prefers-reduced-motion: reduce) {
  .rot { height: auto; padding: 0; }
  .rot-stage { position: static; height: auto; display: block; padding: 3rem 1.25rem; }
  .rot-dial { display: none; }
  .rot-panels { height: auto; }
  .rot-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 3rem 0; border-top: 1px solid var(--rule); overflow: visible; }
  .rot-panel:first-child { border-top: 0; }
}
/* Phones: the services rotator is left out entirely. */
@media (max-width: 800px) {
  .rot { display: none; }
}
@media (max-width: 800px) {
  .rot-panel { padding: 2.25rem 0; }
  .rot-copy { padding-left: 0; }
  .rot-title { font-size: var(--h3); }
}