/* =============================================================================
   themes/rhythmandcardiac.css — Rhythm & Cardiac Specialists case study
   -----------------------------------------------------------------------------
   Art direction: "the rhythm". Paper and ink, steady and clinical. One
   continuous pulse line is drawn across the opening (stroke animation), and the
   channels sit on it like beats — because the story is seven years of steady,
   measured marketing rather than one big moment.
   ============================================================================= */

.rc-hero { padding-bottom: 0; }
.rc-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px clamp(16px, 2.6vw, 44px); align-items: end; }
.rc-hero__id { grid-column: 1 / span 8; }
.rc-hero__plate { grid-column: 10 / span 3; justify-self: end; }
.rc-hero__plate .org-plate { width: clamp(180px, 18vw, 250px); padding: 18px 22px; box-shadow: 0 1px 2px rgba(18, 16, 21, .14), 0 14px 30px rgba(18, 16, 21, .08); }
@media (max-width: 760px) { .rc-hero__id, .rc-hero__plate { grid-column: 1 / -1; justify-self: start; } }

/* The pulse — one stroke across the full width */
.pulse { position: relative; margin-top: clamp(40px, 6vw, 80px); }
.pulse svg { width: 100%; height: clamp(110px, 14vw, 200px); color: var(--sumi); overflow: visible; }
.pulse path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s cubic-bezier(.5, 0, .2, 1); }
.pulse.is-visible path { stroke-dashoffset: 0; }
html.calm .pulse path { transition: none; stroke-dashoffset: 0; }

/* Channels as beats along the line */
.beats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--sumi); }
.beats li { padding: 16px 14px 20px 0; display: grid; gap: 6px; align-content: start; }
.beats li + li { padding-left: 14px; border-left: 1px solid var(--rule); }
.beats li:nth-child(4n+1) { padding-left: 0; border-left: 0; }
.beats li:nth-child(n+5) { border-top: 1px solid var(--rule); }
.beats .numeral { font-size: 1.2rem; }
.beats h3 { font-size: 1.35rem; line-height: 1.1; }
.beats p { font-size: 1.02rem; color: var(--text-soft); line-height: 1.38; }
@media (max-width: 1000px) { .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .beats li:nth-child(4n+1) { padding-left: 14px; border-left: 1px solid var(--rule); } .beats li:nth-child(3n+1) { border-left: 0; padding-left: 0; } .beats li { border-bottom: 1px solid var(--rule); border-top: 0 !important; } }
@media (max-width: 600px) { .beats { grid-template-columns: 1fr; } .beats li:nth-child(n) { border-left: 0; padding-left: 0; } }

/* Seven-year strip */
.years { display: flex; flex-wrap: wrap; border-top: 1.5px solid var(--sumi); border-bottom: 1px solid var(--rule); }
.years span { flex: 1 1 80px; padding: 12px 8px; text-align: center; font-size: 1.1rem; font-variant-numeric: lining-nums; }
.years span + span { border-left: 1px solid var(--rule); }
.years span:last-child { font-style: italic; }


/* ---- The world: the practice's navy, ECG paper and its heartbeat ------------
   Navy #002A4E, red #C04236 and rose #D29C96, from the practice's logo. The
   pulse line is drawn in rose with a red glow, then beats (lub-dub, rest). */
.world--rc {
  --rc-navy: #002A4E;
  --rc-red: #C04236;
  --rc-rose: #D29C96;
  background:
    linear-gradient(rgba(210, 156, 150, .13) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(210, 156, 150, .13) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(rgba(210, 156, 150, .055) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgba(210, 156, 150, .055) 1px, transparent 1px) 0 0 / 12px 12px,
    radial-gradient(60vw 60vh at 70% 30%, #0B3A66, transparent 70%),
    var(--rc-navy);
}
.world--rc .pulse svg { color: var(--rc-rose); filter: drop-shadow(0 0 6px rgba(192, 66, 54, .95)) drop-shadow(0 0 18px rgba(192, 66, 54, .5)); }
.world--rc .rc-hero__plate .org-plate { box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .world--rc .pulse.is-visible svg { animation: rc-beat 1.15s ease-out 3.2s infinite; }
}
@keyframes rc-beat { 0% { opacity: .7; } 12% { opacity: 1; } 24% { opacity: .78; } 36% { opacity: .96; } 60%, 100% { opacity: .7; } }