/* C v0.2 — first-view prototypes. All visual changes are scoped to .hero. */
.hero[class*="hero--c"] {
  --c-ink: var(--color-primary);
  --c-paper: var(--color-bg-section);
  --c-gold: var(--color-accent);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--c-paper);
  color: var(--c-ink);
  text-align: left;
  padding: 0 !important;
}
.hero .c-hero-grid { max-width: 1680px; margin: auto; position: relative; display: grid; }
.hero .c-title { grid-area: title; min-width: 0; position: relative; z-index: 3; }
.hero .c-text { grid-area: text; min-width: 0; position: relative; z-index: 3; }
.hero .c-actions { grid-area: actions; min-width: 0; position: relative; z-index: 3; }
.hero .c-visual { grid-area: visual; min-width: 0; position: relative; }
.hero .hero__eyebrow { text-align: left; font-size: .75rem; letter-spacing: .09em; margin: 0 0 28px; }
.hero .hero__heading { font-weight: 600; letter-spacing: -.035em; line-height: 1.32; margin: 0; font-feature-settings: "palt"; }
.hero .hero__heading > span { display: block; }
.hero .hero__lead, .hero .hero__supporting { color: #3f4d5c; font-size: 1rem; line-height: 1.95; margin: 0; }
.hero .hero__supporting { margin-top: 18px; }
.hero .hero__cta { justify-content: flex-start; align-items: stretch; gap: 12px; margin: 0 0 22px; }
.hero .hero__cta .btn { border-radius: 2px; font-size: .8125rem; padding: 15px 18px; min-height: 54px; letter-spacing: .02em; }
.hero .hero__audience { color: #596777; font-size: .75rem; line-height: 1.85; letter-spacing: .025em; }
.hero .c-portrait { margin: 0; overflow: hidden; position: relative; background: #d9d8d3; }
.hero .c-portrait img { width: 100%; height: 100%; object-fit: cover; }
.hero .c-art { pointer-events: none; color: var(--c-ink); overflow: visible; }
.hero .art-guide { stroke: var(--c-ink); stroke-width: .7; opacity: .24; }
.hero .art-route { stroke: var(--c-gold); stroke-width: 1.5; }
.hero .art-tick { stroke: var(--c-gold); stroke-width: 1; }
.hero .c1-note rect, .hero .c2-note rect, .hero .edit-sheet rect, .hero .output-sheet rect { fill: #f4f2ec; stroke: #82909b; stroke-width: .9; }
.hero .c1-note path, .hero .c2-note path { stroke: #607486; stroke-width: 1.1; }
.hero .edit-sheet path, .hero .output-sheet path { stroke: var(--c-ink); stroke-width: 1; }
.hero .aligned-lines { stroke: var(--c-gold); stroke-width: 2; }
/* C1: portrait occupies the entire right-hand field; thin marks stay clear of the face. */
.hero--c1 .c-hero-grid {
  padding: 52px 0 52px clamp(32px, 4.5vw, 76px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "title visual" "text visual" "actions visual";
  column-gap: 28px;
  row-gap: 28px;
  align-content: center;
  min-height: 820px;
}
.hero--c1 .hero__heading { font-size: clamp(42px, 4.45vw, 74px); }
.hero--c1 .c-text { max-width: 570px; }
.hero--c1 .c-actions { max-width: 600px; }
.hero--c1 .c-visual { align-self: stretch; margin-top: -20px; margin-bottom: -20px; padding: 20px 0 22px 50px; }
.hero--c1 .c-portrait { height: 100%; min-height: 700px; }
.hero--c1 .c-portrait img { object-position: 53% 48%; transform: scale(1.1); }
.hero--c1 .c-portrait--4381 img { object-position: 52% 50%; }
.hero--c1 .c1-art { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.hero--c1::after { content: ""; position: absolute; height: 1px; bottom: 22px; left: 4.5vw; width: 38%; background: #bca579; }
/* C2: the headline sets the scale; a drawn editorial process is the main visual. */
.hero--c2 .c-hero-grid {
  padding: 50px clamp(28px, 4.5vw, 76px) 46px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "title title" "text visual" "actions visual";
  gap: 32px 48px;
  min-height: 800px;
}
.hero--c2 .hero__eyebrow { display: flex; align-items: center; gap: 18px; }
.hero--c2 .hero__eyebrow::before { content: ""; width: 64px; height: 1px; background: var(--c-gold); flex-shrink: 0; }
.hero--c2 .hero__heading { font-size: clamp(44px, 5.55vw, 88px); line-height: 1.42; padding-bottom: 26px; border-bottom: 1px solid #c6b58f; }
.hero--c2 .c-text { max-width: 570px; }
.hero--c2 .c-visual { min-height: 370px; align-self: stretch; }
.hero--c2 .c-portrait { width: 156px; height: 192px; position: absolute; right: 2%; top: -4px; z-index: 1; }
.hero--c2 .c-portrait img { object-position: 54% 43%; transform: scale(1.15); }
.hero--c2 .c-portrait--4381 img { object-position: 53% 44%; }
.hero--c2 .c2-art { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 2; }
/* Motion grammar: collect separate notes, align into one edited sheet, then deliver.
   No text, CTA or photo animation. One 4.8s pass; no infinite animation. */
.hero:is([data-motion="play"],[data-motion="scrub"]) .c1-note,
.hero:is([data-motion="play"],[data-motion="scrub"]) .c2-note { animation: collect-notes 4800ms cubic-bezier(.22,.61,.36,1) both; }
.hero .note-one { --note-x: -24px; --note-y: -36px; --note-angle: -8deg; }
.hero .note-two { --note-x: -8px; --note-y: 8px; --note-angle: 5deg; }
.hero .note-three { --note-x: -18px; --note-y: 24px; --note-angle: -5deg; }
.hero:is([data-motion="play"],[data-motion="scrub"]) .route-a { animation: collect-route 4800ms ease both; stroke-dasharray: 620; }
.hero:is([data-motion="play"],[data-motion="scrub"]) .edit-sheet { animation: align-sheet 4800ms cubic-bezier(.22,.61,.36,1) both; }
.hero:is([data-motion="play"],[data-motion="scrub"]) .aligned-lines { animation: align-lines 4800ms ease both; }
.hero:is([data-motion="play"],[data-motion="scrub"]) .route-b { animation: deliver-route 4800ms ease both; stroke-dasharray: 500; }
.hero:is([data-motion="play"],[data-motion="scrub"]) .output-sheet { animation: deliver-sheet 4800ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes collect-notes { 0% {transform:translate(var(--note-x),var(--note-y)) rotate(var(--note-angle));} 30%,100% {transform:translate(0,0) rotate(0);} }
@keyframes collect-route { 0%,12% {stroke-dashoffset:620;} 45%,100% {stroke-dashoffset:0;} }
@keyframes align-sheet { 0%,25% {transform:translateY(18px);clip-path:inset(0 0 94% 0);} 62%,100% {transform:translateY(0);clip-path:inset(0);} }
@keyframes align-lines { 0%,32% {transform:translateX(-18px);stroke-dasharray:10 7;} 65%,100% {transform:translateX(0);stroke-dasharray:110 0;} }
@keyframes deliver-route { 0%,56% {stroke-dashoffset:500;} 90%,100% {stroke-dashoffset:0;} }
@keyframes deliver-sheet { 0%,65% {transform:translateX(-16px);clip-path:inset(0 100% 0 0);} 100% {transform:translateX(0);clip-path:inset(0);} }
.hero[data-motion="scrub"] * { animation-play-state: paused !important; animation-delay: var(--c-time, 0ms) !important; }
.hero[data-motion="still"] *, .hero[data-motion="reduced"] * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero[class*="hero--c"] * { animation: none !important; transition: none !important; }
}
@media (min-width: 1680px) { .hero--c1 .c-visual { padding-right: 40px; } }
@media (max-width: 999px) {
  .hero--c1 .c-hero-grid { padding: 38px 24px 44px; grid-template-columns: minmax(0,1fr); grid-template-areas: "title" "visual" "text" "actions"; gap: 26px; min-height: 0; }
  .hero--c1 .hero__heading { font-size: clamp(34px,5.8vw,54px); }
  .hero--c1 .c-visual { width: min(100%,580px); margin: 0 auto; height: 400px; padding: 0 0 0 24px; }
  .hero--c1 .c-portrait { height: 100%; min-height: 0; }
  .hero--c1 .c-portrait img { object-position: 54% 42%; }
  .hero--c1 .c1-art { width: 100%; height: 100%; }
  .hero--c1 .c-text, .hero--c1 .c-actions { max-width: none; }
  .hero--c1::after { bottom: 16px; left: 24px; width: calc(100% - 48px); }
  .hero--c2 .c-hero-grid { padding: 36px 24px 44px; grid-template-columns: minmax(0,1fr); grid-template-areas: "title" "text" "visual" "actions"; gap: 24px; min-height: 0; }
  .hero--c2 .hero__heading { font-size: clamp(34px,6vw,58px); }
  .hero--c2 .c-visual { min-height: 0; height: 320px; max-width: 600px; width: 100%; margin: auto; }
  .hero--c2 .c-text { max-width: none; }
}
@media (max-width: 599px) {
  .hero .hero__eyebrow { font-size: .6875rem; line-height: 1.8; margin-bottom: 18px; letter-spacing: .02em; }
  .hero .hero__lead, .hero .hero__supporting { font-size: .9375rem; line-height: 1.9; }
  .hero .hero__supporting { margin-top: 16px; }
  .hero .hero__cta { flex-direction: column; }
  .hero .hero__cta .btn { width: 100%; }
  .hero--c1 .c-hero-grid, .hero--c2 .c-hero-grid { padding-inline: 22px; }
  .hero--c1 .hero__heading { font-size: clamp(28px,8.4vw,40px); line-height: 1.45; }
  .hero--c1 .c-visual { height: 282px; padding-left: 28px; }
  .hero--c1 .c-portrait img { object-position: 54% 40%; transform: scale(1.06); }
  .hero--c1 .c1-art { width: 210px; height: 305px; inset: -11px auto auto -12px; }
  .hero--c1 .c-text { margin-top: 6px; }
  .hero--c2 .hero__heading { font-size: clamp(29px,8.4vw,42px); line-height: 1.5; padding-bottom: 22px; }
  .hero--c2 .hero__eyebrow::before { width: 26px; }
  .hero--c2 .hero__eyebrow { gap: 10px; }
  .hero--c2 .c-visual { height: 256px; }
  .hero--c2 .c-portrait { width: 114px; height: 145px; right: 0; top: 0; }
  .hero--c2 .c2-art { bottom: 0; }
}
/* Keep the destination phrase together; tighten the portrait-led desktop composition. */
.hero .c-word { display: inline-block; white-space: nowrap; }
@media (min-width: 1000px) {
  .hero--c1 .c-hero-grid { min-height: 820px; grid-template-rows: min-content min-content min-content; }
  .hero--c1 .c-visual { position: absolute; grid-area: auto; width: 46.5%; top: 32px; bottom: 32px; right: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
  .hero--c1 .c-portrait { min-height: 0; }
  .hero--c1 .c-portrait img { transform: scale(1.16); }
}