/* Coral is the action colour; existing blue artwork stays part of the identity. */
:root{--coral:#ff7048;--coral-hover:#ff8a68;--coral-text:#b63b1d;--coral-light:#ff9b7d;--coral-tint:#fff0ea;--coral-ink:#061321}
::selection{background:var(--coral);color:var(--coral-ink)}
body .button,body .nav-cta,body .content-button{transform:none!important;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;min-height:48px}
body .button.orange-button,body .button.quiz-cta,body.content-page .content-button{background:var(--coral);border-color:var(--coral-text);color:var(--coral-ink)!important}
body .button.blue-button,body .nav-cta{background:transparent;border-color:var(--coral-text);color:var(--coral-text)}
body .button:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible),body.content-page .content-button:is(:hover,:focus-visible){background:var(--coral-hover);border-color:var(--coral-text);color:var(--coral-ink)!important;box-shadow:0 6px 18px #ff70482b}
body .button.blue-button:not(:disabled):is(:hover,:focus-visible),body .nav-cta:is(:hover,:focus-visible){background:var(--coral);color:var(--coral-ink)!important;border-color:var(--coral-text);box-shadow:0 6px 18px #ff70482b}
body .button:before,body .nav-cta:before{animation:none}
body .button span,body .nav-cta span,body .content-button span{color:inherit;display:inline-block;transition:transform .2s ease}
body .button:is(:hover,:focus-visible) span,body .nav-cta:is(:hover,:focus-visible) span,body .content-button:is(:hover,:focus-visible) span{transform:translateX(3px)}
body :is(.button,.nav-cta,.content-button,.system-replay):focus-visible{outline:3px solid var(--coral-text);outline-offset:4px}
.content-page :focus-visible{outline-color:var(--coral-text)}
body .text-link{color:var(--coral-text);text-decoration:underline;text-underline-offset:.25em;transform:none!important}
body .text-link:is(:hover,:focus-visible){color:#942e15}
header nav>a:not(.nav-cta):is(:hover,:focus-visible),header nav>a[aria-current]{color:var(--coral-text)}
header nav>a:focus-visible:after{transform:scaleX(1)}
.content-header nav a:not(.content-button):is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px}
.content-page .content-header nav .content-button:after{display:none}
.about-alignment .about-label,.about-project .about-label,.about-scene .client-story-label,.about-scene .client-story-intro .text-link,.example-kind{color:var(--coral-text)}
.about-project h3{transition:color .2s ease}.about-project h3 span{transition:transform .2s ease}
.about-project:is(:hover,:focus-visible){border-bottom-color:var(--coral-text)}
.about-project:is(:hover,:focus-visible) h3{color:var(--coral-text)}
.about-project:is(:hover,:focus-visible) h3 span{transform:translate(3px,-2px)}
.about-project:focus-visible{outline:3px solid var(--coral-text);outline-offset:8px}
.about-process li{border-bottom-color:#f1b6a4}
.hero-brandline{font-weight:700}.orange{color:var(--coral)}
[data-motto-dots] .orange{display:inline-block;opacity:calc(1 - var(--motto-emphasis,0)*.15);transform:scale(calc(1 + var(--motto-emphasis,0)*.12));text-shadow:0 2px 10px rgb(255 112 72 / calc(var(--motto-emphasis,0)*.3))}
.content-page .workflow-example{background:var(--coral-tint);border-left-color:var(--coral)}
.content-page .content-contents a{border-left:2px solid transparent;padding:7px 10px;transition:background .2s ease,border-color .2s ease;color:var(--coral-text)}
.content-page .content-contents a[aria-current="location"]{background:var(--coral-tint);border-left-color:var(--coral-text);font-weight:700}
.content-page .content-contents a:is(:hover,:focus-visible){background:var(--coral-tint);text-decoration:underline}
.guide-link h3 a{text-decoration:underline;text-decoration-color:#edb29e;text-underline-offset:.2em;transition:text-decoration-color .2s ease}
.guide-link h3 a:after{content:'↗';display:inline-block;margin-left:.4em;transition:transform .2s ease}
.guide-link h3 a:is(:hover,:focus-visible){text-decoration-color:var(--coral-text)}
.guide-link h3 a:is(:hover,:focus-visible):after{transform:translate(3px,-2px)}
.content-page .content-section{border-bottom-color:#edd4ca}
.content-page .content-footer :is(a,button){color:var(--coral-light)}
.footer-invitation .text-link,.harbour-journey .text-link{color:var(--coral-light)}
/* The flow is real text in an ordered list. Only decorative connectors animate. */
.system-illustration{margin:32px 0 24px;color:var(--coral-ink)}
.system-caption{font-size:.83rem!important;line-height:1.5;color:var(--coral-text)!important;margin:0 0 16px!important}
.system-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding:0;margin:0;list-style:none}
.system-flow li{position:relative;display:flex;align-items:center;min-height:100px;padding:18px 14px;border:1px solid #edb29e;border-radius:8px;background:rgb(255 112 72 / calc(var(--stage-fill,1)*.12));font-weight:700;line-height:1.35;color:var(--coral-ink);font-size:.95rem!important}
.system-stage-label{position:relative;z-index:1}
.system-connector{position:absolute;top:50%;left:100%;width:28px;height:2px;pointer-events:none;background:#edb29e}
.system-connector:before{content:'';display:block;width:100%;height:100%;background:var(--coral);transform:scaleX(var(--connection-progress,1));transform-origin:left}
.system-connector:after{content:'';position:absolute;right:1px;top:-3px;width:6px;height:6px;border-top:2px solid var(--coral);border-right:2px solid var(--coral);transform:rotate(45deg)}
.system-flow li:last-child .system-connector{display:none}
.system-replay-slot{min-height:52px;margin-top:12px}
.system-replay{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:7px 0;background:none;border:0;font:inherit;font-size:.9rem;font-weight:700;color:var(--coral-text);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.system-replay[hidden]{display:none}.system-replay svg{transition:transform .2s ease}.system-replay:is(:hover,:focus-visible) svg{transform:rotate(-20deg)}
@media(max-width:700px){.system-flow{grid-template-columns:1fr;gap:22px}.system-flow li{min-height:64px;padding:16px 18px}.system-connector{top:100%;left:25px;width:2px;height:22px}.system-connector:before{transform:scaleY(var(--connection-progress,1));transform-origin:top}.system-connector:after{right:-2px;top:auto;bottom:1px;transform:rotate(135deg)}}
@media(prefers-reduced-motion:reduce){body .button span,body .nav-cta span,body .content-button span,.about-project h3 span,.guide-link h3 a:after,.system-replay svg,[data-motto-dots] .orange{transform:none!important;transition:none!important}.system-flow li{--connection-progress:1!important;--stage-fill:1!important}}