:root{--duo-action-chamfer:14px;--duo-action-height:56px;--duo-arrow-slot:52px;--duo-stroke:1px;--duo-motion-fast:250ms;--blue:#0967d9;--ice:#8ccaff;--ink:#071c2d;--line:rgba(150,187,216,.45)}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;flex:none;pointer-events:none}
.action,.icon-button,.choice{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;min-height:var(--duo-action-height);border:0;background:transparent;color:inherit;text-decoration:none;font:inherit;font-weight:600;cursor:pointer;gap:0;border-radius:0;line-height:1.3}
.action::before,.action::after,.icon-button::before,.icon-button::after,.choice::before,.choice::after{content:"";position:absolute;z-index:-2;inset:0;clip-path:polygon(0 0,calc(100% - var(--duo-action-chamfer)) 0,100% var(--duo-action-chamfer),100% 100%,0 100%);background:var(--line);transition:background var(--duo-motion-fast)}
.action::after,.icon-button::after,.choice::after{inset:1px;z-index:-1;background:var(--action-surface,#071c2d);clip-path:polygon(0 0,calc(100% - var(--duo-action-chamfer) + .6px) 0,100% calc(var(--duo-action-chamfer) - .6px),100% 100%,0 100%)}
.action-label{padding:16px 22px;text-align:left}
.action-arrow{display:flex;align-items:center;justify-content:center;align-self:stretch;min-width:var(--duo-arrow-slot);border-left:1px solid var(--line);color:inherit}
.action--primary{color:#fff;--line:rgba(255,255,255,.35)}
.action--primary::before,.action--primary::after{background:var(--blue)}
.action--primary .action-arrow{background:rgba(255,255,255,.035)}
.action--outline{--action-surface:rgba(6,25,43,.96);color:#fff}
.action--light{--action-surface:#f4f4ef;--line:#617787;color:var(--ink)}
.icon-button{justify-content:center;min-width:48px;min-height:48px;--duo-action-chamfer:10px}
.icon-button--light{--action-surface:#f4f4ef;--line:#617787;color:var(--ink)}
.editorial-link{display:inline-flex;align-items:center;gap:24px;min-height:48px;font-weight:600;text-decoration:none;color:inherit;padding:8px 0;position:relative}
.editorial-link::after{content:"";position:absolute;left:0;bottom:1px;width:32px;height:1px;background:currentColor;transition:width var(--duo-motion-fast)}
.editorial-link .icon{color:var(--blue)}
.dark .editorial-link .icon{color:var(--ice)}
.choice{width:100%;text-align:left;padding:23px;gap:18px;min-height:92px;--action-surface:#081f32}
.choice .icon{width:21px;height:21px;color:#91a9b9}
.choice[aria-pressed=true]{--line:var(--ice);--action-surface:#123a58;color:#fff}
.choice[aria-pressed=true] .icon{color:var(--ice)}
:is(a,button,input,textarea,select):focus-visible{outline:3px solid #008fea;outline-offset:5px}
.dark :is(a,button,input,textarea,select):focus-visible{outline-color:#a7d9ff}
.action .icon,.editorial-link .icon,.icon-button .icon,.choice .icon{transition:transform var(--duo-motion-fast)}
@media(hover:hover){.action:hover::before,.icon-button:hover::before,.choice:hover::before{background:var(--ice)}.action--primary:hover::after{background:#075fc9}.action:hover .icon,.editorial-link:hover .icon,.choice:hover .icon{transform:translate(3px,-3px)}.icon-button:hover .icon{transform:translateX(var(--direction,3px))}.editorial-link:hover::after{width:65%}}
.action:active,.icon-button:active,.choice:active{filter:brightness(.9)}
button:disabled{opacity:.35;cursor:not-allowed}
.action[aria-busy=true]{cursor:progress;opacity:.65}
@media(max-width:600px){:root{--duo-action-height:52px;--duo-arrow-slot:38px;--duo-action-chamfer:12px}.action-label{padding:14px 13px}.action{font-size:13px}.action .icon{width:20px;height:20px}.choice{padding:18px;min-height:80px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.action .icon,.editorial-link .icon,.icon-button .icon,.choice .icon{transform:none!important;transition:none}.editorial-link::after{transition:none}}


/* DUO CTA chamfer consistency — presentation-safe, shape only.
   The original .action is the canonical button. These legacy CTA surfaces
   retain their own colors, layouts, label sizes, arrows, hover and destinations.
   Full navigation cards, form fields and unrelated layout elements are excluded. */
:where(
 .portfolio-editorial .pf-photo-action,
 #projekti .portfolio-image-action,
 .services-hub .svc-final-action,
 .service-detail-editorial .sd-final-action,
 .about-editorial .about-link-primary
){
 clip-path:polygon(0 0,calc(100% - var(--duo-action-chamfer,14px)) 0,100% var(--duo-action-chamfer,14px),100% 100%,0 100%);
}
:where(
 .services-hub .svc-detail-link:not(.svc-final-action) .svc-arrow,
 .service-detail-editorial .sd-action:not(.sd-final-action) .sd-arrow,
 .about-editorial .about-link:not(.about-link-primary) .about-arrow,
 .contact-page-editorial .contact-map-arrow,
 .home-footer .home-footer-top-icon,
 .portfolio-editorial .pf-control
){
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
/* Clipped filled actions keep a visible focus indication inside their surface. */
:where(
 .services-hub .svc-final-action,
 .service-detail-editorial .sd-final-action,
 .about-editorial .about-link-primary,
 .portfolio-editorial .pf-control
):focus-visible{
 outline-offset:-4px;
}