/* C2-C: photo-free editorial graphic; typography and CTA inherit adopted C2. */
.hero--c2-c .c-hero-grid { max-width: 1680px; }
.hero--c2-c .c2c-visual { isolation: isolate; min-height: 390px; }
.hero--c2-c .c2c-field {
  position: absolute; z-index: -1; pointer-events: none;
  inset: -30px -5vw -36px 8%;
  background: radial-gradient(ellipse at 65% 50%, #e7e7e1 0, #eeeee8 40%, transparent 73%);
}
.hero--c2-c .c2c-art { position: absolute; inset: 50% auto auto 0; width: calc(100% + 2.5vw); height: auto; transform: translateY(-50%); }
.hero--c2-c .c2c-art--mobile { display: none; }
.hero--c2-c .c2c-guide { stroke: #1e3a5f; stroke-width: .65; opacity: .12; }
.hero--c2-c .c2c-label { fill: #596777; font: 500 13px var(--font-sans); letter-spacing: .14em; }
.hero--c2-c .c2c-label-rule { stroke: #b49a68; stroke-width: 1; }
.hero--c2-c .c2c-depth rect { fill: #ecebe4; stroke: #c4c9c8; stroke-width: .8; }
.hero--c2-c .c2c-output-back { fill: #ecebe4; stroke: #c4c9c8; }
.hero--c2-c .c2-note rect { fill: #faf9f5; stroke: #a4afb5; }
.hero--c2-c .edit-sheet rect { fill: #faf9f5; stroke: #687d8c; stroke-width: 1.1; }
.hero--c2-c .output-sheet rect { fill: #faf9f5; stroke: #82909b; }
.hero--c2-c .c2c-accent { stroke: #a8864a; stroke-width: 2; }
.hero--c2-c .art-route { stroke: #b49a68; stroke-width: 1.4; }
.hero--c2-c .aligned-lines { stroke: #b49a68; stroke-width: 1.8; }
.hero--c2-c .c2c-pivots { fill: #c9a86a; }
.hero--c2-c .note-one { --note-x: -16px; --note-y: -12px; --note-angle: -4deg; }
.hero--c2-c .note-two { --note-x: -24px; --note-y: 4px; --note-angle: 3deg; }
.hero--c2-c .note-three { --note-x: -18px; --note-y: 16px; --note-angle: -3deg; }
.hero--c2-c:is([data-motion="play"],[data-motion="scrub"]) .note-two { animation-name: c2c-collect-two; }
.hero--c2-c:is([data-motion="play"],[data-motion="scrub"]) .note-three { animation-name: c2c-collect-three; }
@keyframes c2c-collect-two { 0%,5% {transform:translate(var(--note-x),var(--note-y)) rotate(var(--note-angle));} 36%,100% {transform:translate(0,0) rotate(0);} }
@keyframes c2c-collect-three { 0%,10% {transform:translate(var(--note-x),var(--note-y)) rotate(var(--note-angle));} 42%,100% {transform:translate(0,0) rotate(0);} }
/* After the one-time assembly, two small accents follow existing connector paths.
   Each 10s cycle includes a quiet interval; sheets, text and background stay still. */
.hero--c2-c[data-motion-state="complete"] :is(.c2-note,.art-route,.edit-sheet,.aligned-lines,.output-sheet) {
  animation: none !important;
}
.hero--c2-c .c2c-flow-light {
  fill: none;
  stroke: #a8864a;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: .001 2;
  stroke-dashoffset: 0;
  opacity: 0;
}
.hero--c2-c[data-motion="play"][data-motion-state="complete"] .c2c-flow-light {
  animation: c2c-quiet-flow 10s linear infinite both;
}
.hero--c2-c[data-motion="play"][data-motion-state="complete"] .c2c-flow-light--output {
  animation-delay: 4s;
}
@keyframes c2c-quiet-flow {
  0% { stroke-dashoffset: 0; opacity: 0; }
  6% { opacity: .58; }
  32% { opacity: .58; }
  40%,100% { stroke-dashoffset: -1; opacity: 0; }
}
/* Offscreen work pauses without scroll listeners or per-frame JavaScript. */
.hero--c2-c[data-suspended="true"] * { animation-play-state: paused !important; }
.hero--c2-c[data-flow-suspended="true"] .c2c-flow-light { animation-play-state: paused !important; }
@media (min-width: 600px) {
  .hero--c2-c .c2c-art--mobile .c2c-flow-light { animation: none !important; }
}
@media (max-width: 999px) {
  .hero--c2-c .c2c-visual { min-height: 0; height: 356px; max-width: 640px; }
  .hero--c2-c .c2c-art { width: 100%; }
  .hero--c2-c .c2c-field { inset: -15px -15vw -18px -15vw; }
}
@media (max-width: 599px) {
  .hero--c2-c .c2c-art--desktop .c2c-flow-light { animation: none !important; }
  .hero--c2-c .c2c-visual { height: auto; aspect-ratio: 360 / 322; }
  .hero--c2-c .c2c-art--desktop { display: none; }
  .hero--c2-c .c2c-art--mobile { display: block; width: 100%; }
  .hero--c2-c .c2c-label { font-size: 14px; letter-spacing: .08em; }
  .hero--c2-c .c2c-field { inset: -8px -22px -8px 0; opacity: .65; }
  .hero--c2-c .note-one { --note-x: -5px; --note-y: -6px; --note-angle: -2deg; }
  .hero--c2-c .note-two { --note-x: 0px; --note-y: -9px; --note-angle: 2deg; }
  .hero--c2-c .note-three { --note-x: 5px; --note-y: -6px; --note-angle: -2deg; }
}
@media (max-width: 359px) {
  /* Retain the C2 scale while avoiding an isolated character at the narrowest width. */
  .hero--c2-c .hero__heading { font-size: clamp(25px,8.1vw,29px); }
  .hero--c2-c .c-hero-grid { padding-inline: 18px; }
  .hero--c2-c .hero__eyebrow { font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--c2-c * { animation: none !important; transition: none !important; }
}