/* ==========================================================================
   Motion — hover, focus and entrance behaviour shared by every page.
   One easing, two durations. Effects are restrained so the Figma design
   stays intact; nothing moves more than a few pixels.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* long, soft settle for scroll-driven motion */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);   /* a small overshoot, for buttons that pop or spring back */
  --dur: 220ms;
  --dur-slow: 480ms;
  --dur-reveal: 1100ms;
}

/* --------------------------------------------------------------------------
   Buttons (primary pill)
   -------------------------------------------------------------------------- */
.btn {
  overflow: hidden; isolation: isolate;   /* keeps the shine and the tap ripple inside the pill */
  box-shadow: 0 0 0 rgba(23,123,235,0);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), scale .2s var(--ease-spring);
}
.btn img { transition: transform var(--dur) var(--ease); }
/* Brightness lift instead of an overlay pseudo-element, so the hover never depends on the button's positioning */
.btn:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(23,123,235,.28); filter: brightness(1.08); }
.btn:hover img { transform: translate(2px, -2px); }
.btn:active { translate: 0 0; scale: .96; box-shadow: 0 4px 12px rgba(23,123,235,.22); }

/* A light sweep crosses primary buttons every few seconds, and once more on hover. */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-150%) skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.closing__btn--ghost)::after { animation: btn-shine 5.5s var(--ease-out) 1.2s infinite; }
  .btn:not(.closing__btn--ghost):hover::after { animation: btn-shine-once .9s var(--ease-out); }
}
@keyframes btn-shine      { 0% { transform: translateX(-150%) skewX(-18deg); } 18%, 100% { transform: translateX(350%) skewX(-18deg); } }
@keyframes btn-shine-once { from { transform: translateX(-150%) skewX(-18deg); } to { transform: translateX(350%) skewX(-18deg); } }

/* Tap ripple (motion.js): spreads from the point pressed */
.mp-ripc { overflow: hidden; isolation: isolate; }
.mp-rip {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.45) 0, rgba(255,255,255,.18) 40%, transparent 70%);
  animation: mp-rip .65s var(--ease-out) forwards;
}
.closing__btn--ghost .mp-rip, .legal-contents .mp-rip, .nav-m--dark .mp-rip, .svc-card__icon .mp-rip, .deck-arrow .mp-rip {
  background: radial-gradient(circle, rgba(23,123,235,.28) 0, rgba(23,123,235,.1) 40%, transparent 70%);
}
@keyframes mp-rip { to { transform: scale(1); opacity: 0; } }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav__link, .nav__contact, .footer__link, .footer__text, .footer-m__item, .consent a {
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__contact { transition: opacity var(--dur) var(--ease); }
.nav__contact img { transition: transform var(--dur) var(--ease); }
.nav__contact:hover img { transform: translate(2px, -2px); }
.nav__logo img, .nav-m__logo img { transition: opacity var(--dur) var(--ease); }
.nav__logo:hover img, .nav-m__logo:hover img { opacity: .8; }
.nav-m__btn { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nav-m__btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.56); }
.nav-m--dark .nav-m__btn:hover { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.2); }
.nav-m__btn:active { transform: scale(.96); }

/* Footer */
.footer__link:hover, .footer-m__item:hover, .footer__text[href]:hover { opacity: .7; }
.social a img { transition: transform var(--dur) var(--ease); }
.social a:hover img { transform: translateY(-2px) scale(1.06); }
.consent a:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.svc-card, .svc-feature, .svc-row, .info-card, .job {
  transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.svc-card:hover, .svc-feature:hover, .svc-row:hover, .info-card:hover, .job:hover {
  translate: 0 -6px; box-shadow: 0 24px 48px rgba(8,21,56,.09);
}

/* Round icon buttons inside cards */
.svc-card__icon, .svc-feature__icon span, .info-card__icon {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-card__icon img, .svc-feature__icon img { transition: transform var(--dur) var(--ease); }
.svc-card:hover .svc-card__icon { border-color: var(--blue); }
.svc-card__icon:hover img, .svc-feature__icon:hover img { transform: translate(2px, -2px); }
.svc-feature__icon { transition: border-color var(--dur) var(--ease); }
.svc-feature__icon:hover { border-color: rgba(23,123,235,.72); }

/* Photos zoom a touch inside their frames */
.svc-row__photo img, .svc-feature__photo img { transition: transform var(--dur-slow) var(--ease); }
.svc-row:hover .svc-row__photo img, .svc-feature:hover .svc-feature__photo img { transform: scale(1.03); }
.svc-row__photo--shifted img { transform-origin: 50% 50%; }
.svc-row--img-right:hover .svc-row__photo--shifted img,
.svc-row--img-left:hover .svc-row__photo--shifted img { transform: scale(1.03); }

/* Pager arrows */
.services__pager img { transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); cursor: pointer; }
.services__pager img:first-child:hover { transform: translateX(-2px); }
.services__pager img:last-child:hover { transform: rotate(180deg) translateX(-2px); }

/* --------------------------------------------------------------------------
   Forms — focus mirrors the design's highlighted "First name" state
   -------------------------------------------------------------------------- */
.field__input, .field__textarea, .field__phone {
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:hover, .field__textarea:hover, .field__phone:hover { border-color: rgba(0,0,0,.16); }
.field__input:focus, .field__textarea:focus, .field__phone:focus-within {
  outline: none; border-color: var(--blue); background: rgba(23,123,235,.08);
  box-shadow: 0 0 0 2.5px rgba(23,123,235,.24);
}
.field__phone input:focus { outline: none; }
.consent img { transition: transform var(--dur) var(--ease); }
.consent:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Scroll reveals (motion.js) — text, list items, buttons, cards and photos fade
   and rise as they reach the screen; items arriving together cascade. The hidden
   starting state applies only once the script has run (html.mp-on). Uses the
   translate/scale properties so layout transforms (translateX(-50%) centring) survive.
   -------------------------------------------------------------------------- */
.mp-on .mp {
  transition: opacity 1s var(--ease-out), translate 1.2s var(--ease-out), scale 1.2s var(--ease-out), clip-path 1.4s var(--ease-out);
  transition-delay: var(--mp-d, 0s);
}
.mp-on .mp:not(.mp-in) { opacity: 0; translate: 0 26px; }
.mp-on .mp-side:not(.mp-in) { translate: -22px 0; }                  /* list items slide in from the side */
.mp-on .mp-btn:not(.mp-in) { translate: 0 14px; scale: .9; }          /* buttons pop up */
.mp-on .mp-btn { transition-timing-function: var(--ease-out), var(--ease-spring), var(--ease-spring), var(--ease-out); }

/* Headings: words rise from behind a mask */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wd > span { display: inline-block; }
.mp-on .mp-words.mp:not(.mp-in) { opacity: 1; translate: none; }
.mp-on .mp-words.mp:not(.mp-in) .wd > span { translate: 0 105%; }
.mp-on .mp-words.mp-in .wd > span { animation: mp-word 1.05s var(--ease-out) both; animation-delay: calc(var(--mp-d, 0s) + var(--wi) * 55ms); }
@keyframes mp-word { from { translate: 0 105%; } to { translate: 0 0; } }
/* Page titles: the same rise, played as the page opens (motion.js sets --mp-d to the fade's delay) */
.mp-title .wd > span { animation: mp-word .8s var(--ease-out) both; animation-delay: calc(var(--mp-d, .3s) + var(--wi) * 40ms); }

/* Photos: wipe open from the bottom while the image settles from a slight zoom
   (--mp-round keeps a rounded frame's corners during the wipe) */
.mp-on .mp-img:not(.mp-in) { opacity: 1; translate: none; clip-path: inset(18% 0 0 0 round var(--mp-round, 0px)); }
.mp-on .mp-img.mp-in { clip-path: inset(0 round var(--mp-round, 0px)); }
.mp-on .mp-img img { scale: 1.12; transition: scale 2s var(--ease-out) var(--mp-d, 0s); }
.mp-on .mp-img.mp-in img { scale: 1; }

/* Service cards (Services page): the card rises and grows into place, then its photo
   wipes open and its title, text and button follow. The photo stays a touch enlarged
   so it can drift with the scroll (motion.js), and a soft light follows the pointer. */
.mp-on .mp-card:not(.mp-in) { translate: 0 44px; scale: .97; }
.mp-on .mp-card { transition-duration: 1.1s, 1.4s, 1.4s, 1.4s; }
.svc-row__photo { --mp-round: 20px; }
.mp-on .mp-img img.mp-par { scale: 1.24; }
.mp-on .mp-img.mp-in img.mp-par, img.mp-par { scale: 1.1; will-change: translate; }
@media (hover: hover) {
  .svc-row::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(23,123,235,.09), rgba(23,123,235,0) 60%);
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .svc-row:hover::before { opacity: 1; }
}
@media (max-width: 899px) { .svc-row__photo { --mp-round: 16px; } }

/* Eyebrow labels: a hairline draws in after the text */
.eyebrow.mp-line::after {
  content: ""; display: inline-block; vertical-align: middle; width: 0; height: 1px; margin-left: 12px;
  background: linear-gradient(90deg, currentColor, transparent);
  transition: width 1.4s var(--ease-out) calc(var(--mp-d, 0s) + .25s);
}
.eyebrow.mp-line.mp-in::after, .eyebrow.mp-line.mp-done::after { width: 56px; }

/* --------------------------------------------------------------------------
   Back to top (motion.js): appears after 700px; its ring fills as the page is read
   -------------------------------------------------------------------------- */
.mp-top {
  position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--navy); color: var(--white); box-shadow: 0 10px 24px rgba(8,21,56,.24);
  transition: translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: pop-in .4s var(--ease-out);
}
.mp-top:hover { translate: 0 -3px; box-shadow: 0 14px 28px rgba(8,21,56,.3); }
/* Out of the way while a country or service list is open, so it cannot catch a tap meant for the list */
body:has(.field__picker.is-open, .field__country.is-open) .mp-top { visibility: hidden; }
.mp-top:focus-visible { border-radius: 50%; }
.mp-top svg { display: block; width: 100%; height: 100%; }
.mp-top__track, .mp-top__ring { fill: none; stroke-width: 2; }
.mp-top__track { stroke: rgba(255,255,255,.14); }
.mp-top__ring { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.mp-top__arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) {
  .mp-top { width: 44px; height: 44px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Smooth in-page scrolling for anchor links */
html { scroll-behavior: smooth; }

/* Keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { border-radius: 100px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}

/* Carousel arrows (desktop) stay hidden until the pointer is over the section */
@media (hover: hover) and (min-width: 900px) {
  .deck-arrow { opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .corporate:hover .deck-arrow, .services:hover .deck-arrow,
  .corporate:focus-within .deck-arrow, .services:focus-within .deck-arrow { opacity: 1; translate: 0 0; pointer-events: auto; }
  .deck-arrow:hover { translate: 0 -2px; }
  .deck-arrow:active { translate: 0 0; }
}

/* --------------------------------------------------------------------------
   Page-load choreography — the hero assembles on first paint: photo settles
   from a slight zoom, the emblem and copy rise into place.
   Pure CSS keyframes, so it plays without JavaScript.
   -------------------------------------------------------------------------- */
@keyframes hero-photo   { from { scale: 1.06; } to { scale: 1; } }
@keyframes fade-up      { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-down    { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in       { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes fade-up-ghost{ from { opacity: 0; translate: 0 24px; } to { opacity: .12; translate: 0 0; } }   /* ghost titles live at 12% */

/* Photo settle (Home hero + service-page heroes) */
.hero__photo img, .svc-hero img { animation: hero-photo 1.8s var(--ease-out) both; }

/* Navigation drops in */
.nav, .nav-m { animation: fade-down .9s var(--ease-out) .15s backwards; }   /* not "both": a held animation would stop the sticky bar's backdrop blur */

/* Emblem and statement */
.hero__tick { animation: fade-in .6s var(--ease-out) 1.1s both; }
.hero__ring { animation: pop-in 1.2s var(--ease-out) .5s both; }
.hero__disc { animation: pop-in 1s var(--ease-out) .7s both; }
.hero__bird { animation: pop-in .9s var(--ease-out) .85s both; }
.hero__statement { animation: fade-up 1s var(--ease-out) 1s both; }

/* Other pages: banner / heading copy rises in */
/* (motion.js swaps the title fades below for the word-by-word rise when it runs in time) */
.banner__title { animation: fade-up 1s var(--ease-out) .3s both; }
.ghost-title { animation: fade-up-ghost 1s var(--ease-out) .3s both; }
.banner__sub, .contact__lead, .services__lead { animation: fade-up 1s var(--ease-out) .5s both; }
.info-cards { animation: fade-up 1s var(--ease-out) .7s both; }

@media (prefers-reduced-motion: reduce) {
  .hero__photo img, .svc-hero img, .nav, .nav-m, .hero__tick,
  .hero__ring, .hero__disc, .hero__bird, .hero__statement, .banner__title, .ghost-title,
  .banner__sub, .contact__lead, .services__lead, .info-cards { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .corporate__marquee { animation: none; } }

/* --------------------------------------------------------------------------
   Info cards (Contact, Careers, About Us) — the hovered card takes the navy
   treatment and the default navy card steps back to white. On phones, which
   cannot hover, the card crossing the middle of the screen does the same as the
   page scrolls (motion.js toggles .is-active).
   -------------------------------------------------------------------------- */
.info-card { transition: translate var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.info-card .grain, .info-card__lines, .info-card__sub, .info-card__icon, .info-card__icon img {
  transition: opacity var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.info-card:not(.info-card--2) .grain { opacity: 0; }
.info-card__icon { border: 1.5px solid transparent; padding: 12.5px; }
/* grain arrives only once the colour has settled, so no speckle shows mid-fade */
.info-card .grain { transition: opacity 200ms var(--ease); }

@media (hover: hover) {
  .info-card:hover { background: var(--navy); color: var(--white); }
  .info-card:hover .grain { opacity: 1; transition: opacity 320ms var(--ease) 260ms; }
  .info-card:hover .info-card__lines { opacity: .29; }                     /* .56 → .16 line opacity */
  .info-card:hover .info-card__sub { color: var(--steel); opacity: 1; }
  .info-card:hover .info-card__icon { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .info-card:hover .info-card__icon img { filter: invert(1); }
  .info-card--2:hover .info-card__icon img, .info-card--2:hover .info-card__lines { filter: none; opacity: 1; }

  /* the default navy card steps back to white */
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover),
  .benefits:has(.info-card:hover) .info-card--2:not(:hover),
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) { background: var(--white); color: var(--black); }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .grain,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .grain,
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .grain { opacity: 0; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__lines,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__lines,
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__lines { opacity: 3.5; }   /* .16 → .56 (clamped to 1 on the image) */
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__sub,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__sub,
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__sub { color: var(--black); opacity: .7; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon,
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon { background: #f5f5f5; border-color: transparent; }
  .info-cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img,
  .benefits:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img,
  .about-us__cards:has(.info-card:hover) .info-card--2:not(:hover) .info-card__icon img { filter: invert(1); }
}

/* phones: the card in the middle of the screen */
.info-card.is-active { background: var(--navy); color: var(--white); }
.info-card.is-active .grain { opacity: 1; transition: opacity 320ms var(--ease) 260ms; }
.info-card.is-active .info-card__lines { opacity: .29; }                     /* .56 → .16 line opacity */
.info-card.is-active .info-card__sub { color: var(--steel); opacity: 1; }
.info-card.is-active .info-card__icon { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.info-card.is-active .info-card__icon img { filter: invert(1); }
.info-card--2.is-active .info-card__icon img, .info-card--2.is-active .info-card__lines { filter: none; opacity: 1; }

/* the default navy card steps back to white */
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active),
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active),
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) { background: var(--white); color: var(--black); }
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active) .grain,
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active) .grain,
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .grain { opacity: 0; }
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__lines,
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__lines,
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__lines { opacity: 3.5; }   /* .16 → .56 (clamped to 1 on the image) */
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__sub,
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__sub,
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__sub { color: var(--black); opacity: .7; }
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon,
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon,
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon { background: #f5f5f5; border-color: transparent; }
.info-cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon img,
.benefits:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon img,
.about-us__cards:has(.info-card.is-active) .info-card--2:not(.is-active) .info-card__icon img { filter: invert(1); }