/* navAjna brand colours, sampled from the logo: navy #0b1a3a, blue #4a7a9c / #1aaedc, orange #f89a1c */
:root {
  --color-bg: #ffffff;
  --color-surface: #f7f9fb;
  --color-text: #0f1a33;
  --color-accent: #2f72a8;
  --color-accent-100: #e9f3fb;
  --color-accent-200: #cfe4f4;
  --color-accent-300: #a3cdea;
  --color-accent-400: #5fb3e0;
  --color-accent-500: #3a8cc4;
  --color-accent-600: #2f72a8;
  --color-accent-700: #245b88;
  --color-accent-800: #163a63;
  --color-accent-900: #00183c;
  --color-accent-2: #f89a1c;
  --color-accent-2-100: #fef2e1;
  --color-accent-2-200: #fde0b6;
  --color-accent-2-300: #fbc77c;
  --color-accent-2-400: #f9ad45;
  --color-accent-2-500: #f89a1c;
  --color-accent-2-600: #d97f0b;
  --color-accent-2-700: #a96208;
  --color-accent-2-800: #774506;
  --color-accent-2-900: #482a04;
}

/* Show photos in their true colours: turn off the design system's duotone
   overlay (a brand-blue layer with mix-blend-mode:color over every photo). */
.duotone::after { content: none; display: none; }

/* "Trusted by teams at" logo marquee: the logo list appears twice in a row and
   slides left by exactly one copy, so the loop is seamless. Pauses on hover,
   and stops (wrapping into a static grid) for visitors who prefer reduced motion. */
.logo-marquee {
  overflow: hidden;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee__track {
  display: flex; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: logo-marquee 45s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track li {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  min-width: 190px; height: 96px; padding: 0 28px;
  border-right: 1px solid var(--color-divider);
}
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .logo-marquee__track { animation-duration: 30s; }
  .logo-marquee__track li { min-width: 150px; height: 80px; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .logo-marquee__track li[aria-hidden="true"] { display: none; }
}



/* Home hero animation: make it larger (and so taller). The image is limited by
   its width, so on desktop it now extends into the empty right-hand margin
   (stopping just short of the screen edge) and sits a little closer to the text, with a size cap for very wide
   screens. On phones it runs edge to edge. The whole diagram stays visible. */
@media (min-width: 1000px) {
  .hero-media {
    margin-right: calc(16px - max(0px, (100vw - 1240px) / 2) - clamp(20px, 5vw, 80px)) !important;
    margin-left: -24px !important;
    max-width: 1080px;
  }
}
@media (max-width: 999px) {
  .hero-media { margin-left: calc(-1 * clamp(20px, 4vw, 56px)) !important; margin-right: calc(-1 * clamp(20px, 4vw, 56px)) !important; flex-basis: 100% !important; }
}

/* ---- Fixed (sticky) header on all pages ---- */
.site-header{position:sticky !important;top:0 !important;z-index:100 !important}
@media (max-width: 999px){
  .site-header > div:first-child{flex-wrap:wrap !important;gap:0 12px !important;min-height:0 !important}
  .site-header > div:first-child > a:first-child{padding:6px 0 !important}
  .site-header > div:first-child > a:first-child img{height:36px !important}
  .site-header nav{width:100%;flex-wrap:nowrap !important;gap:20px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;white-space:nowrap;padding-bottom:8px}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav > *{flex:0 0 auto}
  .site-header nav button{padding:10px 0 !important}
  .site-header nav .btn{padding:7px 14px !important;font-size:14px !important}
  .site-header [data-menu] > div{max-height:calc(100vh - 110px);overflow-y:auto}
}

/* ---- Footer columns: no empty gap after Offices ---- */
.footer-cols{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr)) !important}
.footer-cols > .footer-brand{grid-column:auto !important}
@media (max-width: 1000px){
  .footer-cols{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .footer-cols > .footer-brand{grid-column:1 / -1 !important}
}
@media (max-width: 600px){
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* Industry platform cards */
.plat-card{transition:transform .2s ease, box-shadow .2s ease}
.plat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
/* keep anchor targets clear of the sticky header */
section[id],[id].blueprint{scroll-margin-top:84px !important}
@media (max-width: 760px){section[id],[id].blueprint{scroll-margin-top:112px !important}}

/* ---- Laptop / desktop page margins: a little more breathing room left and right,
   with every section (header, hero, content, footer) on the same left/right lines ---- */
@media (min-width: 1000px){
  [style*="max-width:1280px;margin:0 auto"]{
    max-width:1240px !important;
    padding-left:clamp(20px,5vw,80px) !important;
    padding-right:clamp(20px,5vw,80px) !important;
  }
  /* home hero: text lines up with the logo and sections below */
  [style*="max-width:1440px;margin:0 auto"]{
    max-width:none !important;
    padding-left:calc(max(0px, (100% - 1240px) / 2) + clamp(20px,5vw,80px)) !important;
    padding-right:calc(max(0px, (100% - 1240px) / 2) + clamp(20px,5vw,80px)) !important;
  }
}
@media (min-width: 1000px){
  /* home hero headline sized to the narrower text column */
  [style*="max-width:1440px;margin:0 auto"] h1{font-size:clamp(44px,4.8vw,76px) !important}
}
@media (min-width: 1000px){
  /* page headlines and the closing call-to-action, sized for the wider margins */
  h1[style*="clamp(46px,5.6vw,84px)"]{font-size:clamp(40px,4.4vw,66px) !important}
  h2[style*="clamp(48px,6vw,84px)"]{font-size:clamp(40px,4.4vw,66px) !important}
}

/* ---- Header dropdowns on hover: one single row of items on every screen ---- */
.site-header [data-menu="svc"] > div > div{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:16px !important}
.site-header [data-menu="ind"] > div > div{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:24px !important}
@media (max-width: 999px){
  /* smaller screens: still one row, swipe sideways to see the rest */
  .site-header [data-menu="svc"] > div > div,
  .site-header [data-menu="ind"] > div > div{grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:minmax(220px,70vw);overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* keep the main nav (now with Careers) on one line on laptop/desktop */
@media (min-width: 1000px){
  .site-header nav{flex-wrap:nowrap !important;white-space:nowrap}
  .site-header > div:first-child{flex-wrap:nowrap !important}
}
@media (min-width: 1000px) and (max-width: 1199px){
  .site-header nav{gap:18px !important}
  .site-header > div:first-child{gap:20px !important}
}

/* ---- Careers: job application dialog ---- */
.apply-dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid var(--color-divider);background:var(--color-bg,#fff);color:var(--color-text);box-shadow:0 24px 80px rgba(0,20,50,.35);overflow:auto}
.apply-dialog::backdrop{background:rgba(0,26,61,.6)}
.apply-form{display:flex;flex-direction:column;margin:0}
.apply-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:28px 32px 20px;border-bottom:1px solid var(--color-divider);position:sticky;top:0;background:inherit;background:var(--color-bg,#fff);z-index:1}
.apply-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:8px}
.apply-head h2,.apply-done h2{font-family:var(--font-heading);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.05;text-transform:uppercase;margin:0}
.apply-close{all:unset;cursor:pointer;font-size:32px;line-height:1;padding:0 6px;color:var(--color-neutral-800)}
.apply-close:hover{color:var(--color-accent-700)}
.apply-body{display:flex;flex-direction:column;gap:18px;padding:24px 32px}
.apply-row{display:flex;flex-wrap:wrap;gap:18px}
.apply-row > .field{flex:1 1 240px;min-width:0}
.apply-body .field label small{font-weight:400;color:var(--color-neutral-700)}
.apply-file{padding:10px !important;background:var(--color-surface)}
.apply-consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--color-neutral-800)}
.apply-consent input{margin-top:3px;accent-color:var(--color-accent)}
.apply-error{margin:0;padding:12px 14px;border:1px solid #d33;background:#fff4f4;color:#a11;font-size:14px}
.apply-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:20px 32px 28px;border-top:1px solid var(--color-divider)}
.apply-note{font-size:13px;color:var(--color-neutral-700)}
.apply-done{padding:40px 32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.apply-done p{margin:0;font-size:17px;line-height:1.6;color:var(--color-neutral-800)}
@media (max-width:600px){.apply-head,.apply-body,.apply-foot{padding-left:20px;padding-right:20px}}
.apply-dialog [hidden]{display:none !important}
.apply-attach{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px dashed var(--color-accent);background:var(--color-surface);font-size:14px;line-height:1.55;color:var(--color-neutral-800)}
.apply-attach > b{font-size:14px;color:var(--color-text)}

/* ---- Footer "Privacy" link + privacy notice pop-up ---- */
.footer-link{all:unset;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px}
.footer-link:hover,.footer-link:focus-visible{color:var(--color-bg)}
.footer-link:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:2px}
.policy-dialog{display:none}
.policy-dialog[open]{display:flex;flex-direction:column;max-height:min(86vh,900px);overflow:hidden}
.policy-body{padding:8px 32px 24px;overflow-y:auto;font-size:15px;line-height:1.65;color:var(--color-neutral-800)}
.policy-body h3{font-family:var(--font-heading);font-weight:600;font-size:19px;color:var(--color-text);margin:24px 0 8px}
.policy-body p{margin:0 0 12px}
.policy-body ul{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.policy-body a{color:var(--color-accent-700)}
.policy-updated{font-size:13px;color:var(--color-neutral-700);margin-top:16px !important}
@media (max-width:600px){.policy-body{padding-left:20px;padding-right:20px}}
.policy-link{all:unset;cursor:pointer;color:var(--color-accent-700);text-decoration:underline;text-underline-offset:2px}
.form-consent{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--color-neutral-700);max-width:46em}

/* About > What we stand for: values infographic on tablet/desktop, readable cards on phones */
.values-figure{display:none}
@media (min-width: 761px){
  .values-figure{display:block}
  .values-figure img{mix-blend-mode:multiply}
  .values-cards{display:none !important}
}