/* Bricks-mapped layout primitives */
.section {
  padding: var(--space-9) 0;
  position: relative;
}

.section--tight {
  padding: var(--space-6) 0;
}

.section--hero {
  padding: 0;
  min-height: min(88vh, 44rem);
  display: flex;
  align-items: flex-end;
}

.section--surface {
  background: var(--color-surface);
}

.section--ink {
  background: linear-gradient(160deg, var(--color-primary-deep) 0%, #0f2a4d 55%, #163d6b 100%);
  color: rgba(255, 255, 255, 0.88);
}

.section--ink h2,
.section--ink h3,
.section--ink h4,
.section--ink .lede {
  color: var(--color-white);
}

.section__inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section__inner--narrow {
  width: min(100% - 2.5rem, var(--container-narrow));
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.stack--sm {
  gap: var(--space-3);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-8);
  }
  .split--reverse > :first-child {
    order: 2;
  }
}

.page-hero {
  /* Pristine site photography only — vary crop via position, never AI/upscaled assets */
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 50% 45%;
  padding: calc(var(--header-h) + var(--space-8)) 0 var(--space-8);
  background:
    linear-gradient(180deg, rgba(8, 24, 48, 0.18) 0%, rgba(8, 24, 48, 0.58) 100%),
    linear-gradient(115deg, rgba(8, 24, 48, 0.8) 0%, rgba(8, 24, 48, 0.42) 50%, rgba(4, 107, 210, 0.22) 100%),
    var(--page-hero-image) var(--page-hero-position) / cover no-repeat;
  color: var(--color-white);
}

.page-hero--about {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 46% 40%;
}
.page-hero--leadership {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 62% 38%;
}
.page-hero--jpa {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 32% 48%;
}
.page-hero--services {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 50% 42%;
}
.page-hero--audit {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 28% 40%;
}
.page-hero--accounting {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 72% 48%;
}
.page-hero--tax {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 58% 36%;
}
.page-hero--corporate {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 38% 30%;
}
.page-hero--advisory {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 70% 50%;
}
.page-hero--industries {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 55% 55%;
}
.page-hero--careers {
  --page-hero-image: url("../img/firm-hero.jpg");
  --page-hero-position: 50% 42%;
}
.page-hero--contact {
  --page-hero-image: url("../img/firm-hero.jpg");
  --page-hero-position: 48% 50%;
}
.page-hero--insights {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 40% 35%;
}
.page-hero--calendar {
  --page-hero-image: url("../img/buildings.jpg");
  --page-hero-position: 65% 52%;
}
.page-hero--legal {
  --page-hero-image: url("../img/hero-valletta-sea.jpg");
  --page-hero-position: 30% 52%;
}

.page-hero h1,
.page-hero .lede {
  color: var(--color-white);
}

.page-hero h1 {
  max-width: 18ch;
}

.page-hero .lede {
  max-width: 36rem;
  font-size: var(--fs-md);
  opacity: 0.9;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--space-4);
  opacity: 0.85;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb span[aria-hidden="true"] {
  opacity: 0.5;
}

.prose {
  font-size: var(--fs-md);
}

.prose h2 {
  margin-top: var(--space-7);
  max-width: none;
  padding-bottom: 0;
  border-bottom: 0;
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}