/* V1.34 - lightweight shared motion; all animation is visual-only */
/* Circular links are always recognisable, including when animation is disabled. */
.circle-arrow{position:relative;isolation:isolate;overflow:visible;transition:color .2s ease,background-color .2s ease,transform .2s ease}
.circle-arrow::after{content:"";position:absolute;inset:-1px;border:2px solid var(--olive,#65733e);border-radius:50%;pointer-events:none;border-left-color:transparent;border-bottom-color:transparent;animation:dh-orbit 3.2s linear infinite}
.text-link:hover .circle-arrow,.text-link:focus-visible .circle-arrow,a:hover>.circle-arrow,a:focus-visible>.circle-arrow{transform:translateX(2px);background:rgba(101,115,62,.1)}
.text-link:focus-visible,.circle-arrow:focus-visible{outline:2px solid var(--olive,#65733e);outline-offset:4px}
@keyframes dh-orbit{to{rotate:360deg}}
/* On near-black surfaces the trace uses the same soft olive as the existing brand accents. */
.contact .circle-arrow::after{border-top-color:#b6bca1;border-right-color:#b6bca1}
/* Fade is applied only to editorial blocks, not to forms or interactive controls. */
.dh-motion-ready [data-motion-reveal]:not(.dh-in-view){opacity:0;transform:translateY(15px)}
[data-motion-reveal]{transition:opacity .58s ease-out,transform .58s cubic-bezier(.2,.8,.2,1)}
/* Character opacity-only animation keeps layout, line wrapping and heights stable. */
.dh-type-char{opacity:0;animation:dh-char-in .12s ease-out forwards;animation-delay:var(--dh-char-delay,0ms)}
@keyframes dh-char-in{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.circle-arrow::after{animation:none!important;border-left-color:var(--olive,#65733e);border-bottom-color:var(--olive,#65733e);opacity:.4}.dh-type-char{animation:none!important;opacity:1!important}.dh-motion-ready [data-motion-reveal]:not(.dh-in-view){opacity:1!important;transform:none!important}[data-motion-reveal]{transition:none!important}}

/* V1.36.2 unified circular-arrow interactive treatment across the entire website */
.circle-arrow{transform:none!important;rotate:0deg!important;transition:background-color .22s ease,color .22s ease,box-shadow .22s ease!important}
a:hover .circle-arrow,a:focus-visible .circle-arrow,button:hover .circle-arrow,button:focus-visible .circle-arrow,.resource-row:hover .circle-arrow,.resource-row:focus-within .circle-arrow{transform:none!important;rotate:0deg!important;background:rgba(101,115,62,.12);color:var(--olive,#65733e)}
/* The visible arrow glyph is changed by CSS so the hover motion is consistent and requires no JS. */
.circle-arrow{font-size:0!important}
.circle-arrow::before{content:'↗';font-family:Arial,sans-serif;font-size:19px;font-weight:300;line-height:1;display:block;transform:none;transition:opacity .18s ease,color .18s ease}
a:hover .circle-arrow::before,a:focus-visible .circle-arrow::before,button:hover .circle-arrow::before,button:focus-visible .circle-arrow::before,.resource-row:hover .circle-arrow::before,.resource-row:focus-within .circle-arrow::before{content:'→';font-size:21px}
@media(prefers-reduced-motion:reduce){.circle-arrow,.circle-arrow::before{transition:none!important}}

/* V1.36.3: ONE compact arrow shape, same dimensions in both directions. */
.circle-arrow{background-color:transparent;transition:background-color .22s ease,color .22s ease!important}
.circle-arrow::before{content:""!important;display:block;width:19px;height:19px;flex:none;background-repeat:no-repeat;background-position:center;background-size:19px 19px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10m-4-4 4 4-4 4' fill='none' stroke='%23222321' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 transform:rotate(-45deg)!important;transform-origin:center;transition:transform .22s ease,filter .22s ease!important}
a:hover .circle-arrow,a:focus-visible .circle-arrow,button:hover .circle-arrow,button:focus-visible .circle-arrow,.resource-row:hover .circle-arrow,.resource-row:focus-within .circle-arrow{background-color:#39442f!important;color:#fff!important;box-shadow:none!important}
a:hover .circle-arrow::before,a:focus-visible .circle-arrow::before,button:hover .circle-arrow::before,button:focus-visible .circle-arrow::before,.resource-row:hover .circle-arrow::before,.resource-row:focus-within .circle-arrow::before{content:""!important;transform:rotate(0deg)!important;filter:brightness(0) invert(1)}
@media(prefers-reduced-motion:reduce){.circle-arrow::before{transition:none!important}}

/* V1.37.1 — Dark-section arrow contrast: keep the V1.36.3 short-tail icon
   and hover rotation, but render the arrow in white before hover as well.
   Scoped to charcoal CTA sections so light-background links remain unchanged. */
.project-enquire .circle-arrow::before,
.contact .circle-arrow::before,
.about-contact .circle-arrow::before,
.toolkit-cta .circle-arrow::before {
  filter: brightness(0) invert(1);
}