/* Existing AO button and carousel-control families. Shared foundations below;
   component-specific dimensions, palettes and states retain their approved values. */
.hero-button, .hero-arrow, .trust-button, .testimonial-arrow, .selected-projects-all, .case-project-cta, .case-all-projects, .career-application-button, .job-back-button, .job-apply-button, .legal-profile-button, .kontakt-route-button { display: flex; }
.hero-button, .hero-arrow, .trust-button, .testimonial-arrow, .selected-projects-all, .case-project-cta, .case-all-projects, .career-application-button, .job-apply-button, .legal-profile-button, .kontakt-route-button { align-items: center; }
.hero-button, .hero-arrow, .trust-button, .testimonial-arrow, .selected-projects-all, .case-project-cta, .case-all-projects, .career-application-button, .job-apply-button, .legal-profile-button, .kontakt-route-button { justify-content: center; }
.hero-button, .trust-button, .selected-projects-all, .why-ao-about, .case-project-cta, .case-all-projects, .career-application-button, .job-apply-button, .legal-profile-button { font-size: var(--ao-type-cta-size); }
.hero-button, .trust-button, .selected-projects-all, .why-ao-about, .case-all-projects, .job-back-button { line-height: var(--ao-type-cta-line); }
.hero-arrow, .hero-dot, .testimonial-arrow, .testimonial-dot, .selected-projects-all { padding: 0; }
.hero-arrow, .hero-dot, .testimonial-arrow, .testimonial-dot, .selected-projects-all, .why-ao-about { border: 0; }
.hero-arrow, .hero-dot, .testimonial-arrow, .testimonial-dot { cursor: pointer; }
.hero-dot, .testimonial-dot, .career-application-button, .job-apply-button, .legal-profile-button { flex-shrink: 0; }
.trust-button, .selected-projects-all, .why-ao-about, .case-project-cta, .case-all-projects, .career-application-button, .job-back-button, .job-apply-button, .legal-profile-button, .kontakt-route-button { font-weight: var(--ao-type-cta-weight); }
.selected-projects-all, .why-ao-about, .case-all-projects, .kontakt-route-button { height: 50px; }
.selected-projects-all, .why-ao-about, .case-all-projects, .kontakt-route-button { border-radius: 25px; }
.case-project-cta, .career-application-button, .legal-profile-button { height: 54px; }
.job-back-button, .job-apply-button, .legal-profile-button { border-radius: 12px; }
.hero-button {
width: 220px; height: 52px; position: absolute; left: 50%; top: 605px; z-index: 3; transform: translateX(-50%); border-radius: 26px; background: var(--ao-orange); color: var(--ao-white); font-weight: 700; transition:
    transform var(--ao-hover-normal) ease,
    filter var(--ao-hover-normal) ease;
}
.hero-button:hover {
transform:
    translateX(-50%)
    translateY(-2px);

  filter: brightness(1.07);
}
.hero-arrow {
width: 46px; height: 46px; position: absolute; top: 356px; z-index: 10; border-radius: 50%; background: rgba(255, 255, 255, 0.96); color: var(--ao-blue); font-size: 25px; font-weight: 800; line-height: 1; transition:
    transform var(--ao-hover-normal) ease,
    background var(--ao-hover-normal) ease;
}
.hero-arrow:hover {
background: var(--ao-white);

  transform: scale(1.06);
}
.hero-arrow-left {
left: 18px;
}
.hero-arrow-right {
right: 18px;
}
.hero-dot {
width: 10px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.85); transition:
    width 250ms ease,
    opacity 250ms ease;
}
.hero-dot.active {
width: 32px;
}
.trust-button {
width: 172px; height: 48px; position: absolute; left: 50%; top: 270px; transform: translateX(-50%); border: 1.25px solid var(--ao-blue); border-radius: var(--ao-radius-container); background: var(--ao-white); color: var(--ao-blue); text-align: center; transition:
    background var(--ao-hover-normal) ease,
    color var(--ao-hover-normal) ease,
    transform var(--ao-hover-normal) ease;
}
.trust-button:hover {
background: var(--ao-blue);
  color: var(--ao-white);

  transform:
    translateX(-50%)
    translateY(-2px);
}
.testimonial-arrow {
width: 46px; height: 46px; position: absolute; top: 264px; z-index: 10; border-radius: 23px; background: transparent; color: var(--ao-blue); font-size: 25px; font-weight: 500; line-height: normal; transition: color var(--ao-hover-fast) ease-out;
}
.testimonial-arrow::before {
content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #dde5e8;
  border-radius: 50%;
  background: #f6f9fb;
  transition: inset var(--ao-hover-fast) ease-out, background var(--ao-hover-fast) ease-out,
    border-color var(--ao-hover-fast) ease-out;
}
.testimonial-arrow:hover::before {
inset: -2px;
  border-color: transparent;
  background: var(--ao-blue);
}
.testimonial-arrow:hover {
color: var(--ao-white);
}
.testimonial-arrow > span {
position: relative;
  transform: translateY(-1px);
  transition: transform var(--ao-hover-fast) ease-out;
}
.testimonial-arrow-left:hover > span {
transform: translate(-1.5px, -1px);
}
.testimonial-arrow-right:hover > span {
transform: translate(1.5px, -1px);
}
.testimonial-arrow-left {
left: 18px;
}
.testimonial-arrow-right {
right: 18px;
}
.testimonial-dot {
width: 10px; height: 10px; border-radius: 5px; background: var(--ao-blue); opacity: 0.28; transition:
    width 240ms ease-out,
    opacity 240ms ease-out;
}
.testimonial-dot.active {
width: 32px;

  opacity: 1;
}
@media (max-width: 950px) {
.hero-button {
top: auto;
    bottom: 92px;
}
.trust-button {
width: auto;
    height: auto;

    position: static;

    transform: none;
}
.trust-button {
width: 172px;
    height: 48px;

    margin: 28px auto 0;
}
.trust-button:hover {
transform: translateY(-2px);
}
.testimonial-arrow {
top: 285px;
}
}
@media (max-width: 600px) {
.hero-button {
width: 190px;
}
.hero-arrow {
width: 40px;
    height: 40px;

    top: 50%;

    transform: translateY(-50%);
}
.hero-arrow:hover {
transform:
      translateY(-50%)
      scale(1.05);
}
.hero-arrow-left {
left: 10px;
}
.hero-arrow-right {
right: 10px;
}
.testimonial-arrow {
width: 40px;
    height: 40px;

    top: 315px;
}
.testimonial-arrow-left {
left: 10px;
}
.testimonial-arrow-right {
right: 10px;
}
}
@media (max-width: 950px) {
.testimonial-arrow {
top: auto;
    bottom: 279px;
}
}
@media (max-width: 600px) {
.testimonial-arrow {
bottom: 269px;
}
}
@media (prefers-reduced-motion: reduce) {
.testimonial-arrow,
.testimonial-arrow::before,
.testimonial-arrow > span,
.testimonial-dot {
transition: none;
}
}
.selected-projects-all {
position: absolute; top: 35px; right: 0; width: 170px; background: var(--ao-blue); color: var(--ao-white); opacity: 1; transition: background var(--ao-hover-normal) ease-out, color var(--ao-hover-normal) ease-out;
}
.selected-projects-all:hover {
background: var(--ao-orange);
  color: var(--ao-blue);
}
@media (max-width: 950px) {
.selected-projects-all {
position: static;
}
.selected-projects-all {
flex-shrink: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.selected-projects-all {
transition: none;
}
}
.why-ao-about {
position: absolute; left: 0; top: 404px; width: 188px; padding: 15px 20px; background: white; color: var(--ao-blue); text-align: left; opacity: 1;
}
.why-ao-about:hover {
background: var(--ao-orange); color: white;
}
.why-ao.is-expanded .why-ao-about {
top: 366px; font-weight: 400;
}
.why-ao-about {
transition: top var(--why-duration, 480ms) ease-in-out, left var(--why-duration, 480ms) ease-in-out, width var(--why-duration, 480ms) ease-in-out, height var(--why-duration, 480ms) ease-in-out, font-size var(--why-duration, 480ms) ease-in-out, line-height var(--why-duration, 480ms) ease-in-out, color var(--why-duration, 480ms) ease-in-out, opacity var(--why-duration, 480ms) ease-in-out;
}
.why-ao-about {
transition: background var(--ao-hover-normal) ease-out, color var(--ao-hover-normal) ease-out, top var(--why-duration, 480ms) ease-in-out;
}
@media (max-width: 1399px) {
.why-ao .why-ao-about {
position: relative; top: auto; left: auto;
}
.why-ao.is-expanded .why-ao-about {
position: relative; top: auto; left: auto;
}
}
.hero-button {
transition: background var(--ao-hover-normal) ease-out;
}
.hero-button:is(:hover, :focus-visible) {
background: var(--ao-blue); font-weight: 700; transform: translateX(-50%); filter: none;
}
.hero-arrow {
background: transparent; transition: color var(--ao-hover-fast) ease-out;
}
.hero-arrow::before {
content: ""; position: absolute; inset: 0; border: 1px solid #dde5e8;
  border-radius: 50%; background: rgba(255,255,255,.96);
  transition: inset var(--ao-hover-fast) ease-out, background var(--ao-hover-fast) ease-out, border-color var(--ao-hover-fast) ease-out, box-shadow var(--ao-hover-fast) ease-out;
}
.hero-arrow > span {
position: relative; transition: transform var(--ao-hover-fast) ease-out, font-size var(--ao-hover-fast) ease-out;
}
.hero-arrow:is(:hover, :focus-visible) {
background: transparent; color: white; transform: none;
}
.hero-arrow:is(:hover, :focus-visible)::before {
inset: -2px; background: var(--ao-orange); border-color: transparent; box-shadow: 0 5px 12px rgba(10,26,41,.18);
}
.hero-arrow-left:is(:hover, :focus-visible) > span {
font-size: 26px; transform: translate(-1.5px, -1px);
}
.hero-arrow-right:is(:hover, :focus-visible) > span {
font-size: 26px; transform: translate(1.5px, -1px);
}
.hero-dot,
.testimonial-dot {
transition: width var(--carousel-duration) var(--carousel-ease), opacity var(--carousel-duration) var(--carousel-ease);
}
.trust-button {
transition: background var(--ao-hover-normal) ease-out, color var(--ao-hover-normal) ease-out;
}
.trust-button:is(:hover, :focus-visible) {
background: var(--ao-blue); color: white; transform: translateX(-50%);
}
.testimonial-arrow::before {
transition: inset var(--ao-hover-fast) ease-out, background var(--ao-hover-fast) ease-out, border-color var(--ao-hover-fast) ease-out, box-shadow var(--ao-hover-fast) ease-out;
}
.testimonial-arrow:is(:hover, :focus-visible) {
color: white;
}
.testimonial-arrow:is(:hover, :focus-visible)::before {
inset: -2px; border-color: transparent; background: var(--ao-blue); box-shadow: 0 5px 12px rgba(10,26,41,.18);
}
.testimonial-arrow > span {
transition: transform var(--ao-hover-fast) ease-out, font-size var(--ao-hover-fast) ease-out;
}
.testimonial-arrow-left:is(:hover, :focus-visible) > span {
transform: translate(-1.5px, -1px); font-size: 26px;
}
.testimonial-arrow-right:is(:hover, :focus-visible) > span {
transform: translate(1.5px, -1px); font-size: 26px;
}
.selected-projects-all:is(:hover, :focus-visible) {
background: var(--ao-orange); color: var(--ao-blue);
}
.why-ao-about:is(:hover, :focus-visible) {
background: var(--ao-orange); color: white; font-weight: var(--ao-type-cta-weight);
}
@media (min-width: 1201px) {
.why-ao:not(.is-expanded) .why-ao-about {
top: 388px;
}
}
.trust-button:focus-visible,
.why-ao-about:focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: 3px;
}
.hero-button:focus-visible {
outline-color: white;
}
@media (max-width: 950px) {
.trust-button:is(:hover, :focus-visible) {
transform: none;
}
}
@media (max-width: 600px) {
.hero-arrow:is(:hover, :focus-visible) {
transform: translateY(-50%);
}
.hero-button:is(:hover, :focus-visible) {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.trust-button {
transition: none !important;
}
}
@media (min-width: 701px) and (max-width: 1399px) {
body .hero-arrow-left {
left: 24px;
}
body .hero-arrow-right {
right: 24px;
}
body :is(.trust-copy, .trust-title, .trust-button):where(.trust-button) {
position: static; height: auto; transform: none;
}
body .trust-button {
width: 172px; height: 48px; margin: 24px auto 0;
}
body .trust-button:is(:hover, :focus-visible) {
transform: none;
}
body .why-ao:not(.is-expanded) :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-about),
body .why-ao.is-expanded :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-about) {
position: relative; inset: auto; grid-column: 1; width: auto; max-width: 100%;
}
body .why-ao:not(.is-expanded) .why-ao-about,
body .why-ao.is-expanded .why-ao-about {
width: 188px;
}
}
@media (min-width: 701px) and (max-width: 1100px) {
body :is(.case-contact-eyebrow, .case-contact-title, .case-contact-body, .case-project-cta):where(.case-project-cta) {
position: relative; top: auto;
}
body .case-project-cta {
margin-top: 30px;
}
}
@media (max-width: 700px) {
body .hero-button {
position: relative; inset: auto; width: 220px; max-width: 100%; flex-shrink: 0; transform: none;
}
body .hero-button:is(:hover, :focus-visible) {
transform: none;
}
body .hero-arrow,
body .hero-arrow:is(:hover, :focus-visible) {
top: auto; bottom: 24px; width: 48px; height: 48px; transform: none;
}
body .hero-arrow-left {
left: var(--ao-phone-gutter);
}
body .hero-arrow-right {
right: var(--ao-phone-gutter);
}
body :is(.hero-dot, .testimonial-dot):where(.hero-dot, .testimonial-dot),
body :is(.hero-dot, .testimonial-dot):where(.hero-dot, .testimonial-dot).active {
position: relative; width: 44px; height: 44px; flex: 0 0 44px; background: transparent; opacity: 1;
}
body :is(.hero-dot, .testimonial-dot):where(.hero-dot, .testimonial-dot)::before {
content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 5px; background: white; opacity: .45; transform: translate(-50%, -50%); transition: width var(--carousel-duration) var(--carousel-ease), opacity var(--carousel-duration) var(--carousel-ease);
}
body .testimonial-dot::before {
background: var(--ao-blue); opacity: .25;
}
body :is(.hero-dot, .testimonial-dot):where(.hero-dot, .testimonial-dot).active::before {
width: 32px; opacity: 1;
}
body .testimonial-arrow {
width: 48px; height: 48px; top: auto; bottom: 26px;
}
body .testimonial-arrow-left {
left: var(--ao-phone-gutter);
}
body .testimonial-arrow-right {
right: var(--ao-phone-gutter);
}
}
@media (max-width: 700px) and (hover: none) {
body .hero-arrow:hover,
body .testimonial-arrow:hover {
color: var(--ao-blue);
}
body .hero-arrow:hover::before {
inset: 0; border-color: #dde5e8; background: rgba(255,255,255,.96); box-shadow: none;
}
body .testimonial-arrow:hover::before {
inset: 2px; border-color: #dde5e8; background: #f6f9fc; box-shadow: none;
}
body .hero-arrow:hover > span,
body .testimonial-arrow:hover > span {
transform: none; font-size: 24px;
}
}
@media (min-width: 1201px), (orientation: landscape) and (min-width: 951px) and (max-width: 1199px) and (min-height: 501px), (orientation: landscape) and (min-width: 1024px) and (max-width: 1400px) and (min-height: 501px) and (any-pointer: coarse) {
body.ao-site .selected-projects-all:is(:hover, :focus-visible) {
color: var(--ao-white);
}
body.ao-site .why-ao .why-ao-content > :is(.why-ao-eyebrow, h2, .why-ao-copy, .why-ao-about):where(.why-ao-about) {
position: static;
    inset: auto;
    flex-shrink: 0;
    max-width: none;
    transition: none;
}
body.ao-site .why-ao .why-ao-content > .why-ao-about {
width: 188px;
    margin-top: 4px;
    background: var(--ao-orange);
    color: var(--ao-white);
    font-weight: var(--ao-type-cta-weight);
    transition: background var(--ao-component-hover), color var(--ao-component-hover);
}
body.ao-site .why-ao .why-ao-content > .why-ao-about:is(:hover, :focus-visible) {
background: var(--ao-white); color: var(--ao-blue);
}
}
@media (min-width: 1201px), (orientation: landscape) and (min-width: 951px) and (max-width: 1199px) and (min-height: 501px), (orientation: landscape) and (min-width: 1024px) and (max-width: 1400px) and (min-height: 501px) and (any-pointer: coarse) {
body.ao-site :is(.trust-copy, .trust-title, .trust-button):where(.trust-button) {
position: static; inset: auto; height: auto; transform: none;
}
body.ao-site .trust-button {
width: 172px; height: 48px; margin: var(--home-space-sm) auto 0;
}
body.ao-site .trust-button:is(:hover, :focus-visible) {
transform: none;
}
body.ao-site .selected-projects-all {
top: 36px; border: 1.5px solid var(--ao-white); background: var(--ao-white); color: var(--ao-blue); transition: background var(--ao-component-hover), color var(--ao-component-hover), border-color var(--ao-component-hover);
}
body.ao-site .selected-projects-all:is(:hover, :focus-visible) {
background: var(--ao-blue); border-color: var(--ao-blue); color: var(--ao-white);
}
body.ao-site .testimonial-dot {
background: var(--ao-white); opacity: .35;
}
body.ao-site .testimonial-dot.active {
opacity: 1;
}
body.ao-site .testimonial-arrow {
top: calc(50% - 23px);
}
body.ao-site .testimonial-arrow:is(:hover, :focus-visible)::before {
background: var(--ao-orange);
}
@media (prefers-reduced-motion: reduce) {
body.ao-site :is(.selected-project-row, .selected-project-identity h3, .selected-project-arrow::before, .selected-project-arrow span, .selected-projects-all, .service-card-visual, .service-card-image, .service-title, .service-number, .direct-contact-link, .direct-contacts-cta):where(.selected-project-row, .selected-project-identity h3, .selected-project-arrow::before, .selected-project-arrow span, .selected-projects-all, .service-card-visual, .service-card-image, .service-title, .service-number) {
transition: none;
}

}
}
.case-project-cta {
position: absolute; top: 410px; width: 220px; padding: 0 10px 2px 0; border-radius: 26px; background: var(--ao-orange); color: white; line-height: 52px; transition: background var(--ao-hover-normal) ease-out;
}
.case-project-cta:is(:hover, :focus-visible) {
background: var(--ao-blue);
}
.case-all-projects {
position: absolute; top: 89px; right: 0; width: 170px; background: var(--ao-blue); color: white; transition: background var(--ao-hover-normal) ease-out, color var(--ao-hover-normal) ease-out;
}
.case-all-projects:is(:hover, :focus-visible) {
background: var(--ao-orange); color: var(--ao-blue);
}
.case-page :is(.case-project-cta, .case-contact-link, .case-all-projects):where(.case-project-cta, .case-all-projects):focus-visible {
outline: 2px solid var(--ao-orange); outline-offset: 4px;
}
@media (max-width: 1399px) {
.case-all-projects {
top: 26px;
}
}
@media (max-width: 1050px) {
.case-project-cta {
position: relative; top: auto;
}
.case-project-cta {
margin-top: 30px;
}
}
@media (max-width: 700px) {
.case-all-projects {
position: relative; top: auto; margin-top: 24px;
}
}
.career-application-button:focus-visible {
outline:3px solid var(--ao-blue); outline-offset:4px;
}
.career-application-button {
width:232px; border-radius:27px; color:white; background:var(--ao-blue); line-height:22px; white-space:pre; transition:background-color 220ms ease-out,color 220ms ease-out;
}
.career-application-button:is(:hover,:focus-visible) {
color:var(--ao-blue); background:white;
}
@media (max-width:600px) {
.career-application-button {
width:min(232px,100%);
}
}
.job-detail-card > :not(.job-back-button) {
width: 1192px; max-width: calc(100% + 2px);
}
.job-back-button {
align-items: flex-start; width: 196px; max-width: 100%; padding: 10px 13px; border: 1px solid #e0e4e8; color: var(--ao-blue); background: white; font-size: 13px; transition: background-color var(--ao-hover-normal) ease-in-out, border-color var(--ao-hover-normal) ease-in-out;
}
.job-back-button > span:first-child {
flex: 0 0 156px;
}
.job-back-arrow {
flex: 0 0 18px; text-align: center; transition: color var(--ao-hover-normal) ease-in-out;
}
.job-back-button:hover {
border-color: var(--ao-orange); background: #fff3e8;
}
.job-back-button:hover .job-back-arrow {
color: var(--ao-orange);
}
.job-apply-button {
width: 236px; max-width: 100%; padding: 15px 22px; background: var(--ao-orange); color: white; line-height: 21px; transition: background-color 240ms ease-out;
}
.job-apply-button > span:first-child {
flex: 0 0 150px;
}
.job-button-arrow {
flex: 0 0 20px; text-align: center;
}
.job-apply-button:hover {
background: var(--ao-blue);
}
@media (max-width: 1399px) {
.job-detail-card > :not(.job-back-button) {
width: 100%; max-width: 100%;
}
}
@media (max-width: 700px) {
.job-apply-button {
padding-inline: 12px;
}
}
.legal-profile-button {
width: 260px; max-width: 100%; padding-inline: 20px; background: var(--ao-orange); color: white; line-height: 22px; transition: background-color var(--ao-hover-normal) ease-in-out, color var(--ao-hover-normal) ease-in-out;
}
.legal-profile-button:is(:hover, :focus-visible) {
background: white; color: var(--ao-blue);
}
.kontakt-route-button {
width:178px; margin-top:23.5px; background:var(--ao-orange); color:white; font-size:15px; line-height:22.5px; letter-spacing:-.06px; white-space:pre-wrap; box-shadow:0 9px 0 rgba(16,42,67,0); transition:box-shadow var(--ao-hover-normal) ease-in-out;
}
.kontakt-route-button:is(:hover,:focus-visible) {
box-shadow:0 9px 0 rgba(16,42,67,.2);
}
.kontakt-route-button:focus-visible {
outline:2px solid var(--ao-blue); outline-offset:3px;
}

/* Shared editorial eyebrow metrics; each component retains its own colour. */
.about-eyebrow, .detail-eyebrow, .work-eyebrow { font-size: var(--ao-type-eyebrow-size); font-weight: var(--ao-type-eyebrow-weight); line-height: var(--ao-type-eyebrow-line); }