/* Terrapilgrim AI hybrid, ROUND 3 (Oct 23, 2026, Terra 11:51 to 11:53 AM PT). PREVIEW ONLY: linked only when build.py runs with R3=1 and not LIVE, so gen_live_hybrid.py never ships it.
   1) compass above the motto: smaller and 30% opacity (home page only), 2) framed paintings: symmetric shadow, dot corners centered on the outline, caption spacing, "How we stay human" figure vertically centered against its taller column,
   3) painting captions exactly 2pt smaller (17px - 2.667px = 14.333px). */

/* 1) Compass (decorative CSS background on .wrap::before, not in the accessibility tree). 168px -> 100px, phone 128px -> 77px, opacity .3 on the compass only (text untouched). */
body.hy.hy-home .motto-band .wrap::before{width:100px;height:100px;margin:0 auto 24px;opacity:.3}
@media(max-width:640px){body.hy.hy-home .motto-band .wrap::before{width:77px;height:77px;margin:0 auto 18px}}

/* 2) Framed paintings (shared figure.art .frame): even soft shadow all round, ring nodes sit on the corners of the gold outline, caption clear of the outline */
html body.hy figure.art .frame{box-shadow:0 0 26px 0 rgba(23,32,27,.13);box-sizing:border-box}
html body.hy figure.art .frame img{display:block;width:100%;height:auto}
html body.hy figure.art .frame::before{inset:-11.5px}
html body.hy figure.art figcaption{margin-top:20px;padding:0}
@media(min-width:641px){html body.hy #human figure.art{align-self:center}}

/* 3) Captions: 2pt smaller than before (17px -> 14.333px), all painting captions on every page (the .sample captions on the kit page are labels, not painting captions, and are unchanged) */
html body.hy:not(#r3) figure.art figcaption{font-size:14.333px;line-height:1.4}   /* :not(#r3) lifts specificity above the hybrid.css :is(#human ...) caption rule */

/* 4) Slow painting drift (Terra, Oct 23, 11:57 AM PT). Only the image moves: scale 1 to 1.04 with a translate of at most 1% (always inside the 2% the scale adds on each side), clipped by .kb (overflow hidden)
   so the mat, gold outline, ring nodes, shadow and caption stay still. Each painting has its own duration and direction. Off screen = paused (small script). Reduced motion = no animation at all. */
html body.hy figure.art .frame .kb{display:block;overflow:hidden;line-height:0}
@keyframes kbA{from{transform:scale(1) translate(0,0)}to{transform:scale(1.04) translate(-1%,-.8%)}}
@keyframes kbB{from{transform:scale(1) translate(0,0)}to{transform:scale(1.04) translate(1%,-.8%)}}
@keyframes kbC{from{transform:scale(1) translate(0,0)}to{transform:scale(1.04) translate(-.8%,1%)}}
@keyframes kbD{from{transform:scale(1) translate(0,0)}to{transform:scale(1.04) translate(.8%,.8%)}}
@media(prefers-reduced-motion:no-preference){
  html body.hy figure.art .frame .kb img{will-change:transform;transform-origin:50% 50%;animation:kbA 34s ease-in-out infinite alternate}
  html body.hy figure.art .frame .kb img[src*="geographer"]{animation-name:kbA;animation-duration:34s}
  html body.hy figure.art .frame .kb img[src*="courtyard"]{animation-name:kbB;animation-duration:38s}
  html body.hy figure.art .frame .kb img[src*="metsu"]{animation-name:kbC;animation-duration:36s}
  html body.hy figure.art .frame .kb img[src*="gisze"]{animation-name:kbD;animation-duration:40s}
  html body.hy figure.art .frame .kb img[src*="addon-marketing"]{animation-name:kbA;animation-duration:37s}
  html body.hy figure.art .frame .kb img[src*="addon-project-management"]{animation-name:kbB;animation-duration:32s}
  html body.hy figure.art .frame .kb img[src*="addon-it-support"]{animation-name:kbD;animation-duration:33s}
  html body.hy figure.art .frame .kb img[src*="addon-consultants-coaches"]{animation-name:kbC;animation-duration:35s}
  html body.hy figure.art.kb-off .frame .kb img{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){html body.hy figure.art .frame .kb img{animation:none!important;transform:none!important;will-change:auto}}

/* 5) Services ("Five ways we help", home page only; .svc is not used on any other page): subtle brand green (Terra, Oct 23, 12:00 PM PT). Gold numerals and gold hairlines unchanged. */
html body.hy .svc .card:nth-child(1) .svc-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%230f5132' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Ccircle cx='22' cy='26' r='15'/%3E%3Ccircle cx='22' cy='26' r='6'/%3E%3Cpath d='M22 7v6M22 39v6M3 26h6M35 26h6'/%3E%3Cpath d='M22 26L36 12'/%3E%3Ccircle cx='36' cy='12' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='22' cy='26' r='1.3' fill='%230f5132' stroke='none'/%3E%3C/svg%3E")}
html body.hy .svc .card:nth-child(2) .svc-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%230f5132' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Cpath d='M24 8L40 36H8Z'/%3E%3Cpath d='M24 8L24 24M24 24L8 36M24 24L40 36'/%3E%3Ccircle cx='24' cy='8' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='40' cy='36' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='8' cy='36' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='24' cy='24' r='1.6' fill='%230f5132' stroke='none'/%3E%3C/svg%3E")}
html body.hy .svc .card:nth-child(3) .svc-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%230f5132' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Ccircle cx='21' cy='21' r='13'/%3E%3Cpath d='M31 31L43 43'/%3E%3Cpath d='M14 24L20 16L28 22'/%3E%3Ccircle cx='14' cy='24' r='2' fill='%23fbf9f3'/%3E%3Ccircle cx='20' cy='16' r='2' fill='%23fbf9f3'/%3E%3Ccircle cx='28' cy='22' r='2' fill='%23fbf9f3'/%3E%3C/svg%3E")}
html body.hy .svc .card:nth-child(4) .svc-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%230f5132' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Cpath d='M40 7C27 9 15 19 12 35L8 41L14 38C30 36 40 24 40 7Z'/%3E%3Cpath d='M12 35L30 17'/%3E%3Cpath d='M8 44H30'/%3E%3Ccircle cx='36' cy='44' r='2.6' fill='%23fbf9f3'/%3E%3C/svg%3E")}
html body.hy .svc .card:nth-child(5) .svc-head::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48' fill='none' stroke='%230f5132' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'%3E%3Cpath d='M7 7V41H43'/%3E%3Cpath d='M12 33L21 23L29 28L40 12'/%3E%3Ccircle cx='12' cy='33' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='21' cy='23' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='29' cy='28' r='2.6' fill='%23fbf9f3'/%3E%3Ccircle cx='40' cy='12' r='2.6' fill='%23fbf9f3'/%3E%3C/svg%3E")}
html body.hy .svc .card:nth-child(n+2)::before{border-color:#0f5132}
html body.hy .svc .card.cta-cell{background:#eaede5}
html body.hy .svc .card.cta-cell p.eyebrow{color:#0f5132}
/* card heading: green shift and a thin green underline on hover and on keyboard focus inside the card (the Get in touch button) */
html body.hy .svc .card:not(.cta-cell) h3{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s,text-decoration-color .2s}
html body.hy .svc .card:not(.cta-cell):hover h3,html body.hy .svc .card:not(.cta-cell):focus-within h3{color:#0f5132;text-decoration-color:#0f5132}
@media(prefers-reduced-motion:reduce){html body.hy .svc .card h3{transition:none}}