/* Landing page sections, top to bottom */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  color: var(--gold);
}

/* Hero content waits for the GSAP intro. Shown at once without JS, without GSAP or after a timeout. */
.js .hero [data-intro],
.js .hero [data-intro-dock] {
  opacity: 0;
}

.js.intro-done .hero [data-intro],
.js.intro-done .hero [data-intro-dock],
.no-gsap .hero [data-intro],
.no-gsap .hero [data-intro-dock] {
  opacity: 1;
}

/* ================= Hero ================= */
.hero {
  position: relative;
  padding: var(--hero-inset);
  padding-bottom: 0;
  isolation: isolate;
}

/* Decor: glow blobs behind the dock and stats so the glass panels have something to blur */
.hero__glow-gold {
  inset-inline-start: 0;
  bottom: 40px;
}

.hero__glow-teal {
  inset-inline-end: 0;
  bottom: -160px;
}

@media (max-width: 767px) {
  .hero__glow-gold {
    bottom: 370px;
  }

  .hero__glow-teal {
    bottom: 0;
  }
}

.hero__panel {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(640px, 100svh - var(--hero-inset) * 2);
  min-height: max(640px, 100dvh - var(--hero-inset) * 2);
  overflow: hidden;
  border-radius: var(--radius-panel);
  isolation: isolate;
  background: var(--navy);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg picture,
.hero__bg img {
  width: 100%;
  height: 100%;
}

.hero__bg img {
  object-fit: cover;
  object-position: 62% 30%;
}

@media (min-width: 1024px) {
  .hero__bg img {
    object-position: 50% 40%;
  }
}

@media (max-width: 1023px) and (orientation: portrait) {
  .hero__bg img {
    object-position: 50% 50%;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-hero-legacy);
}

@media (min-width: 1024px) {
  .hero__overlay {
    background: var(--grad-hero-desktop);
  }

  .hero__overlay::after {
    display: none;
  }
}

.hero__overlay::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, var(--navy-60), transparent);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--hero-inset) + 120px);
  padding-bottom: 150px;
  text-align: center;
  color: var(--white);
}

/* Desktop: top bar (44px + 12px gap) removed, so the hero starts 56px higher */
@media (min-width: 1024px) {
  .hero__content {
    padding-top: calc(var(--hero-inset) + 64px);
  }
}

.hero__logo img {
  width: 85vw;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .hero__logo img {
    width: min(clamp(380px, 30vw, 520px), 32vw);
  }
}

.hero__logo {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--gold-60);
}

.hero__title {
  max-width: min(14ch, 32vw);
  font-size: clamp(40px, 4.2vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 2px 16px var(--navy-60);
}

.hero__subtitle {
  max-width: min(36ch, 32vw);
  text-wrap: balance;
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--white-85);
  text-shadow: 0 2px 16px var(--navy-60);
}

.hero__callig {
  display: none;
}

/* Narrow desktops: the crop moves the faces toward the center, so the text column shrinks */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__title {
    max-width: min(14ch, 30vw);
    font-size: clamp(34px, 3.8vw, 52px);
  }

  .hero__subtitle {
    max-width: min(36ch, 30vw);
  }

  .hero__logo img {
    width: min(clamp(380px, 30vw, 520px), 30vw);
  }
}

/* Desktop: centered text column between the two faces; logo line matches the logo width */
@media (min-width: 1024px) {
  .hero__content {
    align-self: flex-start;
    width: min(22vw, 440px);
    margin-inline: auto;
    padding-inline: 0;
    padding-top: 11svh;
    padding-bottom: 0;
  }

  .hero__logo {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-bottom: clamp(20px, 3svh, 32px);
    padding: 0 0 clamp(12px, 2svh, 20px);
    border-bottom: 1px solid var(--gold-60);
  }

  .hero__logo img {
    display: block;
    width: min(22vw, 440px);
    max-width: none;
    height: auto;
  }

  .hero__title {
    max-width: none;
    font-size: clamp(32px, 2.9vw, 56px);
    font-weight: 700;
    line-height: 1.1;
  }

  .hero__subtitle {
    max-width: none;
    font-size: clamp(15px, 1.1vw, 16px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero__actions {
    flex-wrap: wrap;
    margin-top: clamp(20px, 3svh, 32px);
  }
}
/* Mobile portrait: logo + title on top, faces clear in the middle, subtitle + buttons at the bottom */
@media (max-width: 1023px) and (orientation: portrait) {
  .hero__overlay {
    background: var(--grad-hero-mobile);
  }

  .hero__overlay::after {
    display: none;
  }

  .hero__panel {
    align-items: stretch;
  }

  /* not position: relative, so the buttons position against .hero__panel; stretch keeps the box equal to the panel even while GSAP transforms it */
  .hero__content {
    justify-content: flex-start;
    align-self: stretch;
    padding-top: calc(var(--hero-inset) + 96px);
    padding-bottom: 0;
  }

  .hero__content .hero__actions {
    position: absolute;
    inset-inline: 16px;
    bottom: 100px;
    margin-top: 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
  }

  .hero__actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  @media (max-width: 349px) {
    .hero__content .hero__actions {
      flex-wrap: wrap;
    }
  }

  .hero__logo {
    display: none;
  }

  .hero__content {
    --hero-title-fs: clamp(22px, calc(7.4vw - 4px), 32px);
  }

  .hero__title {
    position: relative;
    z-index: 1;
    isolation: isolate;
    max-width: none;
    font-size: var(--hero-title-fs);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .hero__title::before {
    content: '';
    position: absolute;
    inset: -40% -12%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, var(--gold-20) 0%, var(--gold-12) 35%, transparent 70%);
  }

  /* calligraphy behind the two title lines; positions against the panel (the content box fills it) */
  .hero__callig {
    display: block;
    position: absolute;
    inset-inline-start: 50%;
    top: calc(var(--hero-inset) + 96px + var(--hero-title-fs) * 1.15);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-decor);
    font-weight: 700;
    font-size: clamp(110px, 34vw, 160px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--gold);
    opacity: 0.2;
  }

  [dir='rtl'] .hero__callig {
    transform: translate(50%, -50%);
  }

  .hero__subtitle {
    display: none;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: clamp(32px, 4vw, 48px);
}

/* Desktop hero: zoomed photo and one centered 65vw content container. Positions are % of the hero height, widths in vw. Placed last so it wins over the desktop rules above. */
@media (min-width: 1024px) {
  .hero__bg {
    overflow: hidden;
  }

  .hero__bg img {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -9.7%;
    top: -12.9%;
    max-width: none;
    object-fit: cover;
    object-position: 48.5% 64.5%;
  }

  .hero .hero__content {
    --hero-title-fs: clamp(40px, 3vw, 60px);
    position: absolute;
    inset: auto 16% 22% 16%;
    z-index: 1;
    display: grid;
    grid-template-columns: 30vw auto;
    justify-content: space-between;
    align-items: stretch;
    column-gap: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: start;
  }

  .hero .hero__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: block;
    width: 30vw;
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .hero .hero__logo img {
    display: block;
    width: 100%;
    max-width: none;
  }

  .hero .hero__logo::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 0.8vw 0 0;
    background: var(--gold-60);
  }

  .hero .hero__title {
    grid-column: 1;
    grid-row: 2;
    max-width: 30vw;
    margin: 0.8vw 0 0;
    font-size: clamp(22px, 1.8vw, 34px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: start;
    text-wrap: balance;
  }

  .hero .hero__subtitle {
    display: none;
  }

  .hero .hero__actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.8vw;
    margin: 0;
  }
}

/* Tablet (768px to 1023px): the same hero as desktop (logo, title and buttons over the photo), photo placed so both heads stay visible */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__panel {
    min-height: 0;
    aspect-ratio: 16 / 11.5;
  }

  .hero__bg {
    overflow: hidden;
  }

  .hero__bg img {
    position: absolute;
    width: 120%;
    height: 120%;
    left: -9.7%;
    top: -12.9%;
    max-width: none;
    object-fit: cover;
    object-position: 48.5% 64.5%;
  }

  .hero__overlay {
    background: var(--grad-hero-desktop);
  }

  .hero__overlay::after {
    display: none;
  }

  .hero .hero__content {
    position: absolute;
    inset: auto 8% 22% 8%;
    z-index: 1;
    display: grid;
    grid-template-columns: 36vw auto;
    justify-content: space-between;
    align-items: stretch;
    column-gap: 24px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: start;
  }

  .hero .hero__logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: block;
    width: 36vw;
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .hero .hero__logo img {
    display: block;
    width: 100%;
    max-width: none;
  }

  .hero .hero__logo::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    margin: 0.8vw 0 0;
    background: var(--gold-60);
  }

  .hero .hero__content .hero__title {
    grid-column: 1;
    grid-row: 2;
    max-width: 36vw;
    margin: 0.8vw 0 0;
    font-size: clamp(18px, 2.6vw, 24px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: start;
    text-wrap: balance;
  }

  .hero .hero__title::before {
    display: none;
  }

  .hero .hero__subtitle,
  .hero .hero__callig {
    display: none;
  }

  .hero .hero__content .hero__actions {
    position: static;
    inset: auto;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.8vw;
    margin: 0;
  }

  .hero .hero__actions .btn {
    min-height: 44px;
    padding: 12px 22px;
    font-size: 14px;
  }
}

/* Phone portrait: company name (semi-bold) and tagline (light) with the buttons under them, photo fully visible below, dock starts under the photo */
@media (max-width: 767px) and (orientation: portrait) {
  .hero__panel {
    min-height: 0;
    aspect-ratio: 4 / 6.0;
  }

  .hero__bg img {
    object-position: 50% 0%;
    transform: translateX(9%) scale(1.10);
    transform-origin: 100% 0;
  }

  .hero__content {
    align-items: flex-start;
    text-align: start;
    padding-top: calc(var(--hero-inset) + 96px);
  }

  .hero__subtitle {
    order: -1;
    display: block;
    max-width: none;
    margin: 0;
    font-size: clamp(21px, 5.8vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--white);
  }

  .hero__title {
    margin-top: 6px;
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--white-85);
  }

  .hero__title::before {
    display: none;
  }

  .hero__content .hero__actions {
    bottom: 16px;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  .hero .hero-dock {
    margin-top: 16px;
  }
}

/* Hero dock: glass panel overlapping the hero edge */
.hero-dock {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  padding: clamp(16px, 2.4vw, 32px);
  border-radius: var(--radius-panel);
  background: var(--white-85);
  box-shadow: var(--shadow-lg);
}

.hero-dock__title {
  margin: 0 0 var(--space-3);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.sector-row {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin-inline: calc(clamp(16px, 2.4vw, 32px) * -1);
  padding-inline: clamp(16px, 2.4vw, 32px);
  scroll-padding-inline: clamp(16px, 2.4vw, 32px);
  padding-bottom: 4px;
}

.sector-row {
  grid-auto-columns: minmax(150px, 46%);
}

.sector-row::-webkit-scrollbar {
  display: none;
}

.sector-row li {
  scroll-snap-align: start;
}

.sector-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  min-height: 132px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--gold-35);
  text-align: start;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

@media (hover: hover) {
  .sector-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: var(--shadow-md);
  }
}

.sector-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.sector-card__title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .sector-row {
    grid-auto-columns: minmax(170px, 30%);
  }
}

@media (max-width: 1023px) {
  .hero-dock {
    padding: 14px;
  }

  .sector-row {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    scroll-snap-type: none;
    overscroll-behavior-x: auto;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-padding-inline: 0;
  }

  .sector-card {
    align-items: center;
    text-align: center;
    padding: 14px 6px;
    gap: 8px;
    min-height: auto;
    height: 100%;
  }

  .sector-card__icon {
    width: 40px;
    height: 40px;
  }

  .sector-card__icon svg,
  .sector-card__icon img {
    width: 20px;
    height: 20px;
  }

  .sector-card__icon {
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }

  .sector-card.is-pressed {
    transform: scale(0.96);
  }

  .sector-card.is-pressed .sector-card__icon {
    background: var(--gold);
    color: var(--navy);
  }

  .sector-card__title {
    font-size: 13px;
    line-height: 1.3;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .sector-card.is-pressed {
    transform: none;
  }
}

@media (min-width: 1024px) {
  .sector-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .sector-card {
    min-height: 160px;
    padding: var(--space-3);
  }
}

/* Stats */
.stats {
  position: relative;
  z-index: 3; /* above the sectors dock (z 2) so its shadow and glow fall behind these cards */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

.stat__num [data-count] {
  display: inline-block; /* lets the count up end with a small scale pop */
}

.stat__num {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}

.stat__num::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 12px;
  background: var(--gold);
}

.stat__label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text-muted);
}

.stat__label small {
  font-size: var(--fs-xs);
  font-weight: 400;
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile: the 3 stats sit side by side */
@media (max-width: 767px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .stat {
    padding: 12px 10px;
  }

  .stat__num {
    font-size: 24px;
  }

  .stat__num::after {
    width: 20px;
    margin-top: 8px;
  }

  .stat__label {
    font-size: 13px;
    overflow-wrap: break-word;
  }

  .stat__label small {
    font-size: 11px;
  }
}

@media (min-width: 1280px) {
  .stat {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .stat__num::after {
    display: none;
  }

  .stat__label {
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid var(--gold);
  }
}

/* ================= Logos marquee ================= */
.logos {
  padding-block: var(--section-pad) calc(var(--section-pad) * 0.6);
  overflow: hidden;
  isolation: isolate;
}

/* Decor: star divider at the top, watermark centred in the gap between the divider and the heading */
.logos .decor-divider {
  top: var(--space-3);
}

.logos .decor-watermark {
  --wm-size: clamp(110px, 16vw, 220px);
  top: calc(var(--section-pad) / 2 + var(--space-3));
  transform: translateY(-50%);
}

@media (max-width: 639px) {
  .logos .decor-watermark {
    font-size: clamp(70px, 24vw, 110px);
  }
}

/* Decor: split watermark on the borders Companies/Why, Why/Team and Contact/Footer (two clipped copies, see layout.css "Decor").
   Companies and Team clip their own copy; Why, Contact and Footer already have overflow: hidden. */
.companies,
.team {
  overflow: clip;
}

/* Contact/Footer: the footer's top padding is smaller, so both copies are a little smaller (same size for the pair) */
.contact .decor-watermark--edge-bottom,
.footer .decor-watermark--edge-top {
  --wm-size: clamp(120px, 16vw, 224px);
}

/* ================= Gallery scroll (pinned on desktop) ================= */
.gallery-scroll {
  position: relative;
  padding-top: calc(var(--section-pad) * 0.4);
  padding-bottom: var(--section-pad);
  isolation: isolate; /* decor sits behind the heading; no overflow: hidden here, it would break the pin */
}

.gs-stage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding-inline: var(--gutter);
}

.gs-tile,
.gs-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--navy-08);
}

.gs-tile {
  aspect-ratio: 4 / 3;
}

.gs-hero {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
}

.gs-tile picture,
.gs-hero picture,
.gs-tile img,
.gs-hero img {
  width: 100%;
  height: 100%;
}

.gs-tile img,
.gs-hero img {
  object-fit: cover;
}

/* Tint: darkest in the centre behind the text and at the bottom, light at the edges so the photo keeps its colors */
.gs-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, var(--navy-72), var(--navy-40) 55%, transparent 100%),
    linear-gradient(to top, var(--navy-85), transparent 55%);
  pointer-events: none;
}

/* Film grain: static noise, no animation */
.gs-hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}

/* Calligraphy behind the caption, outline only. Fades in with the tint through --overlay. */
.gs-hero__mark {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font-family: var(--font-decor);
  font-weight: 700;
  font-size: clamp(88px, 26vw, 180px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  opacity: calc(var(--overlay, 1) * 0.25);
  user-select: none;
  pointer-events: none;
}

/* Corner frame: four gold L shapes, drawn in by --frame (0 to 1). Symmetric, so physical sides are fine in RTL. */
.gs-hero__frame {
  position: absolute;
  inset: var(--space-3);
  z-index: 1;
  pointer-events: none;
}

.gs-hero__frame i {
  position: absolute;
  width: 32px;
  height: 32px;
}

.gs-hero__frame i::before,
.gs-hero__frame i::after {
  content: '';
  position: absolute;
  background: var(--gold);
}

.gs-hero__frame i::before {
  inset-inline: 0;
  height: 1.5px;
  transform: scaleX(var(--frame, 1));
}

.gs-hero__frame i::after {
  inset-block: 0;
  width: 1.5px;
  transform: scaleY(var(--frame, 1));
}

.gs-hero__frame i:nth-child(1) { top: 0; left: 0; }
.gs-hero__frame i:nth-child(2) { top: 0; right: 0; }
.gs-hero__frame i:nth-child(3) { bottom: 0; left: 0; }
.gs-hero__frame i:nth-child(4) { bottom: 0; right: 0; }

.gs-hero__frame i:nth-child(1)::before { top: 0; transform-origin: left; }
.gs-hero__frame i:nth-child(1)::after { left: 0; transform-origin: top; }
.gs-hero__frame i:nth-child(2)::before { top: 0; transform-origin: right; }
.gs-hero__frame i:nth-child(2)::after { right: 0; transform-origin: top; }
.gs-hero__frame i:nth-child(3)::before { bottom: 0; transform-origin: left; }
.gs-hero__frame i:nth-child(3)::after { left: 0; transform-origin: bottom; }
.gs-hero__frame i:nth-child(4)::before { bottom: 0; transform-origin: right; }
.gs-hero__frame i:nth-child(4)::after { right: 0; transform-origin: bottom; }

.gs-hero__caption {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  color: var(--white);
  text-align: center;
}

/* Frosted card (also .glass-dark in the markup for blur, border and fallback) */
.gs-hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-card);
}

.gs-hero__text {
  position: relative;
  display: block;
  margin: 0;
  max-width: min(100%, calc(20ch + 0.6em));
  font-size: clamp(28px, 5vw, 76px);
  font-weight: 700;
  line-height: var(--lh-tight);
  text-wrap: balance;
  text-shadow: 0 2px 12px var(--navy-40);
}

/* Gold line reveal: --p (0 to 1) drives the clip and the line together; the line is hidden in the static layout */
.gs-hero__words {
  display: block;
  padding: 0.12em 0.3em;
  clip-path: inset(0 calc(100% * (1 - var(--p, 1))) 0 0);
}

[dir='rtl'] .gs-hero__words {
  clip-path: inset(0 0 0 calc(100% * (1 - var(--p, 1))));
}

.gs-hero__line {
  display: none;
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(100% * var(--p, 0));
  width: 2px;
  margin-inline-start: -1px;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold-60);
  pointer-events: none;
}

/* Gold key word with one light sweep (--shine 0 to 1), flat gold when --shine is not set */
.gs-hero__text .kw {
  color: var(--gold);
  text-shadow: none;
  filter: drop-shadow(0 2px 12px var(--navy-40));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gs-hero__text .kw {
    background: linear-gradient(100deg, var(--gold) 40%, var(--white-85) 50%, var(--gold) 60%) no-repeat;
    background-size: 250% 100%;
    background-position: calc((1 - var(--shine, 0)) * 100%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  [dir='rtl'] .gs-hero__text .kw {
    background-position: calc(var(--shine, 0) * 100%) 0;
  }
}

/* Mobile and tablet: the photo is tall, so the caption is sized to fill the card instead of sitting small in the middle */
@media (max-width: 1023px) {
  /* The longest English word ("generations") must fit inside the card on a 375px phone, so the size is a bit smaller */
  .gs-hero__text {
    max-width: 100%;
    font-size: clamp(30px, 9.6vw, 84px);
    line-height: 1.15;
  }

  /* One column that can never be wider than the photo, so the card stays centered and is never cut off */
  .gs-hero__caption {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-hero__card {
    min-width: 0;
    padding: var(--space-3) var(--space-3);
  }
}

@media (min-width: 1024px) {
  .gs-hero__mark {
    font-size: clamp(180px, 24vw, 360px);
  }

  .gs-hero__frame i {
    width: 40px;
    height: 40px;
  }

  .gs-hero__caption {
    padding: var(--space-8);
  }

  .gs-hero__card {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
  }
}

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

  .gs-hero {
    grid-column: span 4;
    aspect-ratio: 16 / 8;
  }
}

/* With motion (all sizes): scattered tiles around one image that grows to full width.
   Reduced motion keeps the simple grid above. */
@media (prefers-reduced-motion: no-preference) {
  .gallery-scroll {
    padding-bottom: 0;
  }

  .gs-stage {
    position: relative;
    display: block;
    height: 100svh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .gs-hero {
    position: absolute;
    inset: var(--hero-inset);
    aspect-ratio: auto;
    border-radius: var(--radius-panel);
    transform: scale(0.34);
  }

  /* Tint and calligraphy stay off while the photo grows, GSAP fades them in through --overlay */
  .gs-hero::after {
    opacity: var(--overlay, 0);
  }

  .gs-hero__mark {
    opacity: calc(var(--overlay, 0) * 0.25);
  }

  /* The gold line only exists in the scrubbed version */
  .gs-hero__line {
    display: block;
    opacity: 0;
  }

  .gs-tile {
    position: absolute;
    aspect-ratio: 3 / 2;
    z-index: 1;
    box-shadow: var(--shadow-lg);
  }
}

/* Mobile and tablet with motion: main photo plus 4 tiles in the corners, mirrored in Arabic by the logical insets.
   Tile height stays under about 22 percent of the stage, so the tiles never cover the small main photo.
   The main photo sits above the tiles, so they go behind it as it grows.
   svh only (no dvh), so the pinned stage does not change size when the address bar shows or hides. */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .gs-stage {
    height: 100vh;
    height: 100svh;
  }

  .gs-hero {
    z-index: 2;
  }

  .gs-tile {
    width: min(42%, 33svh);
  }

  .gs-tile--1 { inset-inline-start: 5%; top: 4%; }
  .gs-tile--2 { inset-inline-end: 5%; top: 9%; }
  .gs-tile--3 { inset-inline-start: 5%; bottom: 9%; }
  .gs-tile--4 { inset-inline-end: 5%; bottom: 4%; }

  .gs-tile--5,
  .gs-tile--6,
  .gs-tile--7,
  .gs-tile--8 {
    display: none;
  }
}

/* Desktop with motion: tile positions */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .gs-tile--1 { left: 4%;  top: 9%;  width: 19%; }
  .gs-tile--2 { left: 27%; top: 4%;  width: 15%; }
  .gs-tile--3 { left: 52%; top: 3%;  width: 14%; }
  .gs-tile--4 { left: 74%; top: 8%;  width: 21%; }
  .gs-tile--5 { left: 3%;  top: 60%; width: 17%; }
  .gs-tile--6 { left: 24%; top: 76%; width: 15%; }
  .gs-tile--7 { left: 60%; top: 77%; width: 15%; }
  .gs-tile--8 { left: 78%; top: 56%; width: 18%; }
}

/* ================= Mission ================= */
.mission {
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Royal background: glow, arch frame and star pattern behind the mission text */
.mission__decor {
  position: absolute;
  inset: 2% 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.mission__decor > * {
  grid-area: 1 / 1;
}

.mission__glow {
  width: min(900px, 90vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--gold-20) 0%, var(--gold-12) 30%, transparent 65%);
}

.mission__arch {
  height: 100%;
  width: auto;
  max-width: 96vw;
  overflow: visible;
}

.mission__arch--wide {
  display: none;
}

.mission__arch-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.4; /* fully drawn by default, animations.js draws it on scroll */
}

.mission__arch-line--inner {
  stroke-width: 1;
  opacity: 0.22;
}

/* Glowing dots on the drawing tips, only shown while animations.js draws the arch */
.mission__arch-dot {
  fill: var(--gold);
  opacity: 0;
}

.mission__stars {
  opacity: 0.06;
}

.mission__star {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

@media (min-width: 768px) {
  .mission__arch--wide {
    display: block;
  }

  .mission__arch--tall {
    display: none;
  }

  .mission__arch--wide .mission__arch-line {
    stroke-width: 1.3;
  }

  .mission__arch--wide .mission__arch-line--inner {
    stroke-width: 0.8;
  }
}

.mission__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mission__inner .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.mission__text {
  max-width: 22ch;
  margin-block: var(--space-3) clamp(40px, 5vw, 64px);
  font-size: clamp(28px, 4.6vw, 64px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.mission__text .kw {
  color: var(--gold);
}

/* A key word and the punctuation after it never break apart */
.mission__text .kw-group {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .mission__text {
    max-width: 26ch;
  }
}

/* ================= About ================= */
.about {
  isolation: isolate;
}

.about__grid {
  display: grid;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

.about__media {
  position: relative;
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
}

.about__frame {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid var(--gold);
  outline: 1px solid var(--gold-45);
  outline-offset: 10px;
}

.about__frame picture,
.about__frame img {
  width: 100%;
  height: 100%;
}

.about__frame img {
  object-fit: cover;
  object-position: center 20%;
}

.about__draw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
}

.about__badge {
  position: absolute;
  inset-inline-start: clamp(-24px, -2vw, -8px);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 16px);
  padding: 14px 20px 14px 14px;
  padding-inline: 14px 20px;
  border-radius: var(--radius-card);
  background: var(--navy-72);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
}

.about__badge-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
}

.about__text {
  margin-block: var(--space-3) var(--space-5);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.about__content h2 {
  max-width: 18ch;
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 5fr 6fr;
  }
}

/* Images that get a subtle parallax need a frame that hides the overflow */
.parallax-media {
  display: block;
  overflow: hidden;
}

/* ================= Companies ================= */
.companies {
  background: var(--white);
  isolation: isolate;
}

.co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.co-card {
  border-radius: var(--radius-card);
  background: var(--cream);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.co-card.is-hidden {
  display: none;
}

.co-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.co-card__link {
  position: relative;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.co-card__logo {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--white);
  aspect-ratio: 600 / 278;
}

.co-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}

.co-card:hover .co-card__logo img {
  transform: scale(1.06);
}

.co-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: var(--space-2) 10px 4px;
}

.co-card__tag {
  align-self: flex-start;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--gold-20);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.co-card__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.co-card__desc {
  flex: 1;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

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

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

/* Mobile: compact 2 column company grid */
@media (max-width: 639px) {
  .co-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .co-card__link {
    padding: 8px;
  }

  .co-card__body {
    padding-inline: 8px;
  }

  .co-card__tag {
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .co-card__name {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .co-card__desc {
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .co-card .link-arrow {
    min-height: 0;
    gap: 0;
  }

  .co-card .link-arrow > span:not(.arrow-swap) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.companies__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ================= Why choose us ================= */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.why-card {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-60);
}

.why-card__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 1px solid var(--gold-45);
  color: var(--gold);
}

.why-card__icon .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.25;
}

.why-card h3 {
  margin-bottom: 12px;
}

.why-card p {
  font-size: 15px;
  color: var(--color-on-dark-muted);
}

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

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

/* Mobile: compact 2 column grid */
@media (max-width: 767px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .why-card {
    padding: 12px;
  }

  .why-card__icon {
    width: 36px;
    height: 36px;
    margin-bottom: 6px;
  }

  .why-card__icon .icon {
    width: 18px;
    height: 18px;
  }

  .why-card h3 {
    font-size: 14px;
    line-height: 1.25;
    margin-bottom: 4px;
    overflow-wrap: break-word;
  }

  .why-card p {
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }

  /* A card that has the full width (one per row) is not compact: it gets the normal sizes */
  .about-vision .why-card,
  .why-grid > .why-card:last-child:nth-child(odd) {
    padding: 20px;
  }

  .about-vision .why-card h3,
  .why-grid > .why-card:last-child:nth-child(odd) h3 {
    margin-bottom: 8px;
    font-size: var(--fs-h3);
    line-height: 1.3;
  }

  .about-vision .why-card p,
  .why-grid > .why-card:last-child:nth-child(odd) p {
    font-size: 15px;
    line-height: 1.65;
  }

  .about-vision .why-card .why-card__icon,
  .why-grid > .why-card:last-child:nth-child(odd) .why-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }

  .about-vision .why-card .why-card__icon .icon,
  .why-grid > .why-card:last-child:nth-child(odd) .why-card__icon .icon {
    width: 24px;
    height: 24px;
  }
}

/* ================= Team ================= */
.team {
  isolation: isolate;
}

.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
  gap: clamp(32px, 4vw, 48px) var(--space-3);
}

.team-card {
  position: relative;
  padding-bottom: 48px;
}

.team-card__photo {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold-45);
  background: var(--white);
}

.team-card__photo picture,
.team-card__photo img {
  width: 100%;
  height: 100%;
}

.team-card__photo img {
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.team-card:hover .team-card__photo img {
  transform: scale(1.06);
}

/* Soft gold overlay on card images when hovered */
.team-card__photo,
.event-card__thumb {
  position: relative;
}

.team-card__photo::after,
.event-card__media::after,
.event-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-20);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.team-card:hover .team-card__photo::after,
.event-card__media:hover::after,
.event-card__thumb:hover::after {
  opacity: 1;
}

.event-card__media picture {
  transition: transform 0.9s var(--ease);
}

.event-card__media:hover picture {
  transform: scale(1.06);
}

.team-card__plate {
  position: absolute;
  inset-inline: 16px;
  bottom: 0;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--white-85);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.team-card__plate h3 {
  font-size: 16px;
  line-height: 1.35;
}

.team-card__plate p {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.team-card__plate p::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  margin: 0 auto 6px;
  background: var(--gold);
}

@media (min-width: 640px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 320px));
  }
}

@media (min-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 300px));
  }
}

/* Mobile: compact 2 column leadership grid, name plate below the photo */
@media (max-width: 639px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .team-card {
    padding-bottom: 0;
  }

  .team-card__plate {
    position: static;
    margin-top: 8px;
    padding: 10px 8px;
  }

  .team-card__plate h3 {
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  .team-card__plate p {
    font-size: 12.5px;
    overflow-wrap: anywhere;
  }
}

/* ================= News & events ================= */
.news {
  background: var(--white);
  isolation: isolate;
}

/* Decor: star divider at the top, teal glow in the corner away from the Visit Gallery button */
.news .decor-divider {
  top: var(--space-3);
}

.news__glow {
  top: 0;
  inset-inline-start: 0;
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.news__head .section-head {
  margin-bottom: 0;
}

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

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.event-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-panel);
}

.event-card__media picture,
.event-card__media img {
  width: 100%;
  height: 100%;
}

.event-card__media img {
  object-fit: cover;
}

.event-card__tag {
  z-index: 1;
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-card__body {
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin: -64px 12px 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--white-85);
  box-shadow: var(--shadow-md);
}

.event-card__body h3 {
  font-size: clamp(18px, 1.8vw, 24px);
}

.event-card__place {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.event-card__place .icon {
  color: var(--gold);
}

.event-card__thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.event-card__thumb {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
}

.event-card__thumb picture,
.event-card__thumb img {
  width: 100%;
  height: 100%;
}

.event-card__thumb img {
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.event-card__thumb:hover img {
  transform: scale(1.06);
}

@media (min-width: 640px) {
  .event-card__body {
    grid-template-columns: 1fr minmax(0, 220px);
    align-items: center;
    margin-inline: 24px;
  }
}

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

  .event-card__body {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .event-card__body {
    grid-template-columns: 1fr minmax(0, 200px);
  }
}

/* ================= Crypto banner ================= */
.crypto {
  padding-block: calc(var(--section-pad) * 0.6);
}

.crypto__banner {
  position: relative;
  display: grid;
  gap: var(--space-4);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--radius-panel);
  background: var(--grad-navy);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}

.crypto__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--white-22);
  background: radial-gradient(circle at 85% 20%, var(--gold-20), transparent 50%);
}

/* Gold light sweep: --sweep (-100 to 100) is animated by animations.js; parked outside the banner (clipped by overflow hidden) */
.crypto__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--gold) 25%, transparent) 50%, transparent 65%);
  transform: translateX(calc(var(--sweep, -100) * 1%));
}

.crypto__content h2 {
  max-width: 16ch;
}

.crypto__content p {
  max-width: 44ch;
  margin-block: var(--space-2) var(--space-4);
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

@media (min-width: 1024px) {
  .crypto__banner {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-8);
  }
}

/* ================= Contact ================= */
.contact {
  overflow: hidden;
  isolation: isolate;
}

/* Decor: soft glows behind the two glass panels */
.contact__glow-gold {
  top: 38%;
  inset-inline-start: 0;
}

.contact__glow-teal {
  bottom: 4%;
  inset-inline-end: 0;
}

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

.contact-info,
.contact-form {
  padding: clamp(24px, 3.5vw, 48px);
  border-radius: var(--radius-panel);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-info__list {
  display: grid;
  gap: var(--space-3);
}

.contact-info__list li {
  display: flex;
  gap: var(--space-2);
}

.contact-info__list div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-info__list strong {
  font-size: var(--fs-small);
  font-weight: 600;
}

.contact-info__list div > span,
.contact-info__list a {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.contact-info__list a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur) var(--ease);
}

.contact-info__list a:hover {
  color: var(--navy);
}

.contact-info__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.contact-info__icon .icon {
  width: 22px;
  height: 22px;
}

.contact-info__wa {
  align-self: flex-start;
}

.contact-form h3 {
  margin-bottom: var(--space-3);
  font-size: clamp(20px, 2vw, 28px);
}

.form-grid {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.contact-form .form-success {
  margin-top: var(--space-3);
}

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

  .form-grid .field:nth-child(3),
  .form-grid .field:nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* Newsletter strip */
.newsletter {
  display: grid;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-panel);
}

.newsletter h3 {
  font-size: clamp(20px, 2vw, 26px);
}

.newsletter__text p {
  color: var(--color-text-muted);
}

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

.newsletter__success {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  font-weight: 500;
}

.newsletter__success .icon {
  color: var(--gold);
}

@media (min-width: 640px) {
  .newsletter__form {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .newsletter {
    grid-template-columns: 1fr 1.2fr;
  }
}

/* ================= Footer ================= */
.footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(64px, 8vw, 112px);
  background: var(--navy);
  color: var(--white-85);
  font-size: 15px;
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer__brand img {
  width: min(75vw, 300px);
  height: auto;
}

.footer__brand p {
  max-width: 34ch;
  margin-block: var(--space-3);
  color: var(--white-72);
}

.footer__social {
  display: flex;
  gap: 12px;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--white-22);
  color: var(--gold);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer__social a:hover {
  background: var(--gold);
  color: var(--navy);
}

.footer__social .icon {
  width: 20px;
  height: 20px;
}

.footer__col h3 {
  margin-bottom: var(--space-3);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.footer__col h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 12px;
  background: var(--gold);
}

.footer__col ul {
  display: grid;
  gap: 4px;
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--white-72);
  line-height: 1.4;
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover {
  color: var(--gold);
}

.footer__companies {
  font-size: 14px;
}

.footer__contact li {
  display: flex;
  gap: 12px;
  padding-block: 6px;
  color: var(--white-72);
  overflow-wrap: anywhere;
}

.footer__contact .icon {
  margin-top: 4px;
  color: var(--gold);
}

.footer__contact a {
  min-height: 28px;
}

.footer__lang {
  margin-top: var(--space-2);
  color: var(--white);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-top: 1px solid var(--white-22);
  font-size: 13px;
  color: var(--white-72);
  text-align: center;
}

.footer__credit a {
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--gold);
}

@media (min-width: 768px) {
  .footer__brand img {
    width: 300px;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__companies {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-3);
  }
}

@media (min-width: 1200px) {
  .footer__grid {
    grid-template-columns: 1.3fr 0.8fr 2fr 1.3fr;
  }
}

/* Section background patterns (behind content, never inside cards). Khatam, jaali and geo are the same shapes as the sprite in index.html. */
.logos,
.mission,
.why,
.team,
.news,
.crypto,
.contact,
.about-hero,
.about-career,
.about-ventures,
.about-vision,
.about-future,
.gallery-hero,
.gallery-main,
.crypto-hero,
.crypto-coins,
.crypto-steps,
.crypto-why,
.crypto-contact,
.companies-hero,
.companies-main,
.cp-hero,
.cp-about,
.cp-services,
.cp-plans,
.cp-others,
.cp-history,
.cp-achievements,
.cp-roadmap {
  isolation: isolate;
}

.logos::before,
.mission::before,
.why::before,
.team::before,
.news::before,
.crypto::before,
.contact::before,
.about-hero::before,
.about-career::before,
.about-ventures::before,
.about-vision::before,
.about-future::before,
.gallery-hero::before,
.gallery-main::before,
.crypto-hero::before,
.crypto-coins::before,
.crypto-steps::before,
.crypto-why::before,
.crypto-contact::before,
.companies-hero::before,
.companies-main::before,
.cp-hero::before,
.cp-about::before,
.cp-services::before,
.cp-plans::before,
.cp-others::before,
.cp-history::before,
.cp-achievements::before,
.cp-roadmap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.logos::before,
.team::before,
.contact::before,
.about-ventures::before,
.crypto-coins::before,
.crypto-contact::before,
.companies-main::before,
.cp-about::before,
.cp-others::before,
.cp-history::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23003A4E' stroke-width='1'%3E%3Cpath d='M16.4 16.4h31.2v31.2H16.4z'/%3E%3Cpath d='M32 10l22 22-22 22-22-22z'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.035;
}

.mission::before,
.news::before,
.crypto::before,
.about-career::before,
.about-future::before,
.gallery-main::before,
.crypto-steps::before,
.cp-services::before,
.cp-achievements::before,
.cp-roadmap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23003A4E' stroke-width='1'%3E%3Cpath d='M14.6 14.6h26.8v26.8H14.6z'/%3E%3Cpath d='M28 9l19 19-19 19-19-19z'/%3E%3Ccircle cx='28' cy='28' r='19'/%3E%3Ccircle cx='0' cy='0' r='9'/%3E%3Ccircle cx='56' cy='0' r='9'/%3E%3Ccircle cx='0' cy='56' r='9'/%3E%3Ccircle cx='56' cy='56' r='9'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.035;
}

.why::before,
.about-hero::before,
.about-vision::before,
.gallery-hero::before,
.crypto-hero::before,
.crypto-why::before,
.companies-hero::before,
.cp-hero::before,
.cp-plans::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23F1C579' stroke-width='1'%3E%3Cpath d='M18 18h44v44H18z'/%3E%3Cpath d='M40 9l31 31-31 31L9 40z'/%3E%3Ccircle cx='40' cy='40' r='10'/%3E%3Cpath d='M0 0l18 18M80 0L62 18M0 80l18-18M80 80L62 62M40 0v9M40 80v-9M0 40h9M80 40h-9'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.06;
}

/* Each section gets a slightly different scale and offset so no two look the same. */
.logos::before { background-size: 56px 56px; background-position: 0 0; }
.team::before { background-size: 84px 84px; background-position: 20px 12px; }
.contact::before { background-size: 48px 48px; background-position: 8px 24px; }
.mission::before { background-size: 60px 60px; background-position: 0 0; }
.news::before { background-size: 76px 76px; background-position: 30px 18px; }
.crypto::before { background-size: 44px 44px; background-position: 14px 6px; }
.why::before { background-size: 96px 96px; background-position: 24px 24px; }
.crypto-hero::before { background-size: 86px 86px; background-position: 14px 18px; }
.crypto-coins::before { background-size: 58px 58px; background-position: 12px 10px; }
.crypto-steps::before { background-size: 70px 70px; background-position: 22px 16px; }
.crypto-why::before { background-size: 100px 100px; background-position: 28px 12px; }
.crypto-contact::before { background-size: 52px 52px; background-position: 4px 20px; }
.companies-hero::before { background-size: 90px 90px; background-position: 16px 14px; }
.companies-main::before { background-size: 60px 60px; background-position: 8px 18px; }
.cp-hero::before { background-size: 92px 92px; background-position: 20px 10px; }
.cp-about::before { background-size: 62px 62px; background-position: 14px 20px; }
.cp-services::before { background-size: 74px 74px; background-position: 26px 8px; }
.cp-plans::before { background-size: 98px 98px; background-position: 30px 16px; }
.cp-others::before { background-size: 56px 56px; background-position: 6px 12px; }
.cp-history::before { background-size: 66px 66px; background-position: 18px 14px; }
.cp-achievements::before { background-size: 78px 78px; background-position: 10px 24px; }
.cp-roadmap::before { background-size: 58px 58px; background-position: 22px 6px; }
.about-hero::before { background-size: 88px 88px; background-position: 12px 20px; }
.about-career::before { background-size: 68px 68px; background-position: 16px 8px; }
.about-ventures::before { background-size: 72px 72px; background-position: 24px 14px; }
.about-vision::before { background-size: 92px 92px; background-position: 30px 10px; }
.about-future::before { background-size: 52px 52px; background-position: 6px 18px; }
.gallery-hero::before { background-size: 90px 90px; background-position: 18px 12px; }
.gallery-main::before { background-size: 64px 64px; background-position: 10px 22px; }

/* ================= About page ================= */
.about-hero {
  padding-top: clamp(112px, 9vw, 136px);
  padding-bottom: clamp(64px, 7vw, 104px);
}

.about-hero__grid,
.about-vision__grid,
.about-career__grid {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.about-hero h1 {
  max-width: 16ch;
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
}

.about-hero__lead {
  margin-top: var(--space-3);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

.about__frame--wide {
  aspect-ratio: 4 / 3;
}

.about-career__grid,
.about-vision__grid {
  align-items: start;
}

/* section--dark clips overflow, which would stop the sticky photo; clip does not create a scroll container */
.about-vision {
  overflow: clip;
  padding-top: calc(var(--section-pad) + var(--space-8));
}

.about-career__main .section-head {
  max-width: none;
  margin-bottom: var(--space-5);
}

.about-career__cards,
.about-vision__cards {
  display: grid;
  gap: var(--space-3);
}

.about-card {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-card);
}

.about-card h3 {
  margin-bottom: var(--space-1);
}

.about-card p {
  color: var(--color-text-muted);
}

.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.about-photos__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold);
}

.about-photos__item--main {
  grid-column: 1 / -1;
}

.about-photos__item picture,
.about-photos__item img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-photos__item img {
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.about-ventures {
  overflow: clip;
}

.about-ventures__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.about-venture {
  border-radius: var(--radius-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.about-venture:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.about-venture__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  height: 100%;
  padding: clamp(24px, 3vw, 32px);
}

.about-venture__logo {
  display: block;
  height: 56px;
  aspect-ratio: 600 / 278;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-08);
  background: var(--white);
}

.about-venture__logo picture,
.about-venture__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.about-venture__logo img {
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}

.about-venture:hover .about-venture__logo img {
  transform: scale(1.06);
}

.about-venture__name {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.about-venture__role {
  flex: 1;
  color: var(--color-text-muted);
}

.about-future__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

  .about-venture:last-child {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .about-hero__grid {
    grid-template-columns: 6fr 5fr;
  }

  .about-vision__grid {
    grid-template-columns: 5fr 6fr;
  }

  .about-career__grid {
    grid-template-columns: 6fr 5fr;
  }

  .about-photos {
    position: sticky;
    top: 120px;
  }

  .about-ventures__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-venture:first-child {
    grid-column: span 2;
  }
}

/* Wide venture cards (span 2 columns): large logo tile beside bigger text */
@media (min-width: 640px) {
  .about-venture:last-child .about-venture__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: var(--space-1);
  }

  .about-venture:last-child .about-venture__logo {
    grid-row: 1 / -1;
    height: clamp(96px, 9vw, 120px);
  }

  .about-venture:last-child .about-venture__name {
    font-size: clamp(22px, 2vw, 28px);
  }

  .about-venture:last-child .about-venture__role {
    font-size: var(--fs-lead);
  }

  .about-venture:last-child .link-arrow {
    align-self: end;
  }
}

@media (min-width: 1024px) {
  .about-venture:first-child .about-venture__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: clamp(24px, 3vw, 48px);
    row-gap: var(--space-1);
  }

  .about-venture:first-child .about-venture__logo {
    grid-row: 1 / -1;
    height: clamp(96px, 9vw, 120px);
  }

  .about-venture:first-child .about-venture__name {
    font-size: clamp(22px, 2vw, 28px);
  }

  .about-venture:first-child .about-venture__role {
    font-size: var(--fs-lead);
  }

  .about-venture:first-child .link-arrow {
    align-self: end;
  }
}

/* ================= Gallery page ================= */
.gallery-hero {
  padding-top: clamp(140px, 15vw, 210px);
}

.gallery-hero__inner {
  max-width: 880px;
  text-align: center;
}

.gallery-hero h1 {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
}

.gallery-hero__lead {
  margin: var(--space-3) auto 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.gallery-filter__btn {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.gallery-filter__btn:hover,
.gallery-filter__btn:focus-visible {
  background: var(--gold-20);
}

.gallery-filter__btn[aria-pressed='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.gallery-album {
  margin-bottom: clamp(56px, 7vw, 104px);
  transition: opacity 220ms var(--ease);
}

.gallery-album:last-child {
  margin-bottom: 0;
}

.gallery-album[hidden] {
  display: none;
}

.gallery-album.is-fading {
  opacity: 0;
}

.gallery-album__head {
  max-width: 720px;
  margin-bottom: var(--space-5);
}

.gallery-album__head h2 {
  font-size: var(--fs-h2);
}

.gallery-album__head p {
  margin-top: var(--space-1);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(140px, 30vw, 220px);
  grid-auto-flow: dense;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold-45);
  box-shadow: var(--shadow-sm);
}

.g-c8,
.g-c6 {
  grid-column: span 2;
}

.g-r2 {
  grid-row: span 2;
}

.g-tile__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--navy-08);
  cursor: zoom-in;
}

.g-tile__btn picture,
.g-tile__btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.g-tile__btn img {
  object-fit: cover;
  object-position: center 30%;
  transition: transform var(--dur) var(--ease);
}

.g-tile__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--gold-45) 0%, var(--gold-12) 45%, transparent 75%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.g-tile__btn:hover img,
.g-tile__btn:focus-visible img {
  transform: scale(1.06);
}

.g-tile__btn:hover::after,
.g-tile__btn:focus-visible::after {
  opacity: 1;
}

.g-tile__btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(150px, 15vw, 230px);
    gap: var(--space-3);
  }

  .g-c3 { grid-column: span 3; }
  .g-c4 { grid-column: span 4; }
  .g-c6 { grid-column: span 6; }
  .g-c8 { grid-column: span 8; }
  .g-right { grid-column: 5 / span 8; }
}

/* Lightbox: full-screen dark glass viewer */
.g-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: var(--navy-92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--white);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.g-lightbox[hidden] {
  display: none;
}

.g-lightbox.is-open {
  opacity: 1;
}

.g-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: min(92vw, 1400px);
  margin: 0;
  transform: scale(0.97);
  transition: transform 240ms var(--ease);
}

.g-lightbox.is-open .g-lightbox__figure {
  transform: none;
}

.g-lightbox__stage picture,
.g-lightbox__stage img {
  display: block;
}

.g-lightbox__stage img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.g-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px var(--space-2);
  max-width: 900px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

.g-lightbox__album {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.g-lightbox__count {
  font-variant-numeric: tabular-nums;
  color: var(--white-55);
}

.g-lightbox__close,
.g-lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--white-22);
  border-radius: 50%;
  background: var(--white-10);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.g-lightbox__close {
  top: clamp(12px, 2vw, 28px);
  inset-inline-end: clamp(12px, 2vw, 28px);
}

.g-lightbox__nav {
  top: 50%;
  margin-top: -26px;
}

.g-lightbox__prev {
  inset-inline-start: clamp(12px, 2vw, 32px);
}

.g-lightbox__next {
  inset-inline-end: clamp(12px, 2vw, 32px);
}

.g-lightbox__ico {
  display: inline-flex;
  transform: rotate(180deg);
}

.g-lightbox__close:hover,
.g-lightbox__close:focus-visible,
.g-lightbox__nav:hover,
.g-lightbox__nav:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* Mobile and tablet: the arrows leave the photo and sit on the two sides of the album title under it,
   so they never cover the picture. The figure is flattened (display: contents) so the photo, the arrows and
   the caption can share one grid. In Arabic the grid mirrors by itself. */
@media (max-width: 1023px) {
  .g-lightbox {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    grid-template-rows: auto auto;
    align-content: center;
    place-items: start center;
    gap: var(--space-3) 10px;
  }

  .g-lightbox__figure {
    display: contents;
  }

  .g-lightbox__stage {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    max-width: 100%;
  }

  .g-lightbox__stage img {
    max-height: 62svh;
  }

  .g-lightbox__nav {
    position: static;
    margin: 0;
    grid-row: 2;
    align-self: center;
  }

  .g-lightbox__prev {
    grid-column: 1;
  }

  .g-lightbox__next {
    grid-column: 3;
  }

  .g-lightbox__caption {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-album,
  .g-tile__btn img,
  .g-tile__btn::after,
  .g-lightbox,
  .g-lightbox__figure {
    transition: none;
  }

  .g-lightbox__figure {
    transform: none;
  }
}

/* Gallery page: the pattern keeps its normal strength and fades out softly behind text blocks (no edges, no boxes) */
.gallery-hero__inner,
.gallery-filter,
.gallery-album__head {
  position: relative;
}

.gallery-hero__inner::before,
.gallery-filter::before,
.gallery-album__head::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.gallery-hero__inner::before {
  inset: -64px -120px;
  background: radial-gradient(ellipse at center, var(--navy-85) 30%, var(--navy-45) 55%, transparent 74%);
}

.gallery-filter::before {
  inset: -40px -120px;
  background: radial-gradient(ellipse at center, var(--cream) 35%, var(--cream-92) 48%, transparent 72%);
}

.gallery-album__head::before {
  inset: -48px -96px;
  background: radial-gradient(ellipse at 35% 50%, var(--cream) 35%, var(--cream-92) 48%, transparent 74%);
}

[dir='rtl'] .gallery-album__head::before {
  background: radial-gradient(ellipse at 65% 50%, var(--cream) 35%, var(--cream-92) 48%, transparent 74%);
}

/* Phones and small tablets: the glow stays inside the page gutter so it cannot push the page wider than the screen */
@media (max-width: 767px) {
  .gallery-album__head::before {
    inset: -48px -16px;
  }
}

/* Gallery hero: two photo rows drifting in opposite directions (reuses the .marquee CSS), strong navy fade behind the text */
.gallery-hero--photos {
  display: grid;
  place-items: center;
  min-height: clamp(380px, 36vw, 480px);
  padding-top: clamp(104px, 10vw, 132px);
  padding-bottom: clamp(40px, 4vw, 56px);
}

.gallery-hero--photos::before {
  display: none;
}

.gallery-hero__marquee {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.gallery-hero__marquee .marquee {
  --gap: 8px;
  --speed: 110s;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.gallery-hero__marquee .marquee__track,
.gallery-hero__marquee .marquee__list,
.gallery-hero__marquee li,
.gallery-hero__marquee picture {
  height: 100%;
}

.gallery-hero__marquee picture {
  display: block;
}

.gallery-hero__marquee img {
  display: block;
  width: auto;
  height: 100%;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.gallery-hero--photos::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--navy-85);
}

.gallery-hero--photos .gallery-hero__inner {
  width: 100%;
}

.gallery-hero--photos .eyebrow {
  color: var(--gold);
  opacity: 1;
}

.gallery-hero--photos .eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
}

.gallery-hero--photos .gallery-hero__lead {
  color: var(--white-85);
}

/* Static single row when motion is reduced (the .marquee rules already stop the motion and hide the copies) */
@media (prefers-reduced-motion: reduce) {
  .gallery-hero__marquee {
    grid-template-rows: 1fr;
  }

  .gallery-hero__marquee .marquee__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

/* Tabs strip: the background pattern only starts below the tabs */
.gallery-main::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 140px, var(--navy) 380px);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 140px, var(--navy) 380px);
}

.gallery-filter::before {
  display: none;
}

/* ================= Crypto page ================= */
.crypto-hero {
  padding-top: clamp(112px, 9vw, 136px);
  padding-bottom: clamp(64px, 7vw, 104px);
}

.crypto-hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.crypto-hero h1 {
  font-size: clamp(36px, 5vw, 72px);
  color: var(--color-on-dark);
}

.crypto-hero__lead {
  margin-top: var(--space-3);
  max-width: 48ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

.crypto-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.crypto-coins__grid,
.crypto-steps__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crypto-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: clamp(20px, 2.4vw, 32px) var(--space-2);
  border-radius: var(--radius-card);
  text-align: center;
}

.crypto-coin__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.crypto-coin__icon img {
  display: block;
  width: 62px;
  height: 62px;
}

/* Overlapping cluster of coin logos for the "And more" card; the overlap mirrors in RTL */
.crypto-coin__cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}

.crypto-coin__cluster img {
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.crypto-coin__cluster img + img {
  margin-inline-start: -12px;
}

.crypto-coin {
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.crypto-coin:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.crypto-coin:hover .crypto-coin__icon {
  transform: scale(1.08);
  box-shadow: var(--shadow-md);
}

.crypto-coin__tag {
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--gold-20);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.crypto-coin p {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.crypto-steps {
  background: var(--white);
}

.crypto-step {
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
}

.crypto-step__num {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
}

.crypto-step h3 {
  margin-bottom: var(--space-1);
}

.crypto-step p {
  color: var(--color-text-muted);
}

.crypto-contact__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.crypto-faq h3 {
  margin-bottom: var(--space-2);
}

.crypto-faq__item {
  margin-bottom: var(--space-1);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
}

.crypto-faq__item summary {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-inline-end: 32px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.crypto-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Plus icon: two gold bars. The vertical bar turns and fades out when the question opens, leaving a minus. */
.crypto-faq__item summary::before,
.crypto-faq__item summary::after {
  content: '';
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--gold);
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}

.crypto-faq__item summary::after {
  transform: rotate(90deg);
}

.crypto-faq__item[open] summary::after {
  transform: rotate(180deg);
  opacity: 0;
}

/* Smooth open and close of the answer (height and fade). Browsers without ::details-content just switch instantly. */
.crypto-faq__item {
  interpolate-size: allow-keywords;
}

.crypto-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete;
}

.crypto-faq__item[open]::details-content {
  block-size: auto;
}

.crypto-faq__item p {
  padding-bottom: var(--space-2);
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.crypto-faq__item[open] p {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  .crypto-faq__item::details-content,
  .crypto-faq__item p,
  .crypto-faq__item summary::before,
  .crypto-faq__item summary::after {
    transition: none;
  }
}

.crypto-risk {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gold-45);
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .crypto-coins__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .crypto-steps__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .crypto-hero__grid {
    grid-template-columns: 6fr 5fr;
  }

  .crypto-coins__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .crypto-contact__grid {
    grid-template-columns: 5fr 6fr;
  }
}

/* ================= Companies page ================= */
.companies-hero {
  padding-top: clamp(130px, 13vw, 170px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

.companies-hero__inner {
  max-width: 820px;
  text-align: center;
}

.companies-hero h1 {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
}

.companies-hero__lead {
  margin: var(--space-3) auto 0;
  max-width: 56ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

.co-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.co-filter__btn {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.co-filter__btn:hover,
.co-filter__btn:focus-visible {
  background: var(--gold-20);
}

.co-filter__btn[aria-pressed='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.companies-main .co-card--featured {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .co-card--featured .co-card__link {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-3);
  }

  .co-card--featured .co-card__logo {
    flex: 0 0 min(44%, 480px);
    align-self: center;
  }

  .co-card--featured .co-card__body {
    justify-content: center;
    padding-block: var(--space-2);
  }

  .co-card--featured .co-card__name {
    font-size: clamp(22px, 2.4vw, 32px);
  }

  .co-card--featured .co-card__desc {
    flex: 0 1 auto;
    font-size: var(--fs-lead);
  }
}

@media (min-width: 1100px) {
  .companies-main .co-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================= Company pages ================= */
.cp-hero {
  padding-top: clamp(124px, 13vw, 164px);
  padding-bottom: clamp(44px, 5vw, 72px);
}

.cp-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.cp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

.cp-crumbs li + li::before {
  content: '/';
  margin-inline-end: 6px;
  color: var(--gold);
}

.cp-crumbs a:hover,
.cp-crumbs a:focus-visible {
  color: var(--gold);
}

.cp-crumbs [aria-current='page'] {
  color: var(--white);
}

.cp-hero h1 {
  font-size: var(--fs-h2);
  color: var(--color-on-dark);
}

.cp-tag {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 4px 14px;
  border: 1px solid var(--gold-45);
  border-radius: var(--radius-pill);
  background: var(--gold-12);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.cp-hero__lead {
  margin-top: var(--space-2);
  max-width: 52ch;
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
}

/* Logo tile: same fixed-ratio tile as the company cards, so logos with their own solid background fill it edge to edge */
.cp-logo {
  width: min(100%, 340px);
  aspect-ratio: 600 / 278;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold-45);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.cp-logo picture,
.cp-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cp-about__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.cp-about__text p {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.cp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--gold-45);
}

.cp-facts dt {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cp-facts dd {
  margin: 4px 0 0;
  font-weight: 600;
}

.cp-services {
  background: var(--white);
}

.cp-services__grid,
.cp-plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-service {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  font-weight: 500;
}

.cp-service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.cp-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: clamp(32px, 4vw, 56px);
}

.cp-photos--1 {
  grid-template-columns: 1fr;
}

.cp-photos__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--gold-45);
}

.cp-photos__item picture,
.cp-photos__item img {
  display: block;
  width: 100%;
  height: 100%;
}

.cp-photos__item img {
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.cp-plans__grid .why-card p {
  margin: 0;
  font-size: var(--fs-body);
}

.cp-plans__grid .why-card__icon {
  margin-bottom: var(--space-2);
}

.cp-others__all,
.cp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cp-others__all {
  margin-top: var(--space-5);
}

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

  .cp-plans__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-photos--3,
  .cp-photos--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cp-hero__grid {
    grid-template-columns: 1fr auto;
  }

  .cp-logo {
    width: 340px;
  }

  .cp-about__grid {
    grid-template-columns: 6fr 5fr;
  }

  .cp-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cp-plans__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .cp-photos--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .cp-photos--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cp-photos--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .cp-others .co-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Company pages: a very wide photo (banner) is shown whole instead of cropped */
.about__frame--banner {
  aspect-ratio: auto;
  background: var(--white);
}

.about__frame--banner picture,
.about__frame--banner img {
  height: auto;
}

.about__frame--banner img {
  object-fit: contain;
}

/* Company pages: rich sections (services cards, history, achievements, roadmap, gallery) */
.cp-service {
  font-weight: 400;
}

.cp-service h3 {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
}

.cp-service p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.cp-timeline {
  position: relative;
  display: grid;
  gap: var(--space-3);
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cp-timeline::before {
  content: '';
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 39px;
  width: 1px;
  background: var(--gold-45);
}

.cp-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  align-items: start;
}

.cp-timeline__year {
  position: relative;
  z-index: 1;
  justify-self: center;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-pill);
  background: var(--cream);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy);
}

.cp-timeline__item p {
  padding-top: 4px;
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.cp-note {
  max-width: 820px;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.cp-achievements {
  background: var(--white);
}

.cp-checks {
  display: grid;
  gap: var(--space-2);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cp-checks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-lead);
}

.cp-check {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.cp-roadmap__list {
  position: relative;
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cp-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gold-45);
}

.cp-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.cp-step__num {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
}

.cp-step h3 {
  margin-bottom: 6px;
}

.cp-step p {
  color: var(--color-text-muted);
}

.cp-others {
  background: var(--white);
}

@media (min-width: 1024px) {
  .cp-checks {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3) var(--space-5);
  }
}

/* ===== company page v2: start ===== */
/* Image-led company page (pilot: LULU Exchange). Only the .cv2-* classes below; the other company pages are not affected. */
.cv2-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(560px, 58vw, 740px);
  padding: clamp(130px, 13vw, 170px) 0 clamp(120px, 11vw, 168px);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

.cv2-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cv2-hero__bg picture,
.cv2-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.cv2-hero__bg img {
  object-fit: cover;
  object-position: center 35%;
}

.cv2-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--navy) 2%, var(--navy-85) 30%, var(--navy-45) 62%, var(--navy-60) 100%),
    linear-gradient(90deg, var(--navy-72) 0%, transparent 62%);
}

.cv2-hero .cp-crumbs ol {
  margin-bottom: var(--space-4);
}

.cv2-hero__badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cp-logo.cv2-logo {
  width: clamp(180px, 17vw, 260px);
}

.cv2-hero h1 {
  max-width: 14ch;
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--white);
}

.cv2-hero__lead {
  max-width: 46ch;
  margin-top: var(--space-3);
  font-size: var(--fs-lead);
  color: var(--white-85);
}

/* Numbers strip, overlapping the bottom of the hero */
.cv2-stats {
  position: relative;
  z-index: 2;
  margin-top: clamp(-84px, -7vw, -56px);
}

.cv2-stats__panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 3vw, 36px);
  border-radius: var(--radius-panel);
  background: var(--cream-92);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.cv2-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--gold);
}

.cv2-fact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.cv2-fact strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.cv2-fact span:not(.cv2-fact__icon) {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Story: two photos and the overview */
.cv2-story__grid,
.cv2-strengths__grid {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.cv2-media {
  position: relative;
  padding-bottom: 48px;
}

.cv2-frame {
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-lg);
}

.cv2-media > .cv2-frame:first-child {
  aspect-ratio: 5 / 4;
}

.cv2-frame picture,
.cv2-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.cv2-frame img {
  object-fit: cover;
}

.cv2-frame--small {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 48%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--cream);
  outline: 1px solid var(--gold);
}

.cv2-frame--tall {
  aspect-ratio: 4 / 5;
}

.cv2-frame--tall img {
  object-position: 50% 38%;
}

.cv2-story__text p {
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.cv2-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: var(--space-4);
  padding: 20px 24px;
  border-radius: var(--radius-card);
  background: var(--navy);
  color: var(--white);
}

.cv2-callout__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
}

.cv2-callout strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.cv2-callout span {
  font-size: var(--fs-body);
  color: var(--white-85);
}

/* Service cards with a gold line that draws in on hover */
.cv2-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv2-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cv2-card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

[dir='rtl'] .cv2-card::after {
  transform-origin: right center;
}

.cv2-card:hover,
.cv2-card:focus-within {
  background-color: var(--white-15);
  border-color: var(--gold-60);
}

.cv2-card:hover::after,
.cv2-card:focus-within::after {
  transform: scaleX(1);
}

.cv2-card__photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.cv2-card__photo picture,
.cv2-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

.cv2-card__photo img {
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.cv2-card:hover .cv2-card__photo img {
  transform: scale(1.05);
}

.cv2-card__body {
  position: relative;
  padding: clamp(44px, 4vw, 56px) clamp(24px, 3vw, 36px) clamp(28px, 3vw, 40px);
}

.cv2-card__icon {
  position: absolute;
  top: -36px;
  inset-inline-start: clamp(24px, 3vw, 36px);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 4px solid var(--navy);
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
}

.cv2-card h3 {
  margin-bottom: var(--space-1);
  font-size: clamp(22px, 2vw, 28px);
  color: var(--white);
}

.cv2-card p {
  font-size: var(--fs-body);
  color: var(--white-72);
}

/* Strengths beside a tall photo */
.cv2-strengths__list {
  display: grid;
  gap: var(--space-4) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.cv2-strengths__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cv2-strengths__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.cv2-strengths__list h3 {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
}

.cv2-strengths__list p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Moments: two photo chapters */
.cv2-chapter + .cv2-chapter {
  margin-top: clamp(48px, 6vw, 96px);
}

.cv2-chapter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px var(--space-3);
  margin-bottom: var(--space-3);
}

.cv2-chapter__head h3 {
  font-size: clamp(24px, 2.4vw, 34px);
}

.cv2-chapter__head p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
}

.cv2-chapter__head .icon {
  color: var(--gold);
}

.cv2-mosaic {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: clamp(200px, 56vw, 280px);
  gap: var(--space-2);
}

.cv2-mosaic__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gold-45);
  border-radius: var(--radius-card);
}

.cv2-mosaic__item picture,
.cv2-mosaic__item img {
  display: block;
  width: 100%;
  height: 100%;
}

.cv2-mosaic__item img {
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.cv2-moments__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Roadmap as a vertical timeline */
.cv2-roadmap__photo {
  aspect-ratio: 5 / 4;
  margin-top: var(--space-5);
}

.cv2-roadmap__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.cv2-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv2-timeline::before {
  content: '';
  position: absolute;
  inset-block: 8px 8px;
  inset-inline-start: 11px;
  width: 2px;
  background: var(--gold-45);
}

.cv2-timeline__item {
  position: relative;
  padding-inline-start: 56px;
  padding-bottom: var(--space-5);
}

.cv2-timeline__item:last-child {
  padding-bottom: 0;
}

.cv2-timeline__dot {
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border: 4px solid var(--cream);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.cv2-timeline__item h3 {
  margin-bottom: 6px;
  font-size: clamp(20px, 1.8vw, 26px);
}

.cv2-timeline__item p {
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}

/* Large contact panel */
.cv2-contact__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
  border-radius: var(--radius-panel);
  background: var(--grad-navy);
  color: var(--white);
}

.cv2-contact__text h2 {
  font-size: var(--fs-h2);
  color: var(--white);
}

.cv2-contact__text p {
  max-width: 44ch;
  margin-top: var(--space-2);
  font-size: var(--fs-lead);
  color: var(--white-85);
}

.cv2-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.cv2-contact__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv2-contact__list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cv2-contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
}

.cv2-contact__list strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.cv2-contact__list div > span,
.cv2-contact__list a {
  display: block;
  font-size: var(--fs-body);
  color: var(--white-85);
}

.cv2-contact__list a:hover,
.cv2-contact__list a:focus-visible {
  color: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  .cv2-mosaic__item:hover img {
    transform: scale(1.05);
  }
}

@media (min-width: 640px) {
  .cv2-stats__panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .cv2-strengths__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .cv2-services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .cv2-story__grid {
    grid-template-columns: 6fr 5fr;
  }

  .cv2-strengths__grid {
    grid-template-columns: 5fr 6fr;
  }

  .cv2-mosaic {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(150px, 15vw, 230px);
    gap: var(--space-3);
  }

  .cv2-mosaic__item--lead {
    grid-column: span 7;
    grid-row: span 2;
  }

  .cv2-mosaic__item:not(.cv2-mosaic__item--lead) {
    grid-column: span 5;
  }

  .cv2-mosaic--two .cv2-mosaic__item:not(.cv2-mosaic__item--lead) {
    grid-row: span 2;
  }

  .cv2-mosaic--three {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(190px, 17vw, 270px);
  }

  .cv2-mosaic--three .cv2-mosaic__item,
  .cv2-mosaic--three .cv2-mosaic__item:not(.cv2-mosaic__item--lead) {
    grid-column: auto;
    grid-row: auto;
  }

  .cv2-roadmap__grid {
    grid-template-columns: 4fr 7fr;
  }

  .cv2-roadmap__head {
    position: sticky;
    top: 120px;
  }

  .cv2-contact__panel {
    grid-template-columns: 6fr 5fr;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cv2-card::after,
  .cv2-card__photo img,
  .cv2-mosaic__item img {
    transition: none;
  }
}

/* ----- v2 modules for the other company pages ----- */
.cv2-hero--clear::after {
  background:
    linear-gradient(to top, var(--navy) 0%, var(--navy-45) 24%, transparent 48%),
    linear-gradient(90deg, var(--navy-85) 0%, var(--navy-60) 42%, var(--navy-15) 78%, transparent 100%);
}

.cv2-hero--logo {
  min-height: clamp(460px, 44vw, 580px);
  background: var(--grad-navy);
}

.cv2-hero--logo::after {
  display: none;
}

.cv2-hero--logo .pattern {
  opacity: 0.08;
}

.cv2-hero__split {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.cv2-hero--split .cv2-hero__inner h1 {
  max-width: 16ch;
}

.cp-logo.cv2-logo--xl {
  width: min(100%, clamp(240px, 26vw, 400px));
  box-shadow: 0 0 0 10px var(--white-10), 0 0 0 11px var(--gold-45), var(--shadow-lg);
}

.cv2-hero--center {
  text-align: center;
}

.cv2-hero--center .cv2-hero__badge,
.cv2-hero--center .cp-crumbs ol {
  justify-content: center;
}

.cv2-hero--center h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.cv2-hero--center .cv2-hero__lead {
  margin-inline: auto;
}

.cv2-hero--center .cp-tag {
  margin-top: var(--space-3);
}

.cv2-hero--long h1 {
  max-width: 20ch;
  font-size: clamp(36px, 4.8vw, 68px);
}

.cv2-stats__panel--4 {
  grid-template-columns: repeat(2, 1fr);
}

/* Small phones: two icon + text columns do not fit, so the facts stack in one column */
@media (max-width: 480px) {
  .cv2-stats__panel,
  .cv2-stats__panel--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .cv2-fact > div {
    min-width: 0;
  }
}

.cv2-story--flip .cv2-media {
  order: 0;
}

.cv2-media--single {
  padding-bottom: 0;
}

.cv2-media.cv2-media--single > .cv2-frame.cv2-frame--landscape:first-child {
  aspect-ratio: 4 / 3;
}

.cv2-media.cv2-media--single > .cv2-frame.cv2-frame--portrait:first-child {
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin-inline: auto;
}

.cv2-media.cv2-media--single > .cv2-frame.cv2-frame--contain:first-child {
  aspect-ratio: auto;
  padding: 14px;
  background: var(--white);
}

.cv2-frame--contain img {
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.cv2-story--text .cv2-story__grid {
  align-items: start;
}

.cv2-card--plain {
  padding: clamp(28px, 3vw, 40px);
}

.cv2-card__icon--static {
  position: static;
  margin-bottom: var(--space-3);
  border: 0;
}

.cv2-services--light {
  background: var(--white);
}

.cv2-services--light .cv2-card h3 {
  color: var(--navy);
}

.cv2-services--light .cv2-card p {
  color: var(--color-text-muted);
}

.cv2-services--light .cv2-card:hover,
.cv2-services--light .cv2-card:focus-within {
  background-color: var(--cream);
  border-color: var(--gold);
}

.cv2-services__grid--flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.cv2-services__grid--flex > li {
  flex: 1 1 100%;
}

.cv2-strengths__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv2-strength {
  flex: 1 1 100%;
  padding: clamp(24px, 2.6vw, 32px);
  border-radius: var(--radius-card);
}

.cv2-strengths__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}

.cv2-strength h3 {
  margin-bottom: 6px;
  font-size: var(--fs-h3);
}

.cv2-strength p {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.cv2-roadmap--stack .cv2-roadmap__grid {
  grid-template-columns: 1fr;
  justify-items: center;
}

.cv2-roadmap--stack .cv2-roadmap__head {
  position: static;
  text-align: center;
}

.cv2-roadmap--stack .cv2-timeline {
  width: 100%;
  max-width: 860px;
}

.cv2-band .cv2-mosaic__item {
  min-height: 260px;
}

@media (min-width: 640px) {
  .cv2-services__grid--flex > li,
  .cv2-strength {
    flex-basis: calc((100% - var(--space-3)) / 2);
  }
}

@media (min-width: 900px) {
  .cv2-hero__split {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .cv2-hero__logo {
    justify-self: end;
  }

  .cv2-services__grid--flex > li,
  .cv2-strength {
    flex-basis: calc((100% - 2 * var(--space-3)) / 3);
    max-width: calc((100% - 2 * var(--space-3)) / 3);
  }
}

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

  .cv2-story--flip .cv2-media {
    order: 2;
  }

  .cv2-story--text .cv2-story__grid {
    grid-template-columns: 4fr 7fr;
  }

  .cv2-band .cv2-mosaic--three {
    grid-auto-rows: clamp(260px, 26vw, 420px);
  }
}

/* Company pages, phones and tablets: hero title and photos scale with the screen (smaller on small devices, full size from 1024px).
   Only sizes change, every object-position (photo focus) stays as it is. */
@media (max-width: 1023px) {
  .cv2-hero {
    min-height: clamp(480px, 58vw, 740px);
  }

  .cv2-hero h1 {
    font-size: clamp(32px, 6.2vw, 63px);
  }

  .cv2-hero--long h1 {
    font-size: clamp(32px, 4.8vw, 49px);
  }

  .cv2-frame--small {
    width: 42%;
  }

  .cv2-mosaic {
    grid-auto-rows: clamp(170px, 50vw, 280px);
  }

  .cv2-band .cv2-mosaic__item {
    min-height: clamp(190px, 40vw, 260px);
  }
}

/* ===== company page v2: end ===== */

/* Companies page: hero background image (calm navy overlay keeps the heading readable) */
.companies-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.companies-hero__bg picture,
.companies-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.companies-hero__bg img {
  object-fit: cover;
  object-position: 50% 30%;
}

.companies-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, var(--navy-92) 0%, var(--navy-85) 45%, var(--navy-72) 100%),
    linear-gradient(to bottom, var(--navy-85) 0%, var(--navy-60) 100%);
}

.companies-hero .eyebrow {
  color: var(--gold);
}

.companies-hero__lead {
  color: var(--white-85);
}



/* ================= Royal polish: hero tagline, consistent photo frames ================= */
/* Photos share one warm tone and a gold hairline, like the framed photos in the company pages */
.gs-tile img,
.event-card__media img,
.team-card__photo img {
  filter: saturate(0.94) contrast(1.03);
}

.gs-tile,
.event-card__media {
  box-shadow: 0 0 0 1px var(--gold-60), var(--shadow-md);
}

.gs-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy-35), transparent 45%);
  pointer-events: none;
}

/* Star dividers sit in the top padding of every light section, above the heading */
.section > .decor-divider {
  top: 24px;
}

/* Web view only: the wide crop of the gallery hero photo keeps the top, so the faces stay below the navbar */
@media (min-width: 1024px) {
  .gs-hero img {
    object-position: center top;
  }
}

/* Company pages: tighter vertical rhythm between sections (home and about keep the default section padding) */
.cv2 > .section {
  padding-block: clamp(48px, 5.5vw, 80px);
}

/* Company cards: GSAP leaves an inline transform on the cards, which blocks a transform-based hover.
   The lift uses top instead, so it works on the home page, the companies page and "other companies". */
.co-card {
  position: relative;
  top: 0;
  transition: top var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.co-card:hover,
.co-card:focus-within {
  transform: none;
  top: -8px;
  border-color: var(--gold);
  box-shadow: 0 24px 48px var(--navy-15), 0 0 0 1px var(--gold-45);
}

.co-card__name {
  transition: color var(--dur) var(--ease);
}

.co-card:hover .co-card__name,
.co-card:focus-within .co-card__name {
  color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .co-card:hover,
  .co-card:focus-within {
    top: 0;
  }
}

/* Contact form: Cloudflare human check */
.field--human {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Contact form: hidden spam trap and send error */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-error {
  margin: 0 0 var(--space-2);
  padding: 10px 14px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--gold-12);
  font-size: 14px;
  color: var(--navy);
}

.form-error[hidden] {
  display: none;
}

/* Company page heroes on tablet and phone: the photo is cropped tall and narrow there, so each page sets where
   its photo is centred (--hero-pos-t for tablet, --hero-pos-m for phone) on the .cv2-hero__bg element. */
@media (max-width: 1023px) {
  .cv2-hero__bg img {
    object-position: var(--hero-pos-t, center 35%);
  }

  /* The side shadow only helps when the text sits in a column. Here the text is full width, so shade from below. */
  .cv2-hero::after,
  .cv2-hero--clear::after {
    background:
      linear-gradient(to top, var(--navy) 0%, var(--navy-85) 26%, var(--navy-45) 52%, transparent 78%),
      linear-gradient(to bottom, var(--navy-60) 0%, transparent 26%);
  }
}

@media (max-width: 767px) {
  .cv2-hero__bg img {
    object-position: var(--hero-pos-m, var(--hero-pos-t, center 35%));
  }
}

/* About page, phone only: the big photo sits right under "He is both a figure in government...", then the three cards,
   then the two other photos. display: contents lets the photos and cards be reordered as one list. */
@media (max-width: 767px) {
  .about-career__grid {
    gap: var(--space-4);
  }

  .about-career__main,
  .about-photos {
    display: contents;
  }

  .about-career__main .section-head {
    order: 1;
    margin-bottom: 0;
  }

  .about-photos__item--main {
    order: 2;
  }

  .about-career__cards {
    order: 3;
  }

  .about-photos__item:not(.about-photos__item--main) {
    order: 4;
  }
}

/* About page: sections alternate cream and navy. Business Ventures is navy with cream cards; "Leadership" and
   "Looking ahead" are cream and read as one block. The card lift on hover uses top, because GSAP leaves an inline
   transform on the cards. */
.about-ventures::before {
  display: none;
}

.about-ventures .about-venture {
  position: relative;
  top: 0;
  background: var(--cream);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--gold-60);
  color: var(--navy);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: top var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.about-ventures .about-venture:hover,
.about-ventures .about-venture:focus-within {
  transform: none;
  top: -8px;
  border-color: var(--gold);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--gold-45);
}

.about-ventures .about-venture__logo {
  border-color: var(--gold-35);
  box-shadow: 0 2px 8px var(--navy-08);
}

.about-ventures .about-venture__name {
  transition: color var(--dur) var(--ease);
}

.about-ventures .about-venture:hover .about-venture__name,
.about-ventures .about-venture:focus-within .about-venture__name {
  color: var(--teal);
}

/* "Leadership" (now cream) uses the light card look */
.about-vision .why-card p {
  color: var(--color-text-muted);
}

.about-vision .why-card__icon {
  color: var(--navy);
  border-color: var(--gold);
}

/* "Leadership" and "Looking ahead" sit together as one cream block */
.about-vision {
  padding-bottom: calc(var(--section-pad) * 0.45);
}

.about-future {
  padding-top: calc(var(--section-pad) * 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .about-ventures .about-venture:hover,
  .about-ventures .about-venture:focus-within {
    top: 0;
  }
}

/* About page, phone only: show three companies and a "View All Companies" button under them */
.about-ventures__more {
  display: none;
}

@media (max-width: 767px) {
  .about-ventures__grid .about-venture:nth-child(n + 4) {
    display: none;
  }

  .about-ventures__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-5);
  }
}

/* Crypto page, phone and tablet: the last card ("And more") stretches across the free space instead of leaving a gap */
@media (max-width: 767px) {
  .crypto-coins__grid > .crypto-coin:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .crypto-coins__grid > .crypto-coin:last-child {
    grid-column: span 2;
  }
}

/* Crypto page, phone and tablet: the third "who you deal with" card stretches across the row instead of sitting alone */
@media (max-width: 1023px) {
  .crypto-why .why-grid > .why-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Crypto page, phone: the third "How to get started" step stretches across the row instead of sitting alone */
@media (max-width: 767px) {
  .crypto-steps__list > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Company pages, "Other companies": on phones and tablets the cards sit in two columns, so the last one stretches across the row */
@media (max-width: 1023px) {
  .cp-others .co-grid > .co-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Gallery hero: the same gold pattern as the other dark heroes, above the photo fade and below the text */
.gallery-hero--photos > .pattern {
  z-index: 0;
}

/* Gallery hero photos never pause (not on hover, not on focus) */
.gallery-hero__marquee .marquee .marquee__track {
  animation-play-state: running !important;
}

/* Gallery hero: no dark patch behind the text any more, so the text gets its own soft shadow to stay readable on the photos */
.gallery-hero--photos .gallery-hero__inner h1,
.gallery-hero--photos .gallery-hero__lead,
.gallery-hero--photos .eyebrow {
  text-shadow: 0 2px 16px var(--navy-92), 0 0 3px var(--navy-60);
}

/* About hero: it already has the gold pattern element, so the second (lighter) pattern layer is switched off.
   Two patterns with different tile sizes on top of each other made crossing lines. */
.about-hero::before {
  display: none;
}

/* Every dark section that already has the gold pattern element switches off the second, lighter pattern layer,
   so two patterns never sit on top of each other and cross. (Replaces the about-only rule above.) */
.section--dark:has(> .pattern)::before {
  display: none;
}

/* Gallery hero: no separate dark glow behind the text. The whole photo area has the same deep shade instead. */
.gallery-hero--photos .gallery-hero__inner::before {
  display: none;
}