/* Shared ARLEA subpage language, derived from the About page. */
.ar-subpage-theme {
  --sub-navy: #253b53;
  --sub-deep: #121c26;
  --sub-ink: #172b43;
  --sub-silver: #c0c4c8;
  --sub-paper: #f4f3ef;
  --sub-ice: #e9edf0;
  --sub-line: rgba(23, 43, 67, .18);
  background: var(--sub-paper);
  color: var(--sub-ink);
}

.ar-subpage-theme .site-header.ar-header {
  background: rgba(18, 28, 38, .42) !important;
  color: #f4f5f6;
  backdrop-filter: blur(13px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(13px) saturate(110%) !important;
}

.ar-subpage-theme .site-header.ar-header.scrolled,
.ar-subpage-theme .site-header.ar-header.is-scrolled { background: rgba(18, 28, 38, .94) !important; }
.ar-subpage-theme .ar-scroll-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.ar-subpage-theme .ar-nav a,
.ar-subpage-theme .site-header.ar-header.scrolled .ar-nav a { color: #f4f5f6; }
.ar-subpage-theme .ar-nav a[aria-current="page"]::after { background: var(--sub-silver); transform: scaleX(1); }

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

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

/* Business and industry pages. */
.ar-business-page h1,
.ar-business-page h2,
.ar-business-page h3,
.ar-business-page p { text-wrap: pretty; }

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

.ar-business-hero-media,
.ar-business-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ar-business-hero-media {
  z-index: -4;
  object-fit: cover;
  object-position: center;
  filter: saturate(.64) contrast(1.04);
  transform: scale(1.018);
}

.ar-business-hero-overlay {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(13,25,37,.97) 0%, rgba(18,37,55,.88) 42%, rgba(17,31,44,.4) 74%, rgba(11,20,29,.56) 100%),
    linear-gradient(0deg, rgba(10,22,34,.9), transparent 54%);
}

.ar-business-hero-pattern {
  position: absolute;
  z-index: -2;
  top: -8%;
  right: -9%;
  width: min(58vw, 920px);
  aspect-ratio: 548 / 466;
  opacity: .17;
  background: linear-gradient(145deg, #f4f5f6, #8197aa);
  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-business-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 126px;
  padding-bottom: 128px;
}

.ar-business-hero-copy { width: min(920px, 74vw); }

.ar-business-hero-logo {
  display: block;
  width: clamp(180px, 14vw, 230px);
  max-height: 31vh;
  margin: 0 0 clamp(34px, 5.2vh, 60px);
  object-fit: contain;
  object-position: left top;
}

.ar-business-kicker,
.ar-business-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #d9e0e5;
  font: 500 11px/1.5 "Manrope", sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.ar-business-kicker::before {
  content: "";
  width: 36px;
  height: 1px;
  background: rgba(220,227,232,.68);
}

.ar-business-hero h1 {
  max-width: 1080px;
  margin: 24px 0 26px;
  color: #f4f5f6;
  font-family: var(--ar-font-display, "Manrope", sans-serif);
  font-size: clamp(62px, 7.3vw, 116px);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .88;
  text-transform: uppercase;
}

.ar-business-hero-lead {
  max-width: 720px;
  margin: 0;
  color: #dce2e6 !important;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.72;
}

.ar-business-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ar-business-actions .button { min-width: 205px; justify-content: space-between; }

.ar-business-index {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(232,237,241,.18);
  background: rgba(12,27,41,.44);
  backdrop-filter: blur(10px);
}

.ar-business-index span {
  min-height: 64px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(232,237,241,.15);
  color: #dce3e8;
  font: 500 10px/1.3 "Manrope", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.ar-business-index span:last-child { border-right: 0; }

.ar-business-section {
  position: relative;
  padding: clamp(104px, 10vw, 160px) 0;
  overflow: hidden;
  background: var(--sub-paper);
}

.ar-business-section::after {
  content: "";
  position: absolute;
  right: -15vw;
  bottom: -14vw;
  width: min(47vw, 740px);
  aspect-ratio: 548 / 466;
  opacity: .05;
  background: var(--sub-navy);
  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-business-section-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  gap: 9vw;
  align-items: start;
}

.ar-business-label { color: #708399; }
.ar-business-label span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #aab6c0; color: var(--sub-ink); font-size: 9px; letter-spacing: 0; }

.ar-business-section h2,
.ar-business-proof h2 {
  margin: 28px 0 0;
  color: var(--sub-ink);
  font-family: var(--ar-font-display, "Manrope", sans-serif);
  font-size: clamp(50px, 6vw, 92px);
  font-weight: 300;
  letter-spacing: -.06em;
  line-height: .92;
  text-transform: uppercase;
}

.ar-business-copy { padding-top: 46px; }
.ar-business-copy > p { max-width: 680px; color: #697887; font-size: 16px; line-height: 1.8; }
.ar-business-copy > p:first-child { color: var(--sub-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.42; }

.company-project-list,
.ar-business-list { margin-top: 40px; border-top: 1px solid #aeb9c2; }

.company-project-list article,
.ar-business-list article {
  min-height: 86px;
  display: grid;
  grid-template-columns: 52px minmax(150px, 1fr) auto 34px;
  gap: 18px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid #bdc6cd;
}

.company-project-list article > span,
.ar-business-list article > span { color: #768899; font: 500 10px/1 "Manrope", sans-serif; letter-spacing: .12em; }
.company-project-list h3,
.ar-business-list h3 { margin: 0 0 6px; color: var(--sub-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.company-project-list p,
.ar-business-list p { margin: 0; color: #657584; font-size: 14px; }
.company-project-list article > a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #aeb9c2;
  color: var(--sub-ink);
  transition: background .25s ease, color .25s ease;
}
.company-project-list article > a:hover,
.company-project-list article > a:focus-visible { background: var(--sub-ink); color: #fff; }

.ar-business-panel {
  position: relative;
  min-height: 440px;
  padding: clamp(34px, 4.5vw, 62px);
  overflow: hidden;
  background: linear-gradient(145deg, #293f56, #172a3c);
  color: #fff;
}

.ar-business-panel::after {
  content: "";
  position: absolute;
  right: -20%;
  bottom: -18%;
  width: 72%;
  aspect-ratio: 548 / 466;
  opacity: .1;
  background: #eef2f5;
  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-business-panel > * { position: relative; z-index: 1; }
.ar-business-panel > span { color: #b8c4ce; font: 500 11px/1.4 "Manrope", sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.ar-business-panel h3 { max-width: 520px; margin: 88px 0 20px; color: #f4f5f6; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; }
.ar-business-panel p { max-width: 590px; color: #c8d2d9 !important; font-size: 16px; line-height: 1.75; }
.ar-business-panel a { display: inline-block; margin-top: 25px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5); color: #fff; font: 500 11px/1.4 "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; }

.ar-business-proof {
  position: relative;
  padding: clamp(96px, 9vw, 145px) 0;
  overflow: hidden;
  background: var(--sub-ice);
}

.ar-business-proof-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 8vw; align-items: center; }
.ar-business-proof h2 { margin-bottom: 26px; }
.ar-business-proof p { max-width: 680px; color: #657584; font-size: 16px; line-height: 1.78; }

.ar-business-proof-media { position: relative; min-height: 460px; margin: 0; overflow: hidden; background: #dbe1e5; }
.ar-business-proof-media img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; filter: saturate(.68); transition: transform .75s cubic-bezier(.22,1,.36,1); }
.ar-business-proof-media:hover img { transform: scale(1.018); }
.ar-business-proof-media figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 20px; background: rgba(18,35,51,.8); color: #edf1f4; font: 500 10px/1.4 "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; }

.ar-business-governance {
  padding: 30px 0;
  border-block: 1px solid rgba(23,43,67,.13);
  background: #dfe6eb;
}

.ar-business-governance .shell { display: grid; grid-template-columns: 210px 1fr; gap: 44px; align-items: start; }
.ar-business-governance span { color: #627689; font: 500 10px/1.4 "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.ar-business-governance p { max-width: 930px; margin: 0; color: #536879; font-size: 14px; line-height: 1.7; }

.js .ar-business-page [data-subpage-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,1,.36,1); }
.js .ar-business-page [data-subpage-reveal].is-visible { opacity: 1; transform: none; }

/* Projects retain their interaction model but share the About page atmosphere. */
.ar-subpage-theme.ar-projects-page .projects-page-header {
  background: rgba(18, 28, 38, .82);
  border-bottom-color: rgba(221,228,233,.19);
}

.ar-subpage-theme.ar-projects-page .projects-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--sub-deep);
}

.ar-subpage-theme.ar-projects-page .projects-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url('/assets/le-grey-14.webp') center 48% / cover no-repeat;
  filter: saturate(.52) contrast(1.04);
  transform: scale(1.02);
}

.ar-subpage-theme.ar-projects-page .projects-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(13,25,37,.96), rgba(18,37,55,.84) 50%, rgba(11,21,31,.66)), linear-gradient(0deg, rgba(10,22,34,.88), transparent 58%);
}

.ar-subpage-theme.ar-projects-page .projects-page-hero-grid { position: relative; z-index: 1; }
.ar-subpage-theme.ar-projects-page .projects-page-hero-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -140px;
  right: -5vw;
  width: min(52vw, 790px);
  aspect-ratio: 548 / 466;
  opacity: .14;
  background: linear-gradient(145deg, #f4f5f6, #8197aa);
  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-subpage-theme.ar-project-detail-page .project-detail-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 7%;
  right: -8%;
  width: min(52vw, 820px);
  aspect-ratio: 548 / 466;
  opacity: .13;
  background: linear-gradient(145deg, #f4f5f6, #8298aa);
  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;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .ar-business-hero-logo { width: clamp(164px, 23vw, 205px); max-height: 29vh; }
  .ar-business-section-grid,
  .ar-business-proof-grid { gap: 6vw; }
}

@media (max-width: 820px) {
  .ar-business-hero { min-height: 800px; align-items: start; }
  .ar-business-hero-inner { padding-top: 132px; padding-bottom: 150px; }
  .ar-business-hero-copy { width: 100%; }
  .ar-business-hero-pattern { top: 11%; right: -25%; width: 88vw; opacity: .14; }
  .ar-business-index { grid-template-columns: 1fr; }
  .ar-business-index span { min-height: 38px; border-right: 0; border-bottom: 1px solid rgba(232,237,241,.14); }
  .ar-business-section-grid,
  .ar-business-proof-grid { grid-template-columns: 1fr; gap: 48px; }
  .ar-business-copy { padding-top: 0; }
  .ar-business-panel { min-height: 390px; }
  .ar-business-governance .shell { grid-template-columns: 1fr; gap: 10px; }
  .ar-subpage-theme.ar-projects-page .projects-page-hero-grid::after,
  .ar-subpage-theme.ar-project-detail-page .project-detail-hero::after { right: -25%; width: 88vw; }
}

@media (max-width: 560px) {
  .ar-business-hero { min-height: 760px; }
  .ar-business-hero-logo { width: clamp(132px, 39vw, 160px); max-height: 27vh; margin-bottom: 28px; }
  .ar-business-hero h1 { font-size: clamp(50px, 15vw, 74px); }
  .ar-business-actions { display: grid; }
  .ar-business-actions .button { width: 100%; }
  .ar-business-section h2,
  .ar-business-proof h2 { font-size: clamp(44px, 13.5vw, 66px); }
  .ar-business-panel { min-height: 350px; padding: 30px 24px; }
  .ar-business-panel h3 { margin-top: 62px; }
  .ar-business-proof-media,
  .ar-business-proof-media img { min-height: 350px; }
  .company-project-list article { grid-template-columns: 34px 1fr 32px; gap: 12px; }
  .company-project-list article p { grid-column: 2 / -1; }
  .company-project-list article > a { grid-column: 3; grid-row: 1; }
}

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