/* ARLEA capabilities editorial page */
.ar-capabilities-page {
  --cap-navy: #192b42;
  --cap-deep: #101c28;
  --cap-ink: #172b43;
  --cap-silver: #c0c7cd;
  --cap-paper: #f4f3ef;
  --cap-ice: #e9edf0;
  background: var(--cap-paper) !important;
}

.ar-capabilities-page .site-header.ar-header {
  background: rgba(16, 28, 40, .42) !important;
  backdrop-filter: blur(13px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(110%) !important;
}

.ar-capabilities-page .site-header.ar-header.scrolled {
  background: rgba(16, 28, 40, .95) !important;
}

.ar-cap-skip {
  position: fixed;
  z-index: 3000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: #fff;
  color: var(--cap-ink);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .2s ease;
}

.ar-cap-skip:focus { transform: translateY(0); }

.ar-capabilities-page h1,
.ar-capabilities-page h2,
.ar-capabilities-page h3,
.ar-capabilities-page p { text-wrap: pretty; }

.ar-cap-hero {
  position: relative;
  min-height: max(760px, 100svh);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--cap-deep);
  color: #f4f5f6;
}

.ar-cap-hero-media-frame,
.ar-cap-hero-overlay,
.ar-cap-hero-pattern { position: absolute; inset: 0; }

.ar-cap-hero-media-frame {
  z-index: -4;
  display: block;
  overflow: hidden;
}

.ar-cap-hero-media {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: 50% center;
  filter: saturate(.78) contrast(1.02) brightness(1);
  transform: scale(1.02);
}

.ar-cap-hero-overlay {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(10, 23, 35, .6) 0%, rgba(19, 41, 61, .36) 42%, rgba(15, 30, 44, .06) 76%, rgba(8, 18, 27, .12) 100%),
    linear-gradient(0deg, rgba(9, 20, 31, .3) 0%, transparent 50%, rgba(9, 20, 31, .1) 100%);
}

.ar-cap-hero-pattern {
  z-index: -2;
  top: -10%;
  right: -8%;
  bottom: auto;
  left: auto;
  width: min(59vw, 930px);
  aspect-ratio: 548 / 466;
  opacity: .2;
  background: linear-gradient(145deg, #f4f5f6, #7f96a9 72%);
  filter: blur(.35px);
  mix-blend-mode: soft-light;
  transform: rotate(-5deg);
  -webkit-mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
  mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
}

.ar-cap-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 122px;
  padding-bottom: 150px;
}

.ar-cap-hero-copy {
  position: relative;
  top: clamp(60px, 5.5vw, 82px);
  width: min(810px, 68vw);
}

.ar-cap-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #728492;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ar-cap-hero h1,
.ar-cap-section-head h2,
.ar-cap-intro h2,
.ar-cap-next h2 {
  margin: 0;
  color: var(--cap-ink);
  font-family: var(--ar-font-display);
  font-size: clamp(56px, 6.2vw, 100px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .93;
  text-transform: uppercase;
}

.ar-cap-hero h1 {
  max-width: 900px;
  margin: 0 0 clamp(120px, 9vw, 140px);
  color: #f4f5f6;
  font-size: clamp(66px, 7.6vw, 122px);
  line-height: .87;
  transform: translateY(calc(-1 * clamp(96px, 8vw, 128px)));
}

.ar-cap-hero h1 span,
.ar-cap-next h2 span { color: var(--cap-silver); }

.ar-cap-lead {
  max-width: 720px;
  margin: 0;
  color: #dce2e6;
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 700;
  line-height: 1.7;
}

.ar-cap-button {
  min-width: 245px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  margin-top: 34px;
  padding: 17px 20px;
  border: 1px solid currentColor;
  color: var(--cap-ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}

.ar-cap-button-light { border-color: rgba(239, 243, 245, .62); color: #fff; }
.ar-cap-button-light:hover { background: #fff; color: var(--cap-ink); }

.ar-cap-hero .ar-cap-button { margin-top: clamp(108px, 8.5vw, 128px); }

.ar-cap-index {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(232, 237, 241, .2);
  background: rgba(11, 24, 36, .5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ar-cap-index a {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 clamp(18px, 3vw, 48px);
  border-right: 1px solid rgba(232, 237, 241, .16);
  color: #e7ecef;
  font-size: 11px;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .25s ease;
}

.ar-cap-index a:last-child { border-right: 0; }
.ar-cap-index a:hover { background: rgba(255, 255, 255, .07); }
.ar-cap-index a span { color: #8294a3; font-size: 9px; }

.ar-cap-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(105px, 11vw, 170px) 0;
  background: var(--cap-paper);
}

.ar-cap-intro-pattern {
  position: absolute;
  right: -12vw;
  bottom: -23vw;
  width: min(62vw, 960px);
  aspect-ratio: 548 / 466;
  background: linear-gradient(145deg, #253b53, #91a3b2);
  mix-blend-mode: multiply;
  opacity: .075;
  pointer-events: none;
  transform: rotate(7deg);
  -webkit-mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
  mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
}

.ar-cap-intro-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(42px, 5.5vw, 92px);
  align-items: start;
}

.ar-cap-intro-grid > header { min-width: 0; }

.ar-cap-intro-copy {
  min-width: 0;
  padding: 0 0 0 clamp(34px, 4vw, 64px);
  border-left: 1px solid #b7c1c9;
}

.ar-cap-label span {
  min-width: 34px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding-inline: 7px;
  border: 1px solid #aab4bc;
  color: var(--cap-ink);
  font-size: 9px;
}

.ar-cap-intro h2 {
  max-width: 720px;
  margin-top: 28px;
  font-size: clamp(54px, 5.7vw, 88px);
  line-height: .98;
}

.ar-cap-intro-copy p {
  max-width: 690px;
  margin: 0 0 24px;
  color: #526477;
  font-size: clamp(15px, 1.04vw, 17px);
  line-height: 1.55;
}

.ar-cap-intro-copy .ar-cap-copy-bold { font-weight: 700; }

.ar-cap-intro-copy .ar-cap-copy-large {
  margin-bottom: 34px;
  color: var(--cap-ink);
  font-family: var(--ar-font-body);
  font-size: clamp(25px, 2.15vw, 36px);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.26;
}

.ar-cap-intro-copy a,
.ar-cap-text-link {
  display: inline-flex;
  gap: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  color: var(--cap-ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}

.ar-cap-services {
  position: relative;
  overflow: hidden;
  padding: clamp(105px, 10vw, 160px) 0;
  background: var(--cap-navy);
  color: #fff;
}

.ar-cap-services-pattern,
.ar-cap-process-pattern {
  position: absolute;
  top: -10%;
  right: -7%;
  width: min(58vw, 900px);
  aspect-ratio: 548 / 466;
  background: #dce4ea;
  mix-blend-mode: soft-light;
  opacity: .09;
  transform: rotate(-4deg);
  -webkit-mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
  mask: url('/assets/brand/arlea-pattern-solid.svg') center / contain no-repeat;
}

.ar-cap-section-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr);
  gap: clamp(38px, 7vw, 110px);
  align-items: end;
}

.ar-cap-section-head > div {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .55fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: end;
}

.ar-cap-section-head h2 { color: #f4f5f6; }
.ar-cap-section-head > div > p { margin: 0 0 6px; color: #b5c1c9; font-size: 15px; line-height: 1.7; }
.ar-cap-label-light { color: #b6c1c9; }
.ar-cap-label-light span { border-color: rgba(231, 236, 239, .38); color: #fff; }

.ar-cap-service-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid rgba(226, 232, 236, .24);
  border-left: 1px solid rgba(226, 232, 236, .24);
}

.ar-cap-service {
  min-width: 0;
  padding: clamp(18px, 2.2vw, 32px);
  border-right: 1px solid rgba(226, 232, 236, .24);
  border-bottom: 1px solid rgba(226, 232, 236, .24);
  transition: background-color .35s ease, transform .35s ease;
}

.ar-cap-service:hover { background: rgba(255, 255, 255, .045); transform: translateY(-5px); }

.ar-cap-service figure {
  height: clamp(280px, 29vw, 430px);
  margin: 0;
  overflow: hidden;
  background: #13263a;
}

.ar-cap-service figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.66) contrast(1.04);
  transition: filter .5s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.ar-cap-service:hover figure img { filter: saturate(.84); transform: scale(1.035); }

.ar-cap-service-copy {
  position: relative;
  min-height: 285px;
  padding: 32px 12px 12px 56px;
}

.ar-cap-service-copy > span {
  position: absolute;
  top: 38px;
  left: 5px;
  color: #8495a3;
  font-size: 10px;
  letter-spacing: .1em;
}

.ar-cap-service-copy > p:first-of-type {
  margin: 0 0 17px;
  color: #9eafba;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ar-cap-service h3 {
  margin: 0 0 22px;
  color: #f4f5f6;
  font-family: var(--ar-font-display);
  font-size: clamp(32px, 3.2vw, 50px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: uppercase;
}

.ar-cap-service-copy > p:last-child {
  max-width: 600px;
  margin: 0;
  color: #bdc7ce;
  font-size: 15px;
  line-height: 1.75;
}

.ar-cap-process {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(105px, 10vw, 160px) 0;
  background: var(--cap-navy);
  color: #fff;
}

/* The shared redesign stylesheet gives process sections a light gradient;
   this page intentionally keeps the process treatment aligned with services. */
body.arlea-redesign.ar-capabilities-page .ar-cap-process { background: var(--cap-navy) !important; }

.ar-cap-process > .shell { position: relative; z-index: 1; }
.ar-cap-process .ar-cap-section-head {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.ar-cap-process .ar-cap-section-head > div {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .38fr);
  gap: 48px;
  align-items: start;
}
.ar-cap-process .ar-cap-section-head h2 {
  max-width: 900px;
  font-size: clamp(48px, 4.3vw, 76px);
  line-height: .94;
}
.ar-cap-process .ar-cap-section-head > div > p { margin-top: 12px; }
.ar-cap-process .ar-cap-section-head-dark h2 { color: #f4f5f6; }
.ar-cap-process .ar-cap-section-head-dark > div > p { color: #b5c1c9; }
.ar-cap-process .ar-cap-label { color: #b6c1c9; }
.ar-cap-process .ar-cap-label span { border-color: rgba(231, 236, 239, .38); color: #fff; }
.ar-cap-section-head-dark h2 { color: var(--cap-ink); }
.ar-cap-section-head-dark > div > p { color: #5e7181; }

.ar-cap-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 72px 0 0;
  padding: 0;
  border-top: 1px solid rgba(226, 232, 236, .24);
  border-bottom: 1px solid rgba(226, 232, 236, .24);
  list-style: none;
}

.ar-cap-process-grid li {
  min-height: 285px;
  padding: 28px 28px 36px;
  border-right: 1px solid rgba(226, 232, 236, .24);
}

.ar-cap-process-grid li:last-child { border-right: 0; }
.ar-cap-process-grid li > span { color: #8495a3; font-size: 10px; }
.ar-cap-process-grid h3 { margin: 72px 0 18px; color: #f4f5f6; font-family: var(--ar-font-display); font-size: 29px; font-weight: 300; text-transform: uppercase; }
.ar-cap-process-grid p { margin: 0; color: #bdc7ce; font-size: 15px; line-height: 1.7; }

.ar-cap-next {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--cap-deep);
}

.ar-cap-next > img {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.58);
}

.ar-cap-next-overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 23, 35, .96), rgba(17, 35, 51, .74) 55%, rgba(10, 24, 37, .4)), linear-gradient(0deg, rgba(10, 23, 35, .72), transparent 48%);
}

.ar-cap-next-inner { width: 100%; }
.ar-cap-next h2 { max-width: 950px; margin-top: 28px; color: #f4f5f6; }
.ar-cap-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.ar-cap-text-link { border-color: rgba(255, 255, 255, .48); color: #fff; }

.js [data-cap-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}

.js [data-cap-reveal].is-visible { opacity: 1; transform: none; }

.ar-capabilities-page a:focus-visible,
.ar-capabilities-page button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

@media (max-width: 1100px) {
  .ar-cap-hero-copy { width: min(820px, 82vw); }
  .ar-cap-section-head { grid-template-columns: 1fr; gap: 28px; }
  .ar-cap-section-head > div { grid-template-columns: 1.5fr .65fr; }
  .ar-cap-process .ar-cap-section-head { grid-template-columns: 1fr; gap: 28px; }
  .ar-cap-process .ar-cap-section-head > div { grid-template-columns: 1.5fr .65fr; }
  .ar-cap-service-copy { min-height: 305px; padding-left: 46px; }
}

@media (max-width: 820px) {
  .ar-cap-hero { min-height: 800px; }
  .ar-cap-hero-copy { top: 24px; width: 100%; }
  .ar-cap-hero h1 { margin-bottom: 48px; transform: none; }
  .ar-cap-hero .ar-cap-button { margin-top: 56px; }
  .ar-cap-hero-media { object-position: 43% center; }
  .ar-cap-hero-overlay { background: linear-gradient(90deg, rgba(10, 23, 35, .82), rgba(18, 37, 55, .42)), linear-gradient(0deg, rgba(9, 21, 32, .68), transparent 62%); }
  .ar-cap-hero-pattern { top: 8%; right: -25%; width: 86vw; opacity: .15; }
  .ar-cap-process-pattern { right: -42%; width: 118vw; opacity: .024; }
  .ar-cap-index { grid-template-columns: repeat(2, 1fr); }
  .ar-cap-index a { min-height: 58px; padding-inline: 20px; }
  .ar-cap-index a:nth-child(-n+2) { border-bottom: 1px solid rgba(232, 237, 241, .16); }
  .ar-cap-intro-grid { display: block; }
  .ar-cap-intro-copy {
    max-width: 720px;
    margin-top: 44px;
    padding: 40px 0 0;
    border-top: 1px solid #b7c1c9;
    border-left: 0;
  }
  .ar-cap-process .ar-cap-section-head > div { grid-template-columns: 1fr; gap: 18px; }
  .ar-cap-process .ar-cap-section-head > div > p { max-width: 620px; margin-top: 0; }
  .ar-cap-process .ar-cap-section-head h2 { font-size: clamp(48px, 8.8vw, 72px); }
  .ar-cap-section-head > div { grid-template-columns: 1fr; gap: 18px; }
  .ar-cap-section-head > div > p { max-width: 620px; }
  .ar-cap-service-grid { grid-template-columns: 1fr; }
  .ar-cap-service { display: grid; grid-template-columns: .92fr 1.08fr; }
  .ar-cap-service figure { height: 100%; min-height: 350px; }
  .ar-cap-service-copy { min-height: 350px; padding: 30px 22px 26px 54px; }
  .ar-cap-process-grid { grid-template-columns: repeat(2, 1fr); }
  .ar-cap-process-grid li:nth-child(2) { border-right: 0; }
  .ar-cap-process-grid li:nth-child(-n+2) { border-bottom: 1px solid rgba(226, 232, 236, .24); }
}

@media (max-width: 560px) {
  .ar-capabilities-page .shell { width: min(100% - 36px, 1440px); }
  .ar-cap-hero { min-height: 760px; align-items: start; }
  .ar-cap-hero-inner { padding-top: 118px; padding-bottom: 158px; }
  .ar-cap-hero-copy { top: 0; }
  .ar-cap-hero-media { object-position: 36% center; }
  .ar-cap-hero h1 { margin-bottom: 40px; font-size: clamp(54px, 15.8vw, 76px); }
  .ar-cap-lead { font-size: 16px; line-height: 1.6; }
  .ar-cap-hero .ar-cap-button { margin-top: 48px; }
  .ar-cap-button { width: 100%; min-width: 0; }
  .ar-cap-index a { padding-inline: 14px; font-size: 9px; }
  .ar-cap-intro h2,
  .ar-cap-section-head h2,
  .ar-cap-next h2 { font-size: clamp(42px, 12vw, 58px); }
  .ar-cap-process .ar-cap-section-head h2 { font-size: clamp(42px, 12vw, 58px); }
  .ar-cap-intro-copy { margin-top: 34px; padding-top: 32px; }
  .ar-cap-service { display: block; padding: 20px 0 26px; }
  .ar-cap-service figure { min-height: 0; height: 270px; }
  .ar-cap-service-copy { min-height: 0; padding: 27px 8px 10px 46px; }
  .ar-cap-service-copy > span { left: 7px; top: 33px; }
  .ar-cap-service h3 { font-size: 36px; }
  .ar-cap-process-grid { grid-template-columns: 1fr; }
  .ar-cap-process-grid li { min-height: 225px; border-right: 0; border-bottom: 1px solid rgba(226, 232, 236, .24); }
  .ar-cap-process-grid li:last-child { border-bottom: 0; }
  .ar-cap-process-grid h3 { margin-top: 45px; }
  .ar-cap-next { min-height: 650px; }
  .ar-cap-actions { align-items: stretch; flex-direction: column; gap: 16px; }
  .ar-cap-text-link { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-capabilities-page *,
  .ar-capabilities-page *::before,
  .ar-capabilities-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-cap-reveal] { opacity: 1; transform: none; }
}

@media print {
  .ar-capabilities-page .site-header,
  .ar-capabilities-page .ar-cap-index,
  .ar-capabilities-page .ar-floating-whatsapp { display: none !important; }
  .ar-cap-hero,
  .ar-cap-services,
  .ar-cap-next { min-height: auto; color: #000; background: #fff; }
}